:root{--bg: #0c120d;
  --bg-deep: #070c08;
  --forest: #2D3E2E;
  --forest-light: #3d5540;
  --forest-soft: #263829;
  --panel: rgba(35, 51, 37, 0.9);
  --panel-strong: rgba(27, 42, 30, 0.98);
  --line: rgba(214, 180, 95, 0.28);
  --gold: #d6b45f;
  --gold-soft: #f0d990;
  --ivory: #f7f5ed;
  --text: #f7f5ed;
  --muted: #b7c1b5;
  --danger: #ff9a9a;
  --success: #a9e4b4;
  --shadow: 0 24px 80px rgba(4, 10, 5, 0.48);}
*{box-sizing: border-box;}
html{background: var(--bg);}
body{margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(95, 74, 185, 0.22), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(23, 130, 145, 0.15), transparent 28%),
    linear-gradient(145deg, #080914 0%, #0d0d18 48%, #05060b 100%);
  overflow-x: hidden;}
button,input,select,textarea{font: inherit;}
button{cursor: pointer;}
.sparkles{position: fixed; inset: 0; pointer-events: none; overflow: hidden;}
.sparkles span{position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0;
  animation: drift 7s linear infinite;}
.sparkles span:nth-child(1){left: 8%; animation-delay: 0s;}
.sparkles span:nth-child(2){left: 23%; animation-delay: 2.4s;}
.sparkles span:nth-child(3){left: 48%; animation-delay: 1.1s;}
.sparkles span:nth-child(4){left: 72%; animation-delay: 4.2s;}
.sparkles span:nth-child(5){left: 90%; animation-delay: 3s;}
.eyebrow{margin: 0 0 8px; color: var(--gold); font-size: 12px; letter-spacing: .22em; font-weight: 800; text-transform: uppercase;}
.btn{border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;}
.btn:hover:not(:disabled){transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.075);}
.btn:active:not(:disabled){transform: translateY(0) scale(.98);}
.btn:disabled{opacity: .45; cursor: not-allowed;}
.btn.primary{color: #17120a; font-weight: 800; border-color: rgba(255,255,255,.18); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); box-shadow: 0 10px 25px rgba(232,196,103,.18);}
.btn.primary:hover:not(:disabled){box-shadow: 0 14px 34px rgba(232,196,103,.28), 0 0 22px rgba(232,196,103,.14);}
.login-screen{min-height: 100vh; display: grid; place-items: center; padding: 20px; position: relative;}
.login-card{width: min(480px, 96vw); padding: 34px; border-radius: 17px; border: 1px solid rgba(232,196,103,.28); background: rgba(29,44,31,.94); box-shadow: 0 35px 120px rgba(3,9,4,.62), inset 0 0 70px rgba(214,180,95,.045); text-align: center; backdrop-filter: blur(18px);}
.login-emblem{width: 96px; height: 96px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 19px; background: url("/images/titleframe3.png") center / cover no-repeat; border: none; animation: emblemFloat 3.2s ease-in-out infinite;}
.login-emblem img{width: 62px; height: 62px;}
.login-card h1{font-family: Georgia, serif; font-size: 34px; margin: 0 0 10px;}
.login-card .login-title-gold{display: inline-block; color: #f3d58b; background-image: linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%), linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%); background-size: 100% 100%, 220% 100%; background-position: center center, 18% center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 1px 0 rgba(255,248,214,.18), 0 2px 12px rgba(95,64,9,.35), 0 0 1px rgba(255,232,154,.22); filter: drop-shadow(0 1px 1px rgba(47,29,7,.35));}
.login-card p{color: var(--muted); line-height: 1.6;}
.code-input{width: 100%; margin: 18px 0 12px; padding: 15px 16px; border-radius: 9px; border: 1px solid rgba(232,196,103,.3); background: rgba(0,0,0,.28); color: var(--text); text-align: center; text-transform: uppercase; letter-spacing: .14em; outline: none;}
.code-input:focus{border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,196,103,.08), 0 0 24px rgba(232,196,103,.08);}
.error{color: #ff9baa !important; font-size: 13px;}
.loading{min-height: 100vh; display: grid; place-items: center; color: var(--muted); text-align: center;}
.spinner{width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--gold); animation: spin .8s linear infinite; margin: 0 auto 12px;}
.service-error{margin: 16px 0; padding: 14px; border: 1px solid rgba(255,108,131,.34); border-radius: 9px; background: rgba(255,108,131,.08); text-align: left;}
.service-error strong{display: block; color: #ffd2d9; margin-bottom: 5px;}
.service-error p{margin: 0 0 12px; color: #ffb5c1; font-size: 13px; line-height: 1.5;}
@media (max-width: 680px){.login-card{padding: 27px 20px;}}
@media (prefers-reduced-motion: reduce){.sparkles span,.login-emblem{animation-duration: 8s;}
.btn{transition-duration: .12s;}}
html{background: var(--bg-deep);}
body{background:
    radial-gradient(circle at 14% 6%, rgba(214, 180, 95, 0.11), transparent 29%),
    radial-gradient(circle at 84% 10%, rgba(49, 70, 52, 0.34), transparent 31%),
    radial-gradient(circle at 50% 100%, rgba(35, 50, 37, 0.46), transparent 46%),
    linear-gradient(145deg, #0d140e 0%, #121c14 48%, #070c08 100%);}
.btn{color: var(--ivory);
  background: rgba(247,245,237,.055);
  border-color: rgba(247,245,237,.14);}
.btn:hover:not(:disabled){color: var(--ivory);
  border-color: rgba(214,180,95,.48);
  background: #3a503c;
  box-shadow: 0 10px 24px rgba(4,10,5,.28);}
.btn.primary{color: #182119;
  background: linear-gradient(135deg, #f4e2a7, #d4af54);
  border-color: rgba(255,255,255,.25);}
.btn.primary:hover:not(:disabled){color: #101711;
  background: linear-gradient(135deg, #fff1bc, #e1bf67);
  box-shadow: 0 14px 34px rgba(214,180,95,.3), 0 0 22px rgba(214,180,95,.14);}
.login-card{background: rgba(29,44,31,.94); box-shadow: 0 35px 120px rgba(3,9,4,.62), inset 0 0 70px rgba(214,180,95,.045);}
.login-emblem{background: url("/images/titleframe3.png") center / cover no-repeat;}
.access-notice{margin: 14px 0; padding: 11px 13px; border-radius: 8px; border: 1px solid rgba(214,180,95,.3); color: var(--gold-soft); background: rgba(214,180,95,.07); font-size: 13px; line-height: 1.45;}
:root{--button-depth: rgba(3, 9, 4, .42);}
body::before{content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(30deg, rgba(247,245,237,.08) 12%, transparent 12.5%, transparent 87%, rgba(247,245,237,.08) 87.5%),
    linear-gradient(150deg, rgba(214,180,95,.065) 12%, transparent 12.5%, transparent 87%, rgba(214,180,95,.065) 87.5%),
    linear-gradient(30deg, rgba(247,245,237,.04) 12%, transparent 12.5%, transparent 87%, rgba(247,245,237,.04) 87.5%);
  background-size: 44px 77px;
  background-position: 0 0, 0 0, 22px 38px;
  mix-blend-mode: soft-light;
  mask-image: radial-gradient(ellipse at center, black 25%, rgba(0,0,0,.78) 74%, transparent 112%);}
.login-screen,.loading{position: relative; z-index: 1;}
.sparkles{position: fixed; z-index: 2;}
.btn{position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -3px 0 rgba(1,7,2,.3),
    0 5px 0 rgba(3,9,4,.32),
    0 10px 20px rgba(3,9,4,.18);
  transform: translateY(0);}
.btn::before{content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 42%);
  mix-blend-mode: soft-light;}
.btn:hover:not(:disabled){transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(1,7,2,.26),
    0 7px 0 rgba(3,9,4,.28),
    0 14px 24px rgba(3,9,4,.22);}
.btn:active:not(:disabled){transform: translateY(3px);
  box-shadow: inset 0 2px 5px rgba(1,7,2,.28), 0 2px 0 rgba(3,9,4,.3);}
.login-screen::before{content: none;}
.login-screen{isolation: isolate;
  overflow: hidden;
  background-color:#0d1710!important;
  background-image:none!important;}
.login-screen::before{content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(246, 237, 200, .18) 1px, transparent 1.2px),
    repeating-linear-gradient(135deg, rgba(214, 180, 95, .035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(45deg, rgba(247, 245, 237, .018) 0 1px, transparent 1px 24px);
  background-size: 25px 25px, 58px 58px, 76px 76px;
  mix-blend-mode: soft-light;}
.login-screen::after{content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .68 !important;
  background:
    radial-gradient(circle at 14% 6%,rgba(214,180,95,.10),transparent 29%),
    radial-gradient(circle at 84% 10%,rgba(44,67,48,.34),transparent 31%),
    radial-gradient(circle at 50% 100%,rgba(34,53,38,.46),transparent 46%),
    linear-gradient(145deg,#0d160f 0%,#142118 48%,#09100b 100%) !important;
  mix-blend-mode:normal !important;}
.login-card{position: relative;
  overflow: visible;
  margin-top: clamp(150px, 20vh, 250px);
  z-index: 2;}
.login-character{position: absolute;
  left: 50%;
  bottom: calc(100% - 174px);
  width: clamp(270px, 27vw, 342px);
  aspect-ratio: 1024 / 1535;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .38));}
.login-character img{display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;}
.login-emblem{position: relative;
  z-index: 6;}
.login-card > .eyebrow,.login-card > h1,.login-card > p,.login-card > input,.login-card > .access-notice,.login-card > .service-error,.login-card > .error,.login-card > button{position: relative;
  z-index: 3;}
.login-card > h1{z-index: 5;}
@media (max-width: 680px){.login-card{margin-top: clamp(118px, 18vh, 180px);}
.login-character{left: calc(50% + 14px);
    bottom: calc(100% - 132px);
    width: clamp(230px, 72vw, 300px);}}
@media (max-height: 780px) and (min-width: 681px){.login-card{margin-top: 150px;
    transform: scale(.92);
    transform-origin: center center;}
.login-character{left: calc(50% + 18px);
    bottom: calc(100% - 136px);
    width: 300px;}}
.login-card .login-character{left: calc(50% + 28px) !important;
  bottom: calc(100% - 208px) !important;}
.login-card .login-emblem{position: relative;
  z-index: 6;
  border: 14px solid transparent !important;
  border-image: url("/images/titleframe2.png") 24 fill stretch !important;
  background: url("/images/titleframe3.png") center / cover no-repeat !important;
  border: none !important;
  box-shadow:
    0 14px 36px rgba(3, 9, 4, .36),
    inset 0 1px 0 rgba(247, 245, 237, .08),
    inset 0 -10px 24px rgba(12, 25, 14, .18),
    inset 0 0 22px rgba(214, 180, 95, .08) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;}
.login-card .login-emblem img{position: relative;
  z-index: 2;
  opacity: 1;}
@media (max-width: 680px){.login-card .login-character{left: calc(50% + 18px) !important;
    bottom: calc(100% - 166px) !important;}}
@media (max-height: 780px) and (min-width: 681px){.login-card .login-character{left: calc(50% + 24px) !important;
    bottom: calc(100% - 176px) !important;}}
.login-screen{position: relative;
  isolation: isolate;}
.login-screen::before{content: "" !important;
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-image:
    radial-gradient(circle at center, rgba(242, 221, 155, .11) 0 1px, transparent 1.6px),
    linear-gradient(30deg, transparent 0 46%, rgba(214, 180, 95, .055) 46.5% 47.5%, transparent 48% 100%),
    linear-gradient(150deg, transparent 0 46%, rgba(214, 180, 95, .045) 46.5% 47.5%, transparent 48% 100%),
    repeating-linear-gradient(135deg, rgba(247, 245, 237, .025) 0 1px, transparent 1px 13px);
  background-size: 30px 30px, 72px 124px, 72px 124px, 46px 46px;
  background-position: 0 0, 0 0, 36px 62px, 0 0;}
.login-screen::after{z-index: 1 !important;}
.login-screen > .sparkles{position: fixed;
  z-index: 2;}
.login-screen > .login-card{z-index: 3;}
.login-card .login-character{left: calc(50% + 42px) !important;
  bottom: calc(100% - 188px) !important;}
@media (max-width: 680px){.login-card .login-character{left: calc(50% + 27px) !important;
    bottom: calc(100% - 150px) !important;}}
@media (max-height: 780px) and (min-width: 681px){.login-card .login-character{left: calc(50% + 36px) !important;
    bottom: calc(100% - 160px) !important;}}
.login-card .login-emblem img{width: 68px;
  height: 68px;
  object-fit: contain;}
.app-shell > .sparkles{position: relative;
  z-index: 1;}
.app-shell > .sparkles{position: fixed; z-index: 2;}
.sound-toggle{position: relative;
  flex: 0 0 auto;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 3px 0 2px;
  border: 1px solid rgba(214, 180, 95, .28);
  border-radius: 50%;
  color: var(--gold-soft);
  background:
    radial-gradient(circle at 50% 30%, rgba(214,180,95,.16), transparent 56%),
    linear-gradient(145deg, rgba(44,61,43,.78), rgba(20,31,22,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 7px 16px rgba(0,0,0,.2),
    0 0 16px rgba(214,180,95,.07);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;}
.sound-toggle::before{content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(247,245,237,.045);
  pointer-events: none;}
.sound-toggle:hover{transform: translateY(-1px) scale(1.04);
  border-color: rgba(214,180,95,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 9px 20px rgba(0,0,0,.24),
    0 0 20px rgba(214,180,95,.13);}
.sound-toggle > span{position: relative;
  z-index: 1;
  display: block;
  font-size: 17px;
  line-height: 14px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(214,180,95,.3);}
.sound-toggle > small{position: relative;
  z-index: 1;
  display: block;
  margin-top: 2px;
  font-size: 7px;
  line-height: 7px;
  font-weight: 900;
  letter-spacing: .08em;}
.sound-toggle.is-off{color: rgba(247,245,237,.42);
  border-color: rgba(247,245,237,.12);
  opacity: .76;
  filter: saturate(.55);}
.sound-toggle.is-on > span{animation: sfxNotePulse 2.4s ease-in-out infinite;}
@media (max-width: 760px){.sound-toggle{width: 34px;
    height: 34px;}
.sound-toggle > span{font-size: 14px; line-height: 12px;}
.sound-toggle > small{font-size: 6px;}}
@media (prefers-reduced-motion: reduce){.sound-toggle.is-on > span{animation: none;}}
.audio-controls{display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;}
@media (max-width: 760px){.audio-controls{gap: 4px;}}
.audio-controls{width: 132px;
  height: 38px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 2px !important;
  flex: 0 0 132px;
  padding: 1px 5px;
  border: 1px solid rgba(214,180,95,.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(214,180,95,.035), transparent 38%, rgba(243,184,203,.025)),
    rgba(14,23,16,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);}
.audio-slider-row{display: grid;
  grid-template-columns: 18px 25px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-height: 15px;
  color: var(--gold-soft);}
.audio-slider-row.music-row{color: #f3b8cb;}
.audio-slider-row.is-muted{opacity: .55; filter: saturate(.55);}
.audio-icon-button.sound-toggle,.audio-icon-button.sound-toggle:hover{width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 8px currentColor;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  background: rgba(17,28,19,.82);}
.audio-icon-button.sound-toggle::before{inset: 2px;}
.audio-icon-button.sound-toggle > span{font-size: 9px !important;
  line-height: 1 !important;
  text-shadow: 0 0 7px currentColor;
  animation: none !important;}
.audio-slider-label{font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  color: currentColor;
  opacity: .92;}
.audio-volume-slider{--audio-level: 50%;
  width: 100%;
  height: 12px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;}
.audio-volume-slider::-webkit-slider-runnable-track{height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, currentColor 0 var(--audio-level), rgba(247,245,237,.13) var(--audio-level) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 7px color-mix(in srgb, currentColor 25%, transparent);}
.audio-volume-slider::-webkit-slider-thumb{appearance: none;
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -2.5px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0,0,0,.5);}
.audio-volume-slider::-moz-range-track{height: 4px;
  border-radius: 10px;
  background: rgba(247,245,237,.13);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);}
.audio-volume-slider::-moz-range-progress{height: 4px;
  border-radius: 10px;
  background: currentColor;
  box-shadow: 0 0 7px color-mix(in srgb, currentColor 25%, transparent);}
.audio-volume-slider::-moz-range-thumb{width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0,0,0,.5);}
.audio-volume-slider:focus-visible{outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 10px;}
@media (max-width: 1180px){.audio-controls{width: 112px; flex-basis: 112px;}
.audio-slider-row{grid-template-columns: 17px 22px minmax(0, 1fr); gap: 2px;}}
@media (max-width: 760px){.audio-controls{width: 84px; flex-basis: 84px; padding-inline: 3px;}
.audio-slider-row{grid-template-columns: 16px minmax(0, 1fr);}
.audio-slider-label{display: none;}
.audio-icon-button.sound-toggle{width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important;}}
.audio-controls{width: 156px !important;
  flex-basis: 156px !important;
  height: 38px !important;
  padding: 1px 7px !important;
  gap: 3px !important;}
.audio-slider-row{grid-template-columns: 20px 29px minmax(0, 1fr) !important;
  gap: 4px !important;
  min-height: 16px !important;}
.audio-icon-button.sound-toggle,.audio-icon-button.sound-toggle:hover{width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;}
.audio-icon-button.sound-toggle > span{font-size: 10px !important;}
.audio-slider-label{font-size: 8px !important;
  letter-spacing: .09em !important;}
.audio-volume-slider{height: 14px !important;}
.audio-volume-slider::-webkit-slider-runnable-track{height: 5px !important;}
.audio-volume-slider::-webkit-slider-thumb{width: 11px !important;
  height: 11px !important;
  margin-top: -3px !important;}
.audio-volume-slider::-moz-range-track,.audio-volume-slider::-moz-range-progress{height: 5px !important;}
.audio-volume-slider::-moz-range-thumb{width: 11px !important;
  height: 11px !important;}
@media (max-width: 1180px){.audio-controls{width: 136px !important; flex-basis: 136px !important;}
.audio-slider-row{grid-template-columns: 19px 25px minmax(0, 1fr) !important; gap: 3px !important;}}
@media (max-width: 760px){.audio-controls{width: 96px !important; flex-basis: 96px !important; padding-inline: 4px !important;}
.audio-slider-row{grid-template-columns: 18px minmax(0, 1fr) !important;}
.audio-slider-label{display: none !important;}}
.audio-icon-button.sound-toggle,.audio-icon-button.sound-toggle:hover{display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;}
.audio-icon-button.sound-toggle > span{display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  line-height: 1 !important;
  transform: translateY(-.4px);}
.login-screen{display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;}
.login-screen > .login-card,.login-screen > .login-audio-controls{position: relative;
  z-index: 3;}
.login-audio-controls.audio-controls{width: min(330px, 86vw) !important;
  flex-basis: auto !important;
  height: 46px !important;
  padding: 4px 12px !important;
  border-color: rgba(214,180,95,.24);
  background: rgba(18,29,20,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 38px rgba(3,9,4,.3), inset 0 1px rgba(255,255,255,.04);}
.login-audio-controls .audio-slider-row{grid-template-columns: 22px 34px minmax(0, 1fr) !important;}
@media (max-width: 680px){.login-audio-controls.audio-controls{width: min(300px, 88vw) !important;}
.login-audio-controls .audio-slider-row{grid-template-columns: 19px 28px minmax(0, 1fr) !important;}}
select,button,textarea{border-radius: 6px !important;}
.app-shell.entry-transition-entering,.app-shell.entry-transition-dissolving{height: 100vh;
  overflow: hidden;}
.entry-transition-overlay{position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 180, 95, .15), transparent 31%),
    radial-gradient(circle at 50% 66%, rgba(45, 82, 57, .36), transparent 44%),
    linear-gradient(145deg, rgba(5, 10, 7, .985), rgba(16, 27, 18, .972) 48%, rgba(5, 9, 7, .988));
  -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  isolation: isolate;
  animation: entryOverlayArrive .36s ease-out both;
  cursor: progress;}
.entry-transition-overlay::before,.entry-transition-overlay::after{content: "";
  position: absolute;
  pointer-events: none;}
.entry-transition-overlay::before{inset: -30%;
  z-index: -2;
  background: conic-gradient(
    from 25deg,
    transparent 0 13%,
    rgba(214, 180, 95, .035) 14% 16%,
    transparent 17% 37%,
    rgba(92, 137, 99, .045) 38% 40%,
    transparent 41% 65%,
    rgba(214, 180, 95, .03) 66% 68%,
    transparent 69% 100%
  );
  animation: entryBackdropTurn 18s linear infinite;}
.entry-transition-overlay::after{inset: 0;
  z-index: 8;
  opacity: 0;
  background:
    linear-gradient(112deg, transparent 0 44%, rgba(255, 244, 201, .13) 49%, transparent 55%),
    radial-gradient(circle at center, rgba(240, 217, 144, .09), transparent 46%);
  mix-blend-mode: screen;}
.entry-transition-atmosphere{position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;}
.entry-transition-atmosphere span{position: absolute;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  animation: entryAtmosphereDrift 5.8s ease-in-out infinite alternate;}
.entry-transition-atmosphere span:nth-child(1){left: -19%;
  top: -35%;
  background: #72906d;}
.entry-transition-atmosphere span:nth-child(2){right: -20%;
  top: 4%;
  background: #d6b45f;
  animation-delay: -1.7s;}
.entry-transition-atmosphere span:nth-child(3){left: 25%;
  bottom: -47%;
  background: #355b41;
  animation-delay: -3.1s;}
.entry-transition-lattice{position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(240, 217, 144, .2) 0 1px, transparent 1.7px),
    linear-gradient(45deg, transparent 48.9%, rgba(214, 180, 95, .055) 49.35% 50.65%, transparent 51.1%),
    linear-gradient(-45deg, transparent 48.9%, rgba(247, 245, 237, .034) 49.35% 50.65%, transparent 51.1%);
  background-size: 92px 92px;
  background-position: 46px 46px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.85) 52%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.85) 52%, transparent 88%);
  animation: entryLatticeBreath 2.8s ease-in-out infinite;}
.entry-transition-stage{position: relative;
  width: min(920px, 96vw);
  height: min(820px, 89vh);
  display: grid;
  place-items: center;
  text-align: center;
  animation: entryStageArrive .72s cubic-bezier(.18,.82,.24,1) both;}
.entry-transition-seal{position: absolute;
  left: 50%;
  top: 45%;
  width: clamp(315px, 50vw, 610px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: .82;
  filter: drop-shadow(0 0 38px rgba(214,180,95,.16));}
.entry-transition-seal i{position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(214, 180, 95, .25);
  box-shadow: inset 0 0 28px rgba(214,180,95,.035), 0 0 28px rgba(214,180,95,.025);
  animation: entrySealTurn 9s linear infinite;}
.entry-transition-seal i::before,.entry-transition-seal i::after{content: "✦";
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  color: rgba(240, 217, 144, .68);
  font-size: 16px;
  text-shadow: 0 0 14px rgba(214,180,95,.42);}
.entry-transition-seal i::before{top: 0;}
.entry-transition-seal i::after{top: 100%;}
.entry-transition-seal i:nth-child(2){inset: 10%;
  border-style: dashed;
  border-color: rgba(132, 174, 137, .3);
  animation-direction: reverse;
  animation-duration: 6.4s;}
.entry-transition-seal i:nth-child(3){inset: 22%;
  border-color: rgba(240, 217, 144, .36);
  animation-duration: 4.8s;}
.entry-transition-character{position: absolute;
  left: 50%;
  bottom: clamp(94px, 13vh, 132px);
  width: clamp(230px, 29vw, 390px);
  height: min(72vh, 690px);
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transform-origin: 50% 85%;
  animation: entryCharacterArrive 3.05s cubic-bezier(.16,.78,.2,1) both;}
.entry-transition-character-glow{position: absolute;
  left: 50%;
  bottom: 9%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.24), rgba(62,105,71,.13) 38%, transparent 70%);
  filter: blur(28px);
  animation: entryCharacterGlow 1.8s ease-in-out infinite alternate;}
.entry-transition-character img{position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 28px 26px rgba(0,0,0,.54))
    drop-shadow(0 0 25px rgba(214,180,95,.13));}
.entry-transition-copy{position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(8px, 2.2vh, 24px);
  width: min(680px, 90vw);
  translate: -50% 0;
  text-shadow: 0 5px 22px rgba(0,0,0,.78);
  animation: entryCopyArrive .7s .52s cubic-bezier(.2,.8,.2,1) both;}
.entry-transition-eyebrow{margin: 0 0 7px;
  color: rgba(240,217,144,.82);
  font-size: clamp(9px, 1.2vw, 11px);
  font-weight: 800;
  letter-spacing: .24em;}
.entry-transition-eyebrow span{display: inline-block;
  color: var(--gold-soft);
  animation: entryGlyphPulse 1.3s ease-in-out infinite;}
.entry-transition-copy h2{margin: 0;
  color: #fff9e4;
  font-family: Georgia, serif;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.02;
  text-shadow: 0 0 30px rgba(214,180,95,.18), 0 6px 30px rgba(0,0,0,.7);}
.entry-transition-loading{margin: 12px 0 10px;
  color: rgba(224, 231, 220, .74);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;}
.entry-transition-loading > span{display: inline-flex;
  width: 20px;
  margin-left: 2px;}
.entry-transition-loading i{font-style: normal;
  opacity: .2;
  animation: entryLoadingDot 1.15s ease-in-out infinite;}
.entry-transition-loading i:nth-child(2){animation-delay: .16s;}
.entry-transition-loading i:nth-child(3){animation-delay: .32s;}
.entry-transition-progress{position: relative;
  width: min(330px, 70vw);
  height: 2px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 12px rgba(214,180,95,.06);}
.entry-transition-progress::before,.entry-transition-progress::after{content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  translate: 0 -50%;
  rotate: 45deg;
  border: 1px solid rgba(240,217,144,.58);}
.entry-transition-progress::before{left: -1px;}
.entry-transition-progress::after{right: -1px;}
.entry-transition-progress i{display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(98,142,104,.75), var(--gold-soft), rgba(255,249,220,.94));
  box-shadow: 0 0 14px rgba(214,180,95,.52);
  transform: scaleX(var(--entry-load-progress, 0));
  transition: transform .22s cubic-bezier(.18,.7,.2,1), opacity .18s ease;}
.entry-transition-dust{position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;}
.entry-transition-dust span{position: absolute;
  left: var(--entry-particle-x);
  top: var(--entry-particle-y);
  width: var(--entry-particle-size);
  height: var(--entry-particle-size);
  border-radius: 50%;
  opacity: 0;
  background: var(--gold-soft);
  box-shadow: 0 0 10px rgba(214,180,95,.75);
  animation: entryDustDrift 2.7s calc(var(--entry-particle-delay) + 120ms) ease-out infinite;}
.entry-transition-overlay.is-dissolving{pointer-events: none;
  animation: entryOverlayDissolve 1.3s cubic-bezier(.42,0,.2,1) forwards;}
.entry-transition-overlay.is-dissolving::after{animation: entryExitSweep 1.05s ease-out forwards;}
.entry-transition-overlay.is-dissolving .entry-transition-stage{animation: entryStageDissolve 1.18s cubic-bezier(.42,0,.2,1) forwards;}
.entry-transition-overlay.is-dissolving .entry-transition-character{animation: entryCharacterDissolve 1.14s cubic-bezier(.42,0,.2,1) forwards;}
.entry-transition-overlay.is-dissolving .entry-transition-copy{animation: entryCopyDissolve .86s ease-in forwards;}
.entry-transition-overlay.is-dissolving .entry-transition-seal{animation: entrySealDissolve 1.1s ease-out forwards;}
.entry-transition-overlay.is-dissolving .entry-transition-dust span{animation: entryDustBurst 1.06s var(--entry-particle-delay) cubic-bezier(.15,.72,.18,1) forwards;}
@media (max-width: 680px){.entry-transition-overlay{padding: 12px;}
.entry-transition-stage{height: min(760px, 92vh);}
.entry-transition-character{width: clamp(215px, 68vw, 330px);
    height: min(68vh, 590px);
    bottom: 112px;}
.entry-transition-seal{top: 43%; width: min(118vw, 470px);}
.entry-transition-copy{bottom: 18px;}
.entry-transition-copy h2{font-size: clamp(28px, 9.6vw, 43px);}
.entry-transition-eyebrow{letter-spacing: .15em;}}
@media (max-height: 720px) and (min-width: 681px){.entry-transition-stage{height: 94vh;}
.entry-transition-character{height: 72vh; bottom: 72px;}
.entry-transition-copy{bottom: 2px;}
.entry-transition-copy h2{font-size: clamp(30px, 5.5vw, 46px);}
.entry-transition-loading{margin: 7px 0;}}
@media (prefers-reduced-motion: reduce){.entry-transition-atmosphere span,.entry-transition-lattice,.entry-transition-seal i,.entry-transition-dust span,.entry-transition-loading i,.entry-transition-eyebrow span{animation-iteration-count: 1 !important;}}
.entry-transition-host{position: fixed;
  inset: 0;
  z-index: 239;
  min-height: 100vh;
  overflow: hidden;
  background: #050907;}
.site-footer{position: relative;
  z-index: 5;
  width: 100%;
  padding: 18px 20px 22px;
  color: rgba(231, 225, 202, .48);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-align: center;
  border-top: 1px solid rgba(214, 180, 95, .09);}
.login-site-footer{position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 0;}
.app-shell.reel-is-active > .sparkles *{animation-play-state: paused !important;}
@media (max-width: 820px){html,body{width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;}
.player-chip .audio-controls{width: 132px !important;
    min-width: 132px !important;
    flex: 0 0 132px !important;
    padding: 2px 5px !important;}
.player-chip .audio-slider-row{grid-template-columns: 17px 22px minmax(58px, 1fr) !important;
    gap: 3px !important;
    min-height: 15px !important;}
.player-chip .audio-slider-label{display: block !important;
    font-size: 7px !important;
    letter-spacing: .02em !important;}
.player-chip .audio-volume-slider{width: 100% !important;
    min-width: 58px !important;}
.player-chip .audio-icon-button.sound-toggle,.player-chip .audio-icon-button.sound-toggle:hover{width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;}}
@media (max-width: 390px){.player-chip .audio-controls{width: 112px !important;
    min-width: 112px !important;
    flex-basis: 112px !important;}
.player-chip .audio-slider-row{grid-template-columns: 16px 18px minmax(46px, 1fr) !important;}}
:root{--card-album-paper: #eadcbc;
  --card-album-paper-deep: #d7c49c;}
:root{--fourfun-card-ratio: 991 / 1473;}
@keyframes drift{0% { transform: translateY(110vh) scale(.4); opacity: 0; }
  12% { opacity: .7; }
  100% { transform: translateY(-10vh) scale(1.8); opacity: 0; }}
@keyframes emblemFloat{50% { transform: translateY(-7px); }}
@keyframes spin{to { transform: rotate(360deg); }}
@keyframes sfxNotePulse{0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-1px) rotate(-5deg); }
  55% { transform: translateY(-1px) rotate(5deg); }}
@keyframes entryOverlayArrive{from { opacity: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  to { opacity: 1; -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(.68); backdrop-filter: blur(18px) saturate(.82) brightness(.68); }}
@keyframes entryBackdropTurn{to { transform: rotate(360deg); }}
@keyframes entryAtmosphereDrift{to { transform: translate3d(7vw, 5vh, 0) scale(1.13); }}
@keyframes entryLatticeBreath{50% { opacity: .48; transform: scale(1.018); }}
@keyframes entryStageArrive{from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(9px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }}
@keyframes entrySealTurn{to { transform: rotate(360deg); }}
@keyframes entryCharacterArrive{0% { opacity: 0; transform: translateY(54px) scale(.89); filter: blur(18px) brightness(.72); }
  18% { opacity: .28; }
  42% { opacity: 1; transform: translateY(-5px) scale(1.018); filter: blur(0) brightness(1.04); }
  68% { transform: translateY(1px) scale(1); }
  100% { opacity: 1; transform: translateY(-3px) scale(1.006); filter: blur(0) brightness(1); }}
@keyframes entryCharacterGlow{from { opacity: .48; transform: scale(.9); }
  to { opacity: .92; transform: scale(1.14); }}
@keyframes entryCopyArrive{from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }}
@keyframes entryGlyphPulse{50% { opacity: .55; transform: scale(.82) rotate(45deg); }}
@keyframes entryLoadingDot{0%, 100% { opacity: .2; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-2px); }}
@keyframes entryDustDrift{0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.4); }
  20% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(14px, -48px, 0) scale(1.4); }}
@keyframes entryExitSweep{0% { opacity: 0; transform: translateX(-18%); }
  38% { opacity: .92; }
  100% { opacity: 0; transform: translateX(18%); }}
@keyframes entryStageDissolve{0% { opacity: 1; filter: blur(0); transform: scale(1); }
  45% { opacity: .78; filter: blur(3px) brightness(1.18); }
  100% { opacity: 0; filter: blur(18px) brightness(1.52); transform: translateY(-18px) scale(1.045); }}
@keyframes entryCharacterDissolve{0% {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
    filter: blur(0) brightness(1);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  45% { opacity: .82; filter: blur(2px) brightness(1.28); }
  100% {
    opacity: 0;
    transform: translateY(-26px) scale(1.06);
    filter: blur(16px) brightness(1.8);
    -webkit-mask-position: 0 -70px;
    mask-position: 0 -70px;
  }}
@keyframes entryCopyDissolve{from { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: normal; }
  to { opacity: 0; transform: translateY(-30px); filter: blur(11px); letter-spacing: .08em; }}
@keyframes entrySealDissolve{from { opacity: .82; transform: scale(1) rotate(0deg); filter: blur(0); }
  to { opacity: 0; transform: scale(1.24) rotate(24deg); filter: blur(12px); }}
@keyframes entryDustBurst{0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.45); }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--entry-particle-drift-x), var(--entry-particle-drift-y), 0) scale(1.9) rotate(80deg);
    filter: blur(1px);
  }}
@keyframes entryOverlayDissolve{0% {
    opacity: 1;
    background-color: rgba(5,10,7,.98);
    -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(.68);
    backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  }
  48% { opacity: .78; }
  100% {
    opacity: 0;
    background-color: transparent;
    -webkit-backdrop-filter: blur(0) saturate(1) brightness(1);
    backdrop-filter: blur(0) saturate(1) brightness(1);
  }}
/* MYTHIC cards keep all card-level rarity FX disabled. The only animations
   below are restricted to the MYTHIC seal itself and the inspector artwork. */
.rarity-mythic.card-rarity-fx,
.rarity-mythic .card-rarity-fx,
.rarity-mythic .fourfun-card-holo,
.rarity-mythic .fourfun-card-gloss,
.rarity-mythic .fourfun-card-grain,
.rarity-mythic .fourfun-card-particles,
.rarity-mythic .fourfun-card-border,
.rarity-mythic .fourfun-card-art-vignette,
.rarity-mythic .card-catalog-preset-foil,
.rarity-mythic .album-preset-card-foil,
.rarity-mythic .card-reveal-suspense,
.rarity-mythic .card-reveal-back-sheen,
.rarity-mythic .card-pack-stack-flight-sheen,
.card-inspector-backdrop.rarity-mythic .card-inspector-screen-fx,
.card-inspector-backdrop.rarity-mythic .card-inspector-prism-canvas{
  display:none!important;
  animation:none!important;
}
.fourfun-card-face.rarity-mythic::before,
.fourfun-card-face.rarity-mythic::after,
.fourfun-card-back.rarity-mythic::before,
.fourfun-card-back.rarity-mythic::after,
.card-inspector-front.rarity-mythic::before,
.card-inspector-front.rarity-mythic::after,
.card-inspector-back.rarity-mythic::before,
.card-inspector-back.rarity-mythic::after,
.card-catalog-preset-card.rarity-mythic .card-catalog-preset-surface::before,
.card-catalog-preset-card.rarity-mythic .card-catalog-preset-surface::after,
.album-preset-card.rarity-mythic .album-preset-card-surface::before,
.album-preset-card.rarity-mythic .album-preset-card-surface::after,
.card-reveal-back.rarity-mythic::before,
.card-reveal-back.rarity-mythic::after,
.card-reveal-front-plane.rarity-mythic::before,
.card-reveal-front-plane.rarity-mythic::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
.is-mythic-card,
.card-pack-result-card.rarity-mythic,
.card-catalog-preset-card.rarity-mythic,
.album-preset-card.rarity-mythic,
.card-reveal-card-wrap.rarity-mythic,
.card-inspector-backdrop.rarity-mythic .card-inspector-card{
  box-shadow:none!important;
  filter:none!important;
}

/* The MYTHIC seal is always the transparent PNG itself. No capsule, masked
   duplicate, pseudo-element or painted backing is allowed behind it. */
html body img.card-mythic-rarity-seal{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  object-fit:contain!important;
  overflow:visible!important;
  isolation:isolate!important;
  mix-blend-mode:normal!important;
  -webkit-mask:none!important;
  mask:none!important;
  clip-path:none!important;
}
html body img.card-mythic-rarity-seal::before,
html body img.card-mythic-rarity-seal::after{
  content:none!important;
  display:none!important;
}

/* Inspector: larger seal both on the card and beside the heading. */
html body .card-inspector-front.rarity-mythic img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card{
  width:31%!important;
  min-width:31%!important;
  max-width:31%!important;
  height:auto!important;
  aspect-ratio:auto!important;
}
html body .card-inspector-backdrop.rarity-mythic img.card-mythic-rarity-seal.card-inspector-unified-seal.is-heading{
  position:relative!important;
  inset:auto!important;
  width:116px!important;
  min-width:116px!important;
  max-width:116px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  flex:0 0 116px!important;
  filter:none!important;
  animation:none!important;
}

/* Peek Inside/catalog and generic card compositions. */
html body .card-catalog-preset-card.rarity-mythic img.card-mythic-rarity-seal.card-inspector-unified-seal.is-catalog{
  width:31%!important;
  min-width:31%!important;
  max-width:31%!important;
  height:auto!important;
  aspect-ratio:auto!important;
}
html body .fourfun-card-face.rarity-mythic .fourfun-card-art img.card-mythic-rarity-seal.fourfun-card-rarity-seal{
  width:31%!important;
  min-width:31%!important;
  max-width:31%!important;
  height:auto!important;
  aspect-ratio:auto!important;
}

/* Your Card Album: neutralize every generic text-seal layer so no gray
   rectangle can appear around the transparent MYTHIC PNG. */
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity{
  position:absolute!important;
  top:4px!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:60!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  clip-path:none!important;
  mix-blend-mode:normal!important;
  overflow:visible!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
}
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity::before,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal.fourfun-card-rarity-seal{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  margin:0 auto!important;
  background:transparent!important;
  transform:none!important;
}

/* MYTHIC typography and copy placement, isolated from every existing rarity. */
html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title{
  transform:translateY(-4px)!important;
}
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title{
  transform:translateY(-1px)!important;
  font-size:7.8px!important;
}
html body .fourfun-card-face.rarity-mythic .fourfun-card-copy,
html body .card-inspector-front.rarity-mythic .card-inspector-card-description,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-description,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-description{
  display:none!important;
}
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number{
  transform:translateX(-20px)!important;
}
html body .fourfun-card-face.rarity-mythic .fourfun-card-number{font-size:clamp(10px,4.4cqw,14px)!important;}
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small{font-size:clamp(9px,3.7cqw,12px)!important;}
html body .card-inspector-front.rarity-mythic .card-inspector-card-number{font-size:14px!important;}
html body .card-inspector-front.rarity-mythic .card-inspector-card-date{font-size:12px!important;}
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number{font-size:11px!important;}
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date{font-size:9px!important;}
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number{font-size:8px!important;}
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date{font-size:6.8px!important;}

/* A real alpha-edge neon glow: the filter is applied to the transparent PNG
   itself. Its directional highlights drift around the artwork without adding
   a second painted silhouette or any rectangular overlay. */
@keyframes mythicSealNeonTrace{
  0%,100%{
    filter:drop-shadow(.9px -.5px .9px rgba(255,241,177,.78)) drop-shadow(-.7px .8px 1.55px rgba(205,137,15,.34)) drop-shadow(0 0 .55px rgba(255,221,106,.16));
  }
  24%{
    filter:drop-shadow(1.15px .45px 1px rgba(255,226,117,.72)) drop-shadow(-.35px -.9px 1.6px rgba(229,171,39,.32)) drop-shadow(0 0 .6px rgba(255,239,178,.14));
  }
  51%{
    filter:drop-shadow(-.55px 1.05px .95px rgba(255,235,149,.76)) drop-shadow(.9px -.55px 1.7px rgba(188,119,8,.31)) drop-shadow(0 0 .52px rgba(255,214,91,.13));
  }
  76%{
    filter:drop-shadow(-1px -.35px 1px rgba(255,246,196,.74)) drop-shadow(.4px 1px 1.55px rgba(218,151,20,.33)) drop-shadow(0 0 .58px rgba(255,228,129,.14));
  }
}
html body .card-inspector-front.rarity-mythic img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
  animation:mythicSealNeonTrace 4.2s ease-in-out infinite!important;
  transform-origin:center!important;
  will-change:filter!important;
}

/* White MYTHIC stars blink directly over and just outside the seal. The
   existing seal image, dimensions and alignment remain untouched. */
.card-mythic-seal-stars{
  display:none!important;
  position:absolute!important;
  z-index:75!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-stars.is-on-card{
  display:block!important;
  top:7.2%!important;
  right:1.8%!important;
  width:36.5%!important;
  height:12.5%!important;
}
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars{
  display:block!important;
  inset:-10px -12px -10px -12px!important;
  width:auto!important;
  height:auto!important;
}
.card-mythic-seal-stars > i{
  --mythic-star-size:3px;
  position:absolute!important;
  display:block!important;
  width:var(--mythic-star-size)!important;
  height:var(--mythic-star-size)!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 0 2px rgba(255,255,255,.98),0 0 5px rgba(255,250,221,.82)!important;
  opacity:0;
  transform:scale(.25) rotate(0deg);
  transform-origin:center!important;
  animation:mythicSealStarBlink 2.55s ease-in-out infinite!important;
  animation-play-state:running!important;
  will-change:opacity,transform!important;
}
.card-mythic-seal-stars > i::before,
.card-mythic-seal-stars > i::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  border-radius:999px!important;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.98),transparent)!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 0 3px rgba(255,255,255,.72)!important;
}
.card-mythic-seal-stars > i::before{width:1px!important;height:calc(var(--mythic-star-size) * 3.8)!important;}
.card-mythic-seal-stars > i::after{width:calc(var(--mythic-star-size) * 3.8)!important;height:1px!important;background:linear-gradient(to right,transparent,rgba(255,255,255,.98),transparent)!important;}
.card-mythic-seal-stars > i:nth-child(1){left:-2%;top:17%;--mythic-star-size:2.4px;animation-delay:-.15s!important;animation-duration:2.35s!important;}
.card-mythic-seal-stars > i:nth-child(2){left:17%;top:-4%;--mythic-star-size:2.1px;animation-delay:-1.35s!important;animation-duration:2.8s!important;}
.card-mythic-seal-stars > i:nth-child(3){left:38%;top:31%;--mythic-star-size:2.7px;animation-delay:-2.1s!important;animation-duration:3.05s!important;}
.card-mythic-seal-stars > i:nth-child(4){left:57%;top:7%;--mythic-star-size:2.2px;animation-delay:-.72s!important;animation-duration:2.48s!important;}
.card-mythic-seal-stars > i:nth-child(5){left:78%;top:49%;--mythic-star-size:2.8px;animation-delay:-1.82s!important;animation-duration:2.92s!important;}
.card-mythic-seal-stars > i:nth-child(6){left:99%;top:19%;--mythic-star-size:2.3px;animation-delay:-2.42s!important;animation-duration:3.2s!important;}
.card-mythic-seal-stars > i:nth-child(7){left:24%;top:89%;--mythic-star-size:2px;animation-delay:-.98s!important;animation-duration:2.72s!important;}
.card-mythic-seal-stars > i:nth-child(8){left:69%;top:96%;--mythic-star-size:2.4px;animation-delay:-2.68s!important;animation-duration:3.12s!important;}
@keyframes mythicSealStarBlink{
  0%,18%,100%{opacity:0;transform:scale(.18) rotate(0deg);}
  31%{opacity:.2;transform:scale(.55) rotate(22deg);}
  43%{opacity:1;transform:scale(1.16) rotate(45deg);}
  54%{opacity:.34;transform:scale(.72) rotate(67deg);}
  66%,86%{opacity:0;transform:scale(.2) rotate(90deg);}
}

/* MYTHIC artwork uses the exact same canvas as cardpresetM.png. The image and
   frame remain aligned at 100% of the card without cropping or an inner inset. */
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  background:transparent!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > img.card-inspector-main-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  z-index:1!important;
}
html body .card-inspector-front.rarity-mythic > img.card-inspector-preset{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  border:0!important;
  background:transparent!important;
  z-index:20!important;
}

/* Album MYTHIC art is placed on the same full-size canvas as cardpresetM.png. */
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-mythic-art-layer{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  background:transparent!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-mythic-art-layer > img.album-preset-card-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  z-index:1!important;
}
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic > .album-preset-card-surface > img.album-preset-card-frame{
  z-index:20!important;
}

/* The moving light is a second copy of the card artwork, not a painted
   rectangle. Its own alpha channel keeps every transparent area transparent,
   while a moving feathered mask carries the shine from bottom to top. */
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-art-sweep-image{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:0;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,#000 36%,#000 64%,rgba(0,0,0,.18) 86%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,#000 36%,#000 64%,rgba(0,0,0,.18) 86%,transparent 100%)!important;
  -webkit-mask-size:100% 31%!important;
  mask-size:100% 31%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:0 148%;
  mask-position:0 148%;
  animation:mythicArtworkImageSweep 5.15s linear infinite!important;
  animation-play-state:running!important;
  transform:translateZ(0)!important;
  will-change:opacity,filter,-webkit-mask-position,mask-position!important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal,
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-stars,
html body .card-inspector-front.rarity-mythic > .card-inspector-card-footer{
  z-index:30!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-frame,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  z-index:20!important;
}
@keyframes mythicArtworkImageSweep{
  0%,10%{
    opacity:0;
    -webkit-mask-position:0 148%;
    mask-position:0 148%;
    filter:sepia(1) saturate(2.35) hue-rotate(350deg) brightness(1.55) contrast(1.04);
  }
  18%{opacity:.3;}
  30%{
    opacity:.72;
    -webkit-mask-position:0 103%;
    mask-position:0 103%;
    filter:sepia(1) saturate(2.55) hue-rotate(354deg) brightness(1.72) contrast(1.06);
  }
  50%{
    opacity:.78;
    -webkit-mask-position:0 55%;
    mask-position:0 55%;
    filter:sepia(.92) saturate(2.1) hue-rotate(15deg) brightness(1.5) contrast(1.04);
  }
  70%{
    opacity:.7;
    -webkit-mask-position:0 8%;
    mask-position:0 8%;
    filter:sepia(.72) saturate(2.15) hue-rotate(64deg) brightness(1.12) contrast(1.08);
  }
  88%{
    opacity:.42;
    -webkit-mask-position:0 -34%;
    mask-position:0 -34%;
    filter:sepia(.55) saturate(2.25) hue-rotate(82deg) brightness(.88) contrast(1.12);
  }
  100%{
    opacity:0;
    -webkit-mask-position:0 -62%;
    mask-position:0 -62%;
    filter:sepia(.5) saturate(2.1) hue-rotate(88deg) brightness(.8) contrast(1.12);
  }
}


/* MYTHIC v8: preserve the approved seal, keep its glow layers close to the
   artwork, remove the inspector compositor rectangle, and add a restrained
   flower-and-star vortex around the complete card in Inspector and Album. */

/* The inspector face itself must never paint a rectangular material behind
   the transparent artwork/frame stack. Clipping follows the card silhouette
   while the external vortex remains a sibling outside this clipped face. */
html body .card-inspector-front.rarity-mythic{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  isolation:auto!important;
  overflow:hidden!important;
  clip-path:inset(.15% round 4.8%)!important;
  -webkit-clip-path:inset(.15% round 4.8%)!important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-mythic-art-layer{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  isolation:auto!important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-art-sweep-image{
  mix-blend-mode:normal!important;
  isolation:auto!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Keep the previously approved animated edge aura on the PNG itself. */
html body .card-inspector-front.rarity-mythic img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
  animation:mythicSealNeonTrace 4.2s ease-in-out infinite!important;
  transform-origin:center!important;
  will-change:filter!important;
}

/* Soft aura and a restrained center pulse. These are independent siblings,
   so they cannot alter the approved seal dimensions or centering. */
.card-mythic-seal-aura,
.card-mythic-seal-core{
  display:none!important;
  position:absolute!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  pointer-events:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-aura.is-on-card,
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-core.is-on-card{
  display:block!important;
  top:6.9%!important;
  right:1.2%!important;
  width:34.2%!important;
  height:10.8%!important;
}
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-aura,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-core{
  display:block!important;
  inset:-3px -4px!important;
  width:auto!important;
  height:auto!important;
}
.card-mythic-seal-aura{
  z-index:72!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(255,232,143,.23) 0%,rgba(245,194,57,.10) 42%,rgba(214,143,12,.035) 61%,transparent 76%)!important;
  filter:blur(2.4px)!important;
  animation:mythicSealAuraBreathe 3.7s ease-in-out infinite!important;
}
.card-mythic-seal-core{
  z-index:76!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 51%,rgba(255,255,230,.25) 0%,rgba(255,227,122,.12) 24%,rgba(232,168,34,.035) 49%,transparent 68%)!important;
  mix-blend-mode:screen!important;
  filter:blur(.7px)!important;
  animation:mythicSealCenterBreathe 3.05s ease-in-out infinite!important;
}
@keyframes mythicSealAuraBreathe{
  0%,100%{opacity:.46;transform:scale(.97,1.02);}
  48%{opacity:.78;transform:scale(1.035,1.14);}
  70%{opacity:.58;transform:scale(1.01,1.07);}
}
@keyframes mythicSealCenterBreathe{
  0%,100%{opacity:.30;transform:scale(.93,.84);}
  50%{opacity:.58;transform:scale(1.01,.98);}
}

/* Seal stars stay close to the artwork. Three quiet anchor stars are always
   visible, while the remaining individual stars disappear and reappear at
   staggered positions/times. */
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-stars.is-on-card{
  display:block!important;
  top:6.4%!important;
  right:.7%!important;
  width:35.3%!important;
  height:12.1%!important;
}
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars{
  display:block!important;
  inset:-4px -5px!important;
  width:auto!important;
  height:auto!important;
}
.card-mythic-seal-stars > i:nth-child(n){
  opacity:0;
  animation-name:mythicSealStarBlinkClose!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
}
.card-mythic-seal-stars > i:nth-child(1),
.card-mythic-seal-stars > i:nth-child(2),
.card-mythic-seal-stars > i:nth-child(3){
  animation-name:mythicSealStarAnchor!important;
}
.card-mythic-seal-stars > i:nth-child(1){left:8%!important;top:23%!important;--mythic-star-size:2.1px;animation-delay:-.2s!important;animation-duration:2.8s!important;}
.card-mythic-seal-stars > i:nth-child(2){left:47%!important;top:9%!important;--mythic-star-size:1.9px;animation-delay:-1.15s!important;animation-duration:3.15s!important;}
.card-mythic-seal-stars > i:nth-child(3){left:88%!important;top:31%!important;--mythic-star-size:2.2px;animation-delay:-2.05s!important;animation-duration:2.95s!important;}
.card-mythic-seal-stars > i:nth-child(4){left:20%!important;top:61%!important;--mythic-star-size:2.5px;animation-delay:-.55s!important;animation-duration:3.25s!important;}
.card-mythic-seal-stars > i:nth-child(5){left:36%!important;top:38%!important;--mythic-star-size:1.8px;animation-delay:-2.35s!important;animation-duration:2.65s!important;}
.card-mythic-seal-stars > i:nth-child(6){left:61%!important;top:67%!important;--mythic-star-size:2.4px;animation-delay:-1.45s!important;animation-duration:3.4s!important;}
.card-mythic-seal-stars > i:nth-child(7){left:76%!important;top:42%!important;--mythic-star-size:1.9px;animation-delay:-2.8s!important;animation-duration:2.85s!important;}
.card-mythic-seal-stars > i:nth-child(8){left:4%!important;top:73%!important;--mythic-star-size:1.7px;animation-delay:-1.8s!important;animation-duration:3.1s!important;}
.card-mythic-seal-stars > i:nth-child(9){left:95%!important;top:70%!important;--mythic-star-size:2px;animation-delay:-.95s!important;animation-duration:3.55s!important;}
.card-mythic-seal-stars > i:nth-child(10){left:54%!important;top:86%!important;--mythic-star-size:1.7px;animation-delay:-3.05s!important;animation-duration:3.3s!important;}
@keyframes mythicSealStarAnchor{
  0%,100%{opacity:.22;transform:scale(.62) rotate(0deg);}
  42%{opacity:.78;transform:scale(1.02) rotate(38deg);}
  68%{opacity:.34;transform:scale(.74) rotate(72deg);}
}
@keyframes mythicSealStarBlinkClose{
  0%,24%,100%{opacity:0;transform:scale(.18) rotate(0deg);}
  35%{opacity:.25;transform:scale(.52) rotate(20deg);}
  48%{opacity:1;transform:scale(1.08) rotate(45deg);}
  60%{opacity:.30;transform:scale(.64) rotate(70deg);}
  72%,91%{opacity:0;transform:scale(.18) rotate(90deg);}
}

/* Small/medium petals and a few stars orbit the whole MYTHIC card. The 3D
   Y-axis orbit naturally carries particles in front of, beside, and behind
   the card rather than drawing a flat ring on top of it. */
.mythic-card-vortex{
  position:absolute!important;
  inset:-10% -28%!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  pointer-events:none!important;
  overflow:visible!important;
  transform-style:preserve-3d!important;
  perspective:900px!important;
  z-index:auto!important;
}
.card-inspector-rotator.rarity-mythic{
  transform-style:preserve-3d!important;
  overflow:visible!important;
}
.card-inspector-rotator.rarity-mythic > .mythic-card-vortex.is-inspector{
  font-size:15px!important;
}
html body .card-album.card-album-modal-book .card-book-slot{
  transform-style:preserve-3d!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic{
  overflow:visible!important;
  transform-style:preserve-3d!important;
  perspective:620px!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic > .album-preset-card-surface{
  transform:translateZ(0)!important;
  transform-style:preserve-3d!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic > .mythic-card-vortex.is-album{
  inset:-13% -31%!important;
  font-size:6px!important;
  perspective:460px!important;
}
.mythic-card-vortex > i{
  --orbit-radius:12em;
  --orbit-y:0em;
  --orbit-duration:8.6s;
  --orbit-delay:0s;
  --petal-turn:0deg;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  pointer-events:none!important;
  backface-visibility:visible!important;
  transform-origin:center!important;
  transform-style:preserve-3d!important;
  animation:mythicCardVortexOrbit var(--orbit-duration) linear var(--orbit-delay) infinite!important;
  will-change:transform,opacity,filter!important;
}
.mythic-card-vortex > i.is-petal{
  width:.72em!important;
  height:1.16em!important;
  border-radius:74% 26% 68% 32% / 82% 37% 63% 18%!important;
  clip-path:polygon(50% 0%,82% 18%,100% 55%,72% 100%,28% 91%,0 52%,19% 19%)!important;
  box-shadow:0 0 .35em rgba(255,255,255,.22)!important;
}
.mythic-card-vortex > i.is-petal::after{
  content:""!important;
  position:absolute!important;
  left:48%!important;
  top:10%!important;
  width:1px!important;
  height:74%!important;
  border-radius:999px!important;
  background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(255,255,255,.08))!important;
  transform:rotate(8deg)!important;
  opacity:.52!important;
}
.mythic-card-vortex > i.is-star{
  width:.34em!important;
  height:.34em!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 0 .22em #fff,0 0 .52em rgba(250,230,134,.86)!important;
}
.mythic-card-vortex > i.is-star::before,
.mythic-card-vortex > i.is-star::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:999px!important;
  background:linear-gradient(to bottom,transparent,#fff,transparent)!important;
  transform:translate(-50%,-50%)!important;
}
.mythic-card-vortex > i.is-star::before{width:1px!important;height:1.35em!important;}
.mythic-card-vortex > i.is-star::after{width:1.35em!important;height:1px!important;background:linear-gradient(to right,transparent,#fff,transparent)!important;}
.mythic-card-vortex > i:nth-child(1){--orbit-radius:10.8em;--orbit-y:-10.35em;--orbit-duration:9.4s;--orbit-delay:-1.1s;--petal-turn:-18deg;background:linear-gradient(145deg,#FFFFFF 0%,#FAE686 52%,#75F3CE 100%)!important;}
.mythic-card-vortex > i:nth-child(2){--orbit-radius:12.9em;--orbit-y:-6.45em;--orbit-duration:8.2s;--orbit-delay:-5.7s;--petal-turn:24deg;width:.58em!important;height:.92em!important;background:linear-gradient(150deg,#75F3CE,#4BBE61)!important;}
.mythic-card-vortex > i:nth-child(3){--orbit-radius:11.7em;--orbit-y:-1.82em;--orbit-duration:10.1s;--orbit-delay:-3.4s;--petal-turn:48deg;width:.88em!important;height:1.34em!important;border-radius:35% 65% 28% 72% / 64% 30% 70% 36%!important;background:linear-gradient(135deg,#FAE686,#FFFFFF 58%,#4BBE61)!important;}
.mythic-card-vortex > i:nth-child(4){--orbit-radius:13.5em;--orbit-y:2.38em;--orbit-duration:8.9s;--orbit-delay:-7.2s;--petal-turn:-39deg;width:.54em!important;height:.86em!important;background:linear-gradient(145deg,#163217,#4BBE61 55%,#75F3CE)!important;}
.mythic-card-vortex > i:nth-child(5){--orbit-radius:11.1em;--orbit-y:6.02em;--orbit-duration:9.8s;--orbit-delay:-4.9s;--petal-turn:12deg;width:.78em!important;height:1.24em!important;border-radius:62% 38% 76% 24% / 38% 69% 31% 62%!important;background:linear-gradient(150deg,#75F3CE,#FFFFFF 48%,#FAE686)!important;}
.mythic-card-vortex > i:nth-child(6){--orbit-radius:13.1em;--orbit-y:10.08em;--orbit-duration:8.45s;--orbit-delay:-2.6s;--petal-turn:61deg;width:.6em!important;height:.96em!important;background:linear-gradient(140deg,#4BBE61,#163217)!important;}
.mythic-card-vortex > i:nth-child(7){--orbit-radius:12.3em;--orbit-y:-4.34em;--orbit-duration:10.6s;--orbit-delay:-8.1s;--petal-turn:-55deg;width:.92em!important;height:1.42em!important;border-radius:78% 22% 45% 55% / 72% 48% 52% 28%!important;background:linear-gradient(145deg,#FAE686,#75F3CE 62%,#4BBE61)!important;}
.mythic-card-vortex > i:nth-child(8){--orbit-radius:10.2em;--orbit-y:7.98em;--orbit-duration:9.15s;--orbit-delay:-6.35s;--petal-turn:31deg;width:.5em!important;height:.8em!important;background:linear-gradient(145deg,#FFFFFF,#75F3CE 58%,#163217)!important;}
.mythic-card-vortex > i:nth-child(9){--orbit-radius:11.5em;--orbit-y:-8.12em;--orbit-duration:7.7s;--orbit-delay:-4.2s;}
.mythic-card-vortex > i:nth-child(10){--orbit-radius:13.3em;--orbit-y:.28em;--orbit-duration:9.35s;--orbit-delay:-7.75s;}
.mythic-card-vortex > i:nth-child(11){--orbit-radius:10.7em;--orbit-y:9.66em;--orbit-duration:8.05s;--orbit-delay:-1.95s;}
@keyframes mythicCardVortexOrbit{
  0%{
    opacity:.30;
    filter:blur(.45px) brightness(.78);
    transform:rotateY(0deg) translateZ(var(--orbit-radius)) translateY(var(--orbit-y)) rotateZ(var(--petal-turn)) scale(.70);
  }
  18%{opacity:.72;filter:blur(.12px) brightness(.96);}
  28%{
    opacity:.95;
    filter:blur(0) brightness(1.08);
    transform:rotateY(102deg) translateZ(var(--orbit-radius)) translateY(calc(var(--orbit-y) - .46em)) rotateZ(calc(var(--petal-turn) + 85deg)) scale(.92);
  }
  50%{
    opacity:.36;
    filter:blur(.55px) brightness(.72);
    transform:rotateY(180deg) translateZ(var(--orbit-radius)) translateY(calc(var(--orbit-y) + .34em)) rotateZ(calc(var(--petal-turn) + 170deg)) scale(.68);
  }
  72%{
    opacity:.96;
    filter:blur(0) brightness(1.08);
    transform:rotateY(258deg) translateZ(var(--orbit-radius)) translateY(calc(var(--orbit-y) - .34em)) rotateZ(calc(var(--petal-turn) + 255deg)) scale(.96);
  }
  88%{opacity:.67;filter:blur(.16px) brightness(.94);}
  100%{
    opacity:.30;
    filter:blur(.45px) brightness(.78);
    transform:rotateY(360deg) translateZ(var(--orbit-radius)) translateY(var(--orbit-y)) rotateZ(calc(var(--petal-turn) + 360deg)) scale(.70);
  }
}

@media (prefers-reduced-motion:reduce){
  .card-mythic-seal-aura,
  .card-mythic-seal-core,
  .card-mythic-seal-stars > i,
  .mythic-card-vortex > i{
    animation:none!important;
  }
}

/* Final v8 stacking/overflow safeguards. */
html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
  position:relative!important;
  z-index:74!important;
}
.card-mythic-seal-stars{z-index:78!important;}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-stage,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator{
  overflow:visible!important;
  transform-style:preserve-3d!important;
}
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card{
  overflow:visible!important;
  transform-style:preserve-3d!important;
}
.mythic-card-vortex{
  perspective:none!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic > .mythic-card-vortex.is-album{
  perspective:none!important;
}

/* MYTHIC v9: restore the approved inspector seal position, make the external
   flower/star vortex visible, keep the inspector stack fully transparent,
   and slightly shorten the moving artwork highlight. */

/* The final v8 safeguard accidentally changed the on-card seal from absolute
   positioning to normal document flow. Restore only the approved inspector
   placement; the album seal remains untouched. */
html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card{
  position:absolute!important;
  top:6.9%!important;
  right:1.2%!important;
  bottom:auto!important;
  left:auto!important;
  width:31%!important;
  min-width:31%!important;
  max-width:31%!important;
  height:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:74!important;
}

/* Remove every possible painted shell/pseudo-layer behind the MYTHIC card.
   The artwork, preset PNG and back PNG remain the only visible surfaces. */
html body .card-inspector-backdrop.rarity-mythic .fourfun-card-shell.card-inspector-card.is-mythic-card,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-side{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body .card-inspector-backdrop.rarity-mythic .fourfun-card-shell.card-inspector-card.is-mythic-card::before,
html body .card-inspector-backdrop.rarity-mythic .fourfun-card-shell.card-inspector-card.is-mythic-card::after,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host::before,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host::after,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator::before,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* The approved sweep remains unchanged apart from a shorter vertical band. */
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-art-sweep-image{
  -webkit-mask-size:100% 22%!important;
  mask-size:100% 22%!important;
}

/* Keep all relevant ancestors open so particles can leave the card bounds. */
html body .card-inspector-backdrop.rarity-mythic .card-inspector,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-stage,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic{
  overflow:visible!important;
}

/* A visible 2.5D hurricane path. Scale, opacity and blur create front/back
   depth while each particle follows a different elliptical radius and phase. */
.mythic-card-vortex{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:88!important;
  overflow:visible!important;
  contain:none!important;
  isolation:auto!important;
  pointer-events:none!important;
}
.card-inspector-rotator.rarity-mythic > .mythic-card-vortex.is-inspector{
  inset:-13% -31%!important;
  font-size:15px!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic > .mythic-card-vortex.is-album{
  inset:-15% -34%!important;
  font-size:6.5px!important;
  z-index:88!important;
}
.mythic-card-vortex > i{
  --orbit-x:12em;
  --orbit-y:10em;
  display:block!important;
  visibility:visible!important;
  opacity:.9;
  z-index:89!important;
  animation-name:mythicCardVortexOrbitVisible!important;
  animation-timing-function:cubic-bezier(.44,.04,.56,.96)!important;
  animation-iteration-count:infinite!important;
  animation-play-state:running!important;
  transform-origin:center!important;
  will-change:transform,opacity,filter!important;
}
.mythic-card-vortex > i:nth-child(1){--orbit-x:10.7em;--orbit-y:11.4em;}
.mythic-card-vortex > i:nth-child(2){--orbit-x:13.1em;--orbit-y:7.4em;}
.mythic-card-vortex > i:nth-child(3){--orbit-x:11.7em;--orbit-y:4.2em;}
.mythic-card-vortex > i:nth-child(4){--orbit-x:13.6em;--orbit-y:2.5em;}
.mythic-card-vortex > i:nth-child(5){--orbit-x:11.2em;--orbit-y:7.1em;}
.mythic-card-vortex > i:nth-child(6){--orbit-x:13.2em;--orbit-y:11em;}
.mythic-card-vortex > i:nth-child(7){--orbit-x:12.4em;--orbit-y:5.4em;}
.mythic-card-vortex > i:nth-child(8){--orbit-x:10.4em;--orbit-y:9em;}
.mythic-card-vortex > i:nth-child(9){--orbit-x:11.6em;--orbit-y:9.3em;}
.mythic-card-vortex > i:nth-child(10){--orbit-x:13.4em;--orbit-y:3.5em;}
.mythic-card-vortex > i:nth-child(11){--orbit-x:10.8em;--orbit-y:10.5em;}
@keyframes mythicCardVortexOrbitVisible{
  0%{
    opacity:.34;
    z-index:22;
    filter:blur(.5px) brightness(.82);
    transform:translate3d(-50%,calc(-50% - var(--orbit-y)),0) rotate(-12deg) scale(.66);
  }
  22%{
    opacity:.92;
    z-index:92;
    filter:blur(0) brightness(1.08);
    transform:translate3d(calc(-50% + var(--orbit-x)),-50%,0) rotate(76deg) scale(1.02);
  }
  48%{
    opacity:.72;
    z-index:92;
    filter:blur(.08px) brightness(1.02);
    transform:translate3d(-50%,calc(-50% + var(--orbit-y)),0) rotate(172deg) scale(.88);
  }
  72%{
    opacity:.28;
    z-index:18;
    filter:blur(.62px) brightness(.72);
    transform:translate3d(calc(-50% - var(--orbit-x)),-50%,0) rotate(268deg) scale(.61);
  }
  100%{
    opacity:.34;
    z-index:22;
    filter:blur(.5px) brightness(.82);
    transform:translate3d(-50%,calc(-50% - var(--orbit-y)),0) rotate(348deg) scale(.66);
  }
}


/* MYTHIC v11 — safe rollback of the inspector DOM/layout.
   This block only makes the already-existing vortex elements visible. It does
   not reposition the card, rotator, title seal, on-card seal, artwork or frame. */
html body .card-inspector-backdrop.rarity-mythic .card-inspector-stage,
html body .card-inspector-backdrop.rarity-mythic .fourfun-card-shell.card-inspector-card.is-mythic-card,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic{
  overflow:visible!important;
}

/* Keep the particle field attached to the card without changing the card's
   own positioning context. */
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator.rarity-mythic > .mythic-card-vortex.is-inspector,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic > .mythic-card-vortex.is-album{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  contain:none!important;
  isolation:isolate!important;
  transform:none!important;
  perspective:none!important;
  z-index:96!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator.rarity-mythic > .mythic-card-vortex.is-inspector{
  font-size:15px!important;
}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic > .mythic-card-vortex.is-album{
  font-size:5.4px!important;
}

/* A reliable 2.5D ellipse. The path stays just outside the card silhouette;
   opacity, blur and scale simulate particles travelling behind and in front. */
html body .mythic-card-vortex.is-inspector > i,
html body .mythic-card-vortex.is-album > i{
  --mythic-orbit-x:12em;
  --mythic-orbit-y:15em;
  --mythic-orbit-duration:9s;
  --mythic-orbit-delay:0s;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  visibility:visible!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  opacity:.86;
  transform-origin:center!important;
  animation:mythicCardOrbitSafe var(--mythic-orbit-duration) linear var(--mythic-orbit-delay) infinite!important;
  animation-play-state:running!important;
  will-change:transform,opacity,filter!important;
}
html body .mythic-card-vortex.is-inspector > i.is-petal,
html body .mythic-card-vortex.is-album > i.is-petal{
  box-shadow:0 0 .34em rgba(255,255,255,.32),0 0 .64em rgba(117,243,206,.22)!important;
}
html body .mythic-card-vortex.is-inspector > i.is-star,
html body .mythic-card-vortex.is-album > i.is-star{
  box-shadow:0 0 .26em #fff,0 0 .65em rgba(250,230,134,.9)!important;
}

html body .mythic-card-vortex.is-inspector > i:nth-child(1),
html body .mythic-card-vortex.is-album > i:nth-child(1){--mythic-orbit-x:11.2em;--mythic-orbit-y:15.8em;--mythic-orbit-duration:9.4s;--mythic-orbit-delay:-1.1s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(2),
html body .mythic-card-vortex.is-album > i:nth-child(2){--mythic-orbit-x:12.7em;--mythic-orbit-y:13.9em;--mythic-orbit-duration:8.2s;--mythic-orbit-delay:-5.7s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(3),
html body .mythic-card-vortex.is-album > i:nth-child(3){--mythic-orbit-x:11.8em;--mythic-orbit-y:16.5em;--mythic-orbit-duration:10.1s;--mythic-orbit-delay:-3.4s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(4),
html body .mythic-card-vortex.is-album > i:nth-child(4){--mythic-orbit-x:13.2em;--mythic-orbit-y:14.7em;--mythic-orbit-duration:8.9s;--mythic-orbit-delay:-7.2s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(5),
html body .mythic-card-vortex.is-album > i:nth-child(5){--mythic-orbit-x:11.5em;--mythic-orbit-y:14.2em;--mythic-orbit-duration:9.8s;--mythic-orbit-delay:-4.9s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(6),
html body .mythic-card-vortex.is-album > i:nth-child(6){--mythic-orbit-x:13em;--mythic-orbit-y:16.1em;--mythic-orbit-duration:8.45s;--mythic-orbit-delay:-2.6s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(7),
html body .mythic-card-vortex.is-album > i:nth-child(7){--mythic-orbit-x:12.3em;--mythic-orbit-y:15.1em;--mythic-orbit-duration:10.6s;--mythic-orbit-delay:-8.1s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(8),
html body .mythic-card-vortex.is-album > i:nth-child(8){--mythic-orbit-x:10.9em;--mythic-orbit-y:16.8em;--mythic-orbit-duration:9.15s;--mythic-orbit-delay:-6.35s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(9),
html body .mythic-card-vortex.is-album > i:nth-child(9){--mythic-orbit-x:12em;--mythic-orbit-y:14.4em;--mythic-orbit-duration:7.7s;--mythic-orbit-delay:-4.2s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(10),
html body .mythic-card-vortex.is-album > i:nth-child(10){--mythic-orbit-x:13.4em;--mythic-orbit-y:15.7em;--mythic-orbit-duration:9.35s;--mythic-orbit-delay:-7.75s;}
html body .mythic-card-vortex.is-inspector > i:nth-child(11),
html body .mythic-card-vortex.is-album > i:nth-child(11){--mythic-orbit-x:11.4em;--mythic-orbit-y:14.9em;--mythic-orbit-duration:8.05s;--mythic-orbit-delay:-1.95s;}

@keyframes mythicCardOrbitSafe{
  0%{
    opacity:.34;
    filter:blur(.55px) brightness(.78);
    transform:translate3d(-50%,calc(-50% - var(--mythic-orbit-y)),0) rotate(-18deg) scale(.64);
  }
  20%{opacity:.76;filter:blur(.12px) brightness(.98);}
  25%{
    opacity:.96;
    filter:blur(0) brightness(1.12);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),-50%,0) rotate(72deg) scale(1.02);
  }
  50%{
    opacity:.42;
    filter:blur(.48px) brightness(.78);
    transform:translate3d(-50%,calc(-50% + var(--mythic-orbit-y)),0) rotate(162deg) scale(.66);
  }
  70%{opacity:.78;filter:blur(.1px) brightness(1);}
  75%{
    opacity:.98;
    filter:blur(0) brightness(1.1);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),-50%,0) rotate(252deg) scale(1.04);
  }
  100%{
    opacity:.34;
    filter:blur(.55px) brightness(.78);
    transform:translate3d(-50%,calc(-50% - var(--mythic-orbit-y)),0) rotate(342deg) scale(.64);
  }
}

@media (prefers-reduced-motion:reduce){
  html body .mythic-card-vortex.is-inspector > i,
  html body .mythic-card-vortex.is-album > i{
    animation:none!important;
  }
}

/* MYTHIC v12 — keep the approved card stack intact. This final block only
   aligns the on-card seal with its existing effects, exposes a stable external
   particle field, and adds the independent mythiclayer.png panorama. */

/* The approved aura/core/star field already occupies this exact rectangle.
   Make the PNG share the same box instead of relying on inherited seal rules. */
html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card{
  position:absolute!important;
  top:6.9%!important;
  right:1.2%!important;
  bottom:auto!important;
  left:auto!important;
  width:34.2%!important;
  min-width:34.2%!important;
  max-width:34.2%!important;
  height:10.8%!important;
  min-height:10.8%!important;
  max-height:10.8%!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  z-index:74!important;
}

/* mythiclayer.png: same full-size canvas as the configured artwork and frame.
   The wrapper receives the small reactive parallax values written by the 3D
   inspector and also performs a restrained independent vertical float. */
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-layer{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
  overflow:visible!important;
  transform-origin:50% 52%!important;
  transform-style:preserve-3d!important;
  animation:mythicPanoramaFloat 5.8s ease-in-out infinite!important;
  will-change:transform!important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-sweep-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center!important;
  pointer-events:none!important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-image{
  z-index:1!important;
  opacity:1!important;
  filter:drop-shadow(0 1.6px 1.2px rgba(4,18,9,.34)) drop-shadow(0 -.8px .65px rgba(255,248,218,.18)) saturate(1.045) contrast(1.025)!important;
  transform:translateZ(10px) scale(1.002)!important;
  backface-visibility:visible!important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-sweep-image{
  z-index:2!important;
  opacity:0;
  mix-blend-mode:screen!important;
  filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,#000 36%,#000 64%,rgba(0,0,0,.18) 86%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,#000 36%,#000 64%,rgba(0,0,0,.18) 86%,transparent 100%)!important;
  -webkit-mask-size:100% 22%!important;
  mask-size:100% 22%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:0 148%;
  mask-position:0 148%;
  animation:mythicArtworkImageSweep 5.15s linear infinite!important;
  animation-play-state:running!important;
  will-change:opacity,filter,-webkit-mask-position,mask-position!important;
}
@keyframes mythicPanoramaFloat{
  0%,100%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) - 1.8px),14px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.002);
  }
  48%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) + 1.9px),18px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.006);
  }
  72%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) + .7px),16px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.004);
  }
}

/* Stable external particle hosts. They are siblings of the rotating/rendered
   card rather than children of a clipped face, so they cannot disappear behind
   the artwork or be cut by the card silhouette. */
html body .card-inspector-backdrop.rarity-mythic .fourfun-card-shell.card-inspector-card.is-mythic-card,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card{
  position:relative!important;
  overflow:visible!important;
  contain:none!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-stage,
html body .card-inspector-backdrop.rarity-mythic .card-inspector,
html body .card-album.card-album-modal-book .card-book-page,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card{
  overflow:visible!important;
}
html body .mythic-card-vortex.is-inspector,
html body .mythic-card-vortex.is-album{
  display:none!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-vortex.is-inspector-external,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-vortex.is-album-external{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  contain:none!important;
  isolation:isolate!important;
  transform:none!important;
  z-index:86!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-vortex.is-inspector-external{
  font-size:14.5px!important;
}
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-vortex.is-album-external{
  font-size:6.1px!important;
}
html body .mythic-card-vortex.is-inspector-external > i,
html body .mythic-card-vortex.is-album-external > i{
  --mythic-orbit-x:12em;
  --mythic-orbit-y:15em;
  --mythic-orbit-duration:9s;
  --mythic-orbit-delay:0s;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  visibility:visible!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  opacity:.9;
  transform-origin:center!important;
  animation:mythicExternalOrbit var(--mythic-orbit-duration) linear var(--mythic-orbit-delay) infinite!important;
  animation-play-state:running!important;
  will-change:transform,opacity,filter!important;
}
html body .mythic-card-vortex.is-inspector-external > i.is-petal,
html body .mythic-card-vortex.is-album-external > i.is-petal{
  box-shadow:0 0 .32em rgba(255,255,255,.34),0 0 .72em rgba(117,243,206,.25)!important;
}
html body .mythic-card-vortex.is-inspector-external > i.is-star,
html body .mythic-card-vortex.is-album-external > i.is-star{
  box-shadow:0 0 .28em #fff,0 0 .72em rgba(250,230,134,.92)!important;
  mix-blend-mode:screen!important;
}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(1),
html body .mythic-card-vortex.is-album-external > i:nth-child(1){--mythic-orbit-x:11.4em;--mythic-orbit-y:16.1em;--mythic-orbit-duration:9.4s;--mythic-orbit-delay:-1.1s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(2),
html body .mythic-card-vortex.is-album-external > i:nth-child(2){--mythic-orbit-x:12.9em;--mythic-orbit-y:13.7em;--mythic-orbit-duration:8.2s;--mythic-orbit-delay:-5.7s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(3),
html body .mythic-card-vortex.is-album-external > i:nth-child(3){--mythic-orbit-x:11.8em;--mythic-orbit-y:16.8em;--mythic-orbit-duration:10.1s;--mythic-orbit-delay:-3.4s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(4),
html body .mythic-card-vortex.is-album-external > i:nth-child(4){--mythic-orbit-x:13.3em;--mythic-orbit-y:14.4em;--mythic-orbit-duration:8.9s;--mythic-orbit-delay:-7.2s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(5),
html body .mythic-card-vortex.is-album-external > i:nth-child(5){--mythic-orbit-x:11.6em;--mythic-orbit-y:14.1em;--mythic-orbit-duration:9.8s;--mythic-orbit-delay:-4.9s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(6),
html body .mythic-card-vortex.is-album-external > i:nth-child(6){--mythic-orbit-x:13.1em;--mythic-orbit-y:16.3em;--mythic-orbit-duration:8.45s;--mythic-orbit-delay:-2.6s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(7),
html body .mythic-card-vortex.is-album-external > i:nth-child(7){--mythic-orbit-x:12.4em;--mythic-orbit-y:15.2em;--mythic-orbit-duration:10.6s;--mythic-orbit-delay:-8.1s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(8),
html body .mythic-card-vortex.is-album-external > i:nth-child(8){--mythic-orbit-x:10.9em;--mythic-orbit-y:17em;--mythic-orbit-duration:9.15s;--mythic-orbit-delay:-6.35s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(9),
html body .mythic-card-vortex.is-album-external > i:nth-child(9){--mythic-orbit-x:12em;--mythic-orbit-y:14.3em;--mythic-orbit-duration:7.7s;--mythic-orbit-delay:-4.2s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(10),
html body .mythic-card-vortex.is-album-external > i:nth-child(10){--mythic-orbit-x:13.4em;--mythic-orbit-y:15.8em;--mythic-orbit-duration:9.35s;--mythic-orbit-delay:-7.75s;}
html body .mythic-card-vortex.is-inspector-external > i:nth-child(11),
html body .mythic-card-vortex.is-album-external > i:nth-child(11){--mythic-orbit-x:11.3em;--mythic-orbit-y:14.8em;--mythic-orbit-duration:8.05s;--mythic-orbit-delay:-1.95s;}
@keyframes mythicExternalOrbit{
  0%{
    opacity:.28;
    filter:blur(.5px) brightness(.78);
    transform:translate3d(-50%,calc(-50% - var(--mythic-orbit-y)),0) rotate(-20deg) scale(.62);
  }
  12.5%{
    opacity:.62;
    filter:blur(.18px) brightness(.94);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),calc(-50% - var(--mythic-orbit-y)),0) rotate(24deg) scale(.82);
  }
  25%{
    opacity:.98;
    filter:blur(0) brightness(1.12);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),-50%,0) rotate(72deg) scale(1.04);
  }
  37.5%{
    opacity:.78;
    filter:blur(.08px) brightness(1.02);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),calc(-50% + var(--mythic-orbit-y)),0) rotate(116deg) scale(.9);
  }
  50%{
    opacity:.32;
    filter:blur(.52px) brightness(.76);
    transform:translate3d(-50%,calc(-50% + var(--mythic-orbit-y)),0) rotate(162deg) scale(.64);
  }
  62.5%{
    opacity:.66;
    filter:blur(.16px) brightness(.94);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),calc(-50% + var(--mythic-orbit-y)),0) rotate(208deg) scale(.84);
  }
  75%{
    opacity:1;
    filter:blur(0) brightness(1.12);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),-50%,0) rotate(252deg) scale(1.05);
  }
  87.5%{
    opacity:.7;
    filter:blur(.12px) brightness(.98);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),calc(-50% - var(--mythic-orbit-y)),0) rotate(300deg) scale(.86);
  }
  100%{
    opacity:.28;
    filter:blur(.5px) brightness(.78);
    transform:translate3d(-50%,calc(-50% - var(--mythic-orbit-y)),0) rotate(340deg) scale(.62);
  }
}

@media (prefers-reduced-motion:reduce){
  html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer,
  html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-layer,
  html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image,
  html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-sweep-image,
  html body .mythic-card-vortex.is-inspector-external > i,
  html body .mythic-card-vortex.is-album-external > i{
    animation:none!important;
  }
}

/* MYTHIC v13 — preserve every approved layer and only strengthen the requested
   panorama motion, restore the seal aura/core, and keep the external particles
   animated even when the browser reports reduced-motion preferences. */

/* Restore the approved seal edge glow, soft aura and restrained center pulse. */
html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
  animation:mythicSealNeonTrace 4.2s ease-in-out infinite!important;
  will-change:filter!important;
}
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-aura.is-on-card,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-aura{
  display:block!important;
  visibility:visible!important;
  opacity:.52;
  background:radial-gradient(ellipse at center,rgba(255,235,155,.27) 0%,rgba(246,197,61,.13) 40%,rgba(214,143,12,.045) 61%,transparent 77%)!important;
  filter:blur(2.5px)!important;
  mix-blend-mode:screen!important;
  animation:mythicSealAuraBreathe 3.7s ease-in-out infinite!important;
  animation-play-state:running!important;
}
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-core.is-on-card,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-core{
  display:block!important;
  visibility:visible!important;
  opacity:.34;
  background:radial-gradient(ellipse at 50% 51%,rgba(255,255,232,.27) 0%,rgba(255,229,128,.13) 24%,rgba(232,168,34,.04) 49%,transparent 68%)!important;
  filter:blur(.75px)!important;
  mix-blend-mode:screen!important;
  animation:mythicSealCenterBreathe 3.05s ease-in-out infinite!important;
  animation-play-state:running!important;
}
html body .card-inspector-front.rarity-mythic > .card-mythic-seal-stars.is-on-card > i,
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars > i{
  animation-play-state:running!important;
}

/* Make mythiclayer.png movement clearly perceptible while remaining subtle. */
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-layer{
  animation:mythicPanoramaFloatV13 5.25s ease-in-out infinite!important;
  animation-play-state:running!important;
  will-change:transform!important;
}
@keyframes mythicPanoramaFloatV13{
  0%,100%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) - 4.6px),17px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.008);
  }
  46%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) + 4.9px),23px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.014);
  }
  72%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) + 1.7px),20px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.011);
  }
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-image{
  filter:drop-shadow(0 2.4px 1.7px rgba(4,18,9,.4)) drop-shadow(0 -1.15px .9px rgba(255,248,218,.22)) saturate(1.055) contrast(1.035)!important;
}

/* External petals and stars: force a visible elliptical orbit around the card.
   Opacity and scale still suggest front/back depth, but no particle remains
   parked behind the card when reduced-motion is enabled at OS/browser level. */
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-vortex.is-inspector-external,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-vortex.is-album-external{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  z-index:140!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-vortex.is-inspector-external{
  font-size:16px!important;
}
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-vortex.is-album-external{
  font-size:7px!important;
}
html body .mythic-card-vortex.is-inspector-external > i,
html body .mythic-card-vortex.is-album-external > i{
  display:block!important;
  visibility:visible!important;
  animation:mythicExternalOrbitVisibleV13 var(--mythic-orbit-duration) linear var(--mythic-orbit-delay) infinite!important;
  animation-play-state:running!important;
  will-change:transform,opacity,filter!important;
}
@keyframes mythicExternalOrbitVisibleV13{
  0%{
    opacity:.44;
    filter:blur(.42px) brightness(.88);
    transform:translate3d(-50%,calc(-50% - var(--mythic-orbit-y)),0) rotate(-18deg) scale(.70);
  }
  12.5%{
    opacity:.72;
    filter:blur(.16px) brightness(1);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),calc(-50% - var(--mythic-orbit-y)),0) rotate(27deg) scale(.88);
  }
  25%{
    opacity:1;
    filter:blur(0) brightness(1.16);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),-50%,0) rotate(74deg) scale(1.12);
  }
  37.5%{
    opacity:.78;
    filter:blur(.10px) brightness(1.04);
    transform:translate3d(calc(-50% + var(--mythic-orbit-x)),calc(-50% + var(--mythic-orbit-y)),0) rotate(119deg) scale(.94);
  }
  50%{
    opacity:.38;
    filter:blur(.48px) brightness(.84);
    transform:translate3d(-50%,calc(-50% + var(--mythic-orbit-y)),0) rotate(164deg) scale(.68);
  }
  62.5%{
    opacity:.76;
    filter:blur(.13px) brightness(1.02);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),calc(-50% + var(--mythic-orbit-y)),0) rotate(209deg) scale(.92);
  }
  75%{
    opacity:1;
    filter:blur(0) brightness(1.16);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),-50%,0) rotate(254deg) scale(1.13);
  }
  87.5%{
    opacity:.73;
    filter:blur(.14px) brightness(1.01);
    transform:translate3d(calc(-50% - var(--mythic-orbit-x)),calc(-50% - var(--mythic-orbit-y)),0) rotate(299deg) scale(.91);
  }
  100%{
    opacity:.44;
    filter:blur(.42px) brightness(.88);
    transform:translate3d(-50%,calc(-50% - var(--mythic-orbit-y)),0) rotate(342deg) scale(.70);
  }
}

/* The user explicitly requested these animations, so keep them active even
   when the operating system advertises reduced motion. */
@media (prefers-reduced-motion:reduce){
  html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card,
  html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
    animation:mythicSealNeonTrace 4.2s ease-in-out infinite!important;
  }
  html body .card-inspector-front.rarity-mythic > .card-mythic-seal-aura.is-on-card,
  html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-aura{
    animation:mythicSealAuraBreathe 3.7s ease-in-out infinite!important;
  }
  html body .card-inspector-front.rarity-mythic > .card-mythic-seal-core.is-on-card,
  html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-core{
    animation:mythicSealCenterBreathe 3.05s ease-in-out infinite!important;
  }
  html body .card-inspector-front.rarity-mythic > .card-mythic-seal-stars.is-on-card > i,
  html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars > i{
    animation-play-state:running!important;
  }
  html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer,
  html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-layer{
    animation:mythicPanoramaFloatV13 5.25s ease-in-out infinite!important;
  }
  html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image,
  html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .card-mythic-panorama-sweep-image{
    animation:mythicArtworkImageSweep 5.15s linear infinite!important;
  }
  html body .mythic-card-vortex.is-inspector-external > i,
  html body .mythic-card-vortex.is-album-external > i{
    animation:mythicExternalOrbitVisibleV13 var(--mythic-orbit-duration) linear var(--mythic-orbit-delay) infinite!important;
  }
}

/* MYTHIC v14 — preserve the approved inspector/card/seal layers. This block
   only tightens the album vortex, sharpens the panorama movement, and adds a
   second slow diagonal petal orbit plus restrained internal/external stars. */

/* Keep the existing album hurricane closer to the card edges. Inspector radii
   are intentionally untouched. */
html body .mythic-card-vortex.is-album-external > i:nth-child(1){--mythic-orbit-x:7.9em!important;--mythic-orbit-y:11.4em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(2){--mythic-orbit-x:8.7em!important;--mythic-orbit-y:9.9em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(3){--mythic-orbit-x:8.1em!important;--mythic-orbit-y:11.8em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(4){--mythic-orbit-x:9em!important;--mythic-orbit-y:10.3em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(5){--mythic-orbit-x:7.8em!important;--mythic-orbit-y:10.1em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(6){--mythic-orbit-x:8.9em!important;--mythic-orbit-y:11.6em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(7){--mythic-orbit-x:8.4em!important;--mythic-orbit-y:10.9em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(8){--mythic-orbit-x:7.5em!important;--mythic-orbit-y:12em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(9){--mythic-orbit-x:8.2em!important;--mythic-orbit-y:10.2em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(10){--mythic-orbit-x:9.1em!important;--mythic-orbit-y:11.2em!important;}
html body .mythic-card-vortex.is-album-external > i:nth-child(11){--mythic-orbit-x:7.8em!important;--mythic-orbit-y:10.6em!important;}

/* Inspector panorama: slightly shorter vertical travel than v13. A constant
   scale and half-pixel reactive coordinates avoid the soft/burred texture that
   was visible while the browser reused a changing transformed bitmap. */
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer{
  animation:mythicPanoramaFloatV14Inspector 5.45s ease-in-out infinite!important;
  animation-play-state:running!important;
}
@keyframes mythicPanoramaFloatV14Inspector{
  0%,100%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) - 3px),20px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.009);
  }
  48%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) + 3.1px),20px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.009);
  }
  72%{
    transform:translate3d(var(--mythic-panorama-x,0px),calc(var(--mythic-panorama-y,0px) + 1px),20px) rotateX(var(--mythic-panorama-rx,0deg)) rotateY(var(--mythic-panorama-ry,0deg)) scale(1.009);
  }
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image{
  image-rendering:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform:translateZ(9px) scale(1.003)!important;
  filter:drop-shadow(0 1px 0 rgba(4,18,9,.38)) drop-shadow(0 -1px 0 rgba(255,248,218,.17)) saturate(1.055) contrast(1.045)!important;
  will-change:auto!important;
}

/* A second oval orbit runs diagonally and slowly. Two synchronized copies are
   cross-faded on opposite stacking layers, so the same petals visibly pass in
   front of the card and then behind it without moving any approved card layer. */
.mythic-card-diagonal-orbit{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  pointer-events:none!important;
  overflow:visible!important;
  contain:none!important;
  transform-origin:center!important;
  transform-style:preserve-3d!important;
  isolation:isolate!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-diagonal-orbit.is-inspector-diagonal{
  font-size:15px!important;
  transform:rotateZ(-29deg) scaleY(.72)!important;
}
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-diagonal-orbit.is-album-diagonal{
  font-size:6.4px!important;
  transform:rotateZ(-29deg) scaleY(.72)!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-diagonal-orbit.is-back,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-diagonal-orbit.is-back{
  z-index:4!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-diagonal-orbit.is-front,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-diagonal-orbit.is-front{
  z-index:112!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host{
  position:relative!important;
  z-index:40!important;
}
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .album-preset-card.rarity-mythic{
  position:relative!important;
  z-index:40!important;
}
.mythic-card-diagonal-orbit > i{
  --mythic-diagonal-x:11em;
  --mythic-diagonal-y:15em;
  --mythic-diagonal-duration:16s;
  --mythic-diagonal-delay:0s;
  --mythic-diagonal-turn:0deg;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  width:.68em!important;
  height:1.08em!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:72% 28% 65% 35% / 84% 38% 62% 16%!important;
  clip-path:polygon(50% 0%,84% 20%,100% 57%,70% 100%,25% 90%,0 51%,20% 17%)!important;
  transform-origin:center!important;
  box-shadow:0 0 .3em rgba(255,255,255,.28),0 0 .68em rgba(117,243,206,.2)!important;
  backface-visibility:visible!important;
  will-change:transform,opacity,filter!important;
}
.mythic-card-diagonal-orbit > i::after{
  content:""!important;
  position:absolute!important;
  left:49%!important;
  top:9%!important;
  width:1px!important;
  height:76%!important;
  border-radius:999px!important;
  background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(255,255,255,.04))!important;
  transform:rotate(7deg)!important;
  opacity:.5!important;
}
.mythic-card-diagonal-orbit.is-front > i{
  animation:mythicDiagonalOrbitMotion var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite,
            mythicDiagonalOrbitFront var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite!important;
}
.mythic-card-diagonal-orbit.is-back > i{
  animation:mythicDiagonalOrbitMotion var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite,
            mythicDiagonalOrbitBack var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite!important;
}
.mythic-card-diagonal-orbit > i:nth-child(1){--mythic-diagonal-x:10.8em;--mythic-diagonal-y:15.1em;--mythic-diagonal-duration:17.8s;--mythic-diagonal-delay:-2.2s;--mythic-diagonal-turn:-21deg;background:linear-gradient(145deg,#FFFFFF,#FAE686 48%,#75F3CE)!important;}
.mythic-card-diagonal-orbit > i:nth-child(2){--mythic-diagonal-x:12.2em;--mythic-diagonal-y:13.8em;--mythic-diagonal-duration:15.9s;--mythic-diagonal-delay:-9.4s;--mythic-diagonal-turn:29deg;width:.52em!important;height:.84em!important;background:linear-gradient(150deg,#75F3CE,#4BBE61)!important;}
.mythic-card-diagonal-orbit > i:nth-child(3){--mythic-diagonal-x:11.4em;--mythic-diagonal-y:16em;--mythic-diagonal-duration:19.2s;--mythic-diagonal-delay:-6.7s;--mythic-diagonal-turn:53deg;width:.82em!important;height:1.3em!important;border-radius:38% 62% 29% 71% / 67% 31% 69% 33%!important;background:linear-gradient(138deg,#FAE686,#FFFFFF 58%,#4BBE61)!important;}
.mythic-card-diagonal-orbit > i:nth-child(4){--mythic-diagonal-x:12.7em;--mythic-diagonal-y:14.6em;--mythic-diagonal-duration:16.8s;--mythic-diagonal-delay:-13.1s;--mythic-diagonal-turn:-44deg;width:.49em!important;height:.78em!important;background:linear-gradient(145deg,#163217,#4BBE61 55%,#75F3CE)!important;}
.mythic-card-diagonal-orbit > i:nth-child(5){--mythic-diagonal-x:10.5em;--mythic-diagonal-y:14.1em;--mythic-diagonal-duration:18.6s;--mythic-diagonal-delay:-11.3s;--mythic-diagonal-turn:16deg;width:.74em!important;height:1.17em!important;border-radius:64% 36% 76% 24% / 39% 69% 31% 61%!important;background:linear-gradient(150deg,#75F3CE,#FFFFFF 47%,#FAE686)!important;}
.mythic-card-diagonal-orbit > i:nth-child(6){--mythic-diagonal-x:12em;--mythic-diagonal-y:15.5em;--mythic-diagonal-duration:17.1s;--mythic-diagonal-delay:-4.8s;--mythic-diagonal-turn:65deg;width:.57em!important;height:.91em!important;background:linear-gradient(142deg,#4BBE61,#163217)!important;}
html body .mythic-card-diagonal-orbit.is-album-diagonal > i:nth-child(1){--mythic-diagonal-x:7.6em!important;--mythic-diagonal-y:10.8em!important;}
html body .mythic-card-diagonal-orbit.is-album-diagonal > i:nth-child(2){--mythic-diagonal-x:8.5em!important;--mythic-diagonal-y:9.9em!important;}
html body .mythic-card-diagonal-orbit.is-album-diagonal > i:nth-child(3){--mythic-diagonal-x:8em!important;--mythic-diagonal-y:11.3em!important;}
html body .mythic-card-diagonal-orbit.is-album-diagonal > i:nth-child(4){--mythic-diagonal-x:8.8em!important;--mythic-diagonal-y:10.4em!important;}
html body .mythic-card-diagonal-orbit.is-album-diagonal > i:nth-child(5){--mythic-diagonal-x:7.4em!important;--mythic-diagonal-y:10.1em!important;}
html body .mythic-card-diagonal-orbit.is-album-diagonal > i:nth-child(6){--mythic-diagonal-x:8.4em!important;--mythic-diagonal-y:11em!important;}
@keyframes mythicDiagonalOrbitMotion{
  0%{transform:translate3d(-50%,calc(-50% - var(--mythic-diagonal-y)),0) rotate(var(--mythic-diagonal-turn)) scale(.72);}
  12.5%{transform:translate3d(calc(-50% + var(--mythic-diagonal-x)),calc(-50% - var(--mythic-diagonal-y)),0) rotate(calc(var(--mythic-diagonal-turn) + 45deg)) scale(.88);}
  25%{transform:translate3d(calc(-50% + var(--mythic-diagonal-x)),-50%,0) rotate(calc(var(--mythic-diagonal-turn) + 90deg)) scale(1.04);}
  37.5%{transform:translate3d(calc(-50% + var(--mythic-diagonal-x)),calc(-50% + var(--mythic-diagonal-y)),0) rotate(calc(var(--mythic-diagonal-turn) + 135deg)) scale(.92);}
  50%{transform:translate3d(-50%,calc(-50% + var(--mythic-diagonal-y)),0) rotate(calc(var(--mythic-diagonal-turn) + 180deg)) scale(.72);}
  62.5%{transform:translate3d(calc(-50% - var(--mythic-diagonal-x)),calc(-50% + var(--mythic-diagonal-y)),0) rotate(calc(var(--mythic-diagonal-turn) + 225deg)) scale(.9);}
  75%{transform:translate3d(calc(-50% - var(--mythic-diagonal-x)),-50%,0) rotate(calc(var(--mythic-diagonal-turn) + 270deg)) scale(1.05);}
  87.5%{transform:translate3d(calc(-50% - var(--mythic-diagonal-x)),calc(-50% - var(--mythic-diagonal-y)),0) rotate(calc(var(--mythic-diagonal-turn) + 315deg)) scale(.88);}
  100%{transform:translate3d(-50%,calc(-50% - var(--mythic-diagonal-y)),0) rotate(calc(var(--mythic-diagonal-turn) + 360deg)) scale(.72);}
}
@keyframes mythicDiagonalOrbitFront{
  0%,100%{opacity:.18;filter:blur(.28px) brightness(.9);}
  12.5%{opacity:.7;filter:blur(.08px) brightness(1.02);}
  25%{opacity:1;filter:blur(0) brightness(1.14);}
  40%{opacity:.72;filter:blur(.08px) brightness(1.02);}
  50%{opacity:.12;filter:blur(.35px) brightness(.82);}
  61%,88%{opacity:0;filter:blur(.55px) brightness(.72);}
}
@keyframes mythicDiagonalOrbitBack{
  0%,100%{opacity:.38;filter:blur(.45px) brightness(.78);}
  12.5%{opacity:.16;filter:blur(.5px) brightness(.75);}
  25%,40%{opacity:0;filter:blur(.6px) brightness(.7);}
  50%{opacity:.35;filter:blur(.48px) brightness(.78);}
  62.5%{opacity:.62;filter:blur(.3px) brightness(.86);}
  75%{opacity:.48;filter:blur(.38px) brightness(.82);}
  87.5%{opacity:.62;filter:blur(.3px) brightness(.88);}
}

/* Sparse white stars inside the artwork and immediately outside the card.
   Each uses a different cycle/delay to create non-synchronized appearances. */
.mythic-card-sparkles{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  pointer-events:none!important;
  contain:none!important;
}
html body .card-inspector-front.rarity-mythic > .mythic-card-sparkles.is-inspector-internal,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .mythic-card-sparkles.is-album-internal{
  z-index:12!important;
  overflow:hidden!important;
}
html body .card-inspector-front.rarity-mythic > .mythic-card-sparkles.is-inspector-internal{font-size:16px!important;}
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .mythic-card-sparkles.is-album-internal{font-size:7px!important;}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-sparkles.is-inspector-external-stars,
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-sparkles.is-album-external-stars{
  z-index:154!important;
  overflow:visible!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-card > .mythic-card-sparkles.is-inspector-external-stars{font-size:16px!important;}
html body .card-album.card-album-modal-book .card-book-slot.has-mythic-card > .mythic-card-sparkles.is-album-external-stars{font-size:7px!important;}
.mythic-card-sparkles > i{
  --mythic-spark-size:.2em;
  --mythic-spark-duration:4.8s;
  --mythic-spark-delay:0s;
  position:absolute!important;
  display:block!important;
  width:var(--mythic-spark-size)!important;
  height:var(--mythic-spark-size)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 0 .22em #fff,0 0 .58em rgba(255,255,255,.96),0 0 1em rgba(250,230,134,.58)!important;
  mix-blend-mode:screen!important;
  transform-origin:center!important;
  animation:mythicCardSparkleTwinkle var(--mythic-spark-duration) ease-in-out var(--mythic-spark-delay) infinite!important;
  animation-play-state:running!important;
  will-change:opacity,transform,filter!important;
}
.mythic-card-sparkles > i::before,
.mythic-card-sparkles > i::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%)!important;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.98),transparent)!important;
  filter:drop-shadow(0 0 .16em #fff)!important;
}
.mythic-card-sparkles > i::before{width:1px!important;height:calc(var(--mythic-spark-size) + .55em)!important;}
.mythic-card-sparkles > i::after{width:calc(var(--mythic-spark-size) + .55em)!important;height:1px!important;background:linear-gradient(to right,transparent,rgba(255,255,255,.98),transparent)!important;}
.mythic-card-sparkles > i:nth-child(1){--mythic-spark-size:.18em;--mythic-spark-duration:4.55s;--mythic-spark-delay:-.7s;}
.mythic-card-sparkles > i:nth-child(2){--mythic-spark-size:.26em;--mythic-spark-duration:5.8s;--mythic-spark-delay:-3.4s;}
.mythic-card-sparkles > i:nth-child(3){--mythic-spark-size:.15em;--mythic-spark-duration:4.95s;--mythic-spark-delay:-2.15s;}
.mythic-card-sparkles > i:nth-child(4){--mythic-spark-size:.22em;--mythic-spark-duration:6.25s;--mythic-spark-delay:-4.9s;}
.mythic-card-sparkles > i:nth-child(5){--mythic-spark-size:.17em;--mythic-spark-duration:5.3s;--mythic-spark-delay:-1.55s;}
.mythic-card-sparkles.is-inspector-internal > i:nth-child(1),.mythic-card-sparkles.is-album-internal > i:nth-child(1){left:18%!important;top:22%!important;}
.mythic-card-sparkles.is-inspector-internal > i:nth-child(2),.mythic-card-sparkles.is-album-internal > i:nth-child(2){left:79%!important;top:18%!important;}
.mythic-card-sparkles.is-inspector-internal > i:nth-child(3),.mythic-card-sparkles.is-album-internal > i:nth-child(3){left:31%!important;top:57%!important;}
.mythic-card-sparkles.is-inspector-internal > i:nth-child(4),.mythic-card-sparkles.is-album-internal > i:nth-child(4){left:72%!important;top:66%!important;}
.mythic-card-sparkles.is-inspector-internal > i:nth-child(5),.mythic-card-sparkles.is-album-internal > i:nth-child(5){left:49%!important;top:82%!important;}
.mythic-card-sparkles.is-inspector-external-stars > i:nth-child(1),.mythic-card-sparkles.is-album-external-stars > i:nth-child(1){left:-4%!important;top:17%!important;}
.mythic-card-sparkles.is-inspector-external-stars > i:nth-child(2),.mythic-card-sparkles.is-album-external-stars > i:nth-child(2){left:103%!important;top:31%!important;}
.mythic-card-sparkles.is-inspector-external-stars > i:nth-child(3),.mythic-card-sparkles.is-album-external-stars > i:nth-child(3){left:-3%!important;top:76%!important;}
.mythic-card-sparkles.is-inspector-external-stars > i:nth-child(4),.mythic-card-sparkles.is-album-external-stars > i:nth-child(4){left:102%!important;top:82%!important;}
.mythic-card-sparkles.is-inspector-external-stars > i:nth-child(5),.mythic-card-sparkles.is-album-external-stars > i:nth-child(5){display:none!important;}
@keyframes mythicCardSparkleTwinkle{
  0%,8%,100%{opacity:.05;transform:translate(-50%,-50%) scale(.34) rotate(0deg);filter:brightness(.85);}
  17%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(28deg);filter:brightness(1.35);}
  29%{opacity:.16;transform:translate(-50%,-50%) scale(.55) rotate(54deg);filter:brightness(.95);}
  43%{opacity:.72;transform:translate(-50%,-50%) scale(.88) rotate(86deg);filter:brightness(1.18);}
  55%,68%{opacity:0;transform:translate(-50%,-50%) scale(.24) rotate(118deg);filter:brightness(.8);}
  79%{opacity:.92;transform:translate(-50%,-50%) scale(1.02) rotate(153deg);filter:brightness(1.3);}
  90%{opacity:.12;transform:translate(-50%,-50%) scale(.48) rotate(182deg);filter:brightness(.92);}
}

@media (prefers-reduced-motion:reduce){
  html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer{
    animation:mythicPanoramaFloatV14Inspector 5.45s ease-in-out infinite!important;
  }
  .mythic-card-diagonal-orbit.is-front > i{
    animation:mythicDiagonalOrbitMotion var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite,
              mythicDiagonalOrbitFront var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite!important;
  }
  .mythic-card-diagonal-orbit.is-back > i{
    animation:mythicDiagonalOrbitMotion var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite,
              mythicDiagonalOrbitBack var(--mythic-diagonal-duration) linear var(--mythic-diagonal-delay) infinite!important;
  }
  .mythic-card-sparkles > i{
    animation:mythicCardSparkleTwinkle var(--mythic-spark-duration) ease-in-out var(--mythic-spark-delay) infinite!important;
  }
}

/* MYTHIC v15 — inspector visibility hotfix.
   v14 changed the rotator host to normal document flow. Its 3D children are
   positioned layers, so the host collapsed and the complete card disappeared.
   Restore the host to the exact card canvas without touching the album or any
   approved MYTHIC visual effect. */
html body .card-inspector-backdrop.rarity-mythic .fourfun-card-shell.card-inspector-card.is-mythic-card{
  position:relative!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:40!important;
  pointer-events:auto!important;
  overflow:visible!important;
  transform-style:preserve-3d!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator-host > .card-inspector-rotator.rarity-mythic{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  transform-style:preserve-3d!important;
}
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator.rarity-mythic > .card-inspector-front.rarity-mythic,
html body .card-inspector-backdrop.rarity-mythic .card-inspector-rotator.rarity-mythic > .card-inspector-back.rarity-mythic{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* MYTHIC v16 — inspector-only parallax correction and botanical environment.
   The approved card, frame, seal, album, orbit and sparkle layers remain
   untouched. Only the configured artwork receives pointer parallax; the
   panorama keeps a smaller independent float with a stable raster. */
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > img.card-inspector-main-image{
  transform:translate3d(var(--mythic-art-parallax-x,0px),var(--mythic-art-parallax-y,0px),0) scale(1.01)!important;
  transform-origin:50% 50%!important;
  image-rendering:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:transform!important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > img.card-mythic-art-sweep-image{
  transform:translate3d(var(--mythic-art-parallax-x,0px),var(--mythic-art-parallax-y,0px),0) scale(1.01)!important;
  transform-origin:50% 50%!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer{
  transform-style:flat!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  animation:mythicPanoramaFloatV16Inspector 5.7s ease-in-out infinite!important;
  will-change:transform!important;
}
@keyframes mythicPanoramaFloatV16Inspector{
  0%,100%{transform:translateY(-2px);}
  48%{transform:translateY(2px);}
  72%{transform:translateY(.7px);}
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image{
  transform:none!important;
  image-rendering:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  filter:drop-shadow(0 1px 0 rgba(4,18,9,.32)) drop-shadow(0 -1px 0 rgba(255,248,218,.14)) saturate(1.045) contrast(1.035)!important;
  will-change:auto!important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image{
  transform:none!important;
  image-rendering:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/* Full-screen MYTHIC botanical decoration. Every visible shape is built as an
   organic vine, leaf, flower, root or drifting petal and stays behind the card
   and copy so the inspected card remains the focal point. */
html body .card-inspector-backdrop.rarity-mythic{
  isolation:isolate!important;
}
html body .card-inspector-backdrop.rarity-mythic > .mythic-inspector-garden{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:.78!important;
  background:
    radial-gradient(ellipse at 5% 54%,rgba(22,50,23,.25),transparent 27%),
    radial-gradient(ellipse at 95% 44%,rgba(75,190,97,.11),transparent 25%),
    radial-gradient(ellipse at 50% 108%,rgba(22,50,23,.30),transparent 39%)!important;
}
html body .card-inspector-backdrop.rarity-mythic > .card-inspector,
html body .card-inspector-backdrop.rarity-mythic > .card-inspector-close{
  position:relative!important;
  z-index:10!important;
}
.mythic-garden-side{
  --garden-mirror:1;
  position:absolute!important;
  top:4%!important;
  left:-18px!important;
  width:min(21vw,265px)!important;
  height:88%!important;
  transform:scaleX(var(--garden-mirror));
  transform-origin:50% 100%!important;
  animation:mythicGardenSway 10.5s ease-in-out infinite!important;
  filter:drop-shadow(0 0 13px rgba(75,190,97,.12))!important;
}
.mythic-garden-side.is-right{
  --garden-mirror:-1;
  left:auto!important;
  right:-18px!important;
  animation-delay:-5.2s!important;
}
.mythic-garden-vine{
  position:absolute!important;
  display:block!important;
  border-color:rgba(75,190,97,.58)!important;
  filter:drop-shadow(0 0 3px rgba(117,243,206,.14))!important;
}
.mythic-garden-vine.is-main{
  left:24%!important;
  top:2%!important;
  width:63%!important;
  height:95%!important;
  border-left:5px solid rgba(22,50,23,.94)!important;
  border-top:2px solid rgba(75,190,97,.48)!important;
  border-radius:73% 26% 62% 35% / 42% 58% 40% 60%!important;
  transform:rotate(-4deg)!important;
  box-shadow:inset 2px 0 0 rgba(117,243,206,.17)!important;
}
.mythic-garden-vine.is-main::before,
.mythic-garden-vine.is-main::after{
  content:""!important;
  position:absolute!important;
  width:54%!important;
  height:30%!important;
  border-top:3px solid rgba(22,50,23,.92)!important;
  border-radius:58% 42% 70% 30%!important;
}
.mythic-garden-vine.is-main::before{left:-9%!important;top:31%!important;transform:rotate(-31deg)!important;}
.mythic-garden-vine.is-main::after{left:2%!important;top:66%!important;transform:rotate(29deg)!important;}
.mythic-garden-vine.is-branch-a{
  left:31%!important;
  top:12%!important;
  width:55%!important;
  height:38%!important;
  border-top:3px solid rgba(22,50,23,.88)!important;
  border-radius:62% 38% 74% 26%!important;
  transform:rotate(18deg)!important;
}
.mythic-garden-vine.is-branch-b{
  left:18%!important;
  top:53%!important;
  width:62%!important;
  height:31%!important;
  border-top:3px solid rgba(22,50,23,.86)!important;
  border-radius:32% 68% 28% 72%!important;
  transform:rotate(-24deg)!important;
}
.mythic-garden-leaf{
  position:absolute!important;
  display:block!important;
  width:28px!important;
  height:48px!important;
  border-radius:82% 18% 78% 22% / 69% 26% 74% 31%!important;
  background:linear-gradient(145deg,#75F3CE 0%,#4BBE61 32%,#163217 88%)!important;
  box-shadow:inset 4px 2px 8px rgba(255,255,255,.12),0 0 9px rgba(75,190,97,.17)!important;
  transform-origin:20% 86%!important;
  animation:mythicGardenLeafBreath 6.8s ease-in-out infinite!important;
}
.mythic-garden-leaf::after{
  content:""!important;
  position:absolute!important;
  left:48%!important;
  top:12%!important;
  width:1px!important;
  height:72%!important;
  background:linear-gradient(to bottom,rgba(250,230,134,.54),rgba(117,243,206,.12))!important;
  transform:rotate(10deg)!important;
}
.mythic-garden-leaf.leaf-1{left:29%!important;top:8%!important;transform:rotate(-48deg) scale(.88)!important;animation-delay:-1.1s!important;}
.mythic-garden-leaf.leaf-2{left:57%!important;top:18%!important;transform:rotate(54deg) scale(.72)!important;animation-delay:-3.8s!important;}
.mythic-garden-leaf.leaf-3{left:18%!important;top:30%!important;transform:rotate(-69deg) scale(.66)!important;animation-delay:-2.2s!important;}
.mythic-garden-leaf.leaf-4{left:54%!important;top:39%!important;transform:rotate(68deg) scale(.9)!important;animation-delay:-5.4s!important;}
.mythic-garden-leaf.leaf-5{left:22%!important;top:51%!important;transform:rotate(-52deg) scale(.78)!important;animation-delay:-.4s!important;}
.mythic-garden-leaf.leaf-6{left:57%!important;top:61%!important;transform:rotate(57deg) scale(.65)!important;animation-delay:-4.5s!important;}
.mythic-garden-leaf.leaf-7{left:16%!important;top:71%!important;transform:rotate(-74deg) scale(.82)!important;animation-delay:-2.9s!important;}
.mythic-garden-leaf.leaf-8{left:48%!important;top:79%!important;transform:rotate(44deg) scale(.96)!important;animation-delay:-6s!important;}
.mythic-garden-leaf.leaf-9{left:28%!important;top:89%!important;transform:rotate(-38deg) scale(.63)!important;animation-delay:-1.7s!important;}
.mythic-garden-flower{
  position:absolute!important;
  display:block!important;
  width:40px!important;
  height:40px!important;
  transform-origin:center!important;
  animation:mythicGardenBloom 7.6s ease-in-out infinite!important;
  filter:drop-shadow(0 0 7px rgba(250,230,134,.22));
}
.mythic-garden-flower > i{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:12px!important;
  height:20px!important;
  margin-left:-6px!important;
  margin-top:-19px!important;
  transform-origin:50% 100%!important;
  border-radius:70% 30% 70% 30% / 82% 36% 64% 18%!important;
  background:linear-gradient(to bottom,#FFFFFF 0%,#FAE686 52%,rgba(117,243,206,.72) 100%)!important;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.5)!important;
}
.mythic-garden-flower > i:nth-child(1){transform:rotate(0deg)!important;}
.mythic-garden-flower > i:nth-child(2){transform:rotate(72deg)!important;}
.mythic-garden-flower > i:nth-child(3){transform:rotate(144deg)!important;}
.mythic-garden-flower > i:nth-child(4){transform:rotate(216deg)!important;}
.mythic-garden-flower > i:nth-child(5){transform:rotate(288deg)!important;}
.mythic-garden-flower > b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  background:radial-gradient(circle,#FFFFFF 0%,#FAE686 34%,#b77a13 100%)!important;
  box-shadow:0 0 8px rgba(250,230,134,.52)!important;
}
.mythic-garden-side .flower-1{left:44%!important;top:14%!important;transform:scale(.75)!important;animation-delay:-1.8s!important;}
.mythic-garden-side .flower-2{left:22%!important;top:47%!important;transform:scale(.58)!important;animation-delay:-5.1s!important;}
.mythic-garden-side .flower-3{left:49%!important;top:76%!important;transform:scale(.86)!important;animation-delay:-3.2s!important;}
.mythic-garden-canopy{
  --canopy-mirror:1;
  position:absolute!important;
  top:-14px!important;
  left:7%!important;
  width:240px!important;
  height:145px!important;
  transform:scaleX(var(--canopy-mirror)) rotate(-7deg);
  transform-origin:0 0!important;
  animation:mythicGardenCanopySway 12s ease-in-out infinite!important;
}
.mythic-garden-canopy.is-right{
  --canopy-mirror:-1;
  left:auto!important;
  right:7%!important;
  animation-delay:-6s!important;
}
.mythic-garden-canopy > i{
  position:absolute!important;
  left:18px!important;
  top:24px!important;
  width:180px!important;
  height:90px!important;
  border-top:4px solid rgba(22,50,23,.88)!important;
  border-radius:62% 38% 74% 26%!important;
}
.mythic-garden-canopy > i:nth-child(2){left:62px!important;top:47px!important;width:128px!important;transform:rotate(24deg)!important;border-top-width:3px!important;}
.mythic-garden-canopy > i:nth-child(3){left:96px!important;top:66px!important;width:98px!important;transform:rotate(46deg)!important;border-top-color:rgba(75,190,97,.48)!important;}
.mythic-garden-canopy > b{
  position:absolute!important;
  left:164px!important;
  top:80px!important;
  width:22px!important;
  height:34px!important;
  border-radius:80% 20% 78% 22% / 70% 28% 72% 30%!important;
  background:linear-gradient(145deg,#75F3CE,#4BBE61 45%,#163217)!important;
  transform:rotate(52deg)!important;
  box-shadow:0 0 10px rgba(117,243,206,.15)!important;
}
.mythic-garden-root-bed{
  position:absolute!important;
  left:4%!important;
  right:4%!important;
  bottom:-22px!important;
  height:190px!important;
  opacity:.74;
  filter:drop-shadow(0 -5px 14px rgba(22,50,23,.28))!important;
  animation:mythicGardenRootBreathe 13s ease-in-out infinite!important;
}
.mythic-garden-root{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  display:block!important;
  width:44%!important;
  height:145px!important;
  border-top:6px solid rgba(22,50,23,.94)!important;
  border-radius:50% 50% 24% 76%!important;
  transform-origin:0 100%!important;
  box-shadow:inset 0 2px 0 rgba(75,190,97,.12)!important;
}
.mythic-garden-root.root-1{transform:translateX(-4%) rotate(-9deg)!important;}
.mythic-garden-root.root-2{transform:translateX(-12%) rotate(-23deg) scale(.86)!important;}
.mythic-garden-root.root-3{transform:translateX(-28%) rotate(-40deg) scale(.67)!important;}
.mythic-garden-root.root-4{transform:translateX(-55%) rotate(-155deg)!important;}
.mythic-garden-root.root-5{transform:translateX(-64%) rotate(-139deg) scale(.84)!important;}
.mythic-garden-root.root-6{transform:translateX(-72%) rotate(-121deg) scale(.66)!important;}
.mythic-garden-root.root-7{transform:translateX(-38%) rotate(-79deg) scale(.5)!important;border-top-color:rgba(75,190,97,.43)!important;}
.mythic-garden-root-bed .root-flower-1{left:14%!important;bottom:35px!important;transform:scale(.68)!important;animation-delay:-2.4s!important;}
.mythic-garden-root-bed .root-flower-2{right:12%!important;bottom:43px!important;transform:scale(.55)!important;animation-delay:-5.7s!important;}
.mythic-garden-drifting-petals{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
}
.mythic-garden-drifting-petals > i{
  --garden-petal-x:0vw;
  --garden-petal-drift:36px;
  --garden-petal-scale:1;
  position:absolute!important;
  top:-8%!important;
  left:var(--garden-petal-x)!important;
  width:10px!important;
  height:17px!important;
  border-radius:76% 24% 68% 32% / 82% 36% 64% 18%!important;
  background:linear-gradient(145deg,#FFFFFF,#FAE686 52%,#75F3CE)!important;
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.26))!important;
  animation:mythicGardenPetalFall 13s linear infinite!important;
}
.mythic-garden-drifting-petals > i:nth-child(1){--garden-petal-x:4vw;--garden-petal-drift:42px;animation-delay:-2s!important;animation-duration:14.5s!important;}
.mythic-garden-drifting-petals > i:nth-child(2){--garden-petal-x:12vw;--garden-petal-drift:-28px;animation-delay:-8s!important;--garden-petal-scale:.65;}
.mythic-garden-drifting-petals > i:nth-child(3){--garden-petal-x:23vw;--garden-petal-drift:24px;animation-delay:-5s!important;--garden-petal-scale:.82;}
.mythic-garden-drifting-petals > i:nth-child(4){--garden-petal-x:76vw;--garden-petal-drift:-33px;animation-delay:-10.5s!important;--garden-petal-scale:.72;}
.mythic-garden-drifting-petals > i:nth-child(5){--garden-petal-x:88vw;--garden-petal-drift:31px;animation-delay:-3.5s!important;}
.mythic-garden-drifting-petals > i:nth-child(6){--garden-petal-x:96vw;--garden-petal-drift:-45px;animation-delay:-7.2s!important;--garden-petal-scale:.58;}
.mythic-garden-drifting-petals > i:nth-child(7){--garden-petal-x:34vw;--garden-petal-drift:-18px;animation-delay:-12s!important;--garden-petal-scale:.55;}
.mythic-garden-drifting-petals > i:nth-child(8){--garden-petal-x:66vw;--garden-petal-drift:21px;animation-delay:-1s!important;--garden-petal-scale:.7;}
@keyframes mythicGardenSway{
  0%,100%{transform:scaleX(var(--garden-mirror)) rotate(-1deg);}
  50%{transform:scaleX(var(--garden-mirror)) rotate(1.8deg);}
}
@keyframes mythicGardenLeafBreath{
  0%,100%{filter:brightness(.82) saturate(.9);}
  50%{filter:brightness(1.13) saturate(1.08);}
}
@keyframes mythicGardenBloom{
  0%,100%{filter:drop-shadow(0 0 5px rgba(250,230,134,.15)) brightness(.9);}
  50%{filter:drop-shadow(0 0 11px rgba(250,230,134,.36)) brightness(1.12);}
}
@keyframes mythicGardenCanopySway{
  0%,100%{transform:scaleX(var(--canopy-mirror)) rotate(-7deg);}
  50%{transform:scaleX(var(--canopy-mirror)) rotate(-3deg);}
}
@keyframes mythicGardenRootBreathe{
  0%,100%{transform:scaleY(.98);opacity:.65;}
  50%{transform:scaleY(1.025);opacity:.82;}
}
@keyframes mythicGardenPetalFall{
  0%{opacity:0;transform:translate3d(0,-6vh,0) rotate(0deg) scale(var(--garden-petal-scale,1));}
  12%{opacity:.46;}
  78%{opacity:.28;}
  100%{opacity:0;transform:translate3d(var(--garden-petal-drift),112vh,0) rotate(540deg) scale(var(--garden-petal-scale,1));}
}
@media (max-width:900px){
  html body .card-inspector-backdrop.rarity-mythic > .mythic-inspector-garden{opacity:.5!important;}
  .mythic-garden-side{width:150px!important;}
  .mythic-garden-canopy{width:175px!important;height:110px!important;}
  .mythic-garden-root-bed{left:-15%!important;right:-15%!important;opacity:.5!important;}
}
@media (prefers-reduced-motion:reduce){
  html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer{
    animation:mythicPanoramaFloatV16Inspector 7.5s ease-in-out infinite!important;
  }
  .mythic-garden-side{animation:mythicGardenSway 16s ease-in-out infinite!important;}
  .mythic-garden-drifting-petals > i{animation-duration:20s!important;}
}

/* MYTHIC v17 — inspector viewport containment.
   The botanical garden must remain a purely decorative fixed layer. Restore
   the inspector and close button to their original absolute positioning so
   the existing centering rules are not converted into document-flow offsets,
   and keep the complete modal inside the viewport without browser scrollbars. */
html body .card-inspector-backdrop.rarity-mythic{
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  overscroll-behavior:none!important;
}
html body .card-inspector-backdrop.rarity-mythic > .card-inspector{
  position:absolute!important;
  z-index:10!important;
}
html body .card-inspector-backdrop.rarity-mythic > .card-inspector-close{
  position:absolute!important;
  z-index:50!important;
}
html body .card-inspector-backdrop.rarity-mythic > .mythic-inspector-garden{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  contain:paint!important;
}

/* MYTHIC v18 — fixed full-screen flower overlay.
   flowerbg.png is a transparent 1920x1080 composition intended to place one
   botanical ornament at the top and another at the bottom of the viewport.
   It remains outside document flow, cannot create scrollbars, and stays above
   the existing garden while remaining below the inspected card and controls. */
html body .card-inspector-backdrop.rarity-mythic::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:4!important;
  display:block!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:100vw!important;
  max-height:100dvh!important;
  pointer-events:none!important;
  overflow:hidden!important;
  background-color:transparent!important;
  background-image:url('/images/flowerbg.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* MYTHIC v20 — keep the approved inspector layout and effects while rendering
   the on-card seal as a crisp, unfiltered image. The animated edge glow runs
   on an identical image underneath, so GPU filter rasterization no longer
   softens the visible seal artwork. */
html body .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.card-inspector-unified-seal.is-on-card{
  animation:none!important;
  filter:none!important;
  will-change:auto!important;
  image-rendering:auto!important;
  -ms-interpolation-mode:bicubic;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  opacity:1!important;
}
html body .card-inspector-front.rarity-mythic > img.card-mythic-seal-edge.is-on-card{
  position:absolute!important;
  display:block!important;
  top:6.9%!important;
  right:1.2%!important;
  bottom:auto!important;
  left:auto!important;
  width:34.2%!important;
  min-width:34.2%!important;
  max-width:34.2%!important;
  height:10.8%!important;
  min-height:10.8%!important;
  max-height:10.8%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center!important;
  pointer-events:none!important;
  z-index:73!important;
  opacity:1!important;
  transform:none!important;
  transform-origin:center!important;
  animation:mythicSealNeonTrace 4.2s ease-in-out infinite!important;
  will-change:filter!important;
}

/* MYTHIC v21 — full-screen acquisition ceremony.
   This reuses the approved MYTHIC inspector garden, flower overlay, physical
   card, panorama, seal and orbit effects. Only the entrance sequence and its
   album action are new. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay{
  z-index:10040!important;
  cursor:default!important;
  background:rgba(5,10,7,.96)!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay > .card-inspector.is-mythic-acquisition{
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:1fr!important;
  place-items:center!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
  position:relative!important;
  inset:auto!important;
  width:clamp(248px,21.5vw,372px)!important;
  height:auto!important;
  aspect-ratio:991/1473!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  transform:none!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-complete .card-inspector-stage.mythic-acquisition-stage{
  pointer-events:auto!important;
  cursor:grab!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-complete .card-inspector-stage.mythic-acquisition-stage:active{
  cursor:grabbing!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .fourfun-card-shell.card-inspector-card.mythic-acquisition-card{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  transform-origin:50% 52%!important;
  will-change:opacity,filter,clip-path,transform!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-delay .mythic-acquisition-card,
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-awakening .mythic-acquisition-card{
  opacity:0!important;
  visibility:hidden!important;
  clip-path:polygon(49% 50%,51% 50%,51% 50%,49% 50%)!important;
  filter:brightness(2.2) saturate(.4) blur(8px)!important;
  transform:scale(.82)!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-assembling .mythic-acquisition-card{
  visibility:visible!important;
  animation:mythicAcquisitionAssemble 2.68s steps(18,end) both!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-complete .mythic-acquisition-card{
  visibility:visible!important;
  opacity:1!important;
  clip-path:inset(0)!important;
  filter:none!important;
  transform:none!important;
}
@keyframes mythicAcquisitionAssemble{
  0%{opacity:.04;clip-path:polygon(48% 48%,52% 48%,52% 53%,48% 53%);filter:brightness(3.2) saturate(.25) blur(9px);transform:scale(.84) translateY(18px);}
  12%{opacity:.2;clip-path:polygon(35% 43%,65% 38%,62% 56%,39% 61%);filter:brightness(2.8) saturate(.5) blur(7px);}
  25%{opacity:.34;clip-path:polygon(20% 31%,82% 24%,74% 45%,88% 57%,69% 71%,31% 66%,12% 51%);filter:brightness(2.45) saturate(.65) blur(5.5px);}
  39%{opacity:.5;clip-path:polygon(9% 17%,91% 11%,83% 33%,98% 46%,87% 63%,93% 78%,65% 84%,42% 75%,13% 89%,4% 58%);filter:brightness(2.1) saturate(.78) blur(4px);}
  54%{opacity:.66;clip-path:polygon(0 5%,77% 2%,100% 17%,89% 38%,100% 55%,91% 71%,100% 91%,71% 100%,48% 90%,18% 100%,0 82%,8% 59%,0 36%);filter:brightness(1.8) saturate(.88) blur(2.8px);}
  72%{opacity:.83;clip-path:polygon(0 0,100% 0,100% 31%,94% 45%,100% 61%,100% 100%,68% 100%,52% 95%,35% 100%,0 100%,0 69%,6% 51%,0 34%);filter:brightness(1.45) saturate(.96) blur(1.5px);transform:scale(.985) translateY(3px);}
  88%{opacity:.96;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1.15) saturate(1.03) blur(.35px);}
  100%{opacity:1;clip-path:inset(0);filter:none;transform:none;}
}
.mythic-acquisition-awakening-light{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  z-index:12!important;
  width:min(70vw,900px)!important;
  height:min(70vw,900px)!important;
  translate:-50% -50%!important;
  pointer-events:none!important;
  opacity:0!important;
  border-radius:50%!important;
  mix-blend-mode:screen!important;
}
.mythic-acquisition-awakening-light > i,
.mythic-acquisition-awakening-light > b{
  position:absolute!important;
  inset:50%!important;
  display:block!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%) scale(.02)!important;
  opacity:0!important;
}
.mythic-acquisition-awakening-light > i:first-child{
  width:100%!important;
  height:100%!important;
  background:radial-gradient(circle,rgba(255,250,218,.82) 0%,rgba(250,230,134,.38) 16%,rgba(117,243,206,.16) 35%,transparent 67%)!important;
  filter:blur(12px)!important;
}
.mythic-acquisition-awakening-light > i:nth-child(2){
  width:58%!important;
  height:58%!important;
  background:radial-gradient(circle,rgba(255,255,255,.96) 0%,rgba(250,230,134,.48) 18%,rgba(75,190,97,.17) 44%,transparent 72%)!important;
  filter:blur(5px)!important;
}
.mythic-acquisition-awakening-light > b{
  width:8%!important;
  height:70%!important;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.85),rgba(250,230,134,.64),transparent)!important;
  filter:blur(3px)!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light,
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-awakening-light{
  opacity:1!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light > i:first-child{
  animation:mythicAcquisitionLightGrow 1.18s cubic-bezier(.16,.72,.2,1) both!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light > i:nth-child(2){
  animation:mythicAcquisitionLightGrow 1.08s .08s cubic-bezier(.16,.72,.2,1) both!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light > b{
  animation:mythicAcquisitionRayGrow 1.1s .12s ease-out both!important;
}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-awakening-light{
  animation:mythicAcquisitionLightDepart 2.2s ease-out both!important;
}
@keyframes mythicAcquisitionLightGrow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.02);}
  58%{opacity:1;transform:translate(-50%,-50%) scale(.62);}
  100%{opacity:.88;transform:translate(-50%,-50%) scale(1);}
}
@keyframes mythicAcquisitionRayGrow{
  0%{opacity:0;transform:translate(-50%,-50%) scaleY(.03) scaleX(.2);}
  70%{opacity:.9;transform:translate(-50%,-50%) scaleY(1) scaleX(1);}
  100%{opacity:.55;transform:translate(-50%,-50%) scaleY(1.18) scaleX(.7);}
}
@keyframes mythicAcquisitionLightDepart{
  0%{opacity:.92;transform:scale(1);}
  45%{opacity:.55;transform:scale(1.12);}
  100%{opacity:0;transform:scale(1.42);}
}
.mythic-acquisition-fragment-field{
  position:absolute!important;
  inset:-10%!important;
  z-index:95!important;
  overflow:visible!important;
  pointer-events:none!important;
  opacity:0!important;
}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-fragment-field{
  opacity:1!important;
}
.mythic-acquisition-fragment-field > i{
  position:absolute!important;
  left:var(--mythic-build-x)!important;
  top:var(--mythic-build-y)!important;
  width:var(--mythic-build-size)!important;
  height:calc(var(--mythic-build-size) * 1.8)!important;
  border-radius:70% 30% 65% 35% / 75% 35% 65% 25%!important;
  background:linear-gradient(145deg,#fff,#FAE686 38%,#75F3CE 72%,#4BBE61)!important;
  box-shadow:0 0 7px rgba(255,255,255,.9),0 0 15px rgba(117,243,206,.64)!important;
  opacity:0!important;
  transform:translate(-50%,-50%) scale(2.6) rotate(calc(var(--mythic-build-index) * 23deg))!important;
  animation:mythicAcquisitionFragment 1.3s var(--mythic-build-delay) ease-in-out both!important;
}
@keyframes mythicAcquisitionFragment{
  0%{opacity:0;transform:translate(-50%,-50%) scale(3.2) rotate(0deg);filter:blur(4px);}
  28%{opacity:.95;filter:blur(.5px);}
  68%{opacity:.7;transform:translate(-50%,-50%) scale(.7) rotate(150deg);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(270deg);filter:blur(1px);}
}
.mythic-acquisition-actions{
  position:fixed!important;
  left:50%!important;
  bottom:clamp(22px,5vh,58px)!important;
  z-index:90!important;
  translate:-50% 0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:9px!important;
  opacity:0!important;
  transform:translateY(18px)!important;
  pointer-events:none!important;
  transition:opacity .6s ease,transform .6s ease!important;
}
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-actions{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
.mythic-acquisition-actions > p{
  margin:0!important;
  color:#FAE686!important;
  font-size:clamp(10px,.75vw,13px)!important;
  font-weight:800!important;
  letter-spacing:.24em!important;
  text-shadow:0 0 12px rgba(250,230,134,.48)!important;
}
.mythic-acquisition-album-button{
  min-width:190px!important;
  padding:13px 28px!important;
  text-transform:uppercase!important;
  letter-spacing:.09em!important;
  box-shadow:0 0 22px rgba(250,230,134,.28),0 8px 24px rgba(0,0,0,.35)!important;
}
.mythic-acquisition-album-button:disabled{
  opacity:0!important;
  pointer-events:none!important;
}
@media (max-width:720px){
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
    width:min(68vw,330px)!important;
  }
  .mythic-acquisition-actions{bottom:20px!important;}
}

/* MYTHIC v22 — acquisition presentation polish and locked Album parity.
   Keeps the approved inspector/garden/card effects intact while giving the
   ceremony a larger interaction volume, a real title above the card, the
   default Inventory OPEN button below it, a slower reveal and a visible
   center awakening glow. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay > .card-inspector.is-mythic-acquisition{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  place-items:center!important;
  gap:clamp(8px,1.35dvh,16px)!important;
  padding:clamp(14px,2.2dvh,28px) clamp(12px,2vw,30px)!important;
  overflow:hidden!important;
}
.mythic-acquisition-heading{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  z-index:96!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(10px,1.2vw,20px)!important;
  min-height:clamp(40px,6dvh,70px)!important;
  margin:0!important;
  padding:0 clamp(10px,2vw,28px)!important;
  opacity:0!important;
  transform:translateY(-18px) scale(.94)!important;
  pointer-events:none!important;
  filter:blur(4px)!important;
}
.mythic-acquisition-heading > p{
  margin:0!important;
  color:#FAE686!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(25px,3vw,52px)!important;
  font-weight:900!important;
  line-height:.94!important;
  letter-spacing:.075em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  background:linear-gradient(180deg,#fffdf0 0%,#FAE686 37%,#d9a93e 72%,#75F3CE 125%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 11px rgba(255,255,255,.22),0 0 24px rgba(250,230,134,.38),0 0 46px rgba(75,190,97,.15)!important;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.72))!important;
}
.mythic-acquisition-heading > span{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:clamp(18px,2vw,31px)!important;
  height:clamp(18px,2vw,31px)!important;
  color:#fff!important;
  font-size:clamp(15px,1.8vw,27px)!important;
  line-height:1!important;
  text-shadow:0 0 5px #fff,0 0 13px #FAE686,0 0 24px rgba(117,243,206,.65)!important;
  animation:mythicAcquisitionHeadingStar 2.7s ease-in-out infinite!important;
}
.mythic-acquisition-heading > span:last-child{animation-delay:-1.35s!important;}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-heading{
  animation:mythicAcquisitionHeadingArrive 1.45s 2.45s cubic-bezier(.16,.82,.2,1) both!important;
}
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-heading{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:mythicAcquisitionHeadingBreathe 4.2s ease-in-out infinite!important;
}
@keyframes mythicAcquisitionHeadingArrive{
  0%{opacity:0;transform:translateY(-20px) scale(.91);filter:blur(6px);}
  58%{opacity:1;transform:translateY(2px) scale(1.025);filter:blur(.4px);}
  100%{opacity:1;transform:none;filter:none;}
}
@keyframes mythicAcquisitionHeadingBreathe{
  0%,100%{filter:drop-shadow(0 0 0 rgba(250,230,134,0));}
  50%{filter:drop-shadow(0 0 13px rgba(250,230,134,.25));}
}
@keyframes mythicAcquisitionHeadingStar{
  0%,100%{opacity:.58;transform:scale(.76) rotate(0deg);}
  45%{opacity:1;transform:scale(1.14) rotate(22deg);}
  65%{opacity:.82;transform:scale(.96) rotate(34deg);}
}

/* Reserve a substantially larger fixed stage around the physical card. The
   card keeps its approved size while rotations have room on every side. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
  grid-column:1!important;
  grid-row:2!important;
  width:min(92vw,920px)!important;
  height:min(70dvh,760px)!important;
  max-width:92vw!important;
  max-height:70dvh!important;
  aspect-ratio:auto!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  perspective:1500px!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .fourfun-card-shell.card-inspector-card.mythic-acquisition-card{
  position:relative!important;
  inset:auto!important;
  grid-area:1/1!important;
  width:min(78vw,38.9dvh,372px)!important;
  min-width:0!important;
  max-width:372px!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:991/1473!important;
  margin:auto!important;
}

/* Strong, unmistakable center light, still behind the physical card. */
.mythic-acquisition-awakening-light{
  z-index:19!important;
  width:min(86vw,1120px)!important;
  height:min(86vw,1120px)!important;
  overflow:visible!important;
}
.mythic-acquisition-awakening-light::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:44%!important;
  height:44%!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%) scale(.04)!important;
  opacity:0!important;
  background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(250,230,134,.68) 12%,rgba(117,243,206,.34) 31%,rgba(75,190,97,.13) 50%,transparent 72%)!important;
  box-shadow:0 0 45px rgba(255,255,255,.62),0 0 110px rgba(250,230,134,.52),0 0 210px rgba(117,243,206,.28)!important;
  filter:blur(4px)!important;
  mix-blend-mode:screen!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light::before{
  animation:mythicAcquisitionCoreGrow 1.72s cubic-bezier(.14,.78,.18,1) both!important;
}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-awakening-light::before{
  animation:mythicAcquisitionCoreDepart 3.55s ease-out both!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light > i:first-child{
  animation-duration:1.76s!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light > i:nth-child(2){
  animation-duration:1.64s!important;
}
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-awakening-light > b{
  animation-duration:1.68s!important;
}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-awakening-light{
  animation-duration:3.55s!important;
}
@keyframes mythicAcquisitionCoreGrow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.04);}
  48%{opacity:.82;transform:translate(-50%,-50%) scale(.58);}
  78%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}
  100%{opacity:.92;transform:translate(-50%,-50%) scale(1);}
}
@keyframes mythicAcquisitionCoreDepart{
  0%{opacity:.94;transform:translate(-50%,-50%) scale(1);}
  48%{opacity:.62;transform:translate(-50%,-50%) scale(1.28);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.78);}
}

/* Slower reverse-disintegration build. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-assembling .mythic-acquisition-card{
  animation-duration:4.18s!important;
  animation-timing-function:steps(24,end)!important;
}
.mythic-acquisition-fragment-field > i{
  animation-duration:1.85s!important;
}

/* Place the exact Inventory OPEN-style action below the card. */
.mythic-acquisition-actions{
  grid-column:1!important;
  grid-row:3!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  z-index:96!important;
  translate:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:58px!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(14px)!important;
}
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-actions{
  transform:none!important;
}
.mythic-acquisition-album-button-shell{
  --box-glow:#d6b45f;
  position:relative!important;
  flex:0 0 180px!important;
  width:180px!important;
  min-width:180px!important;
  max-width:180px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.mythic-acquisition-album-button{
  position:relative!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:180px!important;
  min-width:180px!important;
  max-width:180px!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:14px 22px!important;
  color:#fffaf0!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.075em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  border-color:color-mix(in srgb,var(--box-glow) 72%,white 28%)!important;
  background:repeating-linear-gradient(125deg,rgba(255,255,255,.13) 0 1px,transparent 1px 7px),linear-gradient(145deg,color-mix(in srgb,var(--box-glow) 62%,white 38%),var(--box-glow) 51%,color-mix(in srgb,var(--box-glow) 72%,#090d0a 28%))!important;
  text-shadow:0 1px 2px rgba(0,0,0,.82),0 0 8px rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -4px 0 color-mix(in srgb,var(--box-glow) 58%,#050806 42%),0 6px 0 color-mix(in srgb,var(--box-glow) 34%,#030503 66%),0 0 20px color-mix(in srgb,var(--box-glow) 28%,transparent),0 12px 24px rgba(0,0,0,.27)!important;
}
.mythic-acquisition-album-button:hover:not(:disabled){
  filter:brightness(1.11) saturate(1.08)!important;
}
.mythic-acquisition-album-button > .inventory-open-button-label{
  position:relative!important;
  z-index:20!important;
  display:block!important;
  width:100%!important;
  color:inherit!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
  text-align:center!important;
  opacity:1!important;
  visibility:visible!important;
  -webkit-text-fill-color:currentColor!important;
}

/* An undiscovered MYTHIC follows the same subdued Album treatment as every
   other locked card: one dimmed artwork, no panorama, no active rarity motion. */
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic.is-locked .album-preset-card-image{
  filter:grayscale(.85) brightness(.46)!important;
  opacity:1!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-aura,
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-core,
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars{
  display:none!important;
  animation:none!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
  filter:grayscale(.72) brightness(.62)!important;
  opacity:.72!important;
  animation:none!important;
}

@media (max-width:720px){
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay > .card-inspector.is-mythic-acquisition{
    gap:7px!important;
    padding:10px 8px 14px!important;
  }
  .mythic-acquisition-heading{min-height:36px!important;}
  .mythic-acquisition-heading > p{font-size:clamp(20px,6vw,31px)!important;letter-spacing:.045em!important;}
  .mythic-acquisition-heading > span{display:none!important;}
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
    width:96vw!important;
    height:min(68dvh,620px)!important;
    max-width:96vw!important;
    max-height:68dvh!important;
  }
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .fourfun-card-shell.card-inspector-card.mythic-acquisition-card{
    width:min(76vw,37dvh,318px)!important;
  }
  .mythic-acquisition-actions{bottom:auto!important;min-height:54px!important;}
}

/* MYTHIC v23 — acquisition layout, locked inspector parity and rotation room.
   These overrides preserve every approved MYTHIC effect and only correct the
   acquisition title position, interaction volume and undiscovered state. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay > .card-inspector.is-mythic-acquisition{
  position:absolute!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  overflow:hidden!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .mythic-acquisition-heading{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(92vw,920px)!important;
  min-height:0!important;
  margin:0!important;
  padding:0 18px!important;
  translate:-50% clamp(-360px,-32dvh,-280px)!important;
  z-index:102!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
  width:100vw!important;
  height:min(84dvh,900px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:auto!important;
  overflow:visible!important;
  perspective:1700px!important;
  contain:none!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .fourfun-card-shell.card-inspector-card.mythic-acquisition-card{
  overflow:visible!important;
  contain:none!important;
}

/* An undiscovered MYTHIC in the 3D inspector follows the same subdued state
   already approved in the Album: dim artwork, no panorama or active rarity FX. */
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic .card-inspector-main-image{
  filter:grayscale(.85) brightness(.46)!important;
  opacity:1!important;
  transform:scale(1.01)!important;
  animation:none!important;
}
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic .card-mythic-panorama-layer,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic .mythic-card-sparkles.is-inspector-internal,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-card > .mythic-card-vortex.is-inspector-external,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-card > .mythic-card-diagonal-orbit.is-inspector-diagonal,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-card > .mythic-card-sparkles.is-inspector-external-stars,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic > .card-mythic-seal-aura,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic > .card-mythic-seal-core,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic > .card-mythic-seal-stars,
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic > .card-mythic-seal-edge{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic > img.card-mythic-rarity-seal.is-on-card{
  filter:grayscale(.72) brightness(.62)!important;
  opacity:.72!important;
  animation:none!important;
}

@media (max-width:720px){
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .mythic-acquisition-heading{
    width:96vw!important;
    translate:-50% clamp(-292px,-38dvh,-235px)!important;
    padding:0 10px!important;
  }
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
    width:100vw!important;
    height:84dvh!important;
    max-width:none!important;
    max-height:none!important;
  }
}
/* MYTHIC v24 — acquisition alignment, phase-synchronised reveal and full FX.
   The acquisition overlay keeps the complete approved inspector scene. The
   physical card assembles independently so its external petals, diagonal
   orbit and stars are no longer clipped to the card rectangle. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay > .card-inspector.is-mythic-acquisition{
  --mythic-acq-card-w:min(78vw,38.9dvh,372px);
  --mythic-acq-card-h:min(115.94vw,57.82dvh,553px);
  --mythic-acq-card-half-h:min(57.97vw,28.91dvh,276.5px);
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Keep the interaction volume as the entire viewport. This gives the card
   enough room to rotate without changing its approved visual size. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .card-inspector-stage.mythic-acquisition-stage{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  perspective:1700px!important;
  contain:none!important;
  transform:none!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay.phase-complete .card-inspector-stage.mythic-acquisition-stage{
  pointer-events:auto!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .fourfun-card-shell.card-inspector-card.mythic-acquisition-card{
  position:relative!important;
  inset:auto!important;
  grid-area:1/1!important;
  width:var(--mythic-acq-card-w)!important;
  height:auto!important;
  max-width:372px!important;
  max-height:none!important;
  aspect-ratio:991/1473!important;
  margin:0!important;
  overflow:visible!important;
  contain:none!important;
  opacity:1!important;
  visibility:visible!important;
  clip-path:none!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}

/* Position the heading and action from the real physical card height rather
   than from the viewport edges. They therefore remain immediately above and
   below the card at every supported screen size. */
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .mythic-acquisition-heading{
  position:absolute!important;
  left:50%!important;
  top:calc(50% - var(--mythic-acq-card-half-h) - clamp(13px,1.7dvh,22px))!important;
  right:auto!important;
  bottom:auto!important;
  width:min(94vw,920px)!important;
  min-height:0!important;
  margin:0!important;
  padding:0 14px!important;
  translate:-50% -100%!important;
  z-index:102!important;
}
html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .mythic-acquisition-actions{
  position:absolute!important;
  left:50%!important;
  top:calc(50% + var(--mythic-acq-card-half-h) + clamp(16px,2.2dvh,28px))!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  min-height:58px!important;
  margin:0!important;
  padding:0!important;
  translate:-50% 0!important;
  z-index:102!important;
}

/* Reverse-disintegration applies only to the rotating physical card. The
   shell remains open so every approved external effect can exist outside it. */
html body .mythic-acquisition-overlay.phase-delay .mythic-acquisition-card > .card-inspector-rotator-host,
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-card > .card-inspector-rotator-host{
  opacity:0!important;
  visibility:hidden!important;
  clip-path:polygon(49% 50%,51% 50%,51% 50%,49% 50%)!important;
  filter:brightness(2.2) saturate(.4) blur(8px)!important;
  transform:scale(.82)!important;
  animation:none!important;
}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-card > .card-inspector-rotator-host{
  visibility:visible!important;
  animation:mythicAcquisitionAssemble 5.98s steps(32,end) both!important;
}
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-card > .card-inspector-rotator-host{
  opacity:1!important;
  visibility:visible!important;
  clip-path:none!important;
  filter:none!important;
  animation:none!important;
  will-change:transform!important;
}

/* The exact inspector external layers join the construction instead of being
   clipped by it. Internal seal, panorama, sweep and sparkle layers remain in
   InspectorCardVisual and assemble with the physical card itself. */
html body .mythic-acquisition-overlay.phase-delay .mythic-acquisition-card > .mythic-card-vortex.is-inspector-external,
html body .mythic-acquisition-overlay.phase-delay .mythic-acquisition-card > .mythic-card-diagonal-orbit.is-inspector-diagonal,
html body .mythic-acquisition-overlay.phase-delay .mythic-acquisition-card > .mythic-card-sparkles.is-inspector-external-stars,
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-card > .mythic-card-vortex.is-inspector-external,
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-card > .mythic-card-diagonal-orbit.is-inspector-diagonal,
html body .mythic-acquisition-overlay.phase-awakening .mythic-acquisition-card > .mythic-card-sparkles.is-inspector-external-stars{
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-card > .mythic-card-vortex.is-inspector-external,
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-card > .mythic-card-diagonal-orbit.is-inspector-diagonal,
html body .mythic-acquisition-overlay.phase-assembling .mythic-acquisition-card > .mythic-card-sparkles.is-inspector-external-stars{
  visibility:visible!important;
  animation:mythicAcquisitionInspectorEffectsArrive 2.15s 1.75s ease-out both!important;
}
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-card > .mythic-card-vortex.is-inspector-external,
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-card > .mythic-card-diagonal-orbit.is-inspector-diagonal,
html body .mythic-acquisition-overlay.phase-complete .mythic-acquisition-card > .mythic-card-sparkles.is-inspector-external-stars{
  visibility:visible!important;
  opacity:1!important;
  filter:none!important;
}
@keyframes mythicAcquisitionInspectorEffectsArrive{
  0%{opacity:0;filter:blur(5px) brightness(1.8);}
  48%{opacity:.58;filter:blur(1.4px) brightness(1.35);}
  100%{opacity:1;filter:none;}
}

@media (max-width:720px){
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay > .card-inspector.is-mythic-acquisition{
    --mythic-acq-card-w:min(76vw,37dvh,318px);
    --mythic-acq-card-h:min(112.93vw,55dvh,472.7px);
    --mythic-acq-card-half-h:min(56.47vw,27.5dvh,236.35px);
  }
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .mythic-acquisition-heading{
    width:96vw!important;
    padding:0 8px!important;
  }
  html body .card-inspector-backdrop.rarity-mythic.mythic-acquisition-overlay .mythic-acquisition-actions{
    min-height:52px!important;
  }
}
/* MYTHIC v26 — card-only typography and locked inspector copy.
   Reuses the approved acquisition-title type treatment exclusively on text
   printed inside MYTHIC cards in the 3D inspector and Your Card Album. */
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:900!important;
  color:#FAE686!important;
  background:linear-gradient(180deg,#fffdf0 0%,#FAE686 38%,#d9a93e 74%,#75F3CE 132%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 3px rgba(255,255,255,.24),0 0 7px rgba(250,230,134,.38),0 0 12px rgba(75,190,97,.17)!important;
  filter:drop-shadow(0 1px .45px rgba(0,0,0,.82))!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title{
  letter-spacing:.018em!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-date{
  letter-spacing:.035em!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  text-shadow:0 0 4px rgba(255,255,255,.62),0 0 9px rgba(250,230,134,.66),0 0 15px rgba(117,243,206,.28)!important;
}

/* MYTHIC v29 — card-text readability without obscuring the gold fill.
   Uses a soft multidirectional shadow instead of a dark text stroke. */
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  -webkit-text-stroke:0 transparent!important;
  paint-order:normal!important;
  text-shadow:
    0 .75px .35px rgba(5,8,5,.92),
    .65px 0 .35px rgba(5,8,5,.78),
    -.65px 0 .35px rgba(5,8,5,.78),
    0 -.55px .35px rgba(5,8,5,.66),
    0 0 3px rgba(0,0,0,.48),
    0 0 7px rgba(250,230,134,.34),
    0 0 12px rgba(117,243,206,.13)!important;
  filter:drop-shadow(0 1px .35px rgba(0,0,0,.72))!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title{
  text-shadow:
    0 .9px .45px rgba(5,8,5,.94),
    .75px 0 .4px rgba(5,8,5,.80),
    -.75px 0 .4px rgba(5,8,5,.80),
    0 -.6px .4px rgba(5,8,5,.68),
    0 0 3px rgba(0,0,0,.5),
    0 0 8px rgba(250,230,134,.4),
    0 0 14px rgba(117,243,206,.15)!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  text-shadow:
    0 .7px .35px rgba(5,8,5,.88),
    0 0 4px rgba(255,255,255,.68),
    0 0 9px rgba(250,230,134,.7),
    0 0 15px rgba(117,243,206,.3)!important;
}


/* MYTHIC v30 — force a real luminous fill for card-internal text.
   The former background-clipped transparent fill could collapse to black on
   small transformed text. Use an explicit gold fill and restrained contrast. */
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  color:#FAE686!important;
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#FAE686!important;
  -webkit-text-stroke:0 transparent!important;
  paint-order:normal!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  opacity:1!important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.96),
    1px 0 1px rgba(4,7,4,.82),
    -1px 0 1px rgba(4,7,4,.82),
    0 -1px 1px rgba(4,7,4,.7),
    0 0 3px rgba(255,253,222,.72),
    0 0 7px rgba(250,230,134,.48),
    0 0 11px rgba(117,243,206,.16)!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-title{
  color:#fff2b2!important;
  -webkit-text-fill-color:#fff2b2!important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.98),
    1px 0 1px rgba(4,7,4,.86),
    -1px 0 1px rgba(4,7,4,.86),
    0 -1px 1px rgba(4,7,4,.74),
    0 0 4px rgba(255,255,239,.78),
    0 0 8px rgba(250,230,134,.55),
    0 0 13px rgba(117,243,206,.18)!important;
}
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic .album-preset-card-mark{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.9),
    0 0 4px rgba(255,255,255,.9),
    0 0 9px rgba(250,230,134,.75),
    0 0 14px rgba(117,243,206,.3)!important;
}


/* v31 — all undiscovered cards get a subtle blur on the configured artwork
   in both the 3D inspector and the album, independent of rarity. */
html body .card-inspector.is-locked .card-inspector-front .card-inspector-main-image,
html body .card-album.card-album-modal-book .album-preset-card.is-locked .album-preset-card-image{
  filter:blur(1.8px) saturate(.94) brightness(.94)!important;
  transform:scale(1.012)!important;
  transform-origin:center center!important;
}


/* v32 — undiscovered artwork uses a slightly pixelated blur on every rarity,
   including MYTHIC, in the Album and 3D inspector. */
html body .card-inspector.is-locked .card-inspector-front .card-inspector-main-image,
html body .card-album.card-album-modal-book .album-preset-card.is-locked .album-preset-card-image{
  filter:blur(1.85px) saturate(.94) brightness(.94) contrast(1.06)!important;
  transform:scale(1.014)!important;
  transform-origin:center center!important;
  image-rendering:pixelated!important;
}
html body .card-inspector.rarity-mythic.is-locked .card-inspector-front.rarity-mythic .card-inspector-main-image,
html body .card-album.card-album-modal-book .album-preset-card.rarity-mythic.is-locked .album-preset-card-image{
  filter:grayscale(.85) brightness(.46) blur(1.9px) contrast(1.08)!important;
  opacity:1!important;
  transform:scale(1.014)!important;
  transform-origin:center center!important;
  image-rendering:pixelated!important;
}


/* v34 — non-MYTHIC undiscovered cards become fully colorless, including their
   configured artwork and internal FX, in Album, 3D inspector and Peek Inside. */
html body .card-album.card-album-modal-book .album-preset-card.is-locked:not(.rarity-mythic) .album-preset-card-image,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .card-inspector-main-image,
html body .card-catalog-preset-card.is-locked:not(.rarity-mythic) .card-catalog-preset-image{
  filter:grayscale(1) saturate(0) brightness(.56) contrast(1.06) blur(1.85px)!important;
  transform:scale(1.014)!important;
  transform-origin:center center!important;
  image-rendering:pixelated!important;
}
html body .card-album.card-album-modal-book .album-preset-card.is-locked:not(.rarity-mythic) .card-rarity-fx,
html body .card-album.card-album-modal-book .album-preset-card.is-locked:not(.rarity-mythic) .album-preset-card-foil,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .card-rarity-fx,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .fourfun-card-holo,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .fourfun-card-gloss,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .fourfun-card-grain,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .fourfun-card-particles,
html body .card-inspector.is-locked:not(.rarity-mythic) .card-inspector-front:not(.rarity-mythic) .fourfun-card-particles i,
html body .card-catalog-preset-card.is-locked:not(.rarity-mythic) .card-rarity-fx,
html body .card-catalog-preset-card.is-locked:not(.rarity-mythic) .card-catalog-preset-foil,
html body .card-catalog-preset-card.is-locked:not(.rarity-mythic) .card-catalog-preset-surface::before,
html body .card-catalog-preset-card.is-locked:not(.rarity-mythic) .card-catalog-preset-surface::after,
html body .card-album.card-album-modal-book .album-preset-card.is-locked:not(.rarity-mythic) .album-preset-card-surface::before,
html body .card-album.card-album-modal-book .album-preset-card.is-locked:not(.rarity-mythic) .album-preset-card-surface::after{
  filter:grayscale(1) saturate(0) brightness(.54) contrast(1.04)!important;
  opacity:.66!important;
}


/* v36 — align the MYTHIC rarity seal with the other rarity labels in Your Card Album only. */
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity{
  top:0!important;
}


/* v37 — album-only MYTHIC seal alignment and locked-state behavior.
   Move the entire seal group upward, including aura/stars, and keep the rarity
   seal fully colored and animated when the card itself is undiscovered. */
html body .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity.is-mythic-rarity{
  top:0!important;
  transform:translate(-50%,-8px)!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > img.card-mythic-rarity-seal{
  filter:none!important;
  opacity:1!important;
  animation:mythicSealNeonTrace 4.2s ease-in-out infinite!important;
  animation-play-state:running!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-aura{
  display:block!important;
  visibility:visible!important;
  opacity:.52!important;
  animation:mythicSealAuraBreathe 3.7s ease-in-out infinite!important;
  animation-play-state:running!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-core{
  display:block!important;
  visibility:visible!important;
  opacity:.34!important;
  animation:mythicSealCenterBreathe 3.05s ease-in-out infinite!important;
  animation-play-state:running!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
html body .card-album.card-album-modal-book .card-book-slot.is-locked.has-mythic-card > .card-book-slot-rarity.is-mythic-rarity > .card-mythic-seal-stars > i{
  animation-play-state:running!important;
}

/* v39 — MYTHIC guarantee note in the Card Pack Peek Inside catalog. */
html body .card-catalog-modal .card-catalog-mythic-guarantee{
  color:#75F3CE!important;
  margin-top:3px!important;
}


/* v40 — Card Pack support symbol in the Coffer Hall catalog. */
html body .box-card > .card-pack-support-symbol{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  z-index:80!important;
  display:block!important;
  width:24px!important;
  height:24px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:help!important;
  overflow:visible!important;
  isolation:isolate!important;
}
html body .box-card > .card-pack-support-symbol > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.58))!important;
  transform:translateZ(0) scale(1)!important;
  transform-origin:center!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease!important;
  pointer-events:none!important;
}
html body .box-card > .card-pack-support-symbol:hover > img,
html body .box-card > .card-pack-support-symbol:focus-visible > img{
  transform:translateZ(0) scale(1.14)!important;
  filter:brightness(1.16) saturate(1.08) drop-shadow(0 0 4px rgba(250,230,134,.86)) drop-shadow(0 0 10px rgba(117,243,206,.52))!important;
}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip{
  position:absolute!important;
  right:-4px!important;
  bottom:calc(100% + 12px)!important;
  z-index:100!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  width:min(430px,calc(100vw - 42px))!important;
  padding:12px 14px!important;
  border:1px solid rgba(250,230,134,.48)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(12,22,14,.98),rgba(22,38,24,.97))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.48),0 0 18px rgba(75,190,97,.12)!important;
  color:#f8f3df!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.38!important;
  letter-spacing:.005em!important;
  text-align:left!important;
  white-space:normal!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,7px,0) scale(.985)!important;
  transform-origin:bottom right!important;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s!important;
}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip::after{
  content:""!important;
  position:absolute!important;
  right:12px!important;
  top:100%!important;
  width:10px!important;
  height:10px!important;
  border-right:1px solid rgba(250,230,134,.48)!important;
  border-bottom:1px solid rgba(250,230,134,.48)!important;
  background:rgba(20,35,22,.98)!important;
  transform:translateY(-5px) rotate(45deg)!important;
}
html body .box-card > .card-pack-support-symbol:hover > .card-pack-support-tooltip,
html body .box-card > .card-pack-support-symbol:focus-visible > .card-pack-support-tooltip{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
  transition-delay:0s!important;
}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip > span{
  display:block!important;
}
@media (max-width:720px){
  html body .box-card > .card-pack-support-symbol{
    top:9px!important;
    right:9px!important;
    width:22px!important;
    height:22px!important;
  }
  html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip{
    right:-2px!important;
    width:min(330px,calc(100vw - 28px))!important;
    font-size:11px!important;
  }
}


/* ================================================================
   UPGRADE PAGE
   Lazy-loaded exchange interface. Motion uses opacity/transform only so the
   page stays light even with large reward catalogs.
   ================================================================ */
.nav-tabs::before{
  width:calc(33.333% - 7px)!important;
}
.nav-tabs.nav-upgrade::before{
  transform:translateX(calc(100% + 4px))!important;
}
.nav-tabs.nav-open::before{
  transform:translateX(calc(200% + 8px))!important;
}
.nav-tabs.nav-upgrade .nav-tab:nth-child(2),
.nav-tabs .nav-tab:nth-child(2).active{
  color:#f5dc91;
}
.view-upgrade{
  min-height:100vh;
  padding-bottom:64px;
  contain:style;
}
.upgrade-page{
  --upgrade-gold:#f2d27b;
  --upgrade-gold-soft:#caa75b;
  --upgrade-purple:#75f3ce;
  --upgrade-purple-deep:#163217;
  --upgrade-emerald:#6fe2a3;
  --upgrade-panel:rgba(19,25,22,.92);
  width:min(1560px,calc(100% - 32px));
  margin:0 auto;
  padding:26px 0 70px;
  color:#f4f0e4;
}
.upgrade-page-loading{
  min-height:62vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  color:#cfc8b6;
}
.upgrade-loading-sigil{
  width:240px;
  display:flex;
  align-items:center;
  gap:15px;
  color:var(--upgrade-gold);
  letter-spacing:.24em;
  font-weight:900;
}
.upgrade-loading-sigil i{height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor);animation:upgradeLoadingPulse 1.5s ease-in-out infinite;}
.upgrade-loading-sigil i:last-child{background:linear-gradient(90deg,currentColor,transparent);}
@keyframes upgradeLoadingPulse{50%{opacity:.35;transform:scaleX(.72)}}

.upgrade-hero{
  position:relative;
  min-height:210px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(242,210,123,.16);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 100%,rgba(117,243,206,.18),transparent 42%),
    linear-gradient(135deg,rgba(12,18,15,.98),rgba(29,31,27,.92));
  box-shadow:0 24px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.03);
}
.upgrade-hero::before,
.upgrade-hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border:1px solid rgba(242,210,123,.12);
  border-radius:48% 52% 54% 46%;
  transform:rotate(30deg);
}
.upgrade-hero::before{left:-260px;top:-260px;}
.upgrade-hero::after{right:-260px;bottom:-260px;}
.upgrade-hero-copy{position:relative;z-index:2;max-width:860px;padding:30px;text-align:center;}
.upgrade-hero-copy .eyebrow{display:flex;justify-content:center;gap:14px;color:var(--upgrade-gold);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:900;}
.upgrade-hero-copy h2{margin:10px 0 12px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,4vw,62px);line-height:1.03;color:#f6f0d9;text-shadow:0 4px 28px rgba(0,0,0,.5);}
.upgrade-hero-copy h2 em{font-style:normal;color:var(--upgrade-emerald);text-shadow:0 0 24px rgba(111,226,163,.2);}
.upgrade-hero-copy>p:last-child{max-width:720px;margin:auto;color:#c8c6bb;font-size:15px;line-height:1.7;}
.upgrade-hero-orbit{position:absolute;border:1px solid rgba(117,243,206,.18);border-radius:50%;pointer-events:none;animation:upgradeHeroOrbit 18s linear infinite;}
.upgrade-hero-orbit.is-a{width:620px;height:110px;transform:rotate(-8deg);}
.upgrade-hero-orbit.is-b{width:480px;height:170px;transform:rotate(14deg);animation-direction:reverse;animation-duration:24s;}
@keyframes upgradeHeroOrbit{to{rotate:360deg}}

.upgrade-error-banner{margin:16px 0;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid rgba(255,100,100,.3);border-radius:12px;background:rgba(90,24,24,.45);color:#ffd2d2;}
.upgrade-error-banner button{border:0;border-radius:8px;padding:7px 14px;background:#f1d27b;color:#191b18;font-weight:900;cursor:pointer;}

.upgrade-forge{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(280px,1fr) 290px minmax(280px,1fr);
  gap:18px;
  margin:22px 0;
  min-height:500px;
  overflow:hidden;
  border:1px solid rgba(242,210,123,.18);
  border-radius:26px;
  padding:20px;
  background:
    radial-gradient(circle at 50% 45%,rgba(117,243,206,.14),transparent 34%),
    linear-gradient(180deg,rgba(20,25,23,.98),rgba(11,16,14,.98));
  box-shadow:0 24px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
}
.upgrade-forge::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.45;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,#000,transparent 82%);
}
.upgrade-forge-ambient{position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;filter:blur(60px);opacity:.12;pointer-events:none;}
.upgrade-forge-ambient.is-left{left:-150px;top:80px;background:#4bbe61;}
.upgrade-forge-ambient.is-right{right:-150px;top:80px;background:#75f3ce;}
.upgrade-offer-column,
.upgrade-target-column,
.upgrade-probability-column{
  position:relative;
  min-width:0;
  border:1px solid rgba(255,255,255,.055);
  border-radius:20px;
  background:rgba(8,12,10,.54);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.upgrade-offer-column,
.upgrade-target-column{padding:16px;display:flex;flex-direction:column;gap:14px;}
.upgrade-offer-column>header,
.upgrade-target-column>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid rgba(242,210,123,.12);}
.upgrade-offer-column>header span,
.upgrade-target-column>header span{font-size:11px;letter-spacing:.18em;color:#bdb8aa;font-weight:900;}
.upgrade-offer-column>header strong,
.upgrade-target-column>header strong{font-size:14px;color:var(--upgrade-gold);}
.upgrade-selection-stack{display:grid;align-content:start;gap:8px;min-height:230px;max-height:280px;overflow:auto;padding-right:3px;scrollbar-width:thin;}
.upgrade-empty-selection{min-height:210px;display:grid;place-items:center;align-content:center;gap:10px;border:1px dashed rgba(255,255,255,.1);border-radius:16px;color:#7e827c;text-align:center;}
.upgrade-empty-selection i{font-size:32px;color:rgba(242,210,123,.45);font-style:normal;}
.upgrade-selection-chip{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:9px;padding:7px;border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.025);}
.upgrade-selection-chip img{width:48px;height:48px;border-radius:9px;object-fit:contain;background:rgba(0,0,0,.25);}
.upgrade-selection-chip span{min-width:0;display:grid;gap:3px;}
.upgrade-selection-chip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#eee9da;}
.upgrade-selection-chip small{font-size:10px;color:#aaa99f;}
.upgrade-selection-chip button{width:26px;height:26px;border:0;border-radius:7px;background:rgba(255,255,255,.06);color:#d7d3c8;cursor:pointer;}
.upgrade-selection-chip button:hover{background:rgba(255,90,90,.18);color:#fff;}
.upgrade-selection-chip.rarity-legendary{border-color:rgba(250,230,134,.25);}
.upgrade-selection-chip.rarity-epic{border-color:rgba(117,243,206,.25);}
.upgrade-selection-chip.rarity-rare{border-color:rgba(74,140,204,.25);}
.upgrade-selection-chip.rarity-uncommon{border-color:rgba(86,183,127,.25);}

.upgrade-gil-offer{margin-top:auto;padding:13px;border-radius:15px;background:linear-gradient(135deg,rgba(242,210,123,.08),rgba(111,226,163,.04));border:1px solid rgba(242,210,123,.14);}
.upgrade-gil-offer>div{display:flex;justify-content:space-between;gap:12px;color:#bdb8aa;font-size:11px;}
.upgrade-gil-offer>div strong{color:#f3d681;}
.upgrade-gil-offer label{display:grid;grid-template-columns:1fr 140px;align-items:center;gap:10px;margin:12px 0 8px;color:#c9c6ba;font-size:11px;}
.upgrade-gil-offer input[type=number]{width:100%;border:1px solid rgba(242,210,123,.2);border-radius:8px;background:rgba(0,0,0,.28);padding:8px 10px;color:#f5e5b3;text-align:right;font-weight:800;}
.upgrade-gil-range{width:100%;accent-color:#d8b75e;}
.upgrade-target-summary{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:13px;border:1px solid rgba(117,243,206,.15);border-radius:15px;background:rgba(117,243,206,.055);}
.upgrade-target-summary span{color:#bdb8aa;font-size:11px;}
.upgrade-target-summary strong{color:#75f3ce;}
.upgrade-target-summary small{grid-column:1/-1;color:#777d76;font-size:10px;}

.upgrade-probability-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 18px;text-align:center;overflow:hidden;}
.upgrade-probability-column::before,
.upgrade-probability-column::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(117,243,206,.16);pointer-events:none;}
.upgrade-probability-column::before{width:330px;height:90px;transform:rotate(36deg);}
.upgrade-probability-column::after{width:330px;height:90px;transform:rotate(-36deg);}
.upgrade-chance-dial{position:relative;z-index:2;width:190px;aspect-ratio:1;display:grid;place-items:center;align-content:center;border-radius:50%;background:radial-gradient(circle,#24222d 0 48%,#17161d 49% 58%,transparent 59%);box-shadow:0 0 60px rgba(117,243,206,.12);}
.upgrade-chance-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--upgrade-gold) var(--upgrade-chance),rgba(255,255,255,.055) 0);mask:radial-gradient(circle,transparent 0 66%,#000 67% 76%,transparent 77%);animation:upgradeDialBreathe 2.8s ease-in-out infinite;}
.upgrade-chance-ring i{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(117,243,206,.3);}
.upgrade-chance-dial strong{font-size:37px;color:#f3ecda;text-shadow:0 0 20px rgba(242,210,123,.22);}
.upgrade-chance-dial small{font-size:10px;letter-spacing:.14em;color:#96908e;margin-top:4px;}
.upgrade-chance-dial.is-guaranteed{box-shadow:0 0 70px rgba(111,226,163,.22);}
.upgrade-chance-dial.is-guaranteed .upgrade-chance-ring{background:conic-gradient(#75f3ce 100%,#75f3ce 0);}
@keyframes upgradeDialBreathe{50%{transform:scale(1.025);filter:brightness(1.15)}}
.upgrade-probability-column>p{position:relative;z-index:2;min-height:64px;margin:18px 0 8px;color:#c8c4b8;font-size:12px;line-height:1.55;}
.upgrade-risk-note{position:relative;z-index:2;display:grid;gap:5px;margin-bottom:16px;}
.upgrade-risk-note span{font-size:10px;color:#9a8db0;text-transform:uppercase;letter-spacing:.1em;}
.upgrade-risk-note b{font-size:10px;color:#b87878;font-weight:600;}
.upgrade-attempt-button{position:relative;z-index:2;width:100%;min-height:48px;}

.upgrade-catalogs{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.upgrade-catalog-panel{min-width:0;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:rgba(13,18,15,.92);box-shadow:0 20px 70px rgba(0,0,0,.28);overflow:hidden;}
.upgrade-catalog-panel.is-offers{border-top-color:rgba(111,226,163,.28);}
.upgrade-catalog-panel.is-targets{border-top-color:rgba(117,243,206,.32);}
.upgrade-catalog-header{padding:15px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.018);}
.upgrade-catalog-header>div:first-child{display:grid;gap:4px;}
.upgrade-catalog-header>div:first-child span{font-weight:900;font-size:12px;color:#eee8d7;letter-spacing:.08em;}
.upgrade-catalog-header>div:first-child small{color:#777d76;font-size:10px;}
.upgrade-catalog-tools{display:flex;gap:7px;}
.upgrade-catalog-tools input,
.upgrade-catalog-tools select{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#101512;color:#d7d4ca;padding:8px 10px;font-size:11px;}
.upgrade-catalog-tools input{width:185px;}
.upgrade-reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:720px;overflow:auto;padding:12px;scrollbar-width:thin;}
.upgrade-catalog-empty{grid-column:1/-1;min-height:180px;display:grid;place-items:center;color:#777d76;text-align:center;}
.upgrade-reward-card{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;min-height:128px;padding:10px 9px 40px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.14));overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.upgrade-reward-card:hover{transform:translateY(-2px);border-color:rgba(242,210,123,.2);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.12));}
.upgrade-reward-card.is-selected{border-color:rgba(111,226,163,.38);box-shadow:inset 0 0 22px rgba(111,226,163,.05);}
.upgrade-reward-image-wrap{position:relative;width:78px;height:78px;display:grid;place-items:center;border-radius:12px;background:rgba(0,0,0,.28);overflow:hidden;}
.upgrade-reward-image-wrap img{max-width:90%;max-height:90%;object-fit:contain;transition:transform .2s ease;}
.upgrade-reward-card:hover .upgrade-reward-image-wrap img{transform:scale(1.055);}
.upgrade-rarity-tag{position:absolute;left:4px;right:4px;bottom:4px;padding:2px 3px;border-radius:5px;background:rgba(0,0,0,.7);font-size:7px;letter-spacing:.07em;text-align:center;color:#aaa49b;}
.upgrade-rarity-tag.rarity-legendary{color:#fae686;}
.upgrade-rarity-tag.rarity-epic{color:#b786e2;}
.upgrade-rarity-tag.rarity-rare{color:#72a9dc;}
.upgrade-rarity-tag.rarity-uncommon{color:#6ed19a;}
.upgrade-reward-copy{min-width:0;display:flex;flex-direction:column;gap:3px;}
.upgrade-reward-copy strong{font-size:12px;color:#eee9dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.upgrade-reward-source{font-size:9px;color:#877f72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.upgrade-reward-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:3px 0;color:#9a9a92;font-size:9px;line-height:1.35;}
.upgrade-reward-value{margin-top:auto;color:var(--upgrade-gold);font-size:10px;font-weight:800;}
.upgrade-reward-quantity{position:absolute;left:9px;bottom:8px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;background:rgba(0,0,0,.22);}
.upgrade-reward-quantity button{width:29px;height:27px;border:0;background:transparent;color:#d7d4ca;cursor:pointer;font-size:16px;}
.upgrade-reward-quantity button:hover:not(:disabled){background:rgba(255,255,255,.08);}
.upgrade-reward-quantity button:disabled{opacity:.25;cursor:not-allowed;}
.upgrade-reward-quantity span{min-width:45px;display:flex;align-items:baseline;justify-content:center;gap:2px;font-size:11px;}
.upgrade-reward-quantity small{color:#747974;font-size:8px;}
.upgrade-reward-mode-label{position:absolute;right:10px;bottom:14px;color:#686d69;font-size:8px;font-weight:900;letter-spacing:.13em;}
.upgrade-reward-card.rarity-legendary{background:linear-gradient(145deg,rgba(250,230,134,.055),rgba(0,0,0,.14));}
.upgrade-reward-card.rarity-epic{background:linear-gradient(145deg,rgba(132,64,188,.07),rgba(0,0,0,.14));}
.upgrade-reward-card.rarity-rare{background:linear-gradient(145deg,rgba(74,140,204,.06),rgba(0,0,0,.14));}
.upgrade-reward-card.rarity-uncommon{background:linear-gradient(145deg,rgba(86,183,127,.06),rgba(0,0,0,.14));}

.upgrade-history{margin-top:18px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:rgba(13,18,15,.86);overflow:hidden;}
.upgrade-history>header{display:flex;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);}
.upgrade-history>header span{font-size:11px;font-weight:900;letter-spacing:.12em;color:#d9d4c4;}
.upgrade-history>header small{font-size:10px;color:#737873;}
.upgrade-history>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px;}
.upgrade-history article{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:10px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);}
.upgrade-history article span{font-size:8px;color:#747974;}
.upgrade-history article strong{font-size:9px;}
.upgrade-history article b{font-size:11px;color:#d8c078;}
.upgrade-history article small{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa99f;font-size:9px;}
.upgrade-history article.is-success strong{color:#75f3ce;}
.upgrade-history article.is-failure strong{color:#d77b7b;}

.upgrade-confirm-backdrop{z-index:10080!important;}
.upgrade-confirm-modal{width:min(460px,calc(100vw - 28px));padding:28px;border:1px solid rgba(242,210,123,.22);border-radius:22px;background:linear-gradient(150deg,#151b17,#0b100d);box-shadow:0 30px 120px rgba(0,0,0,.7);text-align:center;}
.upgrade-confirm-symbol{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 12px;border-radius:50%;border:1px solid rgba(242,210,123,.22);color:#f2d27b;font-size:24px;box-shadow:0 0 35px rgba(242,210,123,.12);}
.upgrade-confirm-modal h3{margin:0;color:#f4eedb;font-family:Georgia,"Times New Roman",serif;font-size:28px;}
.upgrade-confirm-modal p{color:#aaa99f;line-height:1.65;font-size:13px;}
.upgrade-confirm-modal p strong{color:#f2d27b;}
.upgrade-confirm-modal>div{display:flex;justify-content:center;gap:10px;margin-top:20px;}

.upgrade-result-overlay{position:fixed;z-index:10100;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,rgba(45,25,69,.5),rgba(5,8,6,.96) 62%);backdrop-filter:blur(12px);}
.upgrade-result-overlay::before{content:"";position:absolute;width:min(900px,90vw);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 30deg,transparent,rgba(117,243,206,.14),transparent,rgba(242,210,123,.13),transparent);animation:upgradeResultRotate 8s linear infinite;filter:blur(8px);}
@keyframes upgradeResultRotate{to{transform:rotate(360deg)}}
.upgrade-result-energy{position:absolute;inset:0;pointer-events:none;}
.upgrade-result-energy i{position:absolute;left:50%;top:50%;width:18vmin;height:18vmin;border-radius:50%;border:1px solid rgba(242,210,123,.3);transform:translate(-50%,-50%);animation:upgradeEnergyWave 1.65s ease-out infinite;}
.upgrade-result-energy i:nth-child(2){animation-delay:.45s;border-color:rgba(117,243,206,.28);}
.upgrade-result-energy i:nth-child(3){animation-delay:.9s;border-color:rgba(111,226,163,.24);}
@keyframes upgradeEnergyWave{0%{opacity:.8;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.5)}}
.upgrade-result-stage{position:relative;z-index:2;width:min(1100px,92vw);display:grid;grid-template-columns:1fr 260px 1fr;align-items:center;gap:35px;}
.upgrade-result-offers,.upgrade-result-targets{display:grid;gap:9px;max-height:55vh;overflow:auto;}
.upgrade-result-core{position:relative;display:grid;place-items:center;align-content:center;min-height:260px;text-align:center;}
.upgrade-result-core>span{position:absolute;width:210px;height:210px;border-radius:50%;border:2px solid rgba(242,210,123,.32);box-shadow:0 0 70px rgba(117,243,206,.25),inset 0 0 55px rgba(111,226,163,.08);animation:upgradeCorePulse 1.2s ease-in-out infinite;}
@keyframes upgradeCorePulse{50%{transform:scale(1.08);filter:brightness(1.3)}}
.upgrade-result-core strong{position:relative;font-family:Georgia,"Times New Roman",serif;color:#f6e7b1;font-size:24px;text-shadow:0 0 20px rgba(242,210,123,.3);}
.upgrade-result-core small{position:relative;margin-top:8px;color:#aaa4b0;}
.upgrade-result-gil{padding:12px;border:1px solid rgba(242,210,123,.2);border-radius:10px;color:#f2d27b;text-align:center;background:rgba(242,210,123,.05);}
.upgrade-result-actions{position:absolute;z-index:3;left:50%;bottom:7vh;transform:translateX(-50%);display:grid;place-items:center;gap:13px;text-align:center;}
.upgrade-result-actions p{margin:0;color:#c7c3b6;}
.upgrade-result-actions button{min-width:190px;}
.upgrade-result-overlay.phase-success{background:radial-gradient(circle at center,rgba(30,100,67,.34),rgba(5,8,6,.96) 64%);}
.upgrade-result-overlay.phase-failure{background:radial-gradient(circle at center,rgba(89,25,25,.38),rgba(5,8,6,.96) 64%);}
.upgrade-result-overlay.phase-success .upgrade-result-core>span{border-color:rgba(117,243,206,.5);box-shadow:0 0 90px rgba(117,243,206,.28),inset 0 0 60px rgba(117,243,206,.1);}
.upgrade-result-overlay.phase-failure .upgrade-result-core>span{border-color:rgba(216,91,91,.42);box-shadow:0 0 80px rgba(216,91,91,.2),inset 0 0 55px rgba(216,91,91,.08);}

@media(max-width:1180px){
  .upgrade-forge{grid-template-columns:1fr 240px 1fr;gap:12px;padding:13px;}
  .upgrade-reward-grid{grid-template-columns:1fr;}
  .upgrade-catalog-header{align-items:flex-start;flex-direction:column;}
  .upgrade-catalog-tools{width:100%;}
  .upgrade-catalog-tools input{flex:1;width:auto;}
}
@media(max-width:850px){
  .upgrade-page{width:min(100% - 18px,760px);padding-top:12px;}
  .upgrade-hero{min-height:180px;border-radius:20px;}
  .upgrade-forge{grid-template-columns:1fr;overflow:visible;}
  .upgrade-probability-column{order:-1;min-height:390px;}
  .upgrade-catalogs{grid-template-columns:1fr;}
  .upgrade-selection-stack{max-height:340px;}
  .upgrade-result-stage{grid-template-columns:1fr;gap:14px;max-height:78vh;overflow:auto;}
  .upgrade-result-core{order:-1;min-height:230px;}
  .upgrade-result-offers,.upgrade-result-targets{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;}
  .upgrade-history>div{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .upgrade-hero-copy{padding:24px 16px;}
  .upgrade-hero-copy h2{font-size:34px;}
  .upgrade-catalog-tools{display:grid;grid-template-columns:1fr 120px;}
  .upgrade-gil-offer label{grid-template-columns:1fr;}
  .upgrade-history>div{grid-template-columns:1fr;}
  .upgrade-result-offers,.upgrade-result-targets{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .upgrade-page *,
  .upgrade-result-overlay *{animation-duration:.001ms!important;animation-iteration-count:1!important;}
}

/* ================================================================
   UPGRADE PAGE v2 — compact drag-and-drop layout, tester preview,
   palette alignment and corrected navigation indicator.
   ================================================================ */
html body .nav-tabs::before{display:none!important;content:none!important;}
html body .nav-tabs .nav-tab.active{
  color:#172018!important;
  border-color:rgba(247,232,181,.72)!important;
  background:
    repeating-linear-gradient(125deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),
    linear-gradient(145deg,#f7e8b5,#d6b45f)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.48),inset 0 -3px rgba(104,76,18,.2),0 5px 14px rgba(214,180,95,.22)!important;
}
html body .nav-tabs .nav-tab{position:relative!important;z-index:1!important;}

.view-upgrade{position:relative!important;overflow:hidden!important;contain:style paint!important;}
.upgrade-page{
  --upgrade-gold:#d6b45f;
  --upgrade-gold-soft:#fae686;
  --upgrade-purple:#75f3ce;
  --upgrade-purple-deep:#163217;
  --upgrade-emerald:#75f3ce;
  --upgrade-green:#4bbe61;
  --upgrade-forest:#163217;
  --upgrade-panel:rgba(20,34,22,.94);
  position:relative!important;
  isolation:isolate!important;
}
.upgrade-page-ambience{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;opacity:.68;}
.upgrade-ambient-vine{position:absolute;top:120px;bottom:0;width:170px;height:calc(100% - 120px);overflow:visible;fill:none;stroke:rgba(75,190,97,.28);stroke-width:3;filter:drop-shadow(0 0 9px rgba(117,243,206,.08));animation:upgradeAmbientSway 9s ease-in-out infinite;transform-origin:bottom center;}
.upgrade-ambient-vine ellipse{fill:rgba(75,190,97,.26);stroke:rgba(117,243,206,.25);stroke-width:2;}
.upgrade-ambient-vine.is-left{left:-32px;}
.upgrade-ambient-vine.is-right{right:-32px;transform:scaleX(-1);animation-delay:-4.5s;}
@keyframes upgradeAmbientSway{50%{translate:0 -8px;rotate:1.2deg;}}
.upgrade-ambient-flower,.upgrade-ambient-spark{position:absolute;font-style:normal;pointer-events:none;animation:upgradeAmbientFloat 7s ease-in-out infinite;}
.upgrade-ambient-flower{color:#fae686;text-shadow:0 0 13px rgba(250,230,134,.45);font-size:21px;}
.upgrade-ambient-flower.is-a{left:4%;top:27%;}.upgrade-ambient-flower.is-b{right:5%;top:47%;animation-delay:-2.4s}.upgrade-ambient-flower.is-c{left:8%;top:74%;animation-delay:-5s}
.upgrade-ambient-spark{color:#75f3ce;text-shadow:0 0 12px currentColor;font-size:13px;}
.upgrade-ambient-spark.is-a{left:15%;top:18%}.upgrade-ambient-spark.is-b{right:16%;top:29%;animation-delay:-1.8s}.upgrade-ambient-spark.is-c{left:11%;top:58%;animation-delay:-3.1s}.upgrade-ambient-spark.is-d{right:10%;top:82%;animation-delay:-5.2s}
@keyframes upgradeAmbientFloat{0%,100%{opacity:.25;transform:translate3d(0,0,0) rotate(0)}50%{opacity:.82;transform:translate3d(0,-12px,0) rotate(12deg)}}

.upgrade-hero{
  border-color:rgba(214,180,95,.24)!important;
  background:radial-gradient(circle at 50% 110%,rgba(75,190,97,.16),transparent 43%),linear-gradient(135deg,rgba(12,23,14,.98),rgba(30,47,31,.94))!important;
}
.upgrade-hero::before,.upgrade-hero::after{border-color:rgba(117,243,206,.12)!important;}
.upgrade-hero-orbit{border-color:rgba(117,243,206,.16)!important;}
.upgrade-hero-copy h2 em{color:#75f3ce!important;text-shadow:0 0 24px rgba(117,243,206,.22)!important;}
.upgrade-hero-filigree{position:absolute;z-index:1;left:50%;bottom:15px;translate:-50% 0;width:min(440px,70%);display:flex;align-items:center;gap:12px;color:rgba(250,230,134,.45);}
.upgrade-hero-filigree i{height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor);}.upgrade-hero-filigree i:last-child{background:linear-gradient(90deg,currentColor,transparent)}
.upgrade-tester-badge{display:inline-flex;margin-top:18px;padding:7px 13px;border:1px solid rgba(117,243,206,.32);border-radius:999px;color:#75f3ce;background:rgba(22,50,23,.58);font-size:9px;font-weight:900;letter-spacing:.14em;box-shadow:0 0 22px rgba(117,243,206,.08);}

.upgrade-forge{
  background:radial-gradient(circle at 50% 45%,rgba(117,243,206,.09),transparent 34%),linear-gradient(180deg,rgba(22,35,24,.98),rgba(10,17,12,.99))!important;
  border-color:rgba(214,180,95,.22)!important;
}
.upgrade-forge::before{background-image:radial-gradient(circle at center,rgba(250,230,134,.05) 0 1px,transparent 1.5px)!important;background-size:34px 34px!important;}
.upgrade-forge-ambient.is-right{background:#75f3ce!important;}
.upgrade-forge-root{position:absolute;z-index:-1;bottom:-20px;width:45%;height:190px;opacity:.2;pointer-events:none;border-top:2px solid rgba(75,190,97,.28);border-radius:50%;filter:drop-shadow(0 0 10px rgba(117,243,206,.08));}
.upgrade-forge-root::before,.upgrade-forge-root::after{content:"";position:absolute;width:76%;height:90px;border-top:2px solid rgba(75,190,97,.24);border-radius:50%;}
.upgrade-forge-root.is-left{left:-8%;transform:rotate(9deg)}.upgrade-forge-root.is-right{right:-8%;transform:scaleX(-1) rotate(9deg)}
.upgrade-forge-root::before{left:22%;top:34px;rotate:-8deg}.upgrade-forge-root::after{left:34%;top:75px;rotate:9deg}

.upgrade-offer-column,.upgrade-target-column,.upgrade-probability-column{background:linear-gradient(155deg,rgba(24,39,26,.86),rgba(8,15,10,.84))!important;border-color:rgba(214,180,95,.11)!important;}
.upgrade-target-summary{border-color:rgba(117,243,206,.18)!important;background:rgba(75,190,97,.055)!important;}.upgrade-target-summary strong{color:#75f3ce!important;}
.upgrade-probability-column::before,.upgrade-probability-column::after{border-color:rgba(117,243,206,.13)!important;}
.upgrade-chance-dial{background:radial-gradient(circle,#213025 0 48%,#111c14 49% 58%,transparent 59%)!important;box-shadow:0 0 60px rgba(117,243,206,.1)!important;}
.upgrade-chance-ring i{border-color:rgba(117,243,206,.28)!important;}

.upgrade-drop-zone{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease!important;}
.upgrade-drop-zone.is-drop-ready{border-color:rgba(117,243,206,.28)!important;box-shadow:inset 0 0 28px rgba(117,243,206,.035)!important;}
.upgrade-drop-zone.is-drop-active{border-color:rgba(250,230,134,.68)!important;background:linear-gradient(155deg,rgba(36,57,37,.96),rgba(12,21,14,.94))!important;box-shadow:inset 0 0 45px rgba(117,243,206,.1),0 0 24px rgba(250,230,134,.08)!important;transform:translateY(-2px);}
.upgrade-drop-zone.is-drop-active .upgrade-empty-selection{border-color:rgba(250,230,134,.52)!important;color:#f4e7bb!important;}

.upgrade-selection-stack.upgrade-selection-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(102px,1fr))!important;grid-auto-rows:132px!important;align-content:start!important;gap:9px!important;min-height:235px!important;max-height:275px!important;padding:2px 4px 5px 1px!important;overflow:auto!important;scrollbar-width:thin!important;scrollbar-color:rgba(214,180,95,.55) rgba(255,255,255,.035)!important;}
.upgrade-selection-stack::-webkit-scrollbar,.upgrade-five-row-catalog::-webkit-scrollbar{width:8px;height:8px}.upgrade-selection-stack::-webkit-scrollbar-track,.upgrade-five-row-catalog::-webkit-scrollbar-track{background:rgba(255,255,255,.025);border-radius:999px}.upgrade-selection-stack::-webkit-scrollbar-thumb,.upgrade-five-row-catalog::-webkit-scrollbar-thumb{background:linear-gradient(#fae686,#4bbe61);border:2px solid rgba(10,17,12,.85);border-radius:999px}
.upgrade-empty-selection{grid-column:1/-1!important;min-height:225px!important;gap:7px!important;background:radial-gradient(circle at center,rgba(117,243,206,.035),transparent 68%)!important;}
.upgrade-empty-selection small{font-size:9px;color:#68766a;}
.upgrade-selection-tile{position:relative;display:grid;grid-template-rows:72px minmax(0,1fr) auto;align-items:center;min-width:0;padding:7px 7px 8px;border:1px solid rgba(214,180,95,.12);border-radius:13px;background:linear-gradient(155deg,rgba(45,62,46,.66),rgba(9,15,10,.88));box-shadow:inset 0 1px rgba(255,255,255,.035);overflow:hidden;}
.upgrade-selection-tile::before{content:"";position:absolute;inset:auto -20% -58% -20%;height:80%;background:radial-gradient(circle,rgba(117,243,206,.12),transparent 65%);pointer-events:none;}
.upgrade-selection-tile img{position:relative;width:72px;height:72px;max-width:100%;justify-self:center;object-fit:contain;border-radius:9px;background:rgba(0,0,0,.22);}
.upgrade-selection-tile>strong{position:relative;min-width:0;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:10px;color:#f4f0e4;}
.upgrade-selection-tile>small{position:relative;text-align:center;font-size:9px;font-weight:900;color:#fae686;}
.upgrade-selection-count{position:absolute;z-index:3;right:5px;top:5px;min-width:25px;padding:3px 5px;border:1px solid rgba(250,230,134,.32);border-radius:999px;background:rgba(10,17,12,.92);color:#fae686;font-size:8px;font-weight:900;text-align:center;}
.upgrade-selection-actions{position:absolute;z-index:4;left:4px;top:4px;display:flex;gap:3px;opacity:0;transition:opacity .15s ease;}.upgrade-selection-tile:hover .upgrade-selection-actions,.upgrade-selection-tile:focus-within .upgrade-selection-actions{opacity:1}
.upgrade-selection-actions button{width:23px;height:23px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(8,14,9,.88);color:#f4edda;font-weight:900;cursor:pointer}.upgrade-selection-actions button:hover{border-color:rgba(250,230,134,.42);color:#fae686;background:rgba(45,62,46,.95)}

.upgrade-catalog-panel{border-color:rgba(214,180,95,.1)!important;background:linear-gradient(155deg,rgba(24,39,26,.94),rgba(9,16,11,.96))!important;box-shadow:0 20px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025)!important;}
.upgrade-catalog-panel.is-offers{border-top-color:rgba(75,190,97,.5)!important}.upgrade-catalog-panel.is-targets{border-top-color:rgba(250,230,134,.5)!important}
.upgrade-catalog-header{background:linear-gradient(90deg,rgba(75,190,97,.055),rgba(250,230,134,.025))!important;}
.upgrade-catalog-tools input,.upgrade-catalog-tools select{border-color:rgba(214,180,95,.14)!important;background:rgba(8,15,10,.75)!important;color:#f4f0e4!important;}
.upgrade-reward-grid.upgrade-five-row-catalog{
  --upgrade-card-row:142px;
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(142px,1fr))!important;
  grid-auto-rows:var(--upgrade-card-row)!important;
  align-content:start!important;
  gap:10px!important;
  height:calc(var(--upgrade-card-row) * 5 + 40px)!important;
  min-height:calc(var(--upgrade-card-row) * 5 + 40px)!important;
  max-height:calc(var(--upgrade-card-row) * 5 + 40px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(214,180,95,.55) rgba(255,255,255,.025)!important;
}
.upgrade-reward-card{position:relative!important;display:grid!important;grid-template-rows:78px minmax(0,1fr) auto!important;grid-template-columns:1fr!important;gap:5px!important;min-height:0!important;height:142px!important;padding:8px!important;border-color:rgba(214,180,95,.1)!important;border-radius:14px!important;background:linear-gradient(155deg,rgba(45,62,46,.62),rgba(8,14,9,.9))!important;overflow:hidden!important;cursor:grab!important;user-select:none!important;}
.upgrade-reward-card:active{cursor:grabbing!important}.upgrade-reward-card:hover{transform:translateY(-3px)!important;border-color:rgba(250,230,134,.34)!important;box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 0 20px rgba(117,243,206,.035)!important;}
.upgrade-reward-card.is-selected{border-color:rgba(117,243,206,.4)!important}.upgrade-reward-card.is-dragging{opacity:.38!important;transform:scale(.96)!important;}
.upgrade-reward-image-wrap{position:relative!important;width:78px!important;height:78px!important;justify-self:center!important;border-radius:11px!important;background:radial-gradient(circle,rgba(75,190,97,.09),rgba(0,0,0,.28))!important;}
.upgrade-reward-image-wrap img{max-width:92%!important;max-height:92%!important;}
.upgrade-reward-copy{display:grid!important;gap:2px!important;text-align:center!important;min-width:0!important;}
.upgrade-reward-copy strong{font-size:10px!important;line-height:1.15!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#f4f0e4!important;}
.upgrade-reward-copy .upgrade-reward-value{font-size:9px!important;color:#fae686!important;font-weight:900!important;}
.upgrade-reward-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#718173;font-size:7.5px;}
.upgrade-reward-count{position:absolute;z-index:4;right:5px;top:5px;min-width:29px;padding:4px 6px;border:1px solid rgba(250,230,134,.34);border-radius:999px;background:rgba(9,16,11,.92);color:#fae686;font-size:8px;font-weight:900;text-align:center;box-shadow:0 2px 9px rgba(0,0,0,.3);}
.upgrade-reward-drag-hint{font-size:7px;letter-spacing:.08em;color:rgba(117,243,206,.66);text-align:center;font-weight:900;}
.upgrade-reward-selected-count{position:absolute;left:5px;top:5px;padding:3px 5px;border-radius:999px;background:rgba(22,50,23,.9);color:#75f3ce;font-size:7px;font-weight:900;}
.upgrade-rarity-tag{font-size:6.5px!important;}
.upgrade-catalog-empty{grid-column:1/-1!important;height:100%!important;min-height:calc(var(--upgrade-card-row) * 5)!important;display:grid!important;place-items:center!important;color:#718173!important;}

.upgrade-risk-note{border-color:rgba(214,180,95,.13)!important;background:linear-gradient(145deg,rgba(214,180,95,.055),rgba(75,190,97,.035))!important;}
.upgrade-result-overlay{background:radial-gradient(circle at center,rgba(22,50,23,.58),rgba(5,10,6,.97) 64%)!important;}.upgrade-result-overlay::before{background:conic-gradient(from 30deg,transparent,rgba(117,243,206,.14),transparent,rgba(250,230,134,.13),transparent)!important;}
.upgrade-result-energy i:nth-child(2){border-color:rgba(117,243,206,.28)!important;}
.upgrade-result-core>span{box-shadow:0 0 70px rgba(117,243,206,.22),inset 0 0 55px rgba(75,190,97,.08)!important;}

@media(max-width:1180px){
  .upgrade-reward-grid.upgrade-five-row-catalog{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))!important;}
}
@media(max-width:850px){
  .upgrade-page-ambience{opacity:.36}.upgrade-ambient-vine{width:110px}.upgrade-selection-stack.upgrade-selection-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;}
  .upgrade-reward-grid.upgrade-five-row-catalog{--upgrade-card-row:136px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;height:calc(var(--upgrade-card-row) * 5 + 40px)!important;min-height:calc(var(--upgrade-card-row) * 5 + 40px)!important;max-height:calc(var(--upgrade-card-row) * 5 + 40px)!important;}
  .upgrade-reward-card{height:136px!important;}
}
@media(max-width:560px){
  .upgrade-reward-grid.upgrade-five-row-catalog{grid-template-columns:repeat(2,minmax(0,1fr))!important;--upgrade-card-row:140px;}
  .upgrade-selection-stack.upgrade-selection-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:126px!important;}
  .upgrade-selection-tile img{width:66px;height:66px;}
}

/* Upgrade v3 — ornate exchange forge, compact transparent reward tiles and
   full-screen synchronized result sequence. */
@property --upgrade-chance{
  syntax:"<percentage>";
  inherits:true;
  initial-value:0%;
}
@property --upgrade-chance-hue{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
.upgrade-page{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  --upgrade-ivory:#fffaf0;
  --upgrade-forest:#163217;
  --upgrade-leaf:#4bbe61;
  --upgrade-mint:#75f3ce;
  --upgrade-gold:#fae686;
  --upgrade-bronze:#b88736;
}
.upgrade-page>section,.upgrade-page>.upgrade-error-banner,.upgrade-page>.upgrade-history{position:relative;z-index:3;}
.upgrade-page-ambience{
  z-index:1!important;
  inset:-20px -70px -40px!important;
  opacity:1!important;
  overflow:visible!important;
}
.upgrade-ambient-vine{opacity:.76!important;filter:drop-shadow(0 0 9px rgba(75,190,97,.2));}
.upgrade-page-garden{position:absolute;z-index:2;width:170px;height:310px;pointer-events:none;filter:drop-shadow(0 12px 24px rgba(0,0,0,.42));}
.upgrade-page-garden.is-left{left:-24px;top:315px;transform:rotate(-8deg);}
.upgrade-page-garden.is-right{right:-24px;top:315px;transform:scaleX(-1) rotate(-8deg);}
.upgrade-page-garden.is-between{left:50%;top:746px;width:420px;height:100px;transform:translateX(-50%);}
.upgrade-garden-stem{position:absolute;inset:0;border-left:4px solid rgba(75,190,97,.48);border-radius:52% 0 0 48%;transform-origin:bottom center;animation:upgradeGardenSway 8s ease-in-out infinite!important;}
.upgrade-garden-stem::before,.upgrade-garden-stem::after{content:"";position:absolute;width:95px;height:3px;background:linear-gradient(90deg,rgba(75,190,97,.72),transparent);border-radius:50%;transform-origin:left center;}
.upgrade-garden-stem::before{left:3px;top:105px;rotate:-34deg}.upgrade-garden-stem::after{left:3px;top:196px;rotate:29deg}
.upgrade-garden-stem>i{position:absolute;width:26px;height:13px;border-radius:90% 10% 90% 10%;background:linear-gradient(145deg,#75f3ce,#4bbe61 55%,#163217);box-shadow:0 0 12px rgba(117,243,206,.22);animation:upgradeLeafBreath 4.8s ease-in-out infinite!important;}
.upgrade-garden-stem>i:nth-child(1){left:23px;top:68px;rotate:-30deg}.upgrade-garden-stem>i:nth-child(2){left:66px;top:103px;rotate:18deg}.upgrade-garden-stem>i:nth-child(3){left:12px;top:146px;rotate:-18deg}.upgrade-garden-stem>i:nth-child(5){left:67px;top:194px;rotate:34deg}.upgrade-garden-stem>i:nth-child(6){left:18px;top:245px;rotate:-22deg}
.upgrade-garden-stem>b{position:absolute;left:70px;top:144px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#fae686;font-size:38px;text-shadow:0 0 10px #fae686,0 0 24px rgba(117,243,206,.38);animation:upgradeFlowerPulse 3.6s ease-in-out infinite!important;}
.upgrade-garden-root{position:absolute;left:0;right:0;top:20px;height:72px;border-top:4px solid rgba(75,190,97,.38);border-radius:50%;animation:upgradeRootBreathe 7s ease-in-out infinite!important;}
.upgrade-garden-root>i{position:absolute;width:150px;height:48px;border-top:3px solid rgba(117,243,206,.28);border-radius:50%;}.upgrade-garden-root>i:nth-child(1){left:14px;top:12px;rotate:8deg}.upgrade-garden-root>i:nth-child(2){left:134px;top:2px;rotate:-7deg}.upgrade-garden-root>i:nth-child(3){right:8px;top:15px;rotate:-12deg}.upgrade-garden-root>b{position:absolute;left:50%;top:-21px;translate:-50% 0;color:#fae686;font-size:26px;text-shadow:0 0 18px rgba(250,230,134,.55);}
@keyframes upgradeGardenSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2.2deg)}}
@keyframes upgradeLeafBreath{0%,100%{filter:brightness(.82);transform:scale(.96)}50%{filter:brightness(1.3);transform:scale(1.06)}}
@keyframes upgradeFlowerPulse{50%{transform:scale(1.09) rotate(4deg);filter:brightness(1.25)}}
@keyframes upgradeRootBreathe{50%{transform:scaleX(1.035);filter:brightness(1.28)}}

/* Panel silhouettes and floral corner ornaments. */
.upgrade-offer-column,.upgrade-target-column,.upgrade-probability-column,.upgrade-catalog-panel{
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  clip-path:polygon(0 22px,18px 6px,74px 6px,88px 0,calc(100% - 88px) 0,calc(100% - 74px) 6px,calc(100% - 18px) 6px,100% 22px,100% calc(100% - 22px),calc(100% - 18px) calc(100% - 6px),calc(100% - 74px) calc(100% - 6px),calc(100% - 88px) 100%,88px 100%,74px calc(100% - 6px),18px calc(100% - 6px),0 calc(100% - 22px))!important;
  background:
    radial-gradient(circle at 50% 0,rgba(250,230,134,.08),transparent 31%),
    linear-gradient(150deg,rgba(31,49,33,.97),rgba(8,15,10,.985) 72%)!important;
  box-shadow:0 22px 65px rgba(0,0,0,.35),inset 0 0 0 1px rgba(250,230,134,.14),inset 0 1px rgba(255,255,255,.045)!important;
}
.upgrade-offer-column,.upgrade-target-column,.upgrade-probability-column{min-height:100%;}
.upgrade-panel-ornaments{position:absolute;z-index:8;inset:-7px;pointer-events:none;overflow:visible;}
.upgrade-panel-ornaments>i{position:absolute;width:54px;height:54px;filter:drop-shadow(0 0 8px rgba(117,243,206,.14));}
.upgrade-panel-ornaments>i::before,.upgrade-panel-ornaments>i::after{content:"";position:absolute;background:linear-gradient(145deg,#75f3ce 0%,#4bbe61 46%,#163217 100%);border:1px solid rgba(250,230,134,.25);}
.upgrade-panel-ornaments>i::before{width:42px;height:10px;border-radius:100% 0 100% 0;rotate:35deg;left:3px;top:17px;}
.upgrade-panel-ornaments>i::after{width:29px;height:8px;border-radius:0 100% 0 100%;rotate:-22deg;left:20px;top:31px;}
.upgrade-panel-ornaments>.is-top-left{left:0;top:0}.upgrade-panel-ornaments>.is-top-right{right:0;top:0;transform:scaleX(-1)}.upgrade-panel-ornaments>.is-bottom-left{left:0;bottom:0;transform:scaleY(-1)}.upgrade-panel-ornaments>.is-bottom-right{right:0;bottom:0;transform:scale(-1)}
.upgrade-panel-ornaments>.is-crown{position:absolute;left:50%;top:-10px;translate:-50% 0;width:50px;text-align:center;color:#fae686;font-size:18px;text-shadow:0 0 8px rgba(250,230,134,.65),0 0 18px rgba(117,243,206,.25);animation:upgradeOrnamentCrown 3.2s ease-in-out infinite!important;}
@keyframes upgradeOrnamentCrown{50%{letter-spacing:.16em;filter:brightness(1.35);transform:translateY(-2px)}}
.upgrade-offer-column>header,.upgrade-target-column>header,.upgrade-catalog-header{position:relative;z-index:9;}
.upgrade-catalog-panel::before{content:"";position:absolute;z-index:1;left:50%;top:-2px;width:34%;height:18px;translate:-50% 0;background:linear-gradient(90deg,transparent,rgba(250,230,134,.3),transparent);clip-path:polygon(0 50%,40% 35%,50% 0,60% 35%,100% 50%,60% 65%,50% 100%,40% 65%);}

/* Main forge center animation and color-changing chance ring. */
.upgrade-probability-column{
  isolation:isolate!important;
  animation:upgradeCenterPanelBreath 5.4s ease-in-out infinite!important;
}
.upgrade-probability-column::before,.upgrade-probability-column::after{
  z-index:0!important;
  width:360px!important;
  height:118px!important;
  border-color:rgba(117,243,206,.2)!important;
  animation:upgradeCenterOrbit 12s linear infinite!important;
}
.upgrade-probability-column::after{animation-direction:reverse!important;animation-duration:16s!important;}
.upgrade-center-motion{position:absolute;z-index:1;inset:0;pointer-events:none;overflow:hidden;}
.upgrade-center-motion>i{position:absolute;left:50%;top:50%;width:10px;height:20px;border-radius:90% 10% 90% 10%;background:linear-gradient(#75f3ce,#4bbe61);transform-origin:0 0;animation:upgradeCenterPetal 7s linear infinite!important;filter:drop-shadow(0 0 7px rgba(117,243,206,.45));}
.upgrade-center-motion>i:nth-child(1){animation-delay:-1.1s}.upgrade-center-motion>i:nth-child(2){animation-delay:-2.9s;scale:.7}.upgrade-center-motion>i:nth-child(3){animation-delay:-4.8s;scale:1.2}.upgrade-center-motion>i:nth-child(4){animation-delay:-6.2s;scale:.85}.upgrade-center-motion>b{position:absolute;left:50%;top:50%;translate:-50% -50%;color:#fae686;font-size:22px;text-shadow:0 0 15px rgba(250,230,134,.6);animation:upgradeCenterStar 2.6s ease-in-out infinite!important;}
.upgrade-chance-dial{
  width:206px!important;
  background:radial-gradient(circle,rgba(22,50,23,.98) 0 46%,rgba(8,16,10,.98) 47% 60%,transparent 61%)!important;
  box-shadow:0 0 34px hsla(var(--upgrade-chance-hue),80%,56%,.28),0 0 90px hsla(var(--upgrade-chance-hue),75%,45%,.14),inset 0 0 36px rgba(117,243,206,.08)!important;
  animation:upgradeDialFloat 4s ease-in-out infinite!important;
}
.upgrade-chance-ring{
  background:conic-gradient(from -90deg,hsl(var(--upgrade-chance-hue) 78% 52%) var(--upgrade-chance),rgba(255,255,255,.06) 0)!important;
  filter:drop-shadow(0 0 8px hsla(var(--upgrade-chance-hue),85%,56%,.55));
  /* v30.53 — keep the chance ring perfectly synchronized with the percentage text during drain/rebuild animations. */
  transition:none!important;
  animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
}
.upgrade-chance-ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(250,230,134,.32);animation:upgradeChanceOuterSpin 13s linear infinite!important;}
.upgrade-chance-ring i{animation:upgradeChanceInnerSpin 8s linear infinite reverse!important;}
.upgrade-chance-dial strong{font-size:42px!important;text-shadow:0 0 12px hsla(var(--upgrade-chance-hue),90%,60%,.55),0 2px 2px rgba(0,0,0,.9)!important;}
.upgrade-risk-note{min-height:57px!important;margin:0 0 13px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;gap:1px!important;}
.upgrade-risk-note>span{display:block!important;padding:0!important;border:0!important;background:none!important;color:#fae686!important;font-size:8.5px!important;line-height:1.2!important;letter-spacing:.07em!important;text-shadow:0 0 7px rgba(250,230,134,.28);}
.upgrade-risk-note>b{margin-top:5px!important;color:#9ca69b!important;font-size:8px!important;line-height:1.25!important;}
.upgrade-attempt-button{position:relative;z-index:5;overflow:hidden;box-shadow:0 0 24px rgba(117,243,206,.12)!important;}
.upgrade-attempt-button::after{content:"";position:absolute;inset:-40% auto -40% -45%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:upgradeButtonSweep 3.8s ease-in-out infinite!important;}
@keyframes upgradeCenterPanelBreath{50%{filter:brightness(1.08);box-shadow:0 24px 80px rgba(0,0,0,.38),0 0 38px rgba(117,243,206,.07),inset 0 0 0 1px rgba(250,230,134,.18)!important}}
@keyframes upgradeCenterOrbit{to{rotate:360deg}}
@keyframes upgradeCenterPetal{0%{transform:rotate(0deg) translateX(126px) rotate(0deg);opacity:.15}25%{opacity:.85}50%{transform:rotate(180deg) translateX(92px) rotate(-180deg);opacity:.35}75%{opacity:.9}100%{transform:rotate(360deg) translateX(126px) rotate(-360deg);opacity:.15}}
@keyframes upgradeCenterStar{50%{transform:scale(1.2) rotate(45deg);filter:brightness(1.4)}}
@keyframes upgradeDialFloat{50%{transform:translateY(-5px) scale(1.015)}}
@keyframes upgradeChanceOuterSpin{to{rotate:360deg}}
@keyframes upgradeChanceInnerSpin{to{rotate:360deg}}
@keyframes upgradeButtonSweep{0%,45%{left:-45%;opacity:0}58%{opacity:1}78%,100%{left:125%;opacity:0}}

/* The artwork itself remains transparent; reward tiles share one compact visual. */
.upgrade-selection-stack.upgrade-selection-grid{grid-auto-rows:142px!important;}
.upgrade-item-tile{
  position:relative!important;
  display:grid!important;
  grid-template-rows:78px 30px 15px 14px!important;
  align-items:center!important;
  justify-items:center!important;
  gap:1px!important;
  min-width:0!important;
  height:142px!important;
  padding:7px 7px 8px!important;
  border:1px solid rgba(250,230,134,.14)!important;
  border-radius:0!important;
  clip-path:polygon(0 12px,12px 0,calc(100% - 28px) 0,calc(100% - 18px) 7px,100% 7px,100% calc(100% - 12px),calc(100% - 12px) 100%,28px 100%,18px calc(100% - 7px),0 calc(100% - 7px))!important;
  background:linear-gradient(155deg,rgba(32,50,34,.86),rgba(7,13,9,.96))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 7px 17px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
}
.upgrade-item-tile::before{content:""!important;position:absolute!important;inset:auto 10% -1px!important;height:2px!important;background:linear-gradient(90deg,transparent,var(--upgrade-tile-glow,#75f3ce),transparent)!important;opacity:.68!important;}
.upgrade-item-tile::after{content:"✦";position:absolute;left:7px;bottom:5px;color:rgba(250,230,134,.45);font-size:7px;}
.upgrade-item-tile.rarity-legendary{--upgrade-tile-glow:#fae686}.upgrade-item-tile.rarity-epic{--upgrade-tile-glow:#8440bc}.upgrade-item-tile.rarity-rare{--upgrade-tile-glow:#4a8ccc}.upgrade-item-tile.rarity-uncommon{--upgrade-tile-glow:#56b77f}.upgrade-item-tile.rarity-common{--upgrade-tile-glow:#aaa49b}
.upgrade-item-art,.upgrade-selection-tile img,.upgrade-reward-card img{
  position:relative!important;
  z-index:2!important;
  width:76px!important;
  height:76px!important;
  max-width:88%!important;
  max-height:76px!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.38))!important;
}
.upgrade-item-name,.upgrade-selection-tile>strong,.upgrade-reward-card .upgrade-item-name{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  color:#fffaf0!important;
  font-size:9.5px!important;
  line-height:1.08!important;
  font-weight:900!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95)!important;
}
.upgrade-item-value,.upgrade-selection-tile>small,.upgrade-reward-card .upgrade-item-value{position:relative!important;z-index:3!important;color:#fae686!important;font-size:8.5px!important;line-height:1!important;font-weight:900!important;text-align:center!important;}
.upgrade-reward-drag-hint{position:relative!important;z-index:3!important;color:#75f3ce!important;font-size:6.5px!important;line-height:1!important;letter-spacing:.08em!important;}
.upgrade-reward-selected-count{left:5px!important;top:5px!important;background:rgba(22,50,23,.96)!important;}
.upgrade-reward-count,.upgrade-selection-count{right:5px!important;top:5px!important;}
.upgrade-selection-actions{z-index:6!important;}
.upgrade-reward-grid.upgrade-five-row-catalog{--upgrade-card-row:142px!important;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;}
.upgrade-reward-card:hover{transform:translateY(-3px) scale(1.015)!important;}

/* Full-screen upgrade animation. */
.upgrade-result-overlay{
  --upgrade-result-red:#d94b45;
  position:fixed!important;
  z-index:12000!important;
  inset:0!important;
  display:block!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(30,62,35,.4),transparent 33%),
    linear-gradient(180deg,rgba(6,12,8,.975),rgba(3,8,5,.995))!important;
  backdrop-filter:blur(14px)!important;
}
.upgrade-result-overlay::before{content:""!important;position:absolute!important;inset:-20%!important;width:auto!important;aspect-ratio:auto!important;border-radius:0!important;background:conic-gradient(from 0deg,transparent,rgba(117,243,206,.07),transparent 24%,rgba(250,230,134,.08),transparent 49%,rgba(75,190,97,.06),transparent 72%)!important;filter:blur(12px)!important;animation:upgradeOverlayRotate 18s linear infinite!important;}
.upgrade-result-backdrop-ornaments{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.upgrade-result-backdrop-ornaments>i{position:absolute;width:42vw;height:22vh;border-top:3px solid rgba(75,190,97,.2);border-radius:50%;filter:drop-shadow(0 0 11px rgba(117,243,206,.12));animation:upgradeResultVineSway 8s ease-in-out infinite!important;}.upgrade-result-backdrop-ornaments>i:nth-child(1){left:-15vw;top:8vh;rotate:28deg}.upgrade-result-backdrop-ornaments>i:nth-child(2){right:-15vw;top:8vh;rotate:-28deg}.upgrade-result-backdrop-ornaments>i:nth-child(3){left:-10vw;bottom:3vh;rotate:-18deg}.upgrade-result-backdrop-ornaments>i:nth-child(4){right:-10vw;bottom:3vh;rotate:18deg}.upgrade-result-backdrop-ornaments>b{position:absolute;color:#fae686;text-shadow:0 0 16px rgba(250,230,134,.8);animation:upgradeFinalSpark 2.4s ease-in-out infinite!important;}.upgrade-result-backdrop-ornaments>b:nth-of-type(1){left:8vw;top:18vh}.upgrade-result-backdrop-ornaments>b:nth-of-type(2){right:9vw;bottom:18vh;animation-delay:-1.1s!important;}
.upgrade-animation-stage{position:relative;z-index:3;width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,26vw) minmax(0,1fr);align-items:center;padding:5vh 5vw 12vh;perspective:1000px;}
.upgrade-animation-side{position:relative;display:grid;grid-template-columns:repeat(3,minmax(72px,112px));grid-auto-rows:minmax(82px,112px);justify-content:center;align-content:center;gap:16px;min-height:62vh;pointer-events:none;}
.upgrade-animation-side.is-compact{grid-template-columns:repeat(3,minmax(110px,150px));grid-auto-rows:minmax(120px,155px);}
.upgrade-animation-reward{--upgrade-rarity-glow:#aaa49b;position:relative;display:grid;place-items:center;width:100%;height:100%;opacity:0;transform-origin:center;filter:drop-shadow(0 0 13px color-mix(in srgb,var(--upgrade-rarity-glow) 58%,transparent));}
.upgrade-animation-reward.rarity-legendary{--upgrade-rarity-glow:#fae686}.upgrade-animation-reward.rarity-epic{--upgrade-rarity-glow:#8440bc}.upgrade-animation-reward.rarity-rare{--upgrade-rarity-glow:#4a8ccc}.upgrade-animation-reward.rarity-uncommon{--upgrade-rarity-glow:#56b77f}.upgrade-animation-reward.rarity-common{--upgrade-rarity-glow:#aaa49b}
.upgrade-animation-reward::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--upgrade-rarity-glow) 47%,transparent),transparent 68%);filter:blur(9px);animation:upgradeRewardGlow 2.5s ease-in-out infinite!important;}
.upgrade-animation-reward img{position:relative;z-index:2;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 11px 12px rgba(0,0,0,.55));}
.upgrade-animation-gil-symbol{position:relative;z-index:2;width:74%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:3px double #fae686;background:radial-gradient(circle,#fff2ad,#b88736 65%,#52350c);color:#2b1b06;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,5vw,68px);box-shadow:0 0 25px rgba(250,230,134,.5),inset 0 0 16px rgba(255,255,255,.5);}
.upgrade-animation-slash{display:none;position:absolute;z-index:5;left:5%;top:50%;width:90%;height:7px;background:linear-gradient(90deg,transparent,#ff2e2e 12%,#fff 50%,#ff2e2e 88%,transparent);box-shadow:0 0 12px #ff2e2e,0 0 28px rgba(255,20,20,.8);transform:rotate(-34deg) scaleX(0);}
.upgrade-result-overlay.phase-offers .upgrade-animation-side.is-offers .upgrade-animation-reward{animation:upgradeOfferArrive .72s cubic-bezier(.17,.84,.3,1.1) calc(var(--upgrade-item-index) * .15s) both!important;}
.upgrade-result-overlay.phase-offers .upgrade-animation-side.is-targets{opacity:0;}
.upgrade-result-overlay.phase-targets .upgrade-animation-side.is-offers .upgrade-animation-reward,.upgrade-result-overlay.phase-meter .upgrade-animation-reward{opacity:1;transform:none;}
.upgrade-result-overlay.phase-targets .upgrade-animation-side.is-targets .upgrade-animation-reward{animation:upgradeTargetArrive .72s cubic-bezier(.17,.84,.3,1.1) calc(var(--upgrade-item-index) * .15s) both!important;}
.upgrade-result-overlay.phase-meter .upgrade-animation-core-ring{animation:upgradeMeterFill 1.55s cubic-bezier(.2,.8,.2,1) both!important;}
.upgrade-result-overlay.phase-consume .upgrade-animation-side.is-offers .upgrade-animation-reward{animation:upgradeOfferConsume 1.5s cubic-bezier(.55,.02,.7,.3) calc(var(--upgrade-item-index) * .09s) both!important;}
.upgrade-result-overlay.phase-consume .upgrade-animation-side.is-targets .upgrade-animation-reward{animation:upgradeTargetConsume 1.5s cubic-bezier(.55,.02,.7,.3) calc(var(--upgrade-item-index) * .09s) both!important;}
.upgrade-result-overlay.phase-burst .upgrade-animation-reward{opacity:0!important;}
.upgrade-animation-core{position:relative;display:grid;place-items:center;align-content:center;min-height:360px;text-align:center;}
.upgrade-animation-core-ring{position:absolute;width:min(25vw,300px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from -90deg,hsl(var(--upgrade-result-hue) 82% 52%) var(--upgrade-result-chance),rgba(255,255,255,.055) 0);mask:radial-gradient(circle,transparent 0 62%,#000 63% 76%,transparent 77%);filter:drop-shadow(0 0 16px hsla(var(--upgrade-result-hue),88%,58%,.58));transform:scale(.74);opacity:.35;}
.upgrade-animation-core-ring>i{position:absolute;inset:-12px;border:1px dashed rgba(250,230,134,.35);border-radius:50%;animation:upgradeCoreRingSpin 8s linear infinite!important;}.upgrade-animation-core-ring>i:nth-child(2){inset:20px;border-color:rgba(117,243,206,.32);animation-direction:reverse!important;animation-duration:11s!important}.upgrade-animation-core-ring>i:nth-child(3){inset:45px;border-style:solid;border-color:rgba(255,255,255,.08);}
.upgrade-animation-core>strong{position:relative;z-index:4;color:#fff8df;font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,3vw,46px);letter-spacing:.08em;text-shadow:0 0 13px rgba(250,230,134,.45),0 3px 3px rgba(0,0,0,.9);}
.upgrade-animation-core>small{position:relative;z-index:4;margin-top:9px;color:#75f3ce;font-size:10px;letter-spacing:.18em;font-weight:900;}
.upgrade-result-overlay.phase-offers .upgrade-animation-core>strong,.upgrade-result-overlay.phase-targets .upgrade-animation-core>strong{opacity:.7;font-size:18px;}
.upgrade-result-overlay.phase-meter .upgrade-animation-core-ring{opacity:1;transform:scale(1);}
.upgrade-result-overlay.phase-consume .upgrade-animation-core-ring{opacity:1;animation:upgradeCoreDrain 2.55s ease-in-out both!important;}
.upgrade-result-overlay.phase-consume .upgrade-animation-core>strong{animation:upgradeCoreTextPulse .85s ease-in-out infinite!important;}
.upgrade-animation-core-burst{position:absolute;width:min(30vw,350px);aspect-ratio:1;pointer-events:none;}
.upgrade-animation-core-burst>i{position:absolute;left:50%;top:50%;width:8px;height:54%;background:linear-gradient(transparent,#fae686,transparent);transform-origin:50% 0;opacity:0;}.upgrade-animation-core-burst>i:nth-child(1){rotate:0deg}.upgrade-animation-core-burst>i:nth-child(2){rotate:45deg}.upgrade-animation-core-burst>i:nth-child(3){rotate:90deg}.upgrade-animation-core-burst>i:nth-child(4){rotate:135deg}.upgrade-animation-core-burst>i:nth-child(5){rotate:180deg}.upgrade-animation-core-burst>i:nth-child(6){rotate:225deg}.upgrade-animation-core-burst>i:nth-child(7){rotate:270deg}.upgrade-animation-core-burst>i:nth-child(8){rotate:315deg}
.upgrade-result-overlay.phase-burst .upgrade-animation-core-burst>i{animation:upgradeCoreExplode .72s ease-out both!important;}.upgrade-result-overlay.phase-burst .upgrade-animation-core-ring{animation:upgradeCorePop .72s ease-out both!important;}.upgrade-result-overlay.phase-burst .upgrade-animation-core>strong{opacity:0;}
.upgrade-final-result{position:absolute;z-index:8;inset:5vh 7vw 13vh;display:grid;grid-template-rows:auto 1fr auto;place-items:center;gap:18px;opacity:0;animation:upgradeFinalReveal .85s ease-out .08s both!important;}
.upgrade-final-result>h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(58px,9vw,132px);letter-spacing:.08em;line-height:.9;}
.upgrade-final-result>div{display:grid;grid-template-columns:repeat(3,minmax(92px,150px));justify-content:center;align-content:center;gap:20px;width:min(760px,82vw);max-height:58vh;overflow:auto;padding:20px;}
.upgrade-final-result.is-compact>div{grid-template-columns:repeat(3,minmax(135px,190px));}
.upgrade-final-result .upgrade-animation-reward{opacity:1;height:150px;animation:upgradeFinalItemIn .75s ease-out calc(var(--upgrade-item-index) * .16s) both!important;}
.upgrade-final-result.is-compact .upgrade-animation-reward{height:190px;}
.upgrade-final-result>p{margin:0;color:#d7ddcf;font-size:13px;text-align:center;}
.upgrade-final-result.is-success>h2{color:#a8ffd3;text-shadow:0 0 15px #4bbe61,0 0 48px rgba(117,243,206,.65);}
.upgrade-final-result.is-failure>h2{color:#ff7771;text-shadow:0 0 15px #b51818,0 0 48px rgba(255,35,35,.55);}
.upgrade-final-result.is-failure .upgrade-animation-reward img{filter:grayscale(1) brightness(.52) contrast(1.15)!important;}
.upgrade-final-result.is-failure .upgrade-animation-reward::before{background:radial-gradient(circle,rgba(180,20,20,.28),transparent 68%);}
.upgrade-final-result.is-failure .upgrade-animation-slash{display:block;animation:upgradeFailureSlash .42s cubic-bezier(.2,.9,.25,1) calc(1s + var(--upgrade-item-index) * .12s) both!important;}
.upgrade-result-actions{position:absolute!important;z-index:12!important;left:50%!important;bottom:4vh!important;transform:translateX(-50%)!important;display:flex!important;gap:12px!important;align-items:center!important;}
.upgrade-result-actions button{min-width:170px!important;}
.upgrade-go-inventory{box-shadow:0 0 26px rgba(117,243,206,.22)!important;}
.upgrade-result-celebration{position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden;opacity:0;}
.upgrade-result-celebration>i{position:absolute;left:var(--celebrate-x,50%);top:-10%;width:10px;height:18px;border-radius:80% 20% 80% 20%;background:var(--celebrate-color,#75f3ce);filter:drop-shadow(0 0 8px currentColor);animation:upgradeCelebrateFall var(--celebrate-duration,5s) linear infinite!important;}.upgrade-result-celebration>i:nth-child(1){--celebrate-x:8%;--celebrate-duration:4.3s;--celebrate-color:#75f3ce}.upgrade-result-celebration>i:nth-child(2){--celebrate-x:18%;--celebrate-duration:5.6s;--celebrate-color:#fae686;animation-delay:-2s!important}.upgrade-result-celebration>i:nth-child(3){--celebrate-x:31%;--celebrate-duration:4.8s;--celebrate-color:#fff;animation-delay:-3.5s!important}.upgrade-result-celebration>i:nth-child(4){--celebrate-x:43%;--celebrate-duration:6.1s;--celebrate-color:#4bbe61;animation-delay:-1.3s!important}.upgrade-result-celebration>i:nth-child(5){--celebrate-x:55%;--celebrate-duration:4.6s;--celebrate-color:#fae686;animation-delay:-4.1s!important}.upgrade-result-celebration>i:nth-child(6){--celebrate-x:67%;--celebrate-duration:5.4s;--celebrate-color:#75f3ce;animation-delay:-2.6s!important}.upgrade-result-celebration>i:nth-child(7){--celebrate-x:78%;--celebrate-duration:4.9s;--celebrate-color:#fff;animation-delay:-.8s!important}.upgrade-result-celebration>i:nth-child(8){--celebrate-x:89%;--celebrate-duration:5.9s;--celebrate-color:#4bbe61;animation-delay:-3s!important}.upgrade-result-celebration>i:nth-child(9){--celebrate-x:24%;--celebrate-duration:6.3s;--celebrate-color:#fae686;animation-delay:-5s!important}.upgrade-result-celebration>i:nth-child(10){--celebrate-x:72%;--celebrate-duration:4.4s;--celebrate-color:#75f3ce;animation-delay:-1.8s!important}
.upgrade-result-overlay.phase-success .upgrade-result-celebration,.upgrade-result-overlay.phase-failure .upgrade-result-celebration{opacity:1;}
.upgrade-result-overlay.phase-failure .upgrade-result-celebration>i{height:3px;width:36px;border-radius:0;background:#b51e1e;box-shadow:0 0 13px rgba(255,30,30,.65);}
@keyframes upgradeOverlayRotate{to{transform:rotate(360deg)}}
@keyframes upgradeResultVineSway{50%{transform:scaleX(1.08) translateY(8px);filter:brightness(1.35)}}
@keyframes upgradeFinalSpark{50%{opacity:.2;transform:scale(.55) rotate(45deg)}}
@keyframes upgradeRewardGlow{50%{transform:scale(1.16);opacity:.52}}
@keyframes upgradeOfferArrive{0%{opacity:0;transform:translateX(48vw) scale(.1) rotate(-28deg);filter:blur(12px)}55%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes upgradeTargetArrive{0%{opacity:0;transform:translateX(-48vw) scale(.1) rotate(28deg);filter:blur(12px)}55%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes upgradeMeterFill{0%{opacity:.35;transform:scale(.72) rotate(-120deg);filter:brightness(.5)}100%{opacity:1;transform:scale(1) rotate(0);filter:brightness(1.2)}}
@keyframes upgradeOfferConsume{0%{opacity:1;transform:none;clip-path:inset(0)}55%{opacity:.8;clip-path:polygon(0 0,100% 0,92% 22%,100% 36%,84% 48%,100% 66%,79% 79%,100% 100%,0 100%)}100%{opacity:0;transform:translateX(46vw) scale(.04) rotate(48deg);filter:blur(10px);clip-path:polygon(45% 45%,55% 45%,55% 55%,45% 55%)}}
@keyframes upgradeTargetConsume{0%{opacity:1;transform:none;clip-path:inset(0)}55%{opacity:.8;clip-path:polygon(0 0,100% 0,92% 22%,100% 36%,84% 48%,100% 66%,79% 79%,100% 100%,0 100%)}100%{opacity:0;transform:translateX(-46vw) scale(.04) rotate(-48deg);filter:blur(10px);clip-path:polygon(45% 45%,55% 45%,55% 55%,45% 55%)}}
@keyframes upgradeCoreRingSpin{to{rotate:360deg}}
@keyframes upgradeCoreDrain{0%{transform:scale(1) rotate(0);opacity:1}70%{transform:scale(1.38) rotate(-260deg);opacity:.8;filter:brightness(1.6) drop-shadow(0 0 25px #fae686)}100%{transform:scale(1.62) rotate(-360deg);opacity:.2}}
@keyframes upgradeCoreTextPulse{50%{transform:scale(1.08);letter-spacing:.13em}}
@keyframes upgradeCoreExplode{0%{opacity:0;transform:scaleY(.1)}25%{opacity:1}100%{opacity:0;transform:translateY(-45%) scaleY(1.8)}}
@keyframes upgradeCorePop{0%{opacity:.8;transform:scale(1.5)}100%{opacity:0;transform:scale(2.8);filter:blur(16px)}}
@keyframes upgradeFinalReveal{from{opacity:0;filter:blur(12px);transform:scale(.94)}to{opacity:1;filter:none;transform:none}}
@keyframes upgradeFinalItemIn{0%{opacity:0;transform:scale(.35);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@keyframes upgradeFailureSlash{0%{opacity:0;transform:rotate(-34deg) scaleX(0)}35%{opacity:1}100%{opacity:1;transform:rotate(-34deg) scaleX(1)}}
@keyframes upgradeCelebrateFall{0%{transform:translateY(-12vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(120vh) rotate(720deg);opacity:.1}}

@media(max-width:950px){
  .upgrade-page-garden{opacity:.45}.upgrade-page-garden.is-left{left:-80px}.upgrade-page-garden.is-right{right:-80px}
  .upgrade-animation-stage{grid-template-columns:1fr minmax(160px,210px) 1fr;padding-inline:2vw}.upgrade-animation-side{grid-template-columns:repeat(3,minmax(58px,86px));gap:8px}.upgrade-animation-side.is-compact{grid-template-columns:repeat(3,minmax(82px,110px));}.upgrade-animation-core-ring{width:210px}.upgrade-final-result>div{grid-template-columns:repeat(3,minmax(80px,120px));}.upgrade-final-result.is-compact>div{grid-template-columns:repeat(3,minmax(105px,145px));}
}
@media(max-width:700px){
  .upgrade-animation-stage{grid-template-columns:1fr;grid-template-rows:1fr 180px 1fr;padding:2vh 4vw 12vh}.upgrade-animation-side{min-height:26vh;grid-template-columns:repeat(3,minmax(70px,100px));grid-auto-rows:92px}.upgrade-animation-side.is-compact{grid-template-columns:repeat(3,minmax(88px,120px));grid-auto-rows:112px}.upgrade-animation-core{min-height:180px}.upgrade-animation-core-ring{width:170px}.upgrade-result-overlay.phase-consume .upgrade-animation-side.is-offers .upgrade-animation-reward{animation-name:upgradeOfferConsumeMobile!important}.upgrade-result-overlay.phase-consume .upgrade-animation-side.is-targets .upgrade-animation-reward{animation-name:upgradeTargetConsumeMobile!important}.upgrade-final-result{inset:4vh 3vw 14vh}.upgrade-final-result>div{grid-template-columns:repeat(3,minmax(70px,100px));gap:9px;padding:8px}.upgrade-final-result.is-compact>div{grid-template-columns:repeat(3,minmax(90px,120px));}.upgrade-result-actions{bottom:2.5vh!important;flex-wrap:wrap;justify-content:center;width:94vw}.upgrade-result-actions button{min-width:145px!important;}
}
@keyframes upgradeOfferConsumeMobile{to{opacity:0;transform:translateY(35vh) scale(.04) rotate(42deg);filter:blur(10px);clip-path:polygon(45% 45%,55% 45%,55% 55%,45% 55%)}}
@keyframes upgradeTargetConsumeMobile{to{opacity:0;transform:translateY(-35vh) scale(.04) rotate(-42deg);filter:blur(10px);clip-path:polygon(45% 45%,55% 45%,55% 55%,45% 55%)}}

.upgrade-result-overlay.phase-success .upgrade-animation-side,
.upgrade-result-overlay.phase-failure .upgrade-animation-side,
.upgrade-result-overlay.phase-success .upgrade-animation-core,
.upgrade-result-overlay.phase-failure .upgrade-animation-core{opacity:0!important;visibility:hidden!important;}
.upgrade-final-result.is-failure .upgrade-animation-reward.is-gil .upgrade-animation-gil-symbol{filter:grayscale(1) brightness(.48) contrast(1.15)!important;}

/* Upgrade v4 — layout refinements, true modal portals and inventory provenance. */
.upgrade-hero{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.upgrade-hero::before,.upgrade-hero::after{display:none!important;content:none!important;}

/* Keep decorative foliage outside the useful panel area. */
.upgrade-panel-ornaments>i{display:none!important;}
.upgrade-panel-ornaments{inset:-20px!important;}
.upgrade-panel-ornaments>.is-crown{top:-2px!important;}
.upgrade-page-garden{z-index:5!important;opacity:.9!important;}
.upgrade-page-garden.is-left{left:-145px!important;top:300px!important;}
.upgrade-page-garden.is-right{right:-145px!important;top:300px!important;}
.upgrade-page-garden.is-between{top:735px!important;z-index:5!important;}
.upgrade-ambient-flower.is-a{left:-22px!important;top:235px!important;}
.upgrade-ambient-flower.is-b{right:-20px!important;top:550px!important;}
.upgrade-ambient-flower.is-c{left:50%!important;top:720px!important;}

/* Center forge: motion remains behind the dial; button belongs immediately below. */
.upgrade-probability-column{
  justify-content:center!important;
  align-content:center!important;
  gap:14px!important;
  padding:24px 18px!important;
}
.upgrade-center-motion{
  z-index:0!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  width:286px!important;
  height:286px!important;
  translate:-50% -54%!important;
  overflow:visible!important;
}
.upgrade-probability-column::before,.upgrade-probability-column::after{
  left:50%!important;
  top:50%!important;
  translate:-50% -58%!important;
  transform-origin:center!important;
}
.upgrade-chance-dial{position:relative!important;z-index:3!important;margin:0!important;}
.upgrade-attempt-button{position:relative!important;z-index:4!important;margin:2px auto 0!important;flex:0 0 auto!important;}
.upgrade-probability-column>p{order:5!important;min-height:0!important;margin:0!important;max-width:250px!important;}
.upgrade-risk-note{display:none!important;}

/* Compact cards: labels stay visible and PNG artwork never gets a backing square. */
.upgrade-item-tile,.upgrade-reward-card,.upgrade-selection-tile{
  grid-template-rows:82px 31px 17px!important;
  background:linear-gradient(155deg,rgba(29,47,31,.86),rgba(6,12,8,.97))!important;
}
.upgrade-item-art,.upgrade-reward-card img,.upgrade-selection-tile img{
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.upgrade-item-name,.upgrade-reward-card .upgrade-item-name,.upgrade-selection-tile>strong{
  display:-webkit-box!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fffaf0!important;
  min-height:20px!important;
}
.upgrade-reward-drag-hint{
  position:absolute!important;
  z-index:5!important;
  left:50%!important;
  top:5px!important;
  translate:-50% 0!important;
  width:max-content!important;
  max-width:72%!important;
  pointer-events:none!important;
  color:#75f3ce!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(117,243,206,.24)!important;
}
.upgrade-reward-count{z-index:7!important;}

/* Animated empty drop zones replace the static glyphs. */
.upgrade-empty-selection{position:relative!important;display:grid!important;place-items:center!important;align-content:center!important;gap:11px!important;}
.upgrade-empty-selection>small{display:none!important;}
.upgrade-empty-sigil{position:relative;display:grid;place-items:center;width:72px;height:72px;}
.upgrade-empty-sigil>i{position:absolute;inset:5px;border:1px solid rgba(117,243,206,.3);border-radius:50%;animation:upgradeEmptyOrbit 7s linear infinite!important;}
.upgrade-empty-sigil>i:nth-child(2){inset:16px;border-style:dashed;border-color:rgba(250,230,134,.38);animation-direction:reverse!important;animation-duration:4.8s!important;}
.upgrade-empty-sigil>b{color:#fae686;font-size:23px;text-shadow:0 0 12px rgba(250,230,134,.66),0 0 25px rgba(117,243,206,.3);animation:upgradeEmptyPulse 2.4s ease-in-out infinite!important;}
@keyframes upgradeEmptyOrbit{to{rotate:360deg}}
@keyframes upgradeEmptyPulse{50%{transform:scale(1.2) rotate(45deg);filter:brightness(1.35)}}

/* Real viewport-level dialogs: both are portaled to document.body. */
.upgrade-confirm-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:14000!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:rgba(3,8,5,.86)!important;
  backdrop-filter:blur(13px)!important;
}
.upgrade-confirm-modal{position:relative!important;z-index:2!important;max-width:min(520px,calc(100vw - 32px))!important;}
.upgrade-result-overlay{z-index:14100!important;isolation:isolate!important;contain:layout paint style!important;}

/* One to three rewards stay mathematically centered on their side. */
.upgrade-animation-side.is-compact.count-1{grid-template-columns:minmax(145px,190px)!important;}
.upgrade-animation-side.is-compact.count-2{grid-template-columns:repeat(2,minmax(125px,170px))!important;}
.upgrade-animation-side.is-compact.count-3{grid-template-columns:repeat(3,minmax(110px,150px))!important;}
.upgrade-final-result.is-compact.count-1>div{grid-template-columns:minmax(160px,210px)!important;}
.upgrade-final-result.is-compact.count-2>div{grid-template-columns:repeat(2,minmax(145px,195px))!important;}
.upgrade-final-result.is-compact.count-3>div{grid-template-columns:repeat(3,minmax(135px,190px))!important;}

/* Upgrade provenance badge in Your Prize Collection. */
.collection-card>.collection-upgrade-badge{
  position:absolute!important;
  z-index:10!important;
  left:11px!important;
  bottom:6px!important;
  width:58px!important;
  padding:2px 4px!important;
  border:1px solid rgba(250,230,134,.55)!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,rgba(22,50,23,.96),rgba(8,16,10,.98))!important;
  color:#fae686!important;
  font-size:8px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  box-shadow:0 0 11px rgba(117,243,206,.18),inset 0 1px rgba(255,255,255,.08)!important;
}

@media(max-width:950px){
  .upgrade-page-garden.is-left{left:-125px!important}.upgrade-page-garden.is-right{right:-125px!important}
}
@media(max-width:700px){
  .upgrade-page-garden{display:none!important;}
  .upgrade-animation-side.is-compact.count-1{grid-template-columns:minmax(110px,145px)!important;}
  .upgrade-animation-side.is-compact.count-2{grid-template-columns:repeat(2,minmax(95px,125px))!important;}
  .upgrade-animation-side.is-compact.count-3{grid-template-columns:repeat(3,minmax(82px,110px))!important;}
}

/* Upgrade v5 — profile/tag fix visual refinements, petals, rarity premium UI, single desired reward. */
.upgrade-ambient-vine ellipse{display:none!important;}
.upgrade-page-ambience{z-index:0!important;overflow:hidden!important;}
.upgrade-ambient-flower{font-size:24px!important;opacity:.92!important;}
.upgrade-ambient-flower.is-d{left:3%!important;top:55%!important;animation-delay:-1.6s!important;}
.upgrade-ambient-flower.is-e{right:6%!important;top:20%!important;animation-delay:-3.8s!important;}
.upgrade-ambient-flower.is-f{right:9%!important;top:78%!important;animation-delay:-6.1s!important;}
.upgrade-falling-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.upgrade-falling-petals>i{
  --petal-x:50vw;--petal-drift:28px;--petal-scale:1;--petal-rot:520deg;
  position:absolute;top:-9vh;left:var(--petal-x);width:12px;height:20px;
  border-radius:68% 32% 70% 30% / 38% 62% 38% 62%;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(250,230,134,.95) 52%,rgba(117,243,206,.95));
  box-shadow:0 0 10px rgba(250,230,134,.25),0 0 18px rgba(117,243,206,.14);
  opacity:0;animation:upgradePagePetalFall 16s linear infinite;
}
.upgrade-falling-petals>i::after{content:"";position:absolute;inset:15% 22% 34% 44%;border-radius:999px;background:rgba(255,255,255,.45);filter:blur(.5px);}
.upgrade-falling-petals>i.is-1{--petal-x:4vw;--petal-drift:42px;animation-delay:-2s;animation-duration:14.5s;}
.upgrade-falling-petals>i.is-2{--petal-x:12vw;--petal-drift:-28px;animation-delay:-8s;--petal-scale:.65;}
.upgrade-falling-petals>i.is-3{--petal-x:23vw;--petal-drift:24px;animation-delay:-5s;--petal-scale:.82;}
.upgrade-falling-petals>i.is-4{--petal-x:34vw;--petal-drift:-18px;animation-delay:-12s;--petal-scale:.55;}
.upgrade-falling-petals>i.is-5{--petal-x:48vw;--petal-drift:19px;animation-delay:-4s;--petal-scale:.78;}
.upgrade-falling-petals>i.is-6{--petal-x:66vw;--petal-drift:21px;animation-delay:-1s;--petal-scale:.7;}
.upgrade-falling-petals>i.is-7{--petal-x:76vw;--petal-drift:-33px;animation-delay:-10.5s;--petal-scale:.72;}
.upgrade-falling-petals>i.is-8{--petal-x:88vw;--petal-drift:31px;animation-delay:-3.5s;}
.upgrade-falling-petals>i.is-9{--petal-x:96vw;--petal-drift:-45px;animation-delay:-7.2s;--petal-scale:.58;}
.upgrade-falling-petals>i.is-10{--petal-x:58vw;--petal-drift:-24px;animation-delay:-9.3s;--petal-scale:.62;}
@keyframes upgradePagePetalFall{
  0%{opacity:0;transform:translate3d(0,-6vh,0) rotate(0deg) scale(var(--petal-scale));}
  8%{opacity:.88;}
  76%{opacity:.86;}
  90%{opacity:0;transform:translate3d(calc(var(--petal-drift) * .7),98vh,0) rotate(calc(var(--petal-rot) * .85)) scale(var(--petal-scale));}
  100%{opacity:0;transform:translate3d(var(--petal-drift),112vh,0) rotate(var(--petal-rot)) scale(var(--petal-scale));}
}

.upgrade-page-garden,.upgrade-ambient-flower,.upgrade-falling-petals{pointer-events:none!important;}
.upgrade-page-garden.is-left{left:-165px!important;top:250px!important;}
.upgrade-page-garden.is-right{right:-165px!important;top:250px!important;}
.upgrade-page-garden.is-between{left:50%!important;translate:-50% 0!important;top:730px!important;z-index:4!important;}

.upgrade-catalog-panel.is-offers .upgrade-catalog-header>div>span{color:#fae686!important;text-shadow:0 0 10px rgba(250,230,134,.28),0 0 18px rgba(214,180,95,.22)!important;}
.upgrade-catalog-panel.is-targets .upgrade-catalog-header>div>span{color:#d8b6ff!important;text-shadow:0 0 10px rgba(216,182,255,.28),0 0 18px rgba(168,118,255,.2)!important;}

.upgrade-item-name,.upgrade-selection-tile>strong{margin-top:3px!important;line-height:1.05!important;}
.upgrade-item-value,.upgrade-selection-tile>small{margin-top:-1px!important;line-height:1!important;}
.upgrade-reward-drag-hint{font-size:9px!important;letter-spacing:.12em!important;max-width:82%!important;}

.upgrade-gil-offer{padding:10px 10px 8px!important;gap:8px!important;min-height:auto!important;}
.upgrade-gil-balance-row{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:10px!important;align-items:center!important;}
.upgrade-gil-balance-pill{display:inline-flex!important;align-items:center!important;gap:7px!important;min-height:36px!important;padding:0 10px!important;border:1px solid rgba(214,180,95,.2)!important;border-radius:999px!important;background:rgba(9,16,11,.78)!important;color:#fae686!important;box-shadow:inset 0 1px rgba(255,255,255,.06)!important;white-space:nowrap!important;}
.upgrade-gil-balance-pill img{width:16px!important;height:16px!important;object-fit:contain!important;filter:drop-shadow(0 0 5px rgba(250,230,134,.25));}
.upgrade-gil-balance-pill strong{font-size:12px!important;line-height:1!important;color:#fae686!important;}
.upgrade-gil-offer>label,.upgrade-gil-balance-row>label{display:grid!important;gap:5px!important;min-width:0!important;}
.upgrade-gil-balance-row>label>span{font-size:10px!important;letter-spacing:.12em!important;color:#d4c7b0!important;text-transform:uppercase!important;}
.upgrade-gil-balance-row input[type="number"]{min-height:34px!important;}

.upgrade-center-motion{display:grid!important;place-items:center!important;}
.upgrade-center-motion>i{display:none!important;}
.upgrade-center-motion::before,.upgrade-center-motion::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none;}
.upgrade-center-motion::before{width:255px;height:255px;border:1px dashed rgba(117,243,206,.28);box-shadow:0 0 22px rgba(117,243,206,.08);animation:upgradeCenterHaloSpin 10s linear infinite;}
.upgrade-center-motion::after{width:216px;height:216px;border:1px solid rgba(250,230,134,.12);box-shadow:0 0 40px rgba(250,230,134,.08),inset 0 0 35px rgba(117,243,206,.05);animation:upgradeCenterHaloPulse 2.8s ease-in-out infinite;}
.upgrade-center-motion>b{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:18px!important;opacity:.72!important;}
@keyframes upgradeCenterHaloSpin{to{transform:translateZ(0) rotate(360deg);}}
@keyframes upgradeCenterHaloPulse{50%{opacity:.92;transform:translate(-50%,-50%) scale(1.04);}}

/* Top-origin, reversed sweep feel for both success rings. */
.upgrade-chance-ring{transform:scaleX(-1)!important;transform-origin:center!important;}
.upgrade-animation-core-ring{transform:scaleX(-1) scale(.74)!important;transform-origin:center!important;}
.upgrade-result-overlay.phase-meter .upgrade-animation-core-ring{transform:scaleX(-1) scale(1)!important;}
.upgrade-result-overlay.phase-consume .upgrade-animation-core-ring{transform:scaleX(-1) scale(1)!important;}

.upgrade-selection-stack.is-target.is-single-target{display:grid!important;place-content:center!important;grid-template-columns:minmax(170px,220px)!important;grid-auto-rows:188px!important;min-height:240px!important;}
.upgrade-selection-stack.is-target.is-single-target .upgrade-selection-tile{grid-template-rows:104px 35px 18px!important;max-width:220px!important;justify-self:center!important;align-self:center!important;}
.upgrade-selection-stack.is-target.is-single-target .upgrade-selection-tile img{width:104px!important;height:104px!important;}
.upgrade-selection-tile.is-emphasized{box-shadow:0 0 24px rgba(214,180,95,.14),inset 0 1px rgba(255,255,255,.05)!important;}

.upgrade-catalog-panel.is-targets .upgrade-reward-card{position:relative;overflow:hidden!important;}
.upgrade-catalog-panel.is-targets .upgrade-reward-card::before{content:"";position:absolute;inset:auto -18% -42% -18%;height:75%;pointer-events:none;filter:blur(16px);opacity:.95;}
.upgrade-catalog-panel.is-targets .upgrade-reward-card.rarity-common::before{background:radial-gradient(circle,rgba(170,164,155,.34),transparent 70%);}
.upgrade-catalog-panel.is-targets .upgrade-reward-card.rarity-uncommon::before{background:radial-gradient(circle,rgba(86,183,127,.32),transparent 70%);}
.upgrade-catalog-panel.is-targets .upgrade-reward-card.rarity-rare::before{background:radial-gradient(circle,rgba(74,140,204,.32),transparent 70%);}
.upgrade-catalog-panel.is-targets .upgrade-reward-card.rarity-epic::before{background:radial-gradient(circle,rgba(132,64,188,.34),transparent 70%);}
.upgrade-catalog-panel.is-targets .upgrade-reward-card.rarity-legendary::before{background:radial-gradient(circle,rgba(250,230,134,.34),transparent 70%);}

.upgrade-final-result{display:grid!important;align-content:center!important;justify-items:center!important;gap:14px!important;}
.upgrade-final-result h2{order:1!important;margin:0!important;}
.upgrade-final-result>div{order:2!important;}
.upgrade-final-result p{order:3!important;margin:0 auto!important;max-width:720px!important;text-align:center!important;}
.upgrade-result-actions{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;}
.upgrade-animation-reward.is-final{display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;align-items:center!important;justify-items:center!important;padding-bottom:8px!important;overflow:visible!important;}
.upgrade-animation-reward-name{display:block!important;margin-top:8px!important;max-width:100%!important;font-size:13px!important;font-weight:800!important;line-height:1.15!important;text-align:center!important;text-wrap:balance!important;color:inherit!important;text-shadow:0 0 12px currentColor,0 2px 3px rgba(0,0,0,.9)!important;}
.upgrade-final-result.is-success .upgrade-animation-reward-name{color:#b9ffd4!important;}
.upgrade-final-result.is-failure .upgrade-animation-reward-name{color:#ffb2b2!important;}
.upgrade-final-result.is-failure .upgrade-animation-reward{filter:saturate(0) brightness(.72)!important;}
.upgrade-final-result.is-failure .upgrade-animation-slash{opacity:1!important;background:linear-gradient(90deg,transparent,rgba(255,40,40,.15) 8%,rgba(255,60,60,.96) 50%,rgba(255,40,40,.15) 92%,transparent)!important;box-shadow:0 0 18px rgba(255,58,58,.7)!important;}

.upgrade-result-overlay.phase-failure{background:radial-gradient(circle at center,rgba(76,6,12,.76),rgba(15,2,3,.98) 64%)!important;}
.upgrade-result-overlay.phase-failure::before{background:conic-gradient(from 0deg,transparent,rgba(255,68,68,.13),transparent 26%,rgba(255,173,84,.08),transparent 52%,rgba(163,16,33,.12),transparent 80%)!important;}
.upgrade-result-overlay.phase-failure .upgrade-result-backdrop-ornaments,
.upgrade-result-overlay.phase-failure .upgrade-result-celebration{filter:hue-rotate(-120deg) saturate(1.65) brightness(1.1)!important;opacity:.95!important;}
.upgrade-result-overlay.phase-failure .upgrade-animation-core-ring,
.upgrade-result-overlay.phase-failure .upgrade-animation-core-burst>i{filter:drop-shadow(0 0 16px rgba(255,80,80,.68))!important;}
.upgrade-result-overlay.phase-failure .upgrade-animation-core strong,
.upgrade-result-overlay.phase-failure .upgrade-final-result h2,
.upgrade-result-overlay.phase-failure .upgrade-final-result p,
.upgrade-result-overlay.phase-failure .upgrade-result-actions button{color:#ffd6d6!important;}

.upgrade-result-overlay.phase-success .upgrade-final-result h2{color:#f7f0d7!important;text-shadow:0 0 18px rgba(250,230,134,.35)!important;}
.upgrade-result-overlay.phase-failure .upgrade-final-result h2{color:#ffb8b8!important;text-shadow:0 0 18px rgba(255,88,88,.36)!important;}

@media(max-width:950px){
  .upgrade-page-garden.is-left{left:-138px!important;}.upgrade-page-garden.is-right{right:-138px!important;}
}
@media(max-width:700px){
  .upgrade-falling-petals>i{animation-duration:20s!important;}
}

/* Upgrade v6 — fix visible ambience, center panel petals, gil row, single desired reward, result layout */
.upgrade-page-shell,
.upgrade-top-intro,
.upgrade-main-grid,
.upgrade-offer-column,
.upgrade-target-column,
.upgrade-probability-column,
.upgrade-catalog-panel{overflow:visible!important;}

.upgrade-page-ambience{z-index:1!important;opacity:1!important;}
.upgrade-main-grid,.upgrade-catalog-grid,.upgrade-top-intro,.upgrade-top-nav{position:relative!important;z-index:3!important;}
.upgrade-falling-petals{z-index:2!important;opacity:1!important;}
.upgrade-falling-petals>i{display:block!important;animation-play-state:running!important;}
.upgrade-ambient-flower,.upgrade-ambient-spark{z-index:2!important;opacity:1!important;animation-duration:6.8s!important;}
.upgrade-page-garden{z-index:2!important;opacity:1!important;}

/* remove any old spinning petal elements from the chance circle area */
.upgrade-center-motion>i,
.upgrade-center-motion>span,
.upgrade-probability-panel .upgrade-center-motion>i,
.upgrade-probability-panel .upgrade-center-motion>span{display:none!important;opacity:0!important;visibility:hidden!important;}
.upgrade-center-motion::before,.upgrade-center-motion::after{display:block!important;}

/* stronger external decorative placement */
.upgrade-page-garden.is-left{left:-190px!important;top:215px!important;}
.upgrade-page-garden.is-right{right:-190px!important;top:215px!important;}
.upgrade-page-garden.is-between{top:760px!important;}
.upgrade-ambient-flower.is-a{left:-10px!important;top:170px!important;}
.upgrade-ambient-flower.is-b{right:-8px!important;top:440px!important;}
.upgrade-ambient-flower.is-c{left:2%!important;top:78%!important;}
.upgrade-ambient-flower.is-d{left:92%!important;top:64%!important;}
.upgrade-ambient-flower.is-e{left:14%!important;top:12%!important;}
.upgrade-ambient-flower.is-f{right:14%!important;top:16%!important;}

/* gil row */
.upgrade-gil-offer{padding:8px 10px 8px!important;}
.upgrade-gil-balance-row{grid-template-columns:minmax(118px,auto) minmax(0,1fr)!important;align-items:end!important;column-gap:12px!important;}
.upgrade-gil-balance-pill{min-height:28px!important;height:28px!important;padding:0 8px!important;gap:6px!important;align-self:center!important;}
.upgrade-gil-balance-pill img{width:14px!important;height:14px!important;max-width:14px!important;max-height:14px!important;flex:0 0 14px!important;display:block!important;}
.upgrade-gil-balance-pill strong{font-size:11px!important;line-height:1!important;}
.upgrade-gil-balance-row>label{align-self:stretch!important;}
.upgrade-gil-balance-row>label>span{margin-bottom:1px!important;}
.upgrade-gil-balance-row input[type="number"]{height:34px!important;padding:7px 10px!important;}

/* desired reward emphasized and centered */
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target{
  grid-template-columns:minmax(210px,260px)!important;
  grid-auto-rows:220px!important;
  min-height:260px!important;
  max-height:260px!important;
  justify-content:center!important;
  align-content:center!important;
  justify-items:center!important;
  padding-inline:0!important;
}
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target .upgrade-selection-tile{
  width:min(250px,100%)!important;
  min-height:220px!important;
  grid-template-rows:120px auto auto!important;
  padding:12px 12px 14px!important;
  border-radius:20px!important;
}
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target .upgrade-selection-tile img,
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target .upgrade-selection-tile .upgrade-item-art{
  width:118px!important;height:118px!important;
}
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target .upgrade-selection-tile>strong{font-size:13px!important;}
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target .upgrade-selection-tile>small{font-size:11px!important;}
.upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target .upgrade-selection-count{font-size:13px!important;}

/* final result layout within popup */
.upgrade-final-result{
  position:absolute!important;
  z-index:14!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  inset:auto!important;
  width:min(900px,90vw)!important;
  max-height:82vh!important;
  grid-template-rows:auto auto auto auto!important;
  justify-items:center!important;
  align-items:center!important;
  align-content:center!important;
  padding:18px 14px 10px!important;
}
.upgrade-final-result>h2{width:100%!important;text-align:center!important;margin:0 0 6px!important;align-self:end!important;}
.upgrade-final-result>div{width:min(760px,86vw)!important;max-height:42vh!important;overflow:auto!important;padding:12px!important;justify-self:center!important;}
.upgrade-final-result>p{width:min(720px,88vw)!important;text-align:center!important;margin:4px auto 0!important;}
.upgrade-final-result .upgrade-result-actions{
  position:static!important;
  transform:none!important;
  left:auto!important;
  bottom:auto!important;
  width:auto!important;
  margin-top:2px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
.upgrade-final-result.is-compact>div{align-content:center!important;}
.upgrade-final-result.is-compact.count-1>div{grid-template-columns:minmax(180px,240px)!important;}
.upgrade-final-result.is-compact.count-2>div{grid-template-columns:repeat(2,minmax(165px,220px))!important;}
.upgrade-final-result.is-compact.count-3>div{grid-template-columns:repeat(3,minmax(145px,200px))!important;}
.upgrade-final-result .upgrade-animation-reward{height:178px!important;}
.upgrade-final-result.is-compact .upgrade-animation-reward{height:210px!important;}
.upgrade-animation-reward-name{font-size:14px!important;max-width:120px!important;}

@media (max-width:700px){
  .upgrade-final-result{width:94vw!important;max-height:88vh!important;}
  .upgrade-final-result>div{max-height:38vh!important;}
  .upgrade-gil-balance-row{grid-template-columns:1fr!important;row-gap:8px!important;}
  .upgrade-gil-balance-pill{justify-self:start!important;}
  .upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target{grid-template-columns:minmax(180px,1fr)!important;}
}

/* Upgrade v7 — definitive layout/animation corrections. */
html body .view-upgrade .upgrade-page{overflow:visible!important;}
html body .view-upgrade .upgrade-page-ambience{
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  opacity:1!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-forge,
html body .view-upgrade .upgrade-catalogs,
html body .view-upgrade .upgrade-history,
html body .view-upgrade .upgrade-error-banner{
  position:relative!important;
  z-index:5!important;
}
html body .view-upgrade .upgrade-ambient-vine{display:none!important;}
html body .view-upgrade .upgrade-ambient-flower,
html body .view-upgrade .upgrade-ambient-spark,
html body .view-upgrade .upgrade-page-garden,
html body .view-upgrade .upgrade-falling-petals{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  animation-play-state:running!important;
}
html body .view-upgrade .upgrade-falling-petals{z-index:6!important;}
html body .view-upgrade .upgrade-falling-petals>i{
  display:block!important;
  visibility:visible!important;
  animation-name:upgradePagePetalFall!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-play-state:running!important;
}
html body .view-upgrade .upgrade-ambient-flower{
  z-index:7!important;
  animation-name:upgradeAmbientFloat!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
  animation-play-state:running!important;
}
html body .view-upgrade .upgrade-page-garden{z-index:6!important;animation-play-state:running!important;}

/* The chance ornament keeps its halo/star only; no rotating petals remain. */
html body .view-upgrade .upgrade-center-motion>i,
html body .view-upgrade .upgrade-center-motion>span{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-center-motion>b{display:block!important;}

/* Compact and stable Gil row. */
html body .view-upgrade .upgrade-gil-offer{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:7px!important;
  min-height:0!important;
  padding:8px 10px!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-gil-balance-row{
  display:grid!important;
  grid-template-columns:minmax(130px,max-content) minmax(0,1fr)!important;
  align-items:end!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
}
html body .view-upgrade .upgrade-gil-balance-pill{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-self:end!important;
  width:auto!important;
  max-width:190px!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 9px!important;
  gap:7px!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-gil-balance-pill>img{
  position:static!important;
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  max-width:18px!important;
  max-height:18px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
  border:0!important;
  background:transparent!important;
}
html body .view-upgrade .upgrade-gil-balance-pill>strong{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
  line-height:1!important;
}
html body .view-upgrade .upgrade-gil-balance-row>label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 140px!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  margin:0!important;
}
html body .view-upgrade .upgrade-gil-balance-row>label>span{
  margin:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html body .view-upgrade .upgrade-gil-balance-row input[type="number"]{
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  margin:0!important;
}

/* One desired reward fills the target panel and remains exactly centered. */
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:310px!important;
  max-height:310px!important;
  padding:12px!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target>.upgrade-selection-tile{
  display:grid!important;
  width:min(285px,92%)!important;
  min-width:220px!important;
  max-width:285px!important;
  height:265px!important;
  min-height:265px!important;
  max-height:265px!important;
  grid-template-rows:150px 42px 24px!important;
  align-items:center!important;
  justify-items:center!important;
  align-self:center!important;
  margin:auto!important;
  padding:14px!important;
  border-radius:22px!important;
}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target>.upgrade-selection-tile .upgrade-item-art{
  width:148px!important;
  height:148px!important;
  max-width:148px!important;
  max-height:148px!important;
  object-fit:contain!important;
}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target>.upgrade-selection-tile .upgrade-item-name{
  font-size:14px!important;
  line-height:1.15!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target>.upgrade-selection-tile .upgrade-item-value{font-size:12px!important;}

/* Final result is one centered composition: title, rewards, copy, actions. */
html body .upgrade-result-overlay .upgrade-final-result{
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(920px,92vw)!important;
  min-height:min(620px,84vh)!important;
  max-height:88vh!important;
  padding:24px 18px!important;
  gap:14px!important;
  overflow:visible!important;
}
html body .upgrade-result-overlay .upgrade-final-result>h2{
  position:static!important;
  inset:auto!important;
  order:1!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  text-align:center!important;
  align-self:center!important;
  line-height:.95!important;
}
html body .upgrade-result-overlay .upgrade-final-result>.upgrade-final-rewards{
  order:2!important;
  display:grid!important;
  place-content:center!important;
  justify-content:center!important;
  align-content:center!important;
  width:min(780px,88vw)!important;
  min-height:230px!important;
  max-height:420px!important;
  margin:0 auto!important;
  padding:12px!important;
  overflow:auto!important;
}
html body .upgrade-result-overlay .upgrade-final-result>p{
  position:static!important;
  order:3!important;
  width:min(720px,88vw)!important;
  margin:0 auto!important;
  padding:0!important;
  transform:none!important;
  text-align:center!important;
}
html body .upgrade-result-overlay .upgrade-final-result>.upgrade-result-actions{
  position:static!important;
  inset:auto!important;
  order:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  width:auto!important;
  margin:4px auto 0!important;
  padding:0!important;
  gap:12px!important;
  transform:none!important;
}
html body .upgrade-result-overlay .upgrade-final-result>.upgrade-result-actions button{min-width:170px!important;}

@media (prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-falling-petals>i{
    animation-name:upgradePagePetalFall!important;
    animation-duration:18s!important;
    animation-iteration-count:infinite!important;
  }
  html body .view-upgrade .upgrade-ambient-flower,
  html body .view-upgrade .upgrade-ambient-spark{
    animation-name:upgradeAmbientFloat!important;
    animation-duration:8s!important;
    animation-iteration-count:infinite!important;
  }
  html body .view-upgrade .upgrade-center-motion::before{animation:upgradeCenterHaloSpin 12s linear infinite!important;}
  html body .view-upgrade .upgrade-center-motion::after{animation:upgradeCenterHaloPulse 3.2s ease-in-out infinite!important;}
}

@media(max-width:700px){
  html body .view-upgrade .upgrade-gil-balance-row{grid-template-columns:1fr!important;align-items:stretch!important;}
  html body .view-upgrade .upgrade-gil-balance-row>label{grid-template-columns:1fr!important;}
  html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.upgrade-selection-grid.is-target.is-single-target{min-height:280px!important;max-height:280px!important;}
  html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target>.upgrade-selection-tile{width:min(250px,92%)!important;height:240px!important;min-height:240px!important;grid-template-rows:132px 38px 22px!important;}
  html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target>.upgrade-selection-tile .upgrade-item-art{width:130px!important;height:130px!important;}
  html body .upgrade-result-overlay .upgrade-final-result{min-height:78vh!important;width:94vw!important;padding:16px 10px!important;}
  html body .upgrade-result-overlay .upgrade-final-result>.upgrade-final-rewards{max-height:42vh!important;}
}

/* Upgrade v8 — clean chance dial, synchronized progress and restored ambience. */
html body .view-upgrade .upgrade-ambient-vine{
  display:block!important;
  visibility:visible!important;
  opacity:.9!important;
  animation:upgradeAmbientSway 9s ease-in-out infinite!important;
  animation-play-state:running!important;
}
html body .view-upgrade .upgrade-ambient-vine.is-left{left:-42px!important;}
html body .view-upgrade .upgrade-ambient-vine.is-right{right:-42px!important;}
html body .view-upgrade .upgrade-ambient-vine ellipse{display:none!important;}
html body .view-upgrade .upgrade-ambient-flower,
html body .view-upgrade .upgrade-ambient-spark,
html body .view-upgrade .upgrade-page-garden,
html body .view-upgrade .upgrade-falling-petals{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  animation-play-state:running!important;
}

/* Remove the extra gold/green rotating circles while preserving the central star. */
html body .view-upgrade .upgrade-center-motion::before,
html body .view-upgrade .upgrade-center-motion::after,
html body .view-upgrade .upgrade-chance-ring::after,
html body .view-upgrade .upgrade-chance-ring>i{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-center-motion>b{
  display:block!important;
  opacity:.72!important;
  animation:upgradeCenterStar 2.6s ease-in-out infinite!important;
}

/* Both meters begin at twelve o'clock and fill clockwise, returning to the top from the left. */
html body .view-upgrade .upgrade-chance-ring{
  background:conic-gradient(from -90deg,
    hsl(var(--upgrade-chance-hue) 78% 52%) 0 var(--upgrade-chance),
    rgba(255,255,255,.06) var(--upgrade-chance) 100%)!important;
  transform:none!important;
  transform-origin:center!important;
  animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-ring{
  background:conic-gradient(from -90deg,
    hsl(var(--upgrade-result-hue) 82% 52%) 0 var(--upgrade-result-chance),
    rgba(255,255,255,.055) var(--upgrade-result-chance) 100%)!important;
  transform:scale(.82)!important;
  transform-origin:center!important;
  opacity:.72!important;
  animation:none!important;
  transition:none!important;
}
html body .upgrade-result-overlay.phase-offers .upgrade-animation-core-ring,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-core-ring{
  opacity:.86!important;
  transform:scale(.9)!important;
}
html body .upgrade-result-overlay.phase-meter .upgrade-animation-core-ring{
  opacity:1!important;
  transform:scale(1)!important;
  animation:none!important;
}
html body .upgrade-result-overlay.phase-consume .upgrade-animation-core-ring{
  opacity:1!important;
  transform:scale(1.12)!important;
  animation:none!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-ring{
  animation:upgradeCorePop .72s ease-out both!important;
}
html body .upgrade-result-overlay .upgrade-animation-core>strong{
  min-width:150px!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
}

/* Result palette corrections. */
html body .upgrade-result-overlay.phase-success .upgrade-final-result.is-success>h2{
  color:#75f3ce!important;
  text-shadow:0 0 14px rgba(117,243,206,.8),0 0 42px rgba(75,190,97,.55)!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-final-result.is-failure>h2{
  color:#ff7771!important;
  text-shadow:0 0 15px #b51818,0 0 48px rgba(255,35,35,.55)!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-final-result .upgrade-animation-reward{
  filter:none!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-final-result .upgrade-animation-reward img,
html body .upgrade-result-overlay.phase-failure .upgrade-final-result .upgrade-animation-gil-symbol{
  filter:grayscale(1) brightness(.52) contrast(1.15)!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-final-result .upgrade-animation-slash{
  display:block!important;
  opacity:1!important;
  background:linear-gradient(90deg,
    transparent 0%,rgba(255,30,30,.16) 8%,#ff2f2f 43%,#ff6a5f 50%,#ff2f2f 57%,rgba(255,30,30,.16) 92%,transparent 100%)!important;
  box-shadow:0 0 8px #ff3030,0 0 22px rgba(255,35,35,.88)!important;
  filter:none!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-final-result>.upgrade-result-actions button{
  color:#172018!important;
  -webkit-text-fill-color:#172018!important;
  text-shadow:none!important;
}

@media (prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-ambient-vine{animation:upgradeAmbientSway 12s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-falling-petals>i{animation:upgradePagePetalFall 18s linear infinite!important;}
  html body .view-upgrade .upgrade-center-motion::before,
  html body .view-upgrade .upgrade-center-motion::after{display:none!important;animation:none!important;}
}

/* Upgrade v9 — scattered ambient petals, top-origin meters and synchronized consume phase. */
html body .view-upgrade .upgrade-page-ambience{
  z-index:7!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-forge,
html body .view-upgrade .upgrade-catalogs,
html body .view-upgrade .upgrade-history,
html body .view-upgrade .upgrade-error-banner{
  z-index:5!important;
}
html body .view-upgrade .upgrade-page-garden,
html body .view-upgrade .upgrade-ambient-flower,
html body .view-upgrade .upgrade-ambient-spark{
  z-index:8!important;
  pointer-events:none!important;
}

/* Every petal owns a distinct timeline, preventing a horizontal row from falling together. */
html body .view-upgrade .upgrade-falling-petals{
  z-index:9!important;
  inset:-5vh 0 0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-falling-petals>i{
  --petal-duration:17s;
  --petal-delay:-2s;
  --petal-x:50vw;
  --petal-drift-a:24px;
  --petal-drift-b:-15px;
  --petal-scale:.8;
  top:-14vh!important;
  left:var(--petal-x)!important;
  opacity:0;
  animation:upgradePagePetalFallV9 var(--petal-duration) linear var(--petal-delay) infinite!important;
  animation-play-state:running!important;
  will-change:transform,opacity;
}
html body .view-upgrade .upgrade-falling-petals>i.is-1{--petal-x:3vw;--petal-duration:18.7s;--petal-delay:-13.2s;--petal-drift-a:42px;--petal-drift-b:14px;--petal-scale:.62;}
html body .view-upgrade .upgrade-falling-petals>i.is-2{--petal-x:14vw;--petal-duration:14.9s;--petal-delay:-4.6s;--petal-drift-a:-31px;--petal-drift-b:18px;--petal-scale:.88;}
html body .view-upgrade .upgrade-falling-petals>i.is-3{--petal-x:25vw;--petal-duration:21.4s;--petal-delay:-17.8s;--petal-drift-a:26px;--petal-drift-b:-39px;--petal-scale:.54;}
html body .view-upgrade .upgrade-falling-petals>i.is-4{--petal-x:37vw;--petal-duration:16.3s;--petal-delay:-8.1s;--petal-drift-a:-18px;--petal-drift-b:37px;--petal-scale:.76;}
html body .view-upgrade .upgrade-falling-petals>i.is-5{--petal-x:48vw;--petal-duration:19.8s;--petal-delay:-1.7s;--petal-drift-a:35px;--petal-drift-b:-22px;--petal-scale:.95;}
html body .view-upgrade .upgrade-falling-petals>i.is-6{--petal-x:61vw;--petal-duration:15.7s;--petal-delay:-11.9s;--petal-drift-a:-38px;--petal-drift-b:11px;--petal-scale:.68;}
html body .view-upgrade .upgrade-falling-petals>i.is-7{--petal-x:72vw;--petal-duration:22.1s;--petal-delay:-6.2s;--petal-drift-a:19px;--petal-drift-b:-44px;--petal-scale:.52;}
html body .view-upgrade .upgrade-falling-petals>i.is-8{--petal-x:83vw;--petal-duration:17.2s;--petal-delay:-15.4s;--petal-drift-a:-24px;--petal-drift-b:33px;--petal-scale:.84;}
html body .view-upgrade .upgrade-falling-petals>i.is-9{--petal-x:94vw;--petal-duration:20.6s;--petal-delay:-9.7s;--petal-drift-a:45px;--petal-drift-b:-17px;--petal-scale:.59;}
html body .view-upgrade .upgrade-falling-petals>i.is-10{--petal-x:55vw;--petal-duration:13.8s;--petal-delay:-3.3s;--petal-drift-a:-15px;--petal-drift-b:29px;--petal-scale:.72;}
@keyframes upgradePagePetalFallV9{
  0%{opacity:0;transform:translate3d(0,-8vh,0) rotate(0deg) scale(var(--petal-scale));}
  7%{opacity:.86;}
  28%{transform:translate3d(var(--petal-drift-a),28vh,0) rotate(145deg) scale(var(--petal-scale));}
  55%{opacity:.9;transform:translate3d(var(--petal-drift-b),61vh,0) rotate(310deg) scale(var(--petal-scale));}
  79%{opacity:.68;transform:translate3d(calc(var(--petal-drift-a) * .55),88vh,0) rotate(470deg) scale(var(--petal-scale));}
  91%{opacity:0;}
  100%{opacity:0;transform:translate3d(var(--petal-drift-b),112vh,0) rotate(610deg) scale(var(--petal-scale));}
}

/* CSS conic gradients start at twelve o'clock at 0deg. */
html body .view-upgrade .upgrade-chance-ring{
  background:conic-gradient(from 0deg,
    hsl(var(--upgrade-chance-hue) 78% 52%) 0 var(--upgrade-chance),
    rgba(255,255,255,.06) var(--upgrade-chance) 100%)!important;
  transform:none!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-ring{
  background:conic-gradient(from 0deg,
    hsl(var(--upgrade-result-hue) 82% 52%) 0 var(--upgrade-result-chance),
    rgba(255,255,255,.055) var(--upgrade-result-chance) 100%)!important;
}

/* Percentage typography remains the same size throughout charge, hold and drain. */
html body .upgrade-result-overlay .upgrade-animation-core>strong,
html body .upgrade-result-overlay.phase-offers .upgrade-animation-core>strong,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-core>strong,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-core>strong,
html body .upgrade-result-overlay.phase-consume .upgrade-animation-core>strong{
  min-width:180px!important;
  font-size:clamp(38px,4vw,52px)!important;
  line-height:1!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  font-variant-numeric:tabular-nums!important;
}

/* Failure keeps the falling motion but uses red petals/embers rather than blue bars. */
html body .upgrade-result-overlay.phase-failure .upgrade-result-celebration{
  filter:none!important;
  opacity:1!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-result-celebration>i{
  width:11px!important;
  height:20px!important;
  border-radius:72% 28% 76% 24% / 40% 64% 36% 60%!important;
  background:linear-gradient(145deg,#ffb0a9 0%,#ff4b47 44%,#8d0712 100%)!important;
  color:#ff4545!important;
  box-shadow:0 0 9px rgba(255,45,45,.72),0 0 20px rgba(132,0,14,.5)!important;
  filter:none!important;
}
html body .upgrade-result-overlay.phase-failure .upgrade-result-celebration>i:nth-child(even){
  width:8px!important;
  height:15px!important;
  border-radius:35% 65% 28% 72% / 68% 32% 70% 30%!important;
  background:linear-gradient(155deg,#ff8179,#a50818)!important;
}

@media (prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-falling-petals>i{
    animation:upgradePagePetalFallV9 var(--petal-duration) linear var(--petal-delay) infinite!important;
  }
}

/* Upgrade v10 — ornaments only in free page areas, fixed result core and identical-reward guard. */
html body .view-upgrade .upgrade-page-ambience{
  z-index:3!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-forge,
html body .view-upgrade .upgrade-catalogs,
html body .view-upgrade .upgrade-history,
html body .view-upgrade .upgrade-error-banner{
  position:relative!important;
  z-index:5!important;
}
html body .view-upgrade .upgrade-page-garden,
html body .view-upgrade .upgrade-ambient-flower,
html body .view-upgrade .upgrade-ambient-spark,
html body .view-upgrade .upgrade-falling-petals{
  z-index:3!important;
  pointer-events:none!important;
}
/* Side foliage lives in the open hero edges and the narrow gap between sections,
   never over the interactive forge/catalog panels. */
html body .view-upgrade .upgrade-page-garden.is-left{
  left:10px!important;
  top:18px!important;
  transform:scale(.62) rotate(-8deg)!important;
  transform-origin:left top!important;
}
html body .view-upgrade .upgrade-page-garden.is-right{
  right:10px!important;
  top:18px!important;
  transform:scaleX(-1) scale(.62) rotate(-8deg)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-page-garden.is-between{
  left:50%!important;
  top:758px!important;
  width:330px!important;
  height:72px!important;
  transform:translateX(-50%) scale(.82)!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-ambient-flower.is-a{left:3%!important;top:74px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-b{right:3%!important;top:116px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-c{left:48%!important;top:756px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-d{left:7%!important;top:178px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-e{right:7%!important;top:56px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-f{right:46%!important;top:770px!important;}

/* Matching names make the exchange invalid and the dial remains at zero. */
html body .view-upgrade .upgrade-probability-column>p.upgrade-identical-warning{
  color:#ff9b94!important;
  font-weight:800!important;
  text-shadow:0 0 10px rgba(255,65,65,.26)!important;
}
html body .view-upgrade .upgrade-probability-column:has(>p.upgrade-identical-warning) .upgrade-chance-dial{
  box-shadow:0 0 34px rgba(255,64,64,.18),inset 0 0 28px rgba(94,8,8,.18)!important;
}
html body .view-upgrade .upgrade-probability-column:has(>p.upgrade-identical-warning) .upgrade-chance-ring{
  background:conic-gradient(from 0deg,rgba(255,255,255,.055) 0 100%)!important;
  filter:none!important;
}

/* The animation core keeps one physical size through charge, hold, drain and burst. */
html body .upgrade-result-overlay .upgrade-animation-core{
  --upgrade-fixed-core-size:clamp(180px,22vw,286px);
  position:relative!important;
  min-height:360px!important;
  isolation:isolate!important;
}
html body .upgrade-result-overlay .upgrade-animation-core::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:50%!important;
  width:calc(var(--upgrade-fixed-core-size) - 42px)!important;
  aspect-ratio:1!important;
  translate:-50% -50%!important;
  border-radius:50%!important;
  border:1px solid rgba(250,230,134,.16)!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(117,243,206,.11),transparent 46%),
    repeating-conic-gradient(from 0deg,rgba(250,230,134,.035) 0 3deg,transparent 3deg 18deg),
    radial-gradient(circle,#15251a 0 54%,#0b140e 72%,#07100a 100%)!important;
  box-shadow:inset 0 0 35px rgba(117,243,206,.07),0 0 32px rgba(0,0,0,.5)!important;
  pointer-events:none!important;
}
html body .upgrade-result-overlay .upgrade-animation-core::after{
  content:"✦"!important;
  position:absolute!important;
  z-index:1!important;
  left:50%!important;
  top:calc(50% - (var(--upgrade-fixed-core-size) / 2) + 13px)!important;
  translate:-50% -50%!important;
  color:#fae686!important;
  font-size:13px!important;
  text-shadow:0 0 9px rgba(250,230,134,.75)!important;
  pointer-events:none!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-ring,
html body .upgrade-result-overlay.phase-offers .upgrade-animation-core-ring,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-core-ring,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-core-ring,
html body .upgrade-result-overlay.phase-consume .upgrade-animation-core-ring{
  z-index:2!important;
  width:var(--upgrade-fixed-core-size)!important;
  height:var(--upgrade-fixed-core-size)!important;
  aspect-ratio:1!important;
  opacity:1!important;
  transform:none!important;
  scale:1!important;
  rotate:0deg!important;
  animation:none!important;
  transition:none!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-ring{
  width:var(--upgrade-fixed-core-size)!important;
  height:var(--upgrade-fixed-core-size)!important;
  transform:none!important;
  scale:1!important;
  animation:upgradeCoreFixedBurst .72s ease-out both!important;
}
@keyframes upgradeCoreFixedBurst{
  0%{opacity:1;filter:brightness(1.15) drop-shadow(0 0 18px rgba(250,230,134,.45));}
  58%{opacity:.78;filter:brightness(1.8) drop-shadow(0 0 30px rgba(250,230,134,.75));}
  100%{opacity:0;filter:brightness(2.2) blur(8px);}
}
html body .upgrade-result-overlay .upgrade-animation-core-burst{
  z-index:5!important;
  width:calc(var(--upgrade-fixed-core-size) + 38px)!important;
  height:calc(var(--upgrade-fixed-core-size) + 38px)!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:50%!important;
  width:calc(var(--upgrade-fixed-core-size) + 48px)!important;
  aspect-ratio:1!important;
  translate:-50% -50%!important;
  pointer-events:none!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments>i{
  position:absolute!important;
  width:30px!important;
  height:10px!important;
  border:1px solid rgba(250,230,134,.38)!important;
  clip-path:polygon(0 50%,24% 5%,76% 5%,100% 50%,76% 95%,24% 95%)!important;
  background:linear-gradient(90deg,rgba(22,50,23,.82),rgba(250,230,134,.2),rgba(22,50,23,.82))!important;
  box-shadow:0 0 12px rgba(250,230,134,.16)!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments>i:nth-child(1){left:50%;top:0;translate:-50% -50%;}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments>i:nth-child(2){right:0;top:50%;translate:50% -50%;rotate:90deg;}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments>i:nth-child(3){left:50%;bottom:0;translate:-50% 50%;}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments>i:nth-child(4){left:0;top:50%;translate:-50% -50%;rotate:90deg;}
html body .upgrade-result-overlay .upgrade-animation-core-ornaments>b{
  position:absolute!important;
  right:11%!important;
  top:10%!important;
  color:#75f3ce!important;
  font-size:12px!important;
  text-shadow:0 0 10px rgba(117,243,206,.7)!important;
  animation:upgradeCoreOrnamentTwinkle 2.8s ease-in-out infinite!important;
}
@keyframes upgradeCoreOrnamentTwinkle{50%{opacity:.35;filter:brightness(1.5);}}
html body .upgrade-result-overlay .upgrade-animation-core>strong,
html body .upgrade-result-overlay .upgrade-animation-core>small{
  z-index:6!important;
}

@media(max-width:700px){
  html body .view-upgrade .upgrade-page-garden.is-left,
  html body .view-upgrade .upgrade-page-garden.is-right{display:none!important;}
  html body .view-upgrade .upgrade-page-garden.is-between{top:740px!important;width:250px!important;}
  html body .upgrade-result-overlay .upgrade-animation-core{--upgrade-fixed-core-size:174px;min-height:180px!important;}
}

/* Upgrade v11 — keep botanical ornaments strictly in the side gutters and
   break the result core into individual shards before revealing the outcome. */
html body .view-upgrade .upgrade-page-ambience{
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-page-garden.is-left,
html body .view-upgrade .upgrade-page-garden.is-right{
  top:214px!important;
  width:58px!important;
  height:430px!important;
  overflow:hidden!important;
  opacity:.96!important;
}
html body .view-upgrade .upgrade-page-garden.is-left{
  left:0!important;
  right:auto!important;
  transform:scale(.54) rotate(-8deg)!important;
  transform-origin:left top!important;
}
html body .view-upgrade .upgrade-page-garden.is-right{
  right:0!important;
  left:auto!important;
  transform:scaleX(-1) scale(.54) rotate(-8deg)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-page-garden.is-between{
  left:auto!important;
  right:0!important;
  top:780px!important;
  width:82px!important;
  height:120px!important;
  overflow:hidden!important;
  transform:scale(.66)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-ambient-flower.is-a{left:8px!important;top:94px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-b{right:8px!important;top:138px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-c{left:10px!important;top:720px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-d{left:9px!important;top:540px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-e{right:9px!important;top:66px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-f{right:10px!important;top:742px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-a{left:12px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-b{right:12px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-c{left:13px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-d{right:13px!important;}

html body .upgrade-result-overlay .upgrade-animation-core-fragments{
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:50%!important;
  width:var(--upgrade-fixed-core-size)!important;
  height:var(--upgrade-fixed-core-size)!important;
  translate:-50% -50%!important;
  pointer-events:none!important;
  opacity:0!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i{
  --fragment-angle:0deg;
  --fragment-distance:74px;
  --fragment-drift:0px;
  --fragment-turn:95deg;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:19px!important;
  height:35px!important;
  margin:-17px 0 0 -9px!important;
  border:1px solid rgba(250,230,134,.58)!important;
  border-radius:42% 58% 34% 66% / 62% 38% 62% 38%!important;
  clip-path:polygon(14% 0,88% 9%,100% 62%,67% 100%,4% 84%,0 27%)!important;
  background:
    linear-gradient(145deg,rgba(250,230,134,.92),rgba(75,190,97,.74) 54%,rgba(22,50,23,.96))!important;
  box-shadow:0 0 11px rgba(250,230,134,.34),inset 0 0 8px rgba(255,255,255,.13)!important;
  opacity:0!important;
  transform-origin:center!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(1){--fragment-delay:0.000s;--fragment-angle:0deg;--fragment-distance:82px;--fragment-drift:6px;--fragment-turn:110deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(2){--fragment-delay:0.010s;--fragment-angle:22.5deg;--fragment-distance:96px;--fragment-drift:-8px;--fragment-turn:-135deg;width:14px!important;height:29px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(3){--fragment-delay:0.020s;--fragment-angle:45deg;--fragment-distance:76px;--fragment-drift:12px;--fragment-turn:165deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(4){--fragment-delay:0.030s;--fragment-angle:67.5deg;--fragment-distance:108px;--fragment-drift:-5px;--fragment-turn:-105deg;width:16px!important;height:31px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(5){--fragment-delay:0.040s;--fragment-angle:90deg;--fragment-distance:88px;--fragment-drift:9px;--fragment-turn:145deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(6){--fragment-delay:0.050s;--fragment-angle:112.5deg;--fragment-distance:101px;--fragment-drift:-11px;--fragment-turn:-170deg;width:13px!important;height:27px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(7){--fragment-delay:0.060s;--fragment-angle:135deg;--fragment-distance:79px;--fragment-drift:4px;--fragment-turn:120deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(8){--fragment-delay:0.070s;--fragment-angle:157.5deg;--fragment-distance:112px;--fragment-drift:10px;--fragment-turn:-150deg;width:15px!important;height:32px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(9){--fragment-delay:0.080s;--fragment-angle:180deg;--fragment-distance:86px;--fragment-drift:-7px;--fragment-turn:180deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(10){--fragment-delay:0.015s;--fragment-angle:202.5deg;--fragment-distance:105px;--fragment-drift:12px;--fragment-turn:-125deg;width:14px!important;height:28px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(11){--fragment-delay:0.035s;--fragment-angle:225deg;--fragment-distance:81px;--fragment-drift:-10px;--fragment-turn:138deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(12){--fragment-delay:0.055s;--fragment-angle:247.5deg;--fragment-distance:114px;--fragment-drift:5px;--fragment-turn:-175deg;width:16px!important;height:30px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(13){--fragment-delay:0.075s;--fragment-angle:270deg;--fragment-distance:91px;--fragment-drift:-12px;--fragment-turn:152deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(14){--fragment-delay:0.025s;--fragment-angle:292.5deg;--fragment-distance:106px;--fragment-drift:8px;--fragment-turn:-115deg;width:13px!important;height:27px!important;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(15){--fragment-delay:0.045s;--fragment-angle:315deg;--fragment-distance:84px;--fragment-drift:-4px;--fragment-turn:172deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(16){--fragment-delay:0.065s;--fragment-angle:337.5deg;--fragment-distance:110px;--fragment-drift:11px;--fragment-turn:-145deg;width:15px!important;height:31px!important;}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-fragments{
  opacity:1!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-fragments>i{
  animation:upgradeCoreShardBreak .96s cubic-bezier(.12,.72,.18,1) both!important;
  animation-delay:var(--fragment-delay,0s)!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core::before{
  animation:upgradeCoreBodyFracture .88s ease-out both!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-ornaments{
  animation:upgradeCoreOrnamentScatter .8s ease-out both!important;
}
@keyframes upgradeCoreShardBreak{
  0%{
    opacity:0;
    transform:rotate(var(--fragment-angle)) translateY(calc((var(--upgrade-fixed-core-size) / -2) + 25px)) rotate(0deg) scale(.62);
    filter:brightness(1.6) blur(.2px);
  }
  13%{opacity:1;}
  58%{
    opacity:1;
    transform:rotate(var(--fragment-angle)) translateY(calc((var(--upgrade-fixed-core-size) / -2) - (var(--fragment-distance) * .55))) translateX(calc(var(--fragment-drift) * .55)) rotate(calc(var(--fragment-turn) * .55)) scale(.88);
    filter:brightness(1.35) drop-shadow(0 0 8px rgba(250,230,134,.44));
  }
  100%{
    opacity:0;
    transform:rotate(var(--fragment-angle)) translateY(calc((var(--upgrade-fixed-core-size) / -2) - var(--fragment-distance))) translateX(var(--fragment-drift)) rotate(var(--fragment-turn)) scale(.24);
    filter:brightness(1.9) blur(3px);
  }
}
@keyframes upgradeCoreBodyFracture{
  0%,18%{opacity:1;filter:brightness(1);clip-path:circle(50% at 50% 50%);}
  48%{opacity:.82;filter:brightness(1.8);clip-path:polygon(0 0,48% 0,52% 8%,100% 0,100% 48%,92% 53%,100% 100%,53% 100%,48% 92%,0 100%,0 52%,8% 48%);}
  100%{opacity:0;filter:brightness(2.1) blur(6px);clip-path:polygon(42% 42%,58% 42%,58% 58%,42% 58%);}
}
@keyframes upgradeCoreOrnamentScatter{
  0%{opacity:1;transform:scale(1);filter:brightness(1);}
  55%{opacity:.75;transform:scale(1.08);filter:brightness(1.7);}
  100%{opacity:0;transform:scale(1.34) rotate(16deg);filter:blur(5px);}
}

@media(max-width:700px){
  html body .view-upgrade .upgrade-page-garden.is-between{display:none!important;}
  html body .upgrade-result-overlay .upgrade-animation-core-fragments>i{width:14px!important;height:27px!important;}
}
/* Upgrade v12 — side-gutter decorations, staged labels and physical core shatter. */
html body .view-upgrade .upgrade-ambient-vine{
  width:170px!important;
  opacity:.82!important;
  overflow:hidden!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-ambient-vine.is-left{
  left:-142px!important;
  right:auto!important;
}
html body .view-upgrade .upgrade-ambient-vine.is-right{
  right:-142px!important;
  left:auto!important;
}
html body .view-upgrade .upgrade-page-garden.is-left,
html body .view-upgrade .upgrade-page-garden.is-right{
  width:130px!important;
  height:450px!important;
  top:214px!important;
  opacity:.94!important;
  overflow:hidden!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-page-garden.is-left{
  left:-104px!important;
  transform:scale(.62) rotate(-8deg)!important;
  transform-origin:left top!important;
}
html body .view-upgrade .upgrade-page-garden.is-right{
  right:-104px!important;
  transform:scaleX(-1) scale(.62) rotate(-8deg)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-page-garden.is-between{
  left:auto!important;
  right:-76px!important;
  top:760px!important;
  width:104px!important;
  height:140px!important;
  overflow:hidden!important;
  transform:scale(.72)!important;
  transform-origin:right top!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-ambient-flower.is-a{left:12px!important;top:100px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-b{right:12px!important;top:146px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-c{left:14px!important;top:730px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-d{left:13px!important;top:550px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-e{right:13px!important;top:76px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-f{right:14px!important;top:752px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-a{left:18px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-b{right:18px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-c{left:20px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-d{right:20px!important;}

html body .upgrade-result-overlay .upgrade-animation-side-title{
  --upgrade-side-title-delay:.9s;
  position:absolute!important;
  z-index:15!important;
  left:50%!important;
  top:clamp(4vh,7.5%,8vh)!important;
  translate:-50% 0!important;
  width:max-content!important;
  max-width:92%!important;
  margin:0!important;
  opacity:0!important;
  pointer-events:none!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(21px,2.1vw,36px)!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  filter:blur(7px)!important;
}
html body .upgrade-result-overlay .upgrade-animation-side-title.is-offer-title{
  color:#fae686!important;
  text-shadow:0 0 8px rgba(250,230,134,.72),0 0 22px rgba(214,180,95,.48),0 2px 3px rgba(0,0,0,.92)!important;
}
html body .upgrade-result-overlay .upgrade-animation-side-title.is-target-title{
  color:#cfb0ff!important;
  text-shadow:0 0 8px rgba(207,176,255,.74),0 0 22px rgba(140,88,224,.5),0 2px 3px rgba(0,0,0,.92)!important;
}
html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title{
  animation:upgradeSideTitleIn 1.05s ease var(--upgrade-side-title-delay) both!important;
}
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title.is-offer-title,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title.is-target-title{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title{
  animation:upgradeSideTitleIn 1.05s ease var(--upgrade-side-title-delay) both!important;
}
html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title{
  animation:upgradeSideTitleOut .62s ease both!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-side-title,
html body .upgrade-result-overlay.phase-success .upgrade-animation-side-title,
html body .upgrade-result-overlay.phase-failure .upgrade-animation-side-title{
  opacity:0!important;
  visibility:hidden!important;
}
@keyframes upgradeSideTitleIn{
  0%{opacity:0;filter:blur(8px);transform:translateY(12px) scale(.96);letter-spacing:.14em;}
  100%{opacity:1;filter:none;transform:none;letter-spacing:.06em;}
}
@keyframes upgradeSideTitleOut{
  0%{opacity:1;filter:none;transform:none;}
  100%{opacity:0;filter:blur(7px);transform:translateY(-10px) scale(.97);}
}

html body .upgrade-result-overlay .upgrade-animation-core-fragments{
  width:100vw!important;
  height:100vh!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  translate:none!important;
  overflow:visible!important;
  opacity:0!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i{
  --fragment-start-x:0px;
  --fragment-start-y:-118px;
  --fragment-end-x:0vw;
  --fragment-end-y:-48vh;
  --fragment-turn:420deg;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:clamp(14px,1.25vw,23px)!important;
  height:clamp(25px,2.25vw,42px)!important;
  margin:0!important;
  opacity:0!important;
  translate:calc(-50% + var(--fragment-start-x)) calc(-50% + var(--fragment-start-y))!important;
  transform:rotate(0deg) scale(.82)!important;
  transform-origin:center!important;
  border:1px solid rgba(250,230,134,.7)!important;
  border-radius:42% 58% 34% 66% / 62% 38% 62% 38%!important;
  clip-path:polygon(8% 10%,62% 0,100% 31%,86% 79%,42% 100%,0 72%)!important;
  background:linear-gradient(145deg,rgba(250,230,134,.98),rgba(75,190,97,.82) 52%,rgba(22,50,23,.98))!important;
  box-shadow:0 0 12px rgba(250,230,134,.5),0 0 24px rgba(75,190,97,.22),inset 0 0 8px rgba(255,255,255,.18)!important;
  will-change:translate,transform,opacity,filter!important;
}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(1){--fragment-start-x:0px;--fragment-start-y:-120px;--fragment-end-x:-7vw;--fragment-end-y:-55vh;--fragment-turn:530deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(2){--fragment-start-x:37px;--fragment-start-y:-114px;--fragment-end-x:15vw;--fragment-end-y:-49vh;--fragment-turn:-610deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(3){--fragment-start-x:70px;--fragment-start-y:-97px;--fragment-end-x:31vw;--fragment-end-y:-37vh;--fragment-turn:690deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(4){--fragment-start-x:97px;--fragment-start-y:-70px;--fragment-end-x:45vw;--fragment-end-y:-19vh;--fragment-turn:-575deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(5){--fragment-start-x:114px;--fragment-start-y:-37px;--fragment-end-x:50vw;--fragment-end-y:4vh;--fragment-turn:640deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(6){--fragment-start-x:120px;--fragment-start-y:0px;--fragment-end-x:47vw;--fragment-end-y:30vh;--fragment-turn:-720deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(7){--fragment-start-x:114px;--fragment-start-y:37px;--fragment-end-x:37vw;--fragment-end-y:52vh;--fragment-turn:590deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(8){--fragment-start-x:97px;--fragment-start-y:70px;--fragment-end-x:20vw;--fragment-end-y:61vh;--fragment-turn:-680deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(9){--fragment-start-x:70px;--fragment-start-y:97px;--fragment-end-x:5vw;--fragment-end-y:66vh;--fragment-turn:760deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(10){--fragment-start-x:37px;--fragment-start-y:114px;--fragment-end-x:-13vw;--fragment-end-y:61vh;--fragment-turn:-620deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(11){--fragment-start-x:0px;--fragment-start-y:120px;--fragment-end-x:-29vw;--fragment-end-y:55vh;--fragment-turn:700deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(12){--fragment-start-x:-37px;--fragment-start-y:114px;--fragment-end-x:-44vw;--fragment-end-y:39vh;--fragment-turn:-760deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(13){--fragment-start-x:-70px;--fragment-start-y:97px;--fragment-end-x:-51vw;--fragment-end-y:15vh;--fragment-turn:650deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(14){--fragment-start-x:-97px;--fragment-start-y:70px;--fragment-end-x:-48vw;--fragment-end-y:-10vh;--fragment-turn:-690deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(15){--fragment-start-x:-114px;--fragment-start-y:37px;--fragment-end-x:-40vw;--fragment-end-y:-32vh;--fragment-turn:730deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(16){--fragment-start-x:-120px;--fragment-start-y:0px;--fragment-end-x:-25vw;--fragment-end-y:-51vh;--fragment-turn:-650deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(17){--fragment-start-x:-114px;--fragment-start-y:-37px;--fragment-end-x:-11vw;--fragment-end-y:-62vh;--fragment-turn:790deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(18){--fragment-start-x:-97px;--fragment-start-y:-70px;--fragment-end-x:8vw;--fragment-end-y:-59vh;--fragment-turn:-715deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(19){--fragment-start-x:-70px;--fragment-start-y:-97px;--fragment-end-x:26vw;--fragment-end-y:-48vh;--fragment-turn:680deg;}
html body .upgrade-result-overlay .upgrade-animation-core-fragments>i:nth-child(20){--fragment-start-x:-37px;--fragment-start-y:-114px;--fragment-end-x:41vw;--fragment-end-y:-31vh;--fragment-turn:-780deg;}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-fragments{
  opacity:1!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-fragments>i{
  animation:upgradeCoreShardPhysics 2.22s cubic-bezier(.12,.64,.14,1) both!important;
  animation-delay:calc((var(--upgrade-item-index,0) * 0s) + (var(--fragment-delay,0s)))!important;
}
@keyframes upgradeCoreShardPhysics{
  0%{
    opacity:0;
    translate:calc(-50% + var(--fragment-start-x)) calc(-50% + var(--fragment-start-y));
    transform:rotate(0deg) scale(.74);
    filter:brightness(2) blur(.2px);
  }
  9%{opacity:1;transform:rotate(22deg) scale(1.04);filter:brightness(2.3) drop-shadow(0 0 14px rgba(250,230,134,.68));}
  38%{opacity:1;filter:brightness(1.35) drop-shadow(0 0 12px rgba(75,190,97,.42));}
  76%{opacity:.92;filter:brightness(1.05) blur(.5px);}
  100%{
    opacity:0;
    translate:calc(-50% + var(--fragment-end-x)) calc(-50% + var(--fragment-end-y));
    transform:rotate(var(--fragment-turn)) scale(.36);
    filter:brightness(1.45) blur(4px);
  }
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core::before{
  animation:upgradeCoreBodyFractureV12 .58s ease-out both!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-ring,
html body .upgrade-result-overlay.phase-burst .upgrade-animation-core-ornaments{
  animation:upgradeCoreShellCrackV12 .7s ease-out both!important;
}
@keyframes upgradeCoreBodyFractureV12{
  0%,16%{opacity:1;filter:brightness(1);clip-path:circle(50% at 50% 50%);}
  48%{opacity:.9;filter:brightness(2.1);clip-path:polygon(0 0,47% 0,52% 12%,100% 0,100% 46%,89% 52%,100% 100%,53% 100%,46% 88%,0 100%,0 53%,12% 46%);}
  100%{opacity:0;filter:brightness(2.5) blur(7px);clip-path:polygon(44% 44%,56% 44%,56% 56%,44% 56%);}
}
@keyframes upgradeCoreShellCrackV12{
  0%{opacity:1;filter:brightness(1);transform:scale(1);}
  48%{opacity:1;filter:brightness(2.3);transform:scale(1.03);}
  100%{opacity:0;filter:brightness(2.6) blur(5px);transform:scale(1.12);}
}

html body .upgrade-result-actions button,
html body .upgrade-final-result .upgrade-result-actions button{
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  scrollbar-width:none!important;
  line-height:1.1!important;
}
html body .upgrade-result-actions button::-webkit-scrollbar,
html body .upgrade-final-result .upgrade-result-actions button::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

@media(max-width:700px){
  html body .view-upgrade .upgrade-ambient-vine.is-left{left:-154px!important;}
  html body .view-upgrade .upgrade-ambient-vine.is-right{right:-154px!important;}
  html body .view-upgrade .upgrade-page-garden.is-left,
  html body .view-upgrade .upgrade-page-garden.is-right,
  html body .view-upgrade .upgrade-page-garden.is-between{display:none!important;}
  html body .upgrade-result-overlay .upgrade-animation-side-title{top:2.5vh!important;font-size:20px!important;}
}


/* Upgrade v13 — visible side-gutter garden, staged title motion and richer fullscreen atmosphere. */
html body .view-upgrade .upgrade-page-ambience{
  z-index:6!important;
  overflow:visible!important;
  opacity:1!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-forge,
html body .view-upgrade .upgrade-catalogs,
html body .view-upgrade .upgrade-history,
html body .view-upgrade .upgrade-error-banner{
  position:relative!important;
  z-index:8!important;
}
/* Keep every large botanical element inside the genuinely empty screen gutters. */
html body .view-upgrade .upgrade-ambient-vine{
  top:126px!important;
  width:62px!important;
  height:calc(100% - 126px)!important;
  opacity:.96!important;
  overflow:visible!important;
  stroke-width:4!important;
  filter:drop-shadow(0 0 8px rgba(75,190,97,.35)) drop-shadow(0 0 16px rgba(117,243,206,.12))!important;
  animation:upgradeAmbientSway 8.4s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-ambient-vine.is-left{left:5px!important;right:auto!important;}
html body .view-upgrade .upgrade-ambient-vine.is-right{right:5px!important;left:auto!important;}
html body .view-upgrade .upgrade-page-garden.is-left,
html body .view-upgrade .upgrade-page-garden.is-right,
html body .view-upgrade .upgrade-page-garden.is-between{
  display:block!important;
  width:150px!important;
  height:460px!important;
  opacity:.98!important;
  overflow:visible!important;
  z-index:7!important;
  filter:drop-shadow(0 0 9px rgba(75,190,97,.28)) drop-shadow(0 14px 22px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-page-garden.is-left{
  left:2px!important;
  right:auto!important;
  top:245px!important;
  transform:scale(.43) rotate(-7deg)!important;
  transform-origin:left top!important;
}
html body .view-upgrade .upgrade-page-garden.is-right{
  right:2px!important;
  left:auto!important;
  top:260px!important;
  transform:scaleX(-1) scale(.43) rotate(-7deg)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-page-garden.is-between{
  right:0!important;
  left:auto!important;
  top:805px!important;
  transform:scale(.4) rotate(8deg)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-ambient-flower,
html body .view-upgrade .upgrade-ambient-spark{
  z-index:8!important;
  opacity:1!important;
  animation:upgradeAmbientFloat 6.4s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-ambient-flower.is-a{left:20px!important;top:92px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-b{right:20px!important;top:132px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-c{left:24px!important;top:760px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-d{left:18px!important;top:535px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-e{right:24px!important;top:64px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-f{right:22px!important;top:790px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-a{left:38px!important;top:190px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-b{right:38px!important;top:240px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-c{left:42px!important;top:640px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-d{right:42px!important;top:690px!important;}

/* The labels now animate fully inside each reveal phase instead of appearing after the phase changes. */
html body .upgrade-result-overlay .upgrade-animation-side-title{
  --upgrade-side-title-delay:.28s;
}
html body .upgrade-result-overlay .upgrade-animation-side-title::before,
html body .upgrade-result-overlay .upgrade-animation-side-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:clamp(28px,4vw,74px);
  height:1px;
  opacity:0;
  background:linear-gradient(90deg,transparent,currentColor);
  box-shadow:0 0 8px currentColor;
  transform:scaleX(.08);
}
html body .upgrade-result-overlay .upgrade-animation-side-title::before{right:calc(100% + 15px);transform-origin:right center;}
html body .upgrade-result-overlay .upgrade-animation-side-title::after{left:calc(100% + 15px);transform:scaleX(-.08);transform-origin:left center;}
html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title{
  animation:upgradeSideTitleInV13 .72s cubic-bezier(.18,.78,.24,1) var(--upgrade-side-title-delay) both!important;
}
html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title::before,
html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title::after,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title::before,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title::after{
  animation:upgradeSideTitleLineIn .68s ease calc(var(--upgrade-side-title-delay) + .12s) both!important;
}
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title::before,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title::after,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title::before,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title::after{
  opacity:.72!important;
  transform:scaleX(1)!important;
}
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title::after,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title::after{transform:scaleX(-1)!important;}
html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title{
  animation:upgradeSideTitleOutV13 .72s ease both!important;
}
html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title::before,
html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title::after{
  animation:upgradeSideTitleLineOut .48s ease both!important;
}
@keyframes upgradeSideTitleInV13{
  0%{opacity:0;filter:blur(12px) brightness(1.8);transform:translateY(24px) scale(.88);letter-spacing:.19em;}
  48%{opacity:1;filter:blur(2px) brightness(1.5);transform:translateY(-2px) scale(1.035);}
  100%{opacity:1;filter:none;transform:none;letter-spacing:.06em;}
}
@keyframes upgradeSideTitleOutV13{
  0%{opacity:1;filter:none;transform:none;}
  45%{opacity:.72;filter:blur(1px);transform:translateY(-4px) scale(1.015);}
  100%{opacity:0;filter:blur(10px);transform:translateY(-22px) scale(.93);}
}
@keyframes upgradeSideTitleLineIn{0%{opacity:0;transform:scaleX(.08)}100%{opacity:.72;transform:scaleX(1)}}
@keyframes upgradeSideTitleLineOut{0%{opacity:.72;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.05)}}
html body .upgrade-result-overlay .upgrade-animation-side-title::after{animation-direction:normal!important;}

/* Fullscreen atmosphere visible throughout charge, target reveal, meter, consume and shatter. */
html body .upgrade-result-atmosphere{
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:1!important;
}
html body .upgrade-animation-stage{z-index:6!important;}
html body .upgrade-result-motes,
html body .upgrade-result-petals,
html body .upgrade-result-runes,
html body .upgrade-result-wisps{position:absolute;inset:0;display:block;pointer-events:none;}
html body .upgrade-result-motes>i{
  --mote-x:50vw;--mote-y:50vh;--mote-dx:24px;--mote-dy:-70px;--mote-size:4px;--mote-time:6s;
  position:absolute;left:var(--mote-x);top:var(--mote-y);width:var(--mote-size);height:var(--mote-size);border-radius:50%;
  background:#fff7c9;box-shadow:0 0 7px #fae686,0 0 16px rgba(117,243,206,.65);
  animation:upgradeResultMoteDrift var(--mote-time) ease-in-out infinite;opacity:0;
}
html body .upgrade-result-motes>i:nth-child(1){--mote-x:6vw;--mote-y:20vh;--mote-dx:34px;--mote-dy:-88px;--mote-time:5.7s;--mote-size:3px;animation-delay:-1.2s}
html body .upgrade-result-motes>i:nth-child(2){--mote-x:13vw;--mote-y:71vh;--mote-dx:-24px;--mote-dy:-64px;--mote-time:7.1s;animation-delay:-3.8s}
html body .upgrade-result-motes>i:nth-child(3){--mote-x:22vw;--mote-y:34vh;--mote-dx:19px;--mote-dy:-105px;--mote-time:6.4s;--mote-size:5px;animation-delay:-2.4s}
html body .upgrade-result-motes>i:nth-child(4){--mote-x:31vw;--mote-y:82vh;--mote-dx:-36px;--mote-dy:-92px;--mote-time:8.2s;animation-delay:-5s}
html body .upgrade-result-motes>i:nth-child(5){--mote-x:40vw;--mote-y:17vh;--mote-dx:26px;--mote-dy:-62px;--mote-time:5.9s;animation-delay:-.7s}
html body .upgrade-result-motes>i:nth-child(6){--mote-x:47vw;--mote-y:68vh;--mote-dx:-18px;--mote-dy:-116px;--mote-time:7.5s;--mote-size:3px;animation-delay:-4.2s}
html body .upgrade-result-motes>i:nth-child(7){--mote-x:54vw;--mote-y:29vh;--mote-dx:31px;--mote-dy:-78px;--mote-time:6.8s;animation-delay:-2.9s}
html body .upgrade-result-motes>i:nth-child(8){--mote-x:62vw;--mote-y:87vh;--mote-dx:-27px;--mote-dy:-101px;--mote-time:8s;animation-delay:-6.1s}
html body .upgrade-result-motes>i:nth-child(9){--mote-x:69vw;--mote-y:14vh;--mote-dx:22px;--mote-dy:-68px;--mote-time:5.5s;--mote-size:5px;animation-delay:-1.8s}
html body .upgrade-result-motes>i:nth-child(10){--mote-x:76vw;--mote-y:59vh;--mote-dx:-32px;--mote-dy:-89px;--mote-time:7.2s;animation-delay:-4.7s}
html body .upgrade-result-motes>i:nth-child(11){--mote-x:84vw;--mote-y:35vh;--mote-dx:28px;--mote-dy:-110px;--mote-time:6.2s;animation-delay:-3.3s}
html body .upgrade-result-motes>i:nth-child(12){--mote-x:93vw;--mote-y:77vh;--mote-dx:-20px;--mote-dy:-74px;--mote-time:8.4s;animation-delay:-6.7s}
html body .upgrade-result-motes>i:nth-child(13){--mote-x:9vw;--mote-y:48vh;--mote-dx:45px;--mote-dy:-54px;--mote-time:6.9s;animation-delay:-5.4s}
html body .upgrade-result-motes>i:nth-child(14){--mote-x:27vw;--mote-y:11vh;--mote-dx:-30px;--mote-dy:-82px;--mote-time:7.7s;animation-delay:-4.1s}
html body .upgrade-result-motes>i:nth-child(15){--mote-x:58vw;--mote-y:51vh;--mote-dx:33px;--mote-dy:-96px;--mote-time:6.1s;animation-delay:-2.2s}
html body .upgrade-result-motes>i:nth-child(16){--mote-x:72vw;--mote-y:73vh;--mote-dx:-40px;--mote-dy:-66px;--mote-time:7.8s;animation-delay:-5.9s}
html body .upgrade-result-motes>i:nth-child(17){--mote-x:88vw;--mote-y:19vh;--mote-dx:17px;--mote-dy:-108px;--mote-time:6.6s;animation-delay:-3.5s}
html body .upgrade-result-motes>i:nth-child(18){--mote-x:37vw;--mote-y:61vh;--mote-dx:-25px;--mote-dy:-84px;--mote-time:8.1s;animation-delay:-7s}
@keyframes upgradeResultMoteDrift{0%,100%{opacity:0;transform:translate3d(0,18px,0) scale(.55)}18%{opacity:.85}55%{opacity:1;transform:translate3d(14px,-46px,0) scale(1.15)}82%{opacity:.65}100%{transform:translate3d(var(--mote-dx),var(--mote-dy),0) scale(.35)}}

html body .upgrade-result-petals>i{
  --result-petal-x:50vw;--result-petal-drift:35px;--result-petal-time:10s;--result-petal-scale:1;
  position:absolute;left:var(--result-petal-x);top:-8vh;width:11px;height:19px;border-radius:74% 26% 68% 32% / 38% 62% 36% 64%;
  background:linear-gradient(145deg,#fff,#fae686 48%,#75f3ce);box-shadow:0 0 10px rgba(250,230,134,.3);
  animation:upgradeResultPetalFall var(--result-petal-time) linear infinite;opacity:0;
}
html body .upgrade-result-petals>i:nth-child(1){--result-petal-x:5vw;--result-petal-drift:52px;--result-petal-time:11.8s;animation-delay:-3s}
html body .upgrade-result-petals>i:nth-child(2){--result-petal-x:17vw;--result-petal-drift:-38px;--result-petal-time:13.2s;--result-petal-scale:.72;animation-delay:-9s}
html body .upgrade-result-petals>i:nth-child(3){--result-petal-x:29vw;--result-petal-drift:28px;--result-petal-time:10.6s;--result-petal-scale:1.12;animation-delay:-5s}
html body .upgrade-result-petals>i:nth-child(4){--result-petal-x:43vw;--result-petal-drift:-24px;--result-petal-time:12.4s;--result-petal-scale:.64;animation-delay:-1s}
html body .upgrade-result-petals>i:nth-child(5){--result-petal-x:55vw;--result-petal-drift:42px;--result-petal-time:11.2s;--result-petal-scale:.84;animation-delay:-7.4s}
html body .upgrade-result-petals>i:nth-child(6){--result-petal-x:66vw;--result-petal-drift:-48px;--result-petal-time:13.7s;animation-delay:-11s}
html body .upgrade-result-petals>i:nth-child(7){--result-petal-x:77vw;--result-petal-drift:31px;--result-petal-time:10.9s;--result-petal-scale:.7;animation-delay:-4.2s}
html body .upgrade-result-petals>i:nth-child(8){--result-petal-x:89vw;--result-petal-drift:-29px;--result-petal-time:12.8s;--result-petal-scale:1.08;animation-delay:-8.1s}
html body .upgrade-result-petals>i:nth-child(9){--result-petal-x:96vw;--result-petal-drift:-54px;--result-petal-time:11.6s;--result-petal-scale:.58;animation-delay:-2s}
@keyframes upgradeResultPetalFall{0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(0) scale(var(--result-petal-scale))}10%{opacity:.82}76%{opacity:.76}94%{opacity:0}100%{opacity:0;transform:translate3d(var(--result-petal-drift),108vh,0) rotate(620deg) scale(var(--result-petal-scale))}}

html body .upgrade-result-runes>b{
  position:absolute;color:rgba(250,230,134,.72);font-size:clamp(15px,1.4vw,25px);font-weight:400;text-shadow:0 0 10px currentColor,0 0 24px rgba(117,243,206,.35);
  animation:upgradeResultRunePulse 3.4s ease-in-out infinite;
}
html body .upgrade-result-runes>b:nth-child(1){left:6vw;top:12vh}
html body .upgrade-result-runes>b:nth-child(2){right:7vw;top:16vh;animation-delay:-.8s}
html body .upgrade-result-runes>b:nth-child(3){left:10vw;bottom:12vh;animation-delay:-1.6s}
html body .upgrade-result-runes>b:nth-child(4){right:9vw;bottom:14vh;animation-delay:-2.4s}
html body .upgrade-result-runes>b:nth-child(5){left:48%;top:6vh;animation-delay:-1.1s}
html body .upgrade-result-runes>b:nth-child(6){right:48%;bottom:6vh;animation-delay:-2.9s}
@keyframes upgradeResultRunePulse{0%,100%{opacity:.18;transform:scale(.7) rotate(0)}50%{opacity:.9;transform:scale(1.18) rotate(45deg)}}

html body .upgrade-result-wisps>i{
  position:absolute;width:48vw;height:9vh;border-radius:50%;opacity:.18;filter:blur(15px);
  background:linear-gradient(90deg,transparent,rgba(117,243,206,.34),rgba(250,230,134,.22),transparent);
  animation:upgradeResultWispSweep 9s ease-in-out infinite;
}
html body .upgrade-result-wisps>i:nth-child(1){left:-28vw;top:21vh;rotate:16deg}
html body .upgrade-result-wisps>i:nth-child(2){right:-30vw;top:35vh;rotate:-18deg;animation-delay:-2.4s;animation-direction:reverse}
html body .upgrade-result-wisps>i:nth-child(3){left:-24vw;bottom:23vh;rotate:-12deg;animation-delay:-4.8s}
html body .upgrade-result-wisps>i:nth-child(4){right:-27vw;bottom:12vh;rotate:14deg;animation-delay:-7.1s;animation-direction:reverse}
@keyframes upgradeResultWispSweep{0%,100%{opacity:.06;transform:translateX(0) scaleX(.72)}50%{opacity:.28;transform:translateX(56vw) scaleX(1.18)}}

html body .upgrade-result-overlay.phase-failure .upgrade-result-atmosphere{filter:hue-rotate(-115deg) saturate(1.55) brightness(.9)!important;}
html body .upgrade-result-overlay.phase-success .upgrade-result-atmosphere{filter:saturate(1.15) brightness(1.08)!important;}

@media(prefers-reduced-motion:reduce){
  html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title,
  html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title{animation:upgradeSideTitleInV13 .72s ease var(--upgrade-side-title-delay) both!important;}
  html body .upgrade-result-motes>i{animation:upgradeResultMoteDrift 8s ease-in-out infinite!important;}
  html body .upgrade-result-petals>i{animation:upgradeResultPetalFall 15s linear infinite!important;}
  html body .upgrade-result-runes>b{animation:upgradeResultRunePulse 4s ease-in-out infinite!important;}
  html body .upgrade-result-wisps>i{animation:upgradeResultWispSweep 12s ease-in-out infinite!important;}
}
@media(max-width:1180px){
  html body .view-upgrade .upgrade-page-garden.is-left,
  html body .view-upgrade .upgrade-page-garden.is-right,
  html body .view-upgrade .upgrade-page-garden.is-between{display:none!important;}
  html body .view-upgrade .upgrade-ambient-vine{width:42px!important;opacity:.7!important;}
  html body .view-upgrade .upgrade-ambient-flower{font-size:16px!important;}
}
@media(max-width:700px){
  html body .view-upgrade .upgrade-ambient-vine,
  html body .view-upgrade .upgrade-page-garden{display:none!important;}
  html body .upgrade-result-wisps{display:none!important;}
  html body .upgrade-result-motes>i:nth-child(n+11),
  html body .upgrade-result-petals>i:nth-child(n+7){display:none!important;}
}

/* Upgrade v14 — viewport-side decorations and guaranteed staged title motion. */
html body .view-upgrade .upgrade-page-ambience{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:100vw!important;
  max-width:none!important;
  min-height:100%!important;
  transform:translateX(-50%)!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:6!important;
}
/* Keep every botanical group fully inside the real viewport gutters. */
html body .view-upgrade .upgrade-ambient-vine{
  width:70px!important;
  top:130px!important;
  height:calc(100% - 130px)!important;
  opacity:.95!important;
}
html body .view-upgrade .upgrade-ambient-vine.is-left{left:18px!important;right:auto!important;}
html body .view-upgrade .upgrade-ambient-vine.is-right{right:18px!important;left:auto!important;}
html body .view-upgrade .upgrade-page-garden.is-left,
html body .view-upgrade .upgrade-page-garden.is-right{
  display:block!important;
  width:150px!important;
  height:470px!important;
  top:245px!important;
  opacity:.98!important;
  z-index:7!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-page-garden.is-left{
  left:22px!important;
  right:auto!important;
  transform:scale(.46) rotate(-8deg)!important;
  transform-origin:left top!important;
}
html body .view-upgrade .upgrade-page-garden.is-right{
  right:22px!important;
  left:auto!important;
  transform:scaleX(-1) scale(.46) rotate(-8deg)!important;
  transform-origin:right top!important;
}
html body .view-upgrade .upgrade-page-garden.is-between{
  display:block!important;
  left:auto!important;
  right:30px!important;
  top:760px!important;
  width:130px!important;
  height:150px!important;
  transform:scale(.52) rotate(8deg)!important;
  transform-origin:right top!important;
  z-index:7!important;
}
html body .view-upgrade .upgrade-ambient-flower.is-a{left:58px!important;top:96px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-b{right:58px!important;top:142px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-c{left:70px!important;top:780px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-d{left:40px!important;top:545px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-e{right:78px!important;top:74px!important;}
html body .view-upgrade .upgrade-ambient-flower.is-f{right:62px!important;top:805px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-a{left:92px!important;top:190px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-b{right:92px!important;top:238px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-c{left:76px!important;top:650px!important;}
html body .view-upgrade .upgrade-ambient-spark.is-d{right:78px!important;top:690px!important;}

/* The h3 is only the phase gate. The inner span owns the visible motion so
   older !important opacity/filter rules cannot collapse the animation. */
html body .upgrade-result-overlay .upgrade-animation-side-title{
  opacity:0!important;
  filter:none!important;
  transform:none!important;
  overflow:visible!important;
}
html body .upgrade-result-overlay .upgrade-animation-side-title>span{
  display:inline-block!important;
  opacity:0;
  filter:blur(14px) brightness(1.75);
  transform:translate3d(0,28px,0) scale(.84);
  letter-spacing:.2em;
  will-change:opacity,transform,filter,letter-spacing;
}
html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title{
  opacity:1!important;
  visibility:visible!important;
}
html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title>span,
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title>span{
  animation:upgradeSideTitleTextInV14 1.35s cubic-bezier(.16,.8,.2,1) var(--upgrade-side-title-delay) both!important;
}
html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-offer-title>span,
html body .upgrade-result-overlay.phase-meter .upgrade-animation-side-title>span{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  letter-spacing:.06em!important;
}
html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title{
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
}
html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title>span{
  animation:upgradeSideTitleTextOutV14 .78s ease both!important;
}
html body .upgrade-result-overlay.phase-burst .upgrade-animation-side-title,
html body .upgrade-result-overlay.phase-success .upgrade-animation-side-title,
html body .upgrade-result-overlay.phase-failure .upgrade-animation-side-title{
  opacity:0!important;
  visibility:hidden!important;
}
@keyframes upgradeSideTitleTextInV14{
  0%{opacity:0;filter:blur(14px) brightness(1.75);transform:translate3d(0,28px,0) scale(.84);letter-spacing:.2em;}
  42%{opacity:.8;filter:blur(4px) brightness(1.45);transform:translate3d(0,-3px,0) scale(1.05);}
  72%{opacity:1;filter:blur(1px) brightness(1.16);transform:translate3d(0,1px,0) scale(.99);}
  100%{opacity:1;filter:none;transform:none;letter-spacing:.06em;}
}
@keyframes upgradeSideTitleTextOutV14{
  0%{opacity:1;filter:none;transform:none;letter-spacing:.06em;}
  45%{opacity:.68;filter:blur(2px);transform:translate3d(0,-5px,0) scale(1.02);}
  100%{opacity:0;filter:blur(12px);transform:translate3d(0,-28px,0) scale(.88);letter-spacing:.14em;}
}
@media(max-width:1450px){
  html body .view-upgrade .upgrade-page-garden.is-left,
  html body .view-upgrade .upgrade-page-garden.is-right{transform:scale(.34) rotate(-8deg)!important;}
  html body .view-upgrade .upgrade-page-garden.is-right{transform:scaleX(-1) scale(.34) rotate(-8deg)!important;}
  html body .view-upgrade .upgrade-page-garden.is-between{display:none!important;}
  html body .view-upgrade .upgrade-ambient-vine{width:50px!important;}
}
@media(max-width:1180px){
  html body .view-upgrade .upgrade-page-garden.is-left,
  html body .view-upgrade .upgrade-page-garden.is-right,
  html body .view-upgrade .upgrade-page-garden.is-between{display:none!important;}
  html body .view-upgrade .upgrade-ambient-vine.is-left{left:4px!important;}
  html body .view-upgrade .upgrade-ambient-vine.is-right{right:4px!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .upgrade-result-overlay.phase-offers .upgrade-animation-side-title.is-offer-title>span,
  html body .upgrade-result-overlay.phase-targets .upgrade-animation-side-title.is-target-title>span{
    animation:upgradeSideTitleTextInV14 1.35s cubic-bezier(.16,.8,.2,1) var(--upgrade-side-title-delay) both!important;
  }
  html body .upgrade-result-overlay.phase-consume .upgrade-animation-side-title>span{
    animation:upgradeSideTitleTextOutV14 .78s ease both!important;
  }
}

/* Upgrade v15 — keep the approved viewport-side decorations visible.
   The Upgrade view previously used paint containment/hidden overflow, which
   clipped the 100vw ambience layer to the centered content column. */
html body .view-page.view-upgrade{
  overflow:visible!important;
  overflow-x:clip!important;
  contain:style!important;
  clip-path:none!important;
}
html body .view-upgrade .upgrade-page{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-page-ambience{
  visibility:visible!important;
  display:block!important;
  opacity:1!important;
}
html body .view-upgrade .upgrade-ambient-vine,
html body .view-upgrade .upgrade-page-garden,
html body .view-upgrade .upgrade-ambient-flower,
html body .view-upgrade .upgrade-ambient-spark{
  visibility:visible!important;
}

/* Upgrade v16 — independent viewport side rails.
   These decorations no longer depend on the centered Upgrade page ambience,
   so panel containment and overflow cannot hide them. */
html body .view-upgrade .upgrade-viewport-side-decor{
  --side-decor-edge:clamp(8px,1.35vw,26px);
  position:fixed!important;
  z-index:7!important;
  top:116px!important;
  bottom:24px!important;
  width:clamp(54px,7.4vw,142px)!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  pointer-events:none!important;
  isolation:isolate!important;
  filter:drop-shadow(0 0 10px rgba(75,190,97,.2));
}
html body .view-upgrade .upgrade-viewport-side-decor.is-left{left:var(--side-decor-edge)!important;right:auto!important;}
html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:var(--side-decor-edge)!important;left:auto!important;transform:scaleX(-1);}
html body .view-upgrade .upgrade-viewport-vine{
  position:absolute!important;
  left:36%!important;
  top:2%!important;
  bottom:2%!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,transparent 0%,rgba(75,190,97,.42) 9%,rgba(117,243,206,.32) 45%,rgba(75,190,97,.38) 88%,transparent 100%)!important;
  box-shadow:0 0 9px rgba(75,190,97,.24),0 0 20px rgba(117,243,206,.08)!important;
  transform-origin:50% 100%!important;
  animation:upgradeViewportVineSway 8.6s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-vine::before,
html body .view-upgrade .upgrade-viewport-vine::after{
  content:""!important;
  position:absolute!important;
  width:clamp(38px,4.2vw,78px)!important;
  height:32%!important;
  border:2px solid rgba(75,190,97,.25)!important;
  border-left:0!important;
  border-bottom:0!important;
  border-radius:0 90% 0 0!important;
}
html body .view-upgrade .upgrade-viewport-vine::before{left:1px!important;top:15%!important;transform:rotate(12deg)!important;}
html body .view-upgrade .upgrade-viewport-vine::after{left:-3px!important;top:53%!important;transform:rotate(-10deg) scaleY(.88)!important;}
html body .view-upgrade .upgrade-viewport-leaf{
  position:absolute!important;
  width:clamp(10px,1vw,17px)!important;
  height:clamp(18px,1.8vw,29px)!important;
  border-radius:76% 24% 70% 30% / 65% 34% 66% 35%!important;
  background:linear-gradient(145deg,#75f3ce 0%,#4bbe61 47%,#163217 100%)!important;
  box-shadow:0 0 9px rgba(117,243,206,.34)!important;
  transform-origin:20% 80%!important;
  animation:upgradeViewportLeafFloat 5.6s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-leaf.is-1{left:18%!important;top:14%!important;rotate:-38deg!important;animation-delay:-.8s!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-2{left:52%!important;top:28%!important;rotate:36deg!important;animation-delay:-2.1s!important;scale:.78!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-3{left:12%!important;top:48%!important;rotate:-52deg!important;animation-delay:-3.7s!important;scale:.9!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-4{left:55%!important;top:67%!important;rotate:42deg!important;animation-delay:-1.4s!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-5{left:22%!important;top:84%!important;rotate:-30deg!important;animation-delay:-4.6s!important;scale:.72!important;}
html body .view-upgrade .upgrade-viewport-flower,
html body .view-upgrade .upgrade-viewport-glint{
  position:absolute!important;
  margin:0!important;
  font-style:normal!important;
  line-height:1!important;
  pointer-events:none!important;
  animation:upgradeViewportBloom 4.8s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-flower{color:#fae686!important;font-size:clamp(17px,1.7vw,28px)!important;text-shadow:0 0 9px rgba(250,230,134,.5),0 0 20px rgba(250,230,134,.18)!important;}
html body .view-upgrade .upgrade-viewport-flower.is-1{left:6%!important;top:7%!important;animation-delay:-1s!important;}
html body .view-upgrade .upgrade-viewport-flower.is-2{left:60%!important;top:43%!important;animation-delay:-3.2s!important;font-size:clamp(13px,1.3vw,22px)!important;}
html body .view-upgrade .upgrade-viewport-flower.is-3{left:8%!important;top:76%!important;animation-delay:-2.2s!important;}
html body .view-upgrade .upgrade-viewport-glint{color:#75f3ce!important;font-size:clamp(11px,1vw,17px)!important;text-shadow:0 0 10px currentColor!important;}
html body .view-upgrade .upgrade-viewport-glint.is-1{left:68%!important;top:18%!important;animation-delay:-1.7s!important;}
html body .view-upgrade .upgrade-viewport-glint.is-2{left:45%!important;top:89%!important;animation-delay:-4.1s!important;}
@keyframes upgradeViewportVineSway{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(1.7deg) translateY(-8px)}}
@keyframes upgradeViewportLeafFloat{0%,100%{opacity:.68;transform:translate3d(0,0,0) rotate(-3deg)}50%{opacity:1;transform:translate3d(4px,-8px,0) rotate(8deg)}}
@keyframes upgradeViewportBloom{0%,100%{opacity:.48;transform:translate3d(0,0,0) scale(.9) rotate(-5deg)}50%{opacity:1;transform:translate3d(2px,-9px,0) scale(1.1) rotate(7deg)}}

/* The old ambience remains available for falling petals, but its large garden
   shapes are disabled so only the dedicated, reliable viewport rails render. */
html body .view-upgrade .upgrade-page-ambience .upgrade-ambient-vine,
html body .view-upgrade .upgrade-page-ambience .upgrade-page-garden,
html body .view-upgrade .upgrade-page-ambience .upgrade-ambient-flower,
html body .view-upgrade .upgrade-page-ambience .upgrade-ambient-spark{display:none!important;}

@media(max-width:1320px){
  html body .view-upgrade .upgrade-viewport-side-decor{width:46px!important;opacity:.78!important;}
  html body .view-upgrade .upgrade-viewport-flower.is-2,
  html body .view-upgrade .upgrade-viewport-leaf.is-2,
  html body .view-upgrade .upgrade-viewport-leaf.is-4{display:none!important;}
}
@media(max-width:1080px){
  html body .view-upgrade .upgrade-viewport-side-decor{display:none!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-viewport-vine{animation:upgradeViewportVineSway 8.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-viewport-leaf{animation:upgradeViewportLeafFloat 5.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-viewport-flower,
  html body .view-upgrade .upgrade-viewport-glint{animation:upgradeViewportBloom 4.8s ease-in-out infinite!important;}
}


/* Upgrade v18 — curved side vines + hero character. */
html body .view-upgrade .upgrade-hero-character{
  position:absolute!important;
  right:clamp(-10px,.2vw,8px)!important;
  bottom:0!important;
  z-index:1!important;
  width:clamp(132px,14.5vw,225px)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  pointer-events:none!important;
  opacity:.98!important;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(117,243,206,.10))!important;
}
html body .view-upgrade .upgrade-hero-character img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  user-select:none!important;
}
@media(max-width:1180px){
  html body .view-upgrade .upgrade-hero-character{width:clamp(108px,12vw,170px)!important;opacity:.9!important;right:-6px!important;}
}
@media(max-width:980px){
  html body .view-upgrade .upgrade-hero-character{display:none!important;}
}

html body .view-upgrade .upgrade-viewport-side-decor{
  width:clamp(72px,8.8vw,164px)!important;
}
html body .view-upgrade .upgrade-viewport-vine{
  left:18%!important;
  top:1%!important;
  bottom:1%!important;
  width:86px!important;
  background:none!important;
  border-left:3px solid rgba(75,190,97,.44)!important;
  border-radius:78% 0 66% 0 / 12% 0 88% 0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 8px rgba(75,190,97,.20)) drop-shadow(0 0 18px rgba(117,243,206,.08))!important;
  transform-origin:50% 100%!important;
  transform:rotate(-6deg)!important;
  animation:upgradeViewportCurvyVineSway 9s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-vine::before,
html body .view-upgrade .upgrade-viewport-vine::after{
  content:""!important;
  position:absolute!important;
  background:none!important;
  border:0!important;
  border-left:2px solid rgba(75,190,97,.30)!important;
  border-radius:88% 0 76% 0 / 16% 0 84% 0!important;
}
html body .view-upgrade .upgrade-viewport-vine::before{
  left:14px!important;
  top:16%!important;
  width:62px!important;
  height:30%!important;
  transform:rotate(-20deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine::after{
  left:28px!important;
  top:49%!important;
  width:54px!important;
  height:28%!important;
  transform:rotate(18deg)!important;
}
html body .view-upgrade .upgrade-viewport-leaf.is-1{left:30%!important;top:14%!important;rotate:-38deg!important;animation-delay:-.8s!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-2{left:58%!important;top:27%!important;rotate:34deg!important;animation-delay:-2.1s!important;scale:.78!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-3{left:18%!important;top:47%!important;rotate:-48deg!important;animation-delay:-3.7s!important;scale:.9!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-4{left:58%!important;top:68%!important;rotate:40deg!important;animation-delay:-1.4s!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-5{left:26%!important;top:84%!important;rotate:-28deg!important;animation-delay:-4.6s!important;scale:.72!important;}
html body .view-upgrade .upgrade-viewport-flower.is-1{left:10%!important;top:8%!important;animation-delay:-1s!important;}
html body .view-upgrade .upgrade-viewport-flower.is-2{left:66%!important;top:42%!important;animation-delay:-3.2s!important;font-size:clamp(13px,1.3vw,22px)!important;}
html body .view-upgrade .upgrade-viewport-flower.is-3{left:12%!important;top:76%!important;animation-delay:-2.2s!important;}
html body .view-upgrade .upgrade-viewport-glint.is-1{left:70%!important;top:20%!important;animation-delay:-1.7s!important;}
html body .view-upgrade .upgrade-viewport-glint.is-2{left:48%!important;top:89%!important;animation-delay:-4.1s!important;}
@keyframes upgradeViewportCurvyVineSway{
  0%,100%{transform:rotate(-8deg) translateY(0) translateX(0)}
  35%{transform:rotate(-3deg) translateY(-6px) translateX(2px)}
  70%{transform:rotate(-10deg) translateY(-3px) translateX(-1px)}
}


/* Upgrade v19 — reposition hero character and enrich side vines. */
html body .view-upgrade .upgrade-hero-character{
  right:clamp(74px,6.4vw,138px)!important;
  bottom:-8px!important;
  width:clamp(112px,12.4vw,188px)!important;
  z-index:1!important;
}
html body .view-upgrade .upgrade-hero-copy{
  padding-right:clamp(148px,16vw,250px)!important;
}
@media(max-width:1180px){
  html body .view-upgrade .upgrade-hero-copy{padding-right:clamp(120px,14vw,188px)!important;}
  html body .view-upgrade .upgrade-hero-character{right:clamp(48px,5vw,92px)!important;bottom:-6px!important;width:clamp(96px,11vw,150px)!important;}
}
@media(max-width:980px){
  html body .view-upgrade .upgrade-hero-copy{padding-right:24px!important;}
}

html body .view-upgrade .upgrade-viewport-side-decor{
  width:clamp(90px,9.8vw,170px)!important;
  z-index:14!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-left{
  left:clamp(12px,1.2vw,22px)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  right:clamp(220px,16vw,300px)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::before,
html body .view-upgrade .upgrade-viewport-side-decor::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  border-left:2px solid rgba(75,190,97,.26)!important;
  filter:drop-shadow(0 0 8px rgba(117,243,206,.10))!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::before{
  left:18px!important;
  top:7%!important;
  width:78px!important;
  height:134px!important;
  border-radius:88% 0 74% 0 / 14% 0 86% 0!important;
  transform:rotate(-30deg)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::after{
  left:34px!important;
  top:58%!important;
  width:64px!important;
  height:120px!important;
  border-radius:76% 0 86% 0 / 12% 0 88% 0!important;
  transform:rotate(20deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine{
  position:absolute!important;
  background:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 8px rgba(75,190,97,.18)) drop-shadow(0 0 18px rgba(117,243,206,.08))!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main{
  left:22%!important;
  top:1%!important;
  bottom:1%!important;
  width:84px!important;
  border-left:3px solid rgba(75,190,97,.46)!important;
  border-radius:78% 0 66% 0 / 12% 0 88% 0!important;
  transform-origin:50% 100%!important;
  transform:rotate(-7deg)!important;
  animation:upgradeViewportCurvyVineSway 9s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::before,
html body .view-upgrade .upgrade-viewport-vine.is-main::after,
html body .view-upgrade .upgrade-viewport-vine.is-branch-a::before,
html body .view-upgrade .upgrade-viewport-vine.is-branch-b::before{
  content:""!important;
  position:absolute!important;
  background:none!important;
  border-left:2px solid rgba(75,190,97,.30)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::before{
  left:14px!important;
  top:16%!important;
  width:62px!important;
  height:30%!important;
  border-radius:88% 0 76% 0 / 16% 0 84% 0!important;
  transform:rotate(-22deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::after{
  left:26px!important;
  top:49%!important;
  width:56px!important;
  height:28%!important;
  border-radius:74% 0 84% 0 / 14% 0 86% 0!important;
  transform:rotate(18deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-a{
  left:2%!important;
  top:18%!important;
  width:64px!important;
  height:180px!important;
  border-left:2px solid rgba(75,190,97,.28)!important;
  border-radius:92% 0 64% 0 / 10% 0 90% 0!important;
  transform:rotate(-20deg)!important;
  animation:upgradeViewportCurvyVineDrift 11.5s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-a::before{
  left:18px!important;
  top:46px!important;
  width:54px!important;
  height:74px!important;
  border-radius:58% 42% 64% 36% / 48% 32% 68% 52%!important;
  border:2px solid rgba(75,190,97,.24)!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
  transform:rotate(-24deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-b{
  left:34%!important;
  top:58%!important;
  width:62px!important;
  height:168px!important;
  border-left:2px solid rgba(75,190,97,.26)!important;
  border-radius:82% 0 88% 0 / 10% 0 90% 0!important;
  transform:rotate(14deg)!important;
  animation:upgradeViewportCurvyVineDrift 10.5s ease-in-out infinite reverse!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-b::before{
  left:8px!important;
  top:82px!important;
  width:62px!important;
  height:62px!important;
  border-radius:56% 44% 52% 48% / 44% 52% 48% 56%!important;
  border:2px solid rgba(75,190,97,.24)!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
  transform:rotate(22deg)!important;
}
html body .view-upgrade .upgrade-viewport-leaf.is-1{left:34%!important;top:15%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-2{left:63%!important;top:30%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-3{left:20%!important;top:48%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-4{left:61%!important;top:68%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-5{left:30%!important;top:84%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-1{left:11%!important;top:8%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-2{left:68%!important;top:44%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-3{left:12%!important;top:77%!important;}
@keyframes upgradeViewportCurvyVineSway{
  0%,100%{transform:rotate(-8deg) translateY(0) translateX(0)}
  35%{transform:rotate(-3deg) translateY(-6px) translateX(2px)}
  70%{transform:rotate(-10deg) translateY(-3px) translateX(-1px)}
}
@keyframes upgradeViewportCurvyVineDrift{
  0%,100%{transform:translateY(0) rotate(-18deg)}
  50%{transform:translateY(-8px) rotate(-12deg)}
}
@media(max-width:1700px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(190px,14vw,250px)!important;}
}
@media(max-width:1500px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(170px,12vw,220px)!important;}
}
@media(max-width:1320px){
  html body .view-upgrade .upgrade-viewport-side-decor{width:clamp(72px,8.8vw,132px)!important;opacity:.92!important;}
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(148px,11vw,190px)!important;}
}


/* Upgrade v19 — restore fuller side vines, spiral ornaments, and reposition hero character. */
html body .view-upgrade .upgrade-hero-character{
  right:clamp(96px,8vw,156px)!important;
  bottom:-52px!important;
  width:clamp(118px,12.2vw,186px)!important;
  z-index:2!important;
}
@media(max-width:1180px){
  html body .view-upgrade .upgrade-hero-character{
    right:clamp(70px,7vw,118px)!important;
    bottom:-28px!important;
    width:clamp(106px,11vw,154px)!important;
  }
}

html body .view-upgrade .upgrade-viewport-side-decor{
  width:clamp(88px,7.2vw,118px)!important;
  top:72px!important;
  bottom:38px!important;
  z-index:2!important;
  opacity:.98!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-left{
  left:clamp(12px,1.3vw,24px)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  right:clamp(228px,15vw,296px)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::before,
html body .view-upgrade .upgrade-viewport-side-decor::after{
  content:""!important;
  position:absolute!important;
  border-style:solid!important;
  border-color:rgba(75,190,97,.28)!important;
  border-width:2px 0 0 2px!important;
  border-radius:50%!important;
  background:none!important;
  filter:drop-shadow(0 0 8px rgba(117,243,206,.08))!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::before{
  left:18px!important;
  top:24%!important;
  width:62px!important;
  height:62px!important;
  transform:rotate(-28deg)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::after{
  left:8px!important;
  top:62%!important;
  width:88px!important;
  height:88px!important;
  transform:rotate(20deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine{
  background:none!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main{
  left:28%!important;
  top:-1%!important;
  bottom:-2%!important;
  width:74px!important;
  border-left:3px solid rgba(75,190,97,.46)!important;
  border-radius:84% 0 80% 0 / 10% 0 90% 0!important;
  transform:rotate(-7deg)!important;
  filter:drop-shadow(0 0 8px rgba(75,190,97,.18)) drop-shadow(0 0 14px rgba(117,243,206,.06))!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::before{
  left:-10px!important;
  top:15%!important;
  width:52px!important;
  height:28%!important;
  border-left:2px solid rgba(75,190,97,.28)!important;
  border-radius:92% 0 78% 0 / 14% 0 86% 0!important;
  transform:rotate(-26deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::after{
  left:16px!important;
  top:48%!important;
  width:64px!important;
  height:26%!important;
  border-left:2px solid rgba(75,190,97,.26)!important;
  border-radius:72% 0 90% 0 / 10% 0 90% 0!important;
  transform:rotate(22deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-a{
  left:0!important;
  top:20%!important;
  width:84px!important;
  height:112px!important;
  border-left:2px solid rgba(75,190,97,.34)!important;
  border-radius:96% 0 74% 0 / 14% 0 86% 0!important;
  transform:rotate(-26deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-a::before{
  left:20px!important;
  top:54px!important;
  width:52px!important;
  height:52px!important;
  border-width:2px 0 0 2px!important;
  border-color:rgba(75,190,97,.30)!important;
  border-style:solid!important;
  border-radius:50%!important;
  transform:rotate(-8deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-b{
  left:8%!important;
  top:58%!important;
  width:96px!important;
  height:132px!important;
  border-left:2px solid rgba(75,190,97,.34)!important;
  border-radius:82% 0 92% 0 / 10% 0 90% 0!important;
  transform:rotate(18deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-b::before{
  left:26px!important;
  top:58px!important;
  width:72px!important;
  height:72px!important;
  border-width:2px 0 0 2px!important;
  border-color:rgba(75,190,97,.26)!important;
  border-style:solid!important;
  border-radius:50%!important;
  transform:rotate(14deg)!important;
}
html body .view-upgrade .upgrade-viewport-leaf.is-1{left:48%!important;top:16%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-2{left:67%!important;top:31%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-3{left:18%!important;top:49%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-4{left:66%!important;top:69%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-5{left:34%!important;top:86%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-1{left:11%!important;top:7%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-2{left:70%!important;top:44%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-3{left:12%!important;top:75%!important;}
html body .view-upgrade .upgrade-viewport-glint.is-1{left:54%!important;top:21%!important;}
html body .view-upgrade .upgrade-viewport-glint.is-2{left:42%!important;top:90%!important;}
@media (max-width: 1400px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(212px,14vw,268px)!important;}
}
@media (max-width: 1220px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(176px,12vw,228px)!important;}
  html body .view-upgrade .upgrade-viewport-side-decor{width:clamp(78px,6.8vw,106px)!important;}
}


/* Upgrade v20 — keep hero copy centered, show the complete character and
   constrain richer spiral vines to the truly free side gutters. */
html body .view-upgrade .upgrade-hero{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-hero-copy{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:3!important;
  width:min(860px,72vw)!important;
  max-width:860px!important;
  margin:0!important;
  padding:30px!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
}
html body .view-upgrade .upgrade-hero-character{
  position:absolute!important;
  right:clamp(170px,13.5vw,238px)!important;
  bottom:-54px!important;
  z-index:2!important;
  display:flex!important;
  width:auto!important;
  height:clamp(230px,20vw,320px)!important;
  max-width:none!important;
  overflow:visible!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-hero-character img{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
}

html body .view-upgrade .upgrade-viewport-side-decor{
  position:fixed!important;
  top:92px!important;
  bottom:28px!important;
  z-index:3!important;
  width:clamp(122px,8vw,154px)!important;
  max-width:154px!important;
  overflow:hidden!important;
  opacity:1!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-left{
  left:clamp(24px,2.2vw,46px)!important;
  right:auto!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  right:clamp(268px,18vw,338px)!important;
  left:auto!important;
  transform:scaleX(-1)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::before,
html body .view-upgrade .upgrade-viewport-side-decor::after{
  content:""!important;
  position:absolute!important;
  display:block!important;
  background:none!important;
  pointer-events:none!important;
  border:2px solid rgba(75,190,97,.30)!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
  border-radius:50%!important;
  filter:drop-shadow(0 0 8px rgba(117,243,206,.10))!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::before{
  left:18px!important;
  top:20%!important;
  width:78px!important;
  height:78px!important;
  transform:rotate(-32deg)!important;
}
html body .view-upgrade .upgrade-viewport-side-decor::after{
  left:42px!important;
  top:64%!important;
  width:96px!important;
  height:96px!important;
  transform:rotate(22deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine{
  position:absolute!important;
  display:block!important;
  background:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 7px rgba(75,190,97,.18))!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main{
  left:44px!important;
  top:-2%!important;
  bottom:-3%!important;
  width:82px!important;
  height:auto!important;
  border-left:3px solid rgba(75,190,97,.48)!important;
  border-radius:88% 0 72% 0 / 13% 0 87% 0!important;
  transform:rotate(-8deg)!important;
  transform-origin:50% 100%!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::before,
html body .view-upgrade .upgrade-viewport-vine.is-main::after{
  content:""!important;
  position:absolute!important;
  display:block!important;
  background:none!important;
  border-left:2px solid rgba(75,190,97,.33)!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::before{
  left:-24px!important;
  top:11%!important;
  width:72px!important;
  height:34%!important;
  border-radius:96% 0 70% 0 / 15% 0 85% 0!important;
  transform:rotate(-24deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-main::after{
  left:16px!important;
  top:47%!important;
  width:78px!important;
  height:31%!important;
  border-radius:68% 0 96% 0 / 11% 0 89% 0!important;
  transform:rotate(22deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-a{
  left:2px!important;
  top:23%!important;
  width:106px!important;
  height:154px!important;
  border-left:2px solid rgba(75,190,97,.38)!important;
  border-radius:98% 0 76% 0 / 14% 0 86% 0!important;
  transform:rotate(-28deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-a::before{
  content:""!important;
  position:absolute!important;
  left:24px!important;
  top:60px!important;
  width:64px!important;
  height:64px!important;
  border:2px solid rgba(75,190,97,.34)!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
  border-radius:50%!important;
  transform:rotate(-12deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-b{
  left:18px!important;
  top:58%!important;
  width:118px!important;
  height:174px!important;
  border-left:2px solid rgba(75,190,97,.36)!important;
  border-radius:76% 0 98% 0 / 11% 0 89% 0!important;
  transform:rotate(20deg)!important;
}
html body .view-upgrade .upgrade-viewport-vine.is-branch-b::before{
  content:""!important;
  position:absolute!important;
  left:30px!important;
  top:70px!important;
  width:82px!important;
  height:82px!important;
  border:2px solid rgba(75,190,97,.30)!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
  border-radius:50%!important;
  transform:rotate(16deg)!important;
}
html body .view-upgrade .upgrade-viewport-leaf.is-1{left:47%!important;top:13%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-2{left:69%!important;top:29%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-3{left:17%!important;top:47%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-4{left:68%!important;top:68%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-5{left:33%!important;top:85%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-1{left:9%!important;top:7%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-2{left:71%!important;top:43%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-3{left:11%!important;top:76%!important;}
html body .view-upgrade .upgrade-viewport-glint.is-1{left:58%!important;top:19%!important;}
html body .view-upgrade .upgrade-viewport-glint.is-2{left:46%!important;top:89%!important;}
@media(max-width:1450px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(238px,16.5vw,292px)!important;}
  html body .view-upgrade .upgrade-hero-character{right:clamp(130px,11vw,184px)!important;height:clamp(210px,18vw,280px)!important;}
}
@media(max-width:1220px){
  html body .view-upgrade .upgrade-viewport-side-decor{width:104px!important;}
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{right:clamp(192px,15vw,232px)!important;}
  html body .view-upgrade .upgrade-hero-character{right:clamp(84px,8vw,130px)!important;bottom:-34px!important;height:220px!important;}
}
@media(max-width:1080px){
  html body .view-upgrade .upgrade-viewport-side-decor{display:none!important;}
  html body .view-upgrade .upgrade-hero-character{display:none!important;}
}


/* Upgrade v21 — exact two-panel stars treatment, fully-contained hero character,
   and SVG side vines placed only inside the free viewport gutters. */
html body .view-upgrade .upgrade-hero{
  position:relative!important;
  min-height:clamp(245px,18vw,315px)!important;
  height:clamp(245px,18vw,315px)!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
html body .view-upgrade .upgrade-hero-stars{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:calc(50% + 1px)!important;
  height:100%!important;
  opacity:.20!important;
  pointer-events:none!important;
  background-image:url("/images/stars.png")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-hero-stars-left{left:0!important;transform:none!important;}
html body .view-upgrade .upgrade-hero-stars-right{right:0!important;transform:scaleX(-1)!important;transform-origin:center!important;}
html body .view-upgrade .upgrade-hero-copy{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:3!important;
  width:min(860px,72vw)!important;
  max-width:860px!important;
  margin:0!important;
  padding:30px!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
}
html body .view-upgrade .upgrade-hero-character{
  position:absolute!important;
  top:0!important;
  right:clamp(18px,2.4vw,46px)!important;
  bottom:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  width:clamp(145px,13vw,222px)!important;
  height:auto!important;
  max-width:18%!important;
  overflow:visible!important;
  pointer-events:none!important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.36)) drop-shadow(0 0 18px rgba(117,243,206,.1))!important;
}
html body .view-upgrade .upgrade-hero-character img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
}

html body .view-upgrade .upgrade-viewport-side-decor{
  position:fixed!important;
  top:88px!important;
  bottom:28px!important;
  z-index:2!important;
  display:block!important;
  width:clamp(82px,6.5vw,122px)!important;
  overflow:visible!important;
  opacity:.96!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-left{
  left:clamp(8px,1vw,18px)!important;
  right:auto!important;
  transform:none!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  right:calc(315px + clamp(18px,4vw,56px) + 10px)!important;
  left:auto!important;
  transform:scaleX(-1)!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-viewport-vine-svg{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  fill:none!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 6px rgba(75,190,97,.24)) drop-shadow(0 0 16px rgba(117,243,206,.08))!important;
  transform-origin:50% 100%!important;
  animation:upgradeViewportSvgSway 9.6s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-viewport-vine-svg .is-main{
  stroke:rgba(75,190,97,.55)!important;
  stroke-width:3.1!important;
}
html body .view-upgrade .upgrade-viewport-vine-svg .is-branch{
  stroke:rgba(75,190,97,.40)!important;
  stroke-width:2.25!important;
}
html body .view-upgrade .upgrade-viewport-vine-svg .is-thread{
  stroke:rgba(117,243,206,.24)!important;
  stroke-width:1.55!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine{display:none!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-1{left:58%!important;top:14%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-2{left:20%!important;top:30%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-3{left:62%!important;top:48%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-4{left:18%!important;top:68%!important;}
html body .view-upgrade .upgrade-viewport-leaf.is-5{left:57%!important;top:85%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-1{left:8%!important;top:8%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-2{left:67%!important;top:43%!important;}
html body .view-upgrade .upgrade-viewport-flower.is-3{left:10%!important;top:77%!important;}
html body .view-upgrade .upgrade-viewport-glint.is-1{left:72%!important;top:20%!important;}
html body .view-upgrade .upgrade-viewport-glint.is-2{left:44%!important;top:90%!important;}
@keyframes upgradeViewportSvgSway{
  0%,100%{transform:rotate(-1.2deg) translate3d(0,0,0)}
  34%{transform:rotate(1.4deg) translate3d(2px,-7px,0)}
  68%{transform:rotate(-.6deg) translate3d(-1px,-3px,0)}
}
@media(max-width:1320px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:calc(315px + 24px)!important;
  }
  html body .view-upgrade .upgrade-hero-character{width:clamp(128px,12vw,180px)!important;right:10px!important;}
}
@media(max-width:1080px){
  html body .view-upgrade .upgrade-viewport-side-decor{display:none!important;}
  html body .view-upgrade .upgrade-hero-character{display:none!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-viewport-vine-svg{animation:upgradeViewportSvgSway 11s ease-in-out infinite!important;}
}

/* Upgrade v22 — preserve the approved left decoration and hero placement;
   only enlarge the hero artwork and contain the right vine inside its free gutter. */
html body .view-upgrade .upgrade-hero-character img{
  transform:scale(1.12)!important;
  transform-origin:center bottom!important;
}

html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  right:clamp(252px,15.5vw,302px)!important;
  left:auto!important;
  width:clamp(88px,6.4vw,116px)!important;
  overflow:hidden!important;
  transform:scaleX(-1)!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right .upgrade-viewport-vine-svg{
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
@media(max-width:1320px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:clamp(232px,16vw,270px)!important;
    width:clamp(78px,6vw,102px)!important;
  }
}


/* Upgrade v23 — uncropped mirrored hero characters and right decoration in the free history gutter. */
html body .view-upgrade .upgrade-hero{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-hero-copy{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
}
html body .view-upgrade .upgrade-hero-character{
  position:absolute!important;
  top:-10px!important;
  bottom:-10px!important;
  z-index:2!important;
  display:flex!important;
  align-items:stretch!important;
  width:auto!important;
  height:calc(100% + 20px)!important;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.36)) drop-shadow(0 0 18px rgba(117,243,206,.10))!important;
}
html body .view-upgrade .upgrade-hero-character.is-left{
  left:clamp(8px,1.3vw,24px)!important;
  right:auto!important;
  justify-content:flex-start!important;
}
html body .view-upgrade .upgrade-hero-character.is-right{
  right:clamp(8px,1.3vw,24px)!important;
  left:auto!important;
  justify-content:flex-end!important;
}
html body .view-upgrade .upgrade-hero-character img{
  display:block!important;
  width:auto!important;
  height:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  clip-path:none!important;
  overflow:visible!important;
  user-select:none!important;
}

/* Keep the right vine entirely inside the empty strip before Your History. */
html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  position:fixed!important;
  right:calc(315px + clamp(24px,2.2vw,42px))!important;
  left:auto!important;
  width:clamp(92px,6.8vw,124px)!important;
  z-index:8!important;
  overflow:visible!important;
  opacity:1!important;
  transform:scaleX(-1)!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right .upgrade-viewport-vine-svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  opacity:1!important;
}
@media(max-width:1450px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:calc(285px + clamp(20px,2vw,34px))!important;
    width:clamp(84px,6.4vw,112px)!important;
  }
}
@media(max-width:1220px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:calc(250px + 18px)!important;
    width:82px!important;
  }
  html body .view-upgrade .upgrade-hero-character{
    top:-5px!important;
    bottom:-5px!important;
    height:calc(100% + 10px)!important;
  }
}
@media(max-width:1080px){
  html body .view-upgrade .upgrade-hero-character,
  html body .view-upgrade .upgrade-viewport-side-decor{display:none!important;}
}


/* Upgrade v24 — enlarge both hero characters in place and move only the right vine into the real free gutter. */
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-hero-character,
html body .view-upgrade .upgrade-hero-character img{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-hero-character img{
  transform:scale(1.28)!important;
  transform-origin:center bottom!important;
}

html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  position:fixed!important;
  left:auto!important;
  right:clamp(248px,14.2vw,290px)!important;
  width:clamp(92px,6.6vw,118px)!important;
  z-index:8!important;
  overflow:visible!important;
  opacity:1!important;
  transform:scaleX(-1)!important;
  transform-origin:center!important;
}
@media(max-width:1450px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:clamp(224px,13.7vw,258px)!important;
    width:clamp(84px,6.3vw,106px)!important;
  }
}
@media(max-width:1220px){
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:clamp(188px,12.7vw,218px)!important;
    width:82px!important;
  }
  html body .view-upgrade .upgrade-hero-character img{
    transform:scale(1.22)!important;
  }
}


/* Upgrade v25 — use the same top composition as Coffer Hall / Inventory. */
html body .view-upgrade,
html body .view-upgrade .upgrade-page{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-page{
  position:relative!important;
}
html body .view-upgrade .upgrade-hero{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:clamp(410px,33vw,520px)!important;
  min-height:0!important;
  margin-top:-24px!important;
  margin-bottom:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-hero::before,
html body .view-upgrade .upgrade-hero::after{display:none!important;content:none!important;}
html body .view-upgrade .upgrade-hero-stars{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:calc(50% + 1px)!important;
  height:100%!important;
  opacity:.20!important;
  pointer-events:none!important;
  background-image:url("/images/stars.png")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-hero-stars-left{left:0!important;right:auto!important;transform:none!important;}
html body .view-upgrade .upgrade-hero-stars-right{right:0!important;left:auto!important;transform:scaleX(-1)!important;transform-origin:center!important;}
html body .view-upgrade .upgrade-hero-character{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:stretch!important;
  width:clamp(245px,22vw,350px)!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  filter:none!important;
}
html body .view-upgrade .upgrade-hero-character.is-left{
  left:0!important;
  right:auto!important;
  justify-content:flex-start!important;
}
html body .view-upgrade .upgrade-hero-character.is-right{
  left:auto!important;
  right:0!important;
  justify-content:flex-end!important;
}
html body .view-upgrade .upgrade-hero-character img{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  transform:none!important;
  clip-path:none!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.42))!important;
}
html body .view-upgrade .upgrade-hero-character.is-left img{object-position:left bottom!important;}
html body .view-upgrade .upgrade-hero-character.is-right img{object-position:right bottom!important;}
html body .view-upgrade .upgrade-hero-copy{
  position:absolute!important;
  top:50%!important;
  left:clamp(250px,22vw,350px)!important;
  right:clamp(250px,22vw,350px)!important;
  z-index:3!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  text-align:center!important;
}
html body .view-upgrade .upgrade-hero-copy .eyebrow{
  width:100%!important;
  margin:0 auto 14px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  gap:14px!important;
  font-size:clamp(13px,1.05vw,17px)!important;
  letter-spacing:.22em!important;
}
html body .view-upgrade .upgrade-hero-copy h2{
  max-width:920px!important;
  margin:0 auto!important;
  font-size:clamp(44px,4.75vw,74px)!important;
  line-height:.99!important;
  text-wrap:balance!important;
}
html body .view-upgrade .upgrade-hero-copy>p:last-child{
  max-width:860px!important;
  margin:18px auto 0!important;
  font-size:clamp(14px,1.0vw,17px)!important;
  line-height:1.5!important;
  text-wrap:balance!important;
}
html body .view-upgrade .upgrade-hero-orbit,
html body .view-upgrade .upgrade-hero-filigree{display:none!important;}

/* The approved left decoration stays untouched. The right decoration is now
   anchored to the Upgrade page edge and occupies only the empty gutter. */
html body .view-upgrade .upgrade-viewport-side-decor.is-right{
  position:absolute!important;
  top:116px!important;
  bottom:auto!important;
  left:auto!important;
  right:clamp(-158px,-8.8vw,-112px)!important;
  width:clamp(92px,6.6vw,118px)!important;
  height:calc(100% - 150px)!important;
  min-height:760px!important;
  z-index:6!important;
  overflow:visible!important;
  opacity:1!important;
  transform:scaleX(-1)!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-viewport-side-decor.is-right .upgrade-viewport-vine-svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  opacity:1!important;
}
@media(max-width:1450px){
  html body .view-upgrade .upgrade-hero-copy{
    left:clamp(210px,21vw,285px)!important;
    right:clamp(210px,21vw,285px)!important;
  }
  html body .view-upgrade .upgrade-hero-copy h2{font-size:clamp(38px,4.65vw,60px)!important;}
  html body .view-upgrade .upgrade-hero-copy>p:last-child{font-size:clamp(15px,1.25vw,19px)!important;}
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{
    right:-108px!important;
    width:88px!important;
  }
}
@media(max-width:1120px){
  html body .view-upgrade .upgrade-hero{height:clamp(390px,43vw,475px)!important;}
  html body .view-upgrade .upgrade-hero-character{width:clamp(220px,25vw,300px)!important;}
  html body .view-upgrade .upgrade-hero-copy{left:155px!important;right:155px!important;}
  html body .view-upgrade .upgrade-hero-copy h2{font-size:clamp(32px,6.2vw,49px)!important;}
  html body .view-upgrade .upgrade-hero-copy>p:last-child{font-size:14px!important;}
  html body .view-upgrade .upgrade-viewport-side-decor.is-right{display:none!important;}
}
@media(max-width:760px){
  html body .view-upgrade .upgrade-hero{height:430px!important;margin-top:-16px!important;}
  html body .view-upgrade .upgrade-hero-character{width:225px!important;opacity:.72!important;}
  html body .view-upgrade .upgrade-hero-character.is-right{width:180px!important;opacity:.52!important;}
  html body .view-upgrade .upgrade-hero-copy{left:92px!important;right:92px!important;}
  html body .view-upgrade .upgrade-hero-copy h2{font-size:clamp(27px,8vw,38px)!important;}
  html body .view-upgrade .upgrade-hero-copy>p:last-child{font-size:12px!important;line-height:1.42!important;margin-top:14px!important;}
}


/* Upgrade page bottom decoration */
html body .view-upgrade .upgrade-page-bottom-decor{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:28px!important;
  height:210px!important;
  pointer-events:none!important;
  z-index:3!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-page-bottom-decor-side,
html body .view-upgrade .upgrade-page-bottom-decor-center{
  position:absolute!important;
  bottom:0!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-page-bottom-decor-side.is-left{
  left:22px!important;
  width:190px!important;
  height:190px!important;
}
html body .view-upgrade .upgrade-page-bottom-decor-side.is-right{
  right:360px!important;
  width:190px!important;
  height:190px!important;
  transform:scaleX(-1)!important;
}
html body .view-upgrade .upgrade-page-bottom-decor-center{
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(720px,62vw)!important;
  height:160px!important;
}
html body .view-upgrade .upgrade-bottom-vine,
html body .view-upgrade .upgrade-bottom-root{
  position:absolute!important;
  inset:0!important;
  display:block!important;
}
html body .view-upgrade .upgrade-bottom-vine::before,
html body .view-upgrade .upgrade-bottom-vine::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  border-left:3px solid rgba(75,190,97,.44);
  border-radius:50% 0 60% 0;
  filter:drop-shadow(0 0 10px rgba(117,243,206,.16));
}
html body .view-upgrade .upgrade-bottom-vine::before{
  left:38px;
  bottom:6px;
  width:98px;
  height:176px;
  border-top:3px solid rgba(75,190,97,.34);
  transform:rotate(-7deg);
}
html body .view-upgrade .upgrade-bottom-vine::after{
  left:88px;
  bottom:22px;
  width:62px;
  height:118px;
  border-top:2px solid rgba(117,243,206,.26);
  transform:rotate(18deg);
}
html body .view-upgrade .upgrade-bottom-vine>i,
html body .view-upgrade .upgrade-bottom-root>i{
  position:absolute!important;
  display:block!important;
}
html body .view-upgrade .upgrade-bottom-vine>i:nth-child(1){
  left:18px; bottom:28px; width:112px; height:112px; border:2px solid rgba(75,190,97,.28); border-right-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(-24deg);
}
html body .view-upgrade .upgrade-bottom-vine>i:nth-child(2){
  left:72px; bottom:72px; width:18px; height:34px; border-radius:999px; background:linear-gradient(180deg,#75f3ce,#4bbe61); transform:rotate(-26deg); box-shadow:0 0 12px rgba(117,243,206,.28);
}
html body .view-upgrade .upgrade-bottom-vine>i:nth-child(3){
  left:118px; bottom:124px; width:14px; height:28px; border-radius:999px; background:linear-gradient(180deg,#75f3ce,#4bbe61); transform:rotate(24deg); box-shadow:0 0 12px rgba(117,243,206,.22);
}
html body .view-upgrade .upgrade-bottom-vine>b,
html body .view-upgrade .upgrade-bottom-vine>em,
html body .view-upgrade .upgrade-bottom-root>b,
html body .view-upgrade .upgrade-bottom-root>em{
  position:absolute!important;
  color:#fae686!important;
  text-shadow:0 0 18px rgba(250,230,134,.48)!important;
}
html body .view-upgrade .upgrade-bottom-vine>b{left:0; bottom:96px; font-size:22px; animation:upgradeGardenPulse 5.6s ease-in-out infinite;}
html body .view-upgrade .upgrade-bottom-vine>em{left:144px; bottom:96px; font-style:normal; font-size:15px; color:#75f3ce!important; text-shadow:0 0 14px rgba(117,243,206,.42)!important; animation:upgradeSparkleDrift 6.4s ease-in-out infinite;}
html body .view-upgrade .upgrade-bottom-root{
  height:100%;
}
html body .view-upgrade .upgrade-bottom-root::before,
html body .view-upgrade .upgrade-bottom-root::after{
  content:"";
  position:absolute;
  left:50%;
  translate:-50% 0;
  border-top:3px solid rgba(75,190,97,.34);
  border-radius:50%;
  filter:drop-shadow(0 0 12px rgba(117,243,206,.18));
}
html body .view-upgrade .upgrade-bottom-root::before{bottom:22px; width:min(680px,100%); height:84px;}
html body .view-upgrade .upgrade-bottom-root::after{bottom:46px; width:min(480px,72%); height:56px; border-top-color:rgba(117,243,206,.28);}
html body .view-upgrade .upgrade-bottom-root>i:nth-child(1){left:40px; bottom:30px; width:160px; height:48px; border-top:3px solid rgba(75,190,97,.28); border-radius:50%; transform:rotate(8deg);}
html body .view-upgrade .upgrade-bottom-root>i:nth-child(2){left:180px; bottom:18px; width:138px; height:42px; border-top:3px solid rgba(117,243,206,.22); border-radius:50%; transform:rotate(-7deg);}
html body .view-upgrade .upgrade-bottom-root>i:nth-child(3){right:180px; bottom:18px; width:138px; height:42px; border-top:3px solid rgba(117,243,206,.22); border-radius:50%; transform:rotate(7deg);}
html body .view-upgrade .upgrade-bottom-root>i:nth-child(4){right:40px; bottom:30px; width:160px; height:48px; border-top:3px solid rgba(75,190,97,.28); border-radius:50%; transform:rotate(-8deg);}
html body .view-upgrade .upgrade-bottom-root>b{left:50%; bottom:92px; translate:-50% 0; font-size:24px; animation:upgradeGardenPulse 5.8s ease-in-out infinite reverse;}
html body .view-upgrade .upgrade-bottom-root>em{left:50%; bottom:124px; translate:-50% 0; font-style:normal; font-size:15px; color:#75f3ce!important; text-shadow:0 0 14px rgba(117,243,206,.42)!important; animation:upgradeSparkleDrift 6.8s ease-in-out infinite;}
@media (max-width: 1400px){
  html body .view-upgrade .upgrade-page-bottom-decor-side.is-right{right:300px!important;}
}
@media (max-width: 1100px){
  html body .view-upgrade .upgrade-page-bottom-decor{display:none!important;}
}


/* Upgrade v27 — visible bottom garden rendered in the normal page flow. */
html body .view-upgrade .upgrade-page > .upgrade-bottom-garden{
  position:relative!important;
  z-index:8!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  height:190px!important;
  min-height:190px!important;
  margin:24px 0 -42px!important;
  overflow:visible!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
html body .view-upgrade .upgrade-bottom-garden > svg{
  position:absolute!important;
  display:block!important;
  left:50%!important;
  bottom:0!important;
  width:min(1460px,100%)!important;
  height:190px!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-bottom-garden-roots path{
  vector-effect:non-scaling-stroke!important;
  stroke-width:2.4!important;
  stroke-dasharray:1 0!important;
  transform-origin:center bottom!important;
  animation:upgradeBottomRootBreathe 7.5s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-bottom-garden-roots path:nth-child(2){animation-delay:-2.4s!important;opacity:.72!important;}
html body .view-upgrade .upgrade-bottom-garden-roots path:nth-child(3),
html body .view-upgrade .upgrade-bottom-garden-roots path:nth-child(4){animation-delay:-4.2s!important;}
html body .view-upgrade .upgrade-bottom-garden-roots path:nth-child(5),
html body .view-upgrade .upgrade-bottom-garden-roots path:nth-child(6){animation-delay:-1.1s!important;opacity:.8!important;}
html body .view-upgrade .upgrade-bottom-garden-spirals path{
  vector-effect:non-scaling-stroke!important;
  transform-origin:center!important;
  animation:upgradeBottomSpiralSway 8.8s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-bottom-garden-spirals path:last-child{animation-delay:-4.4s!important;}
html body .view-upgrade .upgrade-bottom-garden-leaves{
  fill:#4BBE61!important;
}
html body .view-upgrade .upgrade-bottom-garden-leaves ellipse{
  transform-box:fill-box!important;
  transform-origin:center!important;
  animation:upgradeBottomLeafFloat 5.2s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-bottom-garden-leaves ellipse:nth-child(2n){animation-delay:-2.6s!important;fill:#75F3CE!important;}
html body .view-upgrade .upgrade-bottom-garden-leaves ellipse:nth-child(3n){animation-delay:-4s!important;}
html body .view-upgrade .upgrade-bottom-garden-flowers{
  fill:#FAE686!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:24px!important;
}
html body .view-upgrade .upgrade-bottom-garden-flowers text{
  transform-box:fill-box!important;
  transform-origin:center!important;
  animation:upgradeBottomFlowerGlow 4.8s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-bottom-garden-flowers text:nth-child(2n){animation-delay:-2.3s!important;}
html body .view-upgrade .upgrade-bottom-garden-flowers text:nth-child(3n){fill:#75F3CE!important;animation-delay:-3.7s!important;}
@keyframes upgradeBottomRootBreathe{
  0%,100%{opacity:.58;transform:translateY(2px) scaleX(.992)}
  50%{opacity:1;transform:translateY(-3px) scaleX(1.008)}
}
@keyframes upgradeBottomSpiralSway{
  0%,100%{opacity:.52;transform:rotate(-1.5deg) translateY(1px)}
  50%{opacity:.92;transform:rotate(2deg) translateY(-4px)}
}
@keyframes upgradeBottomLeafFloat{
  0%,100%{opacity:.66;scale:.9;filter:brightness(.92)}
  50%{opacity:1;scale:1.08;filter:brightness(1.18)}
}
@keyframes upgradeBottomFlowerGlow{
  0%,100%{opacity:.56;scale:.9;filter:drop-shadow(0 0 5px rgba(250,230,134,.28))}
  50%{opacity:1;scale:1.1;filter:drop-shadow(0 0 13px rgba(250,230,134,.7))}
}
@media(max-width:900px){
  html body .view-upgrade .upgrade-page > .upgrade-bottom-garden{
    height:135px!important;
    min-height:135px!important;
    margin-top:16px!important;
  }
  html body .view-upgrade .upgrade-bottom-garden > svg{height:135px!important;}
}


/* Upgrade v29 — open center column, centered dial motion, unique subtle panel textures. */
html body .view-upgrade .upgrade-probability-column{
  position:relative!important;
  isolation:isolate!important;
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  filter:none!important;
  animation:none!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-probability-column>.upgrade-panel-ornaments,
html body .view-upgrade .upgrade-probability-column::before,
html body .view-upgrade .upgrade-probability-column::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-chance-dial>.upgrade-center-motion{
  position:absolute!important;
  z-index:-1!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  width:300px!important;
  height:300px!important;
  translate:-50% -50%!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-dial>.upgrade-center-motion>b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  translate:-50% -50%!important;
}
html body .view-upgrade .upgrade-chance-dial::before,
html body .view-upgrade .upgrade-chance-dial::after{
  content:""!important;
  position:absolute!important;
  z-index:-2!important;
  left:50%!important;
  top:50%!important;
  width:336px!important;
  height:104px!important;
  border:1px solid rgba(117,243,206,.17)!important;
  border-radius:50%!important;
  background:none!important;
  pointer-events:none!important;
  transform-origin:center!important;
  filter:drop-shadow(0 0 8px rgba(117,243,206,.08))!important;
  animation:upgradeDialOrbitCentered 14s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial::before{
  transform:translate(-50%,-50%) rotate(34deg)!important;
}
html body .view-upgrade .upgrade-chance-dial::after{
  border-color:rgba(250,230,134,.12)!important;
  transform:translate(-50%,-50%) rotate(-34deg)!important;
  animation-direction:reverse!important;
  animation-duration:18s!important;
}
@keyframes upgradeDialOrbitCentered{
  from{rotate:0deg;}
  to{rotate:360deg;}
}

/* Each main panel receives its own quiet, non-matching material texture. */
html body .view-upgrade .upgrade-forge{
  background-image:
    repeating-linear-gradient(122deg,rgba(250,230,134,.018) 0 1px,transparent 1px 19px),
    repeating-linear-gradient(32deg,rgba(117,243,206,.012) 0 1px,transparent 1px 25px),
    radial-gradient(circle at 50% 45%,rgba(117,243,206,.14),transparent 34%),
    linear-gradient(180deg,rgba(20,25,23,.98),rgba(11,16,14,.98))!important;
}
html body .view-upgrade .upgrade-offer-column{
  background-image:
    repeating-linear-gradient(135deg,rgba(250,230,134,.028) 0 1px,transparent 1px 11px),
    radial-gradient(circle at 12% 8%,rgba(250,230,134,.07),transparent 34%),
    linear-gradient(150deg,rgba(31,49,33,.97),rgba(8,15,10,.985) 72%)!important;
}
html body .view-upgrade .upgrade-target-column{
  background-image:
    radial-gradient(circle,rgba(117,243,206,.035) 0 1px,transparent 1.3px),
    radial-gradient(circle at 86% 12%,rgba(117,243,206,.065),transparent 32%),
    linear-gradient(158deg,rgba(25,44,31,.97),rgba(7,14,10,.988) 74%)!important;
  background-size:13px 13px,auto,auto!important;
}
html body .view-upgrade .upgrade-catalog-panel.is-offers{
  background-image:
    repeating-linear-gradient(90deg,rgba(250,230,134,.022) 0 1px,transparent 1px 17px),
    linear-gradient(170deg,rgba(34,53,35,.96),rgba(8,15,10,.99))!important;
}
html body .view-upgrade .upgrade-catalog-panel.is-targets{
  background-image:
    repeating-linear-gradient(45deg,rgba(216,182,255,.018) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(-45deg,rgba(117,243,206,.014) 0 1px,transparent 1px 16px),
    linear-gradient(160deg,rgba(28,46,33,.97),rgba(7,14,10,.99))!important;
}
html body .view-upgrade .upgrade-offer-column .upgrade-selection-stack{
  background-image:
    repeating-linear-gradient(0deg,rgba(250,230,134,.018) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,rgba(4,10,6,.12),rgba(255,255,255,.008))!important;
}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack{
  background-image:
    radial-gradient(circle,rgba(117,243,206,.026) 0 1px,transparent 1.2px),
    linear-gradient(180deg,rgba(4,10,6,.10),rgba(255,255,255,.006))!important;
  background-size:18px 18px,auto!important;
}
html body .view-upgrade .upgrade-gil-offer{
  background-image:
    repeating-linear-gradient(115deg,rgba(250,230,134,.025) 0 1px,transparent 1px 9px),
    linear-gradient(135deg,rgba(28,42,30,.92),rgba(12,19,14,.96))!important;
}
html body .view-upgrade .upgrade-catalog-panel.is-offers .upgrade-reward-card{
  background-image:
    repeating-linear-gradient(125deg,rgba(250,230,134,.018) 0 1px,transparent 1px 12px),
    linear-gradient(155deg,rgba(29,47,31,.86),rgba(6,12,8,.97))!important;
}
html body .view-upgrade .upgrade-catalog-panel.is-targets .upgrade-reward-card{
  background-image:
    radial-gradient(circle at 70% 20%,rgba(216,182,255,.025) 0 1px,transparent 1.4px),
    linear-gradient(155deg,rgba(29,47,31,.86),rgba(6,12,8,.97))!important;
  background-size:15px 15px,auto!important;
}

/* Use the site's normal Buy/Open button construction; only retain Upgrade colors. */
html body .view-upgrade .upgrade-attempt-button{
  position:relative!important;
  z-index:4!important;
  min-height:48px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  padding:10px 12px!important;
  color:#182119!important;
  background:linear-gradient(135deg,#f4e2a7,#d4af54)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -3px 0 rgba(1,7,2,.30),
    0 5px 0 rgba(3,9,4,.32),
    0 10px 20px rgba(3,9,4,.18)!important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
html body .view-upgrade .upgrade-attempt-button::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-attempt-button:hover:not(:disabled){
  color:#101711!important;
  background:linear-gradient(135deg,#fff1bc,#e1bf67)!important;
  border-color:rgba(255,255,255,.32)!important;
  transform:translateY(-2px)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(1,7,2,.26),
    0 7px 0 rgba(3,9,4,.28),
    0 14px 24px rgba(3,9,4,.22),
    0 0 22px rgba(214,180,95,.14)!important;
}
html body .view-upgrade .upgrade-attempt-button:active:not(:disabled){
  transform:translateY(3px)!important;
  box-shadow:inset 0 2px 5px rgba(1,7,2,.28),0 2px 0 rgba(3,9,4,.30)!important;
}

/* Upgrade v29.1 — unify offer/desired textures and repair centered dial motion. */
html body .view-upgrade .upgrade-offer-column,
html body .view-upgrade .upgrade-target-column{
  background-image:
    radial-gradient(circle,rgba(117,243,206,.035) 0 1px,transparent 1.3px),
    radial-gradient(circle at 86% 12%,rgba(117,243,206,.065),transparent 32%),
    linear-gradient(158deg,rgba(25,44,31,.97),rgba(7,14,10,.988) 74%)!important;
  background-size:13px 13px,auto,auto!important;
}
html body .view-upgrade .upgrade-offer-column .upgrade-selection-stack,
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack{
  background-image:
    radial-gradient(circle,rgba(117,243,206,.026) 0 1px,transparent 1.2px),
    linear-gradient(180deg,rgba(4,10,6,.10),rgba(255,255,255,.006))!important;
  background-size:18px 18px,auto!important;
}

html body .view-upgrade .upgrade-probability-column{
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  box-shadow:0 10px 28px rgba(0,0,0,.34), inset 0 0 26px rgba(117,243,206,.05)!important;
}
html body .view-upgrade .upgrade-chance-dial::before,
html body .view-upgrade .upgrade-chance-dial::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:268px!important;
  height:268px!important;
  translate:-50% -50%!important;
  inset:auto!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:-1!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::before,
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  background:none!important;
  pointer-events:none!important;
  transform-origin:center!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::before{
  width:248px!important;
  height:92px!important;
  border:1px solid rgba(117,243,206,.17)!important;
  transform:translate(-50%,-50%) rotate(34deg)!important;
  animation:upgradeV29CenterOrbitA 14s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::after{
  width:216px!important;
  height:76px!important;
  border:1px solid rgba(250,230,134,.11)!important;
  transform:translate(-50%,-50%) rotate(-34deg)!important;
  animation:upgradeV29CenterOrbitB 17s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion > b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  translate:-50% -50%!important;
  font-size:18px!important;
  opacity:.78!important;
  color:#fae686!important;
  text-shadow:0 0 12px rgba(250,230,134,.42)!important;
  animation:upgradeCenterStar 2.8s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-center-motion > i,
html body .view-upgrade .upgrade-center-motion > span,
html body .view-upgrade .upgrade-probability-column .upgrade-center-motion > i,
html body .view-upgrade .upgrade-probability-column .upgrade-center-motion > span{
  display:none!important;
}
@keyframes upgradeV29CenterOrbitA{
  from{transform:translate(-50%,-50%) rotate(34deg);} 
  to{transform:translate(-50%,-50%) rotate(394deg);} 
}
@keyframes upgradeV29CenterOrbitB{
  from{transform:translate(-50%,-50%) rotate(-34deg);} 
  to{transform:translate(-50%,-50%) rotate(-394deg);} 
}

/* Upgrade v29.2 — keep the glow on the dial itself, remove the panel aura, and restore the centered orbit animation. */
html body .view-upgrade .upgrade-probability-column::before,
html body .view-upgrade .upgrade-probability-column::after,
html body .view-upgrade .upgrade-probability-column > .upgrade-panel-ornaments{
  display:none!important;
  content:none!important;
  animation:none!important;
}

html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:radial-gradient(circle at 50% 48%,rgba(57,104,59,.96) 0 35%,rgba(17,34,22,.98) 36% 56%,rgba(9,18,12,.98) 57% 69%,transparent 70%)!important;
  box-shadow:
    0 0 0 1px rgba(117,243,206,.10),
    0 0 30px rgba(117,243,206,.18),
    0 0 64px rgba(117,243,206,.12),
    0 0 86px rgba(214,72,72,.18),
    inset 0 0 26px rgba(117,243,206,.08)!important;
}
html body .view-upgrade .upgrade-chance-dial::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-16px!important;
  border-radius:50%!important;
  z-index:0!important;
  background:radial-gradient(circle,rgba(117,243,206,.14) 0,rgba(117,243,206,.08) 38%,rgba(214,72,72,.06) 70%,transparent 82%)!important;
  filter:blur(8px)!important;
  animation:upgradeV292DialGlow 3.4s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-chance-dial::after{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  inset:auto!important;
  width:270px!important;
  height:270px!important;
  translate:-50% -50%!important;
  display:block!important;
  place-items:unset!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:1!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::before,
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  background:none!important;
  pointer-events:none!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::before{
  width:250px!important;
  height:94px!important;
  border:1px solid rgba(117,243,206,.23)!important;
  box-shadow:0 0 18px rgba(117,243,206,.12)!important;
  transform:translate(-50%,-50%) rotate(34deg)!important;
  animation:upgradeV29CenterOrbitA 14s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::after{
  width:220px!important;
  height:78px!important;
  border:1px solid rgba(250,230,134,.16)!important;
  box-shadow:0 0 18px rgba(250,230,134,.08)!important;
  transform:translate(-50%,-50%) rotate(-34deg)!important;
  animation:upgradeV29CenterOrbitB 17s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion > b{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  translate:-50% -50%!important;
  z-index:1!important;
  font-size:18px!important;
  opacity:.78!important;
  color:#fae686!important;
  text-shadow:0 0 12px rgba(250,230,134,.42)!important;
  animation:upgradeCenterStar 2.8s ease-in-out infinite!important;
}
html body .view-upgrade .upgrade-chance-ring,
html body .view-upgrade .upgrade-chance-dial strong,
html body .view-upgrade .upgrade-chance-dial small{
  position:relative!important;
  z-index:2!important;
}
@keyframes upgradeV292DialGlow{
  0%,100%{opacity:.78;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

/* Upgrade v29.3 — remove only the forge-center aura and restore the approved animated orbit. */
html body .view-upgrade .upgrade-forge{
  background-image:
    repeating-linear-gradient(122deg,rgba(250,230,134,.018) 0 1px,transparent 1px 19px),
    repeating-linear-gradient(32deg,rgba(117,243,206,.012) 0 1px,transparent 1px 25px),
    linear-gradient(180deg,rgba(20,25,23,.98),rgba(11,16,14,.98))!important;
}
html body .view-upgrade .upgrade-probability-column{
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
html body .view-upgrade .upgrade-probability-column::before,
html body .view-upgrade .upgrade-probability-column::after,
html body .view-upgrade .upgrade-probability-column > .upgrade-panel-ornaments{
  display:none!important;
  content:none!important;
  opacity:0!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:radial-gradient(circle,#213025 0 48%,#111c14 49% 58%,transparent 59%)!important;
  box-shadow:
    0 0 34px hsla(var(--upgrade-chance-hue),80%,56%,.28),
    0 0 72px hsla(var(--upgrade-chance-hue),75%,45%,.16),
    inset 0 0 36px rgba(117,243,206,.08)!important;
}
html body .view-upgrade .upgrade-chance-dial::before,
html body .view-upgrade .upgrade-chance-dial::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  inset:auto!important;
  width:312px!important;
  height:312px!important;
  translate:-50% -50%!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::before,
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  background:none!important;
  border-radius:50%!important;
  pointer-events:none!important;
  transform-origin:center center!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::before{
  width:292px!important;
  height:104px!important;
  border:1px solid rgba(117,243,206,.24)!important;
  box-shadow:0 0 11px rgba(117,243,206,.10)!important;
  animation:upgradeV293OrbitForward 12s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion::after{
  width:258px!important;
  height:88px!important;
  border:1px solid rgba(250,230,134,.15)!important;
  box-shadow:0 0 9px rgba(250,230,134,.07)!important;
  animation:upgradeV293OrbitReverse 16s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion > b{
  display:none!important;
}
html body .view-upgrade .upgrade-chance-ring,
html body .view-upgrade .upgrade-chance-dial strong,
html body .view-upgrade .upgrade-chance-dial small{
  position:relative!important;
  z-index:2!important;
}
@keyframes upgradeV293OrbitForward{
  from{transform:translate(-50%,-50%) rotate(31deg)}
  to{transform:translate(-50%,-50%) rotate(391deg)}
}
@keyframes upgradeV293OrbitReverse{
  from{transform:translate(-50%,-50%) rotate(-38deg)}
  to{transform:translate(-50%,-50%) rotate(-398deg)}
}

/* Compact Ko-fi link beside the tagline without taking space from the topbar. */
html body .brand-copy{
  min-width:0!important;
}
html body .brand-tagline-row{
  position:relative!important;
  width:max-content!important;
  max-width:100%!important;
}
html body .brand-tagline-row > p{
  margin:2px 0 0!important;
}
html body .topbar-kofi-button{
  position:absolute!important;
  left:calc(100% + 9px)!important;
  top:50%!important;
  translate:0 -45%!important;
  width:100%!important;
  height:22px!important;
  min-width:150px!important;
  max-width:190px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:1px 7px!important;
  overflow:hidden!important;
  border:1px solid rgba(214,180,95,.32)!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,rgba(45,62,46,.96),rgba(20,31,22,.98))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 3px 10px rgba(3,9,4,.28)!important;
  text-decoration:none!important;
  z-index:4!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
html body .topbar-kofi-button img{
  display:block!important;
  width:100%!important;
  height:19px!important;
  object-fit:contain!important;
  border:0!important;
  filter:grayscale(1) sepia(1) saturate(.82) hue-rotate(354deg) brightness(1.16) contrast(.92)!important;
}
html body .topbar-kofi-button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(240,217,144,.62)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 5px 14px rgba(3,9,4,.34),0 0 14px rgba(214,180,95,.12)!important;
}
html body .topbar-kofi-button:focus-visible{
  outline:2px solid rgba(240,217,144,.78)!important;
  outline-offset:2px!important;
}
@media(max-width:1420px){
  html body .topbar-kofi-button{min-width:130px!important;max-width:160px!important;left:calc(100% + 6px)!important;}
}
@media(max-width:1180px){
  html body .topbar-kofi-button{display:none!important;}
}

/* Ko-fi v29.4 — remove the extra wrapper container and improve legibility. */
html body .topbar-kofi-button{
  left:calc(100% + 9px)!important;
  top:50%!important;
  translate:0 -46%!important;
  width:100%!important;
  height:31px!important;
  min-width:170px!important;
  max-width:215px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  transition:transform .18s ease,filter .18s ease!important;
}
html body .topbar-kofi-button img{
  display:block!important;
  width:100%!important;
  height:29px!important;
  object-fit:contain!important;
  border:0!important;
  filter:grayscale(1) sepia(1) saturate(.86) hue-rotate(354deg) brightness(1.18) contrast(.96) drop-shadow(0 2px 4px rgba(3,9,4,.3))!important;
}
html body .topbar-kofi-button:hover{
  transform:translateY(-1px) scale(1.025)!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:brightness(1.06)!important;
}
@media(max-width:1420px){
  html body .topbar-kofi-button{
    min-width:155px!important;
    max-width:190px!important;
    left:calc(100% + 6px)!important;
  }
}

/* Ko-fi panel button — same base as Achievements, with its own coffee animation. */
html body .kofi-launch-button{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
html body .kofi-launch-button .kofi-launch-copy{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
}
html body .kofi-launch-button .kofi-launch-copy>span{
  white-space:nowrap!important;
}
html body .kofi-cup-heart{
  position:relative!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:19px!important;
  height:14px!important;
  margin-top:2px!important;
  border:2px solid currentColor!important;
  border-top-width:1px!important;
  border-radius:3px 3px 7px 7px!important;
  box-shadow:0 2px 0 -1px currentColor,0 0 9px rgba(250,230,134,.14)!important;
  transform-origin:50% 80%!important;
}
html body .kofi-cup-heart::before{
  content:""!important;
  position:absolute!important;
  left:4px!important;
  bottom:15px!important;
  width:2px!important;
  height:8px!important;
  border-radius:999px!important;
  background:currentColor!important;
  opacity:.44!important;
  box-shadow:6px -2px 0 currentColor!important;
  filter:blur(.15px)!important;
}
html body .kofi-cup-heart::after{
  content:""!important;
  position:absolute!important;
  right:-7px!important;
  top:2px!important;
  width:7px!important;
  height:8px!important;
  border:2px solid currentColor!important;
  border-left:0!important;
  border-radius:0 7px 7px 0!important;
}
html body .kofi-cup-heart>em{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  color:#fae686!important;
  font-size:8px!important;
  line-height:1!important;
  font-style:normal!important;
  text-shadow:0 0 6px rgba(250,230,134,.55)!important;
}
html body .kofi-launch-button:hover:not(:disabled) .kofi-cup-heart{
  animation:kofiCupCheer .72s cubic-bezier(.2,.8,.25,1) both!important;
}
html body .kofi-launch-button:hover:not(:disabled) .kofi-cup-heart::before{
  animation:kofiSteamLift 1.25s ease-in-out infinite!important;
}
html body .kofi-launch-button:hover:not(:disabled) .kofi-cup-heart>em{
  animation:kofiHeartPulse .72s ease-in-out infinite alternate!important;
}
html body .kofi-launch-button::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:-34%!important;
  top:-85%!important;
  width:28%!important;
  height:270%!important;
  background:linear-gradient(90deg,transparent,rgba(250,230,134,.20),transparent)!important;
  transform:rotate(18deg)!important;
  opacity:0!important;
  pointer-events:none!important;
}
html body .kofi-launch-button:hover:not(:disabled)::after{
  animation:kofiWarmSweep 1.15s ease-out both!important;
}
@keyframes kofiCupCheer{
  0%{transform:translateY(0) rotate(0) scale(1)}
  25%{transform:translateY(-2px) rotate(-8deg) scale(1.05)}
  52%{transform:translateY(-1px) rotate(7deg) scale(1.08)}
  78%{transform:translateY(-2px) rotate(-3deg) scale(1.04)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes kofiSteamLift{
  0%{opacity:.12;transform:translateY(3px) scaleY(.72)}
  45%{opacity:.7;transform:translateY(-2px) scaleY(1.08)}
  100%{opacity:0;transform:translateY(-7px) scaleY(1.22)}
}
@keyframes kofiHeartPulse{
  from{transform:scale(.9);filter:brightness(.95)}
  to{transform:scale(1.25);filter:brightness(1.35)}
}
@keyframes kofiWarmSweep{
  0%{left:-34%;opacity:0}
  18%{opacity:.85}
  100%{left:112%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  html body .kofi-launch-button:hover:not(:disabled) .kofi-cup-heart{animation:kofiCupCheer 1.2s ease-in-out both!important;}
  html body .kofi-launch-button:hover:not(:disabled) .kofi-cup-heart::before{animation:kofiSteamLift 1.8s ease-in-out infinite!important;}
}

/* Ko-fi v29.6 — keep the launcher buttons in separate rows and repair the cup handle. */
html body .history-column .history-launch-buttons{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:minmax(34px,auto)!important;
  align-items:stretch!important;
  gap:6px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 10px!important;
  padding:0!important;
  overflow:visible!important;
}
html body .history-column .history-launch-buttons > .card-album-launch-button,
html body .history-column .history-launch-buttons > .achievements-launch-button,
html body .history-column .history-launch-buttons > .kofi-launch-button{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  width:100%!important;
  max-width:none!important;
  min-height:34px!important;
  margin:0!important;
  translate:none!important;
  transform:none!important;
  box-sizing:border-box!important;
}
html body .history-column .history-launch-buttons > .kofi-launch-button{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
html body .history-column .history-launch-buttons > .kofi-launch-button:hover:not(:disabled){
  transform:translateY(-1px)!important;
}
html body .history-column .kofi-launch-button .kofi-launch-copy{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  width:auto!important;
  min-width:0!important;
}
html body .history-column .kofi-cup-heart{
  position:relative!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 21px!important;
  width:19px!important;
  height:14px!important;
  margin:1px 3px 0 0!important;
  border:2px solid currentColor!important;
  border-top-width:1px!important;
  border-radius:3px 3px 7px 7px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  isolation:isolate!important;
}
html body .history-column .kofi-cup-heart::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  right:-9px!important;
  top:2px!important;
  width:9px!important;
  height:8px!important;
  box-sizing:border-box!important;
  border:2px solid currentColor!important;
  border-left:0!important;
  border-radius:0 8px 8px 0!important;
  transform:none!important;
}
html body .history-column .kofi-cup-heart::before{
  left:4px!important;
  bottom:15px!important;
}

/* Ko-fi v29.7 — independent physical rows; avoids all legacy launcher offsets. */
html body .history-column > .history-launch-stack{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:7px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 12px!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
html body .history-column > .history-launch-stack > .history-launch-row{
  position:relative!important;
  display:block!important;
  flex:0 0 38px!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button,
html body .history-column > .history-launch-stack > .history-launch-row > .achievements-launch-button,
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button{
  position:absolute!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  max-width:none!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  translate:none!important;
  transform:none!important;
  float:none!important;
  box-sizing:border-box!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button,
html body .history-column > .history-launch-stack > .history-launch-row > .achievements-launch-button:not(.kofi-launch-button){
  justify-content:space-between!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button{
  justify-content:flex-start!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button:hover:not(:disabled){
  transform:translateY(-1px)!important;
}
html body .history-column > .history-launch-stack + .history-panel{
  margin-top:0!important;
}

/* Ko-fi v29.8 — restore the original Card Album text alignment. */
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-content:stretch!important;
  column-gap:10px!important;
  text-align:left!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button > .card-album-launch-icon{
  grid-column:1!important;
  justify-self:start!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button > span:not(.card-album-launch-icon){
  grid-column:2!important;
  justify-self:start!important;
  text-align:left!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button > b{
  grid-column:3!important;
  justify-self:end!important;
}

/* Ko-fi v29.10 — tighter history spacing and slightly stronger coffee-button texture. */
html body .history-column > .history-launch-stack{
  margin-bottom:2px!important;
}
html body .history-column > .history-launch-stack + .history-panel{
  margin-top:0!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button{
  background:
    radial-gradient(circle at 16% 28%,rgba(250,230,134,.085) 0 1px,transparent 1.4px),
    radial-gradient(circle at 76% 68%,rgba(117,243,206,.055) 0 1px,transparent 1.5px),
    repeating-linear-gradient(128deg,rgba(250,230,134,.030) 0 1px,transparent 1px 9px),
    linear-gradient(155deg,rgba(40,51,34,.94),rgba(21,30,23,.96))!important;
  background-size:14px 14px,18px 18px,auto,auto!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button:hover:not(:disabled){
  background:
    radial-gradient(circle at 16% 28%,rgba(250,230,134,.110) 0 1px,transparent 1.4px),
    radial-gradient(circle at 76% 68%,rgba(117,243,206,.070) 0 1px,transparent 1.5px),
    repeating-linear-gradient(128deg,rgba(250,230,134,.040) 0 1px,transparent 1px 9px),
    linear-gradient(155deg,rgba(48,59,39,.96),rgba(23,33,25,.98))!important;
}

/* Upgrade v29.12 — remove the exact offer/target shells and restyle only their headings. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column.is-drop-ready,
html body .view-upgrade .upgrade-forge > .upgrade-target-column.is-drop-ready,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column.is-drop-active,
html body .view-upgrade .upgrade-forge > .upgrade-target-column.is-drop-active{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  filter:none!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column::after,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-panel-ornaments,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-panel-ornaments{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
}

/* Keep the original header footprint so the drag areas and controls do not move. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title{
  position:relative!important;
  z-index:9!important;
  display:grid!important;
  grid-template-columns:minmax(34px,1fr) auto minmax(34px,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:13px!important;
  width:100%!important;
  height:24px!important;
  min-height:24px!important;
  flex:0 0 24px!important;
  margin:0!important;
  padding:0 0 8px!important;
  box-sizing:border-box!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  content:"✦"!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  height:1px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:10px!important;
  line-height:1!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before{
  justify-content:flex-start!important;
  background:linear-gradient(90deg,transparent,currentColor)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  justify-content:flex-end!important;
  background:linear-gradient(90deg,currentColor,transparent)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span{
  grid-column:2!important;
  justify-self:center!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-transform:uppercase!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.15em!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span{
  color:#fae686!important;
  text-shadow:0 0 7px rgba(250,230,134,.88),0 0 19px rgba(250,230,134,.46)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span{
  color:#c895ff!important;
  text-shadow:0 0 7px rgba(200,149,255,.92),0 0 20px rgba(145,72,224,.55)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after{
  color:#fae686!important;
  box-shadow:0 0 8px rgba(250,230,134,.42)!important;
  text-shadow:0 0 7px rgba(250,230,134,.88)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  color:#c895ff!important;
  box-shadow:0 0 8px rgba(200,149,255,.42)!important;
  text-shadow:0 0 7px rgba(200,149,255,.9)!important;
}

/* Remove only the visible shell behind “Add gil to this attempt”; retain its padding and controls. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-gil-offer{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
}

@media(max-width:700px){
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title,
  html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title{
    grid-template-columns:minmax(20px,1fr) auto minmax(20px,1fr)!important;
    gap:9px!important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span,
  html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span{
    font-size:14px!important;
    letter-spacing:.11em!important;
  }
}



/* Upgrade v29.13 — expanded offer/target inner fields, greener forge, animated stars, upgraded dial, frameless desired reward tile. */
html body .view-upgrade .upgrade-forge{
  background:
    radial-gradient(circle at 18% 18%,rgba(111,226,163,.10),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(154,110,216,.06),transparent 26%),
    radial-gradient(circle at 50% 72%,rgba(75,190,97,.08),transparent 34%),
    linear-gradient(180deg,rgba(28,46,35,.97),rgba(12,23,16,.98))!important;
  border-color:rgba(214,180,95,.18)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column{
  position:relative!important;
}
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:362px!important;
  padding:14px 16px 14px!important;
  border:1px solid rgba(214,180,95,.12)!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(58,86,64,.18),rgba(15,24,18,.08)),
    linear-gradient(140deg,rgba(255,255,255,.02),rgba(255,255,255,0))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 0 60px rgba(111,226,163,.035)!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-target-stage{
  box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 0 60px rgba(200,149,255,.035)!important;
}
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-target-stage::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background-image:repeating-linear-gradient(125deg,rgba(250,230,134,.018) 0 1px,transparent 1px 14px)!important;
  opacity:.75!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-target-stage::before{
  background-image:repeating-linear-gradient(125deg,rgba(200,149,255,.018) 0 1px,transparent 1px 14px)!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack{
  position:relative!important;
  z-index:1!important;
  flex:1 1 auto!important;
  min-height:274px!important;
  max-height:none!important;
  padding-right:2px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack .upgrade-empty-selection{
  min-height:100%!important;
  height:100%!important;
  border-color:rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.02))!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer{
  position:relative!important;
  z-index:1!important;
  margin-top:12px!important;
  padding:0!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer .upgrade-gil-balance-row{
  align-items:center!important;
}
html body .view-upgrade .upgrade-zone-stars{
  position:absolute!important;
  inset:10px 10px 10px 10px!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-zone-stars > i{
  position:absolute!important;
  display:block!important;
  font-style:normal!important;
  line-height:1!important;
  opacity:0;
  will-change:transform,opacity!important;
}
html body .view-upgrade .upgrade-zone-stars.is-offer > i{
  color:rgba(250,230,134,.95)!important;
  text-shadow:0 0 10px rgba(250,230,134,.38)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-target > i{
  color:rgba(200,149,255,.97)!important;
  text-shadow:0 0 12px rgba(200,149,255,.44)!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-1{left:7%!important;top:14%!important;font-size:10px!important;animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-2{left:16%!important;top:56%!important;font-size:13px!important;animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-3{left:38%!important;top:24%!important;font-size:9px!important;animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-4{left:66%!important;top:18%!important;font-size:15px!important;animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-5{left:74%!important;top:62%!important;font-size:11px!important;animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-6{left:88%!important;top:34%!important;font-size:8px!important;animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-7{left:52%!important;top:77%!important;font-size:12px!important;animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
@keyframes upgradeAreaStarFloat{
  0%,100%{opacity:.06;transform:translate3d(0,0,0) scale(.82) rotate(0deg)}
  20%{opacity:.48;transform:translate3d(4px,-7px,0) scale(1) rotate(6deg)}
  50%{opacity:.95;transform:translate3d(-6px,-12px,0) scale(1.12) rotate(-7deg)}
  80%{opacity:.26;transform:translate3d(8px,-4px,0) scale(.94) rotate(5deg)}
}
html body .view-upgrade .upgrade-probability-column{
  background:linear-gradient(180deg,rgba(22,32,24,.34),rgba(10,16,12,.14))!important;
  border-color:rgba(214,180,95,.10)!important;
}
html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:
    radial-gradient(circle,rgba(42,64,47,.98) 0 42%,rgba(16,28,19,.98) 43% 58%,transparent 59%)!important;
  box-shadow:
    0 0 36px rgba(111,226,163,.16),
    0 0 74px rgba(214,180,95,.08),
    inset 0 0 30px rgba(255,255,255,.03)!important;
}
html body .view-upgrade .upgrade-chance-orbits{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:264px!important;
  height:264px!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-chance-orbits > i{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  border:1px solid rgba(117,243,206,.18)!important;
  box-shadow:0 0 16px rgba(117,243,206,.08)!important;
  transform-origin:center center!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a{
  width:218px!important;height:92px!important;transform:translate(-50%,-50%) rotate(18deg)!important;animation:upgradeChanceOrbitA 16s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b{
  width:214px!important;height:90px!important;transform:translate(-50%,-50%) rotate(78deg)!important;animation:upgradeChanceOrbitB 13s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c{
  width:226px!important;height:96px!important;transform:translate(-50%,-50%) rotate(-34deg)!important;animation:upgradeChanceOrbitC 18s linear infinite!important;
}
@keyframes upgradeChanceOrbitA{from{transform:translate(-50%,-50%) rotate(18deg)}to{transform:translate(-50%,-50%) rotate(378deg)}}
@keyframes upgradeChanceOrbitB{from{transform:translate(-50%,-50%) rotate(78deg)}to{transform:translate(-50%,-50%) rotate(-282deg)}}
@keyframes upgradeChanceOrbitC{from{transform:translate(-50%,-50%) rotate(-34deg)}to{transform:translate(-50%,-50%) rotate(326deg)}}
html body .view-upgrade .upgrade-center-motion{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:58px!important;
  height:58px!important;
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(250,230,134,.14),rgba(250,230,134,.02) 60%,transparent 72%)!important;
  z-index:1!important;
}
html body .view-upgrade .upgrade-center-motion > b{
  font-size:20px!important;
  color:#fae686!important;
  text-shadow:0 0 12px rgba(250,230,134,.62)!important;
  animation:upgradeChanceCenterPulse 3.2s ease-in-out infinite!important;
}
@keyframes upgradeChanceCenterPulse{
  0%,100%{transform:scale(.96);opacity:.78}
  50%{transform:scale(1.12);opacity:1}
}
html body .view-upgrade .upgrade-chance-ring{
  inset:8px!important;
  background:conic-gradient(from -90deg,rgba(250,230,134,.98) 0 var(--upgrade-chance),rgba(255,255,255,.09) var(--upgrade-chance) 100%)!important;
  -webkit-mask:radial-gradient(circle,transparent 0 63%,#000 64% 72%,transparent 73%)!important;
  mask:radial-gradient(circle,transparent 0 63%,#000 64% 72%,transparent 73%)!important;
  filter:drop-shadow(0 0 12px rgba(250,230,134,.34))!important;
  animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
  z-index:2!important;
}
html body .view-upgrade .upgrade-chance-ring > i{
  inset:18px!important;
  border-color:rgba(117,243,206,.28)!important;
  box-shadow:inset 0 0 18px rgba(117,243,206,.05)!important;
}
html body .view-upgrade .upgrade-chance-dial > strong,
html body .view-upgrade .upgrade-chance-dial > small{
  position:relative!important;
  z-index:3!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile,
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile{
  border:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile::before,
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile::before{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile img,
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile img{
  background:none!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-selection-actions{
  left:auto!important;
  right:2px!important;
  top:4px!important;
  opacity:.92!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-selection-actions button{
  background:rgba(22,30,27,.55)!important;
  border:1px solid rgba(200,149,255,.16)!important;
}
@media(max-width:900px){
  html body .view-upgrade .upgrade-offer-stage,
  html body .view-upgrade .upgrade-target-stage{
    min-height:320px!important;
  }
  html body .view-upgrade .upgrade-chance-orbits{
    width:236px!important;
    height:236px!important;
  }
  html body .view-upgrade .upgrade-chance-orbits > .is-a,
  html body .view-upgrade .upgrade-chance-orbits > .is-b,
  html body .view-upgrade .upgrade-chance-orbits > .is-c{
    width:198px!important;
    height:82px!important;
  }
}


/* Upgrade v29.14 — remove translucent area fills, reveal stars (including Reduced Motion), and restore the circular chance progress. */
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-target-stage::before{
  display:none!important;
  content:none!important;
  opacity:0!important;
  background:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack .upgrade-empty-selection{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-zone-stars{
  z-index:8!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  mix-blend-mode:screen!important;
}
html body .view-upgrade .upgrade-zone-stars > i{
  display:block!important;
  visibility:visible!important;
  opacity:0;
  animation-play-state:running!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-ring{
  position:absolute!important;
  display:block!important;
  visibility:visible!important;
  left:8px!important;
  top:8px!important;
  right:8px!important;
  bottom:8px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  border-radius:50%!important;
  opacity:1!important;
  z-index:4!important;
  transform:none!important;
  background:conic-gradient(
    from -90deg,
    #fae686 0 var(--upgrade-chance),
    rgba(255,255,255,.10) var(--upgrade-chance) 100%
  )!important;
  -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 63% 73%,transparent 74%)!important;
  mask:radial-gradient(circle,transparent 0 62%,#000 63% 73%,transparent 74%)!important;
  filter:drop-shadow(0 0 8px rgba(250,230,134,.55)) drop-shadow(0 0 18px rgba(250,230,134,.20))!important;
  animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-dial.is-guaranteed > .upgrade-chance-ring{
  background:conic-gradient(from -90deg,#75f3ce 0 100%,#75f3ce 100%)!important;
  filter:drop-shadow(0 0 10px rgba(117,243,206,.60)) drop-shadow(0 0 20px rgba(117,243,206,.22))!important;
}
html body .view-upgrade .upgrade-chance-dial > strong,
html body .view-upgrade .upgrade-chance-dial > small{
  position:relative!important;
  z-index:6!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-orbits{
  z-index:1!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion{
  z-index:2!important;
}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
  html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-ring{
    animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
  }
  html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeChanceOrbitA 16s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeChanceOrbitB 13s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeChanceOrbitC 18s linear infinite!important;}
  html body .view-upgrade .upgrade-center-motion > b{animation:upgradeChanceCenterPulse 3.2s ease-in-out infinite!important;}
}


/* Upgrade v29.15 — restore the original red-to-green meter, animate atom rings, strengthen stars, and remove the upper translucent wash. */
html body .view-upgrade .upgrade-forge{
  background-color:rgba(20,36,25,.985)!important;
  background-image:
    repeating-linear-gradient(132deg,rgba(250,230,134,.012) 0 1px,transparent 1px 19px),
    repeating-linear-gradient(42deg,rgba(117,243,206,.010) 0 1px,transparent 1px 25px)!important;
  box-shadow:0 24px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.025)!important;
}
html body .view-upgrade .upgrade-forge::before{
  opacity:.20!important;
  background-image:radial-gradient(circle,rgba(250,230,134,.055) 0 1px,transparent 1.45px)!important;
  background-size:34px 34px!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage,
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-target-stage::before{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Brighter stars that still fade in/out instead of being locked to a low opacity. */
html body .view-upgrade .upgrade-zone-stars > i{
  opacity:0;
  filter:brightness(1.18) saturate(1.08)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-offer > i{
  text-shadow:0 0 8px rgba(250,230,134,.82),0 0 18px rgba(250,230,134,.34)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-target > i{
  text-shadow:0 0 9px rgba(200,149,255,.88),0 0 20px rgba(145,72,224,.40)!important;
}
@keyframes upgradeAreaStarFloat{
  0%,100%{opacity:.20;transform:translate3d(0,0,0) scale(.86) rotate(0deg)}
  20%{opacity:.68;transform:translate3d(4px,-7px,0) scale(1.02) rotate(6deg)}
  50%{opacity:1;transform:translate3d(-6px,-13px,0) scale(1.18) rotate(-7deg)}
  80%{opacity:.48;transform:translate3d(8px,-4px,0) scale(.98) rotate(5deg)}
}

/* Original chance behavior: starts at twelve o'clock, fills clockwise, red at 0 and green at 100. */
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-ring,
html body .view-upgrade .upgrade-chance-dial.is-guaranteed > .upgrade-chance-ring{
  position:absolute!important;
  inset:8px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  border-radius:50%!important;
  transform:none!important;
  transform-origin:center!important;
  opacity:1!important;
  z-index:4!important;
  background:conic-gradient(
    from 0deg,
    hsl(var(--upgrade-chance-hue) 78% 52%) 0 var(--upgrade-chance),
    rgba(255,255,255,.075) var(--upgrade-chance) 100%
  )!important;
  -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 63% 73%,transparent 74%)!important;
  mask:radial-gradient(circle,transparent 0 62%,#000 63% 73%,transparent 74%)!important;
  filter:
    drop-shadow(0 0 8px hsla(var(--upgrade-chance-hue),88%,58%,.58))
    drop-shadow(0 0 18px hsla(var(--upgrade-chance-hue),82%,50%,.22))!important;
  transition:--upgrade-chance .6s ease,--upgrade-chance-hue .6s ease,filter .6s ease!important;
  animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
}

/* Atom-like ellipses rotate independently without their static transforms blocking animation. */
html body .view-upgrade .upgrade-chance-orbits > .is-a{
  transform:translate(-50%,-50%)!important;
  rotate:18deg;
  animation:upgradeChanceOrbitRotateA 16s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b{
  transform:translate(-50%,-50%)!important;
  rotate:78deg;
  animation:upgradeChanceOrbitRotateB 13s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c{
  transform:translate(-50%,-50%)!important;
  rotate:-34deg;
  animation:upgradeChanceOrbitRotateC 18s linear infinite!important;
}
@keyframes upgradeChanceOrbitRotateA{from{rotate:18deg}to{rotate:378deg}}
@keyframes upgradeChanceOrbitRotateB{from{rotate:78deg}to{rotate:-282deg}}
@keyframes upgradeChanceOrbitRotateC{from{rotate:-34deg}to{rotate:326deg}}

@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeChanceOrbitRotateA 16s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeChanceOrbitRotateB 13s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeChanceOrbitRotateC 18s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-ring,
  html body .view-upgrade .upgrade-chance-dial.is-guaranteed > .upgrade-chance-ring{
    animation:upgradeDialBreathe 2.8s ease-in-out infinite!important;
  }
}


/* Upgrade v29.16 — keep atom rings pinned to the center and remove the last semi-transparent side shells. */
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:1px solid rgba(214,180,95,.10)!important;
  border-radius:22px!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body .view-upgrade .upgrade-target-stage{
  border-color:rgba(200,149,255,.10)!important;
}
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-target-stage::before,
html body .view-upgrade .upgrade-offer-stage::after,
html body .view-upgrade .upgrade-target-stage::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack,
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer{
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
html body .view-upgrade .upgrade-zone-stars > i{
  opacity:0!important;
}
html body .view-upgrade .upgrade-zone-stars.is-offer > i{
  color:rgba(250,230,134,.98)!important;
  text-shadow:0 0 10px rgba(250,230,134,.92),0 0 20px rgba(250,230,134,.38)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-target > i{
  color:rgba(214,165,255,.99)!important;
  text-shadow:0 0 10px rgba(214,165,255,.94),0 0 22px rgba(145,72,224,.42)!important;
}
@keyframes upgradeAreaStarFloat{
  0%,100%{opacity:.34;transform:translate3d(0,0,0) scale(.86) rotate(0deg)}
  20%{opacity:.78;transform:translate3d(4px,-7px,0) scale(1.03) rotate(6deg)}
  50%{opacity:1;transform:translate3d(-6px,-13px,0) scale(1.18) rotate(-7deg)}
  80%{opacity:.62;transform:translate3d(8px,-4px,0) scale(.98) rotate(5deg)}
}
html body .view-upgrade .upgrade-chance-dial{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-orbits{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:196px!important;
  height:196px!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:50% 50%!important;
  z-index:1!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-orbits > i{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform-origin:50% 50%!important;
  background:none!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a{
  width:168px!important;
  height:68px!important;
  animation:upgradeChanceOrbitRotateFixedA 16s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b{
  width:162px!important;
  height:64px!important;
  animation:upgradeChanceOrbitRotateFixedB 13s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c{
  width:174px!important;
  height:72px!important;
  animation:upgradeChanceOrbitRotateFixedC 18s linear infinite!important;
}
@keyframes upgradeChanceOrbitRotateFixedA{from{transform:translate(-50%,-50%) rotate(18deg)}to{transform:translate(-50%,-50%) rotate(378deg)}}
@keyframes upgradeChanceOrbitRotateFixedB{from{transform:translate(-50%,-50%) rotate(78deg)}to{transform:translate(-50%,-50%) rotate(-282deg)}}
@keyframes upgradeChanceOrbitRotateFixedC{from{transform:translate(-50%,-50%) rotate(-34deg)}to{transform:translate(-50%,-50%) rotate(326deg)}}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeChanceOrbitRotateFixedA 16s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeChanceOrbitRotateFixedB 13s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeChanceOrbitRotateFixedC 18s linear infinite!important;}
}


/* Upgrade v29.17 — one uniform forge surface and atom rings locked to a fixed center. */
html body .view-upgrade .upgrade-forge{
  background:#1b3022!important;
  background-color:#1b3022!important;
  background-image:none!important;
  box-shadow:0 24px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.025)!important;
}
html body .view-upgrade .upgrade-forge::before,
html body .view-upgrade .upgrade-forge::after,
html body .view-upgrade .upgrade-forge > .upgrade-forge-ambient{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
  filter:none!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column.is-drop-ready,
html body .view-upgrade .upgrade-forge > .upgrade-target-column.is-drop-ready,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column.is-drop-active,
html body .view-upgrade .upgrade-forge > .upgrade-target-column.is-drop-active{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  clip-path:none!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column::after,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column::before,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
  opacity:0!important;
}
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-offer-stage::after,
html body .view-upgrade .upgrade-target-stage::before,
html body .view-upgrade .upgrade-target-stage::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
  opacity:0!important;
}
html body .view-upgrade .upgrade-offer-column .upgrade-selection-stack,
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack,
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-orbits{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:248px!important;
  height:248px!important;
  margin:0!important;
  translate:-50% -50%!important;
  transform:none!important;
  transform-origin:50% 50%!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:1!important;
}
html body .view-upgrade .upgrade-chance-orbits > i{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  translate:none!important;
  transform-origin:50% 50%!important;
  will-change:transform!important;
}
html body .view-upgrade .upgrade-chance-orbits > i::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  background:none!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a{
  animation:upgradeAtomFixedA 14s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a::before{
  width:220px!important;
  height:82px!important;
  border:1px solid rgba(117,243,206,.24)!important;
  box-shadow:0 0 17px rgba(117,243,206,.10)!important;
  rotate:18deg!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b{
  animation:upgradeAtomFixedB 17s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b::before{
  width:214px!important;
  height:76px!important;
  border:1px solid rgba(117,243,206,.18)!important;
  box-shadow:0 0 15px rgba(117,243,206,.08)!important;
  rotate:78deg!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c{
  animation:upgradeAtomFixedC 20s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c::before{
  width:226px!important;
  height:88px!important;
  border:1px solid rgba(250,230,134,.13)!important;
  box-shadow:0 0 16px rgba(250,230,134,.06)!important;
  rotate:-34deg!important;
}
@keyframes upgradeAtomFixedA{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes upgradeAtomFixedB{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes upgradeAtomFixedC{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeAtomFixedA 14s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeAtomFixedB 17s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeAtomFixedC 20s linear infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
}


/* Upgrade v29.17.1 — override the earlier important ellipse transforms so only rotation remains animated. */
html body .view-upgrade .upgrade-chance-orbits > .is-a,
html body .view-upgrade .upgrade-chance-orbits > .is-b,
html body .view-upgrade .upgrade-chance-orbits > .is-c{
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  translate:none!important;
  transform:none!important;
  transform-origin:50% 50%!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeAtomPinnedA 14s linear infinite!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeAtomPinnedB 17s linear infinite!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeAtomPinnedC 20s linear infinite!important;}
@keyframes upgradeAtomPinnedA{from{rotate:0deg}to{rotate:360deg}}
@keyframes upgradeAtomPinnedB{from{rotate:0deg}to{rotate:-360deg}}
@keyframes upgradeAtomPinnedC{from{rotate:0deg}to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeAtomPinnedA 14s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeAtomPinnedB 17s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeAtomPinnedC 20s linear infinite!important;}
}


/* Upgrade v29.17.2 — keep each ellipse centered while its wrapper rotates. */
html body .view-upgrade .upgrade-chance-orbits > .is-a::before{
  rotate:none!important;
  transform:translate(-50%,-50%) rotate(18deg)!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b::before{
  rotate:none!important;
  transform:translate(-50%,-50%) rotate(78deg)!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c::before{
  rotate:none!important;
  transform:translate(-50%,-50%) rotate(-34deg)!important;
}


/* Upgrade v29.18 — restore forge texture, restore star animation visibility, and place larger atom rings behind the dial. */
html body .view-upgrade .upgrade-forge{
  background:
    linear-gradient(180deg,rgba(27,48,34,.985),rgba(21,39,29,.99))!important;
  background-color:#1b3022!important;
  background-image:none!important;
}
html body .view-upgrade .upgrade-forge::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.36!important;
  background-image:
    repeating-linear-gradient(132deg,rgba(250,230,134,.018) 0 1px,transparent 1px 19px),
    repeating-linear-gradient(42deg,rgba(117,243,206,.014) 0 1px,transparent 1px 25px),
    radial-gradient(circle at 18% 20%,rgba(250,230,134,.06) 0 1.1px,transparent 1.6px),
    radial-gradient(circle at 82% 72%,rgba(117,243,206,.045) 0 1.1px,transparent 1.6px)!important;
  background-size:auto,auto,36px 36px,44px 44px!important;
  background-position:0 0,0 0,0 0,8px 10px!important;
  pointer-events:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body .view-upgrade .upgrade-forge::after{
  display:none!important;
}
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  position:relative!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-offer-stage::after,
html body .view-upgrade .upgrade-target-stage::before,
html body .view-upgrade .upgrade-target-stage::after{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-zone-stars{
  position:absolute!important;
  inset:10px!important;
  z-index:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-zone-stars > i{
  position:absolute!important;
  opacity:0!important;
  display:block!important;
  font-style:normal!important;
  line-height:1!important;
  will-change:transform,opacity!important;
  filter:brightness(1.18) saturate(1.08)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-offer > i{
  color:rgba(250,230,134,.99)!important;
  text-shadow:0 0 10px rgba(250,230,134,.92),0 0 22px rgba(250,230,134,.42)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-target > i{
  color:rgba(214,165,255,.99)!important;
  text-shadow:0 0 10px rgba(214,165,255,.95),0 0 22px rgba(145,72,224,.44)!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack{
  position:relative!important;
  z-index:2!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-1{left:7%!important;top:14%!important;font-size:10px!important;animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-2{left:16%!important;top:56%!important;font-size:13px!important;animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-3{left:38%!important;top:24%!important;font-size:9px!important;animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-4{left:66%!important;top:18%!important;font-size:15px!important;animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-5{left:74%!important;top:62%!important;font-size:11px!important;animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-6{left:88%!important;top:34%!important;font-size:8px!important;animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
html body .view-upgrade .upgrade-zone-stars > .is-7{left:52%!important;top:77%!important;font-size:12px!important;animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
@keyframes upgradeAreaStarFloat{
  0%,100%{opacity:.34;transform:translate3d(0,0,0) scale(.86) rotate(0deg)}
  20%{opacity:.78;transform:translate3d(4px,-7px,0) scale(1.03) rotate(6deg)}
  50%{opacity:1;transform:translate3d(-6px,-13px,0) scale(1.18) rotate(-7deg)}
  80%{opacity:.62;transform:translate3d(8px,-4px,0) scale(.98) rotate(5deg)}
}
html body .view-upgrade .upgrade-probability-column,
html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-orbits{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:288px!important;
  height:288px!important;
  margin:0!important;
  translate:-50% -50%!important;
  transform:none!important;
  transform-origin:50% 50%!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:0!important;
}
html body .view-upgrade .upgrade-chance-orbits > i{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  transform-origin:50% 50%!important;
}
html body .view-upgrade .upgrade-chance-orbits > i::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  background:none!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeAtomBackA 14s linear infinite!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-a::before{width:254px!important;height:96px!important;border:1px solid rgba(117,243,206,.22)!important;box-shadow:0 0 17px rgba(117,243,206,.10)!important;transform:translate(-50%,-50%) rotate(18deg)!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeAtomBackB 17s linear infinite!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-b::before{width:246px!important;height:88px!important;border:1px solid rgba(117,243,206,.18)!important;box-shadow:0 0 15px rgba(117,243,206,.08)!important;transform:translate(-50%,-50%) rotate(78deg)!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeAtomBackC 20s linear infinite!important;}
html body .view-upgrade .upgrade-chance-orbits > .is-c::before{width:262px!important;height:102px!important;border:1px solid rgba(250,230,134,.14)!important;box-shadow:0 0 16px rgba(250,230,134,.06)!important;transform:translate(-50%,-50%) rotate(-34deg)!important;}
@keyframes upgradeAtomBackA{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes upgradeAtomBackB{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes upgradeAtomBackC{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-ring{z-index:3!important;position:absolute!important;}
html body .view-upgrade .upgrade-chance-dial > strong,
html body .view-upgrade .upgrade-chance-dial > small{position:relative!important;z-index:4!important;}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeAreaStarFloat 8.6s ease-in-out infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeAreaStarFloat 10.4s ease-in-out -2.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeAreaStarFloat 7.8s ease-in-out -1.3s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeAreaStarFloat 11.2s ease-in-out -4.8s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeAreaStarFloat 9.4s ease-in-out -3.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeAreaStarFloat 8.8s ease-in-out -5.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeAreaStarFloat 10.7s ease-in-out -1.8s infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-a{animation:upgradeAtomBackA 14s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b{animation:upgradeAtomBackB 17s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c{animation:upgradeAtomBackC 20s linear infinite!important;}
}


/* Upgrade v29.19 — stronger visible texture and atom ellipses animated behind the dial face. */
html body .view-upgrade .upgrade-forge{
  position:relative!important;
  isolation:isolate!important;
  background:#1b3022!important;
  background-color:#1b3022!important;
  background-image:none!important;
}
html body .view-upgrade .upgrade-forge::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  opacity:.72!important;
  background-image:
    repeating-linear-gradient(132deg,rgba(250,230,134,.035) 0 1px,transparent 1px 19px),
    repeating-linear-gradient(42deg,rgba(117,243,206,.028) 0 1px,transparent 1px 25px),
    radial-gradient(circle at 18% 20%,rgba(250,230,134,.12) 0 1.1px,transparent 1.65px),
    radial-gradient(circle at 82% 72%,rgba(117,243,206,.09) 0 1.1px,transparent 1.65px)!important;
  background-size:auto,auto,36px 36px,44px 44px!important;
  background-position:0 0,0 0,0 0,8px 10px!important;
  pointer-events:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column{
  position:relative!important;
  z-index:1!important;
}

/* The dial face is now its own layer, allowing the atom rings to pass behind it. */
html body .view-upgrade .upgrade-chance-dial{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-chance-dial::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  border-radius:50%!important;
  opacity:1!important;
  background:radial-gradient(circle,#2a4430 0 47%,#17271c 48% 58%,rgba(12,20,14,.98) 59% 68%,transparent 69%)!important;
  box-shadow:
    0 0 34px hsla(var(--upgrade-chance-hue),80%,56%,.24),
    0 0 68px rgba(75,190,97,.12),
    inset 0 0 34px rgba(117,243,206,.07)!important;
  pointer-events:none!important;
  animation:none!important;
  transform:none!important;
}
html body .view-upgrade .upgrade-chance-dial::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  inset:20px!important;
  border:1px solid rgba(117,243,206,.13)!important;
  border-radius:50%!important;
  opacity:1!important;
  background:none!important;
  box-shadow:inset 0 0 20px rgba(117,243,206,.035)!important;
  pointer-events:none!important;
  animation:none!important;
  transform:none!important;
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-orbits{
  position:absolute!important;
  z-index:1!important;
  left:50%!important;
  top:50%!important;
  width:326px!important;
  height:326px!important;
  margin:0!important;
  translate:-50% -50%!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-orbits > i{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  transform:none!important;
  rotate:none!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-chance-orbits > i::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  background:none!important;
  pointer-events:none!important;
  transform-origin:50% 50%!important;
  will-change:transform!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-a::before{
  width:292px!important;
  height:108px!important;
  border:1px solid rgba(117,243,206,.27)!important;
  box-shadow:0 0 18px rgba(117,243,206,.11)!important;
  animation:upgradeAtomEllipseA 14s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-b::before{
  width:282px!important;
  height:100px!important;
  border:1px solid rgba(117,243,206,.21)!important;
  box-shadow:0 0 16px rgba(117,243,206,.09)!important;
  animation:upgradeAtomEllipseB 17s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-orbits > .is-c::before{
  width:302px!important;
  height:116px!important;
  border:1px solid rgba(250,230,134,.16)!important;
  box-shadow:0 0 17px rgba(250,230,134,.07)!important;
  animation:upgradeAtomEllipseC 20s linear infinite!important;
}
@keyframes upgradeAtomEllipseA{
  from{transform:translate(-50%,-50%) rotate(18deg)}
  to{transform:translate(-50%,-50%) rotate(378deg)}
}
@keyframes upgradeAtomEllipseB{
  from{transform:translate(-50%,-50%) rotate(78deg)}
  to{transform:translate(-50%,-50%) rotate(-282deg)}
}
@keyframes upgradeAtomEllipseC{
  from{transform:translate(-50%,-50%) rotate(-34deg)}
  to{transform:translate(-50%,-50%) rotate(326deg)}
}
html body .view-upgrade .upgrade-chance-dial > .upgrade-chance-ring{
  position:absolute!important;
  z-index:3!important;
}
html body .view-upgrade .upgrade-chance-dial > strong,
html body .view-upgrade .upgrade-chance-dial > small{
  position:relative!important;
  z-index:4!important;
}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-chance-orbits > .is-a::before{animation:upgradeAtomEllipseA 14s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-b::before{animation:upgradeAtomEllipseB 17s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-orbits > .is-c::before{animation:upgradeAtomEllipseC 20s linear infinite!important;}
}


/* Upgrade v29.20 — restore the original dial, pin the atom rings behind it, and use a textured forest gradient. */
html body .view-upgrade .upgrade-forge{
  position:relative!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 14% 12%,rgba(75,190,97,.10),transparent 34%),
    radial-gradient(circle at 86% 82%,rgba(53,70,64,.18),transparent 42%),
    linear-gradient(135deg,#233d2c 0%,#1b3022 48%,#14271b 100%)!important;
  background-color:#1b3022!important;
  box-shadow:0 24px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.03)!important;
}
html body .view-upgrade .upgrade-forge::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  opacity:.68!important;
  background-image:
    repeating-linear-gradient(132deg,rgba(250,230,134,.032) 0 1px,transparent 1px 19px),
    repeating-linear-gradient(42deg,rgba(117,243,206,.024) 0 1px,transparent 1px 25px),
    radial-gradient(circle,rgba(250,230,134,.095) 0 1px,transparent 1.55px),
    radial-gradient(circle,rgba(117,243,206,.065) 0 1px,transparent 1.55px)!important;
  background-size:auto,auto,38px 38px,47px 47px!important;
  background-position:0 0,0 0,0 0,11px 13px!important;
  pointer-events:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body .view-upgrade .upgrade-forge::after{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column{
  position:relative!important;
  z-index:1!important;
}

/* Keep the exact pre-v29.19 circular dial face and its progress ring intact. */
html body .view-upgrade .upgrade-chance-stage{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:190px!important;
  height:190px!important;
  margin:0!important;
  overflow:visible!important;
  z-index:2!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial{
  position:relative!important;
  z-index:2!important;
  width:190px!important;
  height:190px!important;
  aspect-ratio:1!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  border-radius:50%!important;
  background:radial-gradient(circle,#213025 0 48%,#111c14 49% 58%,transparent 59%)!important;
  box-shadow:
    0 0 34px hsla(var(--upgrade-chance-hue),80%,56%,.28),
    0 0 72px hsla(var(--upgrade-chance-hue),75%,45%,.16),
    inset 0 0 36px rgba(117,243,206,.08)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial::before,
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-chance-stage .upgrade-chance-ring{
  position:absolute!important;
  z-index:3!important;
}
html body .view-upgrade .upgrade-chance-stage .upgrade-chance-dial > strong,
html body .view-upgrade .upgrade-chance-stage .upgrade-chance-dial > small{
  position:relative!important;
  z-index:4!important;
}

/* The atom is a sibling layer, so it can rotate behind the complete circular face without cutting it. */
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits{
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:50%!important;
  width:288px!important;
  height:288px!important;
  margin:0!important;
  translate:-50% -50%!important;
  transform:none!important;
  rotate:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > i{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  translate:none!important;
  rotate:none!important;
  transform-origin:50% 50%!important;
  will-change:transform!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > i::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border-radius:50%!important;
  background:none!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-a{
  animation:upgradeAtomBehindA 14s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-a::before{
  width:254px!important;
  height:96px!important;
  border:1px solid rgba(117,243,206,.22)!important;
  box-shadow:0 0 17px rgba(117,243,206,.10)!important;
  transform:translate(-50%,-50%) rotate(18deg)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-b{
  animation:upgradeAtomBehindB 17s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-b::before{
  width:246px!important;
  height:88px!important;
  border:1px solid rgba(117,243,206,.18)!important;
  box-shadow:0 0 15px rgba(117,243,206,.08)!important;
  transform:translate(-50%,-50%) rotate(78deg)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-c{
  animation:upgradeAtomBehindC 20s linear infinite!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-c::before{
  width:262px!important;
  height:102px!important;
  border:1px solid rgba(250,230,134,.14)!important;
  box-shadow:0 0 16px rgba(250,230,134,.06)!important;
  transform:translate(-50%,-50%) rotate(-34deg)!important;
}
@keyframes upgradeAtomBehindA{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes upgradeAtomBehindB{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes upgradeAtomBehindC{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-a{animation:upgradeAtomBehindA 14s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-b{animation:upgradeAtomBehindB 17s linear infinite!important;}
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits > .is-c{animation:upgradeAtomBehindC 20s linear infinite!important;}
}


/* Upgrade v29.27 — isolated live atom rings driven by requestAnimationFrame. */
html body .view-upgrade .upgrade-chance-stage{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbits,
html body .view-upgrade .upgrade-chance-stage > .upgrade-atom-svg,
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-orbit-front{
  display:none!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:288px!important;
  height:288px!important;
  margin:0!important;
  transform:translate(-50%,-50%) rotate(0deg)!important;
  transform-origin:50% 50%!important;
  pointer-events:none!important;
  overflow:visible!important;
  will-change:transform!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-a,
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-b,
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-back{
  z-index:0!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-front{
  z-index:3!important;
  clip-path:circle(94px at 50% 50%)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > i{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > i::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  background:none!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-a > i::before{
  width:254px!important;
  height:96px!important;
  border:1px solid rgba(117,243,206,.22)!important;
  box-shadow:0 0 17px rgba(117,243,206,.10)!important;
  transform:translate(-50%,-50%) rotate(18deg)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-b > i::before{
  width:246px!important;
  height:88px!important;
  border:1px solid rgba(117,243,206,.18)!important;
  box-shadow:0 0 15px rgba(117,243,206,.08)!important;
  transform:translate(-50%,-50%) rotate(78deg)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-back > i::before,
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-front > i::before{
  width:262px!important;
  height:102px!important;
  border:1px solid rgba(250,230,134,.16)!important;
  box-shadow:0 0 16px rgba(250,230,134,.07)!important;
  transform:translate(-50%,-50%) rotate(-34deg)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-front > i::before{
  border-color:rgba(250,230,134,.23)!important;
  clip-path:inset(0 0 50% 0)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial{
  position:relative!important;
  z-index:2!important;
  isolation:isolate!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial::before,
html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial::after{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-chance-stage .upgrade-chance-ring{
  position:absolute!important;
  z-index:4!important;
}
html body .view-upgrade .upgrade-chance-stage .upgrade-chance-dial > strong,
html body .view-upgrade .upgrade-chance-stage .upgrade-chance-dial > small{
  position:relative!important;
  z-index:5!important;
}


/* Upgrade v29.28 — richer orbit direction variance and stars that travel along each atom ring. */
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:700!important;
  transform:translate(-50%, -50%)!important;
  transform-origin:center center!important;
  pointer-events:none!important;
  will-change:transform,opacity!important;
  opacity:.88!important;
  z-index:1!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-a > .upgrade-atom-star,
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-b > .upgrade-atom-star,
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-back > .upgrade-atom-star{
  color:rgba(250,230,134,.98)!important;
  text-shadow:0 0 8px rgba(250,230,134,.85),0 0 18px rgba(250,230,134,.32)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-front > .upgrade-atom-star{
  color:rgba(255,244,196,.99)!important;
  text-shadow:0 0 9px rgba(250,230,134,.92),0 0 20px rgba(250,230,134,.36)!important;
}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.is-s1{font-size:10px!important;}
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.is-s2{font-size:8px!important;opacity:.78!important;}


/* Upgrade v29.34 — restore the animated stars in Your Offer and Desired Reward without changing any other layout/effect. */
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-zone-stars{
  position:absolute!important;
  inset:8px!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:3!important;
}
html body .view-upgrade .upgrade-zone-stars > i{
  position:absolute!important;
  display:block!important;
  visibility:visible!important;
  margin:0!important;
  padding:0!important;
  font-style:normal!important;
  line-height:1!important;
  opacity:0!important;
  transform-origin:center!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-zone-stars.is-offer > i{
  color:#fae686!important;
  text-shadow:
    0 0 7px rgba(250,230,134,.96),
    0 0 17px rgba(250,230,134,.52),
    0 0 28px rgba(214,180,95,.24)!important;
}
html body .view-upgrade .upgrade-zone-stars.is-target > i{
  color:#c895ff!important;
  text-shadow:
    0 0 7px rgba(200,149,255,.98),
    0 0 18px rgba(156,83,232,.56),
    0 0 30px rgba(117,61,188,.28)!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-1{
  left:6%!important;top:12%!important;font-size:11px!important;
  animation:upgradeOfferTargetStarA 8.4s ease-in-out -1.1s infinite!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-2{
  left:15%!important;top:60%!important;font-size:15px!important;
  animation:upgradeOfferTargetStarB 10.8s ease-in-out -5.2s infinite!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-3{
  left:34%!important;top:27%!important;font-size:8px!important;
  animation:upgradeOfferTargetStarC 7.6s ease-in-out -2.4s infinite!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-4{
  left:63%!important;top:14%!important;font-size:17px!important;
  animation:upgradeOfferTargetStarD 11.6s ease-in-out -7.1s infinite!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-5{
  left:76%!important;top:67%!important;font-size:12px!important;
  animation:upgradeOfferTargetStarA 9.7s ease-in-out -4.3s infinite reverse!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-6{
  left:90%!important;top:34%!important;font-size:9px!important;
  animation:upgradeOfferTargetStarC 8.9s ease-in-out -6.2s infinite reverse!important;
}
html body .view-upgrade .upgrade-zone-stars > .is-7{
  left:49%!important;top:81%!important;font-size:14px!important;
  animation:upgradeOfferTargetStarB 12.2s ease-in-out -3.6s infinite reverse!important;
}
@keyframes upgradeOfferTargetStarA{
  0%,100%{opacity:.10;transform:translate3d(0,6px,0) scale(.72) rotate(-8deg)}
  22%{opacity:.72;transform:translate3d(7px,-2px,0) scale(.96) rotate(3deg)}
  48%{opacity:1;transform:translate3d(-4px,-12px,0) scale(1.18) rotate(10deg)}
  74%{opacity:.48;transform:translate3d(5px,-18px,0) scale(.91) rotate(-2deg)}
}
@keyframes upgradeOfferTargetStarB{
  0%,100%{opacity:.16;transform:translate3d(-3px,5px,0) scale(.76) rotate(7deg)}
  28%{opacity:.92;transform:translate3d(5px,-8px,0) scale(1.12) rotate(-9deg)}
  56%{opacity:.56;transform:translate3d(10px,-15px,0) scale(.88) rotate(4deg)}
  82%{opacity:1;transform:translate3d(-6px,-21px,0) scale(1.20) rotate(12deg)}
}
@keyframes upgradeOfferTargetStarC{
  0%,100%{opacity:.08;transform:translate3d(4px,2px,0) scale(.68) rotate(0deg)}
  35%{opacity:.82;transform:translate3d(-7px,-9px,0) scale(1.04) rotate(14deg)}
  65%{opacity:1;transform:translate3d(6px,-16px,0) scale(1.22) rotate(-12deg)}
}
@keyframes upgradeOfferTargetStarD{
  0%,100%{opacity:.14;transform:translate3d(0,8px,0) scale(.74) rotate(-10deg)}
  24%{opacity:.58;transform:translate3d(-8px,-1px,0) scale(.90) rotate(2deg)}
  52%{opacity:1;transform:translate3d(7px,-13px,0) scale(1.16) rotate(11deg)}
  78%{opacity:.42;transform:translate3d(-3px,-20px,0) scale(.86) rotate(-5deg)}
}
@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-zone-stars > .is-1{animation:upgradeOfferTargetStarA 8.4s ease-in-out -1.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-2{animation:upgradeOfferTargetStarB 10.8s ease-in-out -5.2s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-3{animation:upgradeOfferTargetStarC 7.6s ease-in-out -2.4s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-4{animation:upgradeOfferTargetStarD 11.6s ease-in-out -7.1s infinite!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-5{animation:upgradeOfferTargetStarA 9.7s ease-in-out -4.3s infinite reverse!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-6{animation:upgradeOfferTargetStarC 8.9s ease-in-out -6.2s infinite reverse!important;}
  html body .view-upgrade .upgrade-zone-stars > .is-7{animation:upgradeOfferTargetStarB 12.2s ease-in-out -3.6s infinite reverse!important;}
}


/* Upgrade v29.35 — live star fields restored in Your Offer and Desired Reward. */
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-live-zone-stars{
  position:absolute!important;
  inset:4px!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:5!important;
}
html body .view-upgrade .upgrade-live-zone-stars > .upgrade-live-zone-star{
  position:absolute!important;
  display:block!important;
  visibility:visible!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  font-style:normal!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:700!important;
  line-height:1!important;
  opacity:.6!important;
  transform-origin:center!important;
  will-change:transform,opacity!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-live-zone-stars.is-offer > .upgrade-live-zone-star{
  color:#fae686!important;
  text-shadow:
    0 0 7px rgba(250,230,134,.98),
    0 0 17px rgba(250,230,134,.58),
    0 0 30px rgba(214,180,95,.30)!important;
}
html body .view-upgrade .upgrade-live-zone-stars.is-target > .upgrade-live-zone-star{
  color:#c895ff!important;
  text-shadow:
    0 0 7px rgba(200,149,255,.98),
    0 0 18px rgba(156,83,232,.62),
    0 0 31px rgba(117,61,188,.34)!important;
}
html body .view-upgrade .upgrade-live-zone-stars > .is-1{font-size:11px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-2{font-size:15px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-3{font-size:8px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-4{font-size:17px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-5{font-size:12px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-6{font-size:9px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-7{font-size:14px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-8{font-size:10px!important;}
html body .view-upgrade .upgrade-live-zone-stars > .is-9{font-size:12px!important;}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack{
  position:relative!important;
  z-index:6!important;
}
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
}


/* Upgrade v29.36 — center the empty-state content and keep only the colored stage outline. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection),
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  place-items:stretch!important;
  align-content:stretch!important;
  justify-content:stretch!important;
  padding:0!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection{
  grid-column:1!important;
  grid-row:1!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  align-content:center!important;
  text-align:center!important;
  gap:11px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
}
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection > .upgrade-empty-sigil,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > .upgrade-empty-sigil,
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection > span:last-child,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > span:last-child{
  position:relative!important;
  z-index:7!important;
  align-self:center!important;
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
html body .view-upgrade .upgrade-offer-stage{
  border-color:rgba(250,230,134,.25)!important;
}
html body .view-upgrade .upgrade-target-stage{
  border-color:rgba(200,149,255,.28)!important;
}
html body .view-upgrade .upgrade-offer-column.is-drop-active .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-column.is-drop-active .upgrade-empty-selection,
html body .view-upgrade .upgrade-offer-column.is-drop-ready .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-column.is-drop-ready .upgrade-empty-selection{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* Upgrade v29.37 — align the Desired Reward empty state to the same rows as Your Offer. */
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection){
  flex:0 0 274px!important;
  width:100%!important;
  height:274px!important;
  min-height:274px!important;
  max-height:274px!important;
  align-self:stretch!important;
}
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection) > .upgrade-empty-selection{
  width:100%!important;
  height:274px!important;
  min-height:274px!important;
  max-height:274px!important;
}


/* Upgrade v29.38 — replace the solid offer/target stage outlines with soft edge-shaped glows. */
html body .view-upgrade .upgrade-offer-stage{
  border-color:transparent!important;
  box-shadow:
    inset 0 0 7px rgba(250,230,134,.18),
    inset 0 0 18px rgba(214,180,95,.07),
    0 0 6px rgba(250,230,134,.22),
    0 0 15px rgba(214,180,95,.10)!important;
}
html body .view-upgrade .upgrade-target-stage{
  border-color:transparent!important;
  box-shadow:
    inset 0 0 7px rgba(200,149,255,.20),
    inset 0 0 18px rgba(117,61,188,.08),
    0 0 6px rgba(200,149,255,.24),
    0 0 15px rgba(117,61,188,.12)!important;
}


/* Upgrade v29.40 — dark-green-to-black vertical gradient, with dark green prevailing. */
html body .view-upgrade .upgrade-forge{
  background-color:#17281d!important;
  background-image:linear-gradient(
    180deg,
    #20382a 0%,
    #1d3325 28%,
    #17291d 58%,
    #101a13 78%,
    #050706 100%
  )!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center top!important;
}


/* Upgrade v29.41 — inward fake-3D bevel for the main forge container. */
html body .view-upgrade .upgrade-forge{
  box-shadow:
    0 24px 90px rgba(0,0,0,.42),
    inset 0 2px 0 rgba(117,243,206,.075),
    inset 2px 0 0 rgba(117,243,206,.045),
    inset 0 -3px 0 rgba(0,0,0,.62),
    inset -3px 0 0 rgba(0,0,0,.48),
    inset 0 18px 24px -20px rgba(117,243,206,.16),
    inset 0 -30px 38px -22px rgba(0,0,0,.72),
    inset 26px 0 34px -28px rgba(0,0,0,.48),
    inset -26px 0 34px -28px rgba(0,0,0,.54),
    inset 0 0 22px rgba(0,0,0,.22)!important;
}


/* Upgrade v29.43 — swap Desired Reward purple accents to #79EFCC, including ring-star aqua state. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span{
  color:#79EFCC!important;
  text-shadow:0 0 7px rgba(121,239,204,.95),0 0 20px rgba(121,239,204,.40)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  color:#79EFCC!important;
  box-shadow:0 0 8px rgba(121,239,204,.35)!important;
  text-shadow:0 0 7px rgba(121,239,204,.88)!important;
}
html body .view-upgrade .upgrade-live-zone-stars.is-target > .upgrade-live-zone-star,
html body .view-upgrade .upgrade-zone-stars.is-target > i{
  color:#79EFCC!important;
  text-shadow:
    0 0 7px rgba(121,239,204,.96),
    0 0 18px rgba(121,239,204,.46),
    0 0 30px rgba(70,170,150,.22)!important;
}
html body .view-upgrade .upgrade-target-stage{
  box-shadow:
    inset 0 0 7px rgba(121,239,204,.18),
    inset 0 0 18px rgba(82,190,166,.07),
    0 0 6px rgba(121,239,204,.22),
    0 0 15px rgba(82,190,166,.10)!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > .upgrade-empty-sigil,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > span:last-child{
  color:#79EFCC!important;
  text-shadow:0 0 7px rgba(121,239,204,.9),0 0 18px rgba(121,239,204,.34)!important;
}
html body .view-upgrade .upgrade-target-stage .upgrade-selection-actions button{
  border:1px solid rgba(121,239,204,.18)!important;
}


/* Upgrade v29.49 — real DOM side rails: no rectangular outline, only thin dashed glowing left/right edges. */
html body .view-upgrade .upgrade-offer-stage,
html body .view-upgrade .upgrade-target-stage{
  position:relative!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-offer-stage::before,
html body .view-upgrade .upgrade-offer-stage::after,
html body .view-upgrade .upgrade-target-stage::before,
html body .view-upgrade .upgrade-target-stage::after{
  display:none!important;
  content:none!important;
  border:0!important;
  box-shadow:none!important;
  background:none!important;
}
html body .view-upgrade .upgrade-stage-side-rail{
  position:absolute!important;
  top:18px!important;
  bottom:18px!important;
  width:1px!important;
  display:block!important;
  pointer-events:none!important;
  z-index:9!important;
  background-repeat:repeat-y!important;
  background-position:center top!important;
  background-size:1px 13px!important;
  opacity:.92!important;
}
html body .view-upgrade .upgrade-stage-side-rail.is-left{left:1px!important;}
html body .view-upgrade .upgrade-stage-side-rail.is-right{right:1px!important;}
html body .view-upgrade .upgrade-offer-stage > .upgrade-stage-side-rail{
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(250,230,134,.98) 0 4px,
    transparent 4px 10px
  )!important;
  filter:drop-shadow(0 0 2px rgba(250,230,134,.95)) drop-shadow(0 0 5px rgba(214,180,95,.45))!important;
}
html body .view-upgrade .upgrade-target-stage > .upgrade-stage-side-rail{
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(121,239,204,.98) 0 4px,
    transparent 4px 10px
  )!important;
  filter:drop-shadow(0 0 2px rgba(121,239,204,.95)) drop-shadow(0 0 5px rgba(70,170,150,.42))!important;
}


/* Upgrade v29.50 — remove the remaining empty-state panel rectangle and refine the real side rails with fade + wider dash spacing. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection),
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection){
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection)::before,
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection)::after,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection)::before,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection)::after{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection) > .upgrade-empty-selection,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack:has(> .upgrade-empty-selection) > .upgrade-empty-selection{
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
}
html body .view-upgrade .upgrade-stage-side-rail{
  width:1px!important;
  top:14px!important;
  bottom:14px!important;
  opacity:1!important;
  background-repeat:repeat-y!important;
  background-position:center top!important;
  background-size:1px 18px!important;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 8%, #000 16%, #000 84%, rgba(0,0,0,.18) 92%, transparent 100%)!important;
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 8%, #000 16%, #000 84%, rgba(0,0,0,.18) 92%, transparent 100%)!important;
}
html body .view-upgrade .upgrade-stage-side-rail.is-left{left:0!important;}
html body .view-upgrade .upgrade-stage-side-rail.is-right{right:0!important;}
html body .view-upgrade .upgrade-offer-stage > .upgrade-stage-side-rail{
  background-image:repeating-linear-gradient(to bottom, rgba(250,230,134,.98) 0 4px, transparent 4px 14px)!important;
  filter:drop-shadow(0 0 2px rgba(250,230,134,.95)) drop-shadow(0 0 6px rgba(214,180,95,.38))!important;
}
html body .view-upgrade .upgrade-target-stage > .upgrade-stage-side-rail{
  background-image:repeating-linear-gradient(to bottom, rgba(121,239,204,.98) 0 4px, transparent 4px 14px)!important;
  filter:drop-shadow(0 0 2px rgba(121,239,204,.95)) drop-shadow(0 0 6px rgba(70,170,150,.36))!important;
}


/* Upgrade v29.51 — each dash now has its own fade-in/fade-out, instead of fading only the full rail ends. */
html body .view-upgrade .upgrade-stage-side-rail{
  width:1px!important;
  top:14px!important;
  bottom:14px!important;
  opacity:1!important;
  background-repeat:repeat-y!important;
  background-position:center top!important;
  background-size:1px 18px!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-stage-side-rail{
  background-image:linear-gradient(
    to bottom,
    rgba(250,230,134,0) 0%,
    rgba(250,230,134,.22) 18%,
    rgba(250,230,134,.92) 42%,
    rgba(250,230,134,.92) 58%,
    rgba(250,230,134,.22) 82%,
    rgba(250,230,134,0) 100%
  )!important;
  filter:drop-shadow(0 0 2px rgba(250,230,134,.95)) drop-shadow(0 0 6px rgba(214,180,95,.38))!important;
}
html body .view-upgrade .upgrade-target-stage > .upgrade-stage-side-rail{
  background-image:linear-gradient(
    to bottom,
    rgba(121,239,204,0) 0%,
    rgba(121,239,204,.24) 18%,
    rgba(121,239,204,.94) 42%,
    rgba(121,239,204,.94) 58%,
    rgba(121,239,204,.24) 82%,
    rgba(121,239,204,0) 100%
  )!important;
  filter:drop-shadow(0 0 2px rgba(121,239,204,.95)) drop-shadow(0 0 6px rgba(70,170,150,.36))!important;
}


/* Upgrade v29.52 — increase the spacing between each side-rail dash while keeping the per-dash fade. */
html body .view-upgrade .upgrade-stage-side-rail{
  background-size:1px 26px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-stage-side-rail{
  background-image:linear-gradient(
    to bottom,
    rgba(250,230,134,0) 0%,
    rgba(250,230,134,0) 28%,
    rgba(250,230,134,.20) 40%,
    rgba(250,230,134,.92) 47%,
    rgba(250,230,134,.92) 53%,
    rgba(250,230,134,.20) 60%,
    rgba(250,230,134,0) 72%,
    rgba(250,230,134,0) 100%
  )!important;
}
html body .view-upgrade .upgrade-target-stage > .upgrade-stage-side-rail{
  background-image:linear-gradient(
    to bottom,
    rgba(121,239,204,0) 0%,
    rgba(121,239,204,0) 28%,
    rgba(121,239,204,.22) 40%,
    rgba(121,239,204,.94) 47%,
    rgba(121,239,204,.94) 53%,
    rgba(121,239,204,.22) 60%,
    rgba(121,239,204,0) 72%,
    rgba(121,239,204,0) 100%
  )!important;
}


/* Upgrade v29.53 — make both empty-state instruction texts white. */
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection > span:last-child,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > span:last-child{
  color:#ffffff!important;
  text-shadow:0 0 8px rgba(255,255,255,.18)!important;
}


/* Upgrade v29.54 — set both empty-state instruction texts to #D8D8D8 with a soft glow. */
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection > span:last-child,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > span:last-child{
  color:#D8D8D8!important;
  text-shadow:
    0 0 6px rgba(216,216,216,.28),
    0 0 14px rgba(216,216,216,.12)!important;
}


/* Upgrade v29.55 — make the requested #D8D8D8 text glow visibly while remaining subtle. */
html body .view-upgrade .upgrade-offer-stage .upgrade-empty-selection > span:last-child,
html body .view-upgrade .upgrade-target-stage .upgrade-empty-selection > span:last-child{
  color:#D8D8D8!important;
  text-shadow:
    0 0 3px rgba(255,255,255,.78),
    0 0 8px rgba(216,216,216,.52),
    0 0 15px rgba(216,216,216,.28),
    0 0 24px rgba(216,216,216,.12)!important;
  filter:drop-shadow(0 0 4px rgba(216,216,216,.34))!important;
}


/* Upgrade v29.56 — add small inner-corner screw details to the main forge container. */
html body .view-upgrade .upgrade-forge::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:.98!important;
  background-image:
    radial-gradient(circle at center,
      rgba(241,244,241,.96) 0 24%,
      rgba(204,210,205,.96) 25% 42%,
      rgba(127,136,129,.96) 43% 58%,
      rgba(35,42,37,.82) 59% 66%,
      transparent 67%),
    linear-gradient(to right, transparent 0 18%, rgba(78,86,81,.95) 18% 82%, transparent 82% 100%),

    radial-gradient(circle at center,
      rgba(241,244,241,.96) 0 24%,
      rgba(204,210,205,.96) 25% 42%,
      rgba(127,136,129,.96) 43% 58%,
      rgba(35,42,37,.82) 59% 66%,
      transparent 67%),
    linear-gradient(to right, transparent 0 18%, rgba(78,86,81,.95) 18% 82%, transparent 82% 100%),

    radial-gradient(circle at center,
      rgba(241,244,241,.96) 0 24%,
      rgba(204,210,205,.96) 25% 42%,
      rgba(127,136,129,.96) 43% 58%,
      rgba(35,42,37,.82) 59% 66%,
      transparent 67%),
    linear-gradient(to right, transparent 0 18%, rgba(78,86,81,.95) 18% 82%, transparent 82% 100%),

    radial-gradient(circle at center,
      rgba(241,244,241,.96) 0 24%,
      rgba(204,210,205,.96) 25% 42%,
      rgba(127,136,129,.96) 43% 58%,
      rgba(35,42,37,.82) 59% 66%,
      transparent 67%),
    linear-gradient(to right, transparent 0 18%, rgba(78,86,81,.95) 18% 82%, transparent 82% 100%)!important;
  background-repeat:no-repeat!important;
  background-size:
    16px 16px, 8px 2px,
    16px 16px, 8px 2px,
    16px 16px, 8px 2px,
    16px 16px, 8px 2px!important;
  background-position:
    12px 12px, 16px 19px,
    calc(100% - 28px) 12px, calc(100% - 24px) 19px,
    12px calc(100% - 28px), 16px calc(100% - 21px),
    calc(100% - 28px) calc(100% - 28px), calc(100% - 24px) calc(100% - 21px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.34)) drop-shadow(0 0 4px rgba(255,255,255,.08))!important;
}


/* Upgrade v29.57 — replace the corner marks with more recognizable screw heads inspired by the reference images. */
html body .view-upgrade .upgrade-forge::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  background-image:
    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),
    linear-gradient(45deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),

    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),
    linear-gradient(45deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),

    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),
    linear-gradient(45deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),

    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%),
    linear-gradient(45deg,
      transparent 0 24%,
      rgba(62,68,66,.96) 24% 35%,
      rgba(118,124,122,.92) 35% 50%,
      rgba(62,68,66,.96) 50% 65%,
      transparent 65% 100%)!important;
  background-repeat:no-repeat!important;
  background-size:
    18px 18px, 10px 10px, 10px 10px,
    18px 18px, 10px 10px, 10px 10px,
    18px 18px, 10px 10px, 10px 10px,
    18px 18px, 10px 10px, 10px 10px!important;
  background-position:
    12px 12px, 16px 16px, 16px 16px,
    calc(100% - 30px) 12px, calc(100% - 26px) 16px, calc(100% - 26px) 16px,
    12px calc(100% - 30px), 16px calc(100% - 26px), 16px calc(100% - 26px),
    calc(100% - 30px) calc(100% - 30px), calc(100% - 26px) calc(100% - 26px), calc(100% - 26px) calc(100% - 26px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.42)) drop-shadow(0 0 3px rgba(255,255,255,.10))!important;
}


/* Upgrade v29.58 — fix duplicated screw drawing by using a single slot per screw head. */
html body .view-upgrade .upgrade-forge::after{
  background-image:
    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 28%,
      rgba(58,64,62,.96) 28% 42%,
      rgba(130,136,134,.92) 42% 50%,
      rgba(58,64,62,.96) 50% 64%,
      transparent 64% 100%),

    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 28%,
      rgba(58,64,62,.96) 28% 42%,
      rgba(130,136,134,.92) 42% 50%,
      rgba(58,64,62,.96) 50% 64%,
      transparent 64% 100%),

    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 28%,
      rgba(58,64,62,.96) 28% 42%,
      rgba(130,136,134,.92) 42% 50%,
      rgba(58,64,62,.96) 50% 64%,
      transparent 64% 100%),

    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.98) 0 12%,
      rgba(230,234,232,.98) 13% 26%,
      rgba(198,203,201,.98) 27% 44%,
      rgba(150,156,154,.98) 45% 58%,
      rgba(71,76,74,.95) 59% 67%,
      rgba(28,31,30,.90) 68% 72%,
      transparent 73%),
    linear-gradient(135deg,
      transparent 0 28%,
      rgba(58,64,62,.96) 28% 42%,
      rgba(130,136,134,.92) 42% 50%,
      rgba(58,64,62,.96) 50% 64%,
      transparent 64% 100%)!important;
  background-repeat:no-repeat!important;
  background-size:
    18px 18px, 9px 9px,
    18px 18px, 9px 9px,
    18px 18px, 9px 9px,
    18px 18px, 9px 9px!important;
  background-position:
    12px 12px, 16.5px 16.5px,
    calc(100% - 30px) 12px, calc(100% - 25.5px) 16.5px,
    12px calc(100% - 30px), 16.5px calc(100% - 25.5px),
    calc(100% - 30px) calc(100% - 30px), calc(100% - 25.5px) calc(100% - 25.5px)!important;
}


/* Upgrade v29.59 — simplify the screw heads so each corner shows only one clear slot, with no duplicated mark. */
html body .view-upgrade .upgrade-forge::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  background-image:
    radial-gradient(circle at 34% 32%,
      rgba(255,255,255,.98) 0 10%,
      rgba(233,236,235,.98) 11% 28%,
      rgba(196,201,199,.96) 29% 48%,
      rgba(128,134,132,.96) 49% 62%,
      rgba(54,59,57,.92) 63% 70%,
      transparent 71%),
    linear-gradient(135deg,
      transparent 0 42%,
      rgba(70,76,74,.98) 42% 50%,
      transparent 50% 100%),

    radial-gradient(circle at 34% 32%,
      rgba(255,255,255,.98) 0 10%,
      rgba(233,236,235,.98) 11% 28%,
      rgba(196,201,199,.96) 29% 48%,
      rgba(128,134,132,.96) 49% 62%,
      rgba(54,59,57,.92) 63% 70%,
      transparent 71%),
    linear-gradient(135deg,
      transparent 0 42%,
      rgba(70,76,74,.98) 42% 50%,
      transparent 50% 100%),

    radial-gradient(circle at 34% 32%,
      rgba(255,255,255,.98) 0 10%,
      rgba(233,236,235,.98) 11% 28%,
      rgba(196,201,199,.96) 29% 48%,
      rgba(128,134,132,.96) 49% 62%,
      rgba(54,59,57,.92) 63% 70%,
      transparent 71%),
    linear-gradient(135deg,
      transparent 0 42%,
      rgba(70,76,74,.98) 42% 50%,
      transparent 50% 100%),

    radial-gradient(circle at 34% 32%,
      rgba(255,255,255,.98) 0 10%,
      rgba(233,236,235,.98) 11% 28%,
      rgba(196,201,199,.96) 29% 48%,
      rgba(128,134,132,.96) 49% 62%,
      rgba(54,59,57,.92) 63% 70%,
      transparent 71%),
    linear-gradient(135deg,
      transparent 0 42%,
      rgba(70,76,74,.98) 42% 50%,
      transparent 50% 100%)!important;
  background-repeat:no-repeat!important;
  background-size:
    16px 16px, 8px 8px,
    16px 16px, 8px 8px,
    16px 16px, 8px 8px,
    16px 16px, 8px 8px!important;
  background-position:
    12px 12px, 16px 16px,
    calc(100% - 28px) 12px, calc(100% - 24px) 16px,
    12px calc(100% - 28px), 16px calc(100% - 24px),
    calc(100% - 28px) calc(100% - 28px), calc(100% - 24px) calc(100% - 24px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.38)) drop-shadow(0 0 2px rgba(255,255,255,.10))!important;
}


/* Upgrade v29.60 — use the existing public/images/parafuso.png asset for the 4 inner-corner screws. */
html body .view-upgrade .upgrade-forge::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  background-image:
    url('/images/parafuso.png'),
    url('/images/parafuso.png'),
    url('/images/parafuso.png'),
    url('/images/parafuso.png')!important;
  background-repeat:no-repeat!important;
  background-size:
    16px 16px,
    16px 16px,
    16px 16px,
    16px 16px!important;
  background-position:
    12px 12px,
    calc(100% - 28px) 12px,
    12px calc(100% - 28px),
    calc(100% - 28px) calc(100% - 28px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.30))!important;
}


/* Upgrade v29.61 — move the bottom-corner screws slightly closer to the bottom edge while keeping the rest unchanged. */
html body .view-upgrade .upgrade-forge::after{
  background-position:
    12px 12px,
    calc(100% - 28px) 12px,
    12px calc(100% - 22px),
    calc(100% - 28px) calc(100% - 22px)!important;
}


/* Upgrade v29.62 — show rarity labels on every reward tile without increasing tile size or moving the existing layout. */
html body .view-upgrade .upgrade-item-rarity{
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  top:79px!important;
  z-index:5!important;
  display:block!important;
  text-align:center!important;
  font-size:7.5px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}
html body .view-upgrade .upgrade-selection-tile .upgrade-item-rarity{top:74px!important;}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile .upgrade-item-rarity{
  top:108px!important;
  font-size:10px!important;
  letter-spacing:.11em!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-common{color:#D0D0D0!important;text-shadow:0 0 6px rgba(208,208,208,.28),0 0 12px rgba(208,208,208,.12)!important;}
html body .view-upgrade .upgrade-item-rarity.rarity-uncommon{color:#69B87B!important;text-shadow:0 0 6px rgba(105,184,123,.28),0 0 12px rgba(105,184,123,.12)!important;}
html body .view-upgrade .upgrade-item-rarity.rarity-rare{color:#7FE7FF!important;text-shadow:0 0 6px rgba(127,231,255,.28),0 0 12px rgba(127,231,255,.12)!important;}
html body .view-upgrade .upgrade-item-rarity.rarity-epic{color:#B678F4!important;text-shadow:0 0 6px rgba(182,120,244,.28),0 0 12px rgba(182,120,244,.12)!important;}
html body .view-upgrade .upgrade-item-rarity.rarity-legendary{color:#FAE686!important;text-shadow:0 0 6px rgba(250,230,134,.30),0 0 12px rgba(250,230,134,.14)!important;}


/* Upgrade v29.63 — bring rarity text closer to the reward name and fix its placement inside the offer/desired selection areas. */
html body .view-upgrade .upgrade-reward-card .upgrade-item-rarity{
  top:86px!important;
}
html body .view-upgrade .upgrade-selection-tile .upgrade-item-rarity{
  top:82px!important;
}
html body .view-upgrade .upgrade-offer-stage .upgrade-selection-tile .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile .upgrade-item-rarity{
  top:84px!important;
}
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile .upgrade-item-rarity{
  top:122px!important;
}


/* Upgrade v29.64 — place the single Desired Reward rarity label below the artwork and directly above the reward name. */
html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile .upgrade-item-rarity{
  top:166px!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.11em!important;
}


/* Upgrade v29.69 — keep the v29.64 layout intact, increase rarity-text glow a bit, and add a moderate identical rarity aura behind reward images in both catalog panels without changing card backgrounds or scroll performance. */
html body .view-upgrade .upgrade-item-rarity.rarity-common{
  color:#D0D0D0!important;
  text-shadow:0 0 7px rgba(208,208,208,.42),0 0 14px rgba(208,208,208,.18),0 0 22px rgba(208,208,208,.08)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-uncommon{
  color:#69B87B!important;
  text-shadow:0 0 7px rgba(105,184,123,.44),0 0 14px rgba(105,184,123,.19),0 0 22px rgba(105,184,123,.09)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-rare{
  color:#7FE7FF!important;
  text-shadow:0 0 7px rgba(127,231,255,.46),0 0 14px rgba(127,231,255,.20),0 0 22px rgba(127,231,255,.10)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-epic{
  color:#B678F4!important;
  text-shadow:0 0 7px rgba(182,120,244,.48),0 0 14px rgba(182,120,244,.22),0 0 22px rgba(182,120,244,.11)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-legendary{
  color:#FAE686!important;
  text-shadow:0 0 7px rgba(250,230,134,.52),0 0 14px rgba(250,230,134,.24),0 0 22px rgba(250,230,134,.11)!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card .upgrade-item-art{
  position:relative!important;
  z-index:2!important;
  will-change:auto!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-common .upgrade-item-art{
  filter:drop-shadow(0 0 7px rgba(208,208,208,.34)) drop-shadow(0 0 14px rgba(208,208,208,.14)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-uncommon .upgrade-item-art{
  filter:drop-shadow(0 0 7px rgba(105,184,123,.36)) drop-shadow(0 0 14px rgba(105,184,123,.15)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-rare .upgrade-item-art{
  filter:drop-shadow(0 0 8px rgba(127,231,255,.38)) drop-shadow(0 0 15px rgba(127,231,255,.17)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-epic .upgrade-item-art{
  filter:drop-shadow(0 0 8px rgba(182,120,244,.40)) drop-shadow(0 0 15px rgba(182,120,244,.18)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-legendary .upgrade-item-art{
  filter:drop-shadow(0 0 9px rgba(250,230,134,.42)) drop-shadow(0 0 16px rgba(250,230,134,.19)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}


/* Upgrade v29.70 — restore the stronger approved glow intensity while keeping both catalog panels identical and the v29.69 layout/performance fixes intact. */
html body .view-upgrade .upgrade-item-rarity.rarity-common{
  text-shadow:0 0 8px rgba(208,208,208,.56),0 0 17px rgba(208,208,208,.28),0 0 26px rgba(208,208,208,.13)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-uncommon{
  text-shadow:0 0 8px rgba(105,184,123,.58),0 0 17px rgba(105,184,123,.30),0 0 26px rgba(105,184,123,.14)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-rare{
  text-shadow:0 0 8px rgba(127,231,255,.62),0 0 17px rgba(127,231,255,.32),0 0 26px rgba(127,231,255,.15)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-epic{
  text-shadow:0 0 8px rgba(182,120,244,.64),0 0 17px rgba(182,120,244,.34),0 0 26px rgba(182,120,244,.16)!important;
}
html body .view-upgrade .upgrade-item-rarity.rarity-legendary{
  text-shadow:0 0 8px rgba(250,230,134,.68),0 0 17px rgba(250,230,134,.36),0 0 26px rgba(250,230,134,.17)!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-common .upgrade-item-art{
  filter:drop-shadow(0 0 10px rgba(208,208,208,.50)) drop-shadow(0 0 19px rgba(208,208,208,.22)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-uncommon .upgrade-item-art{
  filter:drop-shadow(0 0 10px rgba(105,184,123,.52)) drop-shadow(0 0 19px rgba(105,184,123,.23)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-rare .upgrade-item-art{
  filter:drop-shadow(0 0 11px rgba(127,231,255,.54)) drop-shadow(0 0 20px rgba(127,231,255,.24)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-epic .upgrade-item-art{
  filter:drop-shadow(0 0 11px rgba(182,120,244,.56)) drop-shadow(0 0 20px rgba(182,120,244,.25)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-legendary .upgrade-item-art{
  filter:drop-shadow(0 0 12px rgba(250,230,134,.60)) drop-shadow(0 0 21px rgba(250,230,134,.27)) drop-shadow(0 8px 7px rgba(0,0,0,.36))!important;
}


/* Upgrade v29.75 — remove image glows and instead use rarity-colored container borders, with inward glow only on selected states. */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card::before,
html body .view-upgrade .upgrade-selection-tile::before{
  display:none!important;
  content:none!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card .upgrade-item-art,
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card img,
html body .view-upgrade .upgrade-selection-tile .upgrade-item-art,
html body .view-upgrade .upgrade-selection-tile img{
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.38))!important;
}

html body .view-upgrade .upgrade-reward-card.rarity-common,
html body .view-upgrade .upgrade-selection-tile.rarity-common{
  border-color:rgba(208,208,208,.34)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-uncommon,
html body .view-upgrade .upgrade-selection-tile.rarity-uncommon{
  border-color:rgba(105,184,123,.38)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-rare,
html body .view-upgrade .upgrade-selection-tile.rarity-rare{
  border-color:rgba(127,231,255,.40)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-epic,
html body .view-upgrade .upgrade-selection-tile.rarity-epic{
  border-color:rgba(182,120,244,.40)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-legendary,
html body .view-upgrade .upgrade-selection-tile.rarity-legendary{
  border-color:rgba(250,230,134,.42)!important;
}

html body .view-upgrade .upgrade-reward-card.rarity-common:hover{border-color:rgba(208,208,208,.44)!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important;}
html body .view-upgrade .upgrade-reward-card.rarity-uncommon:hover{border-color:rgba(105,184,123,.46)!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important;}
html body .view-upgrade .upgrade-reward-card.rarity-rare:hover{border-color:rgba(127,231,255,.48)!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important;}
html body .view-upgrade .upgrade-reward-card.rarity-epic:hover{border-color:rgba(182,120,244,.48)!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important;}
html body .view-upgrade .upgrade-reward-card.rarity-legendary:hover{border-color:rgba(250,230,134,.50)!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important;}

html body .view-upgrade .upgrade-reward-card.rarity-common.is-selected{
  border-color:rgba(208,208,208,.56)!important;
  box-shadow:inset 0 0 18px rgba(208,208,208,.12), inset 0 0 0 1px rgba(208,208,208,.12)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-uncommon.is-selected{
  border-color:rgba(105,184,123,.58)!important;
  box-shadow:inset 0 0 18px rgba(105,184,123,.14), inset 0 0 0 1px rgba(105,184,123,.12)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-rare.is-selected{
  border-color:rgba(127,231,255,.60)!important;
  box-shadow:inset 0 0 18px rgba(127,231,255,.15), inset 0 0 0 1px rgba(127,231,255,.12)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-epic.is-selected{
  border-color:rgba(182,120,244,.60)!important;
  box-shadow:inset 0 0 18px rgba(182,120,244,.15), inset 0 0 0 1px rgba(182,120,244,.12)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-legendary.is-selected{
  border-color:rgba(250,230,134,.62)!important;
  box-shadow:inset 0 0 18px rgba(250,230,134,.16), inset 0 0 0 1px rgba(250,230,134,.14)!important;
}

html body .view-upgrade .upgrade-selection-tile.rarity-common{
  box-shadow:inset 0 0 16px rgba(208,208,208,.10), inset 0 1px rgba(255,255,255,.035)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-uncommon{
  box-shadow:inset 0 0 16px rgba(105,184,123,.12), inset 0 1px rgba(255,255,255,.035)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-rare{
  box-shadow:inset 0 0 16px rgba(127,231,255,.12), inset 0 1px rgba(255,255,255,.035)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-epic{
  box-shadow:inset 0 0 16px rgba(182,120,244,.12), inset 0 1px rgba(255,255,255,.035)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-legendary{
  box-shadow:inset 0 0 16px rgba(250,230,134,.13), inset 0 1px rgba(255,255,255,.035)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-common{box-shadow:inset 0 0 22px rgba(208,208,208,.14), inset 0 0 0 1px rgba(208,208,208,.12)!important;}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-uncommon{box-shadow:inset 0 0 22px rgba(105,184,123,.16), inset 0 0 0 1px rgba(105,184,123,.12)!important;}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-rare{box-shadow:inset 0 0 22px rgba(127,231,255,.16), inset 0 0 0 1px rgba(127,231,255,.12)!important;}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-epic{box-shadow:inset 0 0 22px rgba(182,120,244,.17), inset 0 0 0 1px rgba(182,120,244,.12)!important;}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-legendary{box-shadow:inset 0 0 22px rgba(250,230,134,.18), inset 0 0 0 1px rgba(250,230,134,.13)!important;}


/* Upgrade v29.76 — fully remove reward-image glow while keeping rarity borders and selected inward container glow. */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card .upgrade-item-art,
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card img,
html body .view-upgrade .upgrade-selection-tile .upgrade-item-art,
html body .view-upgrade .upgrade-selection-tile img{
  filter:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
}


/* Upgrade v29.77 — completely remove every CSS aura behind reward artwork.
   Rarity remains only on the container border and on the selected inward container glow. */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card::before,
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card::after,
html body .view-upgrade .upgrade-selection-tile::before{
  display:none!important;
  content:none!important;
  background:none!important;
  background-image:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  opacity:0!important;
  box-shadow:none!important;
}

html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card .upgrade-item-art,
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card > img,
html body .view-upgrade .upgrade-selection-tile .upgrade-item-art,
html body .view-upgrade .upgrade-selection-tile > img{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}

html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card{
  background:
    linear-gradient(155deg,rgba(29,47,31,.86),rgba(6,12,8,.97))!important;
}

html body .view-upgrade .upgrade-selection-tile{
  background:
    linear-gradient(155deg,rgba(29,47,31,.86),rgba(6,12,8,.97))!important;
}

/* Keep ordinary cards free from any outer/inner aura. */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card:not(.is-selected){
  box-shadow:none!important;
}

/* Hover keeps only a neutral depth shadow, never a rarity aura. */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card:not(.is-selected):hover{
  box-shadow:0 8px 20px rgba(0,0,0,.22)!important;
}


/* Upgrade v29.80 — place each catalog scroller on its own compositor layer.
   This prevents the browser from repainting the entire card grid on every scroll frame,
   while preserving all card visuals and the original ring/star animations. */
html body .view-upgrade .upgrade-reward-grid.upgrade-five-row-catalog{
  -webkit-transform:translate3d(0,0,0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:transform,scroll-position!important;
  isolation:isolate!important;
}


/* Upgrade v29.81 — restore rarity labels in both catalog lists and selection panels, and strengthen only the selected inward rarity glow. */
html body .view-upgrade .upgrade-item-rarity{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

html body .view-upgrade .upgrade-reward-card.rarity-common.is-selected{
  border-color:rgba(208,208,208,.78)!important;
  box-shadow:inset 0 0 28px rgba(208,208,208,.24),inset 0 0 10px rgba(208,208,208,.18),inset 0 0 0 1px rgba(208,208,208,.22)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-uncommon.is-selected{
  border-color:rgba(105,184,123,.80)!important;
  box-shadow:inset 0 0 28px rgba(105,184,123,.27),inset 0 0 10px rgba(105,184,123,.20),inset 0 0 0 1px rgba(105,184,123,.23)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-rare.is-selected{
  border-color:rgba(127,231,255,.82)!important;
  box-shadow:inset 0 0 30px rgba(127,231,255,.28),inset 0 0 11px rgba(127,231,255,.21),inset 0 0 0 1px rgba(127,231,255,.24)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-epic.is-selected{
  border-color:rgba(182,120,244,.82)!important;
  box-shadow:inset 0 0 30px rgba(182,120,244,.29),inset 0 0 11px rgba(182,120,244,.22),inset 0 0 0 1px rgba(182,120,244,.25)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-legendary.is-selected{
  border-color:rgba(250,230,134,.84)!important;
  box-shadow:inset 0 0 31px rgba(250,230,134,.30),inset 0 0 12px rgba(250,230,134,.23),inset 0 0 0 1px rgba(250,230,134,.26)!important;
}

html body .view-upgrade .upgrade-selection-tile.rarity-common{
  box-shadow:inset 0 0 25px rgba(208,208,208,.20),inset 0 0 9px rgba(208,208,208,.14),inset 0 0 0 1px rgba(208,208,208,.18)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-uncommon{
  box-shadow:inset 0 0 25px rgba(105,184,123,.22),inset 0 0 9px rgba(105,184,123,.16),inset 0 0 0 1px rgba(105,184,123,.19)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-rare{
  box-shadow:inset 0 0 26px rgba(127,231,255,.23),inset 0 0 10px rgba(127,231,255,.17),inset 0 0 0 1px rgba(127,231,255,.20)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-epic{
  box-shadow:inset 0 0 26px rgba(182,120,244,.24),inset 0 0 10px rgba(182,120,244,.18),inset 0 0 0 1px rgba(182,120,244,.21)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-legendary{
  box-shadow:inset 0 0 27px rgba(250,230,134,.25),inset 0 0 11px rgba(250,230,134,.19),inset 0 0 0 1px rgba(250,230,134,.22)!important;
}


/* Upgrade v29.82 — stronger selected-state glow emission while keeping the approved look. */
html body .view-upgrade .upgrade-reward-card.rarity-common.is-selected{
  border-color:rgba(208,208,208,.72)!important;
  box-shadow:
    0 0 0 1px rgba(208,208,208,.20),
    0 0 14px rgba(208,208,208,.16),
    0 0 26px rgba(208,208,208,.12),
    inset 0 0 22px rgba(208,208,208,.20),
    inset 0 0 34px rgba(208,208,208,.12)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-uncommon.is-selected{
  border-color:rgba(105,184,123,.76)!important;
  box-shadow:
    0 0 0 1px rgba(105,184,123,.22),
    0 0 14px rgba(105,184,123,.18),
    0 0 28px rgba(105,184,123,.14),
    inset 0 0 22px rgba(105,184,123,.22),
    inset 0 0 34px rgba(105,184,123,.13)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-rare.is-selected{
  border-color:rgba(127,231,255,.80)!important;
  box-shadow:
    0 0 0 1px rgba(127,231,255,.24),
    0 0 15px rgba(127,231,255,.20),
    0 0 30px rgba(127,231,255,.15),
    inset 0 0 24px rgba(127,231,255,.24),
    inset 0 0 36px rgba(127,231,255,.14)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-epic.is-selected{
  border-color:rgba(182,120,244,.80)!important;
  box-shadow:
    0 0 0 1px rgba(182,120,244,.24),
    0 0 15px rgba(182,120,244,.20),
    0 0 30px rgba(182,120,244,.15),
    inset 0 0 24px rgba(182,120,244,.24),
    inset 0 0 36px rgba(182,120,244,.14)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-legendary.is-selected{
  border-color:rgba(250,230,134,.84)!important;
  box-shadow:
    0 0 0 1px rgba(250,230,134,.26),
    0 0 16px rgba(250,230,134,.22),
    0 0 32px rgba(250,230,134,.16),
    inset 0 0 24px rgba(250,230,134,.25),
    inset 0 0 38px rgba(250,230,134,.15)!important;
}

html body .view-upgrade .upgrade-selection-tile.rarity-common{
  box-shadow:
    0 0 10px rgba(208,208,208,.08),
    inset 0 0 22px rgba(208,208,208,.16),
    inset 0 0 34px rgba(208,208,208,.10),
    inset 0 0 0 1px rgba(208,208,208,.12)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-uncommon{
  box-shadow:
    0 0 10px rgba(105,184,123,.09),
    inset 0 0 22px rgba(105,184,123,.18),
    inset 0 0 34px rgba(105,184,123,.11),
    inset 0 0 0 1px rgba(105,184,123,.12)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-rare{
  box-shadow:
    0 0 11px rgba(127,231,255,.10),
    inset 0 0 24px rgba(127,231,255,.19),
    inset 0 0 36px rgba(127,231,255,.12),
    inset 0 0 0 1px rgba(127,231,255,.12)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-epic{
  box-shadow:
    0 0 11px rgba(182,120,244,.10),
    inset 0 0 24px rgba(182,120,244,.20),
    inset 0 0 36px rgba(182,120,244,.12),
    inset 0 0 0 1px rgba(182,120,244,.12)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-legendary{
  box-shadow:
    0 0 12px rgba(250,230,134,.11),
    inset 0 0 24px rgba(250,230,134,.21),
    inset 0 0 38px rgba(250,230,134,.13),
    inset 0 0 0 1px rgba(250,230,134,.13)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-common{
  box-shadow:
    0 0 12px rgba(208,208,208,.10),
    inset 0 0 28px rgba(208,208,208,.20),
    inset 0 0 42px rgba(208,208,208,.12),
    inset 0 0 0 1px rgba(208,208,208,.14)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-uncommon{
  box-shadow:
    0 0 12px rgba(105,184,123,.11),
    inset 0 0 30px rgba(105,184,123,.22),
    inset 0 0 44px rgba(105,184,123,.13),
    inset 0 0 0 1px rgba(105,184,123,.14)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-rare{
  box-shadow:
    0 0 13px rgba(127,231,255,.12),
    inset 0 0 30px rgba(127,231,255,.24),
    inset 0 0 46px rgba(127,231,255,.14),
    inset 0 0 0 1px rgba(127,231,255,.14)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-epic{
  box-shadow:
    0 0 13px rgba(182,120,244,.12),
    inset 0 0 30px rgba(182,120,244,.24),
    inset 0 0 46px rgba(182,120,244,.14),
    inset 0 0 0 1px rgba(182,120,244,.14)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-legendary{
  box-shadow:
    0 0 14px rgba(250,230,134,.13),
    inset 0 0 32px rgba(250,230,134,.26),
    inset 0 0 48px rgba(250,230,134,.15),
    inset 0 0 0 1px rgba(250,230,134,.15)!important;
}


/* Upgrade v29.83 — make selected-state emitted glow keep much more of the original rarity color and stand out clearly from non-selected rewards. */
html body .view-upgrade .upgrade-reward-card.rarity-common.is-selected{
  border-color:rgba(218,218,218,.82)!important;
  box-shadow:
    0 0 0 1px rgba(218,218,218,.30),
    0 0 14px rgba(218,218,218,.20),
    0 0 30px rgba(218,218,218,.16),
    inset 0 0 22px rgba(218,218,218,.22),
    inset 0 0 42px rgba(218,218,218,.14)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-uncommon.is-selected{
  border-color:rgba(105,184,123,.88)!important;
  box-shadow:
    0 0 0 1px rgba(105,184,123,.32),
    0 0 14px rgba(105,184,123,.28),
    0 0 32px rgba(105,184,123,.24),
    inset 0 0 24px rgba(105,184,123,.28),
    inset 0 0 44px rgba(105,184,123,.18)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-rare.is-selected{
  border-color:rgba(127,231,255,.92)!important;
  box-shadow:
    0 0 0 1px rgba(127,231,255,.34),
    0 0 15px rgba(127,231,255,.30),
    0 0 34px rgba(127,231,255,.26),
    inset 0 0 26px rgba(127,231,255,.30),
    inset 0 0 46px rgba(127,231,255,.19)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-epic.is-selected{
  border-color:rgba(182,120,244,.92)!important;
  box-shadow:
    0 0 0 1px rgba(182,120,244,.34),
    0 0 15px rgba(182,120,244,.30),
    0 0 34px rgba(182,120,244,.26),
    inset 0 0 26px rgba(182,120,244,.30),
    inset 0 0 46px rgba(182,120,244,.19)!important;
}
html body .view-upgrade .upgrade-reward-card.rarity-legendary.is-selected{
  border-color:rgba(250,230,134,.96)!important;
  box-shadow:
    0 0 0 1px rgba(250,230,134,.36),
    0 0 16px rgba(250,230,134,.32),
    0 0 36px rgba(250,230,134,.28),
    inset 0 0 26px rgba(250,230,134,.31),
    inset 0 0 48px rgba(250,230,134,.20)!important;
}

html body .view-upgrade .upgrade-selection-tile.rarity-common{
  box-shadow:
    0 0 10px rgba(218,218,218,.12),
    inset 0 0 24px rgba(218,218,218,.18),
    inset 0 0 40px rgba(218,218,218,.12),
    inset 0 0 0 1px rgba(218,218,218,.14)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-uncommon{
  box-shadow:
    0 0 12px rgba(105,184,123,.16),
    inset 0 0 26px rgba(105,184,123,.24),
    inset 0 0 42px rgba(105,184,123,.16),
    inset 0 0 0 1px rgba(105,184,123,.15)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-rare{
  box-shadow:
    0 0 13px rgba(127,231,255,.18),
    inset 0 0 28px rgba(127,231,255,.26),
    inset 0 0 44px rgba(127,231,255,.17),
    inset 0 0 0 1px rgba(127,231,255,.15)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-epic{
  box-shadow:
    0 0 13px rgba(182,120,244,.18),
    inset 0 0 28px rgba(182,120,244,.26),
    inset 0 0 44px rgba(182,120,244,.17),
    inset 0 0 0 1px rgba(182,120,244,.15)!important;
}
html body .view-upgrade .upgrade-selection-tile.rarity-legendary{
  box-shadow:
    0 0 14px rgba(250,230,134,.20),
    inset 0 0 30px rgba(250,230,134,.28),
    inset 0 0 46px rgba(250,230,134,.18),
    inset 0 0 0 1px rgba(250,230,134,.16)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-common{
  box-shadow:
    0 0 12px rgba(218,218,218,.14),
    inset 0 0 30px rgba(218,218,218,.22),
    inset 0 0 46px rgba(218,218,218,.14),
    inset 0 0 0 1px rgba(218,218,218,.16)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-uncommon{
  box-shadow:
    0 0 14px rgba(105,184,123,.19),
    inset 0 0 34px rgba(105,184,123,.28),
    inset 0 0 50px rgba(105,184,123,.18),
    inset 0 0 0 1px rgba(105,184,123,.16)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-rare{
  box-shadow:
    0 0 15px rgba(127,231,255,.21),
    inset 0 0 36px rgba(127,231,255,.30),
    inset 0 0 52px rgba(127,231,255,.19),
    inset 0 0 0 1px rgba(127,231,255,.17)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-epic{
  box-shadow:
    0 0 15px rgba(182,120,244,.21),
    inset 0 0 36px rgba(182,120,244,.30),
    inset 0 0 52px rgba(182,120,244,.19),
    inset 0 0 0 1px rgba(182,120,244,.17)!important;
}
html body .view-upgrade .upgrade-selection-tile.is-emphasized.rarity-legendary{
  box-shadow:
    0 0 16px rgba(250,230,134,.23),
    inset 0 0 38px rgba(250,230,134,.32),
    inset 0 0 54px rgba(250,230,134,.20),
    inset 0 0 0 1px rgba(250,230,134,.18)!important;
}


/* Upgrade v29.84 — add a temporary light texture to selected rewards only, using the same #E0E0E0 texture across all rarities. */
html body .view-upgrade .upgrade-reward-card.is-selected,
html body .view-upgrade .upgrade-selection-tile{
  isolation:isolate!important;
}

html body .view-upgrade .upgrade-reward-card.is-selected::after,
html body .view-upgrade .upgrade-selection-tile::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:1!important;
  border-radius:inherit!important;
  opacity:.72!important;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(224,224,224,.10) 0 7px,
      rgba(224,224,224,.03) 7px 15px,
      transparent 15px 24px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(224,224,224,.055) 0 5px,
      transparent 5px 17px
    );
  box-shadow:
    inset 0 0 12px rgba(224,224,224,.07),
    inset 0 0 22px rgba(224,224,224,.03)!important;
}

html body .view-upgrade .upgrade-target-column .upgrade-selection-stack.is-single-target > .upgrade-selection-tile::after,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile::after{
  opacity:.78!important;
}


/* Upgrade v29.85 — move the temporary #E0E0E0 selected texture to the two catalog lists only. */
html body .view-upgrade .upgrade-selection-tile::after,
html body .view-upgrade .upgrade-offer-stage .upgrade-selection-tile::after,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile::after,
html body .view-upgrade .upgrade-target-column .upgrade-selection-tile::after{
  display:none!important;
  content:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  opacity:0!important;
}

html body .view-upgrade .upgrade-catalog-panel.is-offers .upgrade-reward-card.is-selected::after,
html body .view-upgrade .upgrade-catalog-panel.is-targets .upgrade-reward-card.is-selected::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:1!important;
  border-radius:inherit!important;
  opacity:.72!important;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(224,224,224,.10) 0 7px,
      rgba(224,224,224,.03) 7px 15px,
      transparent 15px 24px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(224,224,224,.055) 0 5px,
      transparent 5px 17px
    )!important;
  box-shadow:
    inset 0 0 12px rgba(224,224,224,.07),
    inset 0 0 22px rgba(224,224,224,.03)!important;
}


/* Upgrade v29.87 — always-visible preset offer slots (max 6) with fixed placeholders, without resizing the main container. */
html body .view-upgrade .upgrade-offer-stage{
  padding-top:34px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-drop-hint{
  position:absolute!important;
  top:8px!important;
  left:28px!important;
  right:28px!important;
  z-index:7!important;
  text-align:center!important;
  color:#d8d8d8!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:700!important;
  text-shadow:0 0 6px rgba(216,216,216,.26)!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  top:44px!important;
  height:274px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:132px!important;
  gap:10px!important;
  pointer-events:none!important;
  z-index:1!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot{
  display:block!important;
  width:100%!important;
  height:132px!important;
  clip-path:polygon(0 12px,12px 0,calc(100% - 28px) 0,calc(100% - 18px) 7px,100% 7px,100% calc(100% - 12px),calc(100% - 12px) 100%,28px 100%,18px calc(100% - 7px),0 calc(100% - 7px))!important;
  border:1px solid rgba(117,243,206,.06)!important;
  background:
    radial-gradient(circle at 50% 50%, rgba(34,58,39,.96) 0%, rgba(20,34,23,.95) 44%, rgba(7,12,9,.98) 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 28px rgba(117,243,206,.04),
    0 8px 18px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg, rgba(75,190,97,.04), rgba(0,0,0,0) 34%, rgba(75,190,97,.05) 68%, rgba(0,0,0,0))!important;
  opacity:.7!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted{
  position:relative!important;
  z-index:3!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:132px!important;
  align-content:start!important;
  gap:10px!important;
  min-height:274px!important;
  height:274px!important;
  max-height:274px!important;
  padding:0!important;
  margin-top:10px!important;
  overflow:auto!important;
  background:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted:empty{
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile{
  align-self:stretch!important;
  justify-self:stretch!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer{
  margin-top:8px!important;
}


/* Upgrade v29.88 — offer placeholders updated to 8 total slots (4x2), greener #26372B-leaning gradient, and slot shape matching the reward-card containers below. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:132px!important;
  gap:10px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot{
  height:132px!important;
  clip-path:none!important;
  border-radius:14px!important;
  border:1px solid rgba(97,143,107,.15)!important;
  background:
    radial-gradient(circle at 50% 46%, rgba(38,55,43,.98) 0%, rgba(38,55,43,.96) 40%, rgba(23,33,26,.97) 68%, rgba(8,13,10,.99) 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    inset 0 0 20px rgba(38,55,43,.18),
    inset 0 0 42px rgba(15,22,17,.34),
    0 8px 18px rgba(0,0,0,.16)!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::after{
  background:linear-gradient(90deg, rgba(38,55,43,.10), rgba(0,0,0,0) 34%, rgba(38,55,43,.12) 68%, rgba(0,0,0,0))!important;
  opacity:.82!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:132px!important;
  gap:10px!important;
}


/* Upgrade v29.89 — use the provided slot artwork directly so the offer placeholders match the exact approved format, colors, and cut corners. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot{
  height:132px!important;
  border:none!important;
  border-radius:0!important;
  clip-path:none!important;
  background:
    url('/images/upgrade-offer-slot-placeholder.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::after{
  content:none!important;
  display:none!important;
}


/* Upgrade v29.90 — keep all 8 offer slots fully visible, add more separation between rows, and overlay the instruction without reserving a new layout row. */
html body .view-upgrade .upgrade-offer-stage{
  padding-top:14px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-drop-hint{
  top:0!important;
  left:28px!important;
  right:28px!important;
  line-height:13px!important;
  height:13px!important;
  margin:0!important;
  padding:0!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer{
  top:14px!important;
  height:282px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,132px)!important;
  grid-auto-rows:132px!important;
  column-gap:10px!important;
  row-gap:18px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot{
  height:132px!important;
  min-height:132px!important;
  max-height:132px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,132px)!important;
  grid-auto-rows:132px!important;
  column-gap:10px!important;
  row-gap:18px!important;
  min-height:282px!important;
  height:282px!important;
  max-height:282px!important;
  margin-top:0!important;
  padding:0!important;
  overflow:hidden!important;
  scrollbar-width:none!important;
  overscroll-behavior:none!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile{
  width:100%!important;
  height:132px!important;
  min-height:0!important;
  max-height:132px!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  overflow:hidden!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer{
  margin-top:8px!important;
}


/* Upgrade v29.91 — prevent Gil values from clipping inside offer slots and move the drag hint slightly upward. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-drop-hint{
  top:-6px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile{
  padding:5px 6px 9px!important;
  grid-template-rows:64px minmax(0,1fr) auto!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile img,
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile .upgrade-item-art{
  width:64px!important;
  height:64px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile .upgrade-item-rarity{
  top:66px!important;
  font-size:7px!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile .upgrade-item-name{
  margin-top:1px!important;
  font-size:8.8px!important;
  line-height:1.02!important;
}
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile .upgrade-item-value{
  margin-top:1px!important;
  font-size:8px!important;
  line-height:1!important;
}


/* Upgrade v29.92 — keep the offer instruction slightly raised without clipping its glyphs. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-drop-hint{
  top:-2px!important;
  height:auto!important;
  min-height:16px!important;
  line-height:16px!important;
  overflow:visible!important;
  white-space:nowrap!important;
}


/* Upgrade v29.93 — place the offer instruction directly below the YOUR OFFER heading,
   without reserving layout space or clipping it inside the stage. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-drop-hint{
  display:none!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column::after{
  content:"Drag your unclaimed rewards here"!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  top:42px!important;
  left:24px!important;
  right:24px!important;
  z-index:20!important;
  height:16px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  color:#d8d8d8!important;
  font-size:13px!important;
  line-height:16px!important;
  font-weight:700!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 0 6px rgba(216,216,216,.26)!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  pointer-events:none!important;
  animation:none!important;
}


/* Upgrade v29.94 — add floral ornaments beside the YOUR OFFER title and a stronger glow on the drag hint text. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span{
  position:relative!important;
  display:inline-block!important;
  padding:0 30px!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span::after{
  content:"✿"!important;
  position:absolute!important;
  top:50%!important;
  transform:translateY(-52%)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:18px!important;
  line-height:1!important;
  color:#fae686!important;
  text-shadow:
    0 0 7px rgba(250,230,134,.95),
    0 0 16px rgba(250,230,134,.56),
    0 0 24px rgba(250,230,134,.24)!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span::before{
  left:4px!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span::after{
  right:4px!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column::after{
  text-shadow:
    0 0 6px rgba(216,216,216,.34),
    0 0 12px rgba(216,216,216,.22),
    0 0 18px rgba(216,216,216,.10)!important;
}


/* Upgrade v29.95 — add matching floral ornaments to DESIRED REWARD using a different flower symbol. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span{
  position:relative!important;
  display:inline-block!important;
  padding:0 30px!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::after{
  content:"❀"!important;
  position:absolute!important;
  top:50%!important;
  transform:translateY(-52%)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:18px!important;
  line-height:1!important;
  color:#c895ff!important;
  text-shadow:
    0 0 7px rgba(200,149,255,.98),
    0 0 16px rgba(200,149,255,.58),
    0 0 24px rgba(145,72,224,.28)!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::before{
  left:4px!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::after{
  right:4px!important;
}


/* Upgrade v29.96 — make the DESIRED REWARD floral ornaments use the same color as the title text. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::after{
  color:#79EFCC!important;
  text-shadow:
    0 0 7px rgba(121,239,204,.98),
    0 0 16px rgba(121,239,204,.58),
    0 0 24px rgba(121,239,204,.28)!important;
}


/* Upgrade v29.97 — place each flower at the inner tip of its decorative line. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span{
  padding-left:0!important;
  padding-right:0!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title > span::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title > span::after{
  content:none!important;
  display:none!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  font-size:18px!important;
  overflow:visible!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before{
  justify-content:flex-end!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  justify-content:flex-start!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after{
  content:"✿"!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  content:"❀"!important;
}


/* Upgrade v29.98 — make each decorative line terminate exactly at the outer edge of its flower. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before{
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      currentColor calc(100% - 18px),
      transparent calc(100% - 18px),
      transparent 100%
    )!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      currentColor 18px,
      transparent 100%
    )!important;
}


/* Upgrade v29.99 — overlap the flower center with the decorative-line tip. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::before,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::before{
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      currentColor calc(100% - 7px),
      transparent calc(100% - 7px),
      transparent 100%
    )!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column > .upgrade-offer-title::after,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title::after{
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent 7px,
      currentColor 7px,
      transparent 100%
    )!important;
}


/* Upgrade v30.00 — layer upgradebg.png over the existing forge gradient and below all interface elements. */
html body .view-upgrade .upgrade-forge{
  position:relative!important;
  isolation:isolate!important;
}

html body .view-upgrade .upgrade-forge::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  opacity:.90!important;
  border-radius:inherit!important;
  background-image:url('/images/upgradebg.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  pointer-events:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

html body .view-upgrade .upgrade-forge > *{
  position:relative!important;
  z-index:1!important;
}

html body .view-upgrade .upgrade-forge::after{
  z-index:3!important;
}


/* Upgrade v30.01 — keep upgradebg.png as a 90% overlay without turning decorative forge children into grid items or changing the approved layout dimensions. */
html body .view-upgrade .upgrade-forge > .upgrade-forge-ambient,
html body .view-upgrade .upgrade-forge > .upgrade-forge-root{
  position:absolute!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-forge-ambient{
  z-index:0!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-forge-root{
  z-index:0!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column{
  position:relative!important;
  z-index:1!important;
}

html body .view-upgrade .upgrade-forge::before{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  z-index:0!important;
  opacity:.90!important;
  background-image:url('/images/upgradebg.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  pointer-events:none!important;
}


/* Upgrade v30.02 — force upgradebg.png to fill the entire main forge background area
   without changing the approved container layout. */
html body .view-upgrade .upgrade-forge::before{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-position:center center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  border-radius:inherit!important;
}


/* Upgrade v30.03 — apply upgradebg.png directly to the forge background so it fills the
   entire main container area, while keeping the green/black gradient beneath it. */
html body .view-upgrade .upgrade-forge{
  background-color:#17281d!important;
  background-image:
    linear-gradient(rgba(23,40,29,.10), rgba(23,40,29,.10)),
    url('/images/upgradebg.png'),
    linear-gradient(
      180deg,
      #20382a 0%,
      #1d3325 28%,
      #17291d 58%,
      #101a13 78%,
      #050706 100%
    )!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:center center,center center,center top!important;
  background-size:100% 100%,100% 100%,100% 100%!important;
  background-origin:border-box!important;
  background-clip:border-box!important;
}

html body .view-upgrade .upgrade-forge::before{
  background-image:none!important;
  opacity:0!important;
}


/* Upgrade v30.04 — add a subtle fake-3D/depth effect to the slot artworks in YOUR OFFER,
   without changing their size, spacing, or the approved background image. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot{
  position:relative!important;
  overflow:hidden!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 10px 18px rgba(255,255,255,.025),
    inset 0 -18px 24px rgba(0,0,0,.22),
    inset 10px 0 16px rgba(0,0,0,.10),
    inset -10px 0 16px rgba(0,0,0,.16),
    0 8px 14px rgba(0,0,0,.18)!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 16%, rgba(255,255,255,0) 38%),
    linear-gradient(135deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 24%, rgba(0,0,0,.06) 74%, rgba(0,0,0,.14) 100%)!important;
  mix-blend-mode:screen!important;
  opacity:.82!important;
  z-index:1!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,0) 68%)!important;
  opacity:.95!important;
  z-index:2!important;
}


/* Upgrade v30.05 — remove the rectangular translucent overlay and keep the depth effect
   constrained to the actual transparent silhouette of each slot image. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot{
  box-shadow:none!important;
  background:
    url('/images/upgrade-offer-slot-placeholder.png') center/100% 100% no-repeat!important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.055))
    drop-shadow(0 7px 8px rgba(0,0,0,.34))
    drop-shadow(0 12px 16px rgba(0,0,0,.16))!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::before,
html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
  box-shadow:none!important;
}


/* Upgrade v30.06 — mirror only the right-side screw heads, keeping the same position and size. */
html body .view-upgrade .upgrade-forge::after{
  background-image:
    url('/images/parafuso.png'),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cimage%20href='/images/parafuso.png'%20width='16'%20height='16'%20transform='translate(16%200)%20scale(-1%201)'/%3E%3C/svg%3E"),
    url('/images/parafuso.png'),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cimage%20href='/images/parafuso.png'%20width='16'%20height='16'%20transform='translate(16%200)%20scale(-1%201)'/%3E%3C/svg%3E")!important;
}


/* Upgrade v30.07 — fix mirrored right-side screws and restyle ATTEMPT UPGRADE as a wooden plank button. */
@font-face{
  font-family:"PortsmouthPress";
  src:url('/fonts/PortsmouthPress-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

html body .view-upgrade .upgrade-forge::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  transform:none!important;
  background-image:
    url('/images/parafuso.png'),
    url('/images/parafuso.png')!important;
  background-repeat:no-repeat!important;
  background-size:
    16px 16px,
    16px 16px!important;
  background-position:
    12px 12px,
    12px calc(100% - 22px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.30))!important;
}

html body .view-upgrade .upgrade-forge::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  border-radius:inherit!important;
  transform:scaleX(-1)!important;
  transform-origin:center center!important;
  background-image:
    url('/images/parafuso.png'),
    url('/images/parafuso.png')!important;
  background-repeat:no-repeat!important;
  background-size:
    16px 16px,
    16px 16px!important;
  background-position:
    12px 12px,
    12px calc(100% - 22px)!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.30))!important;
}

html body .view-upgrade .upgrade-attempt-button{
  position:relative!important;
  isolation:isolate!important;
  min-height:66px!important;
  padding:12px 18px!important;
  border-radius:24px!important;
  border:2px solid rgba(57,34,15,.90)!important;
  color:#172019!important;
  font-family:"PortsmouthPress", Georgia, serif!important;
  font-size:clamp(25px,2.2vw,34px)!important;
  line-height:1!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  background:
    linear-gradient(180deg, rgba(255,240,212,.18) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(0deg, rgba(104,63,30,.08) 0 2px, rgba(170,117,71,.02) 2px 5px),
    linear-gradient(90deg, #aa6d3b 0%, #bb8149 15%, #a56c3a 34%, #b87e47 50%, #a26837 66%, #b77d46 84%, #9a6333 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,241,213,.34),
    inset 0 -3px 0 rgba(73,43,19,.48),
    inset 0 0 0 3px rgba(181,124,67,.26),
    0 4px 0 rgba(56,34,17,.82),
    0 10px 18px rgba(0,0,0,.28)!important;
  text-shadow:
    0 1px 0 rgba(255,234,200,.22),
    0 -1px 0 rgba(0,0,0,.22)!important;
  overflow:hidden!important;
}

html body .view-upgrade .upgrade-attempt-button::before{
  content:""!important;
  position:absolute!important;
  inset:6px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:18px!important;
  border:1px solid rgba(247,220,168,.22)!important;
  background:
    radial-gradient(circle at 18% 32%, rgba(120,70,31,.16), transparent 18%),
    radial-gradient(circle at 72% 58%, rgba(101,58,26,.18), transparent 22%),
    repeating-linear-gradient(
      2deg,
      rgba(78,48,23,.18) 0 2px,
      rgba(167,112,65,.10) 2px 4px,
      rgba(143,94,52,.08) 4px 7px
    ),
    linear-gradient(90deg, rgba(70,42,20,.16), rgba(255,255,255,.05) 16%, rgba(0,0,0,0) 36%, rgba(68,40,18,.14) 72%, rgba(32,18,9,.18))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,208,.24),
    inset 0 -10px 16px rgba(72,43,20,.16)!important;
  opacity:.95!important;
}

html body .view-upgrade .upgrade-attempt-button::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 24%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%)!important;
  opacity:.7!important;
  animation:none!important;
  display:block!important;
}

html body .view-upgrade .upgrade-attempt-button:hover:not(:disabled){
  color:#101711!important;
  transform:translateY(-1px)!important;
  background:
    linear-gradient(180deg, rgba(255,245,220,.22) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(0deg, rgba(104,63,30,.09) 0 2px, rgba(170,117,71,.03) 2px 5px),
    linear-gradient(90deg, #b37440 0%, #c2864b 15%, #ac713e 34%, #c18349 50%, #ab6e3c 66%, #bf8248 84%, #a56a38 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,241,213,.38),
    inset 0 -3px 0 rgba(73,43,19,.44),
    inset 0 0 0 3px rgba(193,136,78,.30),
    0 5px 0 rgba(56,34,17,.80),
    0 13px 22px rgba(0,0,0,.30)!important;
}

html body .view-upgrade .upgrade-attempt-button:active:not(:disabled){
  transform:translateY(2px)!important;
  box-shadow:
    inset 0 3px 8px rgba(60,36,17,.32),
    inset 0 0 0 3px rgba(170,116,63,.22),
    0 2px 0 rgba(56,34,17,.78),
    0 6px 12px rgba(0,0,0,.20)!important;
}

html body .view-upgrade .upgrade-attempt-button:disabled{
  opacity:.88!important;
}


/* Upgrade v30.08 — restore the wooden button to its exact former footprint, remove bold text,
   add centered overlapping galho.png ornaments, and mirror only the right screw images. */
html body .view-upgrade .upgrade-forge{
  overflow:visible!important;
}

/* Retire the old pseudo-element screw implementation; real positioned elements are used below. */
html body .view-upgrade .upgrade-forge::before,
html body .view-upgrade .upgrade-forge::after{
  background-image:none!important;
  opacity:0!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-forge-screw{
  position:absolute!important;
  z-index:8!important;
  display:block!important;
  width:16px!important;
  height:16px!important;
  padding:0!important;
  margin:0!important;
  background:url('/images/parafuso.png') center/16px 16px no-repeat!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.30))!important;
  pointer-events:none!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-forge-screw.is-top-left{
  left:12px!important;
  top:12px!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-forge-screw.is-top-right{
  right:12px!important;
  top:12px!important;
  transform:scaleX(-1)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-forge-screw.is-bottom-left{
  left:12px!important;
  bottom:6px!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-forge-screw.is-bottom-right{
  right:12px!important;
  bottom:6px!important;
  transform:scaleX(-1)!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-forge-branch{
  position:absolute!important;
  left:50%!important;
  z-index:7!important;
  display:block!important;
  width:clamp(230px,32%,430px)!important;
  max-width:44%!important;
  height:auto!important;
  max-height:150px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  transform-origin:center center!important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.34))!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-forge-branch.is-top{
  top:0!important;
  transform:translate(-50%,-50%)!important;
}
html body .view-upgrade .upgrade-forge > .upgrade-forge-branch.is-bottom{
  bottom:0!important;
  transform:translate(-50%,50%) scaleY(-1)!important;
}

html body .view-upgrade .upgrade-attempt-button{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  box-sizing:border-box!important;
  padding:10px 12px!important;
  border-radius:8px!important;
  font-family:"PortsmouthPress", Georgia, serif!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:.05em!important;
}
html body .view-upgrade .upgrade-attempt-button::before{
  inset:4px!important;
  border-radius:5px!important;
}


/* Upgrade v30.09 — reduce galho size a bit, push the wooden button/message lower
   without shifting the chance dial, keep note area fixed so longer messages do not
   move elements above, and use the requested font for the chance percentage. */
@font-face{
  font-family:"BordersDivideHearts";
  src:url('/fonts/Borders Divide But Hearts Shall Conquer - OTF.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

html body .view-upgrade .upgrade-forge > .upgrade-forge-branch{
  width:clamp(200px,28%,360px)!important;
  max-width:38%!important;
  max-height:128px!important;
}

html body .view-upgrade .upgrade-attempt-button{
  margin-top:18px!important;
}

html body .view-upgrade .upgrade-probability-column > p{
  order:5!important;
  margin:10px 0 0!important;
  width:100%!important;
  max-width:320px!important;
  min-height:88px!important;
  height:88px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:center!important;
}

html body .view-upgrade .upgrade-chance-dial > strong{
  font-family:"BordersDivideHearts", Georgia, serif!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
}


/* Upgrade v30.10 — visually center the success chance section a bit better by
   pushing only the button and helper text lower, without altering the rest. */
html body .view-upgrade .upgrade-attempt-button{
  position:relative!important;
  top:16px!important;
}

html body .view-upgrade .upgrade-probability-column > p{
  position:relative!important;
  top:22px!important;
}


/* Upgrade v30.11 — move the whole success-chance cluster lower so it sits more centered
   inside the main middle panel, while keeping the rest unchanged. */
html body .view-upgrade .upgrade-probability-column{
  justify-content:flex-start!important;
  padding-top:42px!important;
  padding-bottom:18px!important;
}

html body .view-upgrade .upgrade-chance-stage{
  margin-top:2px!important;
  margin-bottom:10px!important;
}

html body .view-upgrade .upgrade-attempt-button{
  top:30px!important;
  margin-top:0!important;
}

html body .view-upgrade .upgrade-probability-column > p{
  top:38px!important;
  margin-top:0!important;
}


/* Upgrade v30.12 — center the entire success-chance assembly exactly in the middle
   of the central panel, with the wooden button and status text anchored lower. */
html body .view-upgrade .upgrade-probability-column{
  position:relative!important;
  justify-content:flex-start!important;
  padding:18px!important;
}

html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
}

html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:96px!important;
  top:auto!important;
  width:auto!important;
  margin:0!important;
  z-index:6!important;
}

html body .view-upgrade .upgrade-probability-column > p{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:6px!important;
  top:auto!important;
  width:auto!important;
  max-width:none!important;
  min-height:82px!important;
  height:82px!important;
  margin:0!important;
  z-index:6!important;
}


/* Upgrade v30.13 — add a little more separation: move the success-chance assembly
   slightly upward and move the wooden button/status text slightly downward. */
html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage{
  top:47%!important;
}

html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button{
  bottom:86px!important;
}

html body .view-upgrade .upgrade-probability-column > p{
  bottom:0!important;
}


/* Upgrade v30.14 — increase the separation once more: move the success-chance
   assembly slightly upward, move the wooden button/status text slightly downward,
   and remove the dashed side rails from YOUR OFFER completely. */
html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage{
  top:44%!important;
}

html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button{
  bottom:76px!important;
}

html body .view-upgrade .upgrade-probability-column > p{
  bottom:-10px!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-stage-side-rail{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}


/* Upgrade v30.15 — rarity-colored animated beacon network from each occupied offer/target
   slot toward the success-chance core. The beams sit above panel backgrounds but remain
   behind the slot artwork and stop before the circular dial face. */
html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column{
  z-index:auto!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-beacon-network{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  pointer-events:none!important;
  isolation:isolate!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer{
  z-index:3!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack{
  position:relative!important;
  z-index:4!important;
}

html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage{
  z-index:5!important;
}

html body .view-upgrade .upgrade-beacon-beam{
  --upgrade-beacon-rgb:240,240,240;
  --upgrade-beacon-color:rgb(var(--upgrade-beacon-rgb));
  color:var(--upgrade-beacon-color)!important;
  filter:drop-shadow(0 0 3px rgba(var(--upgrade-beacon-rgb),.72)) drop-shadow(0 0 9px rgba(var(--upgrade-beacon-rgb),.32))!important;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-common{
  --upgrade-beacon-rgb:238,238,238;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-uncommon{
  --upgrade-beacon-rgb:86,183,127;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-rare{
  --upgrade-beacon-rgb:74,140,204;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-epic{
  --upgrade-beacon-rgb:132,64,188;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-legendary{
  --upgrade-beacon-rgb:250,230,134;
}

html body .view-upgrade .upgrade-beacon-halo,
html body .view-upgrade .upgrade-beacon-core,
html body .view-upgrade .upgrade-beacon-flow{
  fill:none!important;
  stroke-linecap:round!important;
  stroke:var(--upgrade-beacon-color)!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-beacon-halo{
  stroke-width:11px!important;
  opacity:.11!important;
  filter:blur(3.2px)!important;
  animation:upgradeBeaconHaloPulse 2.4s ease-in-out infinite!important;
}

html body .view-upgrade .upgrade-beacon-core{
  stroke-width:2.2px!important;
  stroke-dasharray:17 10!important;
  opacity:.76!important;
  animation:upgradeBeaconCoreFlow 1.55s linear infinite!important;
}

html body .view-upgrade .upgrade-beacon-flow{
  stroke:#fff!important;
  stroke-width:.85px!important;
  stroke-dasharray:2 18!important;
  opacity:.80!important;
  animation:upgradeBeaconSparkFlow .82s linear infinite!important;
}

html body .view-upgrade .upgrade-beacon-particle{
  fill:var(--upgrade-beacon-color)!important;
  color:var(--upgrade-beacon-color)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:12px!important;
  font-weight:400!important;
  paint-order:stroke fill!important;
  stroke:rgba(4,8,5,.45)!important;
  stroke-width:.45px!important;
  filter:drop-shadow(0 0 3px rgba(var(--upgrade-beacon-rgb),.96)) drop-shadow(0 0 8px rgba(var(--upgrade-beacon-rgb),.58))!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-beacon-beam.rarity-common .upgrade-beacon-particle{
  fill:#fff!important;
  font-size:11px!important;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-uncommon .upgrade-beacon-particle{
  font-size:14px!important;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-rare .upgrade-beacon-particle{
  font-size:13px!important;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-epic .upgrade-beacon-particle{
  font-size:15px!important;
}
html body .view-upgrade .upgrade-beacon-beam.rarity-legendary .upgrade-beacon-particle{
  font-size:14px!important;
}

@keyframes upgradeBeaconCoreFlow{
  to{stroke-dashoffset:-54}
}
@keyframes upgradeBeaconSparkFlow{
  to{stroke-dashoffset:-40}
}
@keyframes upgradeBeaconHaloPulse{
  0%,100%{opacity:.075}
  50%{opacity:.19}
}

@media(prefers-reduced-motion:reduce){
  html body .view-upgrade .upgrade-beacon-core{
    animation-duration:3.2s!important;
  }
  html body .view-upgrade .upgrade-beacon-flow{
    animation-duration:2.1s!important;
  }
  html body .view-upgrade .upgrade-beacon-halo{
    animation-duration:4.5s!important;
  }
}


/* Upgrade v30.16 — lighter beacon rendering plus single-field manual gil entry. */
html body .view-upgrade .upgrade-forge > .upgrade-beacon-network{
  contain:layout paint!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
}
html body .view-upgrade .upgrade-beacon-beam{
  filter:drop-shadow(0 0 4px rgba(var(--upgrade-beacon-rgb),.42))!important;
}
html body .view-upgrade .upgrade-beacon-halo{
  stroke-width:8px!important;
  opacity:.085!important;
  filter:blur(1.8px)!important;
}
html body .view-upgrade .upgrade-beacon-core{
  opacity:.72!important;
  animation-duration:1.8s!important;
}
html body .view-upgrade .upgrade-beacon-flow{
  stroke-width:.7px!important;
  opacity:.64!important;
  animation-duration:1.05s!important;
}
html body .view-upgrade .upgrade-beacon-particle{
  filter:drop-shadow(0 0 4px rgba(var(--upgrade-beacon-rgb),.45))!important;
}

html body .view-upgrade .upgrade-gil-offer{
  margin-top:auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:grid!important;
  gap:6px!important;
}
html body .view-upgrade .upgrade-gil-field-label{
  color:#D8D8D8!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  text-shadow:0 0 8px rgba(216,216,216,.28),0 0 16px rgba(216,216,216,.12)!important;
}
html body .view-upgrade .upgrade-gil-entry-row{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:40px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  border:1px solid rgba(214,180,95,.2)!important;
  background:linear-gradient(180deg,rgba(15,20,17,.94),rgba(20,28,23,.9))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
html body .view-upgrade .upgrade-gil-entry-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
}
html body .view-upgrade .upgrade-gil-entry-icon > img{
  width:16px!important;
  height:16px!important;
  object-fit:contain!important;
  display:block!important;
}
html body .view-upgrade .upgrade-gil-entry-input{
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  outline:none!important;
  background:transparent!important;
  color:#f5e8b7!important;
  font-size:12px!important;
  font-weight:700!important;
  text-align:left!important;
  box-shadow:none!important;
  appearance:textfield!important;
}
html body .view-upgrade .upgrade-gil-entry-input::-webkit-outer-spin-button,
html body .view-upgrade .upgrade-gil-entry-input::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  margin:0!important;
}
html body .view-upgrade .upgrade-gil-stepper{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
}
html body .view-upgrade .upgrade-gil-step-button{
  width:22px!important;
  height:22px!important;
  padding:0!important;
  border:1px solid rgba(214,180,95,.22)!important;
  border-radius:6px!important;
  background:rgba(7,11,9,.52)!important;
  color:#e8d78c!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  transition:transform .14s ease, border-color .14s ease, background-color .14s ease!important;
}
html body .view-upgrade .upgrade-gil-step-button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(242,210,123,.42)!important;
  background:rgba(18,26,21,.8)!important;
}
html body .view-upgrade .upgrade-gil-current-value{
  color:#fae686!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
@media (max-width: 860px){
  html body .view-upgrade .upgrade-gil-entry-row{
    grid-template-columns:auto minmax(0,1fr)!important;
    row-gap:8px!important;
    padding:8px 10px!important;
  }
  html body .view-upgrade .upgrade-gil-stepper{
    justify-self:start!important;
  }
  html body .view-upgrade .upgrade-gil-current-value{
    justify-self:end!important;
  }
}


/* Upgrade v30.17 — strengthen the label glow, make the Gil field more transparent,
   and keep all numbers inside it formatted with Brazilian thousands separators. */
html body .view-upgrade .upgrade-gil-field-label{
  color:#D8D8D8!important;
  text-shadow:
    0 0 4px rgba(216,216,216,.48),
    0 0 10px rgba(216,216,216,.30),
    0 0 18px rgba(216,216,216,.15)!important;
}

html body .view-upgrade .upgrade-gil-entry-row{
  background:
    linear-gradient(
      180deg,
      rgba(15,20,17,.68),
      rgba(20,28,23,.58)
    )!important;
  border-color:rgba(214,180,95,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.17)!important;
}

html body .view-upgrade .upgrade-gil-entry-input{
  font-variant-numeric:tabular-nums!important;
}

html body .view-upgrade .upgrade-gil-current-value{
  font-variant-numeric:tabular-nums!important;
}


/* Upgrade v30.18 — make the selected DESIRED REWARD float lightly and slowly
   while keeping its current appearance and layout intact. */
@keyframes upgradeDesiredRewardFloat{
  0%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(0, -3px, 0);
  }
  50%{
    transform:translate3d(0, -5px, 0);
  }
  75%{
    transform:translate3d(0, -2px, 0);
  }
  100%{
    transform:translate3d(0, 0, 0);
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile{
  animation:upgradeDesiredRewardFloat 5.8s ease-in-out infinite!important;
  will-change:transform!important;
  transform-origin:center center!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile > *,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile::before,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile::after{
  will-change:transform!important;
}


/* Upgrade v30.19 — speed up the desired reward floating motion while keeping
   the same subtle style and layout. */
@keyframes upgradeDesiredRewardFloat{
  0%{
    transform:translate3d(0, 0, 0);
  }
  20%{
    transform:translate3d(0, -2px, 0);
  }
  45%{
    transform:translate3d(0, -4px, 0);
  }
  70%{
    transform:translate3d(0, -2px, 0);
  }
  100%{
    transform:translate3d(0, 0, 0);
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile{
  animation:upgradeDesiredRewardFloat 3.4s ease-in-out infinite!important;
}


/* Upgrade v30.20 — replace the stepped motion with one continuous, fluid floating arc. */
@keyframes upgradeDesiredRewardFloat{
  0%{
    transform:translate3d(0, 0, 0) rotate(-0.12deg);
  }
  50%{
    transform:translate3d(0, -7px, 0) rotate(0.12deg);
  }
  100%{
    transform:translate3d(0, 0, 0) rotate(-0.12deg);
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-single-target > .upgrade-selection-tile{
  animation-name:upgradeDesiredRewardFloat!important;
  animation-duration:3.6s!important;
  animation-timing-function:cubic-bezier(.45,0,.55,1)!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
  transform:translate3d(0,0,0)!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
}


/* Upgrade v30.22 — move the floating animation to the selected-target wrapper.
   This avoids the fixed transform on the tile and produces one continuous motion
   for the entire desired reward composition. */
@keyframes upgradeDesiredRewardFloatWrapper{
  0%{
    transform:translate3d(0, 2px, 0);
  }
  50%{
    transform:translate3d(0, -6px, 0);
  }
  100%{
    transform:translate3d(0, 2px, 0);
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target{
  animation:upgradeDesiredRewardFloatWrapper 3.8s cubic-bezier(.42,0,.58,1) infinite!important;
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile{
  animation:none!important;
}


/* Upgrade v30.23 — make the disabled wooden ATTEMPT UPGRADE state clearly look inactive
   while preserving the enabled button exactly as it is. */
html body .view-upgrade .upgrade-attempt-button:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
  color:rgba(23,32,25,.62)!important;
  filter:
    grayscale(.72)
    saturate(.42)
    brightness(.68)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 18%),
    repeating-linear-gradient(0deg,rgba(65,48,34,.075) 0 2px,rgba(91,66,43,.025) 2px 5px),
    linear-gradient(90deg,#6f5138 0%,#795a3e 18%,#6a4d35 38%,#77573b 52%,#654932 70%,#725238 86%,#60452f 100%)!important;
  border-color:rgba(43,31,21,.78)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -2px 0 rgba(24,17,11,.48),
    inset 0 0 0 2px rgba(65,45,29,.24),
    0 2px 0 rgba(27,19,12,.62),
    0 5px 10px rgba(0,0,0,.18)!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.035),
    0 -1px 0 rgba(0,0,0,.25)!important;
  transform:none!important;
}

html body .view-upgrade .upgrade-attempt-button:disabled::before{
  opacity:.34!important;
  filter:grayscale(.8) brightness(.62)!important;
}

html body .view-upgrade .upgrade-attempt-button:disabled::after{
  opacity:.14!important;
}


/* Upgrade v30.24 — soften the disabled ATTEMPT UPGRADE appearance.
   Keep it clearly inactive, but much closer to the enabled wooden style. */
html body .view-upgrade .upgrade-attempt-button:disabled{
  opacity:.72!important;
  color:rgba(23,32,25,.82)!important;
  filter:
    grayscale(.28)
    saturate(.72)
    brightness(.86)!important;
  background:
    linear-gradient(180deg,rgba(255,240,212,.10) 0%,rgba(255,255,255,0) 15%),
    repeating-linear-gradient(0deg,rgba(104,63,30,.07) 0 2px,rgba(170,117,71,.02) 2px 5px),
    linear-gradient(90deg,#916039 0%,#a06c40 16%,#8f5e37 35%,#9e693e 51%,#895a35 68%,#99653b 85%,#825532 100%)!important;
  border-color:rgba(57,34,15,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,241,213,.15),
    inset 0 -3px 0 rgba(73,43,19,.38),
    inset 0 0 0 3px rgba(151,100,56,.18),
    0 3px 0 rgba(56,34,17,.68),
    0 7px 14px rgba(0,0,0,.21)!important;
  text-shadow:
    0 1px 0 rgba(255,234,200,.10),
    0 -1px 0 rgba(0,0,0,.22)!important;
}

html body .view-upgrade .upgrade-attempt-button:disabled::before{
  opacity:.67!important;
  filter:grayscale(.28) brightness(.84)!important;
}

html body .view-upgrade .upgrade-attempt-button:disabled::after{
  opacity:.34!important;
}


/* Upgrade v30.28 — based strictly on v30.24.
   Add tronco.png without moving or resizing any existing element:
   above the forge background, below the selected Desired Reward content,
   centered with that reward area and anchored to the main container bottom. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column{
  position:relative!important;
  isolation:isolate!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-trunk{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  z-index:1!important;
  display:block!important;
  width:min(58%, 360px)!important;
  height:52%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
  user-select:none!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-title{
  position:relative!important;
  z-index:3!important;
}

html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-stage{
  position:relative!important;
  z-index:2!important;
}

html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile{
  position:relative!important;
  z-index:4!important;
}


/* Upgrade v30.29 — keep tronco.png permanently visible, enlarge it slightly,
   and make its bottom edge touch the lower border of the main forge container.
   No existing interface element is moved or resized. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-trunk{
  bottom:-20px!important;
  width:min(66%, 400px)!important;
  height:58%!important;
}

@media(max-width:1180px){
  html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-trunk{
    bottom:-13px!important;
  }
}


/* Upgrade v30.30 — in DESIRED REWARD, only the reward artwork floats.
   The artwork's new default position is 20px lower, while all reward text
   elements keep a fixed default position 40px lower. */
@keyframes upgradeDesiredRewardArtworkFloat{
  0%{
    transform:translate3d(0,0,0);
  }
  50%{
    transform:translate3d(0,-7px,0);
  }
  100%{
    transform:translate3d(0,0,0);
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  position:relative!important;
  top:20px!important;
  animation:upgradeDesiredRewardArtworkFloat 3.8s cubic-bezier(.42,0,.58,1) infinite!important;
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-selection-count,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  transform:translate3d(0,40px,0)!important;
}


/* Upgrade v30.31 — establish the new permanent Desired Reward positions:
   artwork 40px lower and reward texts 70px lower. Text uses PortsmouthPress,
   while digits and numeric punctuation use Borders Divide But Hearts Shall Conquer. */
@font-face{
  font-family:"UpgradeDesiredRewardText";
  src:url('/fonts/PortsmouthPress-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:
    U+0000-0024,
    U+0026-002A,
    U+003A-10FFFF;
}

@font-face{
  font-family:"UpgradeDesiredRewardText";
  src:url('/fonts/Borders Divide But Hearts Shall Conquer - OTF.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:
    U+0025,
    U+002B-0039;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  top:40px!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-selection-count,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  transform:translate3d(0,70px,0)!important;
  font-family:"UpgradeDesiredRewardText", Georgia, serif!important;
  font-weight:400!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-selection-count{
  font-size:11px!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity{
  font-size:11px!important;
  line-height:1.05!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name{
  font-size:13px!important;
  line-height:1.08!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  font-size:12px!important;
  line-height:1.05!important;
}


/* Upgrade v30.32 — prevent Desired Reward text clipping, restore the value text,
   enlarge the three reward texts, and move tronco.png 7px to the right. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-trunk{
  transform:translateX(calc(-50% + 7px))!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile{
  overflow:visible!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity{
  left:0!important;
  right:0!important;
  width:100%!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  font-size:13px!important;
  line-height:1.12!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  white-space:normal!important;
  font-size:15px!important;
  line-height:1.12!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  position:relative!important;
  z-index:8!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.12!important;
}


/* Upgrade v30.33 — organize the three DESIRED REWARD texts into fixed,
   independent positions so none of them clip, overlap, or disappear. */
@keyframes upgradeDesiredRewardArtworkFloat{
  0%{
    transform:translate3d(-50%,0,0);
  }
  50%{
    transform:translate3d(-50%,-7px,0);
  }
  100%{
    transform:translate3d(-50%,0,0);
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile{
  position:relative!important;
  display:block!important;
  overflow:visible!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  position:absolute!important;
  left:50%!important;
  top:40px!important;
  margin:0!important;
  transform:translate3d(-50%,0,0)!important;
  animation:upgradeDesiredRewardArtworkFloat 3.8s cubic-bezier(.42,0,.58,1) infinite!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  margin:0!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  transform:none!important;
  text-align:center!important;
  overflow:visible!important;
  text-overflow:clip!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:8!important;
  font-family:"UpgradeDesiredRewardText",Georgia,serif!important;
  font-weight:400!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity{
  top:auto!important;
  bottom:56px!important;
  min-height:16px!important;
  display:block!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:16px!important;
  letter-spacing:.08em!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name{
  top:auto!important;
  bottom:28px!important;
  min-height:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:normal!important;
  font-size:16px!important;
  line-height:1.08!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  top:auto!important;
  bottom:3px!important;
  min-height:20px!important;
  display:block!important;
  white-space:nowrap!important;
  color:#FAE686!important;
  font-size:15px!important;
  line-height:20px!important;
}


/* Upgrade v30.34 — keep everything from v30.33, but move the DESIRED REWARD
   artwork 15px lower and move the three reward text lines 40px lower. */
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  top:55px!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity{
  bottom:16px!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name{
  bottom:-12px!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  bottom:-37px!important;
}


/* Upgrade v30.36 — keep every position from v30.34 exactly unchanged.
   Only enlarge the invisible paint area used by the DESIRED REWARD texts
   so the three lines can render fully without being clipped. */
html body .view-upgrade .upgrade-forge > .upgrade-target-column,
html body .view-upgrade .upgrade-forge > .upgrade-target-column > .upgrade-target-stage,
html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile{
  overflow:visible!important;
  clip-path:none!important;
  contain:none!important;
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-rarity,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-name,
html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-value{
  overflow:visible!important;
  clip-path:none!important;
  text-overflow:clip!important;
  max-height:none!important;
  max-width:none!important;
}


/* Upgrade v30.37 — restore only the floating animation of the Desired Reward artwork.
   Keep every other element exactly as in v30.36. */
@keyframes upgradeDesiredRewardArtworkFloatRestored{
  0%   { transform: translate3d(-50%, 0, 0); }
  50%  { transform: translate3d(-50%, -7px, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  transform:translate3d(-50%,0,0)!important;
  animation-name:upgradeDesiredRewardArtworkFloatRestored!important;
  animation-duration:3.8s!important;
  animation-timing-function:cubic-bezier(.42,0,.58,1)!important;
  animation-iteration-count:infinite!important;
  animation-direction:normal!important;
  animation-play-state:running!important;
  animation-fill-mode:both!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
}


/* Upgrade v30.39 — restore only the Desired Reward artwork floating motion.
   The animation uses the independent translate property so the fixed horizontal
   positioning remains untouched. It is also explicitly kept active in Reduced Motion. */
@keyframes upgradeDesiredRewardArtworkTranslateFloat{
  0%{
    translate:0 0;
  }
  50%{
    translate:0 -7px;
  }
  100%{
    translate:0 0;
  }
}

html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeDesiredRewardArtworkTranslateFloat 3.8s cubic-bezier(.42,0,.58,1) infinite both!important;
  animation-play-state:running!important;
  translate:0 0;
  will-change:translate!important;
}

@media (prefers-reduced-motion: reduce){
  html body .view-upgrade .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation:upgradeDesiredRewardArtworkTranslateFloat 3.8s cubic-bezier(.42,0,.58,1) infinite both!important;
    animation-play-state:running!important;
    translate:0 0;
    will-change:translate!important;
  }
}


/* Upgrade v30.40 — enlarge the reward artwork and the three text lines inside
   YOUR OFFER, while reducing the vertical gaps between rarity, name, and value. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile{
  grid-template-rows:72px 15px 12px!important;
  padding:4px 5px 6px!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > img.upgrade-item-art{
  width:72px!important;
  height:72px!important;
  max-width:72px!important;
  max-height:72px!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-rarity{
  top:70px!important;
  font-size:8.2px!important;
  line-height:.95!important;
  letter-spacing:.08em!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-name{
  margin-top:0!important;
  font-size:10px!important;
  line-height:.96!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-value{
  margin-top:-2px!important;
  font-size:9px!important;
  line-height:.94!important;
}


/* Upgrade v30.41 — in YOUR OFFER, push the three text lines a bit lower and
   rebalance their spacing: rarity separated from the name, and value closer
   to the other texts. Keep the larger art and larger text sizes from v30.40. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile{
  grid-template-rows:72px 18px 14px!important;
  padding:6px 5px 7px!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-rarity{
  top:75px!important;
  font-size:8.2px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-name{
  margin-top:4px!important;
  font-size:10px!important;
  line-height:1.02!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-value{
  margin-top:1px!important;
  font-size:9px!important;
  line-height:1!important;
}


/* Upgrade v30.42 — keep rarity where it is, move the reward name a bit lower,
   and pull the value a little upward inside YOUR OFFER. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-name{
  margin-top:7px!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-value{
  margin-top:-1px!important;
}


/* Upgrade v30.43 — keep everything as-is and only move the YOUR OFFER
   reward name 2px lower and the value 4px higher. */
html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-name{
  margin-top:9px!important;
}

html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-value{
  margin-top:-5px!important;
}


/* Upgrade v30.44 — remove the dashed side rails from DESIRED REWARD only,
   and stack "drag to offer" in YOUR PRIZES like:
   "drag to
      offer" */
html body .view-upgrade .upgrade-target-stage > .upgrade-stage-side-rail{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

html body .view-upgrade .upgrade-catalog-panel.is-offers .upgrade-reward-mode-label{
  width:52px!important;
  max-width:52px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow:visible!important;
  text-align:center!important;
  line-height:1.02!important;
}


/* Upgrade v30.45 — force only "DRAG TO OFFER" to render on two lines. */
html body .view-upgrade .upgrade-catalog-panel.is-offers .upgrade-reward-drag-hint{
  display:block!important;
  text-align:center!important;
  line-height:1.05!important;
  white-space:normal!important;
}


/* Upgrade v30.46 — add one rarity-colored star to the Success Chance atom rings
   for each unique reward currently present in YOUR OFFER. Quantities do not create
   duplicate stars because the source list is already grouped by reward. */
@keyframes upgradeOfferOrbitStarPulse{
  0%,100%{
    opacity:.72;
    scale:.88;
  }
  50%{
    opacity:1;
    scale:1.12;
  }
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star{
  position:absolute!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  pointer-events:none!important;
  font-style:normal!important;
  font-weight:700!important;
  font-size:13px!important;
  line-height:1!important;
  z-index:2!important;
  opacity:.9!important;
  animation:upgradeOfferOrbitStarPulse 2.5s ease-in-out infinite both!important;
  will-change:opacity,scale!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star.rarity-common{
  color:#F1F1F1!important;
  text-shadow:0 0 6px rgba(255,255,255,.92),0 0 15px rgba(255,255,255,.34)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star.rarity-uncommon{
  color:#56B77F!important;
  text-shadow:0 0 7px rgba(86,183,127,.95),0 0 17px rgba(86,183,127,.40)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star.rarity-rare{
  color:#4A8CCC!important;
  text-shadow:0 0 7px rgba(74,140,204,.96),0 0 18px rgba(74,140,204,.42)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star.rarity-epic{
  color:#8440BC!important;
  text-shadow:0 0 7px rgba(132,64,188,.98),0 0 19px rgba(132,64,188,.44)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star.rarity-legendary{
  color:#FAE686!important;
  text-shadow:0 0 8px rgba(250,230,134,.98),0 0 20px rgba(250,230,134,.46)!important;
}

@media (prefers-reduced-motion: reduce){
  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star{
    animation:upgradeOfferOrbitStarPulse 2.5s ease-in-out infinite both!important;
  }
}


/* Upgrade v30.47 — offer rarity stars now use the exact same ✦ / ✧ elements
   and requestAnimationFrame orbit motion as the stars already traveling on the
   Success Chance rings. One star is rendered per unique offered reward. */
html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-offer-orbit-star{
  display:none!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.upgrade-offer-rarity-star.rarity-common{
  color:#F1F1F1!important;
  text-shadow:0 0 8px rgba(255,255,255,.88),0 0 18px rgba(255,255,255,.30)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.upgrade-offer-rarity-star.rarity-uncommon{
  color:#56B77F!important;
  text-shadow:0 0 8px rgba(86,183,127,.92),0 0 18px rgba(86,183,127,.36)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.upgrade-offer-rarity-star.rarity-rare{
  color:#4A8CCC!important;
  text-shadow:0 0 8px rgba(74,140,204,.94),0 0 18px rgba(74,140,204,.38)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.upgrade-offer-rarity-star.rarity-epic{
  color:#8440BC!important;
  text-shadow:0 0 8px rgba(132,64,188,.96),0 0 19px rgba(132,64,188,.40)!important;
}

html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit > .upgrade-atom-star.upgrade-offer-rarity-star.rarity-legendary{
  color:#FAE686!important;
  text-shadow:0 0 8px rgba(250,230,134,.96),0 0 19px rgba(250,230,134,.42)!important;
}


/* Upgrade v30.48 — complete inline Upgrade forge sequence.
   Confirmation popup and full-screen result overlay are replaced by a four-second
   hold gesture and a staged animation inside the existing main forge container. */
@keyframes upgradeInlineHoldVibrate{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  20%{transform:translate3d(-1px,1px,0) rotate(-.25deg)}
  40%{transform:translate3d(1px,-1px,0) rotate(.24deg)}
  60%{transform:translate3d(-1px,-1px,0) rotate(-.18deg)}
  80%{transform:translate3d(1px,1px,0) rotate(.18deg)}
}
@keyframes upgradeInlineHoldRelease{
  0%{transform:translate3d(-1px,1px,0) rotate(-.22deg)}
  28%{transform:translate3d(1px,-1px,0) rotate(.16deg)}
  55%{transform:translate3d(-.5px,.5px,0) rotate(-.08deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes upgradeInlineRewardChargeShake{
  0%,100%{translate:0 0;rotate:0deg}
  20%{translate:-1px 1px;rotate:-.5deg}
  40%{translate:1px -1px;rotate:.55deg}
  60%{translate:-1px -1px;rotate:-.35deg}
  80%{translate:1px 1px;rotate:.35deg}
}
@keyframes upgradeInlineTextDisintegrate{
  0%{opacity:1;filter:blur(0);letter-spacing:inherit;translate:0 0;clip-path:inset(0 0 0 0)}
  35%{opacity:.84;filter:blur(.4px);translate:1px -1px;clip-path:inset(12% 0 7% 0)}
  68%{opacity:.38;filter:blur(1.4px);letter-spacing:.16em;translate:-3px 2px;clip-path:inset(32% 8% 20% 5%)}
  100%{opacity:0;filter:blur(4px);letter-spacing:.28em;translate:8px -4px;clip-path:inset(49% 28% 43% 24%)}
}
@keyframes upgradeInlineRewardFloatOut{
  0%{scale:1;translate:0 0;filter:none}
  55%{scale:1.16;translate:0 -8px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.38))}
  100%{scale:1.27;translate:0 -13px;filter:drop-shadow(0 14px 26px rgba(117,243,206,.25))}
}
@keyframes upgradeInlineOfferToCore{
  0%{opacity:1;scale:1.27;translate:0 -13px;filter:drop-shadow(0 14px 26px rgba(117,243,206,.25))}
  72%{opacity:1;scale:.52;translate:calc(var(--upgrade-to-x,0px) * .82) calc(var(--upgrade-to-y,0px) * .82);filter:drop-shadow(0 0 22px rgba(250,230,134,.45))}
  100%{opacity:0;scale:.08;translate:var(--upgrade-to-x,0px) var(--upgrade-to-y,0px);filter:blur(3px)}
}
@keyframes upgradeInlineTargetToCore{
  0%{opacity:1;scale:1.27;translate:0 -13px;filter:drop-shadow(0 14px 28px rgba(121,239,204,.3))}
  78%{opacity:1;scale:.48;translate:calc(var(--upgrade-to-x,0px) * .84) calc(var(--upgrade-to-y,0px) * .84);filter:drop-shadow(0 0 24px rgba(121,239,204,.48))}
  100%{opacity:0;scale:.06;translate:var(--upgrade-to-x,0px) var(--upgrade-to-y,0px);filter:blur(4px)}
}
@keyframes upgradeInlineDialShatter{
  0%,8%,16%,24%,32%,40%,48%,56%,64%{translate:-1px 1px;rotate:-.35deg;scale:1;opacity:1;filter:none}
  4%,12%,20%,28%,36%,44%,52%,60%,68%{translate:1px -1px;rotate:.35deg;scale:1.015;opacity:1;filter:brightness(1.18)}
  76%{translate:0 0;rotate:0deg;scale:1.08;opacity:1;filter:brightness(1.45)}
  100%{translate:0 0;rotate:2deg;scale:.62;opacity:0;filter:blur(9px) brightness(2)}
}
@keyframes upgradeInlineFragmentBurst{
  0%{opacity:0;translate:0 0;rotate:0deg;scale:.7}
  18%{opacity:1}
  100%{opacity:0;translate:calc(cos(calc(var(--upgrade-fragment-index) * 22.5deg)) * 118px) calc(sin(calc(var(--upgrade-fragment-index) * 22.5deg)) * 86px);rotate:calc(var(--upgrade-fragment-index) * 47deg);scale:.18}
}
@keyframes upgradeInlineDialRebuild{
  0%{opacity:0;scale:.62;filter:blur(9px) brightness(2);rotate:2deg}
  42%{opacity:.56;scale:1.08;filter:blur(2px) brightness(1.45);rotate:-1deg}
  100%{opacity:1;scale:1;filter:none;rotate:0deg}
}
@keyframes upgradeInlineOfferRestore{
  0%{opacity:0;scale:.08;translate:var(--upgrade-to-x,0px) var(--upgrade-to-y,0px);filter:blur(4px) grayscale(1)}
  70%{opacity:1;scale:1.08;translate:0 -3px;filter:blur(0) grayscale(1)}
  100%{opacity:1;scale:1;translate:0 0;filter:grayscale(1) saturate(0) brightness(.58)}
}
@keyframes upgradeInlineTargetRestore{
  0%{opacity:0;scale:.08;translate:var(--upgrade-to-x,0px) var(--upgrade-to-y,0px);filter:blur(4px)}
  72%{opacity:1;scale:1.08;translate:0 -3px;filter:none}
  100%{opacity:1;scale:1;translate:0 0;filter:none}
}
@keyframes upgradeInlineTextRestore{
  0%{opacity:0;filter:blur(4px);translate:6px -3px;clip-path:inset(48% 22% 40% 18%)}
  100%{opacity:1;filter:none;translate:0 0;clip-path:inset(0)}
}
@keyframes upgradeInlineFailureSlash{
  0%{opacity:0;scale:0 1}
  35%{opacity:1}
  100%{opacity:1;scale:1 1}
}
@keyframes upgradeInlineSuccessReveal{
  0%{opacity:0;scale:.2;filter:blur(8px) brightness(1.8)}
  64%{opacity:1;scale:1.12;filter:blur(0) brightness(1.25)}
  100%{opacity:1;scale:1;filter:none}
}

html body .view-upgrade .upgrade-attempt-button > span{
  position:relative!important;
  z-index:7!important;
}
html body .view-upgrade .upgrade-attempt-button > .upgrade-attempt-hold-progress{
  position:absolute!important;
  z-index:6!important;
  left:6px!important;
  bottom:5px!important;
  width:calc((100% - 12px) * var(--upgrade-hold-progress,0))!important;
  height:4px!important;
  display:block!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#4BBE61,#75F3CE 54%,#FAE686)!important;
  box-shadow:0 0 7px rgba(117,243,206,.78),0 0 15px rgba(250,230,134,.34)!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-attempt-button.is-holding{
  animation:upgradeInlineHoldVibrate .105s linear infinite!important;
  cursor:grabbing!important;
}
html body .view-upgrade .upgrade-attempt-button.is-releasing{
  animation:upgradeInlineHoldRelease .52s ease-out both!important;
}
html body .view-upgrade .upgrade-attempt-button.is-finish,
html body .view-upgrade .upgrade-attempt-button.is-finish:disabled{
  opacity:1!important;
  filter:none!important;
  cursor:pointer!important;
  color:#101711!important;
}

html body .view-upgrade .upgrade-page.is-upgrade-sequence-active .upgrade-catalogs,
html body .view-upgrade .upgrade-forge.is-upgrade-sequence-active .upgrade-offer-column,
html body .view-upgrade .upgrade-forge.is-upgrade-sequence-active .upgrade-target-column{
  pointer-events:none!important;
  user-select:none!important;
}
html body .view-upgrade .upgrade-page.is-upgrade-sequence-active .upgrade-catalogs{
  opacity:.72!important;
  filter:saturate(.7) brightness(.82)!important;
}
html body .view-upgrade .upgrade-forge.is-upgrade-sequence-active .upgrade-selection-actions,
html body .view-upgrade .upgrade-forge.is-upgrade-sequence-active .upgrade-gil-stepper,
html body .view-upgrade .upgrade-forge.is-upgrade-sequence-active .upgrade-gil-entry-input{
  visibility:hidden!important;
}

html body .view-upgrade .upgrade-forge.phase-intensify .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-intensify .upgrade-gil-entry-icon{
  animation:upgradeInlineRewardChargeShake .11s linear infinite!important;
  will-change:translate,rotate,filter!important;
}
html body .view-upgrade .upgrade-forge.phase-intensify .upgrade-beacon-core,
html body .view-upgrade .upgrade-forge.phase-intensify .upgrade-beacon-flow,
html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-beacon-core,
html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-beacon-flow,
html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-beacon-core,
html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-beacon-flow,
html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-beacon-core,
html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-beacon-flow,
html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-beacon-core,
html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-beacon-flow,
html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-beacon-core,
html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-beacon-flow{
  animation-duration:calc(1.8s / var(--upgrade-beacon-speed,1))!important;
}

html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-selection-tile > .upgrade-item-rarity,
html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-selection-tile > .upgrade-item-name,
html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-selection-tile > .upgrade-item-value,
html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-selection-tile > .upgrade-selection-count{
  animation:upgradeInlineTextDisintegrate .82s steps(8,end) calc(var(--upgrade-sequence-index,0) * .15s) both!important;
}
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild) .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  opacity:0!important;
}

html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-gil-entry-icon,
html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineRewardFloatOut .9s cubic-bezier(.2,.75,.2,1) both!important;
}
html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-gil-entry-icon.has-offered-gil{
  animation:upgradeInlineOfferToCore .82s cubic-bezier(.4,0,.8,.25) calc(var(--upgrade-sequence-index,0) * .52s) both!important;
  z-index:40!important;
}
html body .view-upgrade .upgrade-forge:is(.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge:is(.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-gil-entry-icon.has-offered-gil{
  opacity:0!important;
}
html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineTargetToCore 1s cubic-bezier(.4,0,.8,.25) both!important;
  z-index:42!important;
}
html body .view-upgrade .upgrade-forge:is(.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{
  opacity:0!important;
}
html body .view-upgrade .upgrade-forge:is(.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-beacon-beam.is-offer{
  opacity:0!important;
}
html body .view-upgrade .upgrade-forge:is(.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-beacon-beam.is-target{
  opacity:0!important;
}

html body .view-upgrade .upgrade-inline-dial-fragments{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:25!important;
  width:220px!important;
  height:220px!important;
  translate:-50% -50%!important;
  pointer-events:none!important;
}
html body .view-upgrade .upgrade-inline-dial-fragments > i{
  --angle:calc(var(--upgrade-fragment-index,0) * 22.5deg);
  position:absolute!important;
  left:calc(50% + cos(var(--angle)) * 82px)!important;
  top:calc(50% + sin(var(--angle)) * 82px)!important;
  width:22px!important;
  height:12px!important;
  opacity:0!important;
  background:linear-gradient(135deg,rgba(250,230,134,.95),rgba(117,243,206,.42),rgba(17,43,26,.9))!important;
  clip-path:polygon(0 30%,72% 0,100% 62%,35% 100%)!important;
  box-shadow:0 0 9px rgba(117,243,206,.46)!important;
}
html body .view-upgrade .upgrade-forge.phase-shatter .upgrade-chance-dial{
  animation:upgradeInlineDialShatter 2s linear both!important;
}
html body .view-upgrade .upgrade-forge.phase-shatter .upgrade-inline-dial-fragments > i{
  animation:upgradeInlineFragmentBurst .75s ease-out calc(1.24s + var(--upgrade-fragment-index,0) * .018s) both!important;
}
html body .view-upgrade .upgrade-forge.phase-failure-pause .upgrade-chance-dial,
html body .view-upgrade .upgrade-forge.phase-success .upgrade-chance-dial{
  opacity:0!important;
  scale:.62!important;
  filter:blur(8px)!important;
}
html body .view-upgrade .upgrade-forge.phase-failure-rebuild .upgrade-chance-dial{
  animation:upgradeInlineDialRebuild 2s cubic-bezier(.2,.72,.2,1) both!important;
}
html body .view-upgrade .upgrade-forge.phase-success .upgrade-live-atom-orbit{
  opacity:.18!important;
}

html body .view-upgrade .upgrade-inline-outcome{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:60!important;
  width:190px!important;
  translate:-50% -50%!important;
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
  pointer-events:none!important;
  animation:upgradeInlineSuccessReveal 1s cubic-bezier(.18,.78,.2,1) both!important;
}
html body .view-upgrade .upgrade-inline-outcome > strong,
html body .view-upgrade .upgrade-inline-outcome-label{
  color:#FAE686!important;
  font-family:"PortsmouthPress",Georgia,serif!important;
  font-size:29px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-shadow:0 0 8px rgba(250,230,134,.9),0 0 24px rgba(75,190,97,.5)!important;
}
html body .view-upgrade .upgrade-inline-outcome > img{
  width:142px!important;
  height:142px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.38)) drop-shadow(0 0 20px rgba(117,243,206,.28))!important;
}
html body .view-upgrade .upgrade-inline-outcome-label{
  position:absolute!important;
  left:50%!important;
  top:calc(50% - 145px)!important;
  z-index:64!important;
  translate:-50% 0!important;
  color:#ff6969!important;
  text-shadow:0 0 8px rgba(255,70,70,.88),0 0 24px rgba(140,0,0,.42)!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineOfferRestore .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
}
html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineTargetRestore .9s cubic-bezier(.18,.78,.2,1) both!important;
}
html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  animation:upgradeInlineTextRestore .62s ease-out calc(.2s + var(--upgrade-sequence-index,0) * .43s) both!important;
}
html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art{
  opacity:1!important;
  scale:1!important;
  translate:0 0!important;
  filter:grayscale(1) saturate(0) brightness(.58)!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-forge.phase-failure .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{
  opacity:1!important;
  scale:1!important;
  translate:0 0!important;
  filter:none!important;
  animation:none!important;
}
html body .view-upgrade .upgrade-inline-failure-slash{
  display:none!important;
}
html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-inline-failure-slash,
html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-inline-failure-slash{
  position:absolute!important;
  left:12%!important;
  right:12%!important;
  top:45%!important;
  z-index:55!important;
  display:block!important;
  height:4px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#ff3636 12%,#ff7171 50%,#ff3636 88%,transparent)!important;
  box-shadow:0 0 5px rgba(255,40,40,.9),0 0 14px rgba(190,0,0,.62)!important;
  rotate:-31deg!important;
  transform-origin:center!important;
}
html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-inline-failure-slash{
  animation:upgradeInlineFailureSlash .46s ease-out calc(.55s + var(--upgrade-sequence-index,0) * .43s) both!important;
}
html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-inline-failure-slash{
  opacity:1!important;
  scale:1 1!important;
}
html body .view-upgrade .upgrade-forge.phase-failure :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count),
html body .view-upgrade .upgrade-forge.phase-failure-restore :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  visibility:visible!important;
}

@media (prefers-reduced-motion: reduce){
  html body .view-upgrade .upgrade-attempt-button.is-holding{animation:upgradeInlineHoldVibrate .105s linear infinite!important}
  html body .view-upgrade .upgrade-attempt-button.is-releasing{animation:upgradeInlineHoldRelease .52s ease-out both!important}
  html body .view-upgrade .upgrade-forge.phase-intensify .upgrade-selection-tile > .upgrade-item-art,
  html body .view-upgrade .upgrade-forge.phase-intensify .upgrade-gil-entry-icon{animation:upgradeInlineRewardChargeShake .11s linear infinite!important}
  html body .view-upgrade .upgrade-forge.phase-disintegrate .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){animation:upgradeInlineTextDisintegrate .82s steps(8,end) calc(var(--upgrade-sequence-index,0) * .15s) both!important}
  html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
  html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-gil-entry-icon,
  html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{animation:upgradeInlineRewardFloatOut .9s cubic-bezier(.2,.75,.2,1) both!important}
  html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
  html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-gil-entry-icon.has-offered-gil{animation:upgradeInlineOfferToCore .82s cubic-bezier(.4,0,.8,.25) calc(var(--upgrade-sequence-index,0) * .52s) both!important}
  html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art{animation:upgradeInlineTargetToCore 1s cubic-bezier(.4,0,.8,.25) both!important}
  html body .view-upgrade .upgrade-forge.phase-shatter .upgrade-chance-dial{animation:upgradeInlineDialShatter 2s linear both!important}
  html body .view-upgrade .upgrade-forge.phase-failure-rebuild .upgrade-chance-dial{animation:upgradeInlineDialRebuild 2s cubic-bezier(.2,.72,.2,1) both!important}
  html body .view-upgrade .upgrade-inline-outcome{animation:upgradeInlineSuccessReveal 1s cubic-bezier(.18,.78,.2,1) both!important}
}


/* Upgrade v30.48 final safeguards — keep consumed slot text hidden on success
   and make the four-second hold gesture reliable on pointer/touch input. */
html body .view-upgrade .upgrade-attempt-button{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
html body .view-upgrade .upgrade-forge.phase-success .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  opacity:0!important;
}

/* Upgrade v30.49 — unclip inline forge travel, keep Desired Reward text hidden
   during the consume sequence, and force the desired reward consume/restore
   animations to override its passive floating state. */
html body .view-upgrade .upgrade-forge:is(.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-failure-restore) .upgrade-offer-stage,
html body .view-upgrade .upgrade-forge:is(.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-failure-restore) .upgrade-target-stage,
html body .view-upgrade .upgrade-forge:is(.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-failure-restore) .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted,
html body .view-upgrade .upgrade-forge:is(.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-failure-restore) .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target,
html body .view-upgrade .upgrade-forge:is(.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-failure-restore) .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile,
html body .view-upgrade .upgrade-forge:is(.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-failure-restore) .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile{
  overflow:visible!important;
  clip-path:none!important;
}

html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  opacity:0!important;
  visibility:hidden!important;
}

html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineRewardFloatOut .9s cubic-bezier(.2,.75,.2,1) both!important;
  animation-play-state:running!important;
  will-change:translate,scale,filter,opacity!important;
  z-index:42!important;
}

html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineTargetToCore 1s cubic-bezier(.4,0,.8,.25) both!important;
  animation-play-state:running!important;
  will-change:translate,scale,filter,opacity!important;
  z-index:42!important;
}

html body .view-upgrade .upgrade-forge:is(.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  opacity:0!important;
}

html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation:upgradeInlineTargetRestore .9s cubic-bezier(.18,.78,.2,1) both!important;
  animation-play-state:running!important;
  will-change:translate,scale,filter,opacity!important;
  z-index:42!important;
}

html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-art{
  filter:grayscale(1) saturate(0) brightness(.58)!important;
}

@media (prefers-reduced-motion: reduce){
  html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation:upgradeInlineRewardFloatOut .9s cubic-bezier(.2,.75,.2,1) both!important;
    animation-play-state:running!important;
  }
  html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation:upgradeInlineTargetToCore 1s cubic-bezier(.4,0,.8,.25) both!important;
    animation-play-state:running!important;
  }
  html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation:upgradeInlineTargetRestore .9s cubic-bezier(.18,.78,.2,1) both!important;
    animation-play-state:running!important;
  }
}

/* Upgrade v30.50 — make the inline consume/restore travel visibly leave the slot areas,
   keep DESIRED REWARD texts hidden until the proper end state, and force the
   desired reward artwork to use the consume/restore animations instead of
   falling back to its passive floating animation. Also keeps failure offer art
   desaturated after the restore sequence. */
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure){
  overflow:visible!important;
}

html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) > .upgrade-offer-column,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) > .upgrade-target-column,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) > .upgrade-probability-column,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-offer-stage,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-target-stage,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-offer-stage > .upgrade-offer-slot-layer,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-target-stage > .upgrade-selection-stack.is-target.is-single-target,
html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore,.phase-failure) .upgrade-selection-tile{
  overflow:visible!important;
  clip-path:none!important;
  contain:none!important;
}

html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-target-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-offers-float .upgrade-gil-entry-icon,
html body .view-upgrade .upgrade-forge.phase-offers-consume .upgrade-gil-entry-icon.has-offered-gil{
  position:relative!important;
  z-index:90!important;
  will-change:translate,scale,filter,opacity!important;
  backface-visibility:hidden!important;
}

html body .view-upgrade .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore) .upgrade-target-stage .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  opacity:0!important;
  visibility:hidden!important;
}

html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation-name:upgradeInlineRewardFloatOut!important;
  animation-duration:.9s!important;
  animation-timing-function:cubic-bezier(.2,.75,.2,1)!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  animation-direction:normal!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
}

html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation-name:upgradeInlineTargetToCore!important;
  animation-duration:1s!important;
  animation-timing-function:cubic-bezier(.4,0,.8,.25)!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  animation-direction:normal!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
}

html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
  animation-name:upgradeInlineTargetRestore!important;
  animation-duration:.9s!important;
  animation-timing-function:cubic-bezier(.18,.78,.2,1)!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  animation-direction:normal!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
}

html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art,
html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-selection-tile > .upgrade-item-art{
  filter:grayscale(1) saturate(0) brightness(.58)!important;
}

@media (prefers-reduced-motion: reduce){
  html body .view-upgrade .upgrade-forge.phase-target-float .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation-name:upgradeInlineRewardFloatOut!important;
    animation-duration:.9s!important;
    animation-timing-function:cubic-bezier(.2,.75,.2,1)!important;
    animation-iteration-count:1!important;
    animation-fill-mode:both!important;
    animation-play-state:running!important;
  }
  html body .view-upgrade .upgrade-forge.phase-target-consume .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation-name:upgradeInlineTargetToCore!important;
    animation-duration:1s!important;
    animation-timing-function:cubic-bezier(.4,0,.8,.25)!important;
    animation-iteration-count:1!important;
    animation-fill-mode:both!important;
    animation-play-state:running!important;
  }
  html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-target-stage .upgrade-selection-stack.is-target.is-single-target > .upgrade-selection-tile > .upgrade-item-art{
    animation-name:upgradeInlineTargetRestore!important;
    animation-duration:.9s!important;
    animation-timing-function:cubic-bezier(.18,.78,.2,1)!important;
    animation-iteration-count:1!important;
    animation-fill-mode:both!important;
    animation-play-state:running!important;
  }
}

/* Upgrade v30.52 — reliable unclipped reward travel using a forge-level flight layer.
   The original slot images stay in place and are hidden only while matching clones
   move above the panel clipping. The Success Chance circle keeps its approved layout. */
@keyframes upgradeInlineFlightFloatV3052{
  0%{opacity:1;translate:0 0;scale:1;filter:none}
  55%{opacity:1;translate:0 -8px;scale:1.16;filter:drop-shadow(0 10px 18px rgba(0,0,0,.38))}
  100%{opacity:1;translate:0 -13px;scale:1.27;filter:drop-shadow(0 14px 26px rgba(117,243,206,.25))}
}
@keyframes upgradeInlineFlightOfferConsumeV3052{
  0%{opacity:1;translate:0 -13px;scale:1.27;filter:drop-shadow(0 14px 26px rgba(117,243,206,.25))}
  84%{opacity:1;translate:calc(var(--upgrade-flight-to-x) * .88) calc(var(--upgrade-flight-to-y) * .88);scale:.40;filter:drop-shadow(0 0 22px rgba(250,230,134,.45))}
  97%{opacity:.94;translate:calc(var(--upgrade-flight-to-x) * .98) calc(var(--upgrade-flight-to-y) * .98);scale:.18;filter:drop-shadow(0 0 14px rgba(250,230,134,.34))}
  100%{opacity:0;translate:var(--upgrade-flight-to-x) var(--upgrade-flight-to-y);scale:.06;filter:blur(2px)}
}
@keyframes upgradeInlineFlightTargetConsumeV3052{
  0%{opacity:1;translate:0 -13px;scale:1.27;filter:drop-shadow(0 14px 28px rgba(121,239,204,.3))}
  86%{opacity:1;translate:calc(var(--upgrade-flight-to-x) * .90) calc(var(--upgrade-flight-to-y) * .90);scale:.38;filter:drop-shadow(0 0 24px rgba(121,239,204,.48))}
  98%{opacity:.92;translate:calc(var(--upgrade-flight-to-x) * .985) calc(var(--upgrade-flight-to-y) * .985);scale:.16;filter:drop-shadow(0 0 14px rgba(121,239,204,.34))}
  100%{opacity:0;translate:var(--upgrade-flight-to-x) var(--upgrade-flight-to-y);scale:.05;filter:blur(2px)}
}
@keyframes upgradeInlineFlightOfferRestoreV3052{
  0%{opacity:1;translate:var(--upgrade-flight-to-x) var(--upgrade-flight-to-y);scale:.06;filter:grayscale(1) saturate(0) brightness(.38) blur(3px)}
  15%{opacity:1;translate:calc(var(--upgrade-flight-to-x) * .88) calc(var(--upgrade-flight-to-y) * .88);scale:.28;filter:grayscale(1) saturate(0) brightness(.44) blur(1px)}
  82%{opacity:1;translate:0 -3px;scale:1.08;filter:grayscale(1) saturate(0) brightness(.62)}
  100%{opacity:1;translate:0 0;scale:1;filter:grayscale(1) saturate(0) brightness(.58)}
}
@keyframes upgradeInlineFlightTargetRestoreV3052{
  0%{opacity:1;translate:var(--upgrade-flight-to-x) var(--upgrade-flight-to-y);scale:.05;filter:blur(3px)}
  15%{opacity:1;translate:calc(var(--upgrade-flight-to-x) * .88) calc(var(--upgrade-flight-to-y) * .88);scale:.26;filter:blur(1px)}
  82%{opacity:1;translate:0 -3px;scale:1.08;filter:none}
  100%{opacity:1;translate:0 0;scale:1;filter:none}
}

#upgrade-page-no-art-glow .upgrade-forge > .upgrade-inline-flight-layer{
  position:absolute!important;
  inset:0!important;
  z-index:18!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  contain:none!important;
}
#upgrade-page-no-art-glow .upgrade-forge > .upgrade-probability-column{
  z-index:24!important;
}
#upgrade-page-no-art-glow .upgrade-inline-flight-reward{
  position:absolute!important;
  left:var(--upgrade-flight-left)!important;
  top:var(--upgrade-flight-top)!important;
  width:var(--upgrade-flight-width)!important;
  height:var(--upgrade-flight-height)!important;
  max-width:none!important;
  max-height:none!important;
  display:none!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  transform-origin:center center!important;
  pointer-events:none!important;
  backface-visibility:hidden!important;
  will-change:translate,scale,opacity,filter!important;
}

#upgrade-page-no-art-glow .upgrade-forge.phase-offers-float .upgrade-inline-flight-reward.is-offer{
  display:block!important;
  animation:upgradeInlineFlightFloatV3052 .9s cubic-bezier(.2,.75,.2,1) both!important;
}
#upgrade-page-no-art-glow .upgrade-forge.phase-offers-consume .upgrade-inline-flight-reward.is-offer{
  display:block!important;
  animation:upgradeInlineFlightOfferConsumeV3052 .82s cubic-bezier(.4,0,.8,.25) calc(var(--upgrade-sequence-index,0) * .52s) both!important;
}
#upgrade-page-no-art-glow .upgrade-forge.phase-target-float .upgrade-inline-flight-reward.is-target{
  display:block!important;
  animation:upgradeInlineFlightFloatV3052 .9s cubic-bezier(.2,.75,.2,1) both!important;
}
#upgrade-page-no-art-glow .upgrade-forge.phase-target-consume .upgrade-inline-flight-reward.is-target{
  display:block!important;
  animation:upgradeInlineFlightTargetConsumeV3052 1s cubic-bezier(.4,0,.8,.25) both!important;
}
#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-reward.is-offer{
  display:block!important;
  animation:upgradeInlineFlightOfferRestoreV3052 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
}
#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-reward.is-target{
  display:block!important;
  animation:upgradeInlineFlightTargetRestoreV3052 .9s cubic-bezier(.18,.78,.2,1) both!important;
}

/* Hide only the original art while its unclipped flight clone is active. */
#upgrade-page-no-art-glow .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore) .upgrade-offer-stage .upgrade-selection-tile > img.upgrade-item-art{
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
}
#upgrade-page-no-art-glow .upgrade-forge:is(.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild,.phase-failure-restore) .upgrade-target-stage .upgrade-selection-tile > img.upgrade-item-art{
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
}

/* Keep all disintegrated labels fully gone, including their text glow/shadow. */
#upgrade-page-no-art-glow .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count){
  opacity:0!important;
  visibility:hidden!important;
  color:transparent!important;
  text-shadow:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-text-stroke:0 transparent!important;
}
#upgrade-page-no-art-glow .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count)::before,
#upgrade-page-no-art-glow .upgrade-forge:is(.phase-offers-float,.phase-offers-consume,.phase-target-float,.phase-target-consume,.phase-resolve-pause,.phase-shatter,.phase-success,.phase-failure-pause,.phase-failure-rebuild) .upgrade-selection-tile > :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count)::after{
  content:none!important;
  display:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
}

/* On FAIL, the returned offered rewards remain completely colorless. The ID selector
   intentionally outranks the no-art-glow safeguard that normally forces filter:none. */
#upgrade-page-no-art-glow .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-selection-tile > img.upgrade-item-art{
  opacity:1!important;
  visibility:visible!important;
  filter:grayscale(1) saturate(0) brightness(.58)!important;
  -webkit-filter:grayscale(1) saturate(0) brightness(.58)!important;
  animation:none!important;
}
#upgrade-page-no-art-glow .upgrade-forge.phase-failure .upgrade-target-stage .upgrade-selection-tile > img.upgrade-item-art{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  -webkit-filter:none!important;
  animation:none!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-offers-float .upgrade-inline-flight-reward.is-offer{animation:upgradeInlineFlightFloatV3052 .9s cubic-bezier(.2,.75,.2,1) both!important}
  #upgrade-page-no-art-glow .upgrade-forge.phase-offers-consume .upgrade-inline-flight-reward.is-offer{animation:upgradeInlineFlightOfferConsumeV3052 .82s cubic-bezier(.4,0,.8,.25) calc(var(--upgrade-sequence-index,0) * .52s) both!important}
  #upgrade-page-no-art-glow .upgrade-forge.phase-target-float .upgrade-inline-flight-reward.is-target{animation:upgradeInlineFlightFloatV3052 .9s cubic-bezier(.2,.75,.2,1) both!important}
  #upgrade-page-no-art-glow .upgrade-forge.phase-target-consume .upgrade-inline-flight-reward.is-target{animation:upgradeInlineFlightTargetConsumeV3052 1s cubic-bezier(.4,0,.8,.25) both!important}
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-reward.is-offer{animation:upgradeInlineFlightOfferRestoreV3052 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important}
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-reward.is-target{animation:upgradeInlineFlightTargetRestoreV3052 .9s cubic-bezier(.18,.78,.2,1) both!important}
}

/* Upgrade v30.56 — keep the red failure slash above the returning reward image
   from the first visible restore frame. The moving slash shares the exact same
   path and timing as its corresponding flight image. */
#upgrade-page-no-art-glow .upgrade-inline-flight-reward{
  z-index:1!important;
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash{
  position:absolute!important;
  left:var(--upgrade-flight-left)!important;
  top:var(--upgrade-flight-top)!important;
  width:var(--upgrade-flight-width)!important;
  height:var(--upgrade-flight-height)!important;
  max-width:none!important;
  max-height:none!important;
  display:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
  transform-origin:center center!important;
  z-index:2!important;
  backface-visibility:hidden!important;
  will-change:translate,scale,opacity,filter!important;
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash::before{
  content:""!important;
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:50%!important;
  height:4px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#ff3636 12%,#ff7171 50%,#ff3636 88%,transparent)!important;
  box-shadow:0 0 5px rgba(255,40,40,.96),0 0 14px rgba(190,0,0,.68)!important;
  transform:translateY(-50%) rotate(-31deg)!important;
  transform-origin:center!important;
  opacity:1!important;
}

/* Hide the stationary slot slash while the separate flight copy is returning. */
#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-inline-failure-slash{
  display:none!important;
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
  display:block!important;
  animation:upgradeInlineFlightOfferRestoreV3052 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
    animation:upgradeInlineFlightOfferRestoreV3052 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}


/* Upgrade v30.57 — animate the red failure cut while it stays above the
   returning reward image. The cut is drawn progressively during the same
   delayed restore window used by each individual offered reward. */
@keyframes upgradeInlineFlightFailureSlashDrawV3057{
  0%,48%{
    opacity:0;
    transform:translateY(-50%) rotate(-31deg) scaleX(0);
    filter:blur(2px) brightness(1.25);
  }
  62%{
    opacity:.72;
    transform:translateY(-50%) rotate(-31deg) scaleX(.28);
    filter:blur(.7px) brightness(1.35);
  }
  82%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(.76);
    filter:blur(0) brightness(1.18);
  }
  100%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(1);
    filter:none;
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
  opacity:0!important;
  transform-origin:center center!important;
  animation:upgradeInlineFlightFailureSlashDrawV3057 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
  will-change:transform,opacity,filter!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
    animation:upgradeInlineFlightFailureSlashDrawV3057 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}

/* Upgrade v30.58 — keep the failure cut above the returning reward and draw it
   progressively from the center outward. Only clip-path is animated so the
   existing restore/movement animation remains untouched. */
@keyframes upgradeInlineFlightFailureSlashRevealV3058{
  0%{
    clip-path:inset(0 50% 0 50%);
  }
  35%{
    clip-path:inset(0 34% 0 34%);
  }
  72%{
    clip-path:inset(0 10% 0 10%);
  }
  100%{
    clip-path:inset(0 0 0 0);
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
  opacity:1!important;
  transform:translateY(-50%) rotate(-31deg)!important;
  filter:none!important;
  animation:upgradeInlineFlightFailureSlashRevealV3058 .46s cubic-bezier(.2,.9,.25,1) calc(.08s + var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
  will-change:clip-path!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
    opacity:1!important;
    transform:translateY(-50%) rotate(-31deg)!important;
    filter:none!important;
    animation:upgradeInlineFlightFailureSlashRevealV3058 .46s cubic-bezier(.2,.9,.25,1) calc(.08s + var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}

/* Upgrade v30.59 — visibly animate the red failure cut above each returning
   offer reward, and apply panelsbg.png to the two lower reward panels. */
@keyframes upgradeInlineFlightFailureSlashScaleV3059{
  0%,42%{
    scale:0 1;
    opacity:.28;
    filter:blur(1.4px) brightness(1.45);
  }
  58%{
    scale:.22 1;
    opacity:.78;
    filter:blur(.5px) brightness(1.35);
  }
  78%{
    scale:.72 1;
    opacity:1;
    filter:none;
  }
  100%{
    scale:1 1;
    opacity:1;
    filter:none;
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
  clip-path:none!important;
  transform:translateY(-50%) rotate(-31deg)!important;
  transform-origin:center center!important;
  animation:upgradeInlineFlightFailureSlashScaleV3059 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
  will-change:scale,opacity,filter!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
    animation:upgradeInlineFlightFailureSlashScaleV3059 .82s cubic-bezier(.18,.78,.2,1) calc(var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}

html body .view-upgrade .upgrade-catalog-panel.is-offers,
html body .view-upgrade .upgrade-catalog-panel.is-targets{
  position:relative!important;
  isolation:isolate!important;
}

html body .view-upgrade .upgrade-catalog-panel.is-offers::after,
html body .view-upgrade .upgrade-catalog-panel.is-targets::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  pointer-events:none!important;
  background-image:
    linear-gradient(180deg,rgba(7,14,10,.22),rgba(7,14,10,.48)),
    url('/images/panelsbg.png')!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  opacity:.92!important;
  filter:saturate(.92) brightness(.82)!important;
  transform-origin:center center!important;
}

html body .view-upgrade .upgrade-catalog-panel.is-targets::after{
  transform:scaleX(-1)!important;
}

html body .view-upgrade .upgrade-catalog-panel.is-offers > *,
html body .view-upgrade .upgrade-catalog-panel.is-targets > *{
  position:relative!important;
  z-index:2!important;
}


/* Upgrade v30.60 — soften the individual reward-card backgrounds in both lower panels
   to 40% opacity, and rebuild the FAIL red slash using transform-based animation so it
   starts visibly in front of the reward art and animates correctly. */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card{
  background:linear-gradient(155deg,rgba(45,62,46,.40),rgba(8,14,9,.40))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-common{
  background:linear-gradient(145deg,rgba(170,164,155,.08),rgba(8,14,9,.40))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-uncommon{
  background:linear-gradient(145deg,rgba(86,183,127,.10),rgba(8,14,9,.40))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-rare{
  background:linear-gradient(145deg,rgba(74,140,204,.10),rgba(8,14,9,.40))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-epic{
  background:linear-gradient(145deg,rgba(132,64,188,.11),rgba(8,14,9,.40))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-legendary{
  background:linear-gradient(145deg,rgba(250,230,134,.10),rgba(8,14,9,.40))!important;
}

/* Rebuild the inline FAIL slash with transform-based animation.
   This avoids the non-animating behavior seen with the previous scale property,
   while keeping the slash above the artwork from the first visible frame. */
@keyframes upgradeInlineFailureSlashV2{
  0%{
    opacity:0;
    transform:rotate(-31deg) scaleX(0);
    filter:brightness(.7);
  }
  18%{
    opacity:1;
    transform:rotate(-31deg) scaleX(.18);
    filter:brightness(1.2);
  }
  60%{
    opacity:1;
    transform:rotate(-31deg) scaleX(.72);
    filter:brightness(1.05);
  }
  100%{
    opacity:1;
    transform:rotate(-31deg) scaleX(1);
    filter:brightness(1);
  }
}

html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-inline-failure-slash,
html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-inline-failure-slash{
  z-index:120!important;
  top:45%!important;
  transform-origin:center center!important;
  rotate:none!important;
  scale:none!important;
  transform:rotate(-31deg) scaleX(0)!important;
  background:linear-gradient(90deg,transparent,rgba(255,44,44,.12) 8%,rgba(255,72,72,.98) 50%,rgba(255,44,44,.12) 92%,transparent)!important;
  box-shadow:0 0 7px rgba(255,48,48,.92),0 0 18px rgba(190,0,0,.68)!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}

html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-inline-failure-slash{
  animation:upgradeInlineFailureSlashV2 .46s cubic-bezier(.22,.88,.26,1) calc(.55s + var(--upgrade-sequence-index,0) * .43s) both!important;
}

html body .view-upgrade .upgrade-forge.phase-failure .upgrade-offer-stage .upgrade-inline-failure-slash{
  opacity:1!important;
  transform:rotate(-31deg) scaleX(1)!important;
}

@media (prefers-reduced-motion: reduce){
  html body .view-upgrade .upgrade-forge.phase-failure-restore .upgrade-offer-stage .upgrade-inline-failure-slash{
    animation:upgradeInlineFailureSlashV2 .46s cubic-bezier(.22,.88,.26,1) calc(.55s + var(--upgrade-sequence-index,0) * .43s) both!important;
  }
}


/* Upgrade v30.61 — lower-panel reward card backgrounds reduced to 10% opacity,
   and the returning FAIL slash now uses a transform-based animation on the
   actual flight-layer pseudo-element so it visibly draws instead of just popping in. */

/* 10% background opacity for reward cards in both "your prizes" and "available upgrades". */
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card{
  background:linear-gradient(155deg,rgba(45,62,46,.10),rgba(8,14,9,.10))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-common{
  background:linear-gradient(145deg,rgba(170,164,155,.03),rgba(8,14,9,.10))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-uncommon{
  background:linear-gradient(145deg,rgba(86,183,127,.04),rgba(8,14,9,.10))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-rare{
  background:linear-gradient(145deg,rgba(74,140,204,.04),rgba(8,14,9,.10))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-epic{
  background:linear-gradient(145deg,rgba(132,64,188,.045),rgba(8,14,9,.10))!important;
}
html body .view-upgrade .upgrade-catalog-panel .upgrade-reward-card.rarity-legendary{
  background:linear-gradient(145deg,rgba(250,230,134,.04),rgba(8,14,9,.10))!important;
}

/* Animate the actual flight-layer red slash with transform, not the non-animating scale property. */
@keyframes upgradeInlineFlightFailureSlashTransformV3061{
  0%{
    opacity:0;
    transform:translateY(-50%) rotate(-31deg) scaleX(0);
    filter:blur(1.4px) brightness(1.45);
  }
  18%{
    opacity:.95;
    transform:translateY(-50%) rotate(-31deg) scaleX(.16);
    filter:blur(.8px) brightness(1.35);
  }
  58%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(.70);
    filter:blur(.15px) brightness(1.08);
  }
  100%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(1);
    filter:none;
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
  z-index:120!important;
  display:block!important;
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
  opacity:0!important;
  clip-path:none!important;
  transform-origin:center center!important;
  transform:translateY(-50%) rotate(-31deg) scaleX(0)!important;
  animation:upgradeInlineFlightFailureSlashTransformV3061 .46s cubic-bezier(.2,.9,.25,1) calc(.08s + var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
  will-change:transform,opacity,filter!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash::before{
    animation:upgradeInlineFlightFailureSlashTransformV3061 .46s cubic-bezier(.2,.9,.25,1) calc(.08s + var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}


/* Upgrade v30.62 — target the actual individual reward-card background override
   and animate a real DOM stroke for the FAIL cut instead of a pseudo-element. */

/* The component's own inline style now uses 10% opacity. Keep this matching rule
   as a safeguard for both lower reward panels. */
#upgrade-page-no-art-glow .upgrade-catalog-panel.is-offers .upgrade-reward-card,
#upgrade-page-no-art-glow .upgrade-catalog-panel.is-targets .upgrade-reward-card{
  background:linear-gradient(155deg,rgba(29,47,31,.10),rgba(6,12,8,.10))!important;
}

/* Disable the old pseudo-element stroke so only the real animated child is visible. */
#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash::before{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* The parent still follows the returning reward's exact motion path. */
#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
  display:block!important;
  z-index:140!important;
  overflow:visible!important;
}

/* The real line is animated independently from zero width to full width. */
@keyframes upgradeInlineFailureStrokeDrawV3062{
  0%{
    opacity:0;
    transform:translateY(-50%) rotate(-31deg) scaleX(0);
    filter:blur(1.5px) brightness(1.5);
  }
  15%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(.08);
    filter:blur(1px) brightness(1.4);
  }
  48%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(.48);
    filter:blur(.35px) brightness(1.18);
  }
  78%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(.84);
    filter:none;
  }
  100%{
    opacity:1;
    transform:translateY(-50%) rotate(-31deg) scaleX(1);
    filter:none;
  }
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash > .upgrade-inline-flight-failure-slash-stroke{
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:50%!important;
  height:4px!important;
  display:block!important;
  border-radius:999px!important;
  opacity:0!important;
  transform:translateY(-50%) rotate(-31deg) scaleX(0)!important;
  transform-origin:center center!important;
  background:linear-gradient(90deg,transparent,#ff3636 12%,#ff7171 50%,#ff3636 88%,transparent)!important;
  box-shadow:0 0 5px rgba(255,40,40,.96),0 0 14px rgba(190,0,0,.68)!important;
  pointer-events:none!important;
  z-index:2!important;
  will-change:transform,opacity,filter!important;
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash > .upgrade-inline-flight-failure-slash-stroke{
  animation:upgradeInlineFailureStrokeDrawV3062 .64s cubic-bezier(.18,.82,.22,1)
    calc(.08s + var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash > .upgrade-inline-flight-failure-slash-stroke{
    animation:upgradeInlineFailureStrokeDrawV3062 .64s cubic-bezier(.18,.82,.22,1)
      calc(.08s + var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}


/* Upgrade v30.63 — the FAIL cut is animated by the Web Animations API on the
   real stroke element. CSS only establishes its fixed visual position above
   the returning reward image and does not animate it. */
#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
  display:block!important;
  z-index:180!important;
  overflow:visible!important;
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash > .upgrade-inline-flight-failure-slash-stroke{
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:50%!important;
  height:4px!important;
  display:block!important;
  border-radius:999px!important;
  opacity:0!important;
  clip-path:inset(0 100% 0 0)!important;
  transform:translateY(-50%) rotate(-31deg)!important;
  transform-origin:left center!important;
  background:linear-gradient(90deg,transparent,#ff3636 12%,#ff7171 50%,#ff3636 88%,transparent)!important;
  box-shadow:0 0 5px rgba(255,40,40,.96),0 0 14px rgba(190,0,0,.68)!important;
  pointer-events:none!important;
  z-index:2!important;
  animation:none!important;
  will-change:clip-path,opacity,filter!important;
}


/* Upgrade v30.64 — draw the FAIL cut as a real SVG stroke.
   The line is revealed progressively along its full diagonal path, while the
   parent keeps following the returning reward image. */
#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
  display:block!important;
  z-index:220!important;
  overflow:visible!important;
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash-svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:5!important;
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash-path{
  fill:none!important;
  stroke:#ff4545!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
  stroke-dasharray:1!important;
  stroke-dashoffset:1;
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(255,72,72,.98)) drop-shadow(0 0 8px rgba(190,0,0,.78));
}

@keyframes upgradeInlineFailureSvgCutV3064{
  0%{
    stroke-dashoffset:1;
    opacity:0;
  }
  8%{
    stroke-dashoffset:.96;
    opacity:1;
  }
  42%{
    stroke-dashoffset:.58;
    opacity:1;
  }
  72%{
    stroke-dashoffset:.22;
    opacity:1;
  }
  100%{
    stroke-dashoffset:0;
    opacity:1;
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore
.upgrade-inline-flight-failure-slash-path{
  animation:upgradeInlineFailureSvgCutV3064 .38s cubic-bezier(.18,.82,.22,1)
    calc(.86s + var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore
  .upgrade-inline-flight-failure-slash-path{
    animation:upgradeInlineFailureSvgCutV3064 .38s cubic-bezier(.18,.82,.22,1)
    calc(.86s + var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}


/* Upgrade v30.66 — keep the returning FAIL slash fully red while it follows the
   reward image, then progressively draw the cut across the reward before the
   restore phase ends. The old grayscale restore animation was the reason the
   animated slash appeared colorless and was replaced by a separate red-safe path. */
@keyframes upgradeInlineFlightFailureSlashRestoreV3066{
  0%{
    opacity:1;
    translate:var(--upgrade-flight-to-x) var(--upgrade-flight-to-y);
    scale:.06;
    filter:none;
  }
  15%{
    opacity:1;
    translate:calc(var(--upgrade-flight-to-x) * .88) calc(var(--upgrade-flight-to-y) * .88);
    scale:.28;
    filter:none;
  }
  82%{
    opacity:1;
    translate:0 -3px;
    scale:1.08;
    filter:none;
  }
  100%{
    opacity:1;
    translate:0 0;
    scale:1;
    filter:none;
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
  display:block!important;
  z-index:240!important;
  filter:none!important;
  animation:upgradeInlineFlightFailureSlashRestoreV3066 .82s cubic-bezier(.18,.78,.2,1)
    calc(var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
}

#upgrade-page-no-art-glow .upgrade-inline-flight-failure-slash-path{
  fill:none!important;
  stroke:#ff3636!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
  stroke-dasharray:100!important;
  stroke-dashoffset:100;
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(255,72,72,.98)) drop-shadow(0 0 9px rgba(190,0,0,.82))!important;
}

@keyframes upgradeInlineFailureSvgCutV3066{
  0%{
    stroke-dashoffset:100;
    opacity:0;
  }
  8%{
    stroke-dashoffset:94;
    opacity:1;
  }
  38%{
    stroke-dashoffset:62;
    opacity:1;
  }
  70%{
    stroke-dashoffset:24;
    opacity:1;
  }
  100%{
    stroke-dashoffset:0;
    opacity:1;
  }
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore
.upgrade-inline-flight-failure-slash-path{
  animation:upgradeInlineFailureSvgCutV3066 .42s cubic-bezier(.18,.82,.22,1)
    calc(.30s + var(--upgrade-sequence-index,0) * .43s) both!important;
  animation-play-state:running!important;
}

@media (prefers-reduced-motion: reduce){
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore .upgrade-inline-flight-failure-slash{
    animation:upgradeInlineFlightFailureSlashRestoreV3066 .82s cubic-bezier(.18,.78,.2,1)
      calc(var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
  #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore
  .upgrade-inline-flight-failure-slash-path{
    animation:upgradeInlineFailureSvgCutV3066 .42s cubic-bezier(.18,.82,.22,1)
      calc(.30s + var(--upgrade-sequence-index,0) * .43s) both!important;
    animation-play-state:running!important;
  }
}


/* Upgrade v30.67 — keep the exact same animated SVG cut after the restore
   animation finishes. The old stationary slash is permanently hidden so there
   is no visual swap at the transition from failure-restore to failure. */
html body #upgrade-page-no-art-glow .upgrade-forge.phase-failure-restore
.upgrade-offer-stage .upgrade-inline-failure-slash,
html body #upgrade-page-no-art-glow .upgrade-forge.phase-failure
.upgrade-offer-stage .upgrade-inline-failure-slash{
  display:none!important;
  opacity:0!important;
  animation:none!important;
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure
.upgrade-inline-flight-failure-slash{
  display:block!important;
  z-index:240!important;
  opacity:1!important;
  translate:0 0!important;
  scale:1!important;
  filter:none!important;
  animation:none!important;
}

#upgrade-page-no-art-glow .upgrade-forge.phase-failure
.upgrade-inline-flight-failure-slash-path{
  stroke:#ff3636!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  stroke-dasharray:100!important;
  stroke-dashoffset:0!important;
  opacity:1!important;
  filter:drop-shadow(0 0 3px rgba(255,72,72,.98))
         drop-shadow(0 0 9px rgba(190,0,0,.82))!important;
  animation:none!important;
}


/* Upgrade v30.69 — apply the darker green to the actual full-site visual root.
   This final high-specificity override covers both the document background and
   the app shell used by every page. */
:root{
  --bg:#0d160f!important;
  --bg-deep:#09100b!important;
}

html{
  background:#09100b!important;
}

html body,
html body .app-shell{
  background-color:#0d1710!important;
  background-image:
    radial-gradient(circle at 14% 6%,rgba(214,180,95,.10),transparent 29%),
    radial-gradient(circle at 84% 10%,rgba(44,67,48,.34),transparent 31%),
    radial-gradient(circle at 50% 100%,rgba(34,53,38,.46),transparent 46%),
    linear-gradient(145deg,#0d160f 0%,#142118 48%,#09100b 100%)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}

html body .app-shell{
  min-height:100vh!important;
}


/* Upgrade v30.71 — adapt the existing forest-green UI surfaces to the darker
   global background without changing the site's green accent hues. */
:root{
  --forest:#263628!important;
  --forest-light:#334936!important;
  --forest-soft:#202f22!important;
  --panel:rgba(27,43,30,.92)!important;
  --panel-strong:rgba(20,33,23,.98)!important;
}

/* Top bar and its texture. */
html body .topbar{
  background:
    linear-gradient(180deg,rgba(16,27,18,.97),rgba(10,19,13,.96))!important;
  border-bottom-color:rgba(214,180,95,.24)!important;
  box-shadow:
    0 10px 30px rgba(2,7,4,.28),
    inset 0 -1px rgba(247,245,237,.018)!important;
}
html body .topbar::before{
  opacity:.50!important;
}

/* Header emblem and player/avatar surfaces retain the same forest hue,
   with reduced luminance so they sit naturally over the new background. */
html body .brand-mark{
  background:
    linear-gradient(145deg,rgba(214,180,95,.18),rgba(34,49,36,.91))!important;
  border-color:rgba(214,180,95,.36)!important;
  box-shadow:
    inset 0 0 20px rgba(214,180,95,.075),
    0 0 24px rgba(22,37,25,.42)!important;
}
html body .avatar{
  background:radial-gradient(circle,#3d5741,#142016 72%)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 5px 14px rgba(2,7,4,.25)!important;
}

/* Navigation shell and the Venue/Help actions. Active gold styling is left
   unchanged; only the supporting green surfaces are adapted. */
html body .nav-tabs{
  background:rgba(28,43,30,.62)!important;
  border-color:rgba(214,180,95,.24)!important;
  box-shadow:
    inset 0 1px rgba(247,245,237,.025),
    0 7px 20px rgba(2,7,4,.18)!important;
}
html body .nav-cluster > .nav-help-button,
html body .nav-cluster > .nav-venue-button{
  background:
    radial-gradient(circle at 50% 0,rgba(214,180,95,.085),transparent 62%),
    linear-gradient(145deg,rgba(27,43,30,.84),rgba(13,24,16,.91))!important;
  border-color:rgba(214,180,95,.20)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 7px 18px rgba(2,7,4,.22)!important;
}
html body .nav-cluster > .nav-help-button:hover:not(:disabled),
html body .nav-cluster > .nav-venue-button:hover:not(:disabled){
  background:
    radial-gradient(circle at 50% 0,rgba(214,180,95,.12),transparent 62%),
    linear-gradient(145deg,rgba(34,51,36,.88),rgba(16,28,19,.94))!important;
}

/* Audio/player controls inside the top bar. */
html body .audio-controls{
  background:
    linear-gradient(90deg,rgba(214,180,95,.028),transparent 38%,rgba(243,184,203,.018)),
    rgba(10,19,13,.62)!important;
  border-color:rgba(214,180,95,.12)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 5px 14px rgba(2,7,4,.14)!important;
}
html body .audio-icon-button.sound-toggle,
html body .audio-icon-button.sound-toggle:hover{
  background:rgba(11,21,14,.92)!important;
}

/* Fortune Echo keeps its current green identity, but its illuminated center
   is brought down to the same darkness range as the new page background. */
html body .ticker{
  border-color:rgba(214,180,95,.24)!important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(19,31,21,.28) 7%,
      rgba(25,40,28,.78) 18%,
      rgba(27,43,30,.88) 50%,
      rgba(25,40,28,.78) 82%,
      rgba(19,31,21,.28) 93%,
      transparent 100%)!important;
  box-shadow:
    0 12px 30px rgba(2,7,4,.18),
    inset 0 1px rgba(247,245,237,.018)!important;
}


/* Upgrade v30.72 — use bg.png as the full-site background while preserving
   the approved darker green base and all adapted interface colors. */
html{
  background-color:#09100b!important;
  background-image:url('/images/bg.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}

html body,
html body .app-shell{
  background-color:#0d1710!important;
  background-image:url('/images/bg.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}

html body .app-shell{
  min-height:100vh!important;
}


/* Upgrade v30.73 — mirror bg.png and restore the approved green background
   treatment above it at reduced opacity. */
html{
  position:relative!important;
  min-height:100%!important;
  background:#09100b!important;
  background-image:none!important;
}


html::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:url('/images/bg.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  transform:scaleX(-1)!important;
  transform-origin:center center!important;
}

html::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:.68!important;
  background:
    radial-gradient(circle at 14% 6%,rgba(214,180,95,.10),transparent 29%),
    radial-gradient(circle at 84% 10%,rgba(44,67,48,.34),transparent 31%),
    radial-gradient(circle at 50% 100%,rgba(34,53,38,.46),transparent 46%),
    linear-gradient(145deg,#0d160f 0%,#142118 48%,#09100b 100%)!important;
}

html body{
  position:relative!important;
  z-index:2!important;
  background:transparent!important;
}

html body .app-shell{
  position:relative!important;
  background:transparent!important;
  min-height:100vh!important;
}


/* Upgrade v30.75 — slightly strengthen the mirrored site overlay and add the
   hanging decorative chains beside the two upgrade hero characters without
   moving any existing layout elements. */
html::after{
  opacity:.68!important;
}

html body .view-upgrade .upgrade-hero-character{
  isolation:isolate!important;
}
html body .view-upgrade .upgrade-hero-character img{
  position:relative!important;
  z-index:2!important;
}
html body .view-upgrade .upgrade-hero-character::before{
  content:""!important;
  position:absolute!important;
  top:-92px!important;
  width:34px!important;
  height:clamp(620px,56vw,760px)!important;
  display:block!important;
  pointer-events:none!important;
  background-image:url('/images/chain.png')!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:100% 100%!important;
  opacity:.98!important;
  z-index:1!important;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(214,180,95,.16))!important;
}
html body .view-upgrade .upgrade-hero-character.is-left::before{
  left:-40px!important;
  right:auto!important;
  transform:none!important;
  transform-origin:center top!important;
}
html body .view-upgrade .upgrade-hero-character.is-right::before{
  right:-40px!important;
  left:auto!important;
  transform:scaleX(-1)!important;
  transform-origin:center top!important;
}
@media(max-width:1080px){
  html body .view-upgrade .upgrade-hero-character::before{display:none!important;}
}


/* Upgrade v30.76 — make the page tint a touch stronger and render the
   hanging chains on the page layer so they visibly overlap the navbar/forge
   area while staying underneath the character/star artwork. */
html::after{
  opacity:.68!important;
}
html body .view-upgrade{
  position:relative!important;
  overflow:hidden!important;
}
html body .view-upgrade::before,
html body .view-upgrade::after{
  content:""!important;
  position:absolute!important;
  top:-18px!important;
  width:34px!important;
  height:clamp(760px,58vw,980px)!important;
  pointer-events:none!important;
  background-image:url('/images/chain.png')!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:100% 100%!important;
  opacity:.98!important;
  z-index:1!important;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(214,180,95,.18))!important;
}
html body .view-upgrade::before{
  left:clamp(92px,7.2vw,126px)!important;
  transform:none!important;
}
html body .view-upgrade::after{
  right:clamp(92px,7.2vw,126px)!important;
  transform:scaleX(-1)!important;
  transform-origin:center top!important;
}
html body .view-upgrade .upgrade-page,
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-forge,
html body .view-upgrade .upgrade-catalogs,
html body .view-upgrade .upgrade-history,
html body .view-upgrade .upgrade-error-banner{
  position:relative!important;
  z-index:2!important;
}
@media(max-width:1080px){
  html body .view-upgrade::before,
  html body .view-upgrade::after{display:none!important;content:none!important;}
}


/* Upgrade v30.77 — keep the current page tint, but correct the hanging
   chains so they preserve their natural proportions and sit beside the hero
   characters like the reference. */
html::after{
  opacity:.68!important;
}
html body .view-upgrade .upgrade-hero-character::before{
  display:none!important;
  content:none!important;
}
html body .view-upgrade::before,
html body .view-upgrade::after{
  top:72px!important;
  width:22px!important;
  height:clamp(620px,40vw,720px)!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:contain!important;
  opacity:.98!important;
}
html body .view-upgrade::before{
  left:92px!important;
  right:auto!important;
  transform:none!important;
}
html body .view-upgrade::after{
  right:92px!important;
  left:auto!important;
  transform:scaleX(-1)!important;
  transform-origin:center top!important;
}
@media(max-width:1440px){
  html body .view-upgrade::before{left:72px!important;}
  html body .view-upgrade::after{right:72px!important;}
}
@media(max-width:1080px){
  html body .view-upgrade::before,
  html body .view-upgrade::after{display:none!important;content:none!important;}
}


/* Upgrade v30.78 — render the hanging chains at their natural image size
   and place them in the exact overlap zone between the top bars and the main
   forge container, without stretching or compressing the artwork. */
html body .view-upgrade .upgrade-hero-character::before{
  display:none!important;
  content:none!important;
}
html body .view-upgrade::before,
html body .view-upgrade::after{
  content:url('/images/chain.png')!important;
  position:absolute!important;
  top:18px!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  background:none!important;
  opacity:.98!important;
  pointer-events:none!important;
  z-index:1!important;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(214,180,95,.18))!important;
}
html body .view-upgrade::before{
  left:92px!important;
  right:auto!important;
  transform:none!important;
  transform-origin:center top!important;
}
html body .view-upgrade::after{
  right:92px!important;
  left:auto!important;
  transform:scaleX(-1)!important;
  transform-origin:center top!important;
}
@media(max-width:1440px){
  html body .view-upgrade::before{left:86px!important;}
  html body .view-upgrade::after{right:86px!important;}
}
@media(max-width:1080px){
  html body .view-upgrade::before,
  html body .view-upgrade::after{display:none!important;content:none!important;}
}


/* Upgrade v30.82 — keep the chain artwork at the same natural size, but
   reposition it to sit much higher, matching the reference overlap between
   the top header area and the upper edge of the main upgrade container. */
html body .view-upgrade::before,
html body .view-upgrade::after{
  top:0!important;
}


/* Upgrade v30.84 — adjust only the left chain again:
   another 80px to the right and 70px upward. */
html body .view-upgrade::before{
  left:252px!important;
  top:-110px!important;
}


/* Upgrade v30.85 — keep both chains exactly where they are, but place them
   above the entire top navigation bar and above the main upgrade container. */
html body .view-upgrade{
  overflow:visible!important;
  contain:none!important;
  isolation:auto!important;
}

html body .view-upgrade::before,
html body .view-upgrade::after{
  z-index:10000!important;
}

/* Preserve the intended artwork hierarchy: characters and hero stars remain
   above the chains, while the bars and main upgrade container stay below. */
html body .view-upgrade .upgrade-hero-character,
html body .view-upgrade .upgrade-hero-stars{
  z-index:10001!important;
}


/* Upgrade v30.89 — the topbar and main-layout are sibling stacking contexts.
   Lift the main-layout just above the topbar so the chain pseudo-elements can
   cross over the complete site header without changing their position. */
html body .app-shell > .topbar{
  z-index:20!important;
}

html body .app-shell > .main-layout{
  position:relative!important;
  z-index:21!important;
  overflow:visible!important;
}

html body .app-shell > .main-layout > .content{
  position:relative!important;
  overflow:visible!important;
}


/* Upgrade v30.94 — keep every existing position unchanged.
   Raise only the complete hero stacking context above chain.png.
   The existing absolute positioning of stars.png, charupgrade.png and
   charupgrade2.png is intentionally left untouched. */
html body .view-upgrade .upgrade-hero{
  z-index:10001!important;
}


/* Upgrade v30.96 — preserve every current position and restore the intended
   layer order. The upgrade-page isolation was trapping the hero inside a
   lower stacking context, so its z-index could never pass chain.png. */
html body .view-upgrade .upgrade-page{
  isolation:auto!important;
  z-index:auto!important;
}

html body .view-upgrade::before,
html body .view-upgrade::after{
  z-index:10000!important;
}

html body .view-upgrade .upgrade-hero{
  position:relative!important;
  z-index:10001!important;
}


/* Upgrade v30.97 — mirror the finalized left-chain placement onto the right
   chain without changing any other layout or layer behavior. */
html body .view-upgrade::after{
  right:252px!important;
  top:-110px!important;
}


/* Upgrade v30.98 — extend both hanging chains downward with chain2.png.
   Keep the current chain positions intact and place chain2 at the same
   horizontal alignment, with its bottom edge anchored to the top of the
   catalog section (Your Prizes / Available Upgrades). The image keeps its
   natural size with no forced scaling. */
html body .view-upgrade .upgrade-catalogs{
  position:relative!important;
  overflow:visible!important;
}
html body .view-upgrade .upgrade-catalogs::before,
html body .view-upgrade .upgrade-catalogs::after{
  content:url('/images/chain2.png')!important;
  position:absolute!important;
  bottom:100%!important;
  display:block!important;
  pointer-events:none!important;
  z-index:10000!important;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(214,180,95,.18))!important;
}
html body .view-upgrade .upgrade-catalogs::before{
  left:252px!important;
  right:auto!important;
  transform:none!important;
  transform-origin:center top!important;
}
html body .view-upgrade .upgrade-catalogs::after{
  right:252px!important;
  left:auto!important;
  transform:scaleX(-1)!important;
  transform-origin:center top!important;
}
@media(max-width:1080px){
  html body .view-upgrade .upgrade-catalogs::before,
  html body .view-upgrade .upgrade-catalogs::after{display:none!important;content:none!important;}
}


/* Upgrade v30.99 — keep only one chain2 image (left side) and move it
   20px downward, without changing its natural size. */
html body .view-upgrade .upgrade-catalogs::before{
  bottom:calc(100% - 20px)!important;
}

html body .view-upgrade .upgrade-catalogs::after{
  display:none!important;
  content:none!important;
}


/* Upgrade v31.00 — move the single chain2 image 40px to the left. */
html body .view-upgrade .upgrade-catalogs::before{
  left:212px!important;
}


/* Upgrade v31.01 — move the single chain2 image 50px further to the left. */
html body .view-upgrade .upgrade-catalogs::before{
  left:162px!important;
}


/* Upgrade v31.02 — move the single chain2 image 25px further to the left. */
html body .view-upgrade .upgrade-catalogs::before{
  left:137px!important;
}


/* Upgrade v31.03 — move the single chain2 image 50px further to the left. */
html body .view-upgrade .upgrade-catalogs::before{
  left:87px!important;
}


/* Upgrade v31.04 — move the single chain2 image 30px further to the left. */
html body .view-upgrade .upgrade-catalogs::before{
  left:57px!important;
}


/* Upgrade v31.05 — move the single chain2 image 10px further to the left
   and place it one layer below all catalog panels. */
html body .view-upgrade .upgrade-catalogs{
  position:relative!important;
  isolation:auto!important;
}

html body .view-upgrade .upgrade-catalogs::before{
  left:47px!important;
  z-index:0!important;
}

html body .view-upgrade .upgrade-catalogs > *{
  position:relative!important;
  z-index:1!important;
}


/* Upgrade v31.06 — place chain2.png behind every upgrade panel.
   Remove the catalog stacking context so the negative layer can sit beneath
   both the main forge panel and the lower catalog panels. */
html body .view-upgrade .upgrade-catalogs{
  position:relative!important;
  z-index:auto!important;
  isolation:auto!important;
}

html body .view-upgrade .upgrade-catalogs::before{
  z-index:-1!important;
}

html body .view-upgrade .upgrade-forge,
html body .view-upgrade .upgrade-catalog-panel,
html body .view-upgrade .upgrade-history,
html body .view-upgrade .upgrade-error-banner{
  position:relative!important;
  z-index:1!important;
}


/* Upgrade v31.07 — move chain2.png 5px to the right and darken only the
   external side-vine / static side-petal greens to match the newer site green.
   Flowers and falling animated petals remain unchanged. */
html body .view-upgrade .upgrade-catalogs::before{
  left:52px!important;
}

/* Side vines: darker green only */
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine,
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine::before,
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine::after{
  background:
    linear-gradient(180deg,
      rgba(52,82,60,.98) 0%,
      rgba(37,59,43,.98) 48%,
      rgba(24,38,28,.98) 100%)!important;
  box-shadow:
    0 0 0 1px rgba(20,34,24,.18) inset,
    0 0 8px rgba(31,52,38,.18)!important;
}

/* SVG vine strokes: darker green only */
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-main{
  stroke:#274031!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-branch{
  stroke:#32503c!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-thread{
  stroke:#3e6349!important;
}

/* Static side petals/leaves only */
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-leaf{
  background:
    linear-gradient(145deg,
      #52795e 0%,
      #35553e 52%,
      #203225 100%)!important;
  box-shadow:
    0 0 0 1px rgba(24,37,27,.16) inset,
    0 0 10px rgba(35,59,43,.16)!important;
}


/* Upgrade v31.08 — restore the visible body color of the external vines and
   side leaves. Use a darker site-matching green without changing shapes,
   animations, flowers, or the falling-petal effect. */
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine,
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine::before,
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine::after{
  background:none!important;
  box-shadow:none!important;
}

html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg{
  filter:
    drop-shadow(0 0 5px rgba(47,126,67,.22))
    drop-shadow(0 0 12px rgba(38,91,49,.10))!important;
}

html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-main{
  stroke:#3d914f!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-branch{
  stroke:#347b45!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-thread{
  stroke:#4a9a5d!important;
}

html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-leaf{
  background:
    linear-gradient(145deg,
      #61ad70 0%,
      #3d8d4e 48%,
      #20542d 100%)!important;
  box-shadow:0 0 8px rgba(47,126,67,.24)!important;
}


/* Upgrade v31.09 — darken the side vine/static leaf greens further so they
   blend better with the darker overall site theme. */
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-main{
  stroke:#2f6b3b!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-branch{
  stroke:#285d33!important;
}
html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-vine-svg .is-thread{
  stroke:#387847!important;
}

html body .view-upgrade .upgrade-viewport-side-decor .upgrade-viewport-leaf{
  background:
    linear-gradient(145deg,
      #4f8b5a 0%,
      #2f6b3b 48%,
      #193c21 100%)!important;
  box-shadow:0 0 8px rgba(32,84,45,.20)!important;
}


/* v31.10 — Coffer Hall search/filter container uses bg2.png and filter chips
   now look like wooden planks. */
.view-shop .catalog-tools{
  position:relative!important;
  overflow:hidden!important;
  margin-bottom:20px!important;
  padding:16px 16px 14px!important;
  border:1px solid rgba(214,180,95,.22)!important;
  border-radius:16px!important;
  background:
    linear-gradient(180deg,rgba(18,28,18,.56),rgba(10,15,11,.72)),
    url('/images/bg2.png') center/cover no-repeat!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.view-shop .catalog-tools::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 0,rgba(250,230,134,.08),transparent 34%),
    linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent)!important;
}
.view-shop .catalog-tools > *{position:relative!important;z-index:1!important;}

.view-shop .search-box{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:46px!important;
  padding:0 13px!important;
  border:1px solid rgba(214,180,95,.24)!important;
  border-radius:11px!important;
  background:rgba(7,11,8,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.view-shop .search-box span{
  color:#fae686!important;
  font-size:22px!important;
  transform:rotate(-15deg)!important;
}
.view-shop .search-box input{
  width:100%!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#f7f1e4!important;
}
.view-shop .search-box input::placeholder{color:rgba(233,226,208,.58)!important;}

.view-shop .filter-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin-top:12px!important;
  padding:2px 0 0!important;
  overflow:visible!important;
}
.view-shop .filter-chips::before{display:none!important;}

.view-shop .filter-chip{
  position:relative!important;
  isolation:isolate!important;
  border:1px solid rgba(73,44,19,.92)!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  color:#f7eedc!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 22%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 3px,rgba(0,0,0,0) 3px 18px),
    linear-gradient(180deg,#8f6439 0%,#744b27 48%,#5b381d 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(49,26,9,.58),
    0 4px 10px rgba(0,0,0,.24)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.72)!important;
  transform:none!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.view-shop .filter-chip::before{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  border-radius:9px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%,rgba(0,0,0,.08) 100%)!important;
  z-index:-1!important;
}
.view-shop .filter-chip:hover:not(:disabled){
  transform:translateY(-1px)!important;
  filter:brightness(1.05)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -3px 0 rgba(49,26,9,.62),
    0 8px 16px rgba(0,0,0,.26)!important;
}
.view-shop .filter-chip:active:not(:disabled){
  transform:translateY(1px)!important;
  box-shadow:
    inset 0 2px 0 rgba(49,26,9,.3),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.24)!important;
}
.view-shop .filter-chip.active{
  color:#fff8ea!important;
  border-color:rgba(109,73,34,.98)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 24%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 3px,rgba(0,0,0,0) 3px 18px),
    linear-gradient(180deg,#ad7a43 0%,#8b5b2f 48%,#71431f 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -3px 0 rgba(65,34,13,.58),
    0 0 0 1px rgba(250,230,134,.18),
    0 7px 16px rgba(0,0,0,.28)!important;
}

.view-shop .catalog-count{
  margin-top:12px!important;
  color:#d7d0bf!important;
  font-size:12px!important;
  text-align:right!important;
  text-shadow:0 1px 1px rgba(0,0,0,.45)!important;
}

@media (max-width:720px){
  .view-shop .catalog-tools{padding:14px 14px 12px!important;}
  .view-shop .filter-chip{padding:9px 12px!important;}
  .view-shop .catalog-count{text-align:left!important;}
}


/* v31.11 — refine Coffer Hall filter buttons to match the wooden ATTEMPT UPGRADE style more closely. */
.view-shop .filter-chip{
  position:relative!important;
  isolation:isolate!important;
  min-height:46px!important;
  padding:9px 16px 10px!important;
  border-radius:16px!important;
  border:2px solid rgba(57,34,15,.90)!important;
  color:#172019!important;
  font-family:"PortsmouthPress", Georgia, serif!important;
  font-size:clamp(16px,1.12vw,21px)!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  background:
    linear-gradient(180deg, rgba(255,240,212,.18) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(0deg, rgba(104,63,30,.08) 0 2px, rgba(170,117,71,.02) 2px 5px),
    linear-gradient(90deg, #aa6d3b 0%, #bb8149 15%, #a56c3a 34%, #b87e47 50%, #a26837 66%, #b77d46 84%, #9a6333 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,241,213,.34),
    inset 0 -3px 0 rgba(73,43,19,.48),
    inset 0 0 0 2px rgba(181,124,67,.24),
    0 3px 0 rgba(56,34,17,.82),
    0 8px 14px rgba(0,0,0,.22)!important;
  text-shadow:
    0 1px 0 rgba(255,234,200,.22),
    0 -1px 0 rgba(0,0,0,.22)!important;
  overflow:hidden!important;
  transform:none!important;
}
.view-shop .filter-chip::before{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:11px!important;
  border:1px solid rgba(247,220,168,.20)!important;
  background:
    radial-gradient(circle at 18% 32%, rgba(120,70,31,.15), transparent 18%),
    radial-gradient(circle at 72% 58%, rgba(101,58,26,.18), transparent 22%),
    repeating-linear-gradient(2deg, rgba(78,48,23,.17) 0 2px, rgba(167,112,65,.10) 2px 4px, rgba(143,94,52,.08) 4px 7px),
    linear-gradient(90deg, rgba(70,42,20,.14), rgba(255,255,255,.04) 16%, rgba(0,0,0,0) 36%, rgba(68,40,18,.12) 72%, rgba(32,18,9,.16))!important;
  box-shadow:inset 0 1px 0 rgba(255,239,208,.22), inset 0 -8px 12px rgba(72,43,20,.14)!important;
  opacity:.95!important;
  display:block!important;
}
.view-shop .filter-chip::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 24%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%)!important;
  opacity:.65!important;
  display:block!important;
}
.view-shop .filter-chip:hover:not(:disabled){
  color:#101711!important;
  transform:translateY(-1px)!important;
  background:
    linear-gradient(180deg, rgba(255,245,220,.22) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(0deg, rgba(104,63,30,.09) 0 2px, rgba(170,117,71,.03) 2px 5px),
    linear-gradient(90deg, #b37440 0%, #c2864b 15%, #ac713e 34%, #c18349 50%, #ab6e3c 66%, #bf8248 84%, #a56a38 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,241,213,.38),
    inset 0 -3px 0 rgba(73,43,19,.44),
    inset 0 0 0 2px rgba(193,136,78,.30),
    0 4px 0 rgba(56,34,17,.80),
    0 10px 18px rgba(0,0,0,.26)!important;
}
.view-shop .filter-chip:active:not(:disabled){
  transform:translateY(2px)!important;
  box-shadow:
    inset 0 3px 8px rgba(60,36,17,.30),
    inset 0 1px 0 rgba(255,241,213,.16),
    inset 0 0 0 2px rgba(181,124,67,.20),
    0 1px 0 rgba(56,34,17,.80),
    0 4px 10px rgba(0,0,0,.20)!important;
}
.view-shop .filter-chip.active{
  color:#fff6e8!important;
  border-color:rgba(72,43,18,.96)!important;
  background:
    linear-gradient(180deg, rgba(255,244,224,.26) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(0deg, rgba(104,63,30,.10) 0 2px, rgba(170,117,71,.03) 2px 5px),
    linear-gradient(90deg, #bd8248 0%, #cf9457 15%, #b67a44 34%, #d09254 50%, #b17540 66%, #ca8d50 84%, #ae7341 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,247,226,.42),
    inset 0 -3px 0 rgba(83,50,21,.52),
    inset 0 0 0 2px rgba(214,170,103,.28),
    0 4px 0 rgba(56,34,17,.82),
    0 0 0 1px rgba(250,230,134,.15),
    0 10px 18px rgba(0,0,0,.28)!important;
  text-shadow:0 1px 0 rgba(80,44,16,.4), 0 0 9px rgba(255,236,183,.18)!important;
}


/* v31.12 — reduce the Coffer Hall wooden filter buttons so they keep the wood look without becoming oversized. */
.view-shop .filter-chip{
  min-height:34px!important;
  padding:6px 12px 7px!important;
  border-radius:12px!important;
  border-width:2px!important;
  font-size:clamp(12px,.88vw,16px)!important;
  line-height:1!important;
  letter-spacing:.05em!important;
  box-shadow:
    inset 0 1px 0 rgba(255,241,213,.30),
    inset 0 -2px 0 rgba(73,43,19,.42),
    inset 0 0 0 1px rgba(181,124,67,.20),
    0 2px 0 rgba(56,34,17,.78),
    0 5px 10px rgba(0,0,0,.18)!important;
}
.view-shop .filter-chip::before{
  inset:3px!important;
  border-radius:8px!important;
}
.view-shop .filter-chip::after{
  border-radius:inherit!important;
}
.view-shop .filter-chip:hover:not(:disabled){
  box-shadow:
    inset 0 1px 0 rgba(255,241,213,.34),
    inset 0 -2px 0 rgba(73,43,19,.40),
    inset 0 0 0 1px rgba(193,136,78,.24),
    0 3px 0 rgba(56,34,17,.78),
    0 7px 12px rgba(0,0,0,.20)!important;
}
.view-shop .filter-chip:active:not(:disabled){
  transform:translateY(1px)!important;
  box-shadow:
    inset 0 2px 6px rgba(60,36,17,.28),
    inset 0 1px 0 rgba(255,241,213,.15),
    inset 0 0 0 1px rgba(181,124,67,.18),
    0 1px 0 rgba(56,34,17,.78),
    0 3px 8px rgba(0,0,0,.18)!important;
}
.view-shop .filter-chip.active{
  box-shadow:
    inset 0 1px 0 rgba(255,247,226,.38),
    inset 0 -2px 0 rgba(83,50,21,.46),
    inset 0 0 0 1px rgba(214,170,103,.24),
    0 3px 0 rgba(56,34,17,.80),
    0 0 0 1px rgba(250,230,134,.12),
    0 7px 12px rgba(0,0,0,.22)!important;
}
@media (max-width: 720px){
  .view-shop .filter-chip{
    min-height:32px!important;
    padding:6px 10px 7px!important;
    font-size:clamp(11px, 3vw, 14px)!important;
  }
}


/* v31.13 — make the Coffer Hall wooden filter buttons a bit less rounded,
   and add animated petals/flowers + stars across the search/filter panel. */
.view-shop .catalog-tools{
  isolation:isolate!important;
}
.view-shop .catalog-tools::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 7% 28%, rgba(250,230,134,.82) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 15% 72%, rgba(255,247,206,.60) 0 1.35px, transparent 2.1px),
    radial-gradient(circle at 28% 18%, rgba(250,230,134,.54) 0 1.4px, transparent 2.15px),
    radial-gradient(circle at 37% 64%, rgba(255,251,233,.72) 0 1.85px, transparent 2.65px),
    radial-gradient(circle at 48% 34%, rgba(250,230,134,.78) 0 1.6px, transparent 2.45px),
    radial-gradient(circle at 61% 78%, rgba(255,247,206,.58) 0 1.25px, transparent 2px),
    radial-gradient(circle at 73% 24%, rgba(250,230,134,.66) 0 1.55px, transparent 2.35px),
    radial-gradient(circle at 86% 58%, rgba(255,249,223,.76) 0 1.8px, transparent 2.55px),
    radial-gradient(circle at 94% 21%, rgba(250,230,134,.54) 0 1.3px, transparent 2.05px),
    radial-gradient(circle at 52% 0, rgba(250,230,134,.10), transparent 34%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent)!important;
  filter:drop-shadow(0 0 4px rgba(250,230,134,.18));
  animation:cofferHallToolsStarfield 8.5s ease-in-out infinite!important;
}
.view-shop .catalog-tools::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(ellipse 9px 4px at 10% 48%, rgba(235,255,238,.24) 0 58%, transparent 63%),
    radial-gradient(ellipse 4px 9px at 10.7% 49%, rgba(111,177,121,.16) 0 58%, transparent 63%),
    radial-gradient(ellipse 8px 3px at 23% 26%, rgba(255,245,235,.22) 0 58%, transparent 63%),
    radial-gradient(ellipse 3px 8px at 23.8% 27.1%, rgba(122,190,132,.15) 0 58%, transparent 63%),
    radial-gradient(ellipse 8px 3px at 41% 74%, rgba(255,241,226,.20) 0 58%, transparent 63%),
    radial-gradient(ellipse 3px 8px at 41.8% 75.1%, rgba(112,174,121,.14) 0 58%, transparent 63%),
    radial-gradient(ellipse 7px 3px at 67% 42%, rgba(255,244,231,.22) 0 58%, transparent 63%),
    radial-gradient(ellipse 3px 7px at 67.7% 43%, rgba(118,181,128,.14) 0 58%, transparent 63%),
    radial-gradient(circle at 79.5% 24%, rgba(255,241,226,.34) 0 2.4px, transparent 2.8px),
    radial-gradient(circle at 77.8% 24%, rgba(255,241,226,.22) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 81.2% 24%, rgba(255,241,226,.22) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 79.5% 22.3%, rgba(255,241,226,.22) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 79.5% 25.7%, rgba(255,241,226,.22) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 79.5% 24%, rgba(249,227,133,.46) 0 .95px, transparent 1.35px),
    radial-gradient(circle at 58.5% 66%, rgba(255,241,226,.30) 0 2.1px, transparent 2.55px),
    radial-gradient(circle at 56.9% 66%, rgba(255,241,226,.20) 0 1.9px, transparent 2.35px),
    radial-gradient(circle at 60.1% 66%, rgba(255,241,226,.20) 0 1.9px, transparent 2.35px),
    radial-gradient(circle at 58.5% 64.4%, rgba(255,241,226,.20) 0 1.9px, transparent 2.35px),
    radial-gradient(circle at 58.5% 67.6%, rgba(255,241,226,.20) 0 1.9px, transparent 2.35px),
    radial-gradient(circle at 58.5% 66%, rgba(249,227,133,.42) 0 .85px, transparent 1.25px)!important;
  opacity:.88!important;
  filter:drop-shadow(0 0 5px rgba(178,236,186,.10)) drop-shadow(0 0 5px rgba(250,230,134,.10));
  animation:cofferHallToolsPetals 10.5s ease-in-out infinite!important;
}
@keyframes cofferHallToolsStarfield{
  0%{
    transform:translate3d(0,0,0) scale(1);
    opacity:.72;
  }
  50%{
    transform:translate3d(0,-2px,0) scale(1.012);
    opacity:.95;
  }
  100%{
    transform:translate3d(0,1px,0) scale(1);
    opacity:.80;
  }
}
@keyframes cofferHallToolsPetals{
  0%{
    transform:translate3d(0,0,0) rotate(0deg);
    opacity:.62;
  }
  33%{
    transform:translate3d(4px,-3px,0) rotate(.55deg);
    opacity:.86;
  }
  66%{
    transform:translate3d(-3px,3px,0) rotate(-.45deg);
    opacity:.74;
  }
  100%{
    transform:translate3d(0,0,0) rotate(0deg);
    opacity:.64;
  }
}
.view-shop .catalog-tools > *{
  position:relative!important;
  z-index:1!important;
}
.view-shop .filter-chip{
  border-radius:9px!important;
}
.view-shop .filter-chip::before{
  border-radius:6px!important;
}
.view-shop .filter-chip::after{
  border-radius:inherit!important;
}
@media (max-width:720px){
  .view-shop .filter-chip{
    border-radius:8px!important;
  }
  .view-shop .filter-chip::before{
    border-radius:5px!important;
  }
}


/* v31.14 — replace the geometric-looking panel decoration with clearly visible
   animated stars and flower/petal symbols across the entire Coffer Hall tools panel. */
.view-shop .catalog-tools{
  overflow:hidden!important;
}
.view-shop .catalog-tools::before,
.view-shop .catalog-tools::after{
  inset:-10px!important;
  display:block!important;
  white-space:pre!important;
  pointer-events:none!important;
  user-select:none!important;
}
.view-shop .catalog-tools::before{
  content:
    "✦     ✧        ✦       ✧      ✦        ✧      ✦\A"
    "   ✧       ✦       ✧       ✦      ✧        ✦\A"
    "✦       ✧       ✦       ✧      ✦       ✧      ✦\A"
    "   ✧      ✦        ✧      ✦       ✧      ✦"!important;
  position:absolute!important;
  z-index:0!important;
  font-size:14px!important;
  line-height:2.15!important;
  letter-spacing:10px!important;
  color:rgba(250,230,134,.82)!important;
  text-shadow:
    0 0 4px rgba(250,230,134,.42),
    0 0 8px rgba(250,230,134,.20),
    0 0 12px rgba(255,255,255,.08)!important;
  opacity:.86!important;
  transform:translate3d(0,0,0)!important;
  animation:
    cofferHallToolsStarsFloat 10.5s ease-in-out infinite,
    cofferHallToolsStarsTwinkle 3.2s ease-in-out infinite!important;
}
.view-shop .catalog-tools::after{
  content:
    "❀         ✿          ❁         ✿         ❀\A"
    "      ✿         ❀          ❁         ✿\A"
    "❁         ✿         ❀         ✿          ❁"!important;
  position:absolute!important;
  z-index:0!important;
  font-size:17px!important;
  line-height:2.55!important;
  letter-spacing:16px!important;
  color:rgba(224,246,226,.56)!important;
  text-shadow:
    0 0 5px rgba(153,214,161,.22),
    0 0 10px rgba(250,230,134,.10)!important;
  opacity:.70!important;
  transform:translate3d(0,0,0)!important;
  animation:
    cofferHallToolsFlowersFloat 13s ease-in-out infinite,
    cofferHallToolsFlowersPulse 4.6s ease-in-out infinite!important;
}
@keyframes cofferHallToolsStarsFloat{
  0%{transform:translate3d(-6px,0,0);} 
  25%{transform:translate3d(4px,-4px,0);} 
  50%{transform:translate3d(8px,2px,0);} 
  75%{transform:translate3d(-3px,5px,0);} 
  100%{transform:translate3d(-6px,0,0);} 
}
@keyframes cofferHallToolsStarsTwinkle{
  0%,100%{opacity:.62;filter:brightness(.95);} 
  50%{opacity:1;filter:brightness(1.18);} 
}
@keyframes cofferHallToolsFlowersFloat{
  0%{transform:translate3d(8px,4px,0) rotate(0deg);} 
  25%{transform:translate3d(-2px,-3px,0) rotate(.6deg);} 
  50%{transform:translate3d(-7px,2px,0) rotate(-.4deg);} 
  75%{transform:translate3d(3px,-4px,0) rotate(.45deg);} 
  100%{transform:translate3d(8px,4px,0) rotate(0deg);} 
}
@keyframes cofferHallToolsFlowersPulse{
  0%,100%{opacity:.48;filter:brightness(.92);} 
  50%{opacity:.82;filter:brightness(1.08);} 
}


/* v31.15 — force clearly visible, continuously running motion for the
   Coffer Hall panel stars and flower/petal symbols. */
.view-shop .catalog-tools::before{
  left:-12%!important;
  top:-22%!important;
  right:auto!important;
  bottom:auto!important;
  width:124%!important;
  height:144%!important;
  animation-name:cofferHallToolsStarsTravel!important;
  animation-duration:6.4s!important;
  animation-timing-function:ease-in-out!important;
  animation-delay:0s!important;
  animation-iteration-count:infinite!important;
  animation-direction:alternate!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
  will-change:transform,opacity!important;
}

.view-shop .catalog-tools::after{
  left:-10%!important;
  top:-20%!important;
  right:auto!important;
  bottom:auto!important;
  width:120%!important;
  height:140%!important;
  animation-name:cofferHallToolsFlowersTravel!important;
  animation-duration:8.2s!important;
  animation-timing-function:ease-in-out!important;
  animation-delay:-2.1s!important;
  animation-iteration-count:infinite!important;
  animation-direction:alternate!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
  will-change:transform,opacity!important;
}

@keyframes cofferHallToolsStarsTravel{
  0%{
    transform:translate3d(-34px,12px,0) rotate(-1deg) scale(.99);
    opacity:.58;
  }
  35%{
    transform:translate3d(8px,-8px,0) rotate(.45deg) scale(1.025);
    opacity:1;
  }
  70%{
    transform:translate3d(42px,8px,0) rotate(1deg) scale(1.01);
    opacity:.76;
  }
  100%{
    transform:translate3d(72px,-13px,0) rotate(-.35deg) scale(1.035);
    opacity:.98;
  }
}

@keyframes cofferHallToolsFlowersTravel{
  0%{
    transform:translate3d(42px,-10px,0) rotate(1.2deg) scale(.98);
    opacity:.44;
  }
  30%{
    transform:translate3d(13px,11px,0) rotate(-.7deg) scale(1.035);
    opacity:.82;
  }
  65%{
    transform:translate3d(-24px,-6px,0) rotate(.85deg) scale(1);
    opacity:.62;
  }
  100%{
    transform:translate3d(-58px,14px,0) rotate(-1.1deg) scale(1.04);
    opacity:.88;
  }
}

@media (prefers-reduced-motion: reduce){
  .view-shop .catalog-tools::before{
    animation-name:cofferHallToolsStarsTravel!important;
    animation-duration:8s!important;
    animation-iteration-count:infinite!important;
    animation-play-state:running!important;
  }
  .view-shop .catalog-tools::after{
    animation-name:cofferHallToolsFlowersTravel!important;
    animation-duration:10s!important;
    animation-iteration-count:infinite!important;
    animation-play-state:running!important;
  }
}


/* v31.16 — replace the static pseudo-element decoration with real DOM
   particles driven by the Web Animations API. */
.view-shop .catalog-tools::before,
.view-shop .catalog-tools::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

.view-shop .catalog-tools-effects{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  user-select:none!important;
}

.view-shop .catalog-tools > :not(.catalog-tools-effects){
  position:relative!important;
  z-index:2!important;
}

.view-shop .catalog-tools-particle{
  position:absolute!important;
  display:block!important;
  transform-origin:center!important;
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  line-height:1!important;
  opacity:.7;
}

.view-shop .catalog-tools-particle.is-star{
  color:#fae686!important;
  font-size:clamp(12px,1.1vw,18px)!important;
  text-shadow:0 0 4px rgba(250,230,134,.62),0 0 10px rgba(250,230,134,.28)!important;
}

.view-shop .catalog-tools-particle.is-flower{
  color:rgba(244,235,213,.84)!important;
  font-size:clamp(15px,1.35vw,22px)!important;
  text-shadow:0 0 5px rgba(250,230,134,.24),0 0 10px rgba(75,190,97,.14)!important;
}

.view-shop .catalog-tools-particle.is-petal{
  color:rgba(119,168,126,.78)!important;
  font-size:clamp(13px,1.2vw,20px)!important;
  text-shadow:0 0 5px rgba(64,123,74,.30),0 0 9px rgba(250,230,134,.08)!important;
}

/* History launchers v31.0 — three CSS-drawn wooden planks suspended from the
   site topbar. The existing button dimensions, placement, labels, counters,
   icons and click behavior are preserved. */
html body .history-column > .history-launch-stack{
  --history-rope-rise:112px;
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  filter:drop-shadow(0 8px 10px rgba(2,6,3,.28))!important;
}

/* The two continuous ropes begin at the bottom edge of the sticky topbar.
   Their upward length is measured in LootboxApp so the boards stay connected
   without changing the sidebar layout at different desktop resolutions. */
html body .history-column > .history-launch-stack::before,
html body .history-column > .history-launch-stack::after{
  content:""!important;
  position:absolute!important;
  top:calc(0px - var(--history-rope-rise,112px))!important;
  width:8px!important;
  height:calc(var(--history-rope-rise,112px) + 100% - 8px)!important;
  display:block!important;
  border-radius:999px!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,rgba(255,240,199,.22),transparent 28% 66%,rgba(40,23,10,.34)),
    repeating-linear-gradient(132deg,
      #d1a36a 0 2px,
      #9b6b39 2px 4px,
      #684522 4px 6px,
      #b98249 6px 8px)!important;
  box-shadow:
    inset 1px 0 rgba(255,238,194,.18),
    inset -1px 0 rgba(41,23,10,.42),
    0 1px 2px rgba(0,0,0,.58),
    0 0 8px rgba(214,180,95,.08)!important;
}
html body .history-column > .history-launch-stack::before{
  left:14px!important;
}
html body .history-column > .history-launch-stack::after{
  right:14px!important;
}

html body .history-column > .history-launch-stack > .history-launch-row{
  position:relative!important;
  z-index:2!important;
  overflow:visible!important;
}

/* Rope loops over each plank. They sit above the wood while the continuous
   rope remains behind it, producing the tied-together hanging sign effect. */
html body .history-column > .history-launch-stack > .history-launch-row::before,
html body .history-column > .history-launch-stack > .history-launch-row::after{
  content:""!important;
  position:absolute!important;
  top:-5px!important;
  width:10px!important;
  height:18px!important;
  display:block!important;
  box-sizing:border-box!important;
  border:3px solid #9b6b3d!important;
  border-top-color:#d0a06a!important;
  border-bottom-color:#5d3b1e!important;
  border-radius:52% 48% 45% 55% / 58% 52% 48% 42%!important;
  background:transparent!important;
  box-shadow:
    inset 1px 0 rgba(255,235,188,.16),
    0 1px 2px rgba(0,0,0,.58),
    0 0 4px rgba(214,180,95,.10)!important;
  transform:rotate(8deg)!important;
  pointer-events:none!important;
  z-index:5!important;
}
html body .history-column > .history-launch-stack > .history-launch-row::before{
  left:13px!important;
}
html body .history-column > .history-launch-stack > .history-launch-row::after{
  right:13px!important;
  transform:rotate(-8deg)!important;
}

/* Shared plank construction. All visual grain is CSS-only; no new image asset
   is introduced. */
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button,
html body .history-column > .history-launch-stack > .history-launch-row > .achievements-launch-button,
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  overflow:hidden!important;
  clip-path:polygon(.5% 8%,1.4% 2%,18% 0,34% 2%,54% 0,73% 2%,98.6% 1%,99.8% 9%,99.4% 91%,98.2% 98%,77% 100%,57% 97%,38% 100%,18% 98%,1.1% 100%,.2% 91%)!important;
  border:1px solid rgba(65,35,13,.98)!important;
  border-radius:4px 6px 5px 3px!important;
  color:#f5ddb0!important;
  background:
    radial-gradient(ellipse at 13% 38%,rgba(64,31,10,.58) 0 1px,transparent 1.8px),
    radial-gradient(ellipse at 78% 68%,rgba(54,27,9,.50) 0 1px,transparent 2px),
    repeating-linear-gradient(1.5deg,rgba(60,29,10,.30) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,214,145,.055) 8px 9px,transparent 9px 13px),
    linear-gradient(92deg,#714018 0%,#925826 17%,#7b461d 34%,#a0622d 53%,#81491f 72%,#9a5d29 87%,#6d3b17 100%)!important;
  background-size:auto,auto,auto,auto,auto!important;
  box-shadow:
    inset 0 2px rgba(255,224,160,.22),
    inset 0 -3px rgba(47,23,8,.52),
    inset 4px 0 rgba(255,213,139,.055),
    inset -4px 0 rgba(39,19,7,.18),
    0 4px 0 rgba(45,24,9,.56),
    0 8px 14px rgba(1,5,2,.30)!important;
  text-shadow:
    0 1px 0 rgba(69,35,12,.98),
    0 2px 2px rgba(30,14,5,.76)!important;
  transition:filter .18s ease,box-shadow .18s ease,transform .18s ease!important;
  isolation:isolate!important;
}

html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2) > button{
  background-position:17px 2px,85% 55%,0 2px,0 1px,0 0!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > button{
  background-position:34px 0,70% 72%,0 -2px,0 3px,0 0!important;
}

/* Fine carved streaks and a subtle inset rim sit below the original content. */
html body .history-column > .history-launch-stack > .history-launch-row > button::before{
  content:""!important;
  position:absolute!important;
  inset:3px 5px!important;
  z-index:0!important;
  border:1px solid rgba(255,220,153,.08)!important;
  border-radius:3px!important;
  background:
    linear-gradient(96deg,transparent 0 11%,rgba(54,27,9,.20) 11.5% 12%,transparent 12.5% 38%,rgba(255,219,151,.07) 38.5% 39%,transparent 39.5% 72%,rgba(52,25,8,.17) 72.5% 73%,transparent 73.5%),
    repeating-linear-gradient(4deg,transparent 0 6px,rgba(45,21,7,.12) 6px 7px,transparent 7px 11px)!important;
  opacity:.90!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > button::after{
  content:""!important;
  position:absolute!important;
  inset:auto 7px 5px!important;
  height:1px!important;
  z-index:0!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(46,21,7,.44) 10% 42%,transparent 43% 57%,rgba(255,218,145,.11) 58% 90%,transparent)!important;
  opacity:.92!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
}

html body .history-column > .history-launch-stack > .history-launch-row > button > *{
  position:relative!important;
  z-index:2!important;
}

html body .history-column > .history-launch-stack > .history-launch-row > button:hover:not(:disabled){
  transform:translateY(-1px)!important;
  filter:brightness(1.08) saturate(1.04)!important;
  border-color:rgba(95,54,22,.98)!important;
  box-shadow:
    inset 0 2px rgba(255,228,171,.26),
    inset 0 -3px rgba(47,23,8,.54),
    0 4px 0 rgba(45,24,9,.56),
    0 9px 16px rgba(1,5,2,.36),
    0 0 14px rgba(214,180,95,.11)!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > button:active:not(:disabled){
  transform:translateY(1px)!important;
  filter:brightness(.98)!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > button:focus-visible{
  outline:2px solid rgba(250,230,134,.88)!important;
  outline-offset:3px!important;
}

/* Preserve the original layouts and all existing labels/counters. */
html body .history-column > .history-launch-stack > .history-launch-row > .card-album-launch-button{
  display:grid!important;
  grid-template-columns:31px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:10px!important;
  padding-left:36px!important;
  padding-right:36px!important;
  text-align:left!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.105em!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .achievements-launch-button:not(.kofi-launch-button){
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding-left:36px!important;
  padding-right:36px!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.105em!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding-left:36px!important;
  padding-right:36px!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.105em!important;
}
html body .history-column > .history-launch-stack > .history-launch-row > button b{
  color:#f7ead0!important;
  font-size:10px!important;
  letter-spacing:.03em!important;
  text-shadow:0 1px 0 rgba(61,31,11,.95),0 2px 2px rgba(24,11,4,.72)!important;
}

/* Rebuild the existing three-card album glyph explicitly so its original
   symbol remains crisp on the new wood surface. */
html body .history-column .card-album-launch-icon{
  position:relative!important;
  color:#f5ddb0!important;
  width:29px!important;
  height:24px!important;
  display:block!important;
  flex:0 0 29px!important;
  margin:0!important;
  transform:none!important;
}
html body .history-column .card-album-launch-card{
  position:absolute!important;
  top:3px!important;
  width:13px!important;
  height:18px!important;
  display:block!important;
  border:1.5px solid currentColor!important;
  border-radius:2px!important;
  background:linear-gradient(145deg,rgba(82,43,15,.96),rgba(51,26,9,.96))!important;
  box-shadow:inset 0 0 0 1px rgba(255,226,167,.08),0 1px 2px rgba(34,16,5,.58)!important;
}
html body .history-column .card-album-launch-card::before{
  content:"✦"!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-52%)!important;
  color:inherit!important;
  font-size:6px!important;
  line-height:1!important;
  text-shadow:0 0 5px rgba(250,230,134,.30)!important;
}
html body .history-column .card-album-launch-card.is-left{
  left:1px!important;
  transform:rotate(-13deg)!important;
  transform-origin:center bottom!important;
}
html body .history-column .card-album-launch-card.is-center{
  left:8px!important;
  z-index:2!important;
  transform:rotate(-1deg)!important;
}
html body .history-column .card-album-launch-card.is-right{
  right:1px!important;
  transform:rotate(13deg)!important;
  transform-origin:center bottom!important;
}

/* Keep the coffee cup and heart exactly as the existing button symbol while
   adapting their color to the carved plank lettering. */
html body .history-column .kofi-launch-button .kofi-launch-copy{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  min-width:0!important;
  color:#f5ddb0!important;
}
html body .history-column .kofi-cup-heart{
  color:inherit!important;
  box-shadow:0 2px 0 -1px currentColor,0 1px 2px rgba(35,16,5,.58)!important;
}
html body .history-column .kofi-cup-heart > em{
  color:inherit!important;
  text-shadow:0 0 5px rgba(250,230,134,.34),0 1px 0 rgba(60,28,9,.9)!important;
}

/* The achievement notification still signals, now by warming the plank rather
   than replacing its wood-grain pseudo-element. */
html body .history-column > .history-launch-stack > .history-launch-row > .achievements-launch-button.is-alerting{
  animation:historyWoodAchievementSignal 1.15s ease-in-out infinite!important;
}
@keyframes historyWoodAchievementSignal{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.16) drop-shadow(0 0 8px rgba(250,214,122,.30));}
}

@media(max-width:1100px){
  html body .history-column > .history-launch-stack::before,
  html body .history-column > .history-launch-stack::after{
    display:none!important;
    content:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .history-column > .history-launch-stack > .history-launch-row > .achievements-launch-button.is-alerting{
    animation:none!important;
  }
}
/* History launchers v31.1 — keep the Ko-fi plank hover identical to the other
   two wooden buttons and restore the three-card hover flourish. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > .kofi-launch-button:hover:not(:disabled){
  background:
    radial-gradient(ellipse at 13% 38%,rgba(64,31,10,.58) 0 1px,transparent 1.8px),
    radial-gradient(ellipse at 78% 68%,rgba(54,27,9,.50) 0 1px,transparent 2px),
    repeating-linear-gradient(1.5deg,rgba(60,29,10,.30) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,214,145,.055) 8px 9px,transparent 9px 13px),
    linear-gradient(92deg,#714018 0%,#925826 17%,#7b461d 34%,#a0622d 53%,#81491f 72%,#9a5d29 87%,#6d3b17 100%)!important;
  background-size:auto,auto,auto,auto,auto!important;
  background-position:34px 0,70% 72%,0 -2px,0 3px,0 0!important;
}

html body .history-column .card-album-launch-button:hover:not(:disabled) .card-album-launch-icon{
  animation:historyAlbumDeckHover .66s cubic-bezier(.2,.82,.28,1) 1 forwards!important;
}
html body .history-column .card-album-launch-button:hover:not(:disabled) .card-album-launch-card.is-left{
  animation:historyAlbumCardLeftHover .66s cubic-bezier(.2,.82,.28,1) 1 forwards!important;
}
html body .history-column .card-album-launch-button:hover:not(:disabled) .card-album-launch-card.is-center{
  animation:historyAlbumCardCenterHover .66s cubic-bezier(.2,.82,.28,1) 1 forwards!important;
}
html body .history-column .card-album-launch-button:hover:not(:disabled) .card-album-launch-card.is-right{
  animation:historyAlbumCardRightHover .66s cubic-bezier(.2,.82,.28,1) 1 forwards!important;
}

@keyframes historyAlbumDeckHover{
  0%{translate:0 0;scale:1;filter:brightness(1);}
  58%{translate:0 -3px;scale:1.045;filter:brightness(1.16) drop-shadow(0 0 5px rgba(250,230,134,.25));}
  78%{translate:0 -2px;scale:1.03;filter:brightness(1.11) drop-shadow(0 0 4px rgba(250,230,134,.22));}
  100%{translate:0 -2px;scale:1.035;filter:brightness(1.13) drop-shadow(0 0 4px rgba(250,230,134,.23));}
}
@keyframes historyAlbumCardLeftHover{
  0%{translate:0 0;rotate:0deg;scale:1;}
  58%{translate:-4px -3px;rotate:-7deg;scale:1.07;}
  78%{translate:-3px -2px;rotate:-5deg;scale:1.05;}
  100%{translate:-3px -2px;rotate:-6deg;scale:1.06;}
}
@keyframes historyAlbumCardCenterHover{
  0%{translate:0 0;rotate:0deg;scale:1;}
  58%{translate:0 -5px;rotate:1deg;scale:1.085;}
  78%{translate:0 -4px;rotate:0deg;scale:1.065;}
  100%{translate:0 -4px;rotate:1deg;scale:1.075;}
}
@keyframes historyAlbumCardRightHover{
  0%{translate:0 0;rotate:0deg;scale:1;}
  58%{translate:4px -3px;rotate:7deg;scale:1.07;}
  78%{translate:3px -2px;rotate:5deg;scale:1.05;}
  100%{translate:3px -2px;rotate:6deg;scale:1.06;}
}

@media(prefers-reduced-motion:reduce){
  html body .history-column .card-album-launch-button:hover:not(:disabled) .card-album-launch-icon,
  html body .history-column .card-album-launch-button:hover:not(:disabled) .card-album-launch-card{
    animation:none!important;
  }
}
/* History panel v32 — restrained woodland frame, foliage and floral accents.
   The history structure, item sizing, scroll behavior and content remain unchanged. */
html body .history-column > .history-panel.history-panel-dynamic{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid rgba(157,126,62,.58)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(128,157,72,.08),transparent 26%),
    radial-gradient(circle at 91% 18%,rgba(86,123,52,.08),transparent 24%),
    repeating-linear-gradient(118deg,rgba(232,224,179,.018) 0 1px,transparent 1px 17px),
    repeating-linear-gradient(4deg,rgba(4,18,9,.045) 0 1px,transparent 1px 8px),
    linear-gradient(155deg,rgba(31,66,39,.98),rgba(19,47,29,.985) 48%,rgba(13,34,22,.99))!important;
  box-shadow:
    inset 0 0 0 1px rgba(225,211,151,.08),
    inset 0 0 36px rgba(3,16,8,.34),
    0 14px 28px rgba(2,12,6,.30),
    0 0 20px rgba(84,113,48,.055)!important;
}

html body .history-column > .history-panel.history-panel-dynamic::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:7!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
    repeating-linear-gradient(94deg,rgba(255,222,150,.10) 0 1px,transparent 1px 9px) top/100% 7px no-repeat,
    linear-gradient(90deg,#4c2c14,#76502a 18%,#543419 37%,#806039 58%,#513117 78%,#6e4725) top/100% 7px no-repeat,
    repeating-linear-gradient(88deg,rgba(38,19,8,.28) 0 1px,transparent 1px 8px) bottom/100% 7px no-repeat,
    linear-gradient(90deg,#4a2a13,#6f4824 20%,#4d2f17 45%,#76522c 70%,#452711) bottom/100% 7px no-repeat,
    repeating-linear-gradient(4deg,rgba(255,222,150,.08) 0 1px,transparent 1px 9px) left/7px 100% no-repeat,
    linear-gradient(180deg,#5a3619,#7a522d 20%,#4b2c14 43%,#6f4825 72%,#42230f) left/7px 100% no-repeat,
    repeating-linear-gradient(176deg,rgba(39,18,7,.25) 0 1px,transparent 1px 9px) right/7px 100% no-repeat,
    linear-gradient(180deg,#583419,#724b27 22%,#4d2d15 48%,#78532e 73%,#452610) right/7px 100% no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(33,19,8,.50),
    inset 0 0 0 8px rgba(163,125,61,.14),
    inset 0 0 0 9px rgba(56,83,35,.34)!important;
}

html body .history-column > .history-panel.history-panel-dynamic::after{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  z-index:0!important;
  border:1px solid rgba(95,121,53,.34)!important;
  border-radius:10px!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 7px 2px at 9% 4%,rgba(117,148,62,.20),transparent 74%),
    radial-gradient(ellipse 8px 3px at 86% 3%,rgba(105,139,55,.18),transparent 74%),
    radial-gradient(ellipse 7px 2px at 96% 81%,rgba(91,125,47,.17),transparent 74%),
    radial-gradient(ellipse 6px 2px at 6% 94%,rgba(106,139,55,.16),transparent 74%);
  box-shadow:inset 0 0 24px rgba(5,22,11,.22)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header,
html body .history-column > .history-panel.history-panel-dynamic > .history-list{
  position:relative!important;
  z-index:2!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  border-bottom:1px solid rgba(126,94,40,.72)!important;
  background:
    radial-gradient(circle at 14% 20%,rgba(130,164,76,.10),transparent 28%),
    repeating-linear-gradient(2deg,rgba(239,225,170,.018) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,rgba(39,75,43,.88),rgba(24,57,34,.91))!important;
  box-shadow:
    inset 0 -1px rgba(18,32,16,.80),
    0 3px 0 rgba(67,42,18,.52),
    0 5px 10px rgba(4,17,8,.16)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header h3{
  text-shadow:0 1px 0 rgba(7,22,11,.95),0 0 12px rgba(182,204,126,.08)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header span{
  color:rgba(238,239,218,.84)!important;
  text-shadow:0 1px 0 rgba(7,22,11,.92)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list{
  background:
    radial-gradient(circle at 96% 16%,rgba(103,140,57,.055),transparent 22%),
    radial-gradient(circle at 5% 76%,rgba(116,145,64,.045),transparent 24%),
    repeating-linear-gradient(126deg,rgba(221,216,171,.012) 0 1px,transparent 1px 15px),
    linear-gradient(160deg,rgba(30,66,38,.55),rgba(14,42,25,.64))!important;
  scrollbar-color:rgba(114,83,40,.88) rgba(12,35,20,.70)!important;
  scrollbar-width:thin!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list::-webkit-scrollbar{
  width:8px!important;
}
html body .history-column > .history-panel.history-panel-dynamic .history-list::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(17,42,25,.90),rgba(8,27,16,.94))!important;
  border-left:1px solid rgba(92,116,54,.22)!important;
}
html body .history-column > .history-panel.history-panel-dynamic .history-list::-webkit-scrollbar-thumb{
  border:2px solid rgba(13,34,20,.88)!important;
  border-radius:999px!important;
  background:
    repeating-linear-gradient(3deg,rgba(239,210,139,.10) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#79522b,#4f3017)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item{
  position:relative!important;
  border-bottom:1px solid rgba(103,126,55,.35)!important;
  background:
    radial-gradient(ellipse 8px 3px at 96% 88%,rgba(119,151,61,.15) 0 70%,transparent 75%),
    radial-gradient(ellipse 7px 3px at 92% 95%,rgba(91,127,47,.14) 0 70%,transparent 75%),
    linear-gradient(90deg,transparent 0 8%,rgba(104,131,55,.20) 22%,rgba(84,111,44,.28) 58%,transparent 96%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(39,79,45,.20),rgba(12,39,23,.12))!important;
  box-shadow:inset 0 1px rgba(231,228,184,.025)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item:nth-child(even){
  background:
    radial-gradient(ellipse 8px 3px at 5% 90%,rgba(116,147,60,.12) 0 70%,transparent 75%),
    radial-gradient(ellipse 7px 3px at 9% 97%,rgba(91,125,47,.12) 0 70%,transparent 75%),
    linear-gradient(90deg,transparent 0 5%,rgba(89,117,48,.22) 38%,rgba(112,137,56,.18) 74%,transparent 98%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(24,61,35,.22),rgba(11,35,21,.16))!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item:last-child{
  border-bottom:0!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item:hover{
  background:
    radial-gradient(circle at 91% 30%,rgba(141,172,78,.08),transparent 24%),
    linear-gradient(90deg,transparent 0 7%,rgba(121,149,62,.25) 22%,rgba(91,119,50,.31) 68%,transparent 97%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(48,91,52,.27),rgba(16,47,28,.18))!important;
}

html body .history-column > .history-panel.history-panel-dynamic .reward-icon,
html body .history-column > .history-panel.history-panel-dynamic .history-progress-image,
html body .history-column > .history-panel.history-panel-dynamic .history-gil-icon{
  position:relative!important;
  z-index:2!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-ornaments{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner{
  position:absolute!important;
  display:block!important;
  width:72px!important;
  height:58px!important;
  opacity:.78!important;
  filter:drop-shadow(0 2px 2px rgba(4,17,7,.40))!important;
  transform-origin:center!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner.is-top-left{
  left:-5px!important;
  top:-4px!important;
  background:
    radial-gradient(ellipse 9px 4px at 17% 57%,#66823a 0 61%,#354a23 64% 74%,transparent 78%),
    radial-gradient(ellipse 8px 3px at 35% 39%,#779448 0 61%,#3c5428 64% 74%,transparent 78%),
    radial-gradient(ellipse 7px 3px at 53% 27%,#5f7b35 0 61%,#334821 64% 74%,transparent 78%),
    linear-gradient(151deg,transparent 47%,#556832 48% 50%,transparent 51%);
  transform:rotate(-5deg)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner.is-top-right{
  right:-5px!important;
  top:-3px!important;
  background:
    radial-gradient(ellipse 7px 4px at 84% 25%,#ecead0 0 58%,#c9c8a8 62% 70%,transparent 75%),
    radial-gradient(ellipse 7px 4px at 92% 34%,#f4f1d9 0 58%,#cbc9aa 62% 70%,transparent 75%),
    radial-gradient(ellipse 7px 4px at 77% 35%,#f0edd2 0 58%,#c8c6a6 62% 70%,transparent 75%),
    radial-gradient(ellipse 7px 4px at 86% 43%,#e7e5c8 0 58%,#c0bea0 62% 70%,transparent 75%),
    radial-gradient(circle 3px at 85% 34%,#d4b35b 0 66%,#8b6b26 72% 82%,transparent 86%),
    radial-gradient(ellipse 10px 4px at 61% 53%,#759143 0 61%,#3a5026 64% 74%,transparent 78%),
    radial-gradient(ellipse 9px 4px at 45% 38%,#5f7c37 0 61%,#334922 64% 74%,transparent 78%),
    radial-gradient(ellipse 8px 3px at 29% 27%,#789347 0 61%,#3d5429 64% 74%,transparent 78%),
    linear-gradient(31deg,transparent 47%,#53672f 48% 50%,transparent 51%);
  transform:rotate(3deg)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner.is-bottom-left{
  left:-5px!important;
  bottom:-5px!important;
  background:
    radial-gradient(ellipse 9px 4px at 18% 42%,#667f39 0 61%,#354921 64% 74%,transparent 78%),
    radial-gradient(ellipse 8px 3px at 36% 59%,#789347 0 61%,#3d5328 64% 74%,transparent 78%),
    radial-gradient(ellipse 7px 3px at 55% 72%,#5e7934 0 61%,#324720 64% 74%,transparent 78%),
    linear-gradient(29deg,transparent 47%,#53662f 48% 50%,transparent 51%);
  transform:rotate(4deg)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner.is-bottom-right{
  right:-5px!important;
  bottom:-5px!important;
  background:
    radial-gradient(ellipse 7px 4px at 84% 64%,#efecd2 0 58%,#c6c4a5 62% 70%,transparent 75%),
    radial-gradient(ellipse 7px 4px at 92% 55%,#f4f1d8 0 58%,#c9c7a8 62% 70%,transparent 75%),
    radial-gradient(ellipse 7px 4px at 77% 54%,#e9e7ca 0 58%,#c1bfa0 62% 70%,transparent 75%),
    radial-gradient(ellipse 7px 4px at 86% 46%,#f0edd2 0 58%,#c5c3a4 62% 70%,transparent 75%),
    radial-gradient(circle 3px at 85% 55%,#d6b65d 0 66%,#896923 72% 82%,transparent 86%),
    radial-gradient(ellipse 10px 4px at 61% 47%,#718e40 0 61%,#394f25 64% 74%,transparent 78%),
    radial-gradient(ellipse 9px 4px at 45% 62%,#607c37 0 61%,#334922 64% 74%,transparent 78%),
    radial-gradient(ellipse 8px 3px at 29% 73%,#779246 0 61%,#3c5328 64% 74%,transparent 78%),
    linear-gradient(149deg,transparent 47%,#52652e 48% 50%,transparent 51%);
  transform:rotate(-3deg)!important;
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic::before{
    background:
      repeating-linear-gradient(94deg,rgba(255,222,150,.09) 0 1px,transparent 1px 8px) top/100% 6px no-repeat,
      linear-gradient(90deg,#4c2c14,#76502a 18%,#543419 37%,#806039 58%,#513117 78%,#6e4725) top/100% 6px no-repeat,
      repeating-linear-gradient(88deg,rgba(38,19,8,.27) 0 1px,transparent 1px 8px) bottom/100% 6px no-repeat,
      linear-gradient(90deg,#4a2a13,#6f4824 20%,#4d2f17 45%,#76522c 70%,#452711) bottom/100% 6px no-repeat,
      linear-gradient(180deg,#5a3619,#7a522d 20%,#4b2c14 43%,#6f4825 72%,#42230f) left/6px 100% no-repeat,
      linear-gradient(180deg,#583419,#724b27 22%,#4d2d15 48%,#78532e 73%,#452610) right/6px 100% no-repeat!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner{
    width:58px!important;
    height:48px!important;
    opacity:.68!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .history-column > .history-panel.history-panel-dynamic .history-item{
    transition:none!important;
  }
}

/* History panel v33 — true branch frame, deeper forest palette and restored alternating rows. */
html body .history-column > .history-panel.history-panel-dynamic{
  overflow:visible!important;
  border:0!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 16% 8%,rgba(67,105,55,.085),transparent 28%),
    radial-gradient(circle at 90% 20%,rgba(49,86,43,.065),transparent 26%),
    repeating-linear-gradient(124deg,rgba(225,226,188,.010) 0 1px,transparent 1px 16px),
    linear-gradient(158deg,#17351f 0%,#112b1a 47%,#0b2114 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(176,169,106,.10),
    inset 0 0 42px rgba(2,13,7,.52),
    0 18px 34px rgba(1,8,4,.38)!important;
}

/* A scalable SVG frame built from irregular, textured branch paths replaces
   the previous flat rectangular wood strips. Its bark grain, knots, lighting,
   rough edges and cast shadows are all code-driven. */
html body .history-column > .history-panel.history-panel-dynamic::before{
  content:""!important;
  position:absolute!important;
  inset:-8px!important;
  z-index:7!important;
  border:0!important;
  border-radius:22px!important;
  pointer-events:none!important;
  background:url('/history-branch-frame.svg') center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:
    drop-shadow(0 3px 2px rgba(20,10,4,.76))
    drop-shadow(0 11px 10px rgba(1,8,4,.48))!important;
}

html body .history-column > .history-panel.history-panel-dynamic::after{
  inset:15px!important;
  z-index:0!important;
  border:1px solid rgba(72,102,48,.24)!important;
  border-radius:9px!important;
  background:
    radial-gradient(ellipse 8px 3px at 10% 3%,rgba(83,119,52,.11),transparent 76%),
    radial-gradient(ellipse 8px 3px at 91% 97%,rgba(76,112,48,.10),transparent 76%)!important;
  box-shadow:
    inset 0 0 24px rgba(2,14,7,.34),
    0 0 0 1px rgba(6,23,12,.44)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  border-bottom:1px solid rgba(96,111,52,.44)!important;
  background:
    radial-gradient(circle at 13% 15%,rgba(77,112,59,.09),transparent 31%),
    repeating-linear-gradient(3deg,rgba(225,222,174,.012) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,rgba(27,60,35,.97),rgba(16,43,26,.98))!important;
  box-shadow:
    inset 0 -1px rgba(2,14,7,.82),
    0 2px 0 rgba(42,27,13,.55),
    0 6px 13px rgba(2,13,7,.20)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list{
  background:
    radial-gradient(circle at 95% 17%,rgba(76,110,49,.04),transparent 24%),
    radial-gradient(circle at 6% 79%,rgba(82,116,52,.035),transparent 25%),
    repeating-linear-gradient(126deg,rgba(215,217,178,.009) 0 1px,transparent 1px 17px),
    linear-gradient(160deg,rgba(17,46,27,.96),rgba(8,29,17,.985))!important;
  scrollbar-color:rgba(104,70,34,.94) rgba(7,25,14,.92)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list::-webkit-scrollbar-track{
  background:linear-gradient(180deg,#102c1a,#071d11)!important;
  border-left:1px solid rgba(83,104,48,.18)!important;
}
html body .history-column > .history-panel.history-panel-dynamic .history-list::-webkit-scrollbar-thumb{
  border:2px solid #0a2415!important;
  background:
    repeating-linear-gradient(3deg,rgba(236,199,124,.09) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#76502a,#422610)!important;
  box-shadow:inset 1px 0 rgba(226,179,102,.12),inset -1px 0 rgba(22,10,4,.42)!important;
}

/* Keep a clearly visible dark/light rhythm while staying inside the site's
   deep #2D3E2E / forest-green family. */
html body .history-column > .history-panel.history-panel-dynamic .history-item:nth-child(odd){
  border-bottom:1px solid rgba(76,101,45,.36)!important;
  background:
    radial-gradient(ellipse 8px 3px at 96% 89%,rgba(101,132,55,.10) 0 70%,transparent 75%),
    linear-gradient(90deg,transparent 0 7%,rgba(76,102,45,.17) 25%,rgba(61,86,38,.20) 68%,transparent 98%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(20,52,31,.94),rgba(10,34,20,.97))!important;
  box-shadow:inset 0 1px rgba(224,222,183,.018)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item:nth-child(even){
  border-bottom:1px solid rgba(83,108,49,.40)!important;
  background:
    radial-gradient(ellipse 8px 3px at 5% 90%,rgba(104,136,57,.10) 0 70%,transparent 75%),
    linear-gradient(90deg,transparent 0 5%,rgba(84,110,49,.20) 35%,rgba(68,94,42,.22) 72%,transparent 98%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(29,65,38,.95),rgba(15,43,26,.97))!important;
  box-shadow:inset 0 1px rgba(231,228,190,.026)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item:nth-child(odd):hover{
  background:
    radial-gradient(circle at 92% 29%,rgba(116,151,68,.07),transparent 24%),
    linear-gradient(90deg,transparent 0 7%,rgba(91,119,52,.23) 24%,rgba(72,100,43,.27) 70%,transparent 98%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(25,62,36,.97),rgba(12,40,23,.985))!important;
}
html body .history-column > .history-panel.history-panel-dynamic .history-item:nth-child(even):hover{
  background:
    radial-gradient(circle at 92% 29%,rgba(124,158,72,.075),transparent 24%),
    linear-gradient(90deg,transparent 0 7%,rgba(100,130,56,.24) 24%,rgba(79,107,47,.28) 70%,transparent 98%) bottom/100% 1px no-repeat,
    linear-gradient(155deg,rgba(35,75,43,.98),rgba(18,49,29,.99))!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-item:last-child{
  border-bottom:0!important;
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic::before{
    inset:-6px!important;
    background:url('/history-branch-frame.svg') center/100% 100% no-repeat!important;
    filter:
      drop-shadow(0 2px 1px rgba(20,10,4,.72))
      drop-shadow(0 8px 8px rgba(1,8,4,.42))!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic::after{
    inset:12px!important;
  }
}


/* History panel v34 — clean branch caps and randomized leaf dividers. */
html body .history-column > .history-panel.history-panel-dynamic::before{
  inset:-4px!important;
  background:url('/history-branch-frame-v34.svg') center/100% 100% no-repeat!important;
}

html body .history-column > .history-panel.history-panel-dynamic::after{
  inset:14px!important;
}

/* The old solid top/bottom veils are fully disabled. The new frame asset has
   only textured bark strokes, so no cached solid wavy band can remain. */
html body .history-column > .history-panel.history-panel-dynamic .history-list::before,
html body .history-column > .history-panel.history-panel-dynamic .history-list::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  background:none!important;
  box-shadow:none!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list{
  position:relative!important;
  z-index:auto!important;
  padding-top:12px!important;
  padding-bottom:10px!important;
}

/* Remove the recently introduced CSS-drawn lateral sprigs. */
html body .history-column > .history-panel.history-panel-dynamic .history-nature-branch{
  display:none!important;
  content:none!important;
}

/* The decorative PNG is absolutely positioned, so it never changes a row's
   height, padding or spacing. It is centered directly over the lower rule. */
html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item{
  position:relative!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  flex-shrink:0!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-leaf-divider{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  pointer-events:none!important;
  user-select:none!important;
  z-index:60!important;
  transform-origin:center center!important;
  filter:drop-shadow(0 2px 2px rgba(2,13,7,.30))!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-leaf-divider.is-normal{
  transform:translateY(50%)!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-leaf-divider.is-mirrored{
  transform:translateY(50%) scaleX(-1)!important;
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic::before{
    inset:-3px!important;
    background:url('/history-branch-frame-v34.svg') center/100% 100% no-repeat!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic .history-list{
    padding-top:10px!important;
    padding-bottom:8px!important;
  }
}

/* History panel v35 — unobstructed header, clean branch frame, visible rarity
   effects, reliable leave1 dividers and restrained side petals/flowers. */
html body .history-column > .history-panel.history-panel-dynamic{
  display:flex!important;
  flex-direction:column!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .history-column > .history-panel.history-panel-dynamic::before{
  inset:-4px!important;
  z-index:16!important;
  border-radius:0!important;
  background:url('/images/ui/history/history-branch-frame-v35.svg') center/100% 100% no-repeat!important;
  filter:
    drop-shadow(0 3px 2px rgba(20,10,4,.72))
    drop-shadow(0 10px 9px rgba(1,8,4,.43))!important;
}

html body .history-column > .history-panel.history-panel-dynamic::after{
  inset:11px 12px!important;
  z-index:0!important;
  border:0!important;
  border-radius:4px!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(67,105,55,.07),transparent 27%),
    radial-gradient(circle at 91% 19%,rgba(49,86,43,.055),transparent 25%),
    repeating-linear-gradient(124deg,rgba(225,226,188,.009) 0 1px,transparent 1px 16px),
    linear-gradient(158deg,#17351f 0%,#112b1a 47%,#0b2114 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(98,119,57,.16),
    inset 0 0 34px rgba(2,13,7,.43)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  position:relative!important;
  z-index:12!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-height:72px!important;
  margin:10px 12px 0!important;
  padding:34px 16px 13px!important;
  border-radius:4px 4px 0 0!important;
  background:
    radial-gradient(circle at 13% 15%,rgba(77,112,59,.075),transparent 31%),
    repeating-linear-gradient(3deg,rgba(225,222,174,.010) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,rgba(24,55,33,.97),rgba(14,39,23,.985))!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .history-list{
  position:relative!important;
  z-index:12!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:auto!important;
  margin:0 12px 11px!important;
  padding:10px 9px 17px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:0 0 4px 4px!important;
  background:
    radial-gradient(circle at 95% 17%,rgba(76,110,49,.038),transparent 24%),
    radial-gradient(circle at 6% 79%,rgba(82,116,52,.032),transparent 25%),
    repeating-linear-gradient(126deg,rgba(215,217,178,.008) 0 1px,transparent 1px 17px),
    linear-gradient(160deg,rgba(17,46,27,.97),rgba(8,29,17,.99))!important;
  isolation:isolate!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item{
  position:relative!important;
  z-index:1!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  flex-shrink:0!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item.legendary-flame-card{
  z-index:9!important;
  overflow:visible!important;
}
html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item.epic-glow-card,
html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item.rare-glow-card,
html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item.uncommon-glow-card,
html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item.common-glow-card{
  z-index:5!important;
  overflow:visible!important;
}
html body .history-column > .history-panel.history-panel-dynamic .history-list > .history-item:hover{
  z-index:10!important;
}

/* Direct panel-level overlay: leave1.png is never buried by the next row,
   rarity pseudo-elements or the frame. Its measured width matches its row. */
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer{
  position:absolute!important;
  z-index:52!important;
  display:block!important;
  overflow:hidden!important;
  pointer-events:none!important;
  user-select:none!important;
  contain:layout paint!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider{
  position:absolute!important;
  right:auto!important;
  bottom:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  pointer-events:none!important;
  user-select:none!important;
  transform-origin:center center!important;
  filter:drop-shadow(0 2px 2px rgba(2,13,7,.34))!important;
  opacity:1!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.is-normal{
  transform:translateY(-50%)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.is-mirrored{
  transform:translateY(-50%) scaleX(-1)!important;
}

/* Keep the floral layer outside the panel clip and use only small, dark,
   restrained shapes over the side branches. */
html body .history-column > .history-panel.history-panel-dynamic .history-nature-ornaments{
  inset:-7px!important;
  z-index:48!important;
  overflow:visible!important;
  border-radius:0!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner.is-top-left,
html body .history-column > .history-panel.history-panel-dynamic .history-nature-corner.is-top-right{
  top:3px!important;
  width:58px!important;
  height:43px!important;
  opacity:.58!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-side-petal{
  position:absolute!important;
  display:block!important;
  width:7px!important;
  height:11px!important;
  margin:0!important;
  border:1px solid rgba(89,112,53,.30)!important;
  border-radius:78% 22% 70% 30% / 36% 64% 36% 64%!important;
  background:linear-gradient(145deg,#38522b 0%,#22391f 54%,#142718 100%)!important;
  box-shadow:
    inset 1px 1px rgba(121,145,76,.15),
    0 2px 3px rgba(2,12,6,.38)!important;
  opacity:.88!important;
  pointer-events:none!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-side-petal.is-left-a{left:1px!important;top:24%!important;transform:rotate(-34deg)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-petal.is-left-b{left:-2px!important;top:55%!important;transform:rotate(21deg) scale(.84)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-petal.is-left-c{left:3px!important;top:81%!important;transform:rotate(-17deg) scale(.72)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-petal.is-right-a{right:1px!important;top:18%!important;transform:rotate(31deg) scale(.78)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-petal.is-right-b{right:-2px!important;top:48%!important;transform:rotate(-24deg)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-petal.is-right-c{right:2px!important;top:74%!important;transform:rotate(18deg) scale(.74)!important;}

html body .history-column > .history-panel.history-panel-dynamic .history-side-flower{
  position:absolute!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#d9d8b8!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1!important;
  text-shadow:
    0 1px 1px rgba(4,15,7,.86),
    0 0 5px rgba(196,201,145,.17)!important;
  opacity:.82!important;
  pointer-events:none!important;
}

html body .history-column > .history-panel.history-panel-dynamic .history-side-flower.is-left-a{left:-4px!important;top:36%!important;transform:rotate(-12deg) scale(.84)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-flower.is-left-b{left:0!important;top:69%!important;transform:rotate(13deg) scale(.70)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-flower.is-right-a{right:-4px!important;top:31%!important;transform:rotate(11deg) scale(.76)!important;}
html body .history-column > .history-panel.history-panel-dynamic .history-side-flower.is-right-b{right:0!important;top:63%!important;transform:rotate(-9deg) scale(.68)!important;}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic::before{
    inset:-3px!important;
    background:url('/images/ui/history/history-branch-frame-v35.svg') center/100% 100% no-repeat!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic::after{
    inset:9px 10px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    min-height:66px!important;
    margin:8px 10px 0!important;
    padding:30px 14px 12px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .history-list{
    margin:0 10px 9px!important;
    padding:9px 8px 15px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic .history-side-flower{
    font-size:11px!important;
  }
}

/* History panel v36 — keep the existing frame and rows unchanged while
   making the small side petals/flowers reliably visible and aligning the
   bottom edge of leave1.png with the lower border of its assigned row. */
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer{
  z-index:72!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider{
  object-position:center bottom!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.is-normal{
  transform:translateY(-100%)!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.is-mirrored{
  transform:translateY(-100%) scaleX(-1)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:60!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal{
  display:block!important;
  visibility:visible!important;
  width:8px!important;
  height:13px!important;
  border:1px solid rgba(103,132,70,.42)!important;
  background:linear-gradient(145deg,#4a6639 0%,#2b4728 52%,#172d1c 100%)!important;
  box-shadow:
    inset 1px 1px rgba(155,177,105,.16),
    0 2px 3px rgba(1,9,4,.55)!important;
  filter:drop-shadow(0 1px 1px rgba(1,8,4,.55))!important;
  opacity:.96!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal::after{
  content:""!important;
  position:absolute!important;
  left:46%!important;
  top:12%!important;
  width:1px!important;
  height:74%!important;
  border-radius:999px!important;
  background:rgba(154,177,103,.25)!important;
  transform:rotate(8deg)!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-a{left:8px!important;top:24%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-b{left:5px!important;top:55%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-c{left:9px!important;top:81%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-a{right:8px!important;top:18%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-b{right:5px!important;top:48%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-c{right:9px!important;top:74%!important;}

html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-flower{
  display:block!important;
  visibility:visible!important;
  color:#e4e2c5!important;
  font-size:15px!important;
  line-height:1!important;
  text-shadow:
    0 1px 1px rgba(1,8,4,.92),
    0 0 4px rgba(181,194,127,.22)!important;
  filter:drop-shadow(0 2px 2px rgba(1,8,4,.58))!important;
  opacity:.96!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-flower.is-left-a{left:5px!important;top:36%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-flower.is-left-b{left:8px!important;top:69%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-flower.is-right-a{right:5px!important;top:31%!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-flower.is-right-b{right:8px!important;top:63%!important;}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-flower{
    font-size:13px!important;
  }
}



/* History panel v37 — suspended wooden title plank, slightly fuller petals,
   removal of clipped legacy white corner flowers and occasional soft wind on
   the three hanging launcher boards. History-row dimensions stay untouched. */
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-nature-corner.is-top-right,
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-nature-corner.is-bottom-right{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* The header is now a transparent hanging area. Its inner element is the
   actual wooden plank, leaving a clean open gap beneath the upper branch. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  position:relative!important;
  isolation:isolate!important;
  z-index:14!important;
  display:flex!important;
  align-items:flex-end!important;
  flex:0 0 104px!important;
  width:auto!important;
  min-height:104px!important;
  height:104px!important;
  margin:0 15px 8px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  color:inherit!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header::before,
html body .history-column > .history-panel.history-panel-dynamic > .panel-header::after{
  content:""!important;
  position:absolute!important;
  top:14px!important;
  width:6px!important;
  height:48px!important;
  display:block!important;
  border-radius:999px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(255,240,199,.20),transparent 29% 66%,rgba(40,23,10,.35)),
    repeating-linear-gradient(132deg,#d1a36a 0 2px,#9b6b39 2px 4px,#684522 4px 5px,#b98249 5px 7px)!important;
  box-shadow:
    inset 1px 0 rgba(255,238,194,.17),
    inset -1px 0 rgba(41,23,10,.43),
    0 1px 2px rgba(0,0,0,.58)!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header::before{left:20px!important;transform:rotate(-1.2deg)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header::after{right:20px!important;transform:rotate(1.2deg)!important;}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 18px!important;
  overflow:hidden!important;
  border:1px solid rgba(64,34,12,.98)!important;
  border-radius:4px 6px 5px 3px!important;
  clip-path:polygon(.6% 9%,1.4% 2%,18% 0,35% 2%,54% 0,74% 2%,98.5% 1%,99.7% 10%,99.3% 91%,98.1% 98%,77% 100%,57% 97%,38% 100%,18% 98%,1.2% 100%,.3% 91%)!important;
  color:#f5ddb0!important;
  background:
    radial-gradient(ellipse at 12% 38%,rgba(58,28,9,.58) 0 1px,transparent 1.9px),
    radial-gradient(ellipse at 81% 66%,rgba(51,24,8,.52) 0 1px,transparent 2px),
    repeating-linear-gradient(1.5deg,rgba(58,27,9,.30) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,214,145,.055) 8px 9px,transparent 9px 13px),
    linear-gradient(92deg,#714018 0%,#925826 17%,#7b461d 34%,#a0622d 53%,#81491f 72%,#9a5d29 87%,#6d3b17 100%)!important;
  box-shadow:
    inset 0 2px rgba(255,224,160,.22),
    inset 0 -3px rgba(47,23,8,.52),
    inset 4px 0 rgba(255,213,139,.055),
    inset -4px 0 rgba(39,19,7,.18),
    0 4px 0 rgba(45,24,9,.56),
    0 9px 15px rgba(1,5,2,.34)!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > h3,
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > span{
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  color:#f5ddb0!important;
  text-shadow:0 1px 0 rgba(69,35,12,.98),0 2px 2px rgba(30,14,5,.76)!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > h3{
  font-weight:950!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > span{
  color:#f7ead0!important;
  opacity:.88!important;
}

/* Slightly fuller side foliage. These remain absolute overlays and therefore
   cannot alter the height or spacing of any history row. */
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-a{left:8px!important;top:18%!important;transform:rotate(-34deg)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-d{left:4px!important;top:35%!important;transform:rotate(27deg) scale(.82)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-b{left:7px!important;top:52%!important;transform:rotate(18deg) scale(.88)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-e{left:3px!important;top:68%!important;transform:rotate(-29deg) scale(.76)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-left-c{left:9px!important;top:84%!important;transform:rotate(-14deg) scale(.72)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-a{right:8px!important;top:15%!important;transform:rotate(31deg) scale(.78)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-d{right:4px!important;top:31%!important;transform:rotate(-25deg) scale(.84)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-b{right:7px!important;top:48%!important;transform:rotate(-24deg)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-e{right:3px!important;top:65%!important;transform:rotate(29deg) scale(.78)!important;}
html body .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > .history-side-petal.is-right-c{right:9px!important;top:81%!important;transform:rotate(17deg) scale(.74)!important;}

/* Long cycles keep every launcher still most of the time. Each board gets a
   different breeze direction, while the rope loops attached to its row move
   together with it and the two long ropes flex very slightly. */
html body .history-column > .history-launch-stack > .history-launch-row{
  transform-origin:50% -12px!important;
  will-change:transform!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1){animation:historyWindBoardOne 13.6s ease-in-out 1.3s infinite!important;}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2){animation:historyWindBoardTwo 16.2s ease-in-out 4.8s infinite!important;}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3){animation:historyWindBoardThree 14.8s ease-in-out 8.1s infinite!important;}
html body .history-column > .history-launch-stack::before{transform-origin:50% 0!important;animation:historyWindRopeLeft 15.4s ease-in-out 2.1s infinite!important;}
html body .history-column > .history-launch-stack::after{transform-origin:50% 0!important;animation:historyWindRopeRight 17.1s ease-in-out 6.2s infinite!important;}

@keyframes historyWindBoardOne{
  0%,61%,79%,100%{transform:translateX(0) rotate(0deg);}
  65%{transform:translateX(1px) rotate(.34deg);}
  69%{transform:translateX(-1px) rotate(-.48deg);}
  73%{transform:translateX(.6px) rotate(.25deg);}
  76%{transform:translateX(-.25px) rotate(-.10deg);}
}
@keyframes historyWindBoardTwo{
  0%,55%,73%,100%{transform:translateX(0) rotate(0deg);}
  59%{transform:translateX(-1px) rotate(-.38deg);}
  63%{transform:translateX(.8px) rotate(.45deg);}
  67%{transform:translateX(-.5px) rotate(-.22deg);}
  70%{transform:translateX(.2px) rotate(.08deg);}
}
@keyframes historyWindBoardThree{
  0%,64%,82%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(.8px) rotate(.42deg);}
  72%{transform:translateX(-.9px) rotate(-.40deg);}
  76%{transform:translateX(.45px) rotate(.20deg);}
  79%{transform:translateX(-.18px) rotate(-.07deg);}
}
@keyframes historyWindRopeLeft{
  0%,58%,77%,100%{transform:translateX(0) skewX(0deg);}
  63%{transform:translateX(.7px) skewX(.22deg);}
  68%{transform:translateX(-.6px) skewX(-.18deg);}
  73%{transform:translateX(.2px) skewX(.07deg);}
}
@keyframes historyWindRopeRight{
  0%,62%,81%,100%{transform:translateX(0) skewX(0deg);}
  67%{transform:translateX(-.7px) skewX(-.22deg);}
  72%{transform:translateX(.6px) skewX(.18deg);}
  77%{transform:translateX(-.2px) skewX(-.07deg);}
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    flex-basis:92px!important;
    min-height:92px!important;
    height:92px!important;
    margin:0 13px 7px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header::before,
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header::after{
    top:13px!important;
    height:40px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
    height:43px!important;
    min-height:43px!important;
    padding:0 15px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .history-column > .history-launch-stack > .history-launch-row,
  html body .history-column > .history-launch-stack::before,
  html body .history-column > .history-launch-stack::after{
    animation:none!important;
    transform:none!important;
  }
}

/* History panel v38 — expose the real site background in the hanging-title
   gap and synchronize each wind gust across the three planks and both ropes. */
html body .history-column > .history-panel.history-panel-dynamic::after{
  top:112px!important;
  right:12px!important;
  bottom:11px!important;
  left:12px!important;
  border-radius:0 0 4px 4px!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* One shared wind cycle keeps the long ropes and all three attachment loops
   moving at the same moments. Each plank still answers the breeze with a
   slightly different direction and amplitude. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1){
  animation:historyWindSyncBoardOne 15.8s cubic-bezier(.45,0,.28,1) 1.5s infinite!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2){
  animation:historyWindSyncBoardTwo 15.8s cubic-bezier(.45,0,.28,1) 1.5s infinite!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3){
  animation:historyWindSyncBoardThree 15.8s cubic-bezier(.45,0,.28,1) 1.5s infinite!important;
}
html body .history-column > .history-launch-stack::before{
  transform-origin:50% 0!important;
  animation:historyWindSyncRopeLeft 15.8s cubic-bezier(.45,0,.28,1) 1.5s infinite!important;
}
html body .history-column > .history-launch-stack::after{
  transform-origin:50% 0!important;
  animation:historyWindSyncRopeRight 15.8s cubic-bezier(.45,0,.28,1) 1.5s infinite!important;
}

@keyframes historyWindSyncBoardOne{
  0%,64%,84%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(.9px) rotate(.34deg);}
  72%{transform:translateX(-1px) rotate(-.46deg);}
  76%{transform:translateX(.62px) rotate(.25deg);}
  80%{transform:translateX(-.22px) rotate(-.09deg);}
}
@keyframes historyWindSyncBoardTwo{
  0%,64%,84%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(-.72px) rotate(-.30deg);}
  72%{transform:translateX(.86px) rotate(.39deg);}
  76%{transform:translateX(-.48px) rotate(-.20deg);}
  80%{transform:translateX(.18px) rotate(.07deg);}
}
@keyframes historyWindSyncBoardThree{
  0%,64%,84%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(.54px) rotate(.25deg);}
  72%{transform:translateX(-.66px) rotate(-.30deg);}
  76%{transform:translateX(.36px) rotate(.15deg);}
  80%{transform:translateX(-.14px) rotate(-.05deg);}
}
@keyframes historyWindSyncRopeLeft{
  0%,64%,84%,100%{transform:translateX(0) skewX(0deg);}
  68%{transform:translateX(.72px) skewX(.19deg);}
  72%{transform:translateX(-.82px) skewX(-.24deg);}
  76%{transform:translateX(.48px) skewX(.13deg);}
  80%{transform:translateX(-.17px) skewX(-.045deg);}
}
@keyframes historyWindSyncRopeRight{
  0%,64%,84%,100%{transform:translateX(0) skewX(0deg);}
  68%{transform:translateX(.82px) skewX(.23deg);}
  72%{transform:translateX(-.92px) skewX(-.27deg);}
  76%{transform:translateX(.54px) skewX(.15deg);}
  80%{transform:translateX(-.19px) skewX(-.05deg);}
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic::after{
    top:99px!important;
    right:10px!important;
    bottom:9px!important;
    left:10px!important;
  }
}

/* History + Inventory v39 — transparent title gap, fully synchronized hanging
   ropes, and the requested bg3 artwork on the Inventory carousel panel. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  background-color:transparent!important;
  background-image:none!important;
}

/* The two long ropes and all three wooden rows now share the same gust timing
   and horizontal travel. The rows keep different rotations, so each plank
   still reacts individually without detaching visually from the ropes. */
@keyframes historyWindSyncBoardOne{
  0%,64%,84%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(.78px) rotate(.34deg);}
  72%{transform:translateX(-.90px) rotate(-.46deg);}
  76%{transform:translateX(.50px) rotate(.25deg);}
  80%{transform:translateX(-.18px) rotate(-.09deg);}
}
@keyframes historyWindSyncBoardTwo{
  0%,64%,84%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(.78px) rotate(-.27deg);}
  72%{transform:translateX(-.90px) rotate(.36deg);}
  76%{transform:translateX(.50px) rotate(-.18deg);}
  80%{transform:translateX(-.18px) rotate(.06deg);}
}
@keyframes historyWindSyncBoardThree{
  0%,64%,84%,100%{transform:translateX(0) rotate(0deg);}
  68%{transform:translateX(.78px) rotate(.21deg);}
  72%{transform:translateX(-.90px) rotate(-.28deg);}
  76%{transform:translateX(.50px) rotate(.14deg);}
  80%{transform:translateX(-.18px) rotate(-.05deg);}
}
@keyframes historyWindSyncRopeLeft{
  0%,64%,84%,100%{transform:translateX(0) skewX(0deg);}
  68%{transform:translateX(.78px) skewX(.18deg);}
  72%{transform:translateX(-.90px) skewX(-.22deg);}
  76%{transform:translateX(.50px) skewX(.12deg);}
  80%{transform:translateX(-.18px) skewX(-.04deg);}
}
@keyframes historyWindSyncRopeRight{
  0%,64%,84%,100%{transform:translateX(0) skewX(0deg);}
  68%{transform:translateX(.78px) skewX(.18deg);}
  72%{transform:translateX(-.90px) skewX(-.22deg);}
  76%{transform:translateX(.50px) skewX(.12deg);}
  80%{transform:translateX(-.18px) skewX(-.04deg);}
}

/* Inventory: change only the visual surface of the first main panel that
   contains the coffer carousel. No dimensions, spacing or child positioning
   are modified. The inset highlights/shadows create a restrained fake-3D rim. */
html body .view-page.view-vault > .open-stage{
  background-color:transparent!important;
  background-image:
    radial-gradient(circle at 14% 32%,rgba(103,145,108,.055),transparent 30%),
    radial-gradient(circle at 86% 32%,rgba(103,145,108,.045),transparent 30%),
    linear-gradient(180deg,rgba(24,36,27,.78),rgba(12,20,14,.86))!important;
  background-position:initial!important;
  background-size:initial!important;
  background-repeat:initial!important;
  outline:0!important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,208,.045),
    inset 0 0 52px rgba(4,10,6,.30),
    0 24px 58px rgba(2,7,4,.27)!important;
}



/* Inventory nature frame v40 — restore the approved forest gradient and add a
   distinct, slim 3D woodland frame around the carousel stage. The frame is a
   dedicated overlay, so no carousel sizing, spacing or interaction changes. */
html body .view-page.view-vault > .open-stage{
  isolation:isolate!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch{
  position:absolute!important;
  display:block!important;
  border:1px solid rgba(39,20,8,.86)!important;
  background-color:#4b2c16!important;
  box-shadow:
    inset 0 2px 1px rgba(238,190,112,.22),
    inset 0 -3px 3px rgba(20,9,3,.72),
    0 3px 5px rgba(2,8,4,.48),
    0 8px 13px rgba(1,6,3,.20)!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-top,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-bottom{
  left:8px!important;
  right:8px!important;
  height:13px!important;
  border-radius:46% 54% 43% 57% / 58% 42% 62% 38%!important;
  background-image:
    radial-gradient(ellipse 18px 7px at 18% 56%,rgba(36,17,7,.74) 0 30%,rgba(122,78,38,.50) 34% 44%,transparent 48%),
    radial-gradient(ellipse 14px 5px at 72% 48%,rgba(30,14,6,.72) 0 29%,rgba(136,87,42,.42) 34% 43%,transparent 48%),
    repeating-linear-gradient(4deg,rgba(27,12,5,.56) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,#835a31 0%,#65401f 32%,#3c2110 67%,#211006 100%)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-top{
  top:7px!important;
  transform:rotate(-.18deg)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-bottom{
  bottom:7px!important;
  transform:rotate(.15deg) scaleY(-1)!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-left,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-right{
  top:9px!important;
  bottom:9px!important;
  width:12px!important;
  border-radius:58% 42% 54% 46% / 44% 56% 47% 53%!important;
  background-image:
    radial-gradient(ellipse 6px 17px at 52% 24%,rgba(32,15,6,.76) 0 30%,rgba(130,82,39,.44) 34% 43%,transparent 48%),
    radial-gradient(ellipse 5px 14px at 48% 72%,rgba(31,14,6,.70) 0 29%,rgba(137,88,42,.38) 34% 43%,transparent 48%),
    repeating-linear-gradient(94deg,rgba(27,12,5,.57) 0 1px,transparent 1px 7px),
    linear-gradient(90deg,#835a31 0%,#65401f 31%,#3b200f 68%,#211006 100%)!important;
  box-shadow:
    inset 2px 0 1px rgba(238,190,112,.20),
    inset -3px 0 3px rgba(20,9,3,.72),
    3px 0 5px rgba(2,8,4,.43),
    8px 0 13px rgba(1,6,3,.16)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-left{
  left:7px!important;
  transform:rotate(.12deg)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-right{
  right:7px!important;
  transform:rotate(-.12deg) scaleX(-1)!important;
}

/* Fine moss traces keep this frame different from the thicker Your History
   branches while still belonging to the same nature theme. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  opacity:.70!important;
  filter:drop-shadow(0 1px 1px rgba(2,10,4,.52))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-top::after,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-bottom::after{
  left:5%!important;
  right:6%!important;
  top:-3px!important;
  height:6px!important;
  background:
    radial-gradient(ellipse 8px 3px at 8% 60%,#435c27 0 54%,#263a18 58% 69%,transparent 73%),
    radial-gradient(ellipse 7px 3px at 31% 32%,#587138 0 53%,#2d431d 58% 68%,transparent 73%),
    radial-gradient(ellipse 7px 3px at 64% 58%,#4b632e 0 53%,#283d1b 58% 68%,transparent 73%),
    radial-gradient(ellipse 8px 3px at 91% 35%,#60773c 0 53%,#314720 58% 68%,transparent 73%)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-left::after,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-right::after{
  top:6%!important;
  bottom:7%!important;
  left:-3px!important;
  width:6px!important;
  background:
    radial-gradient(ellipse 3px 8px at 58% 10%,#4f682f 0 53%,#2b411c 58% 68%,transparent 73%),
    radial-gradient(ellipse 3px 7px at 35% 37%,#60783c 0 53%,#304720 58% 68%,transparent 73%),
    radial-gradient(ellipse 3px 8px at 60% 69%,#465e2b 0 53%,#263b19 58% 68%,transparent 73%),
    radial-gradient(ellipse 3px 7px at 38% 92%,#587039 0 53%,#2d431d 58% 68%,transparent 73%)!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora{
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  height:45px!important;
  color:#e9e5c6!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:14px!important;
  line-height:1!important;
  text-shadow:
    0 1px 0 rgba(66,51,18,.92),
    0 0 5px rgba(236,231,195,.16)!important;
  filter:drop-shadow(0 2px 2px rgba(2,10,4,.55))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora::before,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(ellipse 9px 4px at 12% 66%,#526d34 0 54%,#2c431d 59% 68%,transparent 73%),
    radial-gradient(ellipse 8px 4px at 31% 42%,#688044 0 54%,#354d25 59% 68%,transparent 73%),
    radial-gradient(ellipse 8px 4px at 58% 28%,#4a642e 0 54%,#293f1b 59% 68%,transparent 73%),
    radial-gradient(ellipse 9px 4px at 83% 48%,#5e773c 0 54%,#304820 59% 68%,transparent 73%),
    linear-gradient(153deg,transparent 48%,#34491f 49% 51%,transparent 52%)!important;
  z-index:-1!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora::after{
  transform:scale(.72) rotate(17deg)!important;
  opacity:.72!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora.is-top-left{
  left:4px!important;
  top:1px!important;
  transform:rotate(-12deg)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora.is-right-middle{
  right:-2px!important;
  top:42%!important;
  transform:rotate(82deg)!important;
  font-size:12px!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora.is-bottom-right{
  right:2px!important;
  bottom:0!important;
  transform:rotate(164deg)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora.is-bottom-left{
  left:2px!important;
  bottom:1px!important;
  transform:rotate(21deg)!important;
  font-size:12px!important;
}

/* Keep every real Inventory child above the restored background while the
   decorative frame remains interaction-free. */
html body .view-page.view-vault > .open-stage > :not(.inventory-nature-frame){
  position:relative!important;
  z-index:2!important;
}

@media(max-width:680px){
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-top,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-bottom{
    left:6px!important;
    right:6px!important;
    height:10px!important;
  }
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-left,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch.is-right{
    top:7px!important;
    bottom:7px!important;
    width:9px!important;
  }
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flora{
    transform:scale(.82)!important;
  }
}

/* Inventory woodland frame + suspended coffer medallions v41.
   This layer keeps the approved layout intact while increasing the organic
   decoration, hiding the rounded green panel behind the wood, and giving each
   carousel coffer its own rope-suspended wood slice with a settling swing. */
html body .view-page.view-vault > .open-stage{
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* The old panel background now lives inside the wooden border instead of
   reaching beyond it. Separate inset highlights create restrained fake depth. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  position:absolute!important;
  inset:13px!important;
  z-index:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:15px!important;
  background:
    radial-gradient(circle at 15% 23%,rgba(101,143,104,.065),transparent 31%),
    radial-gradient(circle at 85% 28%,rgba(96,137,99,.052),transparent 29%),
    repeating-linear-gradient(132deg,rgba(218,222,187,.012) 0 1px,transparent 1px 17px),
    linear-gradient(180deg,rgba(25,39,29,.86),rgba(12,23,16,.94))!important;
  box-shadow:
    inset 0 2px 0 rgba(246,225,170,.055),
    inset 0 -5px 9px rgba(2,8,4,.48),
    inset 7px 0 13px rgba(2,10,5,.28),
    inset -7px 0 13px rgba(2,10,5,.31),
    0 0 0 1px rgba(104,126,74,.12),
    0 7px 18px rgba(1,7,3,.31)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,235,181,.035),transparent 11%,transparent 86%,rgba(1,6,3,.18)),
    linear-gradient(90deg,rgba(255,236,186,.022),transparent 7%,transparent 93%,rgba(1,7,3,.20))!important;
  box-shadow:
    inset 0 0 0 1px rgba(196,177,111,.055),
    inset 0 0 58px rgba(2,10,5,.34)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  pointer-events:none!important;
  border-radius:10px!important;
  border:1px solid rgba(133,145,90,.08)!important;
  box-shadow:
    0 -1px rgba(237,220,166,.025),
    0 7px 18px rgba(1,7,3,.16)!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame{
  overflow:visible!important;
  z-index:15!important;
  filter:
    drop-shadow(0 3px 2px rgba(22,10,4,.58))
    drop-shadow(0 10px 13px rgba(1,7,3,.24))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-branch{
  z-index:3!important;
}

/* Slender offshoots cross the frame in both directions without becoming a
   second heavy border. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{
  position:absolute!important;
  display:block!important;
  width:82px!important;
  height:7px!important;
  z-index:4!important;
  pointer-events:none!important;
  transform-origin:8px 50%!important;
  border-radius:70% 35% 64% 38% / 54% 45% 56% 44%!important;
  border:1px solid rgba(37,18,7,.72)!important;
  background:
    repeating-linear-gradient(5deg,rgba(30,14,5,.52) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#815932 0%,#5b381b 38%,#34200f 72%,#1d0d05 100%)!important;
  box-shadow:
    inset 0 1px rgba(236,188,111,.20),
    inset 0 -2px rgba(19,8,3,.58),
    0 3px 4px rgba(1,7,3,.38)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig::before{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:-4px!important;
  top:-14px!important;
  height:34px!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 10px 5px at 18% 28%,#536e35 0 51%,#2a421c 57% 68%,transparent 73%),
    radial-gradient(ellipse 9px 4px at 42% 71%,#688146 0 51%,#344f25 57% 68%,transparent 73%),
    radial-gradient(ellipse 8px 4px at 67% 24%,#4a642f 0 51%,#273e1a 57% 68%,transparent 73%),
    radial-gradient(ellipse 9px 4px at 91% 66%,#5d773e 0 51%,#304920 57% 68%,transparent 73%),
    linear-gradient(154deg,transparent 48%,rgba(55,76,35,.88) 49% 51%,transparent 52%)!important;
  filter:drop-shadow(0 2px 1px rgba(2,9,4,.40))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig::after{
  content:""!important;
  position:absolute!important;
  right:-11px!important;
  top:1px!important;
  width:16px!important;
  height:4px!important;
  border-radius:100% 20% 100% 20%!important;
  background:linear-gradient(90deg,#57361a,#2a1609)!important;
  box-shadow:0 1px 2px rgba(1,7,3,.42)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-left{left:-25px!important;top:22px!important;transform:rotate(-8deg)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-right{right:-27px!important;top:34px!important;transform:rotate(188deg) scale(.90)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle{left:-32px!important;top:43%!important;transform:rotate(79deg) scale(.82)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-lower{right:-34px!important;top:66%!important;transform:rotate(-74deg) scale(.86)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-left{left:18px!important;bottom:-12px!important;transform:rotate(14deg) scale(.88)!important;}

/* Additional leaves/petals: intentionally varied in size and rotation. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal{
  position:absolute!important;
  display:block!important;
  width:12px!important;
  height:6px!important;
  z-index:6!important;
  pointer-events:none!important;
  border-radius:100% 12% 100% 12%!important;
  background:linear-gradient(145deg,#71884b 0%,#45602f 53%,#263e1d 100%)!important;
  border:1px solid rgba(24,48,22,.48)!important;
  box-shadow:inset 1px 1px rgba(211,222,159,.08),0 2px 2px rgba(1,8,3,.42)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal::after{
  content:""!important;
  position:absolute!important;
  left:18%!important;
  right:9%!important;
  top:48%!important;
  height:1px!important;
  background:rgba(174,192,122,.24)!important;
  transform:rotate(-6deg)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-01{left:2.2%!important;top:-2px!important;transform:rotate(-16deg) scale(.68)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-02{left:18%!important;top:5px!important;transform:rotate(24deg) scale(.48)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-03{left:62%!important;top:4px!important;transform:rotate(-32deg) scale(.58)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-04{right:3%!important;top:13%!important;transform:rotate(74deg) scale(.72)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-05{right:-1px!important;top:37%!important;transform:rotate(104deg) scale(.54)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-06{right:3px!important;top:78%!important;transform:rotate(59deg) scale(.82)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-07{right:15%!important;bottom:2px!important;transform:rotate(158deg) scale(.57)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-08{left:49%!important;bottom:4px!important;transform:rotate(-151deg) scale(.43)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-09{left:9%!important;bottom:1px!important;transform:rotate(143deg) scale(.77)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-10{left:-1px!important;top:72%!important;transform:rotate(-73deg) scale(.50)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-11{left:3px!important;top:31%!important;transform:rotate(-109deg) scale(.88)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-12{left:1px!important;top:55%!important;transform:rotate(-54deg) scale(.61)!important;}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower{
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  z-index:7!important;
  pointer-events:none!important;
  color:#eee9ca!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:12px!important;
  line-height:1!important;
  text-shadow:0 1px #6b5520,0 0 5px rgba(247,236,193,.15)!important;
  filter:drop-shadow(0 2px 2px rgba(1,8,3,.48))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-01{left:4.5%!important;top:2px!important;transform:rotate(-9deg) scale(.72)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-02{left:34%!important;top:4px!important;transform:rotate(13deg) scale(.49)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-03{right:-1px!important;top:29%!important;transform:rotate(19deg) scale(.63)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-04{right:2.5%!important;bottom:2px!important;transform:rotate(-16deg) scale(.75)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-05{left:27%!important;bottom:3px!important;transform:rotate(11deg) scale(.46)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-06{left:-1px!important;top:59%!important;transform:rotate(-17deg) scale(.60)!important;}

/* The real controls remain above the inset surface. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{z-index:0!important;}
html body .view-page.view-vault > .open-stage > :not(.inventory-nature-frame):not(.inventory-stage-surface){
  position:relative!important;
  z-index:2!important;
}

/* One individually textured wood slice and one braided rope are attached to
   every carousel item. The existing animated aura/orbits/images stay intact
   and render above this support. */
html body .view-page.view-vault .carousel-coffer{
  --hanger-disc-size:138px;
  --hanger-disc-radius:69px;
  --hanger-rope-rise:142px;
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  transform-style:preserve-3d!important;
}
html body .view-page.view-vault .carousel-coffer.selected{
  --hanger-disc-size:178px;
  --hanger-disc-radius:89px;
  --hanger-rope-rise:121px;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.50!important;
  transform-origin:50% calc(50% - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
  will-change:rotate!important;
  transition:opacity .32s ease,filter .32s ease!important;
}
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly{
  opacity:1!important;
  filter:drop-shadow(0 9px 12px rgba(1,7,3,.30))!important;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly.swing-right{
  animation:inventoryCofferHangerSettleRight 1.18s cubic-bezier(.18,.72,.21,1) both!important;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly.swing-left{
  animation:inventoryCofferHangerSettleLeft 1.18s cubic-bezier(.18,.72,.21,1) both!important;
}

html body .view-page.view-vault .carousel-hanging-rope{
  position:absolute!important;
  left:50%!important;
  top:calc(50% - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
  width:6px!important;
  height:calc(var(--hanger-rope-rise) + 11px)!important;
  z-index:1!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:
    repeating-linear-gradient(132deg,rgba(241,207,139,.34) 0 2px,rgba(72,43,19,.18) 2px 4px),
    linear-gradient(90deg,#3b2411 0%,#9b7140 26%,#c09458 49%,#6b4825 73%,#2f1b0c 100%)!important;
  box-shadow:
    inset 1px 0 rgba(239,202,132,.20),
    inset -1px 0 rgba(29,14,5,.58),
    0 2px 3px rgba(1,7,3,.48)!important;
  opacity:.72!important;
}
html body .view-page.view-vault .carousel-coffer.selected .carousel-hanging-rope{opacity:1!important;}
html body .view-page.view-vault .carousel-hanging-rope::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:-4px!important;
  width:12px!important;
  height:8px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 42% 35%,#b58a50 0 28%,#60401f 48%,#261307 100%)!important;
  box-shadow:0 2px 3px rgba(1,7,3,.48)!important;
}
html body .view-page.view-vault .carousel-hanging-rope::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-5px!important;
  width:16px!important;
  height:11px!important;
  transform:translateX(-50%)!important;
  border-radius:48% 52% 46% 54%!important;
  background:
    repeating-linear-gradient(145deg,#9c7140 0 2px,#503017 2px 4px)!important;
  box-shadow:0 2px 3px rgba(1,7,3,.42)!important;
}

html body .view-page.view-vault .carousel-wood-slice{
  --wood-light:#a9773f;
  --wood-mid:#6d4321;
  --wood-dark:#30190b;
  --wood-core:#bb8b50;
  --wood-shape:49% 51% 47% 53% / 52% 46% 54% 48%;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--hanger-disc-size)!important;
  height:var(--hanger-disc-size)!important;
  z-index:2!important;
  transform:translate(-50%,-50%) rotate(var(--hanger-wood-tilt,0deg)) scale(var(--hanger-wood-scale,1))!important;
  border-radius:var(--wood-shape)!important;
  border:3px solid rgba(44,22,8,.88)!important;
  background:
    radial-gradient(circle at 37% 33%,rgba(247,201,126,.15),transparent 23%),
    radial-gradient(circle at 51% 52%,var(--wood-core) 0 5%,var(--wood-mid) 6% 8%,transparent 9%),
    repeating-radial-gradient(ellipse at 48% 51%,transparent 0 12px,rgba(43,21,7,.28) 13px 15px,rgba(217,151,76,.08) 16px 18px),
    repeating-linear-gradient(7deg,rgba(39,18,6,.30) 0 1px,transparent 1px 7px),
    radial-gradient(ellipse at 46% 48%,var(--wood-light) 0%,var(--wood-mid) 58%,var(--wood-dark) 100%)!important;
  box-shadow:
    inset 5px 5px 9px rgba(242,190,112,.19),
    inset -8px -10px 14px rgba(23,9,3,.62),
    inset 0 0 0 3px rgba(157,101,47,.18),
    0 5px 7px rgba(1,7,3,.48),
    0 13px 19px rgba(1,6,3,.20)!important;
  opacity:.76!important;
}
html body .view-page.view-vault .carousel-coffer.selected .carousel-wood-slice{opacity:.96!important;}
html body .view-page.view-vault .carousel-wood-rings{
  position:absolute!important;
  inset:9%!important;
  border-radius:inherit!important;
  opacity:.52!important;
  background:
    radial-gradient(ellipse at 48% 49%,transparent 0 16%,rgba(41,19,6,.38) 17% 18%,transparent 19% 29%,rgba(50,24,8,.33) 30% 31%,transparent 32% 43%,rgba(52,25,9,.28) 44% 45%,transparent 46%),
    linear-gradient(94deg,transparent 0 47%,rgba(48,23,8,.38) 48% 49%,transparent 50%)!important;
  filter:blur(.15px)!important;
}

/* Six palettes/shapes plus per-item tilt/scale keep duplicated carousel copies
   consistent while making each logical coffer support feel hand-cut. */
html body .view-page.view-vault .wood-variant-0 .carousel-wood-slice{--wood-light:#a9773f;--wood-mid:#6c4220;--wood-dark:#2e1709;--wood-core:#c08e50;--wood-shape:49% 51% 46% 54% / 53% 45% 55% 47%;}
html body .view-page.view-vault .wood-variant-1 .carousel-wood-slice{--wood-light:#8f6538;--wood-mid:#5e3a20;--wood-dark:#29170c;--wood-core:#ac7d48;--wood-shape:52% 48% 53% 47% / 47% 55% 45% 53%;}
html body .view-page.view-vault .wood-variant-2 .carousel-wood-slice{--wood-light:#b07b43;--wood-mid:#72431d;--wood-dark:#351a09;--wood-core:#c49456;--wood-shape:47% 53% 49% 51% / 55% 46% 54% 45%;}
html body .view-page.view-vault .wood-variant-3 .carousel-wood-slice{--wood-light:#92704a;--wood-mid:#60462d;--wood-dark:#2d2014;--wood-core:#ae8961;--wood-shape:53% 47% 45% 55% / 49% 54% 46% 51%;}
html body .view-page.view-vault .wood-variant-4 .carousel-wood-slice{--wood-light:#9e6b35;--wood-mid:#68401d;--wood-dark:#301708;--wood-core:#b88649;--wood-shape:48% 52% 55% 45% / 52% 48% 56% 44%;}
html body .view-page.view-vault .wood-variant-5 .carousel-wood-slice{--wood-light:#86623d;--wood-mid:#584027;--wood-dark:#281a0f;--wood-core:#a27b52;--wood-shape:51% 49% 47% 53% / 46% 56% 44% 54%;}

/* Tiny edge flora stays behind the existing aura/image and never enters the
   central artwork area. */
html body .view-page.view-vault .carousel-wood-flora{
  position:absolute!important;
  z-index:3!important;
  color:#eee8c8!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:11px!important;
  line-height:1!important;
  text-shadow:0 1px #69501d!important;
  filter:drop-shadow(0 2px 1px rgba(1,7,3,.48))!important;
  opacity:.78!important;
}
html body .view-page.view-vault .carousel-wood-flora.flora-a{left:8%!important;top:17%!important;transform:rotate(-18deg) scale(.72)!important;}
html body .view-page.view-vault .carousel-wood-flora.flora-b{right:7%!important;bottom:16%!important;transform:rotate(21deg) scale(.58)!important;}
html body .view-page.view-vault .carousel-wood-leaf{
  position:absolute!important;
  z-index:3!important;
  width:14px!important;
  height:7px!important;
  border-radius:100% 12% 100% 12%!important;
  background:linear-gradient(145deg,#71884c,#38542a 58%,#203b1d)!important;
  border:1px solid rgba(23,46,21,.50)!important;
  box-shadow:0 2px 2px rgba(1,7,3,.42)!important;
  opacity:.78!important;
}
html body .view-page.view-vault .carousel-wood-leaf.leaf-a{right:9%!important;top:21%!important;transform:rotate(35deg) scale(.72)!important;}
html body .view-page.view-vault .carousel-wood-leaf.leaf-b{left:9%!important;bottom:20%!important;transform:rotate(-146deg) scale(.58)!important;}

/* Keep the pre-existing animated circle, orbit, lootbox art and labels above
   the new wooden support without changing their sizing or effects. */
html body .view-page.view-vault .carousel-coffer > .carousel-selected-aura{z-index:4!important;}
html body .view-page.view-vault .carousel-coffer > .carousel-orbit{z-index:5!important;}
html body .view-page.view-vault .carousel-coffer > img{z-index:7!important;}
html body .view-page.view-vault .carousel-coffer > .limited-time-decor,
html body .view-page.view-vault .carousel-coffer > .carousel-access-seal,
html body .view-page.view-vault .carousel-coffer > .carousel-vip-only-stamp,
html body .view-page.view-vault .carousel-coffer > .carousel-quantity-badge{z-index:9!important;}

@keyframes inventoryCofferHangerSettleRight{
  0%{rotate:-2.7deg;}
  24%{rotate:1.75deg;}
  46%{rotate:-1.00deg;}
  65%{rotate:.53deg;}
  80%{rotate:-.22deg;}
  91%{rotate:.08deg;}
  100%{rotate:0deg;}
}
@keyframes inventoryCofferHangerSettleLeft{
  0%{rotate:2.7deg;}
  24%{rotate:-1.75deg;}
  46%{rotate:1.00deg;}
  65%{rotate:-.53deg;}
  80%{rotate:.22deg;}
  91%{rotate:-.08deg;}
  100%{rotate:0deg;}
}

@media(max-width:900px){
  html body .view-page.view-vault .carousel-coffer{
    --hanger-disc-size:122px;
    --hanger-disc-radius:61px;
    --hanger-rope-rise:112px;
  }
  html body .view-page.view-vault .carousel-coffer.selected{
    --hanger-disc-size:154px;
    --hanger-disc-radius:77px;
    --hanger-rope-rise:96px;
  }
  html body .view-page.view-vault > .open-stage > .inventory-stage-surface{inset:10px!important;border-radius:12px!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{width:66px!important;height:6px!important;}
}

@media(max-width:680px){
  html body .view-page.view-vault > .open-stage > .inventory-stage-surface{inset:8px!important;border-radius:10px!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal{transform:scale(.72)!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower{font-size:10px!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-lower{display:none!important;}
  html body .view-page.view-vault .carousel-coffer{
    --hanger-disc-size:108px;
    --hanger-disc-radius:54px;
    --hanger-rope-rise:94px;
  }
  html body .view-page.view-vault .carousel-coffer.selected{
    --hanger-disc-size:136px;
    --hanger-disc-radius:68px;
    --hanger-rope-rise:78px;
  }
  html body .view-page.view-vault .carousel-hanging-rope{width:5px!important;}
}

@media(prefers-reduced-motion:reduce){
  html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
    animation:none!important;
    rotate:0deg!important;
  }
}

/* Inventory frame/carousel v42 — shorter connected organic offshoots,
   centered dimensional wood medallions, smooth carousel movement and a
   protected sticky top bar across every page. */

/* The page content must always remain underneath the sticky site header while
   scrolling. Fixed modal layers keep their existing, higher overlay z-indexes. */
html body .app-shell > .topbar{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  isolation:isolate!important;
  transform:translateZ(0)!important;
}
html body .app-shell > .main-layout{
  position:relative!important;
  z-index:10!important;
}
html body .app-shell > .ticker{
  position:relative!important;
  z-index:11!important;
}

/* Replace the long rectangular v41 twigs with short, tapered offshoots that
   visibly grow from the wooden frame. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{
  width:52px!important;
  height:13px!important;
  border:0!important;
  border-radius:0!important;
  transform-origin:5px 50%!important;
  clip-path:polygon(0 38%,16% 31%,38% 25%,63% 30%,83% 39%,100% 48%,83% 57%,61% 63%,36% 59%,15% 55%,0 62%)!important;
  background:
    radial-gradient(ellipse 12px 5px at 22% 39%,rgba(194,139,77,.20),transparent 70%),
    repeating-linear-gradient(7deg,rgba(32,15,6,.48) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#82582f 0%,#65401f 33%,#3a210f 68%,#1e0e05 100%)!important;
  box-shadow:
    inset 0 2px 1px rgba(236,188,111,.18),
    inset 0 -3px 2px rgba(19,8,3,.56),
    0 3px 4px rgba(1,7,3,.40)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig::before{
  content:""!important;
  position:absolute!important;
  left:15px!important;
  top:-7px!important;
  width:28px!important;
  height:10px!important;
  right:auto!important;
  pointer-events:none!important;
  clip-path:polygon(0 44%,20% 36%,48% 24%,77% 31%,100% 48%,76% 57%,47% 61%,18% 56%)!important;
  background:
    repeating-linear-gradient(8deg,rgba(29,13,5,.40) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#76502b,#4b2d16 55%,#241106)!important;
  transform:rotate(-24deg)!important;
  transform-origin:2px 70%!important;
  filter:drop-shadow(0 2px 1px rgba(1,7,3,.38))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig::after{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:-4px!important;
  top:-12px!important;
  width:auto!important;
  height:34px!important;
  border-radius:0!important;
  background:
    radial-gradient(ellipse 8px 4px at 18% 28%,#526d34 0 52%,#2b431d 58% 68%,transparent 73%),
    radial-gradient(ellipse 7px 3px at 42% 72%,#687f45 0 52%,#354f25 58% 68%,transparent 73%),
    radial-gradient(ellipse 7px 3px at 69% 24%,#49632e 0 52%,#273e1a 58% 68%,transparent 73%),
    radial-gradient(ellipse 8px 4px at 91% 66%,#5e773d 0 52%,#30491f 58% 68%,transparent 73%)!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 1px rgba(2,9,4,.40))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-left{
  left:7px!important;top:8px!important;transform:rotate(17deg) scale(.92)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-right{
  right:7px!important;top:9px!important;transform:rotate(163deg) scale(.86)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle{
  left:5px!important;top:43%!important;transform:rotate(3deg) scale(.78)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-lower{
  right:5px!important;top:66%!important;transform:rotate(178deg) scale(.82)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-left{
  left:8px!important;bottom:7px!important;transform:rotate(-13deg) scale(.84)!important;
}

/* Align the wood slice with the exact centre used by the existing animated
   orbit (49% vertically), then add a lower bark lip and inset bevel. */
html body .view-page.view-vault .carousel-coffer{
  --hanger-disc-center-y:49%;
}
html body .view-page.view-vault .carousel-hanging-rope{
  top:calc(var(--hanger-disc-center-y) - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
}
html body .view-page.view-vault .carousel-wood-slice{
  left:50%!important;
  top:var(--hanger-disc-center-y)!important;
  isolation:isolate!important;
  transform:translate(-50%,-50%) rotate(var(--hanger-wood-tilt,0deg)) scale(var(--hanger-wood-scale,1)) translateZ(0)!important;
  box-shadow:
    inset 7px 6px 10px rgba(247,197,119,.22),
    inset -10px -12px 16px rgba(20,8,3,.68),
    inset 0 0 0 3px rgba(161,103,48,.20),
    inset 0 -7px 8px rgba(27,12,4,.30),
    0 7px 8px rgba(1,7,3,.52),
    0 17px 24px rgba(1,6,3,.27)!important;
}
html body .view-page.view-vault .carousel-wood-slice::before{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  border:1px solid rgba(242,194,113,.16)!important;
  box-shadow:
    inset 2px 2px 3px rgba(255,218,148,.12),
    inset -4px -5px 6px rgba(28,12,4,.34)!important;
}
html body .view-page.view-vault .carousel-wood-slice::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:6%!important;
  right:6%!important;
  bottom:-8px!important;
  height:22px!important;
  pointer-events:none!important;
  border-radius:12% 12% 50% 50% / 20% 20% 80% 80%!important;
  background:
    repeating-linear-gradient(7deg,rgba(20,8,3,.46) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#513019 0%,#2d170a 54%,#160a04 100%)!important;
  box-shadow:0 7px 8px rgba(1,6,3,.40)!important;
  transform:scaleY(.68)!important;
  transform-origin:top center!important;
}

/* Smooth, uninterrupted horizontal movement. Item selection and hanger motion
   no longer remount every rendered coffer, avoiding the previous frame hitch. */
html body .view-page.view-vault .carousel-track{
  transition:transform .78s cubic-bezier(.20,.76,.18,1)!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}
html body .view-page.view-vault .carousel-track.is-snapping{
  transition:none!important;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
  transform-origin:50% calc(var(--hanger-disc-center-y) - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
  will-change:rotate!important;
}
html body .view-page.view-vault .carousel-track.hanger-motion-a.motion-right .carousel-coffer.is-carousel-nearby:nth-child(odd) > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-track.hanger-motion-b.motion-left .carousel-coffer.is-carousel-nearby:nth-child(even) > .carousel-hanging-assembly{
  animation:inventoryCofferHangerSettleRightV42 1.28s cubic-bezier(.18,.72,.21,1) both!important;
}
html body .view-page.view-vault .carousel-track.hanger-motion-a.motion-right .carousel-coffer.is-carousel-nearby:nth-child(even) > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-track.hanger-motion-b.motion-left .carousel-coffer.is-carousel-nearby:nth-child(odd) > .carousel-hanging-assembly{
  animation:inventoryCofferHangerSettleRightSoftV42 1.34s .025s cubic-bezier(.18,.72,.21,1) both!important;
}
html body .view-page.view-vault .carousel-track.hanger-motion-a.motion-left .carousel-coffer.is-carousel-nearby:nth-child(odd) > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-track.hanger-motion-b.motion-right .carousel-coffer.is-carousel-nearby:nth-child(even) > .carousel-hanging-assembly{
  animation:inventoryCofferHangerSettleLeftV42 1.28s cubic-bezier(.18,.72,.21,1) both!important;
}
html body .view-page.view-vault .carousel-track.hanger-motion-a.motion-left .carousel-coffer.is-carousel-nearby:nth-child(even) > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-track.hanger-motion-b.motion-right .carousel-coffer.is-carousel-nearby:nth-child(odd) > .carousel-hanging-assembly{
  animation:inventoryCofferHangerSettleLeftSoftV42 1.34s .025s cubic-bezier(.18,.72,.21,1) both!important;
}
@keyframes inventoryCofferHangerSettleRightV42{
  0%{rotate:-3.0deg;}24%{rotate:1.85deg;}46%{rotate:-1.03deg;}66%{rotate:.50deg;}81%{rotate:-.20deg;}92%{rotate:.07deg;}100%{rotate:0deg;}
}
@keyframes inventoryCofferHangerSettleRightSoftV42{
  0%{rotate:-2.1deg;}25%{rotate:1.26deg;}48%{rotate:-.68deg;}68%{rotate:.31deg;}83%{rotate:-.12deg;}93%{rotate:.04deg;}100%{rotate:0deg;}
}
@keyframes inventoryCofferHangerSettleLeftV42{
  0%{rotate:3.0deg;}24%{rotate:-1.85deg;}46%{rotate:1.03deg;}66%{rotate:-.50deg;}81%{rotate:.20deg;}92%{rotate:-.07deg;}100%{rotate:0deg;}
}
@keyframes inventoryCofferHangerSettleLeftSoftV42{
  0%{rotate:2.1deg;}25%{rotate:-1.26deg;}48%{rotate:.68deg;}68%{rotate:-.31deg;}83%{rotate:.12deg;}93%{rotate:-.04deg;}100%{rotate:0deg;}
}

@media(max-width:900px){
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{width:43px!important;height:11px!important;}
}
@media(max-width:680px){
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{width:36px!important;height:10px!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-lower{display:block!important;opacity:.72!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .view-page.view-vault .carousel-track{transition-duration:.18s!important;}
  html body .view-page.view-vault .carousel-track .carousel-coffer > .carousel-hanging-assembly{animation:none!important;rotate:0deg!important;}
}


/* Inventory frame and suspended medallions v43 — true curved branch offshoots,
   exact orbit-centred wood slices and ropes that reach the upper frame. */

/* The green stage is fully recessed behind the bark so its rounded rectangle
   never peeks outside the natural frame. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  inset:17px!important;
  border-radius:9px!important;
  clip-path:inset(0 round 9px)!important;
  box-shadow:
    inset 0 3px 2px rgba(240,221,169,.045),
    inset 0 -9px 18px rgba(1,7,3,.46),
    inset 10px 0 18px rgba(1,8,4,.25),
    inset -10px 0 18px rgba(1,8,4,.28),
    0 0 0 1px rgba(92,111,67,.10),
    0 9px 20px rgba(1,6,3,.29)!important;
}

/* Remove every previous polygon/rectangle twig treatment. The new SVG stem
   starts directly on the wooden border and contains several curved offshoots. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{
  position:absolute!important;
  display:block!important;
  width:88px!important;
  height:48px!important;
  z-index:5!important;
  overflow:visible!important;
  pointer-events:none!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  clip-path:none!important;
  transform-origin:2px 20px!important;
  filter:drop-shadow(0 3px 2px rgba(1,7,3,.46))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig::before,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig::after{
  content:none!important;
  display:none!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig-svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-shape{
  display:none!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-variant-a .twig-shape-a,
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-variant-b .twig-shape-b{
  display:inline!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-shadow{
  fill:none!important;
  stroke:#160904!important;
  stroke-width:9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  opacity:.88!important;
  transform:translateY(2px)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-main{
  fill:none!important;
  stroke:#5b3519!important;
  stroke-width:6.6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-highlight{
  fill:none!important;
  stroke:rgba(204,145,77,.38)!important;
  stroke-width:1.45!important;
  stroke-linecap:round!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-offshoot-shadow{
  fill:none!important;
  stroke:#160904!important;
  stroke-width:5.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  opacity:.78!important;
  transform:translateY(1.2px)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-offshoot{
  fill:none!important;
  stroke:#4d2b14!important;
  stroke-width:3.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-leaves ellipse{
  fill:#435f2c!important;
  stroke:#213b1c!important;
  stroke-width:1!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-leaves ellipse:nth-child(even){
  fill:#5b7340!important;
}

/* Every branch begins over the centre of its frame limb; rotations only point
   the detailed tip inward/outward and never detach its base. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-left{
  left:8px!important;top:-7px!important;transform:rotate(8deg) scale(.90)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-right{
  right:15px!important;top:-16px!important;transform-origin:90px 29px!important;transform:rotate(-6deg) scale(.86)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle{
  left:9px!important;top:39%!important;transform:rotate(-5deg) scale(.76)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-lower{
  right:15px!important;top:61%!important;transform-origin:90px 29px!important;transform:rotate(7deg) scale(.79)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-left{
  left:8px!important;bottom:-11px!important;transform:rotate(-9deg) scale(.84)!important;
}

/* Anchor the whole hanger at the same 50% / 49% point used by the existing
   animated orbit. Wood, rope and swing therefore share one exact centre. */
html body .view-page.view-vault .carousel-coffer{
  --hanger-disc-center-y:49%;
  --hanger-rope-rise:169px;
}
html body .view-page.view-vault .carousel-coffer.selected{
  --hanger-rope-rise:149px;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
  inset:auto!important;
  left:50%!important;
  top:var(--hanger-disc-center-y)!important;
  width:0!important;
  height:0!important;
  transform-origin:0 calc(0px - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
}
html body .view-page.view-vault .carousel-hanging-rope{
  left:0!important;
  top:calc(0px - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
  height:calc(var(--hanger-rope-rise) + 12px)!important;
  transform:translateX(-50%)!important;
}
html body .view-page.view-vault .carousel-hanging-rope::before{
  top:-2px!important;
  width:15px!important;
  height:7px!important;
  border-radius:45% 55% 42% 58%!important;
  background:
    repeating-linear-gradient(145deg,rgba(238,204,134,.18) 0 2px,transparent 2px 4px),
    radial-gradient(ellipse at 45% 36%,#ad8149 0 25%,#5d3a1b 50%,#241106 100%)!important;
}
html body .view-page.view-vault .carousel-wood-slice{
  left:0!important;
  top:0!important;
  transform-origin:50% 50%!important;
  transform:translate(-50%,-50%) rotate(var(--hanger-wood-tilt,0deg)) scale(var(--hanger-wood-scale,1)) translateZ(0)!important;
  border-width:4px!important;
  filter:drop-shadow(0 8px 7px rgba(1,6,3,.42))!important;
  box-shadow:
    inset 10px 8px 13px rgba(251,204,127,.24),
    inset -13px -15px 19px rgba(18,7,2,.72),
    inset 0 0 0 3px rgba(183,121,58,.23),
    inset 0 -9px 10px rgba(25,10,3,.33),
    0 8px 8px rgba(1,6,3,.54),
    0 20px 28px rgba(1,5,2,.31)!important;
}
/* A complete darker copy below the cut face creates visible bark thickness,
   rather than a flat shadow or a narrow strip. */
html body .view-page.view-vault .carousel-wood-slice::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  width:auto!important;
  height:auto!important;
  bottom:auto!important;
  border-radius:inherit!important;
  border:4px solid rgba(24,10,3,.90)!important;
  background:
    repeating-linear-gradient(8deg,rgba(16,6,2,.52) 0 1px,transparent 1px 6px),
    radial-gradient(ellipse at 48% 48%,#5a3419 0%,#321808 62%,#160804 100%)!important;
  box-shadow:0 10px 11px rgba(1,5,2,.46)!important;
  transform:translateY(9px) scale(.965)!important;
  transform-origin:center!important;
}
html body .view-page.view-vault .carousel-wood-slice::before{
  inset:5px!important;
  border:2px solid rgba(245,194,111,.17)!important;
  box-shadow:
    inset 3px 3px 5px rgba(255,221,151,.15),
    inset -6px -7px 8px rgba(24,9,3,.39),
    0 1px rgba(255,221,151,.055)!important;
}

@media(max-width:900px){
  html body .view-page.view-vault > .open-stage > .inventory-stage-surface{inset:13px!important;border-radius:8px!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{width:76px!important;height:43px!important;}
  html body .view-page.view-vault .carousel-coffer{--hanger-rope-rise:135px;}
  html body .view-page.view-vault .carousel-coffer.selected{--hanger-rope-rise:119px;}
}
@media(max-width:680px){
  html body .view-page.view-vault > .open-stage > .inventory-stage-surface{inset:10px!important;border-radius:7px!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{width:62px!important;height:37px!important;}
  html body .view-page.view-vault .carousel-coffer{--hanger-rope-rise:114px;}
  html body .view-page.view-vault .carousel-coffer.selected{--hanger-rope-rise:100px;}
}

/* Inventory woodland refinements v44 — varied forked branches, fully visible
   frame-anchored hanger ropes, image-centred irregular wood slices, denser
   circular foliage and a slightly brighter forest top bar. */

/* Keep the same green identity while lifting the header luminance slightly. */
html body .app-shell > .topbar,
html body .topbar{
  background:
    radial-gradient(circle at 18% 0%,rgba(67,94,70,.075),transparent 34%),
    linear-gradient(180deg,rgba(27,44,30,.98),rgba(16,31,21,.97))!important;
  box-shadow:
    0 10px 30px rgba(2,7,4,.25),
    inset 0 1px rgba(244,239,214,.025),
    inset 0 -1px rgba(247,245,237,.022)!important;
}

/* The carousel may remain horizontally clipped, but its ropes must be allowed
   to travel all the way up to the actual wooden frame. */
html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault .vault-carousel,
html body .view-page.view-vault .carousel-track,
html body .view-page.view-vault .carousel-coffer{
  overflow:visible!important;
}
html body .view-page.view-vault .carousel-viewport{
  position:relative!important;
  overflow:visible!important;
  clip-path:inset(-380px 0 -90px 0)!important;
}

/* All branch artwork is true SVG: curved bark, secondary shoots and a forked
   V-shaped end. Each placement has its own length and angle while its base
   remains planted in the corresponding wooden frame limb. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{
  width:92px!important;
  height:52px!important;
  opacity:.94!important;
  transform-origin:2px 50%!important;
  filter:
    drop-shadow(0 3px 2px rgba(1,7,3,.48))
    drop-shadow(0 7px 6px rgba(1,7,3,.18))!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-variant-c .twig-shape-c{
  display:inline!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-main{
  stroke-width:6.1!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-shadow{
  stroke-width:8.8!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-offshoot{
  stroke-width:3.15!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-offshoot-shadow{
  stroke-width:5.0!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig .twig-leaves ellipse{
  filter:drop-shadow(0 1px 1px rgba(2,9,4,.36))!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-left{
  left:8px!important;top:-18px!important;width:108px!important;height:57px!important;transform:rotate(10deg) scale(.98)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-mid-left{
  left:21%!important;top:-16px!important;width:76px!important;height:48px!important;transform:rotate(5deg) scale(.86)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-mid-right{
  right:27%!important;top:-17px!important;width:89px!important;height:51px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(7deg) scale(.78)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-right{
  right:7px!important;top:-18px!important;width:101px!important;height:55px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(10deg) scale(.93)!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-upper{
  left:5px!important;top:17%!important;width:73px!important;height:46px!important;transform:rotate(88deg) scale(.73)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle{
  left:5px!important;top:42%!important;width:98px!important;height:54px!important;transform:rotate(90deg) scale(.83)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-lower{
  left:5px!important;top:70%!important;width:80px!important;height:49px!important;transform:rotate(86deg) scale(.76)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-upper{
  right:5px!important;top:20%!important;width:91px!important;height:52px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(88deg) scale(.78)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-middle{
  right:5px!important;top:46%!important;width:69px!important;height:45px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(91deg) scale(.72)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-lower{
  right:5px!important;top:72%!important;width:103px!important;height:56px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(87deg) scale(.82)!important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-left{
  left:8px!important;bottom:-10px!important;width:96px!important;height:53px!important;transform:rotate(-10deg) scale(.88)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-mid-left{
  left:29%!important;bottom:-10px!important;width:71px!important;height:47px!important;transform:rotate(-5deg) scale(.74)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-mid-right{
  right:25%!important;bottom:-10px!important;width:87px!important;height:50px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(-7deg) scale(.80)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-right{
  right:8px!important;bottom:-10px!important;width:104px!important;height:56px!important;transform-origin:calc(100% - 2px) 50%!important;transform:scaleX(-1) rotate(-10deg) scale(.92)!important;
}

/* Additional loose petals and blossoms around every frame limb. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-13{left:10%!important;top:-3px!important;transform:rotate(39deg) scale(.93)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-14{left:43%!important;top:2px!important;transform:rotate(-52deg) scale(.56)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-15{right:19%!important;top:-2px!important;transform:rotate(17deg) scale(.77)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-16{right:-2px!important;top:22%!important;transform:rotate(119deg) scale(.92)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-17{right:2px!important;top:51%!important;transform:rotate(72deg) scale(.45)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-18{right:-1px!important;bottom:13%!important;transform:rotate(131deg) scale(.69)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-19{right:29%!important;bottom:-2px!important;transform:rotate(-137deg) scale(.88)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-20{left:39%!important;bottom:2px!important;transform:rotate(164deg) scale(.52)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-21{left:18%!important;bottom:-1px!important;transform:rotate(128deg) scale(.71)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-22{left:-2px!important;bottom:17%!important;transform:rotate(-126deg) scale(.86)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-23{left:2px!important;top:47%!important;transform:rotate(-81deg) scale(.49)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-petal.petal-24{left:-1px!important;top:12%!important;transform:rotate(-43deg) scale(.74)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-07{left:14%!important;top:-1px!important;transform:rotate(18deg) scale(.53)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-08{right:18%!important;top:1px!important;transform:rotate(-13deg) scale(.66)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-09{right:12%!important;bottom:0!important;transform:rotate(17deg) scale(.47)!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-flower.flower-10{left:12%!important;bottom:1px!important;transform:rotate(-16deg) scale(.61)!important;}

/* The measured artwork centre is written per coffer by React, so every wood
   slice remains exactly behind its own image regardless of image proportions,
   selected scaling or carousel position. */
html body .view-page.view-vault .carousel-coffer{
  --hanger-disc-size:148px;
  --hanger-disc-radius:74px;
  --hanger-center-x:50%;
  --hanger-center-y:49%;
  --hanger-rope-start:-172px;
  --hanger-rope-length:108px;
}
html body .view-page.view-vault .carousel-coffer.selected{
  --hanger-disc-size:184px;
  --hanger-disc-radius:92px;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
  inset:auto!important;
  left:var(--hanger-center-x)!important;
  top:var(--hanger-center-y)!important;
  width:0!important;
  height:0!important;
  opacity:.70!important;
  transform-origin:0 var(--hanger-rope-start)!important;
}
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly{
  opacity:1!important;
}
html body .view-page.view-vault .carousel-hanging-rope{
  left:0!important;
  top:var(--hanger-rope-start)!important;
  height:var(--hanger-rope-length)!important;
  transform:translateX(-50%)!important;
  opacity:.86!important;
}
html body .view-page.view-vault .carousel-coffer.selected .carousel-hanging-rope{
  opacity:1!important;
}
html body .view-page.view-vault .carousel-wood-slice{
  left:0!important;
  top:0!important;
  opacity:.90!important;
  border-radius:var(--wood-shape)!important;
  transform:
    translate(-50%,-50%)
    rotate(var(--hanger-wood-tilt,0deg))
    scale(var(--hanger-wood-scale,1))
    scaleX(var(--wood-x-scale,1))
    scaleY(var(--wood-y-scale,1))
    translateZ(0)!important;
  filter:
    drop-shadow(0 5px 2px rgba(21,9,3,.66))
    drop-shadow(0 12px 9px rgba(1,6,3,.43))!important;
  box-shadow:
    inset 12px 9px 15px rgba(251,204,127,.25),
    inset -15px -17px 21px rgba(18,7,2,.76),
    inset 0 0 0 4px rgba(183,121,58,.24),
    inset 0 -11px 12px rgba(25,10,3,.37),
    0 9px 9px rgba(1,6,3,.57),
    0 22px 31px rgba(1,5,2,.33)!important;
}
html body .view-page.view-vault .carousel-coffer.selected .carousel-wood-slice{
  opacity:.99!important;
}
html body .view-page.view-vault .wood-variant-0 .carousel-wood-slice{--wood-shape:45% 55% 42% 58% / 55% 43% 57% 45%;--wood-x-scale:1.035;--wood-y-scale:.972;}
html body .view-page.view-vault .wood-variant-1 .carousel-wood-slice{--wood-shape:56% 44% 54% 46% / 43% 58% 42% 57%;--wood-x-scale:.978;--wood-y-scale:1.026;}
html body .view-page.view-vault .wood-variant-2 .carousel-wood-slice{--wood-shape:43% 57% 48% 52% / 59% 42% 58% 41%;--wood-x-scale:1.022;--wood-y-scale:.965;}
html body .view-page.view-vault .wood-variant-3 .carousel-wood-slice{--wood-shape:58% 42% 44% 56% / 47% 57% 43% 53%;--wood-x-scale:.968;--wood-y-scale:1.032;}
html body .view-page.view-vault .wood-variant-4 .carousel-wood-slice{--wood-shape:46% 54% 59% 41% / 54% 45% 60% 40%;--wood-x-scale:1.03;--wood-y-scale:.978;}
html body .view-page.view-vault .wood-variant-5 .carousel-wood-slice{--wood-shape:54% 46% 43% 57% / 41% 60% 44% 56%;--wood-x-scale:.975;--wood-y-scale:1.024;}

/* Petals follow the perimeter at tangential angles. Narrow side-facing petals
   suggest that the foliage wraps cylindrically around the wood edge. */
html body .view-page.view-vault .carousel-wood-petal-ring{
  position:absolute!important;
  inset:-3%!important;
  z-index:4!important;
  pointer-events:none!important;
  border-radius:inherit!important;
}
html body .view-page.view-vault .carousel-wood-petal-ring .wood-petal{
  position:absolute!important;
  display:block!important;
  width:13px!important;
  height:6px!important;
  border-radius:100% 14% 100% 14%!important;
  border:1px solid rgba(20,43,19,.54)!important;
  background:linear-gradient(145deg,#71894c 0%,#45622f 54%,#203a1b 100%)!important;
  box-shadow:inset 1px 1px rgba(217,226,166,.10),0 2px 2px rgba(1,7,3,.48)!important;
  transform-origin:center!important;
}
html body .view-page.view-vault .carousel-wood-petal-ring .wood-petal::after{
  content:""!important;
  position:absolute!important;
  left:18%!important;right:8%!important;top:48%!important;height:1px!important;
  background:rgba(180,199,128,.24)!important;
}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-01{left:17%!important;top:3%!important;transform:rotate(-35deg) scale(.74)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-02{left:47%!important;top:-2%!important;transform:rotate(4deg) scale(.52)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-03{right:13%!important;top:8%!important;transform:rotate(42deg) scale(.86)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-04{right:-2%!important;top:35%!important;transform:rotate(88deg) scaleX(.38) scaleY(.82)!important;opacity:.72!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-05{right:0!important;bottom:19%!important;transform:rotate(126deg) scale(.59)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-06{right:25%!important;bottom:1%!important;transform:rotate(157deg) scale(.91)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-07{left:36%!important;bottom:-2%!important;transform:rotate(-169deg) scale(.48)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-08{left:7%!important;bottom:10%!important;transform:rotate(-128deg) scale(.78)!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-09{left:-3%!important;top:48%!important;transform:rotate(-91deg) scaleX(.34) scaleY(.92)!important;opacity:.68!important;}
html body .view-page.view-vault .carousel-wood-petal-ring .petal-ring-10{left:4%!important;top:20%!important;transform:rotate(-58deg) scale(.58)!important;}

@media(max-width:900px){
  html body .view-page.view-vault .carousel-coffer{--hanger-disc-size:128px;--hanger-disc-radius:64px;}
  html body .view-page.view-vault .carousel-coffer.selected{--hanger-disc-size:160px;--hanger-disc-radius:80px;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{scale:.78!important;}
}
@media(max-width:680px){
  html body .view-page.view-vault .carousel-coffer{--hanger-disc-size:112px;--hanger-disc-radius:56px;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig{scale:.66!important;}
  html body .view-page.view-vault .carousel-coffer.selected{--hanger-disc-size:140px;--hanger-disc-radius:70px;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-mid-left,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-top-mid-right,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-mid-left,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-bottom-mid-right,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-left-middle,
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-frame-twig.twig-right-middle{display:none!important;}
  html body .view-page.view-vault .carousel-wood-petal-ring .wood-petal{width:10px!important;height:5px!important;}
}

/* Inventory carousel stability v45 — restore the proven carousel clipping and
   item anchoring while preserving the v44 woodland frame and decoration. */
html body .view-page.view-vault .vault-carousel{
  overflow:visible!important;
}
html body .view-page.view-vault .carousel-viewport{
  position:relative!important;
  overflow:hidden!important;
  clip-path:none!important;
  isolation:isolate!important;
  pointer-events:auto!important;
}
html body .view-page.view-vault .carousel-track{
  overflow:visible!important;
  transform-style:flat!important;
  pointer-events:auto!important;
}
html body .view-page.view-vault .carousel-coffer{
  --hanger-disc-center-y:49%;
  --hanger-rope-rise:169px;
  position:relative!important;
  overflow:visible!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
html body .view-page.view-vault .carousel-coffer.selected{
  --hanger-rope-rise:149px;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
  inset:auto!important;
  left:50%!important;
  top:var(--hanger-disc-center-y)!important;
  width:0!important;
  height:0!important;
  pointer-events:none!important;
  transform-origin:0 calc(0px - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
}
html body .view-page.view-vault .carousel-hanging-rope{
  left:0!important;
  top:calc(0px - var(--hanger-disc-radius) - var(--hanger-rope-rise))!important;
  height:calc(var(--hanger-rope-rise) + 12px)!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
}
html body .view-page.view-vault .carousel-wood-slice{
  left:0!important;
  top:0!important;
  transform-origin:50% 50%!important;
  transform:
    translate(-50%,-50%)
    rotate(var(--hanger-wood-tilt,0deg))
    scale(var(--hanger-wood-scale,1))
    scaleX(var(--wood-x-scale,1))
    scaleY(var(--wood-y-scale,1))
    translateZ(0)!important;
  pointer-events:none!important;
}
html body .view-page.view-vault .carousel-arrow{
  z-index:30!important;
  pointer-events:auto!important;
}
@media(max-width:900px){
  html body .view-page.view-vault .carousel-coffer{--hanger-rope-rise:135px;}
  html body .view-page.view-vault .carousel-coffer.selected{--hanger-rope-rise:119px;}
}
@media(max-width:680px){
  html body .view-page.view-vault .carousel-coffer{--hanger-rope-rise:114px;}
  html body .view-page.view-vault .carousel-coffer.selected{--hanger-rope-rise:100px;}
}

/* Inventory carousel rope/anchor and drifting-petal corrections v46.
   A dedicated horizontal clip wrapper preserves the proven v45 carousel
   movement while allowing each rope to paint upward to the real frame. */
html body .view-page.view-vault .carousel-horizontal-clip{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  clip-path:inset(-430px 0 -120px 0)!important;
  pointer-events:auto!important;
}
html body .view-page.view-vault .carousel-horizontal-clip > .carousel-viewport{
  width:100%!important;
  overflow:visible!important;
  clip-path:none!important;
  pointer-events:auto!important;
}
html body .view-page.view-vault .carousel-horizontal-clip .carousel-track{
  pointer-events:auto!important;
}

/* React measures the existing animated circle inside each coffer. The wood
   support therefore shares that circle's exact centre rather than relying on
   the button box, whose height changes for selected Fortune Path entries. */
html body .view-page.view-vault .carousel-coffer{
  --hanger-center-x:50%;
  --hanger-center-y:49%;
  --hanger-rope-top:-198px;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly{
  inset:auto!important;
  left:var(--hanger-center-x)!important;
  top:var(--hanger-center-y)!important;
  width:0!important;
  height:0!important;
  transform-origin:0 var(--hanger-rope-top)!important;
  pointer-events:none!important;
}
html body .view-page.view-vault .carousel-hanging-rope{
  left:0!important;
  top:var(--hanger-rope-top)!important;
  height:calc(0px - var(--hanger-disc-radius) - var(--hanger-rope-top) + 10px)!important;
  min-height:72px!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
}
html body .view-page.view-vault .carousel-wood-slice{
  left:0!important;
  top:0!important;
  transform-origin:50% 50%!important;
}

/* A small number of leaves detach independently from different frame limbs.
   They cross the panel and continue below its bottom edge before fading and
   restarting at unrelated moments. */
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-falling-petals{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-falling-petal{
  --petal-scale:1;
  --petal-start-rotation:0deg;
  --petal-end-rotation:440deg;
  --petal-drift-x:60px;
  --petal-fall-y:min(650px,72vh);
  position:absolute!important;
  display:block!important;
  width:12px!important;
  height:6px!important;
  border:1px solid rgba(20,43,19,.58)!important;
  border-radius:100% 13% 100% 13%!important;
  opacity:0;
  background:
    linear-gradient(155deg,rgba(143,164,91,.26),transparent 42%),
    linear-gradient(145deg,#607a40 0%,#38562b 57%,#172f18 100%)!important;
  box-shadow:
    inset 1px 1px rgba(222,228,178,.10),
    0 2px 3px rgba(1,7,3,.46)!important;
  filter:drop-shadow(0 2px 2px rgba(1,7,3,.30))!important;
  transform-origin:48% 52%!important;
  will-change:transform,opacity!important;
  animation-name:inventoryLoosePetalFall!important;
  animation-timing-function:cubic-bezier(.34,.02,.66,.98)!important;
  animation-iteration-count:infinite!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-falling-petal::after{
  content:""!important;
  position:absolute!important;
  left:16%!important;
  right:8%!important;
  top:48%!important;
  height:1px!important;
  background:rgba(184,201,130,.24)!important;
  transform:rotate(-3deg)!important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-01{left:4%!important;top:9px!important;--petal-scale:.68;--petal-drift-x:96px;--petal-start-rotation:-18deg;--petal-end-rotation:515deg;animation-duration:11.7s!important;animation-delay:-2.1s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-02{left:17%!important;top:7px!important;--petal-scale:.92;--petal-drift-x:-72px;--petal-start-rotation:31deg;--petal-end-rotation:-472deg;animation-duration:14.2s!important;animation-delay:-8.6s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-03{left:39%!important;top:10px!important;--petal-scale:.54;--petal-drift-x:118px;--petal-start-rotation:-54deg;--petal-end-rotation:604deg;animation-duration:9.8s!important;animation-delay:-4.4s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-04{right:23%!important;top:8px!important;--petal-scale:.79;--petal-drift-x:-105px;--petal-start-rotation:14deg;--petal-end-rotation:-548deg;animation-duration:13.1s!important;animation-delay:-1.2s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-05{right:5%!important;top:11px!important;--petal-scale:.63;--petal-drift-x:-84px;--petal-start-rotation:67deg;--petal-end-rotation:568deg;animation-duration:10.9s!important;animation-delay:-7.3s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-06{left:-2px!important;top:16%!important;--petal-scale:.86;--petal-drift-x:154px;--petal-start-rotation:-91deg;--petal-end-rotation:421deg;--petal-fall-y:min(545px,62vh);animation-duration:12.6s!important;animation-delay:-5.8s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-07{right:-2px!important;top:27%!important;--petal-scale:.48;--petal-drift-x:-132px;--petal-start-rotation:103deg;--petal-end-rotation:-430deg;--petal-fall-y:min(485px,57vh);animation-duration:9.4s!important;animation-delay:-3.7s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-08{left:8px!important;top:38%!important;--petal-scale:.59;--petal-drift-x:126px;--petal-start-rotation:-72deg;--petal-end-rotation:538deg;--petal-fall-y:min(410px,49vh);animation-duration:15.1s!important;animation-delay:-10.2s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-09{right:7px!important;top:44%!important;--petal-scale:.77;--petal-drift-x:-115px;--petal-start-rotation:124deg;--petal-end-rotation:-586deg;--petal-fall-y:min(390px,47vh);animation-duration:11.3s!important;animation-delay:-6.1s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-10{left:27%!important;top:4px!important;--petal-scale:.43;--petal-drift-x:-44px;--petal-start-rotation:8deg;--petal-end-rotation:487deg;animation-duration:16.4s!important;animation-delay:-12.7s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-11{right:38%!important;top:8px!important;--petal-scale:.72;--petal-drift-x:68px;--petal-start-rotation:-35deg;--petal-end-rotation:-507deg;animation-duration:12.1s!important;animation-delay:-9.0s!important;}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame .falling-petal-12{right:-1px!important;top:63%!important;--petal-scale:.55;--petal-drift-x:-98px;--petal-start-rotation:88deg;--petal-end-rotation:529deg;--petal-fall-y:min(285px,34vh);animation-duration:10.2s!important;animation-delay:-2.9s!important;}

@keyframes inventoryLoosePetalFall{
  0%,8%{
    opacity:0;
    transform:translate3d(0,-5px,0) rotate(var(--petal-start-rotation)) scale(var(--petal-scale));
  }
  13%{opacity:.80;}
  31%{
    transform:translate3d(22px,148px,0) rotate(122deg) scale(var(--petal-scale));
  }
  57%{
    opacity:.72;
    transform:translate3d(-14px,326px,0) rotate(268deg) scale(var(--petal-scale));
  }
  82%{opacity:.64;}
  100%{
    opacity:0;
    transform:translate3d(var(--petal-drift-x),var(--petal-fall-y),0) rotate(var(--petal-end-rotation)) scale(var(--petal-scale));
  }
}

@media(max-width:900px){
  html body .view-page.view-vault .carousel-horizontal-clip{clip-path:inset(-350px 0 -100px 0)!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-falling-petal{--petal-fall-y:min(560px,69vh);}
}
@media(max-width:680px){
  html body .view-page.view-vault .carousel-horizontal-clip{clip-path:inset(-290px 0 -80px 0)!important;}
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-falling-petal{width:10px!important;height:5px!important;--petal-fall-y:min(480px,64vh);}
}
@media(prefers-reduced-motion:reduce){
  html body .view-page.view-vault > .open-stage > .inventory-nature-frame .inventory-falling-petal{display:none!important;animation:none!important;}
}

/* Inventory suspension connection v50 — the rope overlay is a direct child of
   .app-shell, outside every animated/transformed page wrapper. Its geometry is
   measured in viewport coordinates so both ropes stay attached to the sticky
   topbar and the upper branch of the Inventory panel without drifting or being
   clipped by the carousel/page containers. */
html body .view-page.view-vault{
  position:relative!important;
  overflow:visible!important;
}

html body .app-shell > .inventory-main-suspension-layer{
  --inventory-main-rope-top:64px;
  --inventory-main-rope-height:520px;
  --inventory-main-rope-left-x:48px;
  --inventory-main-rope-right-x:calc(100vw - 48px);
  position:fixed!important;
  top:calc(var(--inventory-main-rope-top) + 2px)!important;
  left:0!important;
  width:100vw!important;
  height:var(--inventory-main-rope-height)!important;
  z-index:9!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  opacity:0;
  transition:opacity .18s ease!important;
  contain:style!important;
}

html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension{
  position:absolute!important;
  top:0!important;
  width:18px!important;
  height:100%!important;
  display:block!important;
  transform-origin:50% 0!important;
  will-change:transform!important;
  pointer-events:none!important;
}

html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 6px)!important;
  animation:inventoryMainRopeWindLeft 14.6s ease-in-out infinite!important;
}

html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right{
  left:calc(var(--inventory-main-rope-right-x) - 24px)!important;
  right:auto!important;
  animation:inventoryMainRopeWindRight 15.8s ease-in-out -5.4s infinite!important;
}

html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:-1px!important;
  bottom:-3px!important;
  width:7px!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:
    repeating-linear-gradient(132deg,rgba(244,211,145,.31) 0 2px,rgba(63,35,14,.24) 2px 4px),
    linear-gradient(90deg,#2c1709 0%,#74502a 22%,#bc8f50 48%,#68431f 73%,#251207 100%)!important;
  box-shadow:
    inset 1px 0 rgba(247,217,154,.22),
    inset -1px 0 rgba(21,9,3,.66),
    0 2px 4px rgba(1,7,3,.48)!important;
}

html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension > i,
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension > b{
  position:absolute!important;
  left:50%!important;
  display:block!important;
  pointer-events:none!important;
}

/* Upper knot overlaps the lower lip of the topbar; lower knot overlaps the
   panel's top branch. This removes the visual gap at both attachment points. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension > i{
  top:-7px!important;
  width:17px!important;
  height:14px!important;
  transform:translateX(-50%) rotate(2deg)!important;
  border:2px solid rgba(48,24,9,.92)!important;
  border-radius:46% 54% 43% 57%!important;
  background:repeating-linear-gradient(138deg,#b1844b 0 3px,#62401d 3px 6px)!important;
  box-shadow:inset 1px 1px rgba(244,207,139,.18),0 3px 5px rgba(1,7,3,.46)!important;
}

html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension > b{
  bottom:-10px!important;
  width:25px!important;
  height:18px!important;
  transform:translateX(-50%)!important;
  border:2px solid rgba(48,23,8,.94)!important;
  border-radius:49% 51% 44% 56%!important;
  background:repeating-linear-gradient(140deg,#ad7f45 0 3px,#563316 3px 6px)!important;
  box-shadow:inset 1px 1px rgba(243,203,132,.20),0 3px 5px rgba(1,7,3,.50)!important;
}

@keyframes inventoryMainRopeWindLeft{
  0%,60%,82%,100%{transform:skewX(0deg) translateX(0);}
  65%{transform:skewX(.42deg) translateX(.7px);}
  69%{transform:skewX(-.54deg) translateX(-.9px);}
  73%{transform:skewX(.27deg) translateX(.45px);}
  78%{transform:skewX(-.09deg) translateX(-.15px);}
}
@keyframes inventoryMainRopeWindRight{
  0%,57%,80%,100%{transform:skewX(0deg) translateX(0);}
  62%{transform:skewX(-.45deg) translateX(-.75px);}
  66%{transform:skewX(.56deg) translateX(.9px);}
  70%{transform:skewX(-.29deg) translateX(-.46px);}
  75%{transform:skewX(.10deg) translateX(.16px);}
}

@media(max-width:900px){
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension{width:15px!important;}
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension::before{width:6px!important;}
}
@media(max-width:680px){
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension{width:13px!important;}
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension::before{width:5px!important;}
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension > i{width:13px!important;height:11px!important;}
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension > b{width:19px!important;height:14px!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension{
    animation:none!important;
    transform:none!important;
  }
}

/* Topbar v55 — restore the approved default controls and use topbg.png only
   as the centered natural frame. The header keeps its existing height and all
   child positions; only the outer presentation and page centering change. */
html body .app-shell > .topbar,
html body .topbar{
  width:min(1600px,calc(100vw - 20px))!important;
  max-width:1600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  left:auto!important;
  right:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}

/* Dark forest insert beneath the artwork. It is inset far enough that no
   rectangular edge can escape beyond the organic topbg.png border. */
html body .app-shell > .topbar::after,
html body .topbar::after{
  content:""!important;
  position:absolute!important;
  inset:7px 24px 10px!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(214,180,95,.13)!important;
  border-radius:32px 32px 38px 38px / 20px 20px 30px 30px!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(81,111,76,.13),transparent 31%),
    radial-gradient(circle at 88% 82%,rgba(56,91,61,.10),transparent 29%),
    linear-gradient(180deg,rgba(29,52,35,.985),rgba(18,39,25,.99))!important;
  box-shadow:
    inset 0 1px rgba(247,245,237,.035),
    inset 0 -12px 24px rgba(3,14,7,.18),
    0 8px 22px rgba(2,8,4,.18)!important;
}

/* The supplied artwork is the full natural border and stays centered with the
   complete bar. It does not participate in layout or intercept clicks. */
html body .app-shell > .topbar::before,
html body .topbar::before{
  content:""!important;
  position:absolute!important;
  inset:-7px -13px -12px!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:1!important;
  border:0!important;
  border-radius:0!important;
  background:url('/images/topbg.png') center center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 6px 8px rgba(2,8,4,.30))!important;
}

html body .app-shell > .topbar > *{
  position:relative!important;
  z-index:2!important;
}

/* Keep the original/default physical selector and button styling untouched. */
@media(max-width:1320px){
  html body .app-shell > .topbar,
  html body .topbar{
    width:calc(100vw - 20px)!important;
  }
}

@media(max-width:760px){
  html body .app-shell > .topbar,
  html body .topbar{
    width:calc(100vw - 8px)!important;
  }
  html body .app-shell > .topbar::before,
  html body .topbar::before{
    inset:-4px -5px -7px!important;
  }
  html body .app-shell > .topbar::after,
  html body .topbar::after{
    inset:4px 9px 7px!important;
    border-radius:19px!important;
  }
}



/* Topbar v56 — keep the centered topbg frame while preventing the default
   navigation controls from being compressed or clipped on desktop widths. */
@media (min-width:1101px) and (max-width:1500px){
  html body .app-shell > .topbar,
  html body .topbar{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    column-gap:12px!important;
    padding-left:clamp(34px,3vw,44px)!important;
    padding-right:clamp(34px,3vw,44px)!important;
  }

  html body .topbar > .topbar-ornament{
    display:none!important;
  }

  html body .topbar > .brand,
  html body .topbar > .player-chip{
    min-width:0!important;
  }

  html body .topbar > .nav-cluster{
    min-width:max-content!important;
    width:max-content!important;
    max-width:none!important;
    justify-self:center!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }

  html body .topbar .nav-tabs{
    flex:0 0 auto!important;
    min-width:max-content!important;
    width:max-content!important;
    overflow:visible!important;
  }

  html body .topbar .nav-tabs .nav-tab,
  html body .topbar .nav-cluster > .nav-help-button,
  html body .topbar .nav-cluster > .nav-venue-button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}


/* Topbar v57 — preserve the centered topbg frame and restore the full desktop
   physical selector without allowing labels or controls to be compressed. */
@media (min-width:981px) and (max-width:1500px){
  html body .app-shell > .topbar,
  html body .topbar{
    grid-template-columns:minmax(210px,1fr) max-content minmax(270px,1fr)!important;
    grid-template-rows:1fr!important;
    column-gap:clamp(8px,1vw,14px)!important;
    padding-left:clamp(30px,2.8vw,42px)!important;
    padding-right:clamp(30px,2.8vw,42px)!important;
  }

  html body .topbar > .topbar-ornament{
    display:none!important;
  }

  html body .topbar > .brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    overflow:visible!important;
  }

  html body .topbar > .nav-cluster{
    grid-column:2!important;
    grid-row:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:clamp(5px,.55vw,8px)!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  html body .topbar > .player-chip{
    grid-column:3!important;
    grid-row:1!important;
    min-width:0!important;
    justify-self:end!important;
  }

  html body .topbar .nav-tabs{
    display:inline-flex!important;
    align-items:stretch!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;
    gap:clamp(4px,.45vw,8px)!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:5px!important;
    overflow:visible!important;
  }

  html body .topbar .nav-tabs .nav-tab{
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:clamp(96px,8vw,126px)!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    padding:9px clamp(10px,1vw,18px)!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  html body .topbar .nav-cluster > .nav-venue-button,
  html body .topbar .nav-cluster > .nav-help-button{
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    padding:9px clamp(10px,.9vw,15px)!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  html body .topbar .nav-cluster > .nav-venue-button{
    min-width:clamp(78px,6.4vw,98px)!important;
  }

  html body .topbar .nav-cluster > .nav-help-button{
    min-width:clamp(68px,5.5vw,86px)!important;
  }
}

/* Topbar v58 — keep the approved topbg frame and default physical selector,
   but detach desktop navigation from the grid tracks so none of its five
   controls can be squeezed, clipped or wrapped by the brand/player columns. */
@media (min-width:821px){
  html body .app-shell > .topbar,
  html body .topbar{
    position:sticky!important;
  }

  html body .topbar > .topbar-ornament{
    display:none!important;
  }

  html body .topbar > .nav-cluster{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:5!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-flow:row nowrap!important;
    gap:7px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
    transform:translate(-50%,-50%)!important;
  }

  html body .topbar .nav-tabs{
    position:relative!important;
    display:inline-flex!important;
    align-items:stretch!important;
    flex:0 0 auto!important;
    flex-flow:row nowrap!important;
    gap:8px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    padding:5px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }

  html body .topbar .nav-tabs .nav-tab,
  html body .topbar .nav-cluster > .nav-venue-button,
  html body .topbar .nav-cluster > .nav-help-button{
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  html body .topbar .nav-tabs .nav-tab{
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    padding:9px 12px!important;
  }

  html body .topbar .nav-cluster > .nav-venue-button{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    padding:9px 10px!important;
  }

  html body .topbar .nav-cluster > .nav-help-button:not(.nav-venue-button){
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    padding:9px 9px!important;
  }

  html body .topbar > .brand,
  html body .topbar > .player-chip{
    position:relative!important;
    z-index:3!important;
  }
}

@media (min-width:821px) and (max-width:1120px){
  html body .topbar > .nav-cluster{
    gap:5px!important;
    transform:translate(-50%,-50%) scale(.88)!important;
    transform-origin:center!important;
  }
}


/* Topbar/Fortune Echo v59 — keep the approved centered topbg frame and the
   corrected one-line navigation, restore the right-side player block, bring
   back the forest gradient and frame Fortune Echo with fortuneecho.png. */
html body .app-shell > .topbar::after,
html body .topbar::after{
  background:
    radial-gradient(circle at 14% 18%,rgba(101,137,91,.16),transparent 31%),
    radial-gradient(circle at 86% 76%,rgba(72,111,76,.14),transparent 30%),
    linear-gradient(180deg,rgba(38,64,43,.985) 0%,rgba(27,51,34,.99) 48%,rgba(17,38,24,.995) 100%)!important;
  box-shadow:
    inset 0 1px rgba(247,245,237,.05),
    inset 0 -14px 25px rgba(3,14,7,.20),
    0 8px 22px rgba(2,8,4,.18)!important;
}

@media (min-width:821px){
  /* Navigation stays physically centred, while the complete player/audio
     group is anchored to the right side instead of occupying the same grid
     track behind the buttons. */
  html body .topbar > .player-chip{
    position:absolute!important;
    left:auto!important;
    right:clamp(38px,3.15vw,58px)!important;
    top:50%!important;
    z-index:6!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    transform-origin:right center!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  html body .topbar > .player-chip > *,
  html body .topbar > .player-chip .player-meta,
  html body .topbar > .player-chip .audio-controls{
    flex-shrink:0!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  html body .topbar > .player-chip{
    right:24px!important;
    transform:translateY(-50%) scale(.78)!important;
  }
  html body .topbar > .brand{
    transform:scale(.88)!important;
    transform-origin:left center!important;
  }
}

html body .app-shell > .ticker-wrap,
html body .ticker-wrap{
  position:relative!important;
  z-index:12!important;
  display:flex!important;
  justify-content:center!important;
  padding-top:2px!important;
  margin-top:-1px!important;
}

html body .app-shell > .ticker-wrap > .ticker,
html body .ticker-wrap > .ticker,
html body .ticker{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  min-height:46px!important;
  padding:10px 30px!important;
  border:0!important;
  border-radius:0!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(24,43,29,.48) 6%,
      rgba(32,55,37,.90) 18%,
      rgba(35,61,41,.96) 50%,
      rgba(32,55,37,.90) 82%,
      rgba(24,43,29,.48) 94%,
      transparent 100%)!important;
  box-shadow:
    inset 0 1px rgba(247,245,237,.025),
    inset 0 -8px 18px rgba(3,14,7,.15),
    0 7px 20px rgba(2,8,4,.14)!important;
}

html body .ticker::before{
  content:""!important;
  position:absolute!important;
  inset:-7px -16px -8px!important;
  z-index:1!important;
  pointer-events:none!important;
  border:0!important;
  background:url('/images/fortuneecho.png') center center/100% 100% no-repeat!important;
  filter:drop-shadow(0 4px 5px rgba(2,8,4,.28))!important;
}

html body .ticker > *{
  position:relative!important;
  z-index:2!important;
}

@media (max-width:820px){
  html body .app-shell > .ticker-wrap,
  html body .ticker-wrap{
    padding-top:1px!important;
  }
  html body .ticker::before{
    inset:-4px -6px -5px!important;
  }
}

/* Topbar/Fortune Echo v60 — preserve the approved centred layout while
   refining only the navigation materials, Fortune Echo alignment and brand offset. */

/* Move only the brand group, without affecting navigation or player controls. */
html body .topbar > .brand{
  position:relative!important;
  left:5px!important;
}

/* Fortune Echo: keep the decorative PNG above a clipped inner green surface,
   and vertically centre both text elements inside the frame. */
html body .app-shell > .ticker-wrap > .ticker,
html body .ticker-wrap > .ticker,
html body .ticker{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:46px!important;
  padding:0 30px!important;
  background:transparent!important;
  line-height:1.1!important;
}

html body .ticker::after{
  content:""!important;
  position:absolute!important;
  inset:5px 18px 6px!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:14px!important;
  clip-path:polygon(1.2% 0,98.8% 0,100% 50%,98.8% 100%,1.2% 100%,0 50%)!important;
  background:
    linear-gradient(90deg,
      rgba(19,36,24,.22) 0%,
      rgba(28,50,33,.78) 10%,
      rgba(38,67,44,.96) 28%,
      rgba(41,72,47,.98) 50%,
      rgba(38,67,44,.96) 72%,
      rgba(28,50,33,.78) 90%,
      rgba(19,36,24,.22) 100%)!important;
  box-shadow:
    inset 0 1px rgba(247,245,237,.035),
    inset 0 -8px 16px rgba(3,14,7,.18)!important;
}

html body .ticker > .ticker-label,
html body .ticker > .ticker-message{
  display:inline-flex!important;
  align-items:center!important;
  min-height:20px!important;
  margin:0!important;
  padding:0!important;
  line-height:20px!important;
  transform:translateY(-1px)!important;
}

/* Recessed dark-wood housing for the three-tab physical selector. */
html body .topbar .nav-tabs{
  position:relative!important;
  isolation:isolate!important;
  padding:5px!important;
  gap:8px!important;
  overflow:hidden!important;
  border:1px solid rgba(31,17,8,.82)!important;
  border-radius:9px!important;
  background:
    repeating-linear-gradient(2deg,rgba(216,157,83,.035) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#2d1a0d 0%,#1b0f08 46%,#120a05 100%)!important;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.72),
    inset 0 -1px rgba(169,111,54,.20),
    0 1px rgba(224,183,114,.10)!important;
}

/* The selector is one wooden slider which moves between the three unchanged tabs. */
html body .topbar .nav-tabs::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:5px!important;
  top:5px!important;
  z-index:0!important;
  width:118px!important;
  height:42px!important;
  border:1px solid rgba(120,72,31,.92)!important;
  border-radius:6px!important;
  background:
    radial-gradient(ellipse at 17% 28%,rgba(238,192,115,.18),transparent 24%),
    radial-gradient(ellipse at 78% 72%,rgba(51,24,9,.30),transparent 28%),
    repeating-linear-gradient(2deg,rgba(255,221,155,.10) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#8f5b2d 0%,#69401f 48%,#4b2a13 100%)!important;
  box-shadow:
    inset 0 2px rgba(255,226,168,.16),
    inset 0 -4px 5px rgba(27,12,4,.42),
    0 3px 7px rgba(1,4,2,.38)!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .38s cubic-bezier(.22,.8,.25,1)!important;
}

html body .topbar .nav-tabs.nav-upgrade::before{
  transform:translate3d(126px,0,0)!important;
}

html body .topbar .nav-tabs.nav-open::before{
  transform:translate3d(252px,0,0)!important;
}

html body .topbar .nav-tabs .nav-tab,
html body .topbar .nav-tabs .nav-tab.active{
  position:relative!important;
  z-index:1!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(238,232,213,.78)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.72)!important;
  transition:color .2s ease,text-shadow .2s ease,transform .16s ease!important;
}

html body .topbar .nav-tabs .nav-tab.active{
  color:#fff0c9!important;
  text-shadow:0 1px 1px rgba(43,20,7,.88),0 0 8px rgba(242,198,115,.10)!important;
}

html body .topbar .nav-tabs .nav-tab:hover:not(.active):not(:disabled){
  color:#f2e7c8!important;
  background:rgba(151,99,49,.10)!important;
}

html body .topbar .nav-tabs .nav-tab:active:not(:disabled){
  transform:translateY(1px)!important;
}

/* Venue and Help keep their dimensions and behaviour, with a dark carved-wood skin. */
html body .topbar .nav-cluster > .nav-venue-button,
html body .topbar .nav-cluster > .nav-help-button{
  border-color:rgba(89,52,23,.88)!important;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(224,169,91,.09),transparent 31%),
    repeating-linear-gradient(2deg,rgba(234,187,115,.045) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#49301a 0%,#2d1a0e 50%,#1d1008 100%)!important;
  box-shadow:
    inset 0 1px rgba(239,198,130,.11),
    inset 0 -3px rgba(15,7,3,.42),
    0 4px 8px rgba(1,5,2,.24)!important;
  color:#e9dfc6!important;
  text-shadow:0 1px 1px rgba(0,0,0,.78)!important;
}

html body .topbar .nav-cluster > .nav-venue-button:hover:not(:disabled),
html body .topbar .nav-cluster > .nav-help-button:hover:not(:disabled){
  background:
    radial-gradient(ellipse at 18% 18%,rgba(238,190,111,.13),transparent 31%),
    repeating-linear-gradient(2deg,rgba(244,202,133,.055) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#56391e 0%,#352010 50%,#211208 100%)!important;
}

@media (max-width:820px){
  html body .topbar > .brand{
    left:0!important;
  }
  html body .ticker{
    gap:6px!important;
    padding:0 18px!important;
  }
  html body .ticker::after{
    inset:4px 8px 5px!important;
  }
}

/* Topbar/Fortune Echo v61 — fine alignment and restrained depth refinements. */

/* Move only Fortune Echo's inner green surface and text upward. The outer
   ticker box and fortuneecho.png frame keep their approved positions. */
html body .ticker::after{
  transform:translate3d(0,-10px,0)!important;
}

html body .ticker > .ticker-label,
html body .ticker > .ticker-message{
  transform:translate3d(0,-11px,0)!important;
}

/* Unselected labels look softly carved into the recessed dark wood. */
html body .topbar .nav-tabs .nav-tab:not(.active){
  color:rgba(190,166,126,.66)!important;
  opacity:.90!important;
  filter:saturate(.72) brightness(.88)!important;
  text-shadow:
    0 -1px 0 rgba(3,2,1,.96),
    0 1px 0 rgba(224,184,116,.16),
    0 0 1px rgba(0,0,0,.72)!important;
}

html body .topbar .nav-tabs .nav-tab:not(.active):hover:not(:disabled){
  color:rgba(218,197,160,.78)!important;
  opacity:.96!important;
  filter:saturate(.82) brightness(.96)!important;
  text-shadow:
    0 -1px 0 rgba(3,2,1,.94),
    0 1px 0 rgba(235,198,132,.20),
    0 0 2px rgba(0,0,0,.62)!important;
}

/* Venue and Help are only slightly lighter than v60. */
html body .topbar .nav-cluster > .nav-venue-button,
html body .topbar .nav-cluster > .nav-help-button{
  border-color:rgba(105,65,31,.90)!important;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(235,185,105,.11),transparent 31%),
    repeating-linear-gradient(2deg,rgba(241,196,124,.052) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#55391f 0%,#352112 50%,#22130a 100%)!important;
  color:#f0e7d3!important;
}

html body .topbar .nav-cluster > .nav-venue-button:hover:not(:disabled),
html body .topbar .nav-cluster > .nav-help-button:hover:not(:disabled){
  background:
    radial-gradient(ellipse at 18% 18%,rgba(245,199,120,.15),transparent 31%),
    repeating-linear-gradient(2deg,rgba(248,208,139,.06) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#624326 0%,#3d2715 50%,#28160c 100%)!important;
}

/* Add fake Z-depth between the green insert and the topbg.png artwork without
   changing the bar's dimensions or any child positions. */
html body .app-shell > .topbar,
html body .topbar{
  perspective:900px!important;
}

html body .app-shell > .topbar::after,
html body .topbar::after{
  box-shadow:
    inset 0 2px 1px rgba(248,242,216,.045),
    inset 0 9px 18px rgba(2,11,6,.22),
    inset 0 -15px 24px rgba(1,8,4,.32),
    inset 0 0 0 2px rgba(8,25,13,.32),
    0 8px 22px rgba(2,8,4,.20)!important;
}

html body .app-shell > .topbar::before,
html body .topbar::before{
  filter:
    drop-shadow(0 2px 1px rgba(28,13,5,.72))
    drop-shadow(0 6px 5px rgba(2,8,4,.42))
    drop-shadow(0 12px 14px rgba(1,5,2,.22))!important;
}

/* Slightly strengthen the approved full-site green gradient overlay. */
html::after{
  opacity:.76!important;
}

@media (max-width:820px){
  html body .ticker::after{
    transform:translate3d(0,-6px,0)!important;
  }
  html body .ticker > .ticker-label,
  html body .ticker > .ticker-message{
    transform:translate3d(0,-7px,0)!important;
  }
}

/* History launch plaque v62 — keep the three existing interactive planks and
   mount them on one irregular wooden sign embedded into the History panel. */
html body .history-column > .history-launch-stack{
  position:relative!important;
  z-index:12!important;
  isolation:isolate!important;
  overflow:visible!important;
  margin-bottom:-7px!important;
  filter:drop-shadow(0 10px 12px rgba(1,6,3,.34))!important;
}

/* One broad, dimensional backing board replaces the two long hanging ropes. */
html body .history-column > .history-launch-stack::before{
  content:""!important;
  position:absolute!important;
  top:-10px!important;
  right:-8px!important;
  bottom:-15px!important;
  left:-8px!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  pointer-events:none!important;
  z-index:0!important;
  border:1px solid rgba(42,22,8,.96)!important;
  border-radius:10px 7px 12px 8px!important;
  clip-path:polygon(1.2% 6%,4% 1.5%,21% 0,38% 2.4%,56% .4%,73% 2%,94% .8%,99% 5.5%,100% 24%,98.8% 45%,100% 67%,98.4% 91%,94% 99%,72% 97.2%,55% 100%,34% 97.5%,13% 99%,2.2% 94%,0 73%,1.1% 49%,0 25%)!important;
  background:
    radial-gradient(ellipse 18px 9px at 9% 23%,rgba(35,17,6,.82) 0 28%,rgba(122,75,31,.24) 31% 45%,transparent 48%),
    radial-gradient(ellipse 15px 8px at 88% 72%,rgba(31,14,5,.78) 0 27%,rgba(132,81,35,.22) 30% 45%,transparent 48%),
    radial-gradient(ellipse at 50% -12%,rgba(224,161,83,.18),transparent 48%),
    repeating-linear-gradient(1.8deg,rgba(31,14,5,.38) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(177deg,transparent 0 13px,rgba(229,176,99,.055) 13px 14px,transparent 14px 21px),
    linear-gradient(96deg,#4a2911 0%,#70451f 13%,#4f2d13 29%,#7c4b22 47%,#553116 64%,#70431d 82%,#42230e 100%)!important;
  box-shadow:
    inset 0 3px 1px rgba(245,201,127,.18),
    inset 0 -6px 8px rgba(22,10,3,.56),
    inset 5px 0 8px rgba(255,213,143,.045),
    inset -5px 0 8px rgba(20,9,3,.32),
    0 4px 0 rgba(32,17,6,.80),
    0 11px 18px rgba(1,5,2,.38)!important;
  animation:none!important;
  transform:none!important;
}

/* Two short wooden pegs make the sign look physically driven into the top of
   the History frame instead of suspended from the site header. */
html body .history-column > .history-launch-stack::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-18px!important;
  top:auto!important;
  width:auto!important;
  height:23px!important;
  display:block!important;
  pointer-events:none!important;
  z-index:1!important;
  border:0!important;
  border-radius:0!important;
  background:
    linear-gradient(90deg,#3a1d09 0%,#70431d 38%,#4b2810 72%,#261105 100%) left 21px top/11px 21px no-repeat,
    linear-gradient(90deg,#2b1507 0%,#65401e 40%,#48260f 74%,#211005 100%) right 21px top/11px 21px no-repeat!important;
  filter:drop-shadow(0 3px 2px rgba(15,7,2,.72))!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}

html body .history-column > .history-launch-stack > .history-launch-row{
  z-index:3!important;
  transform-origin:50% 50%!important;
}

/* The planks stay the same size and keep every existing hover/alert/icon
   animation, but sit a little imperfectly on the larger sign. Individual
   rotate/translate properties remain additive with the existing wind
   keyframes, which animate the transform property. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1){
  rotate:-.65deg!important;
  translate:-1px 0!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2){
  rotate:.48deg!important;
  translate:1px -1px!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3){
  rotate:-.34deg!important;
  translate:0 1px!important;
}

/* Replace the old rope loops with small forged nail heads fixing each plank
   to the backing board. */
html body .history-column > .history-launch-stack > .history-launch-row::before,
html body .history-column > .history-launch-stack > .history-launch-row::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  margin-top:-3.5px!important;
  display:block!important;
  box-sizing:border-box!important;
  border:1px solid rgba(31,16,6,.92)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 34% 30%,rgba(244,207,145,.52) 0 10%,transparent 13%),
    radial-gradient(circle at 48% 48%,#7b542d 0 32%,#4a2c14 36% 67%,#211006 72% 100%)!important;
  box-shadow:inset 0 -1px 1px rgba(15,7,2,.66),0 1px 2px rgba(0,0,0,.66)!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
  z-index:6!important;
}
html body .history-column > .history-launch-stack > .history-launch-row::before{left:10px!important;}
html body .history-column > .history-launch-stack > .history-launch-row::after{right:10px!important;}

/* The plaque overlaps the History frame by only a few pixels; its controls and
   title remain untouched and fully clickable. */
html body .history-column > .history-launch-stack + .history-panel{
  margin-top:0!important;
  position:relative!important;
  z-index:4!important;
}

@media(max-width:1100px){
  html body .history-column > .history-launch-stack::before,
  html body .history-column > .history-launch-stack::after{
    display:block!important;
    content:""!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .history-column > .history-launch-stack > .history-launch-row{
    transform:none!important;
  }
}

/* History launch post v63 — replace the full backing plaque with one narrow,
   irregular central trunk so the site background remains visible between the
   three existing planks. */
html body .history-column > .history-launch-stack{
  padding-bottom:14px!important;
  margin-bottom:-7px!important;
  background:transparent!important;
}

html body .history-column > .history-launch-stack::before{
  content:""!important;
  position:absolute!important;
  top:-21px!important;
  bottom:-24px!important;
  left:50%!important;
  right:auto!important;
  width:44px!important;
  height:auto!important;
  display:block!important;
  pointer-events:none!important;
  z-index:0!important;
  border:1px solid rgba(37,18,6,.96)!important;
  border-radius:10px 8px 12px 9px!important;
  clip-path:polygon(
    36% 0,62% 1%,72% 6%,67% 13%,76% 22%,69% 32%,77% 43%,68% 54%,
    75% 66%,67% 77%,73% 89%,64% 98%,54% 100%,38% 97%,31% 90%,
    35% 80%,26% 69%,33% 58%,24% 47%,31% 36%,23% 25%,31% 15%,27% 7%
  )!important;
  background:
    radial-gradient(ellipse 10px 15px at 58% 20%,rgba(26,12,4,.82) 0 26%,rgba(128,78,32,.25) 30% 43%,transparent 48%),
    radial-gradient(ellipse 9px 14px at 43% 67%,rgba(27,13,4,.78) 0 25%,rgba(137,84,35,.22) 29% 43%,transparent 48%),
    repeating-linear-gradient(91deg,rgba(27,12,4,.44) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(89deg,transparent 0 8px,rgba(231,177,96,.055) 8px 9px,transparent 9px 14px),
    linear-gradient(90deg,#2d1607 0%,#5c3515 18%,#79491f 39%,#5a3213 60%,#74431b 79%,#281205 100%)!important;
  box-shadow:
    inset 3px 0 3px rgba(239,190,112,.12),
    inset -5px 0 6px rgba(18,8,2,.52),
    inset 0 3px 2px rgba(248,207,137,.12),
    0 4px 0 rgba(27,13,4,.72),
    0 10px 15px rgba(1,5,2,.36)!important;
  filter:drop-shadow(0 3px 2px rgba(17,7,2,.68))!important;
  animation:none!important;
  transform:translateX(-50%)!important;
}

/* The former pair of lower pegs is removed: the single trunk itself now runs
   into the top of the History panel. */
html body .history-column > .history-launch-stack::after{
  content:none!important;
  display:none!important;
}

/* Lift the three planks while retaining their existing width, hover effects,
   icon animations and independent breeze animation. The preserved layout
   height leaves a visible section of trunk below the final plank. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1){
  rotate:-.65deg!important;
  translate:-1px -12px!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2){
  rotate:.48deg!important;
  translate:1px -13px!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3){
  rotate:-.34deg!important;
  translate:0 -11px!important;
}

@media(max-width:680px){
  html body .history-column > .history-launch-stack{
    padding-bottom:12px!important;
  }
  html body .history-column > .history-launch-stack::before{
    width:40px!important;
    top:-18px!important;
    bottom:-21px!important;
  }
}


/* History launch post v64 — let the History panel cover only the lower base of
   the central trunk while the three interactive planks remain above it. */
html body .history-column > .history-launch-stack{
  z-index:auto!important;
  isolation:auto!important;
  filter:none!important;
}
html body .history-column > .history-launch-stack::before{
  z-index:1!important;
}
html body .history-column > .history-launch-stack > .history-launch-row{
  position:relative!important;
  z-index:6!important;
}
html body .history-column > .history-launch-stack + .history-panel{
  position:relative!important;
  z-index:4!important;
}


/* Inventory ropes / shared forest insert v65 — reposition only the two main
   suspension ropes and give Topbar + Fortune Echo the same restrained,
   lightly crumpled dark-green surface without changing either frame. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 206px)!important;
}
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right{
  left:calc(var(--inventory-main-rope-right-x) - 64px)!important;
  right:auto!important;
}

/* Same green insert used by Fortune Echo, with a very subtle folded
   paper/soft-plastic grain in a slightly darker forest tone. */
html body .app-shell > .topbar::after,
html body .topbar::after{
  background:
    radial-gradient(ellipse 31% 13% at 16% 31%,rgba(5,25,12,.105) 0 13%,transparent 48%),
    radial-gradient(ellipse 27% 11% at 76% 23%,rgba(6,29,14,.09) 0 12%,transparent 49%),
    radial-gradient(ellipse 35% 13% at 54% 82%,rgba(4,23,11,.095) 0 12%,transparent 50%),
    repeating-linear-gradient(128deg,transparent 0 24px,rgba(4,22,10,.036) 25px,transparent 27px),
    repeating-linear-gradient(38deg,rgba(190,213,180,.012) 0 1px,transparent 1px 19px),
    linear-gradient(90deg,
      rgba(19,36,24,.86) 0%,
      rgba(28,50,33,.94) 10%,
      rgba(38,67,44,.985) 28%,
      rgba(41,72,47,.995) 50%,
      rgba(38,67,44,.985) 72%,
      rgba(28,50,33,.94) 90%,
      rgba(19,36,24,.86) 100%)!important;
}

html body .ticker::after{
  background:
    radial-gradient(ellipse 29% 15% at 17% 28%,rgba(5,25,12,.11) 0 13%,transparent 49%),
    radial-gradient(ellipse 25% 13% at 78% 25%,rgba(6,29,14,.095) 0 12%,transparent 50%),
    radial-gradient(ellipse 34% 14% at 51% 82%,rgba(4,23,11,.10) 0 12%,transparent 50%),
    repeating-linear-gradient(128deg,transparent 0 23px,rgba(4,22,10,.04) 24px,transparent 26px),
    repeating-linear-gradient(38deg,rgba(190,213,180,.013) 0 1px,transparent 1px 18px),
    linear-gradient(90deg,
      rgba(19,36,24,.22) 0%,
      rgba(28,50,33,.78) 10%,
      rgba(38,67,44,.96) 28%,
      rgba(41,72,47,.98) 50%,
      rgba(38,67,44,.96) 72%,
      rgba(28,50,33,.78) 90%,
      rgba(19,36,24,.22) 100%)!important;
}


/* Inventory rope correction + clearly shared Topbar/Fortune Echo surface v66. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 606px)!important;
}
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right{
  left:calc(var(--inventory-main-rope-right-x) - 104px)!important;
  right:auto!important;
}

/* Use the exact same forest insert on both components. The broad irregular
   highlights and dark folds create a visible but restrained crumpled
   paper/soft-plastic texture beneath the existing image frames. */
html body .app-shell > .topbar::after,
html body .topbar::after,
html body .ticker::after{
  background:
    radial-gradient(ellipse 30% 12% at 13% 20%,rgba(2,18,8,.22) 0 8%,rgba(15,48,26,.10) 22%,transparent 52%),
    radial-gradient(ellipse 27% 10% at 82% 27%,rgba(3,20,9,.19) 0 9%,rgba(17,51,28,.09) 24%,transparent 53%),
    radial-gradient(ellipse 38% 14% at 53% 84%,rgba(2,17,8,.20) 0 8%,rgba(16,47,25,.09) 23%,transparent 54%),
    linear-gradient(116deg,transparent 0 32%,rgba(3,20,9,.075) 39%,rgba(157,184,146,.018) 43%,transparent 49%),
    linear-gradient(48deg,transparent 0 54%,rgba(2,17,8,.065) 60%,rgba(163,190,152,.016) 64%,transparent 70%),
    repeating-linear-gradient(132deg,transparent 0 29px,rgba(3,20,9,.052) 31px,rgba(179,202,169,.018) 32px,transparent 36px),
    repeating-linear-gradient(37deg,rgba(183,206,174,.014) 0 1px,transparent 1px 17px),
    linear-gradient(90deg,
      rgba(16,33,21,.985) 0%,
      rgba(25,48,31,.99) 10%,
      rgba(36,65,42,.995) 28%,
      rgba(42,75,49,1) 50%,
      rgba(36,65,42,.995) 72%,
      rgba(25,48,31,.99) 90%,
      rgba(16,33,21,.985) 100%)!important;
  background-blend-mode:multiply,multiply,multiply,soft-light,soft-light,soft-light,overlay,normal!important;
}

/* Preserve the individual inset/depth treatment of each component while
   making the new shared insert visibly dimensional. */
html body .app-shell > .topbar::after,
html body .topbar::after{
  box-shadow:
    inset 0 2px 1px rgba(247,242,216,.05),
    inset 0 10px 18px rgba(2,12,6,.24),
    inset 0 -16px 25px rgba(1,8,4,.34),
    inset 0 0 0 2px rgba(6,23,12,.34),
    0 8px 22px rgba(2,8,4,.20)!important;
}
html body .ticker::after{
  box-shadow:
    inset 0 1px rgba(247,245,237,.04),
    inset 0 7px 13px rgba(2,12,6,.18),
    inset 0 -9px 17px rgba(1,8,4,.25),
    inset 0 0 0 1px rgba(7,25,13,.25)!important;
}


/* v69 — restore the last stable topbar/fortune state and keep only the requested rope offsets. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 536px)!important;
}
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right{
  left:calc(var(--inventory-main-rope-right-x) - 194px)!important;
  right:auto!important;
}


/* v72 — preserve the restored stable layout, move only the right Inventory
   suspension rope, and make the shared green crumpled surface visibly present
   without changing pseudo-element stacking or covering either PNG frame. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right{
  left:calc(var(--inventory-main-rope-right-x) - 354px)!important;
  right:auto!important;
}

/* Use the same clearly visible forest gradient and restrained folded-paper /
   soft-plastic grain inside both already-approved frame layers. */
html body .app-shell > .topbar::after,
html body .topbar::after,
html body .ticker::after{
  background:
    radial-gradient(ellipse 42% 18% at 12% 18%,rgba(7,25,13,.24) 0 9%,rgba(72,106,69,.08) 28%,transparent 57%),
    radial-gradient(ellipse 36% 15% at 87% 28%,rgba(5,22,11,.22) 0 8%,rgba(81,116,77,.07) 27%,transparent 58%),
    radial-gradient(ellipse 48% 20% at 54% 88%,rgba(4,19,10,.24) 0 8%,rgba(76,111,72,.08) 29%,transparent 60%),
    linear-gradient(116deg,transparent 0 31%,rgba(5,23,12,.13) 36%,rgba(116,149,108,.055) 40%,transparent 46%),
    linear-gradient(49deg,transparent 0 54%,rgba(4,20,10,.12) 59%,rgba(119,151,111,.05) 63%,transparent 69%),
    repeating-linear-gradient(132deg,transparent 0 25px,rgba(4,21,11,.065) 27px,rgba(132,161,123,.025) 29px,transparent 33px),
    repeating-linear-gradient(38deg,rgba(139,168,130,.022) 0 1px,transparent 1px 18px),
    linear-gradient(90deg,
      rgba(15,32,20,.99) 0%,
      rgba(23,47,30,.995) 10%,
      rgba(35,66,42,1) 29%,
      rgba(43,78,50,1) 50%,
      rgba(35,66,42,1) 71%,
      rgba(23,47,30,.995) 90%,
      rgba(15,32,20,.99) 100%)!important;
  background-blend-mode:multiply,multiply,multiply,soft-light,soft-light,soft-light,overlay,normal!important;
}

/* v76 — use bgshare as a true inner background beneath both decorative PNG
   frames, never as an overlay above the controls/text. Keep all layout fixed. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  top:3px!important;
}
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right{
  left:calc(var(--inventory-main-rope-right-x) - 394px)!important;
  right:auto!important;
}

/* The containers themselves remain transparent. bgshare lives in the existing
   inset surface layer, below topbg.png / fortuneecho.png and below all content. */
html body .app-shell > .topbar,
html body .topbar,
html body .app-shell > .ticker-wrap > .ticker,
html body .ticker-wrap > .ticker,
html body .ticker{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
}

html body .app-shell > .topbar::after,
html body .topbar::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:7px 24px 10px!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  border:1px solid rgba(194,161,91,.10)!important;
  border-radius:32px 32px 38px 38px / 20px 20px 30px 30px!important;
  clip-path:none!important;
  background-color:transparent!important;
  background-image:url('/images/bgshare.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-blend-mode:normal!important;
  transform:none!important;
  filter:none!important;
  box-shadow:
    inset 0 2px 1px rgba(246,235,200,.055),
    inset 0 10px 17px rgba(1,8,4,.27),
    inset 0 -15px 23px rgba(1,6,3,.36),
    inset 0 0 0 2px rgba(5,17,9,.34),
    0 9px 18px rgba(1,5,2,.28)!important;
}

html body .app-shell > .topbar::before,
html body .topbar::before{
  z-index:1!important;
  filter:
    drop-shadow(0 2px 1px rgba(228,205,151,.07))
    drop-shadow(0 8px 7px rgba(1,6,3,.58))
    drop-shadow(0 17px 20px rgba(1,4,2,.32))!important;
}

html body .app-shell > .topbar > *{
  position:relative!important;
  z-index:2!important;
}

html body .ticker::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:5px 18px 6px!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  border:0!important;
  border-radius:14px!important;
  clip-path:polygon(1.2% 0,98.8% 0,100% 50%,98.8% 100%,1.2% 100%,0 50%)!important;
  background-color:transparent!important;
  background-image:url('/images/bgshare.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-blend-mode:normal!important;
  transform:none!important;
  filter:none!important;
  box-shadow:
    inset 0 1px rgba(246,235,200,.05),
    inset 0 7px 12px rgba(1,8,4,.24),
    inset 0 -9px 15px rgba(1,6,3,.32),
    inset 0 0 0 1px rgba(5,17,9,.28),
    0 7px 13px rgba(1,5,2,.25)!important;
}

html body .ticker::before{
  z-index:1!important;
  filter:
    drop-shadow(0 2px 1px rgba(228,205,151,.065))
    drop-shadow(0 7px 6px rgba(1,6,3,.54))
    drop-shadow(0 14px 17px rgba(1,4,2,.29))!important;
}

html body .ticker > *{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:820px){
  html body .app-shell > .topbar::after,
  html body .topbar::after{
    inset:4px 9px 7px!important;
    border-radius:19px!important;
  }
  html body .ticker::after{
    inset:4px 8px 5px!important;
    transform:none!important;
  }
}



/* v77 — restore the stable topbar geometry while applying bgshare.png only
   to the inner surface layer. This keeps all content positions intact and
   prevents the image from affecting layout or covering the decorative frame. */
html body .app-shell > .topbar,
html body .topbar{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

html body .app-shell > .topbar::after,
html body .topbar::after{
  content:""!important;
  position:absolute!important;
  inset:7px 24px 10px!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(194,161,91,.10)!important;
  border-radius:32px 32px 38px 38px / 20px 20px 30px 30px!important;
  background:
    linear-gradient(180deg,rgba(6,17,10,.18),rgba(2,9,5,.28)),
    url('/images/bgshare.png') center center/100% 100% no-repeat!important;
  box-shadow:
    inset 0 2px 1px rgba(247,242,216,.05),
    inset 0 10px 18px rgba(2,12,6,.24),
    inset 0 -16px 25px rgba(1,8,4,.34),
    inset 0 0 0 2px rgba(6,23,12,.34),
    0 8px 22px rgba(2,8,4,.20)!important;
  filter:none!important;
  transform:none!important;
}

html body .app-shell > .topbar::before,
html body .topbar::before{
  content:""!important;
  position:absolute!important;
  inset:-7px -13px -12px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:url('/images/topbg.png') center center/100% 100% no-repeat!important;
}

html body .app-shell > .topbar > *,
html body .topbar > *{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:820px){
  html body .app-shell > .topbar::after,
  html body .topbar::after{
    inset:4px 9px 7px!important;
    border-radius:19px!important;
  }
}



/* v78 — restore the stable topbar layout and apply bgshare.png only to the
   inner surface, beneath the topbg frame and beneath all content. */
html body .app-shell > .topbar,
html body .topbar{
  width:min(1600px,calc(100vw - 20px))!important;
  max-width:1600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  left:auto!important;
  right:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}

@media (min-width:821px){
  html body .topbar{
    grid-template-columns:minmax(210px,1fr) max-content minmax(270px,1fr)!important;
    align-items:center!important;
  }
  html body .topbar > .nav-cluster{
    justify-self:center!important;
    align-self:center!important;
    width:max-content!important;
    margin:0 auto!important;
    z-index:5!important;
  }
  html body .topbar > .player-chip{
    position:absolute!important;
    left:auto!important;
    right:clamp(38px,3.15vw,58px)!important;
    top:50%!important;
    z-index:6!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    transform-origin:right center!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  html body .topbar > .player-chip > *,
  html body .topbar > .player-chip .player-meta,
  html body .topbar > .player-chip .audio-controls{
    flex-shrink:0!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  html body .topbar > .player-chip{
    right:24px!important;
    transform:translateY(-50%) scale(.78)!important;
  }
  html body .topbar > .brand{
    transform:scale(.88)!important;
    transform-origin:left center!important;
  }
}

html body .app-shell > .topbar::after,
html body .topbar::after{
  content:""!important;
  position:absolute!important;
  inset:7px 24px 10px!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(194,161,91,.10)!important;
  border-radius:32px 32px 38px 38px / 20px 20px 30px 30px!important;
  background:url('/images/bgshare.png') center center/100% 100% no-repeat!important;
  box-shadow:
    inset 0 2px 1px rgba(247,242,216,.05),
    inset 0 10px 18px rgba(2,12,6,.24),
    inset 0 -16px 25px rgba(1,8,4,.34),
    inset 0 0 0 2px rgba(6,23,12,.34),
    0 8px 22px rgba(2,8,4,.20)!important;
  filter:none!important;
  transform:none!important;
}

html body .app-shell > .topbar::before,
html body .topbar::before{
  content:""!important;
  position:absolute!important;
  inset:-7px -13px -12px!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:1!important;
  border:0!important;
  border-radius:0!important;
  background:url('/images/topbg.png') center center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 6px 8px rgba(2,8,4,.30))!important;
}

html body .app-shell > .topbar > *,
html body .topbar > *{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:820px){
  html body .app-shell > .topbar::after,
  html body .topbar::after{
    inset:4px 9px 7px!important;
    border-radius:19px!important;
  }
}



/* v79 — restore the known-stable desktop topbar layout exactly, while applying
   bgshare.png only to the inner surface. This removes the later layout drift
   that pushed the player block and changed the apparent bar size. */
@media (min-width:821px){
  html body .app-shell > .topbar,
  html body .topbar{
    position:sticky!important;
  }

  html body .topbar > .topbar-ornament{
    display:none!important;
  }

  html body .topbar > .nav-cluster{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:5!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-flow:row nowrap!important;
    gap:7px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
    transform:translate(-50%,-50%)!important;
  }

  html body .topbar .nav-tabs{
    position:relative!important;
    display:inline-flex!important;
    align-items:stretch!important;
    flex:0 0 auto!important;
    flex-flow:row nowrap!important;
    gap:8px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    padding:5px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }

  html body .topbar .nav-tabs .nav-tab,
  html body .topbar .nav-cluster > .nav-venue-button,
  html body .topbar .nav-cluster > .nav-help-button{
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  html body .topbar .nav-tabs .nav-tab{
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    padding:9px 12px!important;
  }

  html body .topbar .nav-cluster > .nav-venue-button{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    padding:9px 10px!important;
  }

  html body .topbar .nav-cluster > .nav-help-button:not(.nav-venue-button){
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    padding:9px 9px!important;
  }

  html body .topbar > .brand,
  html body .topbar > .player-chip{
    position:relative!important;
    z-index:3!important;
  }

  html body .topbar > .player-chip{
    position:absolute!important;
    left:auto!important;
    right:clamp(38px,3.15vw,58px)!important;
    top:50%!important;
    z-index:6!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    transform-origin:right center!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  html body .topbar > .player-chip > *,
  html body .topbar > .player-chip .player-meta,
  html body .topbar > .player-chip .audio-controls{
    flex-shrink:0!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  html body .topbar > .player-chip{
    right:24px!important;
    transform:translateY(-50%) scale(.78)!important;
  }
  html body .topbar > .brand{
    transform:scale(.88)!important;
    transform-origin:left center!important;
  }
  html body .topbar > .nav-cluster{
    gap:5px!important;
    transform:translate(-50%,-50%) scale(.88)!important;
    transform-origin:center!important;
  }
}

html body .app-shell > .topbar::after,
html body .topbar::after{
  background:url('/images/bgshare.png') center center/100% 100% no-repeat!important;
  box-shadow:
    inset 0 2px 1px rgba(247,242,216,.05),
    inset 0 10px 18px rgba(2,12,6,.24),
    inset 0 -16px 25px rgba(1,8,4,.34),
    inset 0 0 0 2px rgba(6,23,12,.34),
    0 8px 22px rgba(2,8,4,.20)!important;
}



/* v80 — micro alignment tweaks requested by user.
   1) Move every topbar child 2px upward without disturbing the frame.
   2) Make the topbar inner background touch the very top edge.
   3) Move Fortune Echo texts 2px downward without moving its container. */
html body .app-shell > .topbar > *,
html body .topbar > *{
  margin-top:-2px!important;
}

html body .app-shell > .topbar::after,
html body .topbar::after{
  inset:0 24px 10px!important;
}

html body .ticker > .ticker-label,
html body .ticker > .ticker-message{
  position:relative!important;
  top:5px!important;
}

@media(max-width:820px){
  html body .app-shell > .topbar::after,
  html body .topbar::after{
    inset:0 9px 7px!important;
  }
}



/* v81 — additional requested offset for all visible topbar content:
   move content 3px higher and 2px to the right from the current stable state. */
html body .topbar > .brand{
  position:relative!important;
  left:2px!important;
  top:-3px!important;
}

@media (min-width:821px){
  html body .topbar > .nav-cluster{
    transform:translate(calc(-50% + 2px), calc(-50% - 3px))!important;
  }

  html body .topbar > .player-chip{
    transform:translate(2px, calc(-50% - 3px))!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  html body .topbar > .brand{
    transform:translate(2px,-3px) scale(.88)!important;
    transform-origin:left center!important;
    left:0!important;
    top:0!important;
  }

  html body .topbar > .nav-cluster{
    transform:translate(calc(-50% + 2px), calc(-50% - 3px)) scale(.88)!important;
    transform-origin:center!important;
  }

  html body .topbar > .player-chip{
    transform:translate(2px, calc(-50% - 3px)) scale(.78)!important;
    transform-origin:right center!important;
  }
}



/* v83 — keep the stable v81 bar sizing, align both bars with the main content
   panels by shifting their whole block (not by resizing), and unclip the moved
   character artworks on Hall / Upgrade / Inventory. */

/* Shared bar centring with the main content panels: shift the complete topbar
   and Fortune Echo group left on desktop, while preserving the v81 width. */
@media (min-width: 1281px){
  html body .app-shell > .topbar,
  html body .app-shell > .ticker-wrap{
    transform:translateX(-172px)!important;
  }
}
@media (min-width: 821px) and (max-width: 1280px){
  html body .app-shell > .topbar,
  html body .app-shell > .ticker-wrap{
    transform:translateX(-124px)!important;
  }
}

/* Ensure the translated bars keep their stable inner layout. */
html body .app-shell > .ticker-wrap{
  position:relative!important;
}

/* COFFER HALL — move char.png and charcoin.png 5px down and allow overflow. */
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade) img[src*="/images/char.png"],
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade) img[src*="/images/charcoin.png"]{
  position:relative!important;
  top:5px!important;
}
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade),
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade) *:has(> img[src*="/images/char.png"]),
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade) *:has(> img[src*="/images/charcoin.png"]){
  overflow:visible!important;
}

/* UPGRADE — move charupgrade.png and charupgrade2.png 15px down and unclip. */
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-hero-character,
html body .view-upgrade .upgrade-hero-character img{
  overflow:visible!important;
}
html body .view-upgrade .upgrade-hero-character{
  margin-top:15px!important;
}

/* INVENTORY — move charcoin.png and char2.png 15px down and allow overflow. */
html body .view-page.view-vault,
html body .view-page.view-vault .open-stage,
html body .view-page.view-vault .inventory-page,
html body .view-page.view-vault *:has(> img[src*="/images/charcoin.png"]),
html body .view-page.view-vault *:has(> img[src*="/images/char2.png"]){
  overflow:visible!important;
}
html body .view-page.view-vault img[src*="/images/charcoin.png"],
html body .view-page.view-vault img[src*="/images/char2.png"]{
  position:relative!important;
  top:15px!important;
}

@media (max-width: 820px){
  html body .app-shell > .topbar,
  html body .app-shell > .ticker-wrap{
    transform:none!important;
  }
}



/* v84 — move all previously adjusted decorative character images 10px further down. */

/* Coffer Hall totals: 15px down. */
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade) img[src*="/images/char.png"],
html body .app-shell > .main-layout > .content > :not(.view-vault):not(.view-upgrade) img[src*="/images/charcoin.png"]{
  top:15px!important;
}

/* Upgrade totals: 25px down. */
html body .view-upgrade .upgrade-hero-character{
  margin-top:25px!important;
}

/* Inventory totals: 25px down. */
html body .view-page.view-vault img[src*="/images/charcoin.png"],
html body .view-page.view-vault img[src*="/images/char2.png"]{
  top:25px!important;
}



/* v85 — target the actual rendered character containers instead of image-file
   selectors. Apply the requested final vertical offsets and remove clipping. */

/* Coffer Hall: char + charcoin, total 15px below their original position. */
html body .view-page.view-shop .hero-story,
html body .view-page.view-shop .hero-character{
  overflow:visible!important;
}
html body .view-page.view-shop .hero-character{
  translate:0 15px!important;
}

/* Upgrade: charupgrade + charupgrade2, total 25px below their original position. */
html body .view-page.view-upgrade,
html body .view-upgrade .upgrade-page,
html body .view-upgrade .upgrade-hero,
html body .view-upgrade .upgrade-hero-character{
  overflow:visible!important;
}
html body .view-page.view-upgrade{
  contain:style!important;
}
html body .view-upgrade .upgrade-hero-character{
  margin-top:0!important;
  translate:0 25px!important;
}

/* Inventory: char2 + charcoin, total 25px below their original position. */
html body .view-page.view-vault,
html body .view-page.view-vault .inventory-hero,
html body .view-page.view-vault .inventory-hero .hero-character{
  overflow:visible!important;
}
html body .view-page.view-vault .inventory-hero .hero-character{
  translate:0 25px!important;
}



/* v87 — preserve the original independent positioning of every character.
   Apply only the requested extra offsets and raise the existing image stacks,
   without changing any character container from absolute to relative. */

/* Let the existing decorative artwork escape its panels. */
html body .view-page.view-shop .hero-story,
html body .view-page.view-shop .hero-character,
html body .view-page.view-upgrade,
html body .view-page.view-upgrade .upgrade-page,
html body .view-page.view-upgrade .upgrade-hero,
html body .view-page.view-upgrade .upgrade-hero-character,
html body .view-page.view-vault,
html body .view-page.view-vault .inventory-hero,
html body .view-page.view-vault .inventory-hero .hero-character{
  overflow:visible!important;
}

/* Raise the already-positioned character containers without altering their
   position mode, coordinates, dimensions or transforms. */
html body .view-page.view-shop .hero-story,
html body .view-page.view-shop .hero-character,
html body .view-upgrade .upgrade-hero-character,
html body .view-page.view-vault .inventory-hero .hero-character{
  z-index:10050!important;
}

/* Raise only the requested image files inside their original containers. */
html body .view-page.view-shop img[src*="charcoin"],
html body .view-upgrade img[src*="charupgrade"],
html body .view-upgrade img[src*="charcoin"],
html body .view-page.view-vault img[src*="charcoin"]{
  position:relative!important;
  z-index:10051!important;
}

/* Upgrade: charupgrade.png 5px further down. */
html body .view-upgrade img[src*="charupgrade"]:not([src*="charupgrade2"]){
  translate:0 5px!important;
}

/* Upgrade: charupgrade2.png 15px further down. */
html body .view-upgrade img[src*="charupgrade2"]{
  translate:0 15px!important;
}

/* Inventory: its charcoin image 2px further down. */
html body .view-page.view-vault img[src*="charcoin"]{
  translate:0 2px!important;
}

/* Upgrade: its charcoin image 4px further down. */
html body .view-upgrade img[src*="charcoin"]{
  translate:0 4px!important;
}

/* Coffer Hall: its charcoin image 3px further down. */
html body .view-page.view-shop img[src*="charcoin"]{
  translate:0 3px!important;
}



/* v88 — requested fine positioning and restoration of the two-rope History
   launcher. Preserve every other v87 layout and visual adjustment. */

/* Upgrade: charupgrade2.png 3px farther down than v87 (15px -> 18px). */
html body .view-upgrade img[src*="charupgrade2"]{
  translate:0 18px!important;
}

/* Coffer Hall: move only char.png 4px upward inside its existing container. */
html body .view-page.view-shop img[src*="char."]:not([src*="charcoin"]){
  position:relative!important;
  translate:0 -4px!important;
  z-index:10051!important;
}

/* Inventory: move only the left main suspension rope 50px farther left. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 486px)!important;
}

/* Restore the earlier three independent wooden planks joined by two continuous
   ropes. The ropes extend far enough upward to reach the page's top edge. */
html body .history-column > .history-launch-stack{
  position:relative!important;
  z-index:12!important;
  isolation:isolate!important;
  overflow:visible!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 2px!important;
  padding:0!important;
  background:transparent!important;
  filter:drop-shadow(0 8px 10px rgba(2,6,3,.28))!important;
}

html body .history-column > .history-launch-stack::before,
html body .history-column > .history-launch-stack::after{
  content:""!important;
  position:absolute!important;
  top:-100vh!important;
  bottom:auto!important;
  display:block!important;
  width:8px!important;
  height:calc(100vh + 100% - 8px)!important;
  pointer-events:none!important;
  z-index:0!important;
  border:0!important;
  border-radius:999px!important;
  clip-path:none!important;
  background:
    linear-gradient(90deg,rgba(255,240,199,.22),transparent 28% 66%,rgba(40,23,10,.34)),
    repeating-linear-gradient(132deg,
      #d1a36a 0 2px,
      #9b6b39 2px 4px,
      #684522 4px 6px,
      #b98249 6px 8px)!important;
  box-shadow:
    inset 1px 0 rgba(255,238,194,.18),
    inset -1px 0 rgba(41,23,10,.42),
    0 1px 2px rgba(0,0,0,.58),
    0 0 8px rgba(214,180,95,.08)!important;
  filter:none!important;
  transform:none!important;
}
html body .history-column > .history-launch-stack::before{
  left:14px!important;
  right:auto!important;
  animation:historyWindRopeLeft 15.4s ease-in-out 2.1s infinite!important;
  transform-origin:50% 0!important;
}
html body .history-column > .history-launch-stack::after{
  right:14px!important;
  left:auto!important;
  animation:historyWindRopeRight 17.1s ease-in-out 6.2s infinite!important;
  transform-origin:50% 0!important;
}

html body .history-column > .history-launch-stack > .history-launch-row{
  position:relative!important;
  z-index:2!important;
  overflow:visible!important;
  rotate:none!important;
  translate:none!important;
}

/* Rope loops over each plank, reconnecting all three boards to the same pair
   of long ropes instead of the newer nails/central trunk. */
html body .history-column > .history-launch-stack > .history-launch-row::before,
html body .history-column > .history-launch-stack > .history-launch-row::after{
  content:""!important;
  position:absolute!important;
  top:-5px!important;
  width:10px!important;
  height:18px!important;
  display:block!important;
  box-sizing:border-box!important;
  margin:0!important;
  border:3px solid #9b6b3d!important;
  border-top-color:#d0a06a!important;
  border-bottom-color:#5d3b1e!important;
  border-radius:52% 48% 45% 55% / 58% 52% 48% 42%!important;
  background:transparent!important;
  box-shadow:
    inset 1px 0 rgba(255,235,188,.16),
    0 1px 2px rgba(0,0,0,.58),
    0 0 4px rgba(214,180,95,.10)!important;
  pointer-events:none!important;
  z-index:5!important;
  animation:none!important;
}
html body .history-column > .history-launch-stack > .history-launch-row::before{
  left:13px!important;
  right:auto!important;
  transform:rotate(8deg)!important;
}
html body .history-column > .history-launch-stack > .history-launch-row::after{
  right:13px!important;
  left:auto!important;
  transform:rotate(-8deg)!important;
}

html body .history-column > .history-launch-stack + .history-panel{
  margin-top:0!important;
  position:relative!important;
  z-index:4!important;
}

@media(max-width:680px){
  html body .history-column > .history-launch-stack{
    padding:0!important;
  }
}



/* v89 — Inventory left suspension rope, bg4 stage surface, and reordered
   physical selector tabs in the topbar. */

/* Move only the left Inventory rope 40px further to the left. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) - 34px)!important;
}

/* Inventory main container: use bg4.png as the background surface and add
   depth between the surface and the wooden frame, without changing layout. */
html body .view-page.view-vault > .open-stage{
  background-color:transparent!important;
  background-image:
    linear-gradient(180deg,rgba(8,14,10,.14),rgba(2,7,4,.26)),
    url('/images/bg4.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  box-shadow:
    inset 0 2px 0 rgba(255,246,217,.06),
    inset 0 0 0 1px rgba(16,28,18,.35),
    inset 0 14px 22px rgba(255,249,230,.03),
    inset 0 -18px 32px rgba(1,8,4,.33),
    inset 12px 0 22px rgba(1,8,4,.18),
    inset -12px 0 22px rgba(1,8,4,.16),
    0 24px 58px rgba(2,7,4,.27)!important;
}

/* Reorder the physical selector visually to: Upgrade - Coffer Hall - Inventory.
   Home/Coffer Hall remains the default page; only the visual order changes. */
html body .topbar .nav-tabs .nav-tab:nth-child(1){order:2!important;}
html body .topbar .nav-tabs .nav-tab:nth-child(2){order:1!important;}
html body .topbar .nav-tabs .nav-tab:nth-child(3){order:3!important;}

/* The wooden slider positions must match the new visual order. */
html body .topbar .nav-tabs::before{
  transform:translate3d(126px,0,0)!important;
}
html body .topbar .nav-tabs.nav-upgrade::before{
  transform:translate3d(0,0,0)!important;
}
html body .topbar .nav-tabs.nav-open::before{
  transform:translate3d(252px,0,0)!important;
}



/* v90 — correct the Inventory rope delta and show bg4.png without the older
   gradient/overlay layers covering it. */

/* v88 left-rope position was +486px. Move it exactly 40px farther left. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 446px)!important;
}

/* Keep the outer stage transparent. The real visible surface is the dedicated
   inset layer inside the wooden border. */
html body .view-page.view-vault > .open-stage{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Use bg4.png alone as the Inventory carousel-panel background. Depth comes
   only from inset shadows, not colored gradients over the artwork. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  background:transparent url('/images/bg4.png') center center/cover no-repeat!important;
  background-color:transparent!important;
  background-image:url('/images/bg4.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  box-shadow:
    inset 0 2px 1px rgba(255,246,217,.065),
    inset 0 -10px 18px rgba(1,7,3,.28),
    inset 10px 0 18px rgba(1,8,4,.18),
    inset -10px 0 18px rgba(1,8,4,.18),
    inset 0 0 0 2px rgba(8,18,10,.30),
    0 8px 18px rgba(1,7,3,.26)!important;
}

/* Remove the old translucent gradient overlays that were drawn above bg4. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}



/* v91 — move the left Inventory suspension rope 30px further left, keeping all
   other Inventory background changes from v90 intact. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 416px)!important;
}



/* v92 — move the left Inventory suspension rope 30px further left again. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 386px)!important;
}



/* v93 — move the left Inventory suspension rope 15px further left. */
html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left{
  left:calc(var(--inventory-main-rope-left-x) + 371px)!important;
}



/* v94 — move only the entire Inventory lootbox carousel block 5px upward.
   This targets the carousel wrapper itself and leaves the rest of the panel,
   title, buttons and other content unchanged. */
html body .view-page.view-vault .vault-carousel{
  position:relative!important;
  top:-5px!important;
}



/* v95 — move the entire Inventory lootbox carousel 10px further upward.
   Total offset from the original state is now 15px up. */
html body .view-page.view-vault .vault-carousel{
  top:-15px!important;
}



/* v96 — restore the visible Fortune Path progress fill in Inventory.
   The percentage is already supplied inline by React; the inner <i> must be
   a block-level element so that its dynamic width can render. */
html body .view-page.view-vault .carousel-fortune-track{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

html body .view-page.view-vault .carousel-fortune-track > i{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  height:100%!important;
  max-width:100%!important;
  min-width:0!important;
  border-radius:inherit!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--box-glow,#75f3ce) 78%,#ffffff 8%),
    color-mix(in srgb,var(--box-glow,#75f3ce) 45%,#fae686 55%))!important;
  box-shadow:
    0 0 9px color-mix(in srgb,var(--box-glow,#75f3ce) 48%,transparent),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
  transition:width .45s cubic-bezier(.2,.8,.2,1)!important;
}



/* v97 — animated fireflies drifting through the Inventory main container
   background. They live behind the carousel content and frame overlays, with
   varied glow, movement and intermittent fading. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  isolation:isolate!important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  will-change:background-position,transform,opacity,filter!important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before{
  opacity:.88!important;
  filter:blur(.15px) drop-shadow(0 0 5px rgba(255,238,150,.42)) drop-shadow(0 0 10px rgba(182,255,164,.14))!important;
  background-image:
    radial-gradient(circle, rgba(255,250,205,.98) 0 1.3px, rgba(255,238,145,.68) 2.2px, rgba(255,225,120,0) 8px),
    radial-gradient(circle, rgba(255,248,194,.96) 0 1.1px, rgba(255,232,138,.66) 2px, rgba(255,219,100,0) 7px),
    radial-gradient(circle, rgba(246,255,204,.96) 0 1.2px, rgba(217,255,156,.50) 2px, rgba(173,255,123,0) 7px),
    radial-gradient(circle, rgba(255,245,180,.94) 0 1.2px, rgba(255,230,132,.62) 2px, rgba(255,214,92,0) 7px),
    radial-gradient(circle, rgba(247,255,210,.94) 0 1.1px, rgba(209,255,154,.52) 1.9px, rgba(168,255,120,0) 6px),
    radial-gradient(circle, rgba(255,249,208,.96) 0 1.25px, rgba(255,238,148,.60) 2px, rgba(255,224,108,0) 7px),
    radial-gradient(circle, rgba(255,246,188,.92) 0 1.05px, rgba(255,231,136,.55) 1.8px, rgba(255,219,103,0) 6px),
    radial-gradient(circle, rgba(246,255,206,.92) 0 1.05px, rgba(214,255,160,.50) 1.8px, rgba(168,255,118,0) 6px)!important;
  background-position:
    7% 18%, 18% 61%, 31% 37%, 47% 73%, 59% 22%, 73% 56%, 84% 31%, 92% 76%!important;
  animation:
    inventoryFireflyDriftA 24s linear infinite,
    inventoryFireflyGlowA 7.4s ease-in-out infinite!important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  opacity:.72!important;
  filter:blur(.1px) drop-shadow(0 0 4px rgba(255,237,141,.38)) drop-shadow(0 0 8px rgba(170,255,145,.12))!important;
  background-image:
    radial-gradient(circle, rgba(255,250,205,.96) 0 1px, rgba(255,236,146,.56) 1.8px, rgba(255,225,120,0) 6px),
    radial-gradient(circle, rgba(246,255,208,.94) 0 1px, rgba(210,255,158,.46) 1.8px, rgba(168,255,120,0) 6px),
    radial-gradient(circle, rgba(255,245,186,.92) 0 1.05px, rgba(255,229,133,.56) 1.9px, rgba(255,215,101,0) 6px),
    radial-gradient(circle, rgba(248,255,214,.94) 0 1px, rgba(215,255,162,.42) 1.7px, rgba(170,255,126,0) 5.5px),
    radial-gradient(circle, rgba(255,248,197,.95) 0 1.1px, rgba(255,235,145,.57) 1.9px, rgba(255,221,112,0) 6px),
    radial-gradient(circle, rgba(245,255,205,.92) 0 1px, rgba(213,255,156,.45) 1.75px, rgba(165,255,117,0) 5.5px),
    radial-gradient(circle, rgba(255,244,182,.90) 0 1px, rgba(255,228,128,.50) 1.75px, rgba(255,214,96,0) 5.5px)!important;
  background-position:
    11% 83%, 24% 24%, 38% 64%, 52% 16%, 67% 81%, 79% 42%, 90% 58%!important;
  animation:
    inventoryFireflyDriftB 31s linear infinite,
    inventoryFireflyGlowB 9.2s ease-in-out infinite!important;
}

@keyframes inventoryFireflyDriftA{
  0%{
    background-position:7% 18%,18% 61%,31% 37%,47% 73%,59% 22%,73% 56%,84% 31%,92% 76%;
    transform:translate3d(0,0,0);
  }
  20%{
    background-position:14% 11%,11% 70%,36% 30%,54% 64%,65% 30%,68% 46%,89% 24%,87% 67%;
    transform:translate3d(4px,-3px,0);
  }
  40%{
    background-position:21% 20%,17% 78%,42% 44%,61% 55%,56% 40%,74% 35%,82% 35%,79% 57%;
    transform:translate3d(-3px,2px,0);
  }
  60%{
    background-position:16% 32%,24% 69%,50% 33%,52% 46%,48% 29%,80% 44%,73% 47%,84% 45%;
    transform:translate3d(3px,4px,0);
  }
  80%{
    background-position:9% 24%,29% 58%,41% 24%,44% 58%,53% 18%,86% 56%,78% 39%,90% 58%;
    transform:translate3d(-2px,-4px,0);
  }
  100%{
    background-position:7% 18%,18% 61%,31% 37%,47% 73%,59% 22%,73% 56%,84% 31%,92% 76%;
    transform:translate3d(0,0,0);
  }
}

@keyframes inventoryFireflyDriftB{
  0%{
    background-position:11% 83%,24% 24%,38% 64%,52% 16%,67% 81%,79% 42%,90% 58%;
    transform:translate3d(0,0,0);
  }
  16%{
    background-position:18% 73%,20% 31%,43% 56%,58% 24%,62% 71%,73% 33%,84% 65%;
    transform:translate3d(-3px,2px,0);
  }
  33%{
    background-position:9% 62%,28% 38%,49% 67%,63% 13%,72% 60%,81% 47%,91% 48%;
    transform:translate3d(2px,-4px,0);
  }
  50%{
    background-position:16% 54%,34% 28%,40% 78%,55% 22%,78% 71%,70% 56%,83% 39%;
    transform:translate3d(5px,3px,0);
  }
  66%{
    background-position:25% 68%,29% 19%,33% 69%,49% 31%,70% 82%,76% 47%,88% 27%;
    transform:translate3d(-2px,1px,0);
  }
  83%{
    background-position:17% 78%,18% 26%,28% 58%,44% 18%,61% 73%,84% 35%,94% 46%;
    transform:translate3d(3px,-2px,0);
  }
  100%{
    background-position:11% 83%,24% 24%,38% 64%,52% 16%,67% 81%,79% 42%,90% 58%;
    transform:translate3d(0,0,0);
  }
}

@keyframes inventoryFireflyGlowA{
  0%,100%{opacity:.42;filter:blur(.15px) drop-shadow(0 0 3px rgba(255,236,146,.30)) drop-shadow(0 0 7px rgba(178,255,154,.10));}
  12%{opacity:.9;filter:blur(.15px) drop-shadow(0 0 7px rgba(255,240,156,.55)) drop-shadow(0 0 12px rgba(188,255,164,.18));}
  28%{opacity:.58;}
  44%{opacity:.84;filter:blur(.1px) drop-shadow(0 0 6px rgba(255,238,152,.48)) drop-shadow(0 0 12px rgba(178,255,154,.14));}
  59%{opacity:.35;}
  76%{opacity:.95;filter:blur(.15px) drop-shadow(0 0 8px rgba(255,243,163,.60)) drop-shadow(0 0 15px rgba(196,255,170,.20));}
  88%{opacity:.52;}
}

@keyframes inventoryFireflyGlowB{
  0%,100%{opacity:.28;filter:blur(.1px) drop-shadow(0 0 2px rgba(255,233,138,.22)) drop-shadow(0 0 6px rgba(170,255,145,.08));}
  10%{opacity:.65;}
  22%{opacity:.86;filter:blur(.1px) drop-shadow(0 0 6px rgba(255,236,146,.45)) drop-shadow(0 0 10px rgba(172,255,148,.15));}
  37%{opacity:.32;}
  55%{opacity:.78;filter:blur(.1px) drop-shadow(0 0 5px rgba(255,238,149,.38)) drop-shadow(0 0 9px rgba(176,255,154,.12));}
  73%{opacity:.25;}
  87%{opacity:.72;filter:blur(.1px) drop-shadow(0 0 6px rgba(255,242,162,.44)) drop-shadow(0 0 10px rgba(189,255,166,.16));}
}



/* v98 — rebuild the Inventory fireflies on the open-stage itself so they are
   clearly visible above the bg4 background and below the carousel content. */

/* Disable the less visible first attempt on the stage-surface pseudo elements. */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:none!important;
  display:none!important;
}

html body .view-page.view-vault > .open-stage{
  isolation:isolate!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after{
  content:""!important;
  position:absolute!important;
  inset:14px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:15px!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  will-change:background-position,transform,opacity,filter!important;
}

html body .view-page.view-vault > .open-stage::before{
  opacity:.9!important;
  filter:drop-shadow(0 0 4px rgba(255,236,143,.55)) drop-shadow(0 0 10px rgba(199,255,153,.18))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,202,.98) 0 1.8px, rgba(255,231,120,.86) 2.8px, rgba(255,215,85,.34) 4px, rgba(255,215,85,0) 9px),
    radial-gradient(circle, rgba(248,255,206,.97) 0 1.6px, rgba(213,255,145,.72) 2.6px, rgba(182,255,131,.26) 3.8px, rgba(182,255,131,0) 8px),
    radial-gradient(circle, rgba(255,249,210,.98) 0 1.7px, rgba(255,234,130,.82) 2.8px, rgba(255,222,101,.28) 4px, rgba(255,222,101,0) 8px),
    radial-gradient(circle, rgba(248,255,208,.97) 0 1.5px, rgba(214,255,150,.68) 2.4px, rgba(184,255,132,.24) 3.6px, rgba(184,255,132,0) 7px),
    radial-gradient(circle, rgba(255,246,192,.96) 0 1.65px, rgba(255,228,122,.78) 2.7px, rgba(255,214,96,.25) 3.8px, rgba(255,214,96,0) 8px),
    radial-gradient(circle, rgba(255,250,210,.97) 0 1.6px, rgba(255,236,142,.82) 2.7px, rgba(255,225,110,.26) 3.8px, rgba(255,225,110,0) 8px)!important;
  background-position:8% 22%, 21% 64%, 39% 36%, 58% 73%, 76% 30%, 90% 58%!important;
  animation:inventoryFirefliesLayerA 23s linear infinite, inventoryFirefliesPulseA 6.3s ease-in-out infinite!important;
}

html body .view-page.view-vault > .open-stage::after{
  opacity:.78!important;
  filter:drop-shadow(0 0 3px rgba(255,236,145,.42)) drop-shadow(0 0 8px rgba(186,255,143,.14))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,203,.96) 0 1.45px, rgba(255,232,126,.74) 2.4px, rgba(255,220,96,.24) 3.5px, rgba(255,220,96,0) 7px),
    radial-gradient(circle, rgba(248,255,208,.95) 0 1.35px, rgba(214,255,148,.64) 2.2px, rgba(184,255,133,.22) 3.2px, rgba(184,255,133,0) 6.5px),
    radial-gradient(circle, rgba(255,250,212,.96) 0 1.5px, rgba(255,236,142,.72) 2.4px, rgba(255,224,107,.22) 3.4px, rgba(255,224,107,0) 7px),
    radial-gradient(circle, rgba(246,255,206,.94) 0 1.25px, rgba(212,255,146,.58) 2.1px, rgba(180,255,129,.18) 3px, rgba(180,255,129,0) 6px),
    radial-gradient(circle, rgba(255,246,190,.94) 0 1.35px, rgba(255,229,124,.68) 2.2px, rgba(255,216,94,.20) 3.2px, rgba(255,216,94,0) 6px),
    radial-gradient(circle, rgba(255,248,204,.95) 0 1.4px, rgba(255,234,136,.72) 2.3px, rgba(255,221,104,.20) 3.3px, rgba(255,221,104,0) 6px),
    radial-gradient(circle, rgba(246,255,208,.93) 0 1.2px, rgba(213,255,148,.56) 2px, rgba(181,255,130,.18) 2.8px, rgba(181,255,130,0) 5.7px)!important;
  background-position:12% 82%, 26% 18%, 34% 58%, 52% 16%, 66% 82%, 82% 42%, 92% 70%!important;
  animation:inventoryFirefliesLayerB 31s linear infinite, inventoryFirefliesPulseB 8.4s ease-in-out infinite!important;
}

@keyframes inventoryFirefliesLayerA{
  0%{background-position:8% 22%,21% 64%,39% 36%,58% 73%,76% 30%,90% 58%; transform:translate3d(0,0,0)}
  20%{background-position:14% 14%,16% 72%,46% 28%,64% 62%,70% 40%,84% 48%; transform:translate3d(4px,-2px,0)}
  40%{background-position:20% 26%,26% 78%,51% 40%,56% 53%,63% 26%,77% 39%; transform:translate3d(-3px,3px,0)}
  60%{background-position:15% 37%,32% 66%,44% 22%,48% 44%,72% 18%,86% 51%; transform:translate3d(3px,4px,0)}
  80%{background-position:9% 28%,25% 54%,36% 30%,52% 59%,79% 26%,92% 64%; transform:translate3d(-2px,-3px,0)}
  100%{background-position:8% 22%,21% 64%,39% 36%,58% 73%,76% 30%,90% 58%; transform:translate3d(0,0,0)}
}

@keyframes inventoryFirefliesLayerB{
  0%{background-position:12% 82%,26% 18%,34% 58%,52% 16%,66% 82%,82% 42%,92% 70%; transform:translate3d(0,0,0)}
  17%{background-position:18% 72%,20% 29%,40% 67%,57% 24%,61% 70%,75% 33%,87% 61%; transform:translate3d(-2px,2px,0)}
  33%{background-position:10% 60%,29% 35%,46% 77%,63% 12%,72% 60%,83% 47%,95% 49%; transform:translate3d(3px,-3px,0)}
  50%{background-position:16% 52%,35% 24%,39% 67%,54% 22%,78% 72%,72% 56%,84% 38%; transform:translate3d(5px,2px,0)}
  67%{background-position:25% 66%,31% 16%,32% 58%,48% 30%,71% 81%,79% 47%,89% 28%; transform:translate3d(-1px,2px,0)}
  83%{background-position:16% 78%,19% 24%,28% 50%,43% 18%,62% 72%,86% 34%,96% 43%; transform:translate3d(2px,-2px,0)}
  100%{background-position:12% 82%,26% 18%,34% 58%,52% 16%,66% 82%,82% 42%,92% 70%; transform:translate3d(0,0,0)}
}

@keyframes inventoryFirefliesPulseA{
  0%,100%{opacity:.38;filter:drop-shadow(0 0 2px rgba(255,235,144,.26)) drop-shadow(0 0 6px rgba(190,255,148,.10));}
  15%{opacity:.92;filter:drop-shadow(0 0 6px rgba(255,240,156,.62)) drop-shadow(0 0 13px rgba(200,255,160,.22));}
  30%{opacity:.54;}
  45%{opacity:.86;filter:drop-shadow(0 0 5px rgba(255,239,150,.52)) drop-shadow(0 0 11px rgba(190,255,148,.18));}
  60%{opacity:.32;}
  75%{opacity:.98;filter:drop-shadow(0 0 7px rgba(255,242,165,.68)) drop-shadow(0 0 15px rgba(204,255,168,.24));}
  90%{opacity:.48;}
}

@keyframes inventoryFirefliesPulseB{
  0%,100%{opacity:.24;filter:drop-shadow(0 0 2px rgba(255,233,138,.18)) drop-shadow(0 0 5px rgba(178,255,140,.08));}
  12%{opacity:.56;}
  25%{opacity:.82;filter:drop-shadow(0 0 5px rgba(255,237,147,.44)) drop-shadow(0 0 9px rgba(186,255,146,.14));}
  40%{opacity:.30;}
  56%{opacity:.74;filter:drop-shadow(0 0 4px rgba(255,238,149,.36)) drop-shadow(0 0 8px rgba(184,255,144,.12));}
  72%{opacity:.22;}
  88%{opacity:.68;filter:drop-shadow(0 0 5px rgba(255,241,160,.42)) drop-shadow(0 0 9px rgba(194,255,156,.15));}
}



/* v99 — make the Inventory firefly motion unmistakably active.
   Each layer now uses one combined animation, avoiding competing animation
   shorthands while moving every light independently through background-position. */
html body .view-page.view-vault > .open-stage::before{
  animation-name:inventoryFirefliesFlightA!important;
  animation-duration:9.5s!important;
  animation-timing-function:cubic-bezier(.45,.02,.55,.98)!important;
  animation-delay:-2.1s!important;
  animation-iteration-count:infinite!important;
  animation-direction:alternate!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
}

html body .view-page.view-vault > .open-stage::after{
  animation-name:inventoryFirefliesFlightB!important;
  animation-duration:13.7s!important;
  animation-timing-function:cubic-bezier(.36,.08,.64,.94)!important;
  animation-delay:-6.4s!important;
  animation-iteration-count:infinite!important;
  animation-direction:alternate-reverse!important;
  animation-fill-mode:both!important;
  animation-play-state:running!important;
}

@keyframes inventoryFirefliesFlightA{
  0%{
    opacity:.34;
    transform:translate3d(-12px,8px,0) rotate(-.35deg) scale(.995);
    background-position:5% 28%,16% 70%,34% 44%,53% 79%,70% 36%,94% 64%;
    filter:drop-shadow(0 0 2px rgba(255,235,144,.28)) drop-shadow(0 0 6px rgba(190,255,148,.10));
  }
  14%{
    opacity:.96;
    transform:translate3d(15px,-12px,0) rotate(.3deg) scale(1.01);
    background-position:18% 12%,9% 83%,47% 25%,66% 60%,58% 52%,82% 37%;
    filter:drop-shadow(0 0 7px rgba(255,242,162,.70)) drop-shadow(0 0 15px rgba(204,255,168,.24));
  }
  29%{
    opacity:.48;
    transform:translate3d(29px,6px,0) rotate(.7deg) scale(1.005);
    background-position:28% 31%,24% 58%,57% 49%,76% 42%,48% 20%,71% 74%;
    filter:drop-shadow(0 0 3px rgba(255,236,145,.34)) drop-shadow(0 0 8px rgba(186,255,146,.12));
  }
  43%{
    opacity:.87;
    transform:translate3d(8px,22px,0) rotate(.15deg) scale(1.015);
    background-position:21% 48%,38% 78%,45% 14%,61% 31%,82% 18%,91% 48%;
    filter:drop-shadow(0 0 6px rgba(255,240,155,.58)) drop-shadow(0 0 13px rgba(198,255,162,.20));
  }
  58%{
    opacity:.27;
    transform:translate3d(-18px,15px,0) rotate(-.55deg) scale(.99);
    background-position:8% 61%,49% 67%,27% 28%,42% 53%,91% 39%,76% 22%;
    filter:drop-shadow(0 0 2px rgba(255,232,137,.20)) drop-shadow(0 0 5px rgba(180,255,142,.07));
  }
  73%{
    opacity:.99;
    transform:translate3d(-31px,-7px,0) rotate(-.9deg) scale(1.012);
    background-position:3% 39%,36% 42%,19% 72%,32% 24%,78% 64%,96% 82%;
    filter:drop-shadow(0 0 8px rgba(255,244,170,.76)) drop-shadow(0 0 17px rgba(210,255,174,.27));
  }
  87%{
    opacity:.52;
    transform:translate3d(-4px,-20px,0) rotate(-.2deg) scale(1);
    background-position:13% 17%,28% 27%,51% 63%,46% 83%,67% 29%,86% 55%;
    filter:drop-shadow(0 0 4px rgba(255,237,149,.40)) drop-shadow(0 0 9px rgba(190,255,149,.14));
  }
  100%{
    opacity:.82;
    transform:translate3d(18px,-3px,0) rotate(.45deg) scale(1.008);
    background-position:24% 24%,12% 54%,63% 35%,58% 69%,88% 47%,74% 14%;
    filter:drop-shadow(0 0 6px rgba(255,241,160,.60)) drop-shadow(0 0 13px rgba(201,255,165,.21));
  }
}

@keyframes inventoryFirefliesFlightB{
  0%{
    opacity:.22;
    transform:translate3d(18px,-10px,0) rotate(.5deg) scale(1.004);
    background-position:8% 88%,31% 13%,28% 65%,58% 9%,72% 87%,87% 36%,97% 74%;
    filter:drop-shadow(0 0 2px rgba(255,231,135,.18)) drop-shadow(0 0 5px rgba(176,255,139,.07));
  }
  17%{
    opacity:.72;
    transform:translate3d(-8px,-24px,0) rotate(-.1deg) scale(1.013);
    background-position:22% 72%,19% 34%,43% 82%,69% 21%,59% 68%,76% 52%,84% 58%;
    filter:drop-shadow(0 0 5px rgba(255,238,151,.46)) drop-shadow(0 0 10px rgba(190,255,151,.15));
  }
  34%{
    opacity:.91;
    transform:translate3d(-27px,3px,0) rotate(-.75deg) scale(1.018);
    background-position:34% 54%,8% 47%,55% 68%,78% 32%,46% 83%,65% 29%,93% 43%;
    filter:drop-shadow(0 0 7px rgba(255,243,166,.65)) drop-shadow(0 0 14px rgba(204,255,168,.23));
  }
  51%{
    opacity:.31;
    transform:translate3d(-12px,25px,0) rotate(-.25deg) scale(.992);
    background-position:19% 39%,41% 65%,37% 92%,61% 47%,83% 72%,89% 18%,73% 61%;
    filter:drop-shadow(0 0 2px rgba(255,232,138,.21)) drop-shadow(0 0 6px rgba(180,255,142,.08));
  }
  68%{
    opacity:.83;
    transform:translate3d(16px,18px,0) rotate(.6deg) scale(1.01);
    background-position:7% 63%,52% 78%,24% 48%,48% 22%,91% 53%,70% 74%,82% 29%;
    filter:drop-shadow(0 0 6px rgba(255,240,158,.57)) drop-shadow(0 0 12px rgba(198,255,161,.19));
  }
  84%{
    opacity:.39;
    transform:translate3d(31px,-2px,0) rotate(.95deg) scale(.998);
    background-position:15% 80%,38% 22%,12% 70%,35% 14%,75% 91%,95% 46%,68% 39%;
    filter:drop-shadow(0 0 3px rgba(255,235,145,.31)) drop-shadow(0 0 7px rgba(185,255,145,.11));
  }
  100%{
    opacity:.76;
    transform:translate3d(7px,-18px,0) rotate(.2deg) scale(1.014);
    background-position:29% 66%,23% 9%,49% 55%,72% 18%,54% 76%,80% 31%,99% 62%;
    filter:drop-shadow(0 0 5px rgba(255,239,153,.52)) drop-shadow(0 0 11px rgba(194,255,156,.17));
  }
}

@media(prefers-reduced-motion:reduce){
  html body .view-page.view-vault > .open-stage::before{
    animation:inventoryFirefliesFlightA 12s cubic-bezier(.45,.02,.55,.98) -2.1s infinite alternate both!important;
    animation-play-state:running!important;
  }
  html body .view-page.view-vault > .open-stage::after{
    animation:inventoryFirefliesFlightB 17s cubic-bezier(.36,.08,.64,.94) -6.4s infinite alternate-reverse both!important;
    animation-play-state:running!important;
  }
}



/* v100 — richer, more natural fireflies for the Inventory main container.
   Uses 4 independent animated layers with distinct paths, timings, delays,
   glow pulses and directions so they do not move together. */

html body .view-page.view-vault > .open-stage{
  isolation:isolate!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  isolation:isolate!important;
}

/* Layer 1 */
html body .view-page.view-vault > .open-stage::before{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:15px!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  opacity:.92!important;
  filter:drop-shadow(0 0 4px rgba(255,237,144,.56)) drop-shadow(0 0 10px rgba(188,255,142,.18))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,204,.98) 0 1.8px, rgba(255,231,124,.82) 2.8px, rgba(255,215,85,.28) 4.2px, rgba(255,215,85,0) 8.8px),
    radial-gradient(circle, rgba(248,255,208,.97) 0 1.6px, rgba(214,255,148,.68) 2.6px, rgba(184,255,132,.22) 3.9px, rgba(184,255,132,0) 8px),
    radial-gradient(circle, rgba(255,250,210,.98) 0 1.7px, rgba(255,234,132,.79) 2.7px, rgba(255,221,100,.24) 4px, rgba(255,221,100,0) 8.2px),
    radial-gradient(circle, rgba(247,255,205,.97) 0 1.45px, rgba(212,255,144,.62) 2.35px, rgba(180,255,127,.18) 3.6px, rgba(180,255,127,0) 7px),
    radial-gradient(circle, rgba(255,246,196,.96) 0 1.55px, rgba(255,228,120,.74) 2.45px, rgba(255,214,92,.22) 3.7px, rgba(255,214,92,0) 7.6px),
    radial-gradient(circle, rgba(248,255,208,.95) 0 1.4px, rgba(214,255,146,.60) 2.2px, rgba(182,255,130,.18) 3.3px, rgba(182,255,130,0) 6.8px),
    radial-gradient(circle, rgba(255,248,204,.97) 0 1.6px, rgba(255,233,132,.76) 2.5px, rgba(255,219,101,.22) 3.8px, rgba(255,219,101,0) 7.7px),
    radial-gradient(circle, rgba(247,255,206,.94) 0 1.35px, rgba(211,255,144,.56) 2.1px, rgba(180,255,126,.16) 3.1px, rgba(180,255,126,0) 6.4px)!important;
  background-position:6% 18%, 15% 68%, 28% 34%, 41% 79%, 57% 21%, 72% 57%, 84% 27%, 93% 74%!important;
  animation:inventoryFirefliesPathA 19s linear -2.2s infinite, inventoryFirefliesPulseA 5.1s ease-in-out -1.4s infinite!important;
}

/* Layer 2 */
html body .view-page.view-vault > .open-stage::after{
  content:""!important;
  position:absolute!important;
  inset:14px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:15px!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  opacity:.76!important;
  filter:drop-shadow(0 0 3px rgba(255,236,142,.42)) drop-shadow(0 0 8px rgba(179,255,140,.14))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,202,.95) 0 1.45px, rgba(255,231,122,.70) 2.3px, rgba(255,217,90,.20) 3.4px, rgba(255,217,90,0) 6.8px),
    radial-gradient(circle, rgba(247,255,208,.94) 0 1.35px, rgba(212,255,146,.58) 2.15px, rgba(182,255,130,.18) 3.2px, rgba(182,255,130,0) 6.4px),
    radial-gradient(circle, rgba(255,249,210,.95) 0 1.5px, rgba(255,235,140,.72) 2.35px, rgba(255,221,106,.21) 3.5px, rgba(255,221,106,0) 7px),
    radial-gradient(circle, rgba(246,255,204,.92) 0 1.25px, rgba(210,255,144,.54) 2.0px, rgba(179,255,128,.16) 3px, rgba(179,255,128,0) 6px),
    radial-gradient(circle, rgba(255,246,194,.94) 0 1.35px, rgba(255,229,126,.68) 2.2px, rgba(255,215,94,.20) 3.2px, rgba(255,215,94,0) 6.4px),
    radial-gradient(circle, rgba(248,255,207,.93) 0 1.25px, rgba(214,255,146,.56) 2.0px, rgba(183,255,129,.16) 3px, rgba(183,255,129,0) 6px),
    radial-gradient(circle, rgba(255,248,206,.94) 0 1.4px, rgba(255,233,134,.70) 2.2px, rgba(255,220,103,.20) 3.3px, rgba(255,220,103,0) 6.5px),
    radial-gradient(circle, rgba(247,255,205,.92) 0 1.2px, rgba(211,255,143,.50) 1.9px, rgba(179,255,127,.14) 2.8px, rgba(179,255,127,0) 5.8px)!important;
  background-position:12% 82%, 21% 24%, 36% 61%, 49% 18%, 66% 81%, 79% 41%, 88% 63%, 95% 35%!important;
  animation:inventoryFirefliesPathB 27s linear -4.7s infinite, inventoryFirefliesPulseB 7.2s ease-in-out -2.8s infinite!important;
}

/* Layer 3 */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  opacity:.68!important;
  filter:drop-shadow(0 0 3px rgba(255,237,144,.38)) drop-shadow(0 0 7px rgba(181,255,142,.11))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.94) 0 1.35px, rgba(255,232,126,.70) 2.1px, rgba(255,218,92,.18) 3.2px, rgba(255,218,92,0) 6.3px),
    radial-gradient(circle, rgba(246,255,205,.93) 0 1.2px, rgba(211,255,144,.56) 1.95px, rgba(180,255,127,.16) 2.9px, rgba(180,255,127,0) 5.8px),
    radial-gradient(circle, rgba(255,249,209,.95) 0 1.4px, rgba(255,235,140,.70) 2.2px, rgba(255,221,105,.18) 3.3px, rgba(255,221,105,0) 6.6px),
    radial-gradient(circle, rgba(247,255,206,.92) 0 1.15px, rgba(212,255,145,.52) 1.85px, rgba(181,255,129,.14) 2.7px, rgba(181,255,129,0) 5.5px),
    radial-gradient(circle, rgba(255,246,196,.92) 0 1.25px, rgba(255,229,126,.64) 2px, rgba(255,216,95,.16) 3px, rgba(255,216,95,0) 6px),
    radial-gradient(circle, rgba(248,255,206,.92) 0 1.2px, rgba(214,255,146,.54) 1.9px, rgba(183,255,129,.14) 2.8px, rgba(183,255,129,0) 5.7px),
    radial-gradient(circle, rgba(255,248,206,.93) 0 1.3px, rgba(255,233,134,.66) 2.05px, rgba(255,220,102,.17) 3.1px, rgba(255,220,102,0) 6.1px)!important;
  background-position:9% 48%, 19% 12%, 35% 76%, 51% 30%, 69% 54%, 82% 19%, 91% 71%!important;
  animation:inventoryFirefliesPathC 22s linear -6.1s infinite, inventoryFirefliesPulseC 6.4s ease-in-out -3.6s infinite!important;
}

/* Layer 4 */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  opacity:.58!important;
  filter:drop-shadow(0 0 2px rgba(255,235,142,.34)) drop-shadow(0 0 6px rgba(176,255,140,.10))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,203,.92) 0 1.15px, rgba(255,232,125,.64) 1.9px, rgba(255,217,91,.16) 2.9px, rgba(255,217,91,0) 5.9px),
    radial-gradient(circle, rgba(246,255,206,.90) 0 1.05px, rgba(211,255,144,.50) 1.75px, rgba(180,255,127,.14) 2.6px, rgba(180,255,127,0) 5.2px),
    radial-gradient(circle, rgba(255,248,209,.92) 0 1.2px, rgba(255,234,136,.66) 1.95px, rgba(255,221,104,.16) 3px, rgba(255,221,104,0) 6px),
    radial-gradient(circle, rgba(247,255,205,.88) 0 1px, rgba(212,255,144,.46) 1.65px, rgba(181,255,129,.12) 2.45px, rgba(181,255,129,0) 4.9px),
    radial-gradient(circle, rgba(255,246,194,.90) 0 1.08px, rgba(255,229,125,.60) 1.75px, rgba(255,215,94,.15) 2.7px, rgba(255,215,94,0) 5.4px),
    radial-gradient(circle, rgba(248,255,206,.89) 0 1.02px, rgba(214,255,146,.48) 1.68px, rgba(183,255,129,.12) 2.5px, rgba(183,255,129,0) 5px),
    radial-gradient(circle, rgba(255,248,205,.90) 0 1.1px, rgba(255,233,132,.62) 1.82px, rgba(255,220,101,.15) 2.8px, rgba(255,220,101,0) 5.6px)!important;
  background-position:5% 74%, 24% 42%, 38% 13%, 57% 67%, 71% 28%, 85% 84%, 94% 47%!important;
  animation:inventoryFirefliesPathD 31s linear -9.2s infinite, inventoryFirefliesPulseD 8.9s ease-in-out -4.8s infinite!important;
}

@keyframes inventoryFirefliesPathA{
  0%{background-position:6% 18%,15% 68%,28% 34%,41% 79%,57% 21%,72% 57%,84% 27%,93% 74%;transform:translate3d(0,0,0)}
  20%{background-position:12% 11%,10% 76%,34% 27%,49% 69%,63% 29%,67% 47%,89% 21%,88% 63%;transform:translate3d(4px,-3px,0)}
  40%{background-position:18% 22%,18% 83%,40% 40%,55% 58%,52% 39%,74% 36%,81% 34%,80% 53%;transform:translate3d(-2px,3px,0)}
  60%{background-position:14% 35%,27% 72%,47% 30%,47% 47%,45% 27%,80% 45%,74% 46%,86% 43%;transform:translate3d(3px,4px,0)}
  80%{background-position:8% 28%,31% 59%,39% 23%,39% 61%,51% 17%,86% 57%,79% 39%,92% 57%;transform:translate3d(-3px,-2px,0)}
  100%{background-position:6% 18%,15% 68%,28% 34%,41% 79%,57% 21%,72% 57%,84% 27%,93% 74%;transform:translate3d(0,0,0)}
}
@keyframes inventoryFirefliesPathB{
  0%{background-position:12% 82%,21% 24%,36% 61%,49% 18%,66% 81%,79% 41%,88% 63%,95% 35%;transform:translate3d(0,0,0)}
  18%{background-position:18% 72%,16% 33%,42% 52%,56% 26%,61% 70%,73% 31%,82% 72%,90% 25%;transform:translate3d(-2px,2px,0)}
  36%{background-position:9% 60%,24% 41%,48% 66%,62% 13%,71% 59%,82% 46%,92% 53%,84% 41%;transform:translate3d(3px,-4px,0)}
  56%{background-position:16% 52%,32% 29%,39% 78%,54% 22%,78% 71%,70% 55%,84% 40%,97% 53%;transform:translate3d(5px,2px,0)}
  78%{background-position:24% 67%,28% 18%,31% 68%,46% 30%,70% 82%,78% 47%,88% 27%,90% 47%;transform:translate3d(-1px,3px,0)}
  100%{background-position:12% 82%,21% 24%,36% 61%,49% 18%,66% 81%,79% 41%,88% 63%,95% 35%;transform:translate3d(0,0,0)}
}
@keyframes inventoryFirefliesPathC{
  0%{background-position:9% 48%,19% 12%,35% 76%,51% 30%,69% 54%,82% 19%,91% 71%;transform:translate3d(0,0,0)}
  25%{background-position:14% 39%,25% 19%,42% 66%,57% 37%,61% 45%,76% 29%,86% 61%;transform:translate3d(2px,-2px,0)}
  50%{background-position:8% 59%,31% 10%,29% 58%,48% 22%,73% 63%,69% 18%,92% 52%;transform:translate3d(-3px,3px,0)}
  75%{background-position:17% 68%,23% 24%,38% 70%,42% 34%,64% 48%,81% 26%,84% 78%;transform:translate3d(3px,2px,0)}
  100%{background-position:9% 48%,19% 12%,35% 76%,51% 30%,69% 54%,82% 19%,91% 71%;transform:translate3d(0,0,0)}
}
@keyframes inventoryFirefliesPathD{
  0%{background-position:5% 74%,24% 42%,38% 13%,57% 67%,71% 28%,85% 84%,94% 47%;transform:translate3d(0,0,0)}
  20%{background-position:11% 66%,19% 33%,31% 22%,64% 57%,66% 36%,79% 73%,88% 39%;transform:translate3d(2px,2px,0)}
  40%{background-position:7% 55%,29% 46%,44% 11%,56% 78%,74% 20%,89% 65%,97% 55%;transform:translate3d(-2px,-3px,0)}
  60%{background-position:14% 63%,34% 36%,36% 19%,49% 61%,68% 33%,81% 79%,90% 42%;transform:translate3d(4px,2px,0)}
  80%{background-position:9% 80%,22% 50%,28% 8%,60% 70%,76% 26%,86% 88%,95% 51%;transform:translate3d(-1px,3px,0)}
  100%{background-position:5% 74%,24% 42%,38% 13%,57% 67%,71% 28%,85% 84%,94% 47%;transform:translate3d(0,0,0)}
}

@keyframes inventoryFirefliesPulseA{0%,100%{opacity:.35}15%{opacity:.96}30%{opacity:.56}48%{opacity:.84}67%{opacity:.28}82%{opacity:.92}}
@keyframes inventoryFirefliesPulseB{0%,100%{opacity:.20}12%{opacity:.62}29%{opacity:.88}41%{opacity:.34}58%{opacity:.74}75%{opacity:.24}91%{opacity:.80}}
@keyframes inventoryFirefliesPulseC{0%,100%{opacity:.24}18%{opacity:.70}35%{opacity:.31}52%{opacity:.79}69%{opacity:.22}86%{opacity:.66}}
@keyframes inventoryFirefliesPulseD{0%,100%{opacity:.16}14%{opacity:.52}33%{opacity:.21}50%{opacity:.64}72%{opacity:.18}89%{opacity:.48}}



/* v101 — stronger Inventory fireflies: many more lights, four independent
   motion layers, different trajectories, speeds, timing offsets and pulsing.
   This intentionally overrides the earlier attempts that looked static. */
html body .view-page.view-vault > .open-stage{
  isolation:isolate!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  isolation:isolate!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  will-change:transform,background-position,opacity,filter!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after{
  inset:12px!important;
  border-radius:15px!important;
  z-index:1!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  inset:0!important;
  border-radius:inherit!important;
  z-index:0!important;
}

html body .view-page.view-vault > .open-stage::before{
  opacity:.78!important;
  filter:drop-shadow(0 0 3px rgba(255,237,142,.40)) drop-shadow(0 0 9px rgba(180,255,140,.14))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,204,.98) 0 1.9px, rgba(255,233,126,.82) 2.9px, rgba(255,216,88,.28) 4.1px, rgba(255,216,88,0) 8.9px),
    radial-gradient(circle, rgba(247,255,208,.96) 0 1.7px, rgba(212,255,147,.70) 2.6px, rgba(181,255,130,.22) 3.8px, rgba(181,255,130,0) 8px),
    radial-gradient(circle, rgba(255,249,210,.96) 0 1.6px, rgba(255,235,138,.74) 2.5px, rgba(255,222,105,.23) 3.8px, rgba(255,222,105,0) 7.8px),
    radial-gradient(circle, rgba(246,255,204,.95) 0 1.5px, rgba(210,255,144,.62) 2.3px, rgba(179,255,128,.18) 3.4px, rgba(179,255,128,0) 7px),
    radial-gradient(circle, rgba(255,246,194,.94) 0 1.45px, rgba(255,229,124,.66) 2.25px, rgba(255,215,93,.20) 3.4px, rgba(255,215,93,0) 7px),
    radial-gradient(circle, rgba(248,255,208,.95) 0 1.55px, rgba(214,255,147,.64) 2.35px, rgba(182,255,129,.18) 3.4px, rgba(182,255,129,0) 7px),
    radial-gradient(circle, rgba(255,248,206,.95) 0 1.55px, rgba(255,233,134,.68) 2.35px, rgba(255,220,101,.20) 3.4px, rgba(255,220,101,0) 7px),
    radial-gradient(circle, rgba(247,255,205,.92) 0 1.35px, rgba(211,255,143,.56) 2.05px, rgba(179,255,127,.16) 3px, rgba(179,255,127,0) 6px),
    radial-gradient(circle, rgba(255,248,202,.94) 0 1.4px, rgba(255,232,128,.64) 2.1px, rgba(255,218,94,.18) 3.1px, rgba(255,218,94,0) 6.2px)!important;
  background-position:4% 14%, 12% 59%, 24% 33%, 38% 82%, 52% 19%, 67% 53%, 79% 29%, 88% 76%, 95% 44%!important;
  animation:inventoryFirefliesA 18s linear -2.7s infinite!important;
}

html body .view-page.view-vault > .open-stage::after{
  opacity:.62!important;
  filter:drop-shadow(0 0 2px rgba(255,236,142,.34)) drop-shadow(0 0 7px rgba(176,255,138,.11))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,204,.95) 0 1.55px, rgba(255,233,126,.74) 2.45px, rgba(255,216,88,.20) 3.5px, rgba(255,216,88,0) 7px),
    radial-gradient(circle, rgba(247,255,208,.94) 0 1.35px, rgba(212,255,147,.58) 2.1px, rgba(181,255,130,.16) 3px, rgba(181,255,130,0) 6px),
    radial-gradient(circle, rgba(255,249,210,.94) 0 1.45px, rgba(255,235,138,.68) 2.2px, rgba(255,222,105,.18) 3.2px, rgba(255,222,105,0) 6.4px),
    radial-gradient(circle, rgba(246,255,204,.92) 0 1.25px, rgba(210,255,144,.54) 1.95px, rgba(179,255,128,.14) 2.8px, rgba(179,255,128,0) 5.6px),
    radial-gradient(circle, rgba(255,246,194,.92) 0 1.2px, rgba(255,229,124,.58) 1.9px, rgba(255,215,93,.15) 2.8px, rgba(255,215,93,0) 5.7px),
    radial-gradient(circle, rgba(248,255,208,.92) 0 1.25px, rgba(214,255,147,.54) 1.95px, rgba(182,255,129,.14) 2.8px, rgba(182,255,129,0) 5.7px),
    radial-gradient(circle, rgba(255,248,206,.92) 0 1.3px, rgba(255,233,134,.60) 2px, rgba(255,220,101,.15) 2.9px, rgba(255,220,101,0) 5.8px),
    radial-gradient(circle, rgba(247,255,205,.90) 0 1.15px, rgba(211,255,143,.50) 1.8px, rgba(179,255,127,.12) 2.6px, rgba(179,255,127,0) 5.2px),
    radial-gradient(circle, rgba(255,248,202,.90) 0 1.2px, rgba(255,232,128,.56) 1.85px, rgba(255,218,94,.14) 2.7px, rgba(255,218,94,0) 5.4px)!important;
  background-position:9% 84%, 18% 22%, 31% 63%, 46% 16%, 61% 81%, 75% 41%, 83% 68%, 91% 31%, 97% 56%!important;
  animation:inventoryFirefliesB 26s linear -7.1s infinite!important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before{
  opacity:.54!important;
  filter:drop-shadow(0 0 2px rgba(255,237,142,.30)) drop-shadow(0 0 5px rgba(176,255,138,.08))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,204,.92) 0 1.25px, rgba(255,233,126,.62) 1.95px, rgba(255,216,88,.16) 2.9px, rgba(255,216,88,0) 5.8px),
    radial-gradient(circle, rgba(247,255,208,.90) 0 1.05px, rgba(212,255,147,.48) 1.7px, rgba(181,255,130,.12) 2.5px, rgba(181,255,130,0) 5px),
    radial-gradient(circle, rgba(255,249,210,.92) 0 1.15px, rgba(255,235,138,.58) 1.85px, rgba(255,222,105,.14) 2.7px, rgba(255,222,105,0) 5.4px),
    radial-gradient(circle, rgba(246,255,204,.90) 0 1px, rgba(210,255,144,.44) 1.6px, rgba(179,255,128,.11) 2.35px, rgba(179,255,128,0) 4.7px),
    radial-gradient(circle, rgba(255,246,194,.89) 0 1px, rgba(255,229,124,.48) 1.62px, rgba(255,215,93,.12) 2.35px, rgba(255,215,93,0) 4.8px),
    radial-gradient(circle, rgba(248,255,208,.90) 0 1.05px, rgba(214,255,147,.44) 1.65px, rgba(182,255,129,.11) 2.4px, rgba(182,255,129,0) 4.8px),
    radial-gradient(circle, rgba(255,248,206,.90) 0 1.08px, rgba(255,233,134,.50) 1.7px, rgba(255,220,101,.12) 2.45px, rgba(255,220,101,0) 4.9px),
    radial-gradient(circle, rgba(247,255,205,.88) 0 .95px, rgba(211,255,143,.42) 1.5px, rgba(179,255,127,.10) 2.15px, rgba(179,255,127,0) 4.3px),
    radial-gradient(circle, rgba(255,248,202,.88) 0 .95px, rgba(255,232,128,.46) 1.55px, rgba(255,218,94,.11) 2.2px, rgba(255,218,94,0) 4.5px)!important;
  background-position:7% 47%, 18% 9%, 29% 77%, 42% 27%, 58% 57%, 69% 17%, 82% 73%, 90% 36%, 96% 62%!important;
  animation:inventoryFirefliesC 21s linear -5.4s infinite!important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  opacity:.44!important;
  filter:drop-shadow(0 0 1px rgba(255,236,142,.22)) drop-shadow(0 0 4px rgba(173,255,137,.07))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,204,.88) 0 1.05px, rgba(255,233,126,.52) 1.65px, rgba(255,216,88,.12) 2.4px, rgba(255,216,88,0) 4.9px),
    radial-gradient(circle, rgba(247,255,208,.86) 0 .95px, rgba(212,255,147,.40) 1.5px, rgba(181,255,130,.10) 2.15px, rgba(181,255,130,0) 4.4px),
    radial-gradient(circle, rgba(255,249,210,.88) 0 1px, rgba(255,235,138,.48) 1.6px, rgba(255,222,105,.11) 2.3px, rgba(255,222,105,0) 4.7px),
    radial-gradient(circle, rgba(246,255,204,.86) 0 .9px, rgba(210,255,144,.38) 1.4px, rgba(179,255,128,.09) 2px, rgba(179,255,128,0) 4.1px),
    radial-gradient(circle, rgba(255,246,194,.85) 0 .9px, rgba(255,229,124,.42) 1.42px, rgba(255,215,93,.10) 2.05px, rgba(255,215,93,0) 4.2px),
    radial-gradient(circle, rgba(248,255,208,.86) 0 .94px, rgba(214,255,147,.38) 1.45px, rgba(182,255,129,.09) 2.05px, rgba(182,255,129,0) 4.2px),
    radial-gradient(circle, rgba(255,248,206,.86) 0 .96px, rgba(255,233,134,.44) 1.5px, rgba(255,220,101,.10) 2.1px, rgba(255,220,101,0) 4.3px),
    radial-gradient(circle, rgba(247,255,205,.84) 0 .85px, rgba(211,255,143,.36) 1.32px, rgba(179,255,127,.08) 1.9px, rgba(179,255,127,0) 3.9px),
    radial-gradient(circle, rgba(255,248,202,.84) 0 .86px, rgba(255,232,128,.38) 1.36px, rgba(255,218,94,.09) 1.95px, rgba(255,218,94,0) 4px)!important;
  background-position:4% 71%, 16% 39%, 27% 11%, 47% 66%, 59% 25%, 74% 83%, 84% 47%, 93% 22%, 98% 58%!important;
  animation:inventoryFirefliesD 29s linear -10.6s infinite!important;
}

@keyframes inventoryFirefliesA{
  0%{opacity:.30;transform:translate3d(-8px,6px,0) rotate(-.4deg);background-position:4% 14%,12% 59%,24% 33%,38% 82%,52% 19%,67% 53%,79% 29%,88% 76%,95% 44%;}
  18%{opacity:.92;transform:translate3d(16px,-11px,0) rotate(.35deg);background-position:13% 8%,7% 71%,31% 24%,46% 71%,59% 29%,61% 43%,85% 20%,82% 64%,89% 33%;}
  34%{opacity:.46;transform:translate3d(28px,5px,0) rotate(.8deg);background-position:20% 19%,18% 80%,39% 39%,53% 58%,46% 38%,69% 35%,76% 33%,74% 54%,96% 57%;}
  52%{opacity:.83;transform:translate3d(10px,14px,0) rotate(.2deg);background-position:15% 34%,28% 67%,48% 29%,44% 47%,40% 25%,78% 44%,71% 46%,81% 42%,91% 72%;}
  70%{opacity:.27;transform:translate3d(-15px,-3px,0) rotate(-.6deg);background-position:7% 26%,34% 53%,36% 21%,36% 60%,49% 16%,86% 58%,80% 38%,90% 58%,85% 34%;}
  86%{opacity:.88;transform:translate3d(6px,-14px,0) rotate(.45deg);background-position:11% 11%,25% 62%,30% 44%,50% 73%,63% 22%,74% 51%,88% 29%,84% 67%,97% 48%;}
  100%{opacity:.30;transform:translate3d(-8px,6px,0) rotate(-.4deg);background-position:4% 14%,12% 59%,24% 33%,38% 82%,52% 19%,67% 53%,79% 29%,88% 76%,95% 44%;}
}
@keyframes inventoryFirefliesB{
  0%{opacity:.18;transform:translate3d(0,0,0) rotate(.15deg);background-position:9% 84%,18% 22%,31% 63%,46% 16%,61% 81%,75% 41%,83% 68%,91% 31%,97% 56%;}
  16%{opacity:.58;transform:translate3d(-10px,9px,0) rotate(-.35deg);background-position:15% 74%,12% 31%,37% 54%,53% 24%,56% 70%,69% 31%,77% 77%,85% 24%,91% 47%;}
  33%{opacity:.82;transform:translate3d(14px,-12px,0) rotate(.5deg);background-position:7% 61%,21% 39%,44% 67%,59% 11%,66% 59%,78% 46%,88% 58%,96% 41%,84% 64%;}
  49%{opacity:.26;transform:translate3d(19px,5px,0) rotate(.9deg);background-position:14% 51%,31% 27%,35% 78%,50% 21%,73% 71%,66% 55%,81% 39%,98% 54%,90% 29%;}
  67%{opacity:.72;transform:translate3d(-7px,15px,0) rotate(-.25deg);background-position:23% 67%,27% 16%,27% 68%,43% 29%,65% 82%,74% 47%,85% 27%,89% 46%,94% 73%;}
  84%{opacity:.34;transform:translate3d(-15px,-7px,0) rotate(-.6deg);background-position:12% 79%,17% 24%,34% 49%,38% 18%,58% 71%,83% 34%,93% 43%,95% 20%,88% 61%;}
  100%{opacity:.18;transform:translate3d(0,0,0) rotate(.15deg);background-position:9% 84%,18% 22%,31% 63%,46% 16%,61% 81%,75% 41%,83% 68%,91% 31%,97% 56%;}
}
@keyframes inventoryFirefliesC{
  0%{opacity:.20;transform:translate3d(0,0,0) rotate(-.1deg);background-position:7% 47%,18% 9%,29% 77%,42% 27%,58% 57%,69% 17%,82% 73%,90% 36%,96% 62%;}
  20%{opacity:.62;transform:translate3d(9px,-6px,0) rotate(.25deg);background-position:13% 38%,24% 18%,36% 67%,48% 35%,50% 46%,63% 28%,77% 63%,84% 46%,90% 54%;}
  40%{opacity:.28;transform:translate3d(-12px,10px,0) rotate(-.45deg);background-position:6% 58%,29% 8%,23% 58%,40% 20%,66% 65%,56% 17%,89% 53%,94% 30%,98% 74%;}
  60%{opacity:.70;transform:translate3d(11px,8px,0) rotate(.35deg);background-position:16% 67%,21% 24%,32% 70%,34% 32%,57% 48%,68% 26%,81% 79%,86% 44%,92% 57%;}
  80%{opacity:.24;transform:translate3d(-8px,-10px,0) rotate(-.2deg);background-position:9% 51%,15% 13%,41% 74%,49% 25%,63% 58%,75% 13%,84% 67%,89% 39%,95% 66%;}
  100%{opacity:.20;transform:translate3d(0,0,0) rotate(-.1deg);background-position:7% 47%,18% 9%,29% 77%,42% 27%,58% 57%,69% 17%,82% 73%,90% 36%,96% 62%;}
}
@keyframes inventoryFirefliesD{
  0%{opacity:.14;transform:translate3d(0,0,0) rotate(.2deg);background-position:4% 71%,16% 39%,27% 11%,47% 66%,59% 25%,74% 83%,84% 47%,93% 22%,98% 58%;}
  17%{opacity:.48;transform:translate3d(8px,7px,0) rotate(.45deg);background-position:10% 64%,11% 31%,20% 20%,54% 56%,54% 34%,68% 72%,78% 39%,87% 16%,92% 49%;}
  36%{opacity:.22;transform:translate3d(-9px,-11px,0) rotate(-.5deg);background-position:6% 52%,22% 46%,33% 10%,46% 77%,62% 18%,78% 64%,88% 54%,96% 31%,84% 62%;}
  55%{opacity:.58;transform:translate3d(14px,6px,0) rotate(.3deg);background-position:13% 61%,28% 35%,25% 18%,39% 60%,56% 31%,71% 78%,81% 41%,90% 26%,95% 45%;}
  77%{opacity:.18;transform:translate3d(-6px,13px,0) rotate(-.35deg);background-position:8% 79%,18% 49%,17% 8%,50% 69%,65% 24%,76% 88%,86% 49%,94% 19%,99% 56%;}
  100%{opacity:.14;transform:translate3d(0,0,0) rotate(.2deg);background-position:4% 71%,16% 39%,27% 11%,47% 66%,59% 25%,74% 83%,84% 47%,93% 22%,98% 58%;}
}



/* v102 — redesigned Inventory fireflies so the motion feels genuinely varied.
   Four independent layers, each with many lights, each layer following a
   different timing/direction pattern. Inside each layer, every firefly gets
   its own background-position path instead of the whole swarm drifting as one. */

html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  isolation:isolate!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  will-change:background-position,opacity,filter!important;
  transform:none!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after{
  inset:12px!important;
  z-index:1!important;
  border-radius:15px!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
}

/* Layer A */
html body .view-page.view-vault > .open-stage::before{
  opacity:.74!important;
  filter:drop-shadow(0 0 3px rgba(255,236,140,.36)) drop-shadow(0 0 8px rgba(180,255,140,.12))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.98) 0 1.8px, rgba(255,231,123,.82) 2.7px, rgba(255,215,86,.26) 4px, rgba(255,215,86,0) 8.3px),
    radial-gradient(circle, rgba(246,255,205,.96) 0 1.6px, rgba(212,255,146,.68) 2.45px, rgba(181,255,129,.22) 3.7px, rgba(181,255,129,0) 7.7px),
    radial-gradient(circle, rgba(255,249,210,.96) 0 1.55px, rgba(255,235,138,.72) 2.4px, rgba(255,222,105,.22) 3.7px, rgba(255,222,105,0) 7.7px),
    radial-gradient(circle, rgba(247,255,206,.95) 0 1.35px, rgba(212,255,145,.58) 2.1px, rgba(180,255,128,.18) 3.2px, rgba(180,255,128,0) 6.8px),
    radial-gradient(circle, rgba(255,246,194,.94) 0 1.45px, rgba(255,229,124,.66) 2.2px, rgba(255,215,94,.20) 3.3px, rgba(255,215,94,0) 6.8px),
    radial-gradient(circle, rgba(248,255,207,.95) 0 1.4px, rgba(214,255,146,.58) 2.15px, rgba(182,255,129,.18) 3.2px, rgba(182,255,129,0) 6.8px),
    radial-gradient(circle, rgba(255,248,206,.95) 0 1.45px, rgba(255,233,133,.68) 2.2px, rgba(255,220,101,.18) 3.3px, rgba(255,220,101,0) 6.9px),
    radial-gradient(circle, rgba(247,255,205,.92) 0 1.25px, rgba(211,255,143,.52) 1.95px, rgba(180,255,127,.15) 2.9px, rgba(180,255,127,0) 6px),
    radial-gradient(circle, rgba(255,248,202,.93) 0 1.3px, rgba(255,232,128,.58) 2px, rgba(255,218,95,.15) 3px, rgba(255,218,95,0) 6.2px),
    radial-gradient(circle, rgba(248,255,208,.92) 0 1.2px, rgba(214,255,147,.50) 1.85px, rgba(182,255,129,.14) 2.8px, rgba(182,255,129,0) 5.8px)!important;
  background-position:4% 12%, 14% 67%, 24% 38%, 37% 78%, 49% 20%, 63% 57%, 77% 29%, 85% 73%, 93% 45%, 97% 17%!important;
  animation:inventoryFireflyLayerA 16s linear -2.3s infinite, inventoryFireflyLayerAFade 5.8s ease-in-out -1.1s infinite!important;
}

/* Layer B */
html body .view-page.view-vault > .open-stage::after{
  opacity:.58!important;
  filter:drop-shadow(0 0 2px rgba(255,236,141,.30)) drop-shadow(0 0 6px rgba(176,255,138,.10))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.95) 0 1.55px, rgba(255,231,123,.70) 2.35px, rgba(255,215,86,.20) 3.5px, rgba(255,215,86,0) 7.1px),
    radial-gradient(circle, rgba(246,255,205,.94) 0 1.35px, rgba(212,255,146,.56) 2.05px, rgba(181,255,129,.17) 3.05px, rgba(181,255,129,0) 6.1px),
    radial-gradient(circle, rgba(255,249,210,.94) 0 1.35px, rgba(255,235,138,.62) 2.1px, rgba(255,222,105,.18) 3.15px, rgba(255,222,105,0) 6.2px),
    radial-gradient(circle, rgba(247,255,206,.92) 0 1.2px, rgba(212,255,145,.48) 1.85px, rgba(180,255,128,.14) 2.75px, rgba(180,255,128,0) 5.6px),
    radial-gradient(circle, rgba(255,246,194,.91) 0 1.2px, rgba(255,229,124,.54) 1.9px, rgba(255,215,94,.14) 2.8px, rgba(255,215,94,0) 5.8px),
    radial-gradient(circle, rgba(248,255,207,.92) 0 1.15px, rgba(214,255,146,.50) 1.8px, rgba(182,255,129,.14) 2.7px, rgba(182,255,129,0) 5.6px),
    radial-gradient(circle, rgba(255,248,206,.92) 0 1.2px, rgba(255,233,133,.58) 1.9px, rgba(255,220,101,.14) 2.8px, rgba(255,220,101,0) 5.7px),
    radial-gradient(circle, rgba(247,255,205,.89) 0 1.05px, rgba(211,255,143,.44) 1.65px, rgba(180,255,127,.12) 2.4px, rgba(180,255,127,0) 4.9px),
    radial-gradient(circle, rgba(255,248,202,.90) 0 1.08px, rgba(255,232,128,.48) 1.7px, rgba(255,218,95,.12) 2.45px, rgba(255,218,95,0) 5px),
    radial-gradient(circle, rgba(248,255,208,.89) 0 1px, rgba(214,255,147,.42) 1.55px, rgba(182,255,129,.11) 2.25px, rgba(182,255,129,0) 4.6px)!important;
  background-position:7% 82%, 18% 26%, 28% 61%, 41% 15%, 55% 81%, 69% 39%, 81% 67%, 90% 34%, 95% 58%, 99% 20%!important;
  animation:inventoryFireflyLayerB 23s linear -6.7s infinite, inventoryFireflyLayerBFade 7.4s ease-in-out -3.8s infinite!important;
}

/* Layer C */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before{
  opacity:.42!important;
  filter:drop-shadow(0 0 2px rgba(255,236,141,.24)) drop-shadow(0 0 5px rgba(176,255,138,.08))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.90) 0 1.18px, rgba(255,231,123,.56) 1.78px, rgba(255,215,86,.15) 2.65px, rgba(255,215,86,0) 5.3px),
    radial-gradient(circle, rgba(246,255,205,.88) 0 1.02px, rgba(212,255,146,.44) 1.56px, rgba(181,255,129,.12) 2.28px, rgba(181,255,129,0) 4.65px),
    radial-gradient(circle, rgba(255,249,210,.88) 0 1.05px, rgba(255,235,138,.48) 1.62px, rgba(255,222,105,.12) 2.35px, rgba(255,222,105,0) 4.72px),
    radial-gradient(circle, rgba(247,255,206,.86) 0 .95px, rgba(212,255,145,.38) 1.45px, rgba(180,255,128,.10) 2.1px, rgba(180,255,128,0) 4.3px),
    radial-gradient(circle, rgba(255,246,194,.85) 0 .95px, rgba(255,229,124,.42) 1.46px, rgba(255,215,94,.10) 2.12px, rgba(255,215,94,0) 4.35px),
    radial-gradient(circle, rgba(248,255,207,.86) 0 .94px, rgba(214,255,146,.38) 1.44px, rgba(182,255,129,.10) 2.1px, rgba(182,255,129,0) 4.3px),
    radial-gradient(circle, rgba(255,248,206,.86) 0 .98px, rgba(255,233,133,.44) 1.5px, rgba(255,220,101,.10) 2.18px, rgba(255,220,101,0) 4.45px),
    radial-gradient(circle, rgba(247,255,205,.84) 0 .86px, rgba(211,255,143,.34) 1.3px, rgba(180,255,127,.08) 1.92px, rgba(180,255,127,0) 3.95px),
    radial-gradient(circle, rgba(255,248,202,.84) 0 .88px, rgba(255,232,128,.38) 1.34px, rgba(255,218,95,.08) 1.98px, rgba(255,218,95,0) 4.05px),
    radial-gradient(circle, rgba(248,255,208,.83) 0 .82px, rgba(214,255,147,.30) 1.2px, rgba(182,255,129,.07) 1.78px, rgba(182,255,129,0) 3.65px)!important;
  background-position:6% 44%, 17% 11%, 27% 76%, 39% 28%, 52% 55%, 66% 17%, 79% 73%, 88% 41%, 94% 63%, 98% 24%!important;
  animation:inventoryFireflyLayerC 19s linear -5.2s infinite, inventoryFireflyLayerCFade 6.9s ease-in-out -2.1s infinite!important;
}

/* Layer D */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  opacity:.31!important;
  filter:drop-shadow(0 0 1px rgba(255,236,141,.20)) drop-shadow(0 0 4px rgba(176,255,138,.06))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.84) 0 .98px, rgba(255,231,123,.42) 1.46px, rgba(255,215,86,.10) 2.1px, rgba(255,215,86,0) 4.3px),
    radial-gradient(circle, rgba(246,255,205,.82) 0 .86px, rgba(212,255,146,.32) 1.26px, rgba(181,255,129,.08) 1.86px, rgba(181,255,129,0) 3.8px),
    radial-gradient(circle, rgba(255,249,210,.82) 0 .88px, rgba(255,235,138,.36) 1.3px, rgba(255,222,105,.08) 1.92px, rgba(255,222,105,0) 3.9px),
    radial-gradient(circle, rgba(247,255,206,.80) 0 .8px, rgba(212,255,145,.28) 1.15px, rgba(180,255,128,.07) 1.68px, rgba(180,255,128,0) 3.45px),
    radial-gradient(circle, rgba(255,246,194,.80) 0 .8px, rgba(255,229,124,.30) 1.16px, rgba(255,215,94,.07) 1.7px, rgba(255,215,94,0) 3.5px),
    radial-gradient(circle, rgba(248,255,207,.80) 0 .78px, rgba(214,255,146,.28) 1.12px, rgba(182,255,129,.07) 1.65px, rgba(182,255,129,0) 3.4px),
    radial-gradient(circle, rgba(255,248,206,.80) 0 .82px, rgba(255,233,133,.32) 1.18px, rgba(255,220,101,.07) 1.74px, rgba(255,220,101,0) 3.55px),
    radial-gradient(circle, rgba(247,255,205,.78) 0 .74px, rgba(211,255,143,.24) 1.02px, rgba(180,255,127,.06) 1.48px, rgba(180,255,127,0) 3.1px),
    radial-gradient(circle, rgba(255,248,202,.78) 0 .76px, rgba(255,232,128,.26) 1.06px, rgba(255,218,95,.06) 1.56px, rgba(255,218,95,0) 3.2px),
    radial-gradient(circle, rgba(248,255,208,.76) 0 .72px, rgba(214,255,147,.22) .96px, rgba(182,255,129,.05) 1.38px, rgba(182,255,129,0) 2.9px)!important;
  background-position:3% 68%, 16% 36%, 25% 10%, 45% 64%, 57% 23%, 72% 81%, 83% 48%, 92% 19%, 97% 57%, 99% 88%!important;
  animation:inventoryFireflyLayerD 27s linear -11.4s infinite, inventoryFireflyLayerDFade 9.1s ease-in-out -4.6s infinite!important;
}

@keyframes inventoryFireflyLayerA{
  0%{background-position:4% 12%,14% 67%,24% 38%,37% 78%,49% 20%,63% 57%,77% 29%,85% 73%,93% 45%,97% 17%;}
  20%{background-position:10% 6%,8% 74%,31% 27%,45% 67%,56% 28%,58% 46%,83% 19%,80% 61%,88% 34%,94% 25%;}
  40%{background-position:17% 18%,19% 82%,38% 42%,52% 55%,43% 37%,67% 35%,75% 34%,73% 53%,95% 57%,89% 11%;}
  60%{background-position:13% 33%,28% 69%,47% 30%,43% 45%,38% 24%,77% 44%,70% 47%,81% 41%,90% 72%,99% 29%;}
  80%{background-position:6% 26%,34% 54%,35% 22%,35% 60%,47% 15%,85% 58%,79% 38%,90% 57%,84% 33%,92% 8%;}
  100%{background-position:4% 12%,14% 67%,24% 38%,37% 78%,49% 20%,63% 57%,77% 29%,85% 73%,93% 45%,97% 17%;}
}
@keyframes inventoryFireflyLayerB{
  0%{background-position:7% 82%,18% 26%,28% 61%,41% 15%,55% 81%,69% 39%,81% 67%,90% 34%,95% 58%,99% 20%;}
  20%{background-position:14% 72%,12% 34%,35% 52%,49% 24%,50% 70%,63% 30%,75% 77%,84% 24%,90% 47%,94% 29%;}
  40%{background-position:6% 59%,21% 40%,42% 66%,56% 11%,61% 58%,72% 46%,86% 58%,95% 42%,82% 63%,98% 13%;}
  60%{background-position:13% 50%,31% 28%,33% 77%,48% 21%,70% 71%,65% 54%,80% 39%,97% 55%,88% 28%,90% 40%;}
  80%{background-position:22% 66%,27% 17%,25% 68%,41% 29%,63% 82%,73% 47%,84% 27%,88% 46%,92% 74%,99% 32%;}
  100%{background-position:7% 82%,18% 26%,28% 61%,41% 15%,55% 81%,69% 39%,81% 67%,90% 34%,95% 58%,99% 20%;}
}
@keyframes inventoryFireflyLayerC{
  0%{background-position:6% 44%,17% 11%,27% 76%,39% 28%,52% 55%,66% 17%,79% 73%,88% 41%,94% 63%,98% 24%;}
  20%{background-position:12% 36%,23% 18%,34% 67%,46% 36%,45% 45%,60% 27%,74% 63%,82% 47%,88% 55%,93% 12%;}
  40%{background-position:5% 57%,29% 8%,21% 58%,38% 20%,60% 64%,54% 16%,87% 54%,92% 31%,97% 74%,99% 43%;}
  60%{background-position:15% 66%,21% 24%,30% 70%,33% 31%,52% 47%,66% 25%,80% 79%,85% 43%,90% 58%,95% 18%;}
  80%{background-position:8% 50%,15% 13%,39% 74%,47% 24%,58% 57%,73% 13%,83% 67%,88% 39%,93% 66%,98% 29%;}
  100%{background-position:6% 44%,17% 11%,27% 76%,39% 28%,52% 55%,66% 17%,79% 73%,88% 41%,94% 63%,98% 24%;}
}
@keyframes inventoryFireflyLayerD{
  0%{background-position:3% 68%,16% 36%,25% 10%,45% 64%,57% 23%,72% 81%,83% 48%,92% 19%,97% 57%,99% 88%;}
  20%{background-position:9% 61%,11% 29%,18% 18%,52% 54%,52% 33%,66% 71%,77% 38%,86% 15%,91% 48%,96% 79%;}
  40%{background-position:5% 50%,22% 46%,31% 9%,44% 77%,60% 17%,76% 63%,87% 54%,95% 30%,83% 61%,98% 69%;}
  60%{background-position:12% 60%,28% 34%,23% 17%,37% 59%,54% 30%,70% 77%,80% 42%,89% 25%,94% 44%,97% 90%;}
  80%{background-position:7% 78%,18% 49%,16% 7%,48% 68%,63% 23%,74% 87%,85% 48%,93% 18%,98% 56%,92% 73%;}
  100%{background-position:3% 68%,16% 36%,25% 10%,45% 64%,57% 23%,72% 81%,83% 48%,92% 19%,97% 57%,99% 88%;}
}

@keyframes inventoryFireflyLayerAFade{0%,100%{opacity:.22}14%{opacity:.88}31%{opacity:.36}48%{opacity:.80}67%{opacity:.18}83%{opacity:.92}}
@keyframes inventoryFireflyLayerBFade{0%,100%{opacity:.16}10%{opacity:.50}28%{opacity:.74}43%{opacity:.24}61%{opacity:.66}79%{opacity:.20}92%{opacity:.58}}
@keyframes inventoryFireflyLayerCFade{0%,100%{opacity:.12}18%{opacity:.46}34%{opacity:.18}53%{opacity:.55}71%{opacity:.14}89%{opacity:.42}}
@keyframes inventoryFireflyLayerDFade{0%,100%{opacity:.08}15%{opacity:.30}30%{opacity:.12}47%{opacity:.36}66%{opacity:.10}84%{opacity:.28}}



/* v103 — reset the previous firefly attempts and replace them with a simpler,
   more visible system: 4 independent layers, 24 visible fireflies total, each
   layer following its own custom multi-point path. */

html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  isolation:isolate!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  display:block!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen!important;
  transform:none!important;
  transition:none!important;
  will-change:background-position,opacity,filter!important;
}

html body .view-page.view-vault > .open-stage::before,
html body .view-page.view-vault > .open-stage::after{
  inset:12px!important;
  z-index:1!important;
  border-radius:15px!important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
}

/* Layer 1: mostly upward-right / drifting arcs */
html body .view-page.view-vault > .open-stage::before{
  opacity:.72!important;
  filter:drop-shadow(0 0 3px rgba(255,239,156,.45)) drop-shadow(0 0 9px rgba(189,255,156,.15))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,210,.98) 0 2.1px, rgba(255,230,118,.86) 3px, rgba(255,214,84,0) 8px),
    radial-gradient(circle, rgba(248,255,210,.96) 0 1.9px, rgba(212,255,146,.74) 2.8px, rgba(181,255,129,0) 7px),
    radial-gradient(circle, rgba(255,249,212,.96) 0 1.7px, rgba(255,236,138,.76) 2.6px, rgba(255,220,101,0) 6.8px),
    radial-gradient(circle, rgba(247,255,206,.94) 0 1.5px, rgba(212,255,145,.60) 2.3px, rgba(180,255,128,0) 6px),
    radial-gradient(circle, rgba(255,246,196,.94) 0 1.55px, rgba(255,229,124,.68) 2.35px, rgba(255,215,94,0) 6.1px),
    radial-gradient(circle, rgba(248,255,208,.92) 0 1.4px, rgba(214,255,147,.54) 2.1px, rgba(182,255,129,0) 5.7px)!important;
  background-position:6% 74%, 18% 52%, 34% 83%, 56% 61%, 74% 40%, 90% 70%!important;
  animation-name:inventoryFireflyLayer1!important;
  animation-duration:17s!important;
  animation-delay:-2.4s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}

/* Layer 2: mostly leftward / descending diagonals */
html body .view-page.view-vault > .open-stage::after{
  opacity:.58!important;
  filter:drop-shadow(0 0 2px rgba(255,236,146,.36)) drop-shadow(0 0 7px rgba(178,255,145,.12))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,207,.95) 0 1.8px, rgba(255,231,122,.76) 2.6px, rgba(255,216,88,0) 6.8px),
    radial-gradient(circle, rgba(247,255,208,.94) 0 1.55px, rgba(212,255,146,.60) 2.25px, rgba(181,255,129,0) 5.8px),
    radial-gradient(circle, rgba(255,249,210,.94) 0 1.5px, rgba(255,235,138,.66) 2.2px, rgba(255,222,105,0) 5.9px),
    radial-gradient(circle, rgba(246,255,204,.92) 0 1.3px, rgba(210,255,144,.50) 1.95px, rgba(179,255,128,0) 5.1px),
    radial-gradient(circle, rgba(255,246,194,.92) 0 1.3px, rgba(255,229,124,.56) 1.95px, rgba(255,215,94,0) 5.2px),
    radial-gradient(circle, rgba(248,255,207,.90) 0 1.2px, rgba(214,255,146,.46) 1.8px, rgba(182,255,129,0) 4.8px)!important;
  background-position:92% 18%, 80% 36%, 68% 11%, 48% 30%, 28% 8%, 12% 26%!important;
  animation-name:inventoryFireflyLayer2!important;
  animation-duration:23s!important;
  animation-delay:-9.1s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}

/* Layer 3: mixed circular / wandering motion */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before{
  opacity:.42!important;
  filter:drop-shadow(0 0 2px rgba(255,236,143,.26)) drop-shadow(0 0 5px rgba(177,255,140,.09))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.90) 0 1.35px, rgba(255,231,123,.58) 1.95px, rgba(255,215,86,0) 5px),
    radial-gradient(circle, rgba(246,255,205,.88) 0 1.15px, rgba(212,255,146,.46) 1.7px, rgba(181,255,129,0) 4.4px),
    radial-gradient(circle, rgba(255,249,210,.88) 0 1.15px, rgba(255,235,138,.50) 1.7px, rgba(255,222,105,0) 4.5px),
    radial-gradient(circle, rgba(247,255,206,.86) 0 1.0px, rgba(212,255,145,.38) 1.45px, rgba(180,255,128,0) 3.9px),
    radial-gradient(circle, rgba(255,246,194,.86) 0 1.0px, rgba(255,229,124,.42) 1.46px, rgba(255,215,94,0) 4.0px),
    radial-gradient(circle, rgba(248,255,207,.84) 0 .95px, rgba(214,255,146,.36) 1.38px, rgba(182,255,129,0) 3.8px)!important;
  background-position:12% 46%, 29% 24%, 44% 72%, 60% 48%, 77% 21%, 90% 60%!important;
  animation-name:inventoryFireflyLayer3!important;
  animation-duration:19s!important;
  animation-delay:-5.3s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}

/* Layer 4: faint background swarm */
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  opacity:.28!important;
  filter:drop-shadow(0 0 1px rgba(255,236,141,.18)) drop-shadow(0 0 4px rgba(176,255,138,.06))!important;
  background-image:
    radial-gradient(circle, rgba(255,248,205,.82) 0 1.0px, rgba(255,231,123,.40) 1.45px, rgba(255,215,86,0) 3.8px),
    radial-gradient(circle, rgba(246,255,205,.80) 0 .9px, rgba(212,255,146,.32) 1.28px, rgba(181,255,129,0) 3.4px),
    radial-gradient(circle, rgba(255,249,210,.80) 0 .9px, rgba(255,235,138,.34) 1.3px, rgba(255,222,105,0) 3.5px),
    radial-gradient(circle, rgba(247,255,206,.78) 0 .8px, rgba(212,255,145,.28) 1.15px, rgba(180,255,128,0) 3.1px),
    radial-gradient(circle, rgba(255,246,194,.78) 0 .8px, rgba(255,229,124,.30) 1.16px, rgba(255,215,94,0) 3.1px),
    radial-gradient(circle, rgba(248,255,207,.76) 0 .76px, rgba(214,255,146,.26) 1.08px, rgba(182,255,129,0) 2.9px)!important;
  background-position:8% 18%, 22% 82%, 41% 14%, 59% 80%, 74% 55%, 93% 30%!important;
  animation-name:inventoryFireflyLayer4!important;
  animation-duration:27s!important;
  animation-delay:-11.8s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}

@keyframes inventoryFireflyLayer1{
  0%{opacity:.18;background-position:6% 74%,18% 52%,34% 83%,56% 61%,74% 40%,90% 70%;}
  20%{opacity:.82;background-position:13% 62%,24% 42%,40% 66%,61% 50%,81% 28%,96% 58%;}
  40%{opacity:.34;background-position:22% 49%,32% 29%,48% 56%,68% 41%,88% 17%,84% 45%;}
  60%{opacity:.76;background-position:30% 36%,40% 18%,56% 43%,75% 28%,95% 8%,73% 31%;}
  80%{opacity:.26;background-position:39% 21%,48% 8%,65% 31%,83% 15%,86% 23%,61% 18%;}
  100%{opacity:.18;background-position:46% 9%,57% 22%,73% 18%,90% 5%,72% 35%,49% 6%;}
}

@keyframes inventoryFireflyLayer2{
  0%{opacity:.12;background-position:92% 18%,80% 36%,68% 11%,48% 30%,28% 8%,12% 26%;}
  20%{opacity:.54;background-position:84% 27%,73% 45%,60% 21%,40% 38%,20% 18%,5% 36%;}
  40%{opacity:.22;background-position:75% 38%,65% 55%,51% 33%,31% 48%,12% 31%,14% 49%;}
  60%{opacity:.61;background-position:66% 49%,56% 64%,42% 47%,22% 58%,7% 47%,27% 61%;}
  80%{opacity:.18;background-position:56% 59%,46% 74%,32% 60%,13% 70%,18% 62%,38% 74%;}
  100%{opacity:.12;background-position:46% 72%,37% 84%,23% 74%,4% 82%,28% 76%,50% 86%;}
}

@keyframes inventoryFireflyLayer3{
  0%{opacity:.14;background-position:12% 46%,29% 24%,44% 72%,60% 48%,77% 21%,90% 60%;}
  16%{opacity:.44;background-position:18% 38%,33% 34%,48% 64%,55% 57%,71% 31%,84% 53%;}
  33%{opacity:.20;background-position:24% 44%,39% 47%,42% 53%,48% 65%,64% 44%,78% 42%;}
  50%{opacity:.50;background-position:20% 56%,45% 58%,35% 44%,41% 72%,58% 56%,73% 33%;}
  66%{opacity:.18;background-position:13% 62%,40% 67%,29% 33%,36% 63%,54% 68%,71% 22%;}
  83%{opacity:.46;background-position:9% 54%,34% 58%,24% 25%,43% 56%,61% 60%,80% 27%;}
  100%{opacity:.14;background-position:12% 46%,29% 24%,44% 72%,60% 48%,77% 21%,90% 60%;}
}

@keyframes inventoryFireflyLayer4{
  0%{opacity:.08;background-position:8% 18%,22% 82%,41% 14%,59% 80%,74% 55%,93% 30%;}
  20%{opacity:.28;background-position:12% 27%,29% 71%,48% 23%,66% 69%,80% 46%,87% 39%;}
  40%{opacity:.10;background-position:18% 38%,36% 59%,54% 33%,72% 58%,86% 38%,80% 50%;}
  60%{opacity:.30;background-position:24% 50%,43% 47%,61% 44%,77% 46%,92% 31%,72% 60%;}
  80%{opacity:.12;background-position:30% 61%,50% 35%,67% 56%,84% 34%,97% 24%,63% 71%;}
  100%{opacity:.08;background-position:36% 73%,56% 24%,73% 68%,89% 21%,88% 18%,54% 82%;}
}



/* v104 — replace the failed CSS-gradient swarm with a real animated SVG.
   Every firefly inside the SVG has its own motion path, duration, delay,
   brightness pulse and disappear/reappear cycle. */
html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface{
  isolation:isolate!important;
}

/* Disable every previous pseudo-element firefly implementation. */
html body .view-page.view-vault > .open-stage::after,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-surface::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  background:none!important;
  background-image:none!important;
}

/* The animated SVG is one transparent visual layer above bg4 and below all
   carousel controls/content. The animation itself runs inside the SVG. */
html body .view-page.view-vault > .open-stage::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:14px!important;
  z-index:1!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:15px!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  contain:paint!important;
  mix-blend-mode:normal!important;
  background:transparent url('/images/inventory-fireflies-v128.svg') center center/100% 100% no-repeat!important;
  animation:none!important;
}

/* Inventory artwork replacement: preserve the existing charcoin box size and
   coordinates, render charsit2.png inside it, then move only that new artwork
   another 100px downward. */
html body .view-page.view-vault img[src*="charcoin"]{
  content:url('/images/charsit2.png')!important;
  translate:0 100px!important;
  object-fit:contain!important;
}



/* v105 — Inventory character artwork adjustments.
   - Keep charsit2 replacement, but move it 50px further down (total 150px).
   - Put charsit2 above the Inventory panels/effects.
   - Replace char2 with charsit3, same box/size, and move it 150px down.
*/
html body .view-page.view-vault,
html body .view-page.view-vault .inventory-page,
html body .view-page.view-vault .open-stage,
html body .view-page.view-vault .vault-hero,
html body .view-page.view-vault .vault-layout,
html body .view-page.view-vault .vault-content{
  overflow:visible!important;
}

html body .view-page.view-vault img[src*="charcoin"]{
  content:url('/images/charsit2.png')!important;
  position:relative!important;
  top:0!important;
  translate:0 150px!important;
  z-index:999!important;
  object-fit:contain!important;
  pointer-events:none!important;
}

html body .view-page.view-vault img[src*="char2"]{
  content:url('/images/charsit3.png')!important;
  position:relative!important;
  top:0!important;
  translate:0 150px!important;
  z-index:999!important;
  object-fit:contain!important;
  pointer-events:none!important;
}

html body .view-page.view-vault *:has(> img[src*="charcoin"]),
html body .view-page.view-vault *:has(> img[src*="char2"]){
  overflow:visible!important;
  position:relative!important;
  z-index:999!important;
}



/* v106 — separate the two Inventory replacement artworks correctly.
   charsit2 stays above charsit3; charsit3 also goes above the panels/effects
   and moves 50px further down (total 200px). */
html body .view-page.view-vault img[src*="charcoin"]{
  translate:0 150px!important;
  z-index:1002!important;
}
html body .view-page.view-vault img[src*="char2"]{
  content:url('/images/charsit3.png')!important;
  translate:0 200px!important;
  z-index:1001!important;
}
html body .view-page.view-vault *:has(> img[src*="charcoin"]){
  z-index:1002!important;
  overflow:visible!important;
}
html body .view-page.view-vault *:has(> img[src*="char2"]){
  z-index:1001!important;
  overflow:visible!important;
}



/* v107 — ensure Inventory charsit2 renders above charsit3 by giving each
   artwork container a higher z-index than the shared hero-character stack.
   The base stack is already 10050, so use values above that. */
html body .view-page.view-vault *:has(> img[src*="charcoin"]){
  position:relative!important;
  z-index:10120!important;
  isolation:isolate!important;
  overflow:visible!important;
}
html body .view-page.view-vault *:has(> img[src*="char2"]){
  position:relative!important;
  z-index:10110!important;
  isolation:isolate!important;
  overflow:visible!important;
}
html body .view-page.view-vault img[src*="charcoin"]{
  position:relative!important;
  z-index:10120!important;
}
html body .view-page.view-vault img[src*="char2"]{
  position:relative!important;
  z-index:10110!important;
}



/* v108 — force the Inventory character stacking on the actual character
   containers. charsit2 (right/charcoin slot) is always above charsit3
   (left/char2 slot), independent of inherited stacking contexts. */
html body .view-page.view-vault .inventory-character-charsit3{
  position:relative!important;
  z-index:2147483646!important;
  isolation:isolate!important;
}
html body .view-page.view-vault .inventory-character-charsit2{
  position:relative!important;
  z-index:2147483647!important;
  isolation:isolate!important;
}
html body .view-page.view-vault .inventory-character-charsit3 > img{
  position:relative!important;
  z-index:1!important;
}
html body .view-page.view-vault .inventory-character-charsit2 > img{
  position:relative!important;
  z-index:2!important;
}



/* v110 — fix the actual stacking context trapping the Inventory characters.
   The character z-index was already high, but its parent .inventory-hero was
   still below the following panels. Raise the parent stacking context itself. */
html body .view-page.view-vault > .inventory-hero{
  position:relative!important;
  z-index:2147483600!important;
  isolation:isolate!important;
  overflow:visible!important;
}

html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault > .inventory-section,
html body .view-page.view-vault > .inventory-content,
html body .view-page.view-vault > .prize-collection,
html body .view-page.view-vault > .history-section{
  position:relative!important;
  z-index:1!important;
}

html body .view-page.view-vault .inventory-character-charsit2{
  position:relative!important;
  z-index:3!important;
}
html body .view-page.view-vault .inventory-character-charsit3{
  position:relative!important;
  z-index:2!important;
}



/* v111 — restore the original absolute left/right character slots.
   The previous relative positioning put both artworks into normal document
   flow at the left side of the page. Preserve each original slot, keep both
   above the Inventory panels, and restore the two suspension ropes. */
html body .view-page.view-vault > .inventory-hero{
  position:relative!important;
  z-index:20!important;
  isolation:isolate!important;
  overflow:visible!important;
}

html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault > .inventory-section,
html body .view-page.view-vault > .inventory-content,
html body .view-page.view-vault > .prize-collection,
html body .view-page.view-vault > .history-section{
  position:relative!important;
  z-index:1!important;
}

html body .view-page.view-vault .inventory-character-charsit2,
html body .view-page.view-vault .inventory-character-charsit3{
  position:absolute!important;
  overflow:visible!important;
  pointer-events:none!important;
  isolation:auto!important;
}

/* charsit2 uses the original right/charcoin slot and remains 150px below its
   original position. It renders above charsit3 where the images overlap. */
html body .view-page.view-vault .inventory-character-charsit2{
  z-index:3!important;
  translate:0 150px!important;
}

/* charsit3 uses the original left/char2 slot and remains 200px lower. */
html body .view-page.view-vault .inventory-character-charsit3{
  z-index:2!important;
  translate:0 200px!important;
}

html body .view-page.view-vault .inventory-character-charsit2 > img,
html body .view-page.view-vault .inventory-character-charsit3 > img{
  position:relative!important;
  object-fit:contain!important;
  pointer-events:none!important;
}
html body .view-page.view-vault .inventory-character-charsit2 > img{z-index:2!important;}
html body .view-page.view-vault .inventory-character-charsit3 > img{z-index:1!important;}

/* The v110 hero stacking context was above the fixed rope overlay. Raise the
   rope layer above the hero again; it only exists while Inventory is active. */
html body .app-shell > .inventory-main-suspension-layer{
  z-index:30!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}



/* v115 — final Inventory micro-positioning and rope depth.
   charsit3 moves 10px farther down, charsit2 moves 3px farther down.
   The suspension ropes remain visible, but sit behind the main-layout panels
   instead of crossing over the Inventory panel surface. */
html body .app-shell > .inventory-main-suspension-layer{
  z-index:20!important;
}



/* v116 — keep the two Inventory suspension ropes visible, but place their
   complete fixed layer behind the main-layout (z-index 10) and therefore
   behind the main lootbox carousel panel. */
html body .app-shell > .inventory-main-suspension-layer{
  z-index:9!important;
}



/* v117 — compact Your History header without suspension ropes.
   The title sign now sits directly against the panel top, the records rise
   into the released space, and the sign has its own irregular carved-beam
   design rather than matching the three launcher-button planks. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  position:relative!important;
  z-index:14!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  flex:0 0 56px!important;
  width:auto!important;
  min-height:56px!important;
  height:56px!important;
  margin:-1px 14px 5px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Remove only the two short ropes that suspended the Your History title. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header::before,
html body .history-column > .history-panel.history-panel-dynamic > .panel-header::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
}

/* Fill the old rope gap and keep the interior surface continuous. */
html body .history-column > .history-panel.history-panel-dynamic::after{
  top:10px!important;
  right:12px!important;
  bottom:11px!important;
  left:12px!important;
  border-radius:4px!important;
}

/* Distinct asymmetrical carved beam: tapered/notched ends, uneven edges,
   knots, scratches and a restrained split in the grain. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  position:relative!important;
  z-index:2!important;
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-sizing:border-box!important;
  width:calc(100% - 4px)!important;
  height:52px!important;
  min-height:52px!important;
  margin:0!important;
  padding:0 21px 1px!important;
  overflow:hidden!important;
  border:1px solid rgba(52,27,9,.98)!important;
  border-radius:0!important;
  clip-path:polygon(
    0 17%,3.2% 12%,4.6% 4%,18% 1%,34% 4%,48% 0,
    66% 3%,82% 1%,96% 5%,97.4% 13%,100% 19%,98.4% 35%,
    99.2% 55%,97.8% 72%,99.4% 87%,95.8% 96%,78% 99%,
    61% 96%,45% 100%,27% 97%,10% 100%,3.3% 94%,1.6% 83%,
    2.8% 66%,.8% 49%,2.4% 31%
  )!important;
  color:#f5dfb5!important;
  background:
    radial-gradient(ellipse at 10% 42%,rgba(43,18,5,.92) 0 2px,rgba(103,55,20,.62) 2.5px 4px,transparent 4.8px),
    radial-gradient(ellipse at 84% 66%,rgba(45,20,6,.82) 0 1.5px,rgba(111,61,23,.50) 2px 3.8px,transparent 4.6px),
    linear-gradient(112deg,transparent 0 23%,rgba(48,20,5,.36) 23.4% 24%,transparent 24.5% 68%,rgba(255,216,145,.055) 68.4% 69%,transparent 69.5%),
    repeating-linear-gradient(176deg,transparent 0 5px,rgba(44,19,6,.22) 5px 6px,transparent 6px 11px),
    repeating-linear-gradient(3deg,rgba(255,222,158,.035) 0 1px,transparent 1px 4px),
    linear-gradient(94deg,#4f2a0f 0%,#75431b 11%,#5f3312 25%,#875124 43%,#633613 59%,#7b481d 76%,#542b0e 100%)!important;
  box-shadow:
    inset 0 3px rgba(255,220,150,.18),
    inset 0 -4px rgba(36,16,5,.58),
    inset 5px 0 rgba(255,208,133,.035),
    inset -6px 0 rgba(28,12,4,.24),
    0 3px 0 rgba(38,19,6,.68),
    0 8px 14px rgba(1,5,2,.32)!important;
}

/* Uneven inset carving and fine gouges. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank::before{
  content:""!important;
  position:absolute!important;
  inset:5px 8px 6px!important;
  z-index:0!important;
  pointer-events:none!important;
  clip-path:polygon(0 13%,3% 3%,31% 1%,49% 4%,69% 0,96% 3%,100% 14%,98% 84%,94% 98%,70% 96%,49% 100%,27% 96%,4% 99%,0 84%)!important;
  border:1px solid rgba(255,221,154,.075)!important;
  background:
    linear-gradient(101deg,transparent 0 17%,rgba(34,14,4,.35) 17.4% 17.9%,transparent 18.3% 53%,rgba(31,13,4,.26) 53.5% 54%,transparent 54.4%),
    linear-gradient(78deg,transparent 0 72%,rgba(255,218,144,.06) 72.4% 72.9%,transparent 73.3%)!important;
  opacity:.95!important;
}

/* A small natural split makes the sign intentionally imperfect. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank::after{
  content:""!important;
  position:absolute!important;
  right:16.5%!important;
  bottom:8px!important;
  z-index:1!important;
  width:32px!important;
  height:12px!important;
  pointer-events:none!important;
  background:
    linear-gradient(157deg,transparent 0 42%,rgba(38,15,4,.72) 43% 48%,transparent 49%),
    linear-gradient(21deg,transparent 0 54%,rgba(255,215,142,.075) 55% 58%,transparent 59%)!important;
  transform:rotate(-4deg)!important;
  opacity:.88!important;
}

html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > *{
  position:relative!important;
  z-index:3!important;
}

/* Move the complete record list upward with the compact header. */
html body .history-column > .history-panel.history-panel-dynamic > .history-list{
  margin:0 12px 11px!important;
  padding-top:9px!important;
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    flex-basis:51px!important;
    min-height:51px!important;
    height:51px!important;
    margin:-1px 11px 4px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
    width:calc(100% - 2px)!important;
    height:47px!important;
    min-height:47px!important;
    padding:0 16px 1px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic::after{
    top:9px!important;
    right:10px!important;
    bottom:9px!important;
    left:10px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .history-list{
    margin:0 10px 9px!important;
    padding-top:8px!important;
  }
}



/* v118 — keep the Your History title beam and its text above the decorative
   branch frame. No dimensions or spacing are changed. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  z-index:20!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  z-index:21!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > *{
  z-index:22!important;
}



/* v120 — keep the v118 look, but move the Your History header plank and the
   record list a bit lower so everything stays inside the frame and nothing is
   covered by the top molding. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  margin:8px 15px 8px!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-list{
  margin:0 12px 11px!important;
  padding-top:15px!important;
}

@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    margin:7px 11px 6px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .history-list{
    margin:0 10px 9px!important;
    padding-top:12px!important;
  }
}



/* v121 — move only the Your History title plank a bit farther down so it no
   longer overlaps the top frame art, while keeping the records where they are. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  margin:15px 15px 8px!important;
}
@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    margin:12px 11px 6px!important;
  }
}

/* v121 — give each of the three wood boards its own subtle shape, grain,
   and brightness so they no longer look identical. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1) > button{
  clip-path:polygon(.7% 10%,2.1% 2%,16% 0,32% 2.5%,54% .4%,72% 2.2%,98.4% 1.2%,99.5% 11%,99.1% 90%,97.6% 98.2%,79% 100%,58% 97.4%,36% 100%,18% 98.3%,1.2% 100%,.3% 90.5%)!important;
  background:
    radial-gradient(ellipse at 12% 34%,rgba(82,42,16,.62) 0 1.6px,transparent 2px),
    radial-gradient(ellipse at 74% 66%,rgba(56,26,8,.44) 0 1.8px,transparent 2.4px),
    repeating-linear-gradient(2deg,rgba(66,33,12,.32) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,218,148,.065) 8px 9px,transparent 9px 13px),
    linear-gradient(92deg,#77431a 0%,#9b6230 18%,#845022 36%,#aa6c36 54%,#8a5123 71%,#a66833 88%,#724019 100%)!important;
  filter:brightness(1.04) saturate(1.03)!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1) > button::before{
  background:
    linear-gradient(97deg,transparent 0 14%,rgba(58,28,9,.24) 14.5% 15%,transparent 15.5% 42%,rgba(255,219,151,.07) 42.5% 43%,transparent 43.5% 76%,rgba(52,25,8,.20) 76.5% 77%,transparent 77.5%),
    linear-gradient(12deg,transparent 0 58%,rgba(62,30,10,.22) 58.5% 59%,transparent 59.5%),
    repeating-linear-gradient(5deg,transparent 0 6px,rgba(45,21,7,.12) 6px 7px,transparent 7px 11px)!important;
  opacity:.93!important;
}

html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2) > button{
  clip-path:polygon(.5% 9%,1.7% 1.5%,17% .3%,34% 2%,53% 0,74% 2%,98.8% .8%,99.8% 8.2%,99.2% 92%,97.9% 99.2%,76.5% 99.8%,56% 96.8%,37% 99.6%,17% 97.8%,1.1% 100%,.2% 91.5%)!important;
  background:
    radial-gradient(ellipse at 18% 40%,rgba(70,35,12,.58) 0 1.4px,transparent 2px),
    radial-gradient(ellipse at 82% 61%,rgba(48,23,8,.52) 0 2px,transparent 2.5px),
    repeating-linear-gradient(1deg,rgba(57,27,9,.33) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 7px,rgba(255,214,145,.045) 7px 8px,transparent 8px 13px),
    linear-gradient(92deg,#693b16 0%,#8a5527 16%,#73431c 34%,#995f2d 53%,#79471e 72%,#935926 88%,#663714 100%)!important;
  filter:brightness(.97) saturate(.98)!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2) > button::before{
  background:
    linear-gradient(96deg,transparent 0 10%,rgba(54,27,9,.18) 10.5% 11%,transparent 11.5% 36%,rgba(255,219,151,.055) 36.5% 37%,transparent 37.5% 63%,rgba(52,25,8,.16) 63.5% 64%,transparent 64.5% 88%,rgba(64,31,10,.16) 88.5% 89%,transparent 89.5%),
    linear-gradient(-9deg,transparent 0 48%,rgba(34,15,5,.20) 48.5% 49%,transparent 49.5%),
    repeating-linear-gradient(4deg,transparent 0 5px,rgba(45,21,7,.11) 5px 6px,transparent 6px 10px)!important;
  opacity:.88!important;
}

html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > button{
  clip-path:polygon(.6% 11%,1.3% 2.5%,19% 0,35% 2%,55% .3%,73% 2.5%,98.7% 1.5%,99.8% 9.5%,99.3% 89.4%,98.3% 97.8%,78% 100%,58% 96.6%,38% 100%,17% 98.8%,1.3% 100%,.4% 92%)!important;
  background:
    radial-gradient(ellipse at 11% 43%,rgba(77,38,14,.54) 0 1.5px,transparent 2px),
    radial-gradient(ellipse at 69% 70%,rgba(60,28,10,.52) 0 2px,transparent 2.6px),
    repeating-linear-gradient(1.8deg,rgba(62,29,11,.31) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,216,149,.06) 8px 9px,transparent 9px 14px),
    linear-gradient(92deg,#74411a 0%,#965d2b 17%,#7f491f 34%,#a86a33 52%,#874b20 71%,#9f6230 88%,#6f3d18 100%)!important;
  filter:brightness(1.01) saturate(1.08)!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > button::before{
  background:
    linear-gradient(96deg,transparent 0 9%,rgba(54,27,9,.20) 9.5% 10%,transparent 10.5% 31%,rgba(255,219,151,.075) 31.5% 32%,transparent 32.5% 57%,rgba(52,25,8,.17) 57.5% 58%,transparent 58.5% 79%,rgba(255,219,151,.05) 79.5% 80%,transparent 80.5%),
    linear-gradient(7deg,transparent 0 66%,rgba(74,35,12,.18) 66.5% 67%,transparent 67.5%),
    repeating-linear-gradient(4deg,transparent 0 6px,rgba(45,21,7,.12) 6px 7px,transparent 7px 11px)!important;
  opacity:.91!important;
}



/* v122 — keep the header inside the frame but under the top molding.
   Move only the wood sign downward visually without pushing the records. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  z-index:1!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  z-index:0!important;
  transform:translateY(10px)!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank > *{
  z-index:1!important;
}
@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
    transform:translateY(8px)!important;
  }
}

/* v122 — stronger irregular silhouettes so each hanging plank clearly has its
   own imperfect shape rather than reading as the same straight rectangle. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1) > button{
  border-radius:8px 4px 7px 5px / 6px 7px 5px 8px!important;
  clip-path:polygon(0.8% 18%,4.7% 5%,16% 0.6%,28% 3.2%,46% 0,62% 2.8%,79% 0.8%,95.7% 4.7%,99.4% 16%,97.3% 31%,99.8% 46%,97.2% 71%,99.1% 88%,94.7% 97.7%,81% 100%,63% 96.2%,45% 99.7%,28.5% 96.5%,15% 100%,3.2% 95.2%,0.2% 81%,2.3% 60.5%,0 42%,2.2% 24%)!important;
  background-position:10px 1px,77% 63%,0 1px,0 0,0 0!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1) > button::after{
  height:2px!important;
  inset:auto 10px 4px!important;
  background:linear-gradient(90deg,transparent,rgba(47,20,7,.62) 9% 25%,transparent 25.5% 49%,rgba(255,216,142,.15) 50% 76%,transparent)!important;
}

html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2) > button{
  border-radius:5px 8px 4px 7px / 7px 5px 8px 5px!important;
  clip-path:polygon(0.4% 14%,2.8% 3%,14.2% 0.5%,33% 2.8%,53.5% 0,70% 3.8%,84.5% 1%,98.9% 6%,99.7% 18%,97.9% 38%,100% 53%,97.4% 74%,98.8% 90%,94% 99%,78.8% 98.3%,58.3% 95.4%,38% 100%,18% 96.4%,4.2% 99.5%,0.3% 87%,1.7% 67%,0.1% 49%,1.5% 27%)!important;
  background-position:18px 3px,84% 56%,0 2px,0 1px,0 0!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2) > button::after{
  height:2px!important;
  inset:auto 12px 3px!important;
  background:linear-gradient(90deg,transparent,rgba(48,22,7,.55) 7% 19%,transparent 19.5% 41%,rgba(255,218,145,.10) 42% 58%,transparent 58.5% 73%,rgba(44,18,6,.40) 74% 88%,transparent)!important;
}

html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > button{
  border-radius:7px 5px 9px 4px / 5px 8px 6px 7px!important;
  clip-path:polygon(0.6% 17%,3.9% 4.2%,19% 0,31.5% 2.5%,47.5% 0.4%,63% 3%,77.5% 1%,96.7% 5.6%,99.6% 14%,97.5% 28%,100% 44.5%,97.8% 69.5%,99.2% 85.5%,95.8% 96.5%,82.4% 100%,61.2% 95.6%,41% 100%,22% 97.5%,6% 100%,1.2% 90%,2.8% 70.5%,0 53%,2% 34%)!important;
  background-position:32px 0,69% 71%,0 -2px,0 3px,0 0!important;
}
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > button::after{
  height:2px!important;
  inset:auto 11px 4px!important;
  background:linear-gradient(90deg,transparent,rgba(47,21,7,.54) 8% 23%,transparent 23.5% 46%,rgba(255,217,146,.12) 47% 66%,transparent 66.5% 82%,rgba(43,18,5,.37) 82.5% 92%,transparent)!important;
}



/* v123 — slightly wider Your History plank and a bit lower, without moving the records. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  width:calc(100% + 8px)!important;
  transform:translateY(15px)!important;
}
@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
    width:calc(100% + 5px)!important;
    transform:translateY(12px)!important;
  }
}



/* v124 — add a subtle fake-3D underside to the Your History plank, focused on
   the bottom edge only, without changing its current placement or size. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  box-shadow:
    inset 0 3px rgba(255,220,150,.18),
    inset 0 -7px rgba(31,14,4,.68),
    inset 0 -11px rgba(12,6,2,.22),
    inset 5px 0 rgba(255,208,133,.035),
    inset -6px 0 rgba(28,12,4,.24),
    0 4px 0 rgba(41,20,7,.78),
    0 8px 0 rgba(22,10,3,.34),
    0 12px 18px rgba(1,5,2,.36)!important;
  filter:drop-shadow(0 6px 4px rgba(18,8,3,.20))!important;
}



/* v125 — apply the same underside fake-3D treatment to the three hanging
   wood planks above Your History, while preserving their individual shapes,
   colors and animations. */
html body .history-column > .history-launch-stack > .history-launch-row > button{
  box-shadow:
    inset 0 3px rgba(255,220,150,.16),
    inset 0 -7px rgba(31,14,4,.64),
    inset 0 -11px rgba(12,6,2,.18),
    inset 4px 0 rgba(255,208,133,.03),
    inset -5px 0 rgba(28,12,4,.20),
    0 4px 0 rgba(41,20,7,.72),
    0 8px 0 rgba(22,10,3,.28),
    0 12px 18px rgba(1,5,2,.30)!important;
  filter:drop-shadow(0 6px 4px rgba(18,8,3,.18))!important;
}

/* Slightly reinforce the underside read per-plank without changing the top face. */
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(1) > button::after,
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(2) > button::after,
html body .history-column > .history-launch-stack > .history-launch-row:nth-child(3) > button::after{
  height:3px!important;
  bottom:3px!important;
  opacity:.92!important;
  filter:blur(.15px)!important;
}
/* ========================================================================== */
/* Inventory recovery v128                                                     */
/* Restores the complete runtime stylesheet, keeps 10 lightweight fireflies,  */
/* adds a slender woodland Prize Collection frame, and keeps Fortune Echo      */
/* attached below the sticky topbar without changing the approved layout.      */
/* ========================================================================== */

/* Lightweight 10-firefly layer. */
html body .view-page.view-vault > .open-stage::before {
  contain: paint !important;
  mix-blend-mode: normal !important;
  background: transparent url('/images/inventory-fireflies-v128.svg') center center / 100% 100% no-repeat !important;
}

/* Prize Collection: preserve the original spacing and heading layout. */
html body .view-page.view-vault > .prize-gallery {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border-color: transparent !important;
  background:
    radial-gradient(ellipse at 16% 6%, rgba(95,132,79,.085), transparent 31%),
    radial-gradient(ellipse at 86% 92%, rgba(72,106,64,.07), transparent 34%),
    linear-gradient(180deg, rgba(18,31,21,.95), rgba(8,17,11,.975)) !important;
  box-shadow:
    inset 0 1px rgba(247,235,198,.035),
    inset 0 0 34px rgba(2,10,5,.25),
    0 18px 42px rgba(1,7,3,.28) !important;
}

html body .view-page.view-vault > .prize-gallery > :not(.prize-gallery-nature-frame) {
  position: relative !important;
  z-index: 2 !important;
}

html body .view-page.view-vault > .prize-gallery > .prize-gallery-nature-frame {
  position: absolute !important;
  inset: -2px !important;
  z-index: 3 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 5px 6px rgba(1,7,3,.26)) !important;
}

/* Slender irregular wood, close to the Inventory frame but not identical. */
html body .prize-gallery-nature-frame .prize-gallery-branch {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  border: 1px solid rgba(42,20,7,.88) !important;
  background:
    radial-gradient(ellipse 15px 5px at 20% 48%, rgba(35,16,5,.62) 0 29%, rgba(132,84,39,.28) 34% 43%, transparent 48%),
    radial-gradient(ellipse 12px 4px at 76% 53%, rgba(31,14,5,.58) 0 28%, rgba(145,91,43,.24) 34% 43%, transparent 48%),
    repeating-linear-gradient(5deg, rgba(26,11,4,.42) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #81572f 0%, #60401f 34%, #3b210f 69%, #211006 100%) !important;
  box-shadow:
    inset 0 2px 1px rgba(237,191,117,.15),
    inset 0 -3px 2px rgba(18,7,2,.58),
    0 3px 5px rgba(1,6,3,.34) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-branch.is-top,
html body .prize-gallery-nature-frame .prize-gallery-branch.is-bottom {
  left: 8px !important;
  right: 8px !important;
  height: 12px !important;
  border-radius: 48% 52% 44% 56% / 58% 42% 61% 39% !important;
  clip-path: polygon(0 38%, 4% 17%, 12% 8%, 24% 18%, 37% 9%, 51% 19%, 65% 8%, 78% 17%, 90% 9%, 97% 20%, 100% 43%, 98% 75%, 91% 91%, 78% 82%, 65% 93%, 51% 84%, 37% 94%, 24% 83%, 11% 92%, 3% 78%) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-branch.is-top { top: 1px !important; transform: rotate(.1deg) !important; }
html body .prize-gallery-nature-frame .prize-gallery-branch.is-bottom { bottom: 1px !important; transform: rotate(180.12deg) !important; }

html body .prize-gallery-nature-frame .prize-gallery-branch.is-left,
html body .prize-gallery-nature-frame .prize-gallery-branch.is-right {
  top: 8px !important;
  bottom: 8px !important;
  width: 10px !important;
  border-radius: 58% 42% 53% 47% / 44% 56% 48% 52% !important;
  background:
    radial-gradient(ellipse 4px 13px at 52% 27%, rgba(32,15,5,.65) 0 29%, rgba(132,83,39,.27) 34% 43%, transparent 48%),
    radial-gradient(ellipse 4px 12px at 45% 75%, rgba(30,13,5,.60) 0 28%, rgba(143,90,42,.23) 34% 43%, transparent 48%),
    repeating-linear-gradient(94deg, rgba(26,11,4,.42) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #81572f 0%, #60401f 34%, #3b210f 69%, #211006 100%) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-branch.is-left { left: 1px !important; transform: rotate(-.08deg) !important; }
html body .prize-gallery-nature-frame .prize-gallery-branch.is-right { right: 1px !important; transform: rotate(180.08deg) !important; }

/* Small flowering twigs, leaves and petals; intentionally static. */
html body .prize-gallery-nature-frame .inventory-frame-twig {
  position: absolute !important;
  z-index: 5 !important;
  width: 76px !important;
  height: 45px !important;
  overflow: visible !important;
  opacity: .9 !important;
  filter: drop-shadow(0 2px 2px rgba(1,7,3,.4)) !important;
  pointer-events: none !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig-svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-shape { display: none !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig.twig-variant-a .twig-shape-a,
html body .prize-gallery-nature-frame .inventory-frame-twig.twig-variant-b .twig-shape-b,
html body .prize-gallery-nature-frame .inventory-frame-twig.twig-variant-c .twig-shape-c { display: inline !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-shadow { stroke-width: 7.2 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-main { stroke-width: 4.8 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-highlight { stroke-width: 1.05 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot-shadow { stroke-width: 3.9 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot { stroke-width: 2.45 !important; }
html body .prize-gallery-nature-frame .prize-twig-top-left { left: 7px !important; top: -12px !important; transform: rotate(9deg) scale(.73) !important; }
html body .prize-gallery-nature-frame .prize-twig-top-right { right: 8px !important; top: -12px !important; transform-origin: calc(100% - 2px) 50% !important; transform: scaleX(-1) rotate(7deg) scale(.68) !important; }
html body .prize-gallery-nature-frame .prize-twig-bottom-left { left: 15% !important; bottom: -15px !important; transform: rotate(-7deg) scale(.56) !important; }
html body .prize-gallery-nature-frame .prize-twig-bottom-right { right: 12% !important; bottom: -15px !important; transform-origin: calc(100% - 2px) 50% !important; transform: scaleX(-1) rotate(-5deg) scale(.59) !important; }

html body .prize-gallery-nature-frame .prize-gallery-flora {
  position: absolute !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  color: #f5f0df !important;
  font: 13px/1 Georgia, serif !important;
  text-shadow: 0 1px 1px rgba(48,24,10,.78) !important;
  filter: drop-shadow(0 2px 2px rgba(1,7,3,.38)) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-flora::after {
  content: "" !important;
  position: absolute !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #d9b95e !important;
}
html body .prize-gallery-nature-frame .flora-top-left { left: 21px !important; top: 0 !important; transform: rotate(-12deg) scale(.78) !important; }
html body .prize-gallery-nature-frame .flora-top-right { right: 23% !important; top: 0 !important; transform: rotate(9deg) scale(.58) !important; }
html body .prize-gallery-nature-frame .flora-bottom-right { right: 18px !important; bottom: 0 !important; transform: rotate(16deg) scale(.74) !important; }
html body .prize-gallery-nature-frame .flora-bottom-left { left: 32% !important; bottom: 0 !important; transform: rotate(-8deg) scale(.53) !important; }

html body .prize-gallery-nature-frame .prize-gallery-leaf {
  position: absolute !important;
  z-index: 6 !important;
  width: 11px !important;
  height: 6px !important;
  border: 1px solid rgba(34,54,26,.76) !important;
  border-radius: 100% 10% 100% 10% !important;
  background: linear-gradient(145deg, #6d8950, #3e5d2d) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.28) !important;
}
html body .prize-gallery-nature-frame .leaf-01 { left: 14% !important; top: 0 !important; transform: rotate(-24deg) scale(.68) !important; }
html body .prize-gallery-nature-frame .leaf-02 { left: 46% !important; top: 3px !important; transform: rotate(18deg) scale(.5) !important; }
html body .prize-gallery-nature-frame .leaf-03 { right: 0 !important; top: 26% !important; transform: rotate(76deg) scale(.72) !important; }
html body .prize-gallery-nature-frame .leaf-04 { right: 1px !important; top: 70% !important; transform: rotate(109deg) scale(.55) !important; }
html body .prize-gallery-nature-frame .leaf-05 { right: 31% !important; bottom: 0 !important; transform: rotate(158deg) scale(.66) !important; }
html body .prize-gallery-nature-frame .leaf-06 { left: 48% !important; bottom: 2px !important; transform: rotate(-151deg) scale(.45) !important; }
html body .prize-gallery-nature-frame .leaf-07 { left: 0 !important; top: 62% !important; transform: rotate(-78deg) scale(.73) !important; }
html body .prize-gallery-nature-frame .leaf-08 { left: 1px !important; top: 29% !important; transform: rotate(-106deg) scale(.52) !important; }

html body .prize-gallery-nature-frame .prize-gallery-petal {
  position: absolute !important;
  z-index: 8 !important;
  width: 7px !important;
  height: 4px !important;
  border-radius: 100% 18% 100% 18% !important;
  background: linear-gradient(145deg, #fffdf4, #eadfcf 72%, #c9b8a9) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.24) !important;
}
html body .prize-gallery-nature-frame .petal-01 { left: 7% !important; top: 5px !important; transform: rotate(31deg) scale(.62) !important; }
html body .prize-gallery-nature-frame .petal-02 { left: 29% !important; top: 0 !important; transform: rotate(-17deg) scale(.44) !important; }
html body .prize-gallery-nature-frame .petal-03 { right: 20% !important; top: 2px !important; transform: rotate(47deg) scale(.68) !important; }
html body .prize-gallery-nature-frame .petal-04 { right: 0 !important; top: 49% !important; transform: rotate(101deg) scale(.52) !important; }
html body .prize-gallery-nature-frame .petal-05 { right: 12% !important; bottom: 2px !important; transform: rotate(145deg) scale(.62) !important; }
html body .prize-gallery-nature-frame .petal-06 { left: 35% !important; bottom: 0 !important; transform: rotate(-141deg) scale(.46) !important; }
html body .prize-gallery-nature-frame .petal-07 { left: 0 !important; top: 78% !important; transform: rotate(-73deg) scale(.66) !important; }
html body .prize-gallery-nature-frame .petal-08 { left: 2px !important; top: 14% !important; transform: rotate(-42deg) scale(.48) !important; }

/* Controls: retain their original geometry; only add a fine bark contour. */
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger,
html body .view-page.view-vault .collection-search-field {
  position: relative !important;
  border: 1px solid rgba(103,67,34,.82) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(127,84,43,.68) 9% 91%, transparent 95%) top 1px left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(58,33,15,.82) 9% 91%, transparent 95%) bottom 1px left / 100% 2px no-repeat,
    linear-gradient(180deg, #112219 0%, #09150e 100%) !important;
  box-shadow:
    inset 0 1px rgba(244,232,191,.04),
    inset 0 -3px rgba(2,10,5,.2),
    0 5px 13px rgba(1,7,3,.16) !important;
  overflow: hidden !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger::before,
html body .view-page.view-vault .collection-search-field::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 0 !important;
  border: 1px solid rgba(112,139,88,.07) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger > *,
html body .view-page.view-vault .collection-search-field > * {
  position: relative !important;
  z-index: 1 !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger:hover,
html body .view-page.view-vault .collection-filter-menu.is-open > .collection-filter-trigger,
html body .view-page.view-vault .collection-search-field:hover,
html body .view-page.view-vault .collection-search-field:focus-within {
  border-color: rgba(137,94,47,.94) !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(146,98,49,.74) 9% 91%, transparent 95%) top 1px left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(67,38,17,.86) 9% 91%, transparent 95%) bottom 1px left / 100% 2px no-repeat,
    linear-gradient(180deg, #173020 0%, #0c1c12 100%) !important;
}

html body .collection-filter-options-portal {
  border: 1px solid rgba(105,68,34,.9) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(127,84,43,.64) 9% 91%, transparent 95%) top 1px left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(58,33,15,.82) 9% 91%, transparent 95%) bottom 1px left / 100% 2px no-repeat,
    #08110c !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.74), inset 0 1px rgba(244,232,191,.04) !important;
}

/* Keep Fortune Echo in the same visual position under the sticky topbar. */
html body .app-shell > .ticker-wrap {
  position: sticky !important;
  top: 74px !important;
  z-index: 999 !important;
}

/* Fill the complete interior of both decorative frames while clipping the
   shared background to the frame's inner silhouette. No rectangular edge can
   extend beyond the wood artwork. */
html body .app-shell > .topbar::after,
html body .topbar::after {
  inset: -2px 11px -4px !important;
  border: 0 !important;
  border-radius: 46px 46px 38px 38px / 29px 29px 32px 32px !important;
  clip-path: polygon(1.1% 18%, 2.7% 7%, 8.5% 1%, 91.5% 1%, 97.3% 7%, 98.9% 18%, 99.6% 48%, 99% 77%, 97.2% 91%, 91.5% 98%, 8.5% 98%, 2.8% 91%, 1% 77%, .4% 48%) !important;
  background-color: #13281a !important;
  background-image: url('/images/bgshare.png') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: hidden !important;
}

html body .ticker::after {
  inset: 0 7px 0 !important;
  border-radius: 24px / 17px !important;
  clip-path: polygon(1.2% 22%, 3.4% 7%, 8% 1%, 92% 1%, 96.6% 7%, 98.8% 22%, 99.5% 51%, 98.7% 80%, 96.5% 94%, 92% 99%, 8% 99%, 3.5% 94%, 1.3% 80%, .5% 51%) !important;
  background-color: #13281a !important;
  background-image: url('/images/bgshare.png') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: hidden !important;
}

@media (max-width: 820px) {
  html body .app-shell > .ticker-wrap {
    top: calc(98px + env(safe-area-inset-top)) !important;
  }
  html body .app-shell > .topbar::after,
  html body .topbar::after {
    inset: -1px 4px -3px !important;
    border-radius: 25px !important;
  }
  html body .ticker::after {
    inset: 0 3px !important;
  }
  html body .prize-gallery-nature-frame .inventory-frame-twig {
    width: 68px !important;
    height: 41px !important;
  }
}

@media (max-width: 620px) {
  html body .prize-gallery-nature-frame .prize-twig-bottom-left,
  html body .prize-gallery-nature-frame .prize-twig-bottom-right {
    display: none !important;
  }
}

/* ========================================================================== */
/* Inventory refinements v130                                                 */
/* Preserve the v129 layout while correcting carousel depth, botanical        */
/* ornaments and the supplied search-field vine artwork.                      */
/* ========================================================================== */

/* Close the remaining two-pixel seam at the top of the Fortune Echo inner
   surface. The decorative PNG remains clipped by the wooden frame. */
html body .ticker::after {
  inset: -2px 7px 0 !important;
}

/* Second pair of the approved Inventory suspension ropes, anchored immediately
   above Your Prize Collection without participating in document flow. */
html body .view-page.view-vault > .prize-gallery > .inventory-lower-suspension-layer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -86px !important;
  width: 100% !important;
  height: 92px !important;
  z-index: 2 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension {
  position: absolute !important;
  top: 0 !important;
  width: 18px !important;
  height: 100% !important;
  display: block !important;
  transform-origin: 50% 0 !important;
  pointer-events: none !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-left {
  left: 21% !important;
  animation: inventoryMainRopeWindLeft 14.6s ease-in-out infinite !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-right {
  right: 21% !important;
  animation: inventoryMainRopeWindRight 15.8s ease-in-out -5.4s infinite !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -1px !important;
  bottom: -3px !important;
  width: 7px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(132deg, rgba(244,211,145,.31) 0 2px, rgba(63,35,14,.24) 2px 4px),
    linear-gradient(90deg, #2c1709 0%, #74502a 22%, #bc8f50 48%, #68431f 73%, #251207 100%) !important;
  box-shadow:
    inset 1px 0 rgba(247,217,154,.22),
    inset -1px 0 rgba(21,9,3,.66),
    0 2px 4px rgba(1,7,3,.48) !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension > i,
html body .inventory-lower-suspension-layer > .inventory-lower-suspension > b {
  position: absolute !important;
  left: 50% !important;
  display: block !important;
  pointer-events: none !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension > i {
  top: -7px !important;
  width: 17px !important;
  height: 14px !important;
  transform: translateX(-50%) rotate(2deg) !important;
  border: 2px solid rgba(48,24,9,.92) !important;
  border-radius: 46% 54% 43% 57% !important;
  background: repeating-linear-gradient(138deg, #b1844b 0 3px, #62401d 3px 6px) !important;
  box-shadow: inset 1px 1px rgba(244,207,139,.18), 0 3px 5px rgba(1,7,3,.46) !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension > b {
  bottom: -10px !important;
  width: 25px !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border: 2px solid rgba(48,23,8,.94) !important;
  border-radius: 49% 51% 44% 56% !important;
  background: repeating-linear-gradient(140deg, #ad7f45 0 3px, #563316 3px 6px) !important;
  box-shadow: inset 1px 1px rgba(243,203,132,.20), 0 3px 5px rgba(1,7,3,.50) !important;
}

/* Keep the exact carousel geometry. The arrows remain absolutely positioned;
   only their stacking levels differ, so the left arrow paints above charsit3
   without changing panel height, track placement or flex/grid measurements. */
html body .view-page.view-vault > .open-stage {
  isolation: auto !important;
  z-index: auto !important;
}
html body .view-page.view-vault .carousel-arrow.left {
  position: absolute !important;
  z-index: 21 !important;
}
html body .view-page.view-vault .carousel-arrow.right {
  position: absolute !important;
  z-index: 19 !important;
}

/* Use the supplied bg5.png as the Prize Collection surface. */
html body .view-page.view-vault > .prize-gallery {
  background-color: transparent !important;
  background-image: url('/images/bg5.png') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-clip: padding-box !important;
}

/* Explicit material colours for the collection-frame SVG twigs. */
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-shadow {
  fill: none !important;
  stroke: #160904 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .82 !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-main {
  fill: none !important;
  stroke: #5b3519 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-highlight {
  fill: none !important;
  stroke: rgba(216,158,89,.42) !important;
  stroke-linecap: round !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot-shadow {
  fill: none !important;
  stroke: #160904 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .76 !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot {
  fill: none !important;
  stroke: #4d2b14 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-leaves ellipse {
  fill: #496333 !important;
  stroke: #213b1c !important;
  stroke-width: 1 !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-leaves ellipse:nth-child(even) {
  fill: #657d48 !important;
}

/* FILTER and RARITY now use two genuinely different botanical arrangements.
   Both sit on the bark contour and remain absolutely positioned, so they do
   not affect the control dimensions or text layout. */
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger {
  overflow: visible !important;
}
html body .view-page.view-vault .collection-control-botanical {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 76px !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  opacity: .94 !important;
}
html body .view-page.view-vault .collection-control-botanical > span {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-stem {
  height: 10px !important;
  border-top: 2px solid #69411f !important;
  border-radius: 50% !important;
  box-shadow: 0 -1px rgba(210,154,86,.16) !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-leaf {
  width: 11px !important;
  height: 6px !important;
  border: 1px solid rgba(28,49,22,.82) !important;
  border-radius: 100% 10% 100% 10% !important;
  background: linear-gradient(145deg, #738d50 0%, #405e2e 66%, #29431f 100%) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.32) !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-flower {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #d8ad49 !important;
  box-shadow:
    0 -4px 0 1px #f6f1df,
    0 4px 0 1px #eee5d4,
    -4px 0 0 1px #fffaf0,
    4px 0 0 1px #e7dcc9,
    0 1px 3px rgba(1,7,3,.45) !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-petal {
  width: 7px !important;
  height: 4px !important;
  border-radius: 100% 18% 100% 18% !important;
  background: linear-gradient(145deg, #fffdf4, #eadfcf 72%, #c9b8a9) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.24) !important;
}

/* FILTER: short rising sprig on the upper-right edge. */
html body .view-page.view-vault .collection-control-botanical.is-filter {
  top: -6px !important;
  right: 31px !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .botanical-stem {
  left: 3px !important;
  top: 12px !important;
  width: 61px !important;
  transform: rotate(-5deg) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .leaf-a {
  left: 20px !important;
  top: 5px !important;
  transform: rotate(-30deg) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .leaf-b {
  left: 39px !important;
  top: 11px !important;
  transform: rotate(31deg) scale(.88) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .botanical-flower {
  right: 7px !important;
  top: 5px !important;
  transform: rotate(8deg) scale(.88) !important;
}

/* RARITY: longer descending branch on the lower-right edge, with three leaves
   and two loose petals. Its silhouette and direction differ from FILTER. */
html body .view-page.view-vault .collection-control-botanical.is-rarity {
  right: 29px !important;
  bottom: -7px !important;
  width: 84px !important;
  height: 27px !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .botanical-stem {
  right: 4px !important;
  bottom: 9px !important;
  width: 69px !important;
  transform: rotate(7deg) scaleX(-1) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .leaf-a {
  right: 16px !important;
  bottom: 13px !important;
  transform: rotate(28deg) scale(.82) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .leaf-b {
  right: 38px !important;
  bottom: 5px !important;
  transform: rotate(-34deg) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .leaf-c {
  left: 8px !important;
  bottom: 12px !important;
  transform: rotate(42deg) scale(.72) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .botanical-flower {
  left: 22px !important;
  bottom: 6px !important;
  transform: rotate(-11deg) scale(.74) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .petal-a {
  left: 5px !important;
  top: 1px !important;
  transform: rotate(-25deg) scale(.76) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .petal-b {
  left: 42px !important;
  top: 1px !important;
  transform: rotate(34deg) scale(.58) !important;
}

/* Display leave1.png at a useful size. The thin branch may sit behind the text,
   while the leaf cluster occupies the far-right end of the search field. */
html body .view-page.view-vault .collection-search-field {
  overflow: hidden !important;
}
html body .view-page.view-vault .collection-search-field > span,
html body .view-page.view-vault .collection-search-field > input {
  position: relative !important;
  z-index: 2 !important;
}
html body .view-page.view-vault .collection-search-field input {
  padding-right: 54px !important;
}
html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
  position: absolute !important;
  right: -5px !important;
  top: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: 185px !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
  object-position: right center !important;
  opacity: .92 !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 1px 1px rgba(1,7,3,.48)) !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  html body .ticker::after {
    inset: -2px 3px 0 !important;
  }
  html body .view-page.view-vault > .prize-gallery > .inventory-lower-suspension-layer {
    top: -70px !important;
    height: 76px !important;
  }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-left { left: 18% !important; }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-right { right: 18% !important; }
  html body .view-page.view-vault .collection-control-botanical.is-filter {
    right: 28px !important;
    transform: scale(.88) !important;
    transform-origin: right top !important;
  }
  html body .view-page.view-vault .collection-control-botanical.is-rarity {
    right: 27px !important;
    transform: scale(.86) !important;
    transform-origin: right bottom !important;
  }
  html body .view-page.view-vault .collection-search-field input {
    padding-right: 50px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 158px !important;
    max-height: 34px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .prize-gallery > .inventory-lower-suspension-layer {
    top: -58px !important;
    height: 64px !important;
  }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension::before { width: 5px !important; }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension > i { width: 13px !important; height: 11px !important; }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension > b { width: 19px !important; height: 14px !important; }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 142px !important;
    max-height: 31px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension {
    animation: none !important;
    transform: none !important;
  }
}

/* ========================================================================== */
/* Inventory corrections v131                                                 */
/* Keep the approved layout intact while fixing rope depth/length, search art */
/* alignment and navigation-arrow stacking.                                   */
/* ========================================================================== */

/* The cloned ropes now span the complete Available Rewards bridge. They begin
   at the lower edge of the main lootbox panel and finish at the upper edge of
   Your Prize Collection. The reward carousel is painted above them. */
html body .view-page.view-vault > .inventory-rewards-bridge {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .reward-showcase-inventory {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -24px !important;
  bottom: -46px !important;
  width: 100% !important;
  height: auto !important;
  z-index: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer > .inventory-lower-suspension {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

/* Remove the extra botanical ornaments from FILTER/RARITY completely and
   restore the controls to their original dimensions and text alignment. */
html body .view-page.view-vault .collection-control-botanical {
  display: none !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger {
  overflow: hidden !important;
}

/* Pin leave1.png to the physical bottom-right corner of the search field. The
   artwork keeps its natural aspect ratio and is large enough to read as a vine
   rather than a tiny icon. */
html body .view-page.view-vault .collection-search-field input {
  padding-right: 78px !important;
}
html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  top: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  opacity: .94 !important;
  transform: none !important;
  filter: drop-shadow(0 1px 1px rgba(1,7,3,.48)) !important;
  pointer-events: none !important;
}

/* Release the nested stacking contexts only; do not change any size, inset,
   position or carousel measurement. Both navigation arrows can now paint above
   charsit3.png while every other panel/character overlap remains unchanged. */
html body .view-page.view-vault > .inventory-hero {
  z-index: auto !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault .vault-carousel {
  isolation: auto !important;
}
html body .view-page.view-vault .inventory-character-charsit3 {
  z-index: 22 !important;
}
html body .view-page.view-vault .inventory-character-charsit2 {
  z-index: 23 !important;
}
html body .view-page.view-vault .carousel-arrow.left,
html body .view-page.view-vault .carousel-arrow.right {
  z-index: 60 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .inventory-rewards-bridge {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
  }
  html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
    top: -18px !important;
    bottom: -42px !important;
  }
  html body .view-page.view-vault .collection-search-field input {
    padding-right: 68px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 210px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
    top: -16px !important;
    bottom: -40px !important;
  }
  html body .view-page.view-vault .collection-search-field input {
    padding-right: 58px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 176px !important;
  }
}


/* v126 — shared Your History parity guard.
   The Minigames view renders the same HistoryPanel node as every other page.
   Keep every external decorative layer alive at the end of the critical
   cascade so later view CSS cannot suppress ropes, wooden boards or foliage. */
html body .main-layout > .history-column{
  position:relative!important;
  overflow:visible!important;
}
html body .main-layout > .history-column > .history-launch-stack{
  position:relative!important;
  overflow:visible!important;
  visibility:visible!important;
  z-index:12!important;
  isolation:isolate!important;
}
html body .main-layout > .history-column > .history-launch-stack::before,
html body .main-layout > .history-column > .history-launch-stack::after{
  content:""!important;
  display:block!important;
  visibility:visible!important;
}
html body .main-layout > .history-column > .history-launch-stack > .history-launch-row,
html body .main-layout > .history-column > .history-launch-stack > .history-launch-row::before,
html body .main-layout > .history-column > .history-launch-stack > .history-launch-row::after{
  visibility:visible!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic{
  position:relative!important;
  visibility:visible!important;
  isolation:isolate!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic::before,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic::after{
  content:""!important;
  display:block!important;
  visibility:visible!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .panel-header,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments > *{
  visibility:visible!important;
}


/* Upgrade chain responsive alignment — keep the upper chain.png pair tied
   to the exact artwork axes of the lower chain2.png pair at every desktop
   resolution. LootboxApp updates these two custom properties from the real
   .upgrade-catalogs position whenever the layout changes. The fallbacks keep
   the already-approved 2560x1440 placement before the first measurement. */
html body .view-page.view-upgrade::before{
  left:var(--upgrade-upper-chain-left,381px)!important;
  right:auto!important;
  translate:none!important;
}
html body .view-page.view-upgrade::after{
  right:var(--upgrade-upper-chain-right,393px)!important;
  left:auto!important;
  translate:none!important;
}



/* Staff Access login — mirror the Player Access panel artwork. */
.login-screen.staff-login-screen .login-card.staff-access-card{
  border: none !important;
  background: url("/images/titlebg.png") center / cover no-repeat !important;
  box-shadow: 0 35px 120px rgba(3,9,4,.62), inset 0 0 70px rgba(214,180,95,.045) !important;
  overflow: visible !important;
}
.login-screen.staff-login-screen .login-card.staff-access-card::before{
  content: "";
  position: absolute;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
  background: url("/images/titleframe.png") center / 100% 100% no-repeat;
}
.login-screen.staff-login-screen .login-card.staff-access-card .login-emblem{
  border: none !important;
  background: url("/images/titleframe3.png") center / cover no-repeat !important;
  box-shadow: 0 14px 36px rgba(3,9,4,.36), inset 0 1px 0 rgba(247,245,237,.08), inset 0 -10px 24px rgba(12,25,14,.18), inset 0 0 22px rgba(214,180,95,.08) !important;
  overflow: visible !important;
}
.login-screen.staff-login-screen .login-card.staff-access-card .login-emblem::before{
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  pointer-events: none;
  background: url("/images/titleframe2.png") center / 100% 100% no-repeat;
}
.login-screen.staff-login-screen .login-card.staff-access-card .login-emblem > img{
  position: relative;
  z-index: 1;
}



/* Login background orientation fix.
   Player Access and Staff Access must show the same orientation of bg.png. */
html body main.login-screen{
  background-image:none!important;
  background-color:#0d1710!important;
}
html body main.login-screen::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  background-color:#0d1710!important;
  background-image:url('/images/bg.png')!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  transform:scaleX(-1)!important;
  transform-origin:center center!important;
}


/* ===== Login audio: reuse the existing Your History hanging-plank system =====
   The planks/ropes are the real existing history-launch classes. These rules
   only size the login instance and lay the real BGM/SFX controls above them. */
html body .login-screen > .login-audio-controls.history-column{
  position:relative!important;
  z-index:3!important;
  width:min(330px,86vw)!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  margin:24px 0 0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}

html body .login-audio-controls.history-column > .history-launch-stack{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:7px!important;
  background:transparent!important;
}

/* Same two existing rope columns; only their vertical reach is shortened so
   they start at the lower edge of the login panel instead of the site topbar. */
html body .login-audio-controls.history-column > .history-launch-stack::before,
html body .login-audio-controls.history-column > .history-launch-stack::after{
  top:-48px!important;
  height:calc(48px + 100% - 8px)!important;
  display:block!important;
  content:""!important;
}
html body .login-audio-controls.history-column > .history-launch-stack::before{
  left:14px!important;
}
html body .login-audio-controls.history-column > .history-launch-stack::after{
  right:14px!important;
}

/* The empty existing launch buttons are the visual wood planks only. */
html body .login-audio-controls .login-audio-plank-visual{
  pointer-events:none!important;
  cursor:default!important;
}

/* Real volume controls overlay the exact existing wood plank. */
html body .login-audio-controls .login-audio-plank-controls{
  position:absolute!important;
  inset:0!important;
  z-index:7!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 34px!important;
  display:grid!important;
  grid-template-columns:20px 36px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  color:#f5ddb0!important;
}
html body .login-audio-controls .login-audio-plank-controls.is-muted{
  opacity:.66!important;
  filter:saturate(.65)!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-slider-label{
  color:#f5ddb0!important;
  font-size:9.5px!important;
  font-weight:950!important;
  letter-spacing:.105em!important;
  text-shadow:0 1px 0 rgba(69,35,12,.98),0 2px 2px rgba(30,14,5,.76)!important;
  opacity:1!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-icon-button.sound-toggle,
html body .login-audio-controls .login-audio-plank-controls .audio-icon-button.sound-toggle:hover{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  color:#f5ddb0!important;
  border-color:rgba(73,39,14,.94)!important;
  background:rgba(73,39,14,.72)!important;
  box-shadow:inset 0 1px rgba(255,224,160,.12),0 1px 2px rgba(30,14,5,.58)!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-icon-button.sound-toggle > span{
  font-size:11px!important;
  text-shadow:0 1px 0 rgba(69,35,12,.98)!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-volume-slider{
  width:100%!important;
  height:14px!important;
}

/* Do not let the site's mobile History rule hide the login ropes. */
@media(max-width:1100px){
  html body .login-audio-controls.history-column > .history-launch-stack::before,
  html body .login-audio-controls.history-column > .history-launch-stack::after{
    display:block!important;
    content:""!important;
  }
}
@media(max-width:680px){
  html body .login-screen > .login-audio-controls.history-column{
    width:min(300px,88vw)!important;
    margin-top:20px!important;
  }
  html body .login-audio-controls .login-audio-plank-controls{
    padding:0 30px!important;
    grid-template-columns:19px 32px minmax(0,1fr)!important;
    gap:6px!important;
  }
}



/* ===== Login audio refinement: ropes behind panel + previous slider skin ===== */

/* Keep the whole hanging-audio assembly one layer below the access panel.
   The wooden planks remain visible below it, while any rope overlap paints behind it. */
html body .login-screen > .login-card{
  z-index:3!important;
}
html body .login-screen > .login-audio-controls.history-column{
  z-index:2!important;
}
html body .login-audio-controls.history-column > .history-launch-stack{
  isolation:isolate!important;
}
html body .login-audio-controls.history-column > .history-launch-stack::before,
html body .login-audio-controls.history-column > .history-launch-stack::after{
  z-index:-1!important;
}
html body .login-audio-controls.history-column > .history-launch-stack > .history-launch-row{
  z-index:2!important;
}
html body .login-audio-controls .login-audio-plank-visual{
  z-index:2!important;
}
html body .login-audio-controls .login-audio-plank-controls{
  z-index:7!important;
}

/* Restore the warmer brown track + metallic-gold knob used in the previous version.
   This changes only the slider itself; the existing copied wooden planks stay untouched. */
html body .login-audio-controls .audio-volume-slider{
  height:14px!important;
}
html body .login-audio-controls .audio-volume-slider::-webkit-slider-runnable-track{
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(84,51,21,.98),rgba(106,65,28,.98))!important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(82,52,24,.26)!important;
}
html body .login-audio-controls .audio-volume-slider::-moz-range-track{
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(84,51,21,.98),rgba(106,65,28,.98))!important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(82,52,24,.26)!important;
}
html body .login-audio-controls .audio-volume-slider::-moz-range-progress{
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(171,112,45,.98),rgba(217,157,65,.98))!important;
  box-shadow:0 0 5px rgba(225,170,78,.18)!important;
}
html body .login-audio-controls .audio-volume-slider::-webkit-slider-thumb{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:14px!important;
  height:14px!important;
  margin-top:-5px!important;
  border-radius:50%!important;
  border:1px solid rgba(117,73,23,.94)!important;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,247,215,.95),
      rgba(248,219,128,.98) 40%,
      rgba(187,127,47,.99) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 2px 6px rgba(0,0,0,.26),
    0 0 9px rgba(247,214,122,.18)!important;
}
html body .login-audio-controls .audio-volume-slider::-moz-range-thumb{
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  border:1px solid rgba(117,73,23,.94)!important;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,247,215,.95),
      rgba(248,219,128,.98) 40%,
      rgba(187,127,47,.99) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 2px 6px rgba(0,0,0,.26),
    0 0 9px rgba(247,214,122,.18)!important;
}



/* ===== Login audio refinement: darker, slightly desaturated wooden planks ===== */
html body .login-audio-controls.history-column > .history-launch-stack > .history-launch-row > button.login-audio-plank-visual{
  filter:
    saturate(.72)
    brightness(.84)
    sepia(.10)
    contrast(1.03)
    drop-shadow(0 6px 4px rgba(18,8,3,.18))!important;
}



/* Inventory Card Pack OPEN keeps the exact same geometry while busy.
   Only prevent the longer "Opening doors…" label from wrapping; do not
   alter the button's authored OPEN height, padding or dimensions. */
html body .inventory-open-button-shell .inventory-open-button-label{
  white-space:nowrap!important;
}






/* ===== Login audio structural anchor v21 =====
   Card + BGM/SFX now share one physical stack. This prevents the borrowed
   History component from ever painting at its site/sidebar position during
   F5, hydration or manual logout. */
html body .login-screen > .login-access-stack{
  position:relative!important;
  z-index:3!important;
  width:min(480px,96vw)!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
html body .login-screen > .login-access-stack > .login-card{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  flex:0 0 auto!important;
}
html body .login-screen > .login-access-stack > .login-audio-controls.history-column{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  align-self:center!important;
  order:2!important;
  z-index:2!important;
  width:min(330px,86vw)!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  flex:0 0 auto!important;
  margin:24px 0 0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
  transform:none!important;
  translate:none!important;
}
html body .login-screen > .login-access-stack > .login-audio-controls.history-column > .history-launch-stack{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:680px){
  html body .login-screen > .login-access-stack{
    width:min(480px,96vw)!important;
  }
  html body .login-screen > .login-access-stack > .login-audio-controls.history-column{
    width:min(300px,88vw)!important;
    margin-top:20px!important;
  }
}



/* ===== Staff topbar Venue OPEN / CLOSED physical selector ===== */
html body .staff-venue-access-switch{
  position:relative!important;
  width:142px!important;
  height:32px!important;
  flex:0 0 142px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:stretch!important;
  padding:3px!important;
  border:1px solid rgba(220,191,106,.26)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(7,18,12,.98),rgba(15,31,21,.98))!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.035),0 5px 13px rgba(0,0,0,.18)!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
html body .staff-venue-access-switch::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:3px!important;
  left:3px!important;
  width:calc(50% - 3px)!important;
  height:26px!important;
  border-radius:5px!important;
  transform:translateX(0)!important;
  background:linear-gradient(180deg,#4f8f59,#285334)!important;
  border:1px solid rgba(120,211,132,.52)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 10px rgba(79,173,91,.18),0 2px 4px rgba(0,0,0,.42)!important;
  transition:transform .20s cubic-bezier(.22,.8,.28,1),background .20s ease,border-color .20s ease,box-shadow .20s ease!important;
}
html body .staff-venue-access-switch.is-closed::before{
  transform:translateX(100%)!important;
  background:linear-gradient(180deg,#9a4b43,#5c2925)!important;
  border-color:rgba(229,116,103,.58)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 10px rgba(205,79,68,.18),0 2px 4px rgba(0,0,0,.42)!important;
}
html body .staff-venue-access-switch>button{
  appearance:none!important;
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  padding:0 5px!important;
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  color:rgba(176,190,174,.58)!important;
  font:950 8px/1 inherit!important;
  letter-spacing:.12em!important;
  text-shadow:0 1px 1px rgba(0,0,0,.56)!important;
  cursor:pointer!important;
}
html body .staff-venue-access-switch>button::before{
  content:""!important;
  display:inline-block!important;
  width:6px!important;
  height:6px!important;
  margin-right:5px!important;
  border-radius:50%!important;
  vertical-align:1px!important;
  background:currentColor!important;
  box-shadow:0 0 5px currentColor!important;
}
html body .staff-venue-access-switch.is-open>button:first-child.is-selected{color:#d8f4d9!important;}
html body .staff-venue-access-switch.is-closed>button:last-child.is-selected{color:#ffd6d1!important;}
html body .staff-venue-access-switch.is-disabled{opacity:.52!important;filter:saturate(.55)!important;}
html body .staff-venue-access-switch.is-disabled>button{cursor:not-allowed!important;}
@media(max-width:760px){
  html body .staff-venue-access-switch{width:132px!important;flex-basis:132px!important;}
}



/* ===== Staff Venue selector labels: explicit OPEN / CLOSED text ===== */
html body .staff-venue-access-switch{
  width:154px!important;
  flex-basis:154px!important;
}
html body .staff-venue-access-switch>button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 7px!important;
  font-size:10px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.10em!important;
  text-indent:0!important;
  overflow:visible!important;
}
html body .staff-venue-access-switch>button::before{
  content:none!important;
  display:none!important;
}
html body .staff-venue-access-switch .staff-venue-access-label{
  display:inline-block!important;
  position:relative!important;
  z-index:2!important;
  font-size:10px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
  text-indent:0!important;
  color:inherit!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(max-width:760px){
  html body .staff-venue-access-switch{
    width:148px!important;
    flex-basis:148px!important;
  }
}



/* ===== Staff Venue selector: force literal OPEN / CLOSED labels ===== */
html body .staff-venue-access-switch{
  width:170px!important;
  flex:0 0 170px!important;
}
html body .staff-venue-access-switch>button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  padding:0 8px!important;
  overflow:visible!important;
  text-indent:0!important;
  font-size:0!important;
}
html body .staff-venue-access-switch>button::before{
  content:none!important;
  display:none!important;
}
html body .staff-venue-access-switch>button::after{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  color:inherit!important;
  font:950 10px/1.05 Arial,sans-serif!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
  text-indent:0!important;
  opacity:1!important;
  visibility:visible!important;
}
html body .staff-venue-access-switch>button:first-child::after{
  content:"OPEN"!important;
}
html body .staff-venue-access-switch>button:last-child::after{
  content:"CLOSED"!important;
}
html body .staff-venue-access-switch .staff-venue-access-label{
  display:none!important;
}


/* History spacing v127 — keep the original frame/title stacking untouched.
   The title/header remains below the upper molding; increasing the header's
   normal-flow top margin moves both the carved plank and the records beneath it
   down together, without changing z-index or relying on transient transforms. */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  margin:21px 15px 8px!important;
}
@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    margin:17px 11px 6px!important;
  }
}


/* ========================================================================== */
/* History placement v128 — true plank displacement + matching flow height    */
/* The frame keeps its existing z-order. The plank itself moves down and the  */
/* header reserves that space so the records move with it after hard refresh. */
/* ========================================================================== */
html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
  margin:21px 15px 8px!important;
  flex-basis:66px!important;
  min-height:66px!important;
  height:66px!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
  transform:translateY(22px)!important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-list{
  margin:0 12px 11px!important;
  padding-top:15px!important;
}
@media(max-width:680px){
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header{
    margin:17px 11px 6px!important;
    flex-basis:61px!important;
    min-height:61px!important;
    height:61px!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .panel-header > .history-panel-title-plank{
    transform:translateY(18px)!important;
  }
  html body .history-column > .history-panel.history-panel-dynamic > .history-list{
    margin:0 10px 9px!important;
    padding-top:12px!important;
  }
}


/* History v135 — fixed top crop from the exact v35 frame. The complete v35
   frame still supplies the side/bottom rails; this overlay only prevents the
   top branch from changing thickness with history length. */
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame{
  position:absolute!important;
  top:-4px!important;
  left:-4px!important;
  right:-4px!important;
  height:58px!important;
  z-index:18!important;
  display:block!important;
  overflow:hidden!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 3px 2px rgba(20,10,4,.72)) drop-shadow(0 8px 7px rgba(1,8,4,.34))!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame > img{
  position:absolute!important;
  top:0!important;
  left:0!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  transform-origin:50% 0!important;
  transform:scaleY(4.6)!important;
  pointer-events:none!important;
  user-select:none!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art{
  display:none!important;
  content:none!important;
}
@media(max-width:680px){
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame{
    top:-3px!important;
    left:-3px!important;
    right:-3px!important;
    height:52px!important;
  }
}


/* History v136 — one canonical upper molding for every account. */
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art{
  display:none!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top{
  position:absolute!important;
  top:-2px!important;
  left:6px!important;
  right:6px!important;
  height:62px!important;
  z-index:18!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 4px 3px rgba(20,10,4,.66)) drop-shadow(0 9px 8px rgba(1,8,4,.32))!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center!important;
  transform:none!important;
  pointer-events:none!important;
  user-select:none!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header{
  margin:21px 15px 8px!important;
  flex-basis:66px!important;
  min-height:66px!important;
  height:66px!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header > .history-panel-title-plank{
  transform:translateY(22px)!important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list{
  margin:0 12px 11px!important;
  padding-top:15px!important;
}
@media(max-width:680px){
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top{
    top:-1px!important;
    left:5px!important;
    right:5px!important;
    height:56px!important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header{
    margin:17px 11px 6px!important;
    flex-basis:61px!important;
    min-height:61px!important;
    height:61px!important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header > .history-panel-title-plank{
    transform:translateY(18px)!important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list{
    margin:0 10px 9px!important;
    padding-top:12px!important;
  }
}

/* v142: Card Pack support tooltip must escape the card clipping/stacking context. */
html body .box-card:has(> .card-pack-support-symbol:hover),
html body .box-card:has(> .card-pack-support-symbol:focus-visible),
html body .box-card:has(> .card-pack-support-symbol:focus-within){overflow:visible!important;z-index:2147481000!important;}
html body .box-card > .card-pack-support-symbol{z-index:2147482000!important;}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip{z-index:2147483000!important;}

/* v142.1 — lift the Card Pack help tooltip above the complete Hall stacking chain. */
html body .view-shop .coffer-section-block:has(.card-pack-support-symbol:hover),
html body .view-shop .coffer-section-block:has(.card-pack-support-symbol:focus-visible),
html body .view-shop .coffer-section-block:has(.card-pack-support-symbol:focus-within){z-index:2147480000!important;overflow:visible!important;}
html body .view-shop .coffer-section-block .grid:has(.card-pack-support-symbol:hover),
html body .view-shop .coffer-section-block .grid:has(.card-pack-support-symbol:focus-visible),
html body .view-shop .coffer-section-block .grid:has(.card-pack-support-symbol:focus-within){z-index:2147480500!important;overflow:visible!important;}
html body .view-shop .coffer-sections:has(.card-pack-support-symbol:hover),
html body .view-shop .coffer-sections:has(.card-pack-support-symbol:focus-visible),
html body .view-shop .coffer-sections:has(.card-pack-support-symbol:focus-within){z-index:2147479000!important;overflow:visible!important;}

/* v198 — explicit hold hint under Attempt Upgrade without moving its label. */
html body .view-upgrade .upgrade-attempt-button > .upgrade-attempt-hold-label{position:absolute!important;left:50%!important;bottom:3px!important;z-index:7!important;display:block!important;margin:0!important;padding:0!important;transform:translateX(-50%)!important;color:currentColor!important;opacity:.72!important;font:inherit!important;font-size:7px!important;font-weight:800!important;line-height:1!important;letter-spacing:.08em!important;white-space:nowrap!important;pointer-events:none!important;}
@media (max-width:680px){html body .view-upgrade .upgrade-attempt-button > .upgrade-attempt-hold-label{bottom:2px!important;font-size:5.5px!important;}}

/* v198 — keep authored VIP artwork sized correctly before the full stylesheet arrives. */
.vip-player-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:18px!important;margin-left:7px!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font-size:0!important;line-height:0!important;vertical-align:middle!important;}
.vip-player-mark .vip-tag-art{display:block!important;width:auto!important;height:18px!important;max-width:100%!important;object-fit:contain!important;pointer-events:none!important;}
.player-name .vip-player-mark{margin-left:0!important;margin-right:7px!important;}
.user-area-badges .vip-player-mark{width:auto!important;height:14px!important;margin:0!important;padding:0!important;transform:scale(1.46)!important;transform-origin:left center!important;}
.user-area-badges .vip-player-mark .vip-tag-art{height:14px!important;}

/* ████  ████  █   █ █████ ████  © */
/* █░░░█ █░░░█  █ █ ░█░░░░░█░░░█   */
/* ████░░████░░  █ ░ ████░░████░░  */
/* █░░░█ █░░█░ ░ █░ ░█░░░░ █░░█░ ░ */
/* ████░░█░░░█░  █░░ █████░█░░░█░  */
/* ░░░░ ░░░  ░   ░░  ░░░░░ ░░  ░   */
/* ░░░░  ░   ░   ░   ░░░░░ ░   ░   */


@layer bryer-runtime-lifecycle {
  html[data-site-hidden="true"] *,
  html[data-site-hidden="true"] *::before,
  html[data-site-hidden="true"] *::after,
  [data-performance-offscreen="true"],
  [data-performance-offscreen="true"]::before,
  [data-performance-offscreen="true"]::after,
  [data-performance-offscreen="true"] *,
  [data-performance-offscreen="true"] *::before,
  [data-performance-offscreen="true"] *::after {
    animation-play-state: paused !important;
  }

   

  .carousel-coffer[data-carousel-artwork="deferred"]::before,
  .carousel-coffer[data-carousel-artwork="deferred"]::after {
    content: none !important;
  }
}

 

.upgrade-viewport-vine-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: upgradeViewportSvgSway 9.6s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .upgrade-viewport-vine-motion { animation-duration: 11s !important; }
}
@layer bryer-runtime-lifecycle {
  .upgrade-viewport-vine-motion > .upgrade-viewport-vine-svg {
    animation: none !important;
    transform: none !important;
  }
}
 



@supports (translate: 1px) {
  .vault-carousel .carousel-viewport[data-carousel-motion="ready"] > .carousel-background-glow {
    left: 0 !important;
    translate: calc(var(--carousel-motion-width) * -.34) 0;
    animation-name: bryerCarouselTravellingGlow;
  }
  .vault-carousel .carousel-viewport[data-carousel-motion="ready"] > .carousel-background-sweep {
    left: 0 !important;
    translate: calc(var(--carousel-motion-width) * -.28) 0;
    animation-name: bryerCarouselTravellingSweep;
  }
  @keyframes bryerCarouselTravellingGlow {
    0%, 10% {
      translate: calc(var(--carousel-motion-width) * -.34) 0;
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(.84);
    }
    24% { opacity: .78; }
    50% {
      translate: calc(var(--carousel-motion-width) * .5) 0;
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1.08);
    }
    76% { opacity: .72; }
    90%, 100% {
      translate: calc(var(--carousel-motion-width) * 1.34) 0;
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(.88);
    }
  }
  @keyframes bryerCarouselTravellingSweep {
    0%, 12% { translate: calc(var(--carousel-motion-width) * -.28) 0; opacity: 0; }
    28% { opacity: .72; }
    50% { opacity: .95; }
    72% { opacity: .62; }
    88%, 100% { translate: calc(var(--carousel-motion-width) * 1.08) 0; opacity: 0; }
  }
}
 


@supports (translate: 1px) {
  .view-shop .mhytic-coffer-seal-sheen::before {
    left: -46% !important;
    animation-name: bryerHallMythicSheen !important;
  }
  .view-shop .limited-time-stamp.limited-time-hall::after {
    left: -38% !important;
    animation-name: bryerHallLimitedSheen !important;
  }

  @keyframes bryerHallMythicSheen {
    0%, 56% { translate: 0 0; opacity: 0; }
    62% { opacity: .42; }
    78% { translate: 464.705882353% 0; opacity: .72; }
    86%, 100% { translate: 464.705882353% 0; opacity: 0; }
  }
  @keyframes bryerHallLimitedSheen {
    0%, 68% { translate: 0 0; opacity: 0; }
    73% { opacity: .72; }
    88% { translate: 650% 0; opacity: .18; }
    100% { translate: 650% 0; opacity: 0; }
  }
}

/* bryer-css-atlas-v61: original image URLs remain fallbacks */
html[data-bryer-css-atlas-v61="1"] {
  --bryer-css-v61-bg: none;
  --bryer-css-v61-bgshare: none;
  --bryer-css-v61-titleframe3: none;
  --bryer-css-v61-titlebg: none;
  --bryer-css-v61-legendarytag: none;
  --bryer-css-v61-bg5: none;
  --bryer-css-v61-upgradebg: none;
  --bryer-css-v61-upgrade-offer-slot-placeholder: none;
  --bryer-css-v61-cardsbg: none;
  --bryer-css-v61-cardsbg2: none;
  --bryer-css-v61-coinschoice: none;
  --bryer-css-v61-flipcoinbg: none;
  --bryer-css-v61-coinflipborder: none;
}
/* bryer-css-atlas-v60: original image URLs remain as the disabled-mode fallback */
html[data-bryer-css-atlas="v60"] {
  --bryer-css-v60-availablerewards: none;
  --bryer-css-v60-cardsbutton: none;
  --bryer-css-v60-cardslegendary: none;
  --bryer-css-v60-cardslegendary2: none;
  --bryer-css-v60-cardslegendary3: none;
  --bryer-css-v60-cobweb: none;
  --bryer-css-v60-halloweenpanel: none;
  --bryer-css-v60-mythicbg: none;
  --bryer-css-v60-mythicpanel: none;
  --bryer-css-v60-mythicpanel2: none;
  --bryer-css-v60-commonframe: none;
  --bryer-css-v60-uncommonframe: none;
  --bryer-css-v60-rareframe: none;
  --bryer-css-v60-epicframe: none;
  --bryer-css-v60-legendaryframe: none;
  --bryer-css-v60-coinflipdesc: none;
  --bryer-css-v60-coinfliptitle: none;
  --bryer-css-v60-betsbuttons: none;
  --bryer-css-v60-betsbuttons2: none;
  --bryer-css-v60-coinbuttonbg: none;
  --bryer-css-v60-flipcoinbutton: none;
  --bryer-css-v60-slotminus: none;
  --bryer-css-v60-slotplus: none;
  --bryer-css-v60-slotmaxbet: none;
  --bryer-css-v60-slotautoplay: none;
  --bryer-css-v60-slotbg: none;
  --bryer-css-v60-fullpackagelegendary: none;
  --bryer-css-v60-halloweenbg: none;
  --bryer-css-v60-reviewbg: none;
  --bryer-css-v60-reviewslots: none;
  --bryer-css-v60-writereview: none;
  --bryer-css-v60-topbarmobile: none;
}
/* ████  ████  █   █ █████ ████  © */
/* █░░░█ █░░░█  █ █ ░█░░░░░█░░░█   */
/* ████░░████░░  █ ░ ████░░████░░  */
/* █░░░█ █░░█░ ░ █░ ░█░░░░ █░░█░ ░ */
/* ████░░█░░░█░  █░░ █████░█░░░█░  */
/* ░░░░ ░░░  ░   ░░  ░░░░░ ░░  ░   */
/* ░░░░  ░   ░   ░   ░░░░░ ░   ░   */

/* Bryer's Hideout: shared colors, surfaces and base layout. */
:root {
  --bg: #101710;
  --bg-deep: #0a100b;
  --forest: #2D3E2E;
  --forest-light: #3d5540;
  --forest-soft: #263829;
  --panel: rgba(35, 51, 37, 0.9);
  --panel-strong: rgba(27, 42, 30, 0.98);
  --line: rgba(214, 180, 95, 0.28);
  --gold: #d6b45f;
  --gold-soft: #f0d990;
  --ivory: #f7f5ed;
  --text: #f7f5ed;
  --muted: #b7c1b5;
  --danger: #ff9a9a;
  --success: #a9e4b4;
  --shadow: 0 24px 80px rgba(4, 10, 5, 0.48);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(95, 74, 185, 0.22), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(23, 130, 145, 0.15), transparent 28%),
    linear-gradient(145deg, #080914 0%, #0d0d18 48%, #05060b 100%);
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  min-height: 100vh;
  position: relative;
}
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sparkles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0;
  animation: drift 7s linear infinite;
}
.sparkles span:nth-child(1) {
  left: 8%;
  animation-delay: 0s;
}
.sparkles span:nth-child(2) {
  left: 23%;
  animation-delay: 2.4s;
}
.sparkles span:nth-child(3) {
  left: 48%;
  animation-delay: 1.1s;
}
.sparkles span:nth-child(4) {
  left: 72%;
  animation-delay: 4.2s;
}
.sparkles span:nth-child(5) {
  left: 90%;
  animation-delay: 3s;
}
@keyframes drift {
  0% {
    transform: translateY(110vh) scale(.4);
    opacity: 0;
  }
  12% { opacity: .7; }
  100% {
    transform: translateY(-10vh) scale(1.8);
    opacity: 0;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px clamp(18px, 4vw, 56px);
  background: rgba(7, 8, 16, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(232,196,103,.25), rgba(45,62,46,.72));
  border: 1px solid rgba(232,196,103,.35);
  box-shadow: inset 0 0 22px rgba(232,196,103,.12), 0 0 30px rgba(45,62,46,.22);
}
.brand-mark img {
  width: 27px;
  height: 27px;
}
.brand h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: .06em;
}
.brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.nav-tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.nav-tab {
  border: 0;
  border-radius: 7px;
  padding: 9px 18px;
  color: var(--muted);
  background: transparent;
  transition: .22s ease;
}
.nav-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}
.nav-tab.active {
  color: #19160d;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 8px 22px rgba(232,196,103,.2);
}

.player-chip {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
.player-meta { text-align: right; }
.player-name { font-weight: 700; }
.player-balance {
  color: var(--gold-soft);
  font-size: 13px;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #49654c, #1a281c 72%);
  border: 1px solid rgba(214,180,95,.55);
  font-weight: 800;
  color: #fff;
}

.ticker-wrap { padding: 14px clamp(18px, 4vw, 56px) 0; }
.ticker {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid rgba(232,196,103,.28);
  background: linear-gradient(90deg, rgba(232,196,103,.07), rgba(45,62,46,.45), rgba(247,245,237,.03));
  box-shadow: inset 0 0 30px rgba(232,196,103,.025);
  overflow: hidden;
}
.ticker-label {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
  white-space: nowrap;
}
.ticker-message {
  animation: tickerIn .55s ease;
  text-align: center;
}
@keyframes tickerIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

.main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 24px;
  padding: 24px clamp(18px, 4vw, 56px) 48px;
}
.content { min-width: 0; }
.hero { margin-bottom: 24px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 800;
  text-transform: uppercase;
}
.hero h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  max-width: 820px;
}
.hero p {
  color: var(--muted);
  max-width: 720px;
  line-height: 1.7;
}

.catalog-tools {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(16,17,29,.72);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  height: 44px;
  border: 1px solid rgba(232,196,103,.22);
  border-radius: 9px;
  background: rgba(0,0,0,.2);
}
.search-box span {
  color: var(--gold);
  font-size: 22px;
  transform: rotate(-15deg);
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.search-box input::placeholder { color: #777484; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.filter-chip {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  transition: .2s ease;
}
.filter-chip:hover {
  color: var(--text);
  border-color: rgba(232,196,103,.28);
  transform: translateY(-1px);
}
.filter-chip.active {
  color: #19160d;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(232,196,103,.15);
}
.catalog-count {
  margin-top: 11px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

/* Coffer Hall: the catalog grid and purchase-card interactions. */
.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.box-card {
  --accent: #2D3E2E;
  position: relative;
  overflow: hidden;
  min-height: 372px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(29,30,49,.95), rgba(13,14,25,.98));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  isolation: isolate;
}

.box-card::before {
  content: "";
  position: absolute;
  inset: -40% -15% auto;
  height: 260px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 67%);
  pointer-events: none;
}
.box-card.is-buying { animation: cardBinding .7s ease-in-out infinite alternate; }
.box-card.is-purchased { animation: cardClaimed .9s cubic-bezier(.2,1.1,.3,1); }
@keyframes cardBinding { from { box-shadow: var(--shadow); } to { box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 0 42px color-mix(in srgb, var(--accent) 38%, transparent); } }
@keyframes cardClaimed { 0% { transform: scale(1); } 38% { transform: scale(1.035) translateY(-5px); } 100% { transform: scale(1); } }

.box-visual {
  height: 172px;
  display: grid;
  place-items: center;
  position: relative;
}
.box-visual img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(0,0,0,.4));
  transition: transform .25s ease;
  z-index: 2;
}

.box-card.is-buying .box-visual img { animation: chestBind .8s ease-in-out infinite alternate; }
.box-card.is-purchased .box-visual img { animation: chestClaimed .75s cubic-bezier(.2,1.4,.35,1); }
@keyframes chestBind { to { transform: translateY(-9px) scale(1.06); filter: drop-shadow(0 20px 28px color-mix(in srgb, var(--accent) 42%, transparent)); } }
@keyframes chestClaimed { 0% { transform: scale(.92); } 45% { transform: scale(1.16) rotate(2deg); } 100% { transform: scale(1); } }
.box-glow {
  position: absolute;
  width: 140px;
  height: 52px;
  border-radius: 50%;
  bottom: 14px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  filter: blur(18px);
  opacity: .75;
}
.binding-rings {
  position: absolute;
  inset: 15px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
.binding-rings i {
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, white 20%);
  animation: bindingRing 1.1s ease-out infinite;
}
.binding-rings i:nth-child(2) { animation-delay: .28s; }
.binding-rings i:nth-child(3) { animation-delay: .56s; }
@keyframes bindingRing { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.65); opacity: 0; } }
.purchase-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: grid;
  place-items: center;
}
.purchase-burst span {
  --angle: calc(var(--i) * 30deg);
  position: absolute;
  color: var(--gold-soft);
  text-shadow: 0 0 12px var(--gold);
  animation: burstStar .85s ease-out forwards;
  transform: rotate(var(--angle)) translateY(0);
}
@keyframes burstStar {
  0% {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(0) scale(.3);
  }
  20% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(-150px) scale(1.25);
  }
}

.box-body {
  padding: 0 16px 17px;
  position: relative;
}
.box-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 9px;
}
.box-title-row h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.1;
}
.price {
  color: var(--gold-soft);
  font-weight: 800;
  white-space: nowrap;
}
.box-title-row .price { font-size: 12px; }
.box-description {
  color: var(--muted);
  line-height: 1.5;
  min-height: 59px;
  font-size: 13px;
}
.qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.qty-control label {
  color: var(--muted);
  font-size: 12px;
}
.qty-input {
  width: 60px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  color: var(--text);
  text-align: center;
  outline: none;
}
.qty-input:focus { border-color: rgba(232,196,103,.5); }
.qty-control .price {
  margin-left: auto;
  font-size: 12px;
}
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.card-actions .primary { grid-column: span 2; }

.btn {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.075);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.btn.primary {
  color: #17120a;
  font-weight: 800;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 10px 25px rgba(232,196,103,.18);
}
.btn.primary:hover:not(:disabled) { box-shadow: 0 14px 34px rgba(232,196,103,.28), 0 0 22px rgba(232,196,103,.14); }

.history-panel {
  align-self: start;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.panel-header {
  padding: 17px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-header h3 {
  margin: 0;
  font-size: 15px;
}
.panel-header span {
  color: var(--muted);
  font-size: 12px;
}
.history-list {
  padding: 10px;
  max-height: calc(100vh - 185px);
  overflow: auto;
}
.history-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  padding: 11px;
  border-radius: 9px;
  transition: background .18s;
  border: 1px solid transparent;
}
.history-item + .history-item { margin-top: 2px; }
.history-item:hover {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.04);
}
.reward-icon {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
  background: #11121f;
  border: 1px solid rgba(255,255,255,.08);
}
.history-gil-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(232,196,103,.35);
  background: radial-gradient(circle, #6d5724, #243026);
  color: var(--gold-soft);
  font-family: Georgia, serif;
  font-weight: 900;
  box-shadow: inset 0 0 12px rgba(232,196,103,.14);
}
.history-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.history-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.history-spend strong { color: #ffc88a; }
.balance-after { color: #a7b49f !important; }
.rarity-none { color: #9896a1; }
.rarity-common { color: #e7e7e7; }
.rarity-uncommon { color: #79e5a1; }
.rarity-rare { color: #73b7ff; }
.rarity-epic { color: #c38cff; }
.rarity-legendary {
  color: #ffd66f;
  text-shadow: 0 0 16px rgba(255,214,111,.35);
}

/* Inventory and opening sequence: selected coffers, reels and reward reveals. */
.open-stage {
  min-height: 590px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 50% 40%, rgba(214,180,95,.08), transparent 38%), rgba(20,31,22,.78);
  box-shadow: var(--shadow);
  padding: 24px;
  overflow: hidden;
}
.inventory-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.inventory-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  background: rgba(255,255,255,.035);
  transition: .2s ease;
}
.inventory-pill:hover { transform: translateY(-2px); }
.inventory-pill.active {
  border-color: color-mix(in srgb, var(--accent) 65%, white 8%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, rgba(255,255,255,.035));
}
.inventory-pill img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}
.inventory-pill span {
  font-weight: 800;
  color: var(--gold-soft);
}
.selected-box {
  --accent: #2D3E2E;
  text-align: center;
  position: relative;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.selected-box-aura {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent), transparent 66%);
  filter: blur(12px);
  animation: auraPulse 3s ease-in-out infinite;
}
@keyframes auraPulse { 50% { transform: scale(1.12); opacity: .65; } }
.selected-box > img {
  position: relative;
  width: min(230px, 60vw);
  height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 30px 26px rgba(0,0,0,.46));
  animation: hoverChest 3.5s ease-in-out infinite;
}
@keyframes hoverChest { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.selected-box h3 {
  position: relative;
  font-family: Georgia, serif;
  font-size: 30px;
  margin: 8px 0;
}
.quantity-large {
  position: relative;
  font-size: 18px;
  color: var(--gold-soft);
  font-weight: 900;
  margin-bottom: 17px;
}
.open-count-picker {
  position: relative;
  display: grid;
  gap: 9px;
  justify-items: center;
  margin-bottom: 18px;
}
.open-count-picker > span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.open-count-picker > div {
  display: flex;
  gap: 8px;
}
.open-count-picker button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  background: rgba(255,255,255,.04);
  transition: .2s ease;
}
.open-count-picker button:hover {
  transform: translateY(-2px);
  border-color: rgba(232,196,103,.3);
}
.open-count-picker button.active {
  color: #17120a;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 8px 24px rgba(232,196,103,.2);
}
.open-count-picker small { color: #7f7b8d; }
.open-button {
  position: relative;
  min-width: 220px;
  font-size: 15px;
  padding: 14px 24px;
}

.reel-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: radial-gradient(circle at 50% 45%, rgba(45,62,46,.28), transparent 45%), rgba(6,11,7,.96);
  display: grid;
  place-items: center;
  padding: 18px;
  backdrop-filter: blur(14px);
  animation: fadeIn .28s ease;
  overflow: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.reel-overlay.is-revealed { animation: revealFlash .8s ease; }
@keyframes revealFlash { 0% { background-color: rgba(255,238,176,.12); } 100% { background-color: transparent; } }
.reel-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.reel-atmosphere span {
  position: absolute;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .12;
  animation: atmosphereDrift 8s ease-in-out infinite alternate;
}
.reel-atmosphere span:nth-child(1) {
  left: -10%;
  top: -20%;
  background: #4e6c52;
}
.reel-atmosphere span:nth-child(2) {
  right: -10%;
  top: 15%;
  background: #f0d990;
  animation-delay: -2s;
}
.reel-atmosphere span:nth-child(3) {
  left: 30%;
  bottom: -30%;
  background: var(--gold);
  animation-delay: -4s;
}
@keyframes atmosphereDrift { to { transform: translate3d(8vw, 6vh, 0) scale(1.12); } }
.reel-scene {
  position: relative;
  width: min(1180px, 96vw);
  text-align: center;
  padding: 24px 0;
}
.reel-title {
  font-family: Georgia, serif;
  font-size: clamp(27px, 4vw, 48px);
  margin-bottom: 22px;
  text-shadow: 0 0 30px rgba(232,196,103,.12);
}
.reel-stack {
  display: grid;
  gap: 11px;
}
.reel-line {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  opacity: 0;
  animation: reelLineIn .45s ease forwards;
  animation-delay: var(--row-delay);
}
@keyframes reelLineIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
.reel-number {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: .12em;
}
.reel-window {
  position: relative;
  overflow: hidden;
  height: 142px;
  border: 1px solid rgba(232,196,103,.28);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(5,9,6,.85), rgba(42,58,44,.97) 20%, rgba(42,58,44,.97) 80%, rgba(5,9,6,.85));
  box-shadow: 0 0 44px rgba(214,180,95,.12), inset 0 0 25px rgba(3,8,4,.34);
}
.reel-scene.single .reel-window { height: 176px; }
.reel-window::before, .reel-window::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
}
.reel-window::before {
  left: 0;
  background: linear-gradient(90deg, #05060b, transparent);
}
.reel-window::after {
  right: 0;
  background: linear-gradient(-90deg, #05060b, transparent);
}
.marker {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 3px;
  background: var(--gold-soft);
  box-shadow: 0 0 18px var(--gold), 0 0 42px var(--gold);
  animation: markerPulse .65s ease-in-out infinite alternate;
}
@keyframes markerPulse { to { box-shadow: 0 0 24px var(--gold), 0 0 60px var(--gold); } }
.marker::before, .marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.marker::before {
  top: 0;
  border-top: 14px solid var(--gold-soft);
}
.marker::after {
  bottom: 0;
  border-bottom: 14px solid var(--gold-soft);
}
.reel-track {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 100%;
  padding-left: calc(50% - 72px);
  will-change: transform;
  transform: translate3d(0,0,0);
}
.reel-card {
  flex: 0 0 144px;
  height: 112px;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(160deg, rgba(38,40,62,.96), rgba(15,16,28,.98));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  box-shadow: inset 0 0 18px rgba(255,255,255,.025);
}
.reel-scene.single .reel-card { height: 136px; }
.reel-card img {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
}
.reel-scene.single .reel-card img {
  width: 67px;
  height: 67px;
}
.reel-card strong {
  font-size: 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summoning-seal {
  position: relative;
  width: 270px;
  height: 270px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.summoning-seal img {
  width: 145px;
  height: 145px;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.55));
  animation: summonChest 1.1s ease-in-out infinite alternate;
}
.summoning-seal i {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(232,196,103,.42);
  animation: summonRing 1.6s linear infinite;
}
.summoning-seal i:nth-child(2) {
  inset: 0;
  animation-direction: reverse;
  animation-duration: 2.2s;
  border-style: dashed;
}
.summoning-seal i:nth-child(3) {
  inset: 40px;
  animation-duration: 1.15s;
  border-color: rgba(214,180,95,.55);
}
@keyframes summonChest { to { transform: translateY(-10px) scale(1.05); filter: drop-shadow(0 26px 35px rgba(214,180,95,.24)); } }
@keyframes summonRing { to { transform: rotate(360deg); } }

.result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 24px auto 0;
}
.result-grid.count-1 {
  grid-template-columns: minmax(280px, 460px);
  justify-content: center;
}
.result-grid.count-2 {
  grid-template-columns: repeat(2, minmax(240px, 360px));
  justify-content: center;
}
.result-grid.count-3 { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
.result-grid.count-4 { grid-template-columns: repeat(4, minmax(190px, 1fr)); }
.result-card {
  --result-delay: 0ms;
  position: relative;
  overflow: hidden;
  padding: 19px 14px;
  border-radius: 12px;
  border: 1px solid rgba(232,196,103,.3);
  background: rgba(20,21,35,.96);
  box-shadow: 0 0 55px rgba(232,196,103,.09);
  opacity: 0;
  animation: resultPop .58s cubic-bezier(.2,1.4,.35,1) forwards;
  animation-delay: var(--result-delay);
}
@keyframes resultPop { from { opacity: 0; transform: scale(.78) translateY(22px); filter: blur(8px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } }
.result-card img {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
}
.result-kicker {
  display: block;
  margin-top: 10px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.result-card h3 {
  position: relative;
  font-family: Georgia, serif;
  font-size: clamp(18px, 2vw, 27px);
  margin: 7px 0 6px;
}
.result-card p {
  position: relative;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.result-card .reward-gil {
  color: var(--gold-soft);
  font-size: 15px;
}
.result-flare {
  position: absolute;
  width: 190px;
  height: 190px;
  left: 50%;
  top: -90px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,196,103,.2), transparent 68%);
  animation: flarePulse 2s ease-in-out infinite;
}
@keyframes flarePulse { 50% { transform: translateX(-50%) scale(1.18); opacity: .55; } }
.continue-button {
  margin-top: 22px;
  min-width: 210px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(2,3,8,.82);
  display: grid;
  place-items: center;
  padding: 18px;
  backdrop-filter: blur(10px);
  animation: fadeIn .2s ease;
}
.modal {
  width: min(760px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}
.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: rgba(25,27,45,.97);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.modal-header h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 24px;
}
.close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
}
.reward-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.reward-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  transition: .2s ease;
}
.reward-row:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.04);
}
.reward-row img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
}
.reward-row h4 {
  margin: 0 0 4px;
  font-size: 14px;
}
.reward-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.chance {
  color: var(--gold-soft);
  font-weight: 800;
  font-size: 12px;
}

/* Access screen, loading states and player feedback. */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
}
.login-card {
  width: min(480px, 96vw);
  padding: 34px;
  border-radius: 17px;
  border: 1px solid rgba(232,196,103,.28);
  background: rgba(29,44,31,.94);
  box-shadow: 0 35px 120px rgba(3,9,4,.62), inset 0 0 70px rgba(214,180,95,.045);
  text-align: center;
  backdrop-filter: blur(18px);
}
.login-emblem {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--bryer-css-v61-titleframe3, url('/images/titleframe3.png')) center / cover no-repeat;
  border: none;
  animation: emblemFloat 3.2s ease-in-out infinite;
}
@keyframes emblemFloat { 50% { transform: translateY(-7px); box-shadow: 0 16px 40px rgba(214,180,95,.16); } }
.login-emblem img {
  width: 62px;
  height: 62px;
}
.login-card h1 {
  font-family: Georgia, serif;
  font-size: 34px;
  margin: 0 0 10px;
}
.login-card p {
  color: var(--muted);
  line-height: 1.6;
}
.code-input {
  width: 100%;
  margin: 18px 0 12px;
  padding: 15px 16px;
  border-radius: 9px;
  border: 1px solid rgba(232,196,103,.3);
  background: rgba(0,0,0,.28);
  color: var(--text);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .14em;
  outline: none;
}
.code-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,196,103,.08), 0 0 24px rgba(232,196,103,.08);
}
.error {
  color: #ff9baa !important;
  font-size: 13px;
}
.loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}
.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--gold);
  animation: spin .8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty {
  padding: 50px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
}
.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 9px;
  background: rgba(24,26,42,.97);
  border: 1px solid rgba(126,240,170,.3);
  color: var(--success);
  box-shadow: var(--shadow);
  animation: toastIn .35s cubic-bezier(.2,1.3,.3,1);
}
.toast span {
  color: var(--gold-soft);
  animation: toastStar 1s ease-in-out infinite alternate;
}
@keyframes toastStar { to { transform: rotate(90deg) scale(1.2); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.service-error {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(255,108,131,.34);
  border-radius: 9px;
  background: rgba(255,108,131,.08);
  text-align: left;
}
.service-error strong {
  display: block;
  color: #ffd2d9;
  margin-bottom: 5px;
}
.service-error p {
  margin: 0 0 12px;
  color: #ffb5c1;
  font-size: 13px;
  line-height: 1.5;
}

/* Original responsive breakpoints; later page-specific overrides take precedence. */
@media (max-width: 1700px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1380px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-grid, .result-grid.count-3, .result-grid.count-4 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .nav-tabs {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .main-layout { grid-template-columns: 1fr; }
  .history-panel {
    position: static;
    max-height: none;
  }
  .history-list { max-height: 440px; }
}
@media (max-width: 680px) {
  .grid { grid-template-columns: 1fr; }
  .box-card { min-height: 350px; }
  .topbar { padding: 13px 15px; }
  .brand p { display: none; }
  .player-meta { display: none; }
  .ticker-wrap, .main-layout {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ticker {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .ticker-message { text-align: left; }
  .main-layout { gap: 16px; }
  .open-stage { padding: 15px; }
  .login-card { padding: 27px 20px; }
  .reel-overlay {
    padding: 8px;
    align-items: start;
  }
  .reel-scene {
    width: 100%;
    padding-top: 20px;
  }
  .reel-line { grid-template-columns: 1fr; }
  .reel-number { display: none; }
  .reel-window {
    height: 126px;
    border-radius: 8px;
  }
  .reel-card { height: 100px; }
  .result-grid, .result-grid.count-1, .result-grid.count-2, .result-grid.count-3, .result-grid.count-4 { grid-template-columns: 1fr; }
  .result-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0 12px;
    text-align: left;
  }
  .result-card img {
    grid-row: 1 / 5;
    width: 64px;
    height: 64px;
  }
  .result-kicker, .result-card h3, .result-card p { margin-top: 0; }
  .catalog-count { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .sparkles span, .selected-box > img, .selected-box-aura, .login-emblem, .reel-atmosphere span { animation-duration: 8s; }
  .box-card, .btn, .filter-chip, .inventory-pill { transition-duration: .12s; }
}

/* Forest-theme refinements. Keep these after the base rules so the cascade is preserved. */
html { background: var(--bg-deep); }
body {
  background:
    radial-gradient(circle at 14% 6%, rgba(214, 180, 95, 0.13), transparent 29%),
    radial-gradient(circle at 84% 10%, rgba(61, 85, 64, 0.42), transparent 31%),
    radial-gradient(circle at 50% 100%, rgba(45, 62, 46, 0.55), transparent 46%),
    linear-gradient(145deg, #111a12 0%, #18241a 48%, #0a100b 100%);
}
.app-shell::before {
  opacity: .2;
  background-image:
    linear-gradient(rgba(247,245,237,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,245,237,.022) 1px, transparent 1px);
}
.topbar {
  background: rgba(16, 23, 16, .88);
  border-bottom-color: var(--line);
}
.brand-mark {
  background: linear-gradient(145deg, rgba(214,180,95,.22), rgba(45,62,46,.82));
  border-color: rgba(214,180,95,.42);
  box-shadow: inset 0 0 22px rgba(214,180,95,.1), 0 0 28px rgba(45,62,46,.5);
}
.nav-tabs { background: rgba(45,62,46,.36); }
.nav-tab:hover {
  color: var(--ivory);
  background: rgba(247,245,237,.07);
}
.nav-tab.active, .filter-chip.active, .open-count-picker button.active {
  color: #1a231b;
  background: linear-gradient(135deg, #f3dfa0, var(--gold));
  box-shadow: 0 8px 24px rgba(214,180,95,.2);
}
.avatar {
  background: radial-gradient(circle, #49654c, #1a281c 72%);
  border-color: rgba(214,180,95,.55);
  color: var(--ivory);
}
.ticker {
  border-color: rgba(214,180,95,.3);
  background: linear-gradient(90deg, rgba(214,180,95,.075), rgba(45,62,46,.58), rgba(247,245,237,.035));
}
.catalog-tools, .open-stage, .prize-gallery {
  background: linear-gradient(155deg, rgba(45,62,46,.76), rgba(20,31,22,.92));
  border-color: rgba(214,180,95,.17);
}
.search-box {
  background: rgba(10,16,11,.34);
  border-color: rgba(214,180,95,.26);
}
.filter-chip { background: rgba(247,245,237,.035); }
.filter-chip:hover {
  color: var(--ivory);
  background: rgba(247,245,237,.07);
}
.box-card {
  background: linear-gradient(165deg, rgba(48,67,50,.96), rgba(22,33,24,.99));
  border-color: rgba(247,245,237,.085);
}
.box-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(247,245,237,.035), transparent 36%, rgba(214,180,95,.035));
}

.box-title-row h3 { color: var(--ivory); }
.qty-control label {
  color: var(--gold-soft);
  font-weight: 800;
  letter-spacing: .04em;
}
.qty-input {
  background: rgba(8,14,9,.42);
  border-color: rgba(247,245,237,.14);
}
.qty-control .purchase-price {
  margin-left: auto;
  font-size: 16px;
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(214,180,95,.15);
}
.btn {
  color: var(--ivory);
  background: rgba(247,245,237,.055);
  border-color: rgba(247,245,237,.14);
}
.btn:hover:not(:disabled) {
  color: var(--ivory);
  border-color: rgba(214,180,95,.48);
  background: #3a503c;
  box-shadow: 0 10px 24px rgba(4,10,5,.28);
}
.btn.primary {
  color: #182119;
  background: linear-gradient(135deg, #f4e2a7, #d4af54);
  border-color: rgba(255,255,255,.25);
}
.btn.primary:hover:not(:disabled) {
  color: #101711;
  background: linear-gradient(135deg, #fff1bc, #e1bf67);
  box-shadow: 0 14px 34px rgba(214,180,95,.3), 0 0 22px rgba(214,180,95,.14);
}
.history-panel {
  background: rgba(33,49,35,.93);
  border-color: rgba(214,180,95,.16);
}
.history-item:hover {
  background: rgba(247,245,237,.045);
  border-color: rgba(214,180,95,.08);
}
.history-gil-icon { background: radial-gradient(circle, #6d5724, #243026); }
.history-list {
  max-height: none;
  overflow-y: visible;
}
.history-list.has-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(214,180,95,.55) rgba(14,22,15,.45);
}
.history-list.has-scroll::-webkit-scrollbar { width: 8px; }
.history-list.has-scroll::-webkit-scrollbar-track {
  background: rgba(14,22,15,.45);
  border-radius: 8px;
}
.history-list.has-scroll::-webkit-scrollbar-thumb {
  background: rgba(214,180,95,.48);
  border-radius: 8px;
}

/* Page transitions and the coffer-opening carousel. */
.view-page {
  animation: pageReveal .58s cubic-bezier(.18,.8,.22,1) both;
  transform-origin: 50% 20%;
}
.page-is-transitioning .content { animation: pageFallback .56s ease both; }
@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes pageFallback {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  22% {
    opacity: 0;
    transform: translateY(-12px) scale(.99);
    filter: blur(5px);
  }
  45% {
    opacity: 0;
    transform: translateY(15px) scale(.99);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
::view-transition-old(root) { animation: pageOld .3s ease both; }
::view-transition-new(root) { animation: pageNew .5s cubic-bezier(.18,.8,.22,1) both; }
@keyframes pageOld { to { opacity: 0; transform: translateY(-14px) scale(.992); filter: blur(6px); } }
@keyframes pageNew { from { opacity: 0; transform: translateY(20px) scale(.988); filter: blur(7px); } }

.open-stage {
  min-height: 540px;
  padding: 28px 24px 30px;
}
.vault-carousel {
  position: relative;
  width: 100%;
  min-height: 335px;
  display: grid;
  align-items: center;
}
.carousel-viewport {
  width: 100%;
  overflow: hidden;
  padding: 42px 0 35px;
  mask-image: linear-gradient(90deg, transparent 0, black 13%, black 87%, transparent 100%);
}
.carousel-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  margin-left: 50%;
  transform: translate3d(calc(var(--carousel-offset, 105px) * -1), 0, 0);
  transition: transform .65s cubic-bezier(.2,.85,.22,1);
  will-change: transform;
  backface-visibility: hidden;
}
.carousel-coffer {
  --accent: #d6b45f;
  position: relative;
  flex: 0 0 190px;
  min-height: 245px;
  padding: 8px 10px 14px;
  border-radius: 16px;
  border: 0;
  color: var(--ivory);
  background: transparent;
  opacity: .42;
  transform: scale(.76);
  filter: saturate(.72) blur(.1px);
  transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .45s ease, filter .45s ease, box-shadow .45s ease;
  isolation: isolate;
}
.carousel-coffer:hover {
  opacity: .72;
  transform: scale(.84) translateY(-3px);
}
.carousel-coffer.selected {
  opacity: 1;
  transform: scale(1.12) translateY(-4px);
  filter: saturate(1);
  box-shadow: none;
  z-index: 4;
}
.carousel-coffer img {
  position: relative;
  z-index: 2;
  display: block;
  width: 145px;
  height: 145px;
  margin: 0 auto 7px;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgba(3,8,4,.46));
}
.carousel-coffer strong {
  position: relative;
  z-index: 2;
  display: block;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.15;
  text-shadow: 0 0 16px rgba(214,180,95,.16);
}
.carousel-coffer > span:last-child {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 7px;
  color: var(--gold-soft);
  font-weight: 900;
  text-shadow: 0 0 14px rgba(214,180,95,.16);
}
.carousel-glow { display: none; }
.carousel-arrow {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(214,180,95,.42);
  color: var(--ivory);
  background: rgba(45,62,46,.92);
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 12px 28px rgba(3,9,4,.36);
  transform: translateY(-50%);
  transition: .2s ease;
}
.carousel-arrow:hover {
  color: #172018;
  background: var(--gold-soft);
  transform: translateY(-50%) scale(1.07);
}
.carousel-arrow.left { left: 8px; }
.carousel-arrow.right { right: 8px; }
.vault-selection {
  --accent: #d6b45f;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 24px;
  align-items: center;
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 13px;
  border: 1px solid rgba(214,180,95,.2);
  background: linear-gradient(130deg, rgba(20,31,22,.82), rgba(45,62,46,.6));
  box-shadow: inset 0 0 36px color-mix(in srgb, var(--accent) 5%, transparent);
}
.vault-selection h3 {
  margin: 2px 0 5px;
  font-family: Georgia, serif;
  font-size: clamp(24px,3vw,34px);
}
.vault-selection .quantity-large {
  margin: 0;
  font-size: 15px;
}
.vault-selection .open-count-picker { margin: 0; }

.prize-gallery {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(214,180,95,.16);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}
.gallery-heading h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 27px;
}
.gallery-heading > span {
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 800;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.collection-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(247,245,237,.08);
  border-radius: 11px;
  background: rgba(10,17,11,.36);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.collection-card:hover {
  transform: translateY(-3px);
  border-color: rgba(214,180,95,.3);
  background: rgba(45,62,46,.62);
}
.collection-card img {
  width: 58px;
  height: 58px;
  border-radius: 9px;
  object-fit: cover;
  background: #172219;
  border: 1px solid rgba(247,245,237,.08);
}
.collection-card strong { font-size: 13px; }
.collection-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.collection-card .collection-gil {
  color: var(--gold-soft);
  font-weight: 800;
}
.collection-count {
  align-self: start;
  padding: 4px 7px;
  border-radius: 10px;
  color: #172018;
  background: var(--gold-soft);
  font-size: 12px;
  font-weight: 900;
}
.rarity-border-legendary {
  box-shadow: inset 0 0 24px rgba(214,180,95,.08);
  border-color: rgba(214,180,95,.25);
}
.empty.compact { padding: 24px 18px; }

.reel-overlay { background: radial-gradient(circle at 50% 45%, rgba(45,62,46,.65), transparent 47%), rgba(6,11,7,.97); }
.reel-atmosphere span:nth-child(1) { background: #4e6c52; }
.reel-atmosphere span:nth-child(2) { background: #f0d990; }
.reel-atmosphere span:nth-child(3) { background: #2D3E2E; }
.reel-window {
  background: linear-gradient(90deg, rgba(5,9,6,.85), rgba(42,58,44,.97) 20%, rgba(42,58,44,.97) 80%, rgba(5,9,6,.85));
  border-color: rgba(214,180,95,.34);
}
.reel-window::before { background: linear-gradient(90deg, #071008, transparent); }
.reel-window::after { background: linear-gradient(-90deg, #071008, transparent); }
.reel-card { background: linear-gradient(160deg, rgba(55,75,57,.98), rgba(19,30,21,.99)); }
.result-card { background: rgba(31,47,33,.98); }
.modal { background: var(--panel-strong); }
.modal-header { background: rgba(27,42,30,.98); }
.modal-whisper {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.login-card {
  background: rgba(29,44,31,.94);
  box-shadow: 0 35px 120px rgba(3,9,4,.62), inset 0 0 70px rgba(214,180,95,.045);
}
.login-emblem { background: var(--bryer-css-v61-titleframe3, url('/images/titleframe3.png')) center / cover no-repeat; }
.toast { background: rgba(34,51,36,.98); }
.access-notice {
  margin: 14px 0;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid rgba(214,180,95,.3);
  color: var(--gold-soft);
  background: rgba(214,180,95,.07);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .vault-selection {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}
@media (max-width: 980px) {
  .history-list.has-scroll { overflow-y: auto; }
}
@media (max-width: 680px) {
  .carousel-viewport {
    padding-left: 0;
    padding-right: 0;
    mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
  }
  .carousel-arrow {
    width: 42px;
    height: 42px;
  }
  .carousel-arrow.left { left: -4px; }
  .carousel-arrow.right { right: -4px; }
  .vault-selection { padding: 18px 14px; }
  .collection-grid { grid-template-columns: 1fr; }
  .history-list.has-scroll { overflow-y: auto; }
}

.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .085;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(247,245,237,.26) 1px, transparent 0),
    linear-gradient(135deg, rgba(214,180,95,.05), transparent 35%, rgba(45,62,46,.08) 70%, transparent 100%);
  background-size: 24px 24px, 100% 100%;
  mix-blend-mode: soft-light;
}
.open-stage {
  background: radial-gradient(circle at 50% 32%, rgba(214,180,95,.08), transparent 22%), linear-gradient(155deg, rgba(45,62,46,.78), rgba(20,31,22,.94));
}
.reel-window {
  box-shadow: 0 0 44px rgba(214,180,95,.12), inset 0 0 25px rgba(3,8,4,.34);
}
.summoning-seal i:nth-child(3) { border-color: rgba(214,180,95,.55); }
@keyframes summonChest { to { transform: translateY(-10px) scale(1.05); filter: drop-shadow(0 26px 35px rgba(214,180,95,.24)); } }
@keyframes emblemFloat { 50% { transform: translateY(-7px); box-shadow: 0 16px 40px rgba(214,180,95,.16); } }
.collection-card p:nth-child(2), .collection-card p:nth-child(3) { max-width: 100%; }
.carousel-viewport {
  display: flex;
  align-items: center;
}
.carousel-arrow:hover {
  color: #172018;
  background: var(--gold-soft);
  transform: translateY(-50%) scale(1.07);
}
.carousel-coffer::before,
.carousel-coffer::after {
  content: none;
}
@media (max-width: 680px) {
  .carousel-track { gap: 18px; }
}

.search-box input::placeholder {
  color: rgba(247,245,237,.42);
}

.grid {
  align-items: start;
}

.box-card {
  overflow: visible;
  min-height: auto;
  padding: 4px 6px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}
.box-card::before,
.box-card::after {
  content: none;
}

.box-visual {
  height: 230px;
  margin-bottom: 8px;
}
.box-visual img {
  width: 195px;
  height: 195px;
  filter: drop-shadow(0 22px 20px rgba(3,8,4,.32));
}

.box-card.is-buying .box-visual img {
  animation: chestBind .8s ease-in-out infinite alternate;
}
.box-card.is-purchased .box-visual img {
  animation: chestClaimed .75s cubic-bezier(.2,1.4,.35,1);
}
.box-glow {
  width: 170px;
  height: 64px;
  bottom: 10px;
  background: radial-gradient(circle, rgba(214,180,95,.22) 0%, rgba(45,62,46,.16) 44%, transparent 74%);
  filter: blur(18px);
  opacity: .9;
}
.box-body {
  padding: 0;
}
.box-title-row,
.box-description {
  display: none;
}
.qty-control {
  margin-top: 0;
  gap: 10px;
}
.qty-control label {
  color: var(--gold-soft);
  font-weight: 800;
  font-size: 13px;
}
.qty-input {
  width: 58px;
  padding: 7px 8px;
  background: rgba(19,30,21,.48);
  border-color: rgba(247,245,237,.09);
}
.qty-control .price {
  font-size: 13px;
  font-weight: 900;
}
.card-actions {
  margin-top: 10px;
}
.card-actions .btn,
.card-actions .primary {
  backdrop-filter: blur(8px);
}
.purchase-burst span {
  text-shadow: 0 0 12px rgba(214,180,95,.65);
}
.binding-rings i {
  border: 1px solid rgba(214,180,95,.55);
}

@media (max-width: 700px) {
  .box-visual {
    height: 198px;
  }
  .box-visual img {
    width: 174px;
    height: 174px;
  }
}

@keyframes cardBinding {
  from { box-shadow: none; }
  to { box-shadow: 0 0 0 transparent; }
}
@keyframes chestBind {
  to {
    transform: translateY(-9px) scale(1.06);
    filter: drop-shadow(0 20px 28px rgba(214,180,95,.22));
  }
}
.inventory-pill.active {
  border-color: rgba(214,180,95,.38);
  box-shadow: 0 0 22px rgba(214,180,95,.12);
  background: rgba(45,62,46,.26);
}
.selected-box-aura {
  background: radial-gradient(circle, rgba(214,180,95,.16), transparent 66%);
}

.box-visual {
  height: 242px;
}
.box-visual::before {
  content: "";
  position: absolute;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.17) 0%, rgba(45,62,46,.22) 38%, rgba(45,62,46,.08) 58%, transparent 75%);
  filter: blur(10px);
  z-index: 0;
  animation: iconAuraPulse 3.8s ease-in-out infinite;
}
.box-visual::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 34px;
  bottom: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.18), rgba(45,62,46,.12) 58%, transparent 76%);
  filter: blur(14px);
  z-index: 0;
}
.box-visual img {
  position: relative;
  z-index: 2;
}
.vault-selection.is-mythic-coffer > div:not(.vault-selection-texture) * {
  position: relative;
  z-index: 2;
}
@keyframes iconAuraPulse {
  0%, 100% {
    transform: scale(.96);
    opacity: .82;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.vault-carousel {
  position: relative;
  border-radius: 19px;
  padding: 22px 70px;
  background: linear-gradient(180deg, rgba(247,245,237,.025), rgba(247,245,237,.01));
  border: 1px solid rgba(214,180,95,.12);
  box-shadow: inset 0 0 40px rgba(214,180,95,.035), 0 20px 50px rgba(3,9,4,.18);
  overflow: hidden;
}
.vault-carousel::before,
.vault-carousel::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(214,180,95,.08), transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}
.vault-carousel::before { left: -85px; }
.vault-carousel::after { right: -85px; }
.carousel-viewport {
  padding: 10px 0;
}
.carousel-track {
  align-items: end;
}
.carousel-coffer {
  flex: 0 0 210px;
  min-height: 255px;
  padding: 18px 12px 16px;
  opacity: .35;
  transform: scale(.72);
  filter: saturate(.58) blur(.15px);
}
.carousel-coffer:hover {
  opacity: .76;
  transform: scale(.82) translateY(-4px);
}
.carousel-coffer.selected {
  opacity: 1;
  transform: scale(1.18) translateY(-8px);
  filter: saturate(1.08);
}
.carousel-coffer img {
  width: 170px;
  height: 170px;
  margin: 0 auto;
  filter: drop-shadow(0 24px 24px rgba(3,8,4,.42));
}
.carousel-coffer:not(.selected) img {
  filter: grayscale(.06) saturate(.85) drop-shadow(0 18px 18px rgba(3,8,4,.26));
}
.carousel-selected-aura {
  position: absolute;
  inset: 28px 24px 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.24) 0%, rgba(45,62,46,.16) 44%, transparent 72%);
  filter: blur(16px);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.carousel-coffer.selected .carousel-selected-aura {
  opacity: 1;
  transform: scale(1.06);
}
.carousel-coffer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 116px;
  height: 26px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(214,180,95,.18), rgba(45,62,46,.12) 55%, transparent 78%);
  filter: blur(11px);
  opacity: .55;
}
.carousel-coffer.selected::before {
  width: 146px;
  height: 32px;
  opacity: .95;
}
.carousel-quantity-badge {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 4;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #172018;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 12px 26px rgba(214,180,95,.24);
}
.carousel-arrow {
  box-shadow: 0 14px 30px rgba(3,9,4,.34), inset 0 0 0 1px rgba(247,245,237,.05);
}
.carousel-arrow:hover {
  box-shadow: 0 16px 34px rgba(214,180,95,.16);
}
.vault-selection {
  grid-template-columns: minmax(0,1fr) auto auto;
}
.vault-action-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.open-secondary {
  min-width: 180px;
  padding: 14px 22px;
  border-color: rgba(214,180,95,.22);
  background: rgba(45,62,46,.3);
}
.open-secondary:hover:not(:disabled) {
  border-color: rgba(214,180,95,.38);
  background: rgba(59,81,61,.46);
}
.open-button {
  min-width: 180px;
  letter-spacing: .08em;
  font-size: 16px;
}

@media (max-width: 1180px) {
  .vault-selection {
    grid-template-columns: 1fr;
  }
  .vault-action-group {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}
@media (max-width: 680px) {
  .vault-carousel {
    padding: 18px 42px;
  }
  .carousel-coffer {
    flex-basis: 188px;
    min-height: 230px;
  }
  .carousel-coffer img {
    width: 154px;
    height: 154px;
  }
  .open-secondary,
  .open-button {
    min-width: 150px;
  }
}

.card-actions .primary {
  text-transform: uppercase;
  letter-spacing: .055em;
}

.box-visual {
  isolation: isolate;
}
.box-visual::before {
  width: 248px;
  height: 248px;
  background:
    radial-gradient(circle, rgba(244,226,167,.34) 0 7%, rgba(214,180,95,.26) 20%, rgba(73,101,76,.28) 43%, rgba(45,62,46,.12) 61%, transparent 74%);
  filter: blur(12px);
  opacity: .96;
  animation: catalogCorePulse 3.2s ease-in-out infinite;
}
.box-visual::after {
  width: 178px;
  height: 48px;
  bottom: 12px;
  background: radial-gradient(circle, rgba(240,217,144,.42), rgba(71,98,74,.22) 50%, transparent 76%);
  filter: blur(16px);
  opacity: .9;
}
.box-glow {
  position: absolute;
  width: 232px;
  height: 232px;
  bottom: auto;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(240,217,144,.52) 34deg,
      transparent 72deg,
      rgba(77,108,81,.48) 132deg,
      transparent 190deg,
      rgba(214,180,95,.42) 256deg,
      transparent 320deg),
    radial-gradient(circle, rgba(214,180,95,.2), rgba(45,62,46,.16) 47%, transparent 70%);
  filter: blur(9px);
  opacity: .88;
  z-index: 1;
  animation: catalogHaloOrbit 8.5s linear infinite;
}

@keyframes catalogCorePulse {
  0%, 100% {
    transform: scale(.92);
    opacity: .76;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes catalogHaloOrbit {
  0% { transform: rotate(0deg) scale(.94); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(.94); }
}

.vault-carousel {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(214,180,95,.09), transparent 31%),
    linear-gradient(180deg, rgba(247,245,237,.025), rgba(20,31,22,.025));
}
.carousel-viewport {
  position: relative;
  isolation: isolate;
  min-height: 300px;
}
.carousel-viewport::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 51%;
  width: min(610px, 65vw);
  height: 250px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(244,226,167,.2) 0%, rgba(214,180,95,.12) 26%, rgba(62,87,65,.18) 48%, transparent 72%);
  filter: blur(22px);
  animation: vaultSpotlight 4.2s ease-in-out infinite;
  pointer-events: none;
}
.carousel-viewport::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 26%;
  bottom: 24%;
  left: -35%;
  width: 36%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(240,217,144,.105), transparent);
  filter: blur(12px);
  animation: vaultLightSweep 7.5s ease-in-out infinite;
  pointer-events: none;
}
.carousel-track {
  position: relative;
  z-index: 2;
}
.carousel-coffer {
  overflow: visible;
}
.carousel-coffer img {
  position: relative;
  z-index: 3;
}
.carousel-quantity-badge {
  top: 20px;
  right: 14px;
  z-index: 7;
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,245,205,.46);
  box-shadow: 0 8px 24px rgba(214,180,95,.32), 0 0 22px rgba(214,180,95,.16);
  animation: quantityBadgePulse 2.8s ease-in-out infinite;
}
.carousel-selected-aura {
  inset: 24px 14px 22px;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(244,226,167,.27) 0 13%, rgba(214,180,95,.2) 32%, rgba(68,96,72,.25) 51%, transparent 73%);
  filter: blur(18px);
  opacity: .5;
  transform: scale(.94);
  animation: carouselAuraBreathe 3.8s ease-in-out infinite;
}
.carousel-coffer:not(.selected) .carousel-selected-aura {
  opacity: .26;
  transform: scale(.82);
}
.carousel-coffer.selected .carousel-selected-aura {
  opacity: 1;
  transform: scale(1.13);
  animation-duration: 2.7s;
}
.carousel-orbit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 49%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .22;
  transform: translate(-50%, -50%);
}
.carousel-orbit.orbit-one {
  width: 190px;
  height: 190px;
  background: conic-gradient(from 10deg,
    transparent 0deg,
    rgba(240,217,144,.72) 24deg,
    transparent 51deg,
    rgba(76,107,80,.58) 112deg,
    transparent 166deg,
    rgba(214,180,95,.6) 232deg,
    transparent 290deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 64%, transparent 66%);
  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 64%, transparent 66%);
  animation: orbitSpin 12s linear infinite;
}
.carousel-orbit.orbit-two {
  width: 150px;
  height: 150px;
  border: 1px solid rgba(240,217,144,.32);
  box-shadow: 0 0 24px rgba(214,180,95,.13), inset 0 0 20px rgba(76,107,80,.14);
  animation: orbitCounterSpin 8s linear infinite, orbitPulse 3.6s ease-in-out infinite;
}
.carousel-coffer.selected .carousel-orbit {
  opacity: .92;
}
.carousel-coffer.selected .orbit-one {
  animation-duration: 7.5s;
}
.carousel-coffer.selected .orbit-two {
  border-color: rgba(244,226,167,.58);
  box-shadow: 0 0 34px rgba(214,180,95,.23), inset 0 0 28px rgba(76,107,80,.19);
}
.carousel-coffer.selected img {
  animation: selectedCofferFloat 3.1s ease-in-out infinite;
  filter: drop-shadow(0 26px 26px rgba(3,8,4,.46)) drop-shadow(0 0 20px rgba(214,180,95,.18));
}
.carousel-coffer:not(.selected) img {
  animation: sideCofferFloat 4.5s ease-in-out infinite;
}
.carousel-coffer:nth-child(even):not(.selected) img {
  animation-delay: -1.8s;
}
.carousel-coffer:nth-child(3n):not(.selected) img {
  animation-delay: -3s;
}
@keyframes vaultSpotlight {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.92);
    opacity: .7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}
@keyframes vaultLightSweep {
  0%, 15% {
    left: -38%;
    opacity: 0;
  }
  35% { opacity: .8; }
  65% { opacity: .55; }
  85%, 100% {
    left: 112%;
    opacity: 0;
  }
}
@keyframes carouselAuraBreathe {
  0%, 100% {
    filter: blur(19px);
    transform: scale(.9);
  }
  50% {
    filter: blur(14px);
    transform: scale(1.1);
  }
}
@keyframes orbitSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbitCounterSpin {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes orbitPulse {
  0%, 100% {
    width: 146px;
    height: 146px;
    opacity: .56;
  }
  50% {
    width: 158px;
    height: 158px;
    opacity: 1;
  }
}
@keyframes selectedCofferFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.035); }
}
@keyframes sideCofferFloat {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-4px); }
}
@keyframes quantityBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(214,180,95,.28), 0 0 16px rgba(214,180,95,.12);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 10px 28px rgba(214,180,95,.4), 0 0 28px rgba(214,180,95,.2);
  }
}

@media (max-width: 680px) {
  .box-visual::before {
    width: 218px;
    height: 218px;
  }
  .box-glow {
    width: 210px;
    height: 210px;
  }
  .carousel-coffer {
    flex-basis: 210px;
  }
}

:root {
  --button-depth: rgba(3, 9, 4, .42);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(30deg, rgba(247,245,237,.08) 12%, transparent 12.5%, transparent 87%, rgba(247,245,237,.08) 87.5%),
    linear-gradient(150deg, rgba(214,180,95,.065) 12%, transparent 12.5%, transparent 87%, rgba(214,180,95,.065) 87.5%),
    linear-gradient(30deg, rgba(247,245,237,.04) 12%, transparent 12.5%, transparent 87%, rgba(247,245,237,.04) 87.5%);
  background-size: 44px 77px;
  background-position: 0 0, 0 0, 22px 38px;
  mix-blend-mode: soft-light;
  mask-image: radial-gradient(ellipse at center, black 25%, rgba(0,0,0,.78) 74%, transparent 112%);
}
.app-shell, .login-screen, .loading {
  position: relative;
  z-index: 1;
}
.sparkles {
  position: fixed;
  z-index: 2;
}

.nav-tabs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.nav-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 7px);
  border-radius: 7px;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.13) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #f7e8b5, var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(104,76,18,.2), 0 8px 18px rgba(214,180,95,.2);
  transition: transform .38s cubic-bezier(.2,.86,.25,1);
}
.nav-tabs.nav-open::before { transform: translateX(calc(100% + 4px)); }
.nav-tab {
  position: relative;
  z-index: 1;
  min-width: 136px;
  background: transparent !important;
  box-shadow: none !important;
}
.nav-tab.active { color: #172018; }

.content {
  transition: opacity .19s ease, transform .19s ease, filter .19s ease;
}
.page-is-transitioning .content {
  opacity: 0;
  transform: translateY(7px);
  filter: blur(3px);
}
.view-page { animation: none; }

.btn,
.filter-chip,
.open-count-picker button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -3px 0 rgba(1,7,2,.3),
    0 5px 0 rgba(3,9,4,.32),
    0 10px 20px rgba(3,9,4,.18);
  transform: translateY(0);
}
.btn::before,
.filter-chip::before,
.open-count-picker button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 42%);
  mix-blend-mode: soft-light;
}
.btn:hover:not(:disabled),
.filter-chip:hover:not(:disabled),
.open-count-picker button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(1,7,2,.26),
    0 7px 0 rgba(3,9,4,.28),
    0 14px 24px rgba(3,9,4,.22);
}
.btn:active:not(:disabled),
.filter-chip:active:not(:disabled),
.open-count-picker button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 2px 5px rgba(1,7,2,.28), 0 2px 0 rgba(3,9,4,.3);
}

.box-card,
.carousel-coffer,
.vault-selection {
  --box-glow: #D6B45F;
  --action-bg: #F0D990;
  --action-text: #172018;
}
.box-buy-button,
.vault-selection .open-button {
  color: var(--action-text) !important;
  border-color: color-mix(in srgb, var(--action-bg) 72%, white 20%) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--action-bg) 76%, white 24%), var(--action-bg)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--action-bg) 35%, white 65%),
    inset 0 -4px 0 color-mix(in srgb, var(--action-bg) 72%, black 28%),
    0 6px 0 color-mix(in srgb, var(--action-bg) 58%, black 42%),
    0 12px 24px color-mix(in srgb, var(--action-bg) 28%, transparent) !important;
}
.box-buy-button:hover:not(:disabled),
.vault-selection .open-button:hover:not(:disabled) {
  color: var(--action-text) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--action-bg) 64%, white 36%), color-mix(in srgb, var(--action-bg) 92%, white 8%)) !important;
}

.box-glow {
  width: 252px;
  height: 252px;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      color-mix(in srgb, var(--box-glow) 70%, transparent) 34deg,
      transparent 76deg,
      color-mix(in srgb, var(--box-glow) 42%, #2D3E2E 58%) 139deg,
      transparent 194deg,
      color-mix(in srgb, var(--box-glow) 66%, transparent) 260deg,
      transparent 322deg),
    radial-gradient(circle, color-mix(in srgb, var(--box-glow) 28%, transparent), rgba(45,62,46,.16) 48%, transparent 72%);
  animation: catalogHaloOrbit 8.5s linear infinite;
}

.box-visual::before {
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--box-glow) 43%, white 12%) 0 8%,
      color-mix(in srgb, var(--box-glow) 31%, transparent) 24%,
      color-mix(in srgb, var(--box-glow) 18%, #2D3E2E 82%) 48%,
      rgba(45,62,46,.1) 63%,
      transparent 77%);
}

.box-visual::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--box-glow) 42%, transparent), rgba(45,62,46,.18) 53%, transparent 78%);
}
.binding-rings i { border-color: color-mix(in srgb, var(--box-glow) 70%, white 18%); }
.purchase-burst span { color: color-mix(in srgb, var(--box-glow) 78%, white 22%); }

.vip-coffer-seal,
.sold-out-stamp {
  position: absolute;
  z-index: 12;
  font-weight: 950;
  letter-spacing: .12em;
  pointer-events: none;
}
.vip-coffer-seal {
  top: 8px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 10px;
  color: #172018;
  background: linear-gradient(145deg, #fff0bb, var(--gold));
  box-shadow: 0 7px 20px rgba(214,180,95,.28);
  font-size: 12px;
}
.sold-out-stamp {
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-11deg);
  padding: 8px 13px;
  border: 3px double rgba(247,245,237,.86);
  color: rgba(247,245,237,.92);
  background: rgba(63,24,22,.78);
  text-shadow: 0 2px 5px rgba(0,0,0,.52);
  box-shadow: 0 8px 25px rgba(0,0,0,.38);
  white-space: nowrap;
  font-size: 16px;
}
.box-visual.is-sold-out img {
  opacity: .32;
  filter: grayscale(1) saturate(.15) brightness(.66) drop-shadow(0 15px 14px rgba(0,0,0,.3));
}
.box-visual.is-sold-out .box-glow,
.box-visual.is-sold-out::before,
.box-visual.is-sold-out::after {
  opacity: .16;
  animation-play-state: paused;
}
.qty-input:disabled { opacity: .38; }
.vip-player-mark {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 10px;
  color: #172018;
  background: var(--gold-soft);
  font-size: 8px;
  letter-spacing: .1em;
  vertical-align: middle;
}

.carousel-selected-aura {
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--box-glow) 54%, white 10%) 0 12%,
      color-mix(in srgb, var(--box-glow) 34%, transparent) 33%,
      color-mix(in srgb, var(--box-glow) 22%, #2D3E2E 78%) 52%,
      transparent 74%);
}
.carousel-orbit.orbit-one {
  background: conic-gradient(from 10deg,
    transparent 0deg,
    color-mix(in srgb, var(--box-glow) 75%, white 12%) 25deg,
    transparent 54deg,
    color-mix(in srgb, var(--box-glow) 44%, #2D3E2E 56%) 113deg,
    transparent 168deg,
    color-mix(in srgb, var(--box-glow) 68%, transparent) 234deg,
    transparent 292deg);
}
.carousel-orbit.orbit-two {
  border-color: color-mix(in srgb, var(--box-glow) 48%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--box-glow) 22%, transparent), inset 0 0 20px rgba(76,107,80,.14);
}
.carousel-coffer.selected img {
  filter: drop-shadow(0 26px 26px rgba(3,8,4,.46)) drop-shadow(0 0 23px color-mix(in srgb, var(--box-glow) 30%, transparent));
}
.vault-selection {
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--box-glow) 9%, transparent), 0 18px 45px rgba(3,9,4,.18);
}

.carousel-arrow {
  width: 52px;
  height: 86px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  overflow: visible;
}
.carousel-arrow::before,
.carousel-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 28px;
  height: 4px;
  border-radius: 8px;
  background: var(--gold-soft);
  box-shadow: 0 0 13px rgba(214,180,95,.35);
  transform-origin: center;
  transition: width .2s ease, background .2s ease, box-shadow .2s ease;
}
.carousel-arrow.left::before {
  top: 31px;
  transform: translateX(-56%) rotate(-42deg);
}
.carousel-arrow.left::after {
  top: 49px;
  transform: translateX(-56%) rotate(42deg);
}
.carousel-arrow.right::before {
  top: 31px;
  transform: translateX(-44%) rotate(42deg);
}
.carousel-arrow.right::after {
  top: 49px;
  transform: translateX(-44%) rotate(-42deg);
}
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.carousel-arrow:hover::before,
.carousel-arrow:hover::after {
  width: 33px;
  background: #fff0ba;
  box-shadow: 0 0 19px rgba(214,180,95,.58);
}

.reward-lootbox-target {
  color: var(--gold-soft) !important;
  font-weight: 800;
}

@media (max-width: 680px) {
  .nav-tab {
    min-width: 116px;
    padding-inline: 12px;
  }
  .carousel-arrow { width: 42px; }
}
.login-screen::before { content: none; }
.app-shell::after { content: none !important; }

.search-box input::placeholder { color: rgba(228, 221, 196, .58) !important; }

.hero.hero-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  min-height: clamp(320px, 34vw, 470px);
  margin-bottom: 18px;
  overflow: visible;
}
.hero-character {
  position: relative;
  z-index: 2;
  align-self: end;
  display: flex;
  justify-content: center;
}
.hero-character img {
  width: min(260px, 25vw);
  min-width: 170px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.4));
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding-right: clamp(12px, 2vw, 28px);
}
.hero-stars {
  position: absolute;
  top: 52%;
  width: 58%;
  height: 115%;
  pointer-events: none;
  opacity: .2;
  background-image: image-set(url("/images/stars-800.webp") type("image/webp"), url("/images/stars.png") type("image/png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 0;
  transform: translateY(-50%);
}
.hero-stars-left { left: -4%; }
.hero-stars-right {
  right: -4%;
  transform: translateY(-50%) scaleX(-1);
}

.box-visual.is-vip-locked img {
  opacity: .45;
  filter: grayscale(.35) saturate(.5) brightness(.78) drop-shadow(0 15px 14px rgba(0,0,0,.3));
}
.box-visual.is-vip-locked .box-glow,
.box-visual.is-vip-locked::before,
.box-visual.is-vip-locked::after {
  opacity: .24;
}
.vip-only-stamp {
  background: rgba(61, 50, 11, .88) !important;
  border-color: rgba(255, 230, 157, .92) !important;
  color: #fff3c4 !important;
}

.reel-title { text-align: center; }
.reel-overlay .continue-button { margin-top: 8px; }
.result-grid {
  gap: 18px;
  margin-top: 30px;
  align-items: start;
}
.result-card {
  position: relative;
  overflow: visible;
  isolation: isolate;
  padding: 18px 10px 8px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  animation: rewardFloatIn .65s cubic-bezier(.2,1.02,.3,1) both;
  animation-delay: var(--result-delay);
}
.result-card img {
  position: relative;
  z-index: 3;
  width: clamp(76px, 10vw, 116px);
  height: clamp(76px, 10vw, 116px);
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.42));
  animation: rewardHover 3.8s ease-in-out infinite;
}
.result-card .result-flare {
  position: absolute;
  inset: 16px 18px auto;
  margin: 0 auto;
  width: clamp(120px, 16vw, 186px);
  height: clamp(120px, 16vw, 186px);
  border-radius: 50%;
  z-index: 0;
  filter: blur(16px);
  opacity: .9;
  animation: rewardPulse 2.8s ease-in-out infinite;
}
.result-card .result-orbit {
  position: absolute;
  left: 50%;
  top: 79px;
  width: 142px;
  height: 142px;
  margin-left: -71px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
}
.result-card .result-orbit-a { animation: rewardSpin 8s linear infinite; }
.result-card .result-orbit-b {
  animation: rewardSpinReverse 9.5s linear infinite;
  transform: scale(.82);
}
.result-card .result-kicker,
.result-card h3,
.result-card p,
.result-card .price {
  position: relative;
  z-index: 3;
  text-shadow: 0 0 14px rgba(3,10,4,.45);
}
.result-card h3 { margin: 8px 0 4px; }
.result-card p {
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.result-card.type-gil .result-flare {
  background: radial-gradient(circle, rgba(255,215,115,.68), rgba(214,180,95,.2) 48%, transparent 72%);
}
.result-card.type-item .result-flare,
.result-card.type-custom .result-flare {
  background: radial-gradient(circle, rgba(212,240,182,.42), rgba(111,154,104,.16) 50%, transparent 74%);
}
.result-card.type-mount .result-flare {
  background: radial-gradient(circle, rgba(164,214,255,.5), rgba(92,161,210,.18) 52%, transparent 74%);
}
.result-card.type-minion .result-flare {
  background: radial-gradient(circle, rgba(255,199,143,.5), rgba(220,143,78,.18) 52%, transparent 74%);
}
.result-card.type-perk .result-flare,
.result-card.type-service .result-flare {
  background: radial-gradient(circle, rgba(184,255,226,.46), rgba(66,143,112,.18) 50%, transparent 74%);
}
.result-card.type-lootbox .result-flare {
  background: radial-gradient(circle, rgba(214,180,95,.62), rgba(109,139,91,.2) 52%, transparent 76%);
}
.result-card.rarity-common .result-orbit { background: radial-gradient(circle, rgba(255,255,255,.2), transparent 62%); }
.result-card.rarity-uncommon .result-orbit {
  background: conic-gradient(from 0deg, transparent, rgba(121,229,161,.45), transparent, rgba(121,229,161,.18), transparent);
}
.result-card.rarity-rare .result-orbit { background: conic-gradient(from 0deg, transparent, rgba(115,183,255,.55), transparent, rgba(115,183,255,.22), transparent); }
.result-card.rarity-epic .result-orbit { background: conic-gradient(from 0deg, transparent, rgba(195,140,255,.55), transparent, rgba(195,140,255,.2), transparent); }
.result-card.rarity-legendary .result-orbit {
  background: conic-gradient(from 0deg, transparent, rgba(255,214,111,.78), transparent, rgba(255,214,111,.32), transparent);
}

@keyframes rewardFloatIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes rewardHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes rewardPulse {
  0%, 100% {
    transform: scale(.92);
    opacity: .72;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes rewardSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rewardSpinReverse { from { transform: scale(.82) rotate(360deg); } to { transform: scale(.82) rotate(0deg); } }

@media (max-width: 980px) {
  .hero.hero-story {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 0;
  }
  .hero-copy { padding-right: 0; }
  .hero h2 {
    max-width: 12ch;
    margin-inline: auto;
  }
  .hero p { margin-inline: auto; }
  .hero-character { order: -1; }
  .hero-character img { width: min(240px, 58vw); }
  .hero-stars {
    width: 78%;
    height: 92%;
  }
}

.view-shop .hero-story {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(410px, 33vw, 520px);
  min-height: 0;
  margin-top: -24px;
  margin-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

.view-shop .hero-stars {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  height: 100%;
  opacity: .2;
  pointer-events: none;
  background-image: image-set(url("/images/stars-800.webp") type("image/webp"), url("/images/stars.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 0;
}

.view-shop .hero-stars-left {
  left: 0;
  transform: none;
}

.view-shop .hero-stars-right {
  right: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

.view-shop .hero-character {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  width: clamp(245px, 22vw, 350px);
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.view-shop .hero-character img {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.42));
}

.view-shop .hero-copy {
  position: absolute;
  top: 50%;
  left: clamp(235px, 20vw, 330px);
  right: clamp(12px, 2vw, 30px);
  z-index: 3;
  padding: 0;
  transform: translateY(-50%);
}

.view-shop .hero-copy h2 {
  max-width: 940px;
  margin: 0;
  font-size: clamp(38px, 4.3vw, 66px);
  line-height: 1.02;
}

.view-shop .hero-copy > p:last-child {
  max-width: 820px;
  margin-bottom: 0;
}

.view-shop .catalog-tools {
  position: relative;
  z-index: 4;
  margin-top: 0;
}

@media (max-width: 1120px) {
  .view-shop .hero-story {
    height: clamp(390px, 43vw, 475px);
  }
  .view-shop .hero-character {
    width: clamp(220px, 25vw, 300px);
  }
  .view-shop .hero-copy {
    left: clamp(210px, 24vw, 285px);
  }
  .view-shop .hero-copy h2 {
    font-size: clamp(34px, 5vw, 54px);
  }
}

@media (max-width: 760px) {
  .view-shop .hero-story {
    height: 430px;
    margin-top: -16px;
  }
  .view-shop .hero-character {
    width: 225px;
    opacity: .72;
  }
  .view-shop .hero-copy {
    left: 125px;
    right: 11px;
    text-align: left;
  }
  .view-shop .hero-copy h2 {
    max-width: 560px;
    font-size: clamp(29px, 8vw, 43px);
  }
  .view-shop .hero-copy > p:last-child {
    font-size: 13px;
    line-height: 1.5;
  }
}

.login-screen {
  isolation: isolate;
  overflow: hidden;
  background-color:#0d1710!important;
  background-image:var(--bryer-css-v61-bg, url('/images/bg.png'))!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
.login-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(246, 237, 200, .18) 1px, transparent 1.2px),
    repeating-linear-gradient(135deg, rgba(214, 180, 95, .035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(45deg, rgba(247, 245, 237, .018) 0 1px, transparent 1px 24px);
  background-size: 25px 25px, 58px 58px, 76px 76px;
  mix-blend-mode: soft-light;
}
.login-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(4, 11, 6, .2) 72%, rgba(3, 8, 4, .42) 100%),
    linear-gradient(180deg, rgba(214, 180, 95, .018), transparent 30%, rgba(3, 8, 4, .08));
}
.login-card {
  position: relative;
  overflow: visible;
  margin-top: clamp(150px, 20vh, 250px);
  z-index: 2;
}
.login-character {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 174px);
  width: clamp(270px, 27vw, 342px);
  aspect-ratio: 1024 / 1535;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .38));
}
.login-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.login-emblem {
  position: relative;
  z-index: 6;
}
.login-card > .eyebrow,
.login-card > h1,
.login-card > p,
.login-card > input,
.login-card > .access-notice,
.login-card > .service-error,
.login-card > .error,
.login-card > button {
  position: relative;
  z-index: 3;
}
.login-card > h1 {
  z-index: 5;
}

@media (max-width: 680px) {
  .login-card {
    margin-top: clamp(118px, 18vh, 180px);
  }
  .login-character {
    left: calc(50% + 14px);
    bottom: calc(100% - 132px);
    width: clamp(230px, 72vw, 300px);
  }
}

@media (max-height: 780px) and (min-width: 681px) {
  .login-card {
    margin-top: 150px;
    transform: scale(.92);
    transform-origin: center center;
  }
  .login-character {
    left: calc(50% + 18px);
    bottom: calc(100% - 136px);
    width: 300px;
  }
}

.login-card .login-character {
  left: calc(50% + 28px) !important;
  bottom: calc(100% - 208px) !important;
}

.login-card .login-emblem {
  position: relative;
  z-index: 6;
  background: var(--bryer-css-v61-titleframe3, url('/images/titleframe3.png')) center / cover no-repeat !important;
  border: none !important;
  box-shadow:
    0 14px 36px rgba(3, 9, 4, .36),
    inset 0 1px 0 rgba(247, 245, 237, .08),
    inset 0 -10px 24px rgba(12, 25, 14, .18),
    inset 0 0 22px rgba(214, 180, 95, .08) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

.login-card .login-emblem img {
  position: relative;
  z-index: 2;
  opacity: 1;
}

@media (max-width: 680px) {
  .login-card .login-character {
    left: calc(50% + 18px) !important;
    bottom: calc(100% - 166px) !important;
  }
}

@media (max-height: 780px) and (min-width: 681px) {
  .login-card .login-character {
    left: calc(50% + 24px) !important;
    bottom: calc(100% - 176px) !important;
  }
}

.login-screen {
  position: relative;
  isolation: isolate;
}

.login-screen::before {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-image:
    radial-gradient(circle at center, rgba(242, 221, 155, .11) 0 1px, transparent 1.6px),
    linear-gradient(30deg, transparent 0 46%, rgba(214, 180, 95, .055) 46.5% 47.5%, transparent 48% 100%),
    linear-gradient(150deg, transparent 0 46%, rgba(214, 180, 95, .045) 46.5% 47.5%, transparent 48% 100%),
    repeating-linear-gradient(135deg, rgba(247, 245, 237, .025) 0 1px, transparent 1px 13px);
  background-size: 30px 30px, 72px 124px, 72px 124px, 46px 46px;
  background-position: 0 0, 0 0, 36px 62px, 0 0;
}

.login-screen::after {
  z-index: 1 !important;
}

.login-screen > .sparkles {
  position: fixed;
  z-index: 2;
}

.login-screen > .login-card {
  z-index: 3;
}

.login-card .login-character {
  left: calc(50% + 42px) !important;
  bottom: calc(100% - 188px) !important;
}

@media (max-width: 680px) {
  .login-card .login-character {
    left: calc(50% + 27px) !important;
    bottom: calc(100% - 150px) !important;
  }
}

@media (max-height: 780px) and (min-width: 681px) {
  .login-card .login-character {
    left: calc(50% + 36px) !important;
    bottom: calc(100% - 160px) !important;
  }
}

.login-card .login-emblem img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.app-shell::before {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mask-image: none;
  background-image:
    radial-gradient(circle at center, rgba(240, 217, 144, .12) 0 1.2px, transparent 1.8px),
    linear-gradient(45deg, transparent 48.9%, rgba(214, 180, 95, .048) 49.25% 50.75%, transparent 51.1%),
    linear-gradient(-45deg, transparent 48.9%, rgba(247, 245, 237, .032) 49.25% 50.75%, transparent 51.1%);
  background-size: 84px 84px, 84px 84px, 84px 84px;
  background-position: 42px 42px, 0 0, 0 0;
  mix-blend-mode: normal;
}

.app-shell > .topbar,
.app-shell > .ticker-wrap,
.app-shell > .main-layout,
.app-shell > .sparkles,
.app-shell > .toast,
.app-shell > .reel-overlay,
.app-shell > .modal-backdrop {
  position: relative;
  z-index: 1;
}
.app-shell > .topbar {
  position: sticky;
  z-index: 20;
}
.app-shell > .sparkles {
  position: fixed;
  z-index: 2;
}
.app-shell > .toast,
.app-shell > .reel-overlay,
.app-shell > .modal-backdrop { position: fixed; }

.view-shop .hero-character-left {
  left: 0;
  right: auto;
}
.view-shop .hero-character-right {
  left: auto;
  right: 0;
  justify-content: flex-end;
}
.view-shop .hero-character-right img {
  object-position: right bottom;
}

.view-shop .hero-copy {
  top: 50%;
  left: clamp(250px, 22vw, 350px);
  right: clamp(250px, 22vw, 350px);
  padding: 0;
  transform: translateY(-50%);
  text-align: center;
}
.view-shop .hero-copy .eyebrow {
  margin: 0 0 14px;
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: .22em;
}
.view-shop .hero-copy h2 {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(44px, 4.75vw, 74px);
  line-height: .99;
  text-wrap: balance;
}
.view-shop .hero-copy > p:last-child {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.55;
  text-wrap: balance;
}
.hero-word-gold {
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(214, 180, 95, .26);
}
.hero-word-pink {
  color: #f3b8cb;
  text-shadow: 0 0 16px rgba(243, 184, 203, .2);
}
.hero-word-red {
  color: #ffaaa7;
  text-shadow: 0 0 16px rgba(255, 170, 167, .2);
}

@media (max-width: 1240px) {
  .view-shop .hero-copy {
    left: clamp(210px, 21vw, 285px);
    right: clamp(210px, 21vw, 285px);
  }
  .view-shop .hero-copy h2 {
    font-size: clamp(38px, 4.65vw, 60px);
  }
  .view-shop .hero-copy > p:last-child {
    font-size: clamp(15px, 1.25vw, 19px);
  }
}

@media (max-width: 900px) {
  .view-shop .hero-character-right {
    opacity: .84;
  }
  .view-shop .hero-copy {
    left: 155px;
    right: 155px;
  }
  .view-shop .hero-copy h2 {
    font-size: clamp(32px, 6.2vw, 49px);
  }
  .view-shop .hero-copy > p:last-child {
    font-size: 14px;
  }
}

@media (max-width: 680px) {
  .view-shop .hero-character-right {
    width: 180px;
    opacity: .42;
  }
  .view-shop .hero-copy {
    left: 92px;
    right: 92px;
  }
  .view-shop .hero-copy .eyebrow {
    font-size: 12px;
  }
  .view-shop .hero-copy h2 {
    font-size: clamp(27px, 8vw, 38px);
  }
  .view-shop .hero-copy > p:last-child {
    font-size: 12px;
    line-height: 1.42;
    margin-top: 14px;
  }
}

.app-shell > .reel-overlay { z-index: 80; }
.app-shell > .modal-backdrop { z-index: 70; }
.app-shell > .toast { z-index: 100; }

.app-shell::before {
  opacity: .58 !important;
  background-image:
    radial-gradient(circle at center, rgba(240, 217, 144, .07) 0 1px, transparent 1.65px),
    linear-gradient(45deg, transparent 49.05%, rgba(214, 180, 95, .03) 49.35% 50.65%, transparent 50.95%),
    linear-gradient(-45deg, transparent 49.05%, rgba(247, 245, 237, .022) 49.35% 50.65%, transparent 50.95%) !important;
}

.brand-mark img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.view-shop .hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-align: center;
}
.view-shop .hero-copy .eyebrow-star {
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(214, 180, 95, .3);
}

.open-stage,
.prize-gallery {
  position: relative;
  overflow: hidden;
}
.open-stage {
  background: linear-gradient(180deg, rgba(27, 39, 29, .42), rgba(23, 31, 24, .32)) !important;
  border: 1px solid rgba(214, 180, 95, .16) !important;
  box-shadow: var(--shadow) !important;
}
.open-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .82;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(214, 180, 95, .08) 0 2px, transparent 2.6px),
    radial-gradient(circle at 78% 34%, rgba(247,245,237,.05) 0 1.1px, transparent 1.8px),
    linear-gradient(0deg, transparent 24px, rgba(214,180,95,.026) 24px 25px, transparent 25px),
    linear-gradient(90deg, transparent 24px, rgba(214,180,95,.026) 24px 25px, transparent 25px),
    linear-gradient(135deg, transparent 49.3%, rgba(214,180,95,.028) 49.55% 50.45%, transparent 50.7%),
    linear-gradient(45deg, transparent 49.3%, rgba(247,245,237,.02) 49.55% 50.45%, transparent 50.7%);
  background-size: 170px 170px, 210px 210px, 25px 25px, 25px 25px, 90px 90px, 90px 90px;
}
.open-stage > * {
  position: relative;
  z-index: 1;
}
.vault-carousel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 8px !important;
  min-height: 300px !important;
}
.vault-carousel::before,
.vault-carousel::after {
  opacity: .72;
  filter: blur(0px);
}
.vault-selection {
  background: linear-gradient(135deg, rgba(28, 39, 30, .8), rgba(34, 46, 35, .58)) !important;
  backdrop-filter: blur(8px);
}
.prize-gallery {
  background: linear-gradient(180deg, rgba(21, 31, 23, .64), rgba(20, 29, 22, .58)) !important;
}
.prize-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .78;
  background-image:
    radial-gradient(circle at 22% 20%, rgba(214,180,95,.075) 0 1.4px, transparent 2px),
    radial-gradient(circle at 76% 32%, rgba(156,214,176,.05) 0 1.2px, transparent 1.8px),
    linear-gradient(90deg, transparent 27px, rgba(214,180,95,.018) 27px 28px, transparent 28px),
    linear-gradient(0deg, transparent 27px, rgba(214,180,95,.018) 27px 28px, transparent 28px),
    radial-gradient(circle at center, transparent 0 57%, rgba(214,180,95,.03) 57.4%, transparent 57.8%);
  background-size: 180px 180px, 220px 220px, 28px 28px, 28px 28px, 120px 120px;
}
.prize-gallery > * {
  position: relative;
  z-index: 1;
}

.reel-track { will-change: transform; }

.coffer-unlock-stage {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.unlock-coffer-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(330px, 72vw);
  height: min(290px, 58vw);
}
.unlock-coffer-wrap img {
  position: relative;
  z-index: 2;
  width: min(260px, 58vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.42));
  animation: hoverChest 3.6s ease-in-out infinite;
}
.unlock-aura {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.28), rgba(125,168,117,.12) 42%, transparent 72%);
  filter: blur(14px);
  animation: auraPulse 2.8s ease-in-out infinite;
}
.unlock-key {
  position: relative;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1;
  z-index: 4;
  text-shadow: 0 0 14px rgba(214,180,95,.34), 0 0 26px rgba(214,180,95,.2);
  animation: keyDescend 2s cubic-bezier(.3,.1,.25,1) infinite;
}
.unlock-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
@keyframes keyDescend {
  0% {
    transform: translateY(-18px) scale(.92) rotate(-8deg);
    opacity: 0;
  }
  12% { opacity: 1; }
  58% {
    transform: translateY(100px) scale(1) rotate(0deg);
    opacity: 1;
  }
  76% {
    transform: translateY(126px) scale(.78);
    opacity: .72;
  }
  100% {
    transform: translateY(138px) scale(.3);
    opacity: 0;
  }
}

.result-grid { overflow: visible; }
.result-card {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}
.result-card .result-flare {
  z-index: 0 !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(124px, 15vw, 176px) !important;
  height: clamp(124px, 15vw, 176px) !important;
  filter: blur(18px);
}
.result-card .result-orbit {
  z-index: 1 !important;
  top: 28px !important;
}
.result-card img {
  position: relative;
  z-index: 6 !important;
}
.result-card .result-kicker,
.result-card h3,
.result-card p,
.result-card .price {
  position: relative;
  z-index: 4;
}

@media (max-width: 900px) {
  .coffer-unlock-stage { min-height: 460px; }
  .unlock-key { font-size: 42px; }
}

.unlock-key {
  width: min(176px, 30vw);
  display: grid;
  place-items: center;
  z-index: 4;
  animation: keyDescendOnce 2.2s cubic-bezier(.28,.14,.22,1) 1 forwards;
  transform-origin: center center;
}
.unlock-key img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .38)) drop-shadow(0 0 18px rgba(214,180,95,.26));
}
.unlock-actions {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.unlock-actions.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.coffer-unlock-stage.intro-complete .unlock-key {
  opacity: 0;
}
.coffer-unlock-stage.intro-complete .unlock-aura {
  animation: auraPulse 2.4s ease-in-out infinite;
}
@keyframes keyDescendOnce {
  0% {
    transform: translateY(-28px) scale(.9) rotate(-10deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  58% {
    transform: translateY(112px) scale(1.02) rotate(-1deg);
    opacity: 1;
  }
  74% {
    transform: translateY(138px) scale(.88) rotate(0deg);
    opacity: .92;
  }
  100% {
    transform: translateY(154px) scale(.28) rotate(0deg);
    opacity: 0;
  }
}

.reel-title {
  min-height: 40px;
}
.reel-title-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .03em;
}
.title-glyph {
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(214,180,95,.34);
  animation: reelGlyphPulse 1.8s ease-in-out infinite;
}
.reel-title-awakening {
  color: #f7f5ed;
  text-shadow: 0 0 16px rgba(214,180,95,.12);
  animation: reelTitleFloat 3.4s ease-in-out infinite;
}
.reel-title-opening,
.reel-title-fortune,
.reel-title-marker {
  position: relative;
  animation: reelTitleBreath 2s ease-in-out infinite;
}
.reel-title-opening {
  color: #f4e6b6;
  text-shadow: 0 0 14px rgba(214,180,95,.22);
}
.reel-title-opening::after,
.reel-title-marker::after,
.reel-title-fortune::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,180,95,.55), transparent);
  opacity: .8;
}
.reel-title-marker {
  color: #fff6d4;
  text-shadow: 0 0 14px rgba(214,180,95,.14);
}
.reel-title-fortune {
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(214,180,95,.32), 0 0 30px rgba(214,180,95,.14);
}
@keyframes reelGlyphPulse {
  0%, 100% {
    transform: scale(1);
    opacity: .9;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}
@keyframes reelTitleBreath {
  0%, 100% {
    transform: translateY(0);
    opacity: .92;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}
@keyframes reelTitleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-icon-stage {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
}
.result-card .result-flare {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 146px !important;
  height: 146px !important;
  filter: blur(16px);
}
.result-card .result-orbit {
  top: 50% !important;
  left: 50% !important;
  transform-origin: center center;
}
.result-card .result-orbit-a {
  transform: translate(-50%, -50%) rotate(18deg);
}
.result-card .result-orbit-b {
  transform: translate(-50%, -50%) rotate(-18deg);
}
.result-card img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .unlock-key { width: min(142px, 34vw); }
  .result-icon-stage {
    width: 148px;
    height: 148px;
  }
}

.reel-overlay,
.reel-overlay.is-rolling,
.reel-overlay.is-intro,
.reel-overlay.is-revealed {
  background: rgba(6, 11, 7, .035) !important;
  -webkit-backdrop-filter: blur(13px) saturate(.88) brightness(.82);
  backdrop-filter: blur(13px) saturate(.88) brightness(.82);
}
.reel-overlay.is-revealed {
  animation: fadeIn .28s ease !important;
}
.reel-atmosphere span {
  opacity: .055 !important;
}

.unlock-key {
  position: absolute !important;
  top: 12px;
  left: 50%;
  width: min(235px, 38vw) !important;
  height: 176px;
  translate: -50% 0;
  margin: 0 !important;
  z-index: 8 !important;
  animation: keyDropVisible 2.25s cubic-bezier(.25,.1,.22,1) 1 forwards !important;
}
.unlock-key img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 16px 16px rgba(0,0,0,.46)) drop-shadow(0 0 24px rgba(214,180,95,.42)) !important;
}
.coffer-unlock-stage {
  position: relative;
  padding-top: 116px;
}
.coffer-unlock-stage.intro-complete .unlock-key {
  display: none;
}
@keyframes keyDropVisible {
  0% {
    transform: translateY(-68px) scale(.92) rotate(-8deg);
    opacity: 0;
  }
  12% { opacity: 1; }
  54% {
    transform: translateY(82px) scale(1.04) rotate(-1deg);
    opacity: 1;
  }
  76% {
    transform: translateY(120px) scale(.84) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(150px) scale(.18) rotate(0deg);
    opacity: 0;
  }
}

.result-icon-stage {
  position: relative !important;
  width: 184px !important;
  height: 184px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 8px !important;
  animation: rewardHover 3.8s ease-in-out infinite;
}
.result-icon-stage .result-flare,
.result-icon-stage .result-orbit {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  translate: -50% -50% !important;
  transform-origin: center center !important;
}
.result-icon-stage .result-flare {
  width: 158px !important;
  height: 158px !important;
  z-index: 0 !important;
  filter: blur(15px) !important;
}
.result-icon-stage .result-orbit {
  width: 150px !important;
  height: 150px !important;
  z-index: 1 !important;
}
.result-icon-stage > img {
  position: relative !important;
  width: 102px !important;
  height: 102px !important;
  margin: 0 !important;
  z-index: 3 !important;
  object-fit: contain !important;
  animation: none !important;
}
.result-icon-stage .result-orbit-a {
  animation: rewardSpin 8s linear infinite !important;
}
.result-icon-stage .result-orbit-b {
  animation: rewardSpinReverse 9.5s linear infinite !important;
}

.view-vault .inventory-hero {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(410px, 33vw, 520px);
  min-height: 0;
  margin-top: -24px;
  margin-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.view-vault .inventory-hero .hero-stars {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  height: 100%;
  opacity: .2;
  pointer-events: none;
  background-image: image-set(url("/images/stars-800.webp") type("image/webp"), url("/images/stars.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 0;
}
.view-vault .inventory-hero .hero-stars-left {
  left: 0;
  transform: none;
}
.view-vault .inventory-hero .hero-stars-right {
  right: 0;
  transform: scaleX(-1);
  transform-origin: center;
}
.view-vault .inventory-hero .hero-character {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  width: clamp(245px, 22vw, 350px);
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.view-vault .inventory-hero .hero-character-left {
  left: 0;
  right: auto;
  justify-content: flex-start;
}
.view-vault .inventory-hero .hero-character-right {
  left: auto;
  right: 0;
  justify-content: flex-end;
}
.view-vault .inventory-hero .hero-character img {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.42));
}
.view-vault .inventory-hero .hero-character-left img { object-position: left bottom; }
.view-vault .inventory-hero .hero-character-right img { object-position: right bottom; }
.view-vault .inventory-hero .hero-copy {
  position: absolute;
  top: 50%;
  left: clamp(250px, 22vw, 350px);
  right: clamp(250px, 22vw, 350px);
  z-index: 3;
  padding: 0;
  transform: translateY(-50%);
  text-align: center;
}
.view-vault .inventory-hero .hero-copy .eyebrow {
  margin: 0 0 14px;
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: .22em;
}
.view-vault .inventory-hero .hero-copy h2 {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(44px, 4.75vw, 74px);
  line-height: .99;
  text-wrap: balance;
}
.view-vault .inventory-hero .hero-copy > p:last-child {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.55;
  text-wrap: balance;
}

@media (max-width: 1240px) {
  .view-vault .inventory-hero .hero-copy {
    left: clamp(210px, 21vw, 285px);
    right: clamp(210px, 21vw, 285px);
  }
  .view-vault .inventory-hero .hero-copy h2 { font-size: clamp(38px, 4.65vw, 60px); }
  .view-vault .inventory-hero .hero-copy > p:last-child { font-size: clamp(15px, 1.25vw, 19px); }
}
@media (max-width: 900px) {
  .view-vault .inventory-hero { height: clamp(390px, 43vw, 475px); }
  .view-vault .inventory-hero .hero-character { width: clamp(220px, 25vw, 300px); }
  .view-vault .inventory-hero .hero-character-right { opacity: .66; }
  .view-vault .inventory-hero .hero-copy {
    left: 155px;
    right: 155px;
  }
  .view-vault .inventory-hero .hero-copy h2 { font-size: clamp(32px, 6.2vw, 49px); }
  .view-vault .inventory-hero .hero-copy > p:last-child { font-size: 14px; }
}
@media (max-width: 680px) {
  .view-vault .inventory-hero {
    height: 430px;
    margin-top: -16px;
  }
  .view-vault .inventory-hero .hero-character {
    width: 225px;
    opacity: .72;
  }
  .view-vault .inventory-hero .hero-character-right {
    width: 180px;
    opacity: .42;
  }
  .view-vault .inventory-hero .hero-copy {
    left: 92px;
    right: 92px;
  }
  .view-vault .inventory-hero .hero-copy .eyebrow { font-size: 12px; }
  .view-vault .inventory-hero .hero-copy h2 { font-size: clamp(27px, 8vw, 38px); }
  .view-vault .inventory-hero .hero-copy > p:last-child {
    font-size: 12px;
    line-height: 1.42;
    margin-top: 14px;
  }
  .unlock-key { width: min(190px, 52vw) !important; }
}

.reel-title-awakening {
  opacity: 0;
  animation: introTitleFadeIn 1.08s ease-out 1 forwards !important;
}
.reel-title-awakening .title-glyph {
  animation: introGlyphWake 1.08s ease-out 1 forwards !important;
}
.unlock-key {
  opacity: 0;
  animation: keyDropVisible 2.15s cubic-bezier(.25,.1,.22,1) 1.22s 1 forwards !important;
}
@keyframes introTitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(7px);
  }
  65% {
    opacity: .9;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes introGlyphWake {
  0% {
    opacity: 0;
    transform: scale(.55) rotate(-16deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.view-vault .inventory-hero .inventory-eyebrow {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.inventory-diamond,
.inventory-word-gold {
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(214,180,95,.28);
}
.inventory-word-pink {
  color: #f3b8cb;
  text-shadow: 0 0 17px rgba(243,184,203,.22);
}

.vault-selection {
  width: min(1080px, 100%) !important;
  grid-template-columns: minmax(320px, 1fr) auto auto !important;
  gap: 28px !important;
  padding-inline: 30px !important;
}
.vault-selection > div:first-child {
  min-width: 0;
}
.vault-selection h3 {
  white-space: nowrap;
  font-size: clamp(22px, 2.25vw, 34px) !important;
}
.open-count-picker > span {
  color: #d9c98d !important;
  font-weight: 850;
  letter-spacing: .14em !important;
}
.open-count-picker small {
  color: var(--gold-soft) !important;
  font-weight: 750;
  text-shadow: 0 0 12px rgba(214,180,95,.14);
}
@media (max-width: 1180px) {
  .vault-selection {
    grid-template-columns: 1fr !important;
    width: min(900px, 100%) !important;
  }
  .vault-selection h3 { white-space: normal; }
}

@media (min-width: 981px) {
  .history-panel-dynamic {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    min-height: 360px;
  }
  .history-panel-dynamic .history-list {
    overflow-y: auto !important;
  }
}

.ticker-wrap {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}
.ticker {
  width: min(1180px, calc(100% - 28px));
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(34,49,36,.34) 7%,
      rgba(38,55,40,.82) 18%,
      rgba(38,55,40,.9) 50%,
      rgba(38,55,40,.82) 82%,
      rgba(34,49,36,.34) 93%,
      transparent 100%) !important;
  box-shadow: 0 12px 30px rgba(3,9,4,.12) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
@media (max-width: 680px) {
  .ticker {
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}

.modal {
  position: relative;
  isolation: isolate;
  background: linear-gradient(155deg, rgba(28,44,31,.98), rgba(18,30,21,.99)) !important;
}
.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  background-image:
    radial-gradient(circle at center, rgba(240,217,144,.09) 0 1.1px, transparent 1.7px),
    linear-gradient(30deg, transparent 48.8%, rgba(214,180,95,.038) 49.2% 50.8%, transparent 51.2%),
    linear-gradient(-30deg, transparent 48.8%, rgba(247,245,237,.025) 49.2% 50.8%, transparent 51.2%),
    radial-gradient(circle at center, transparent 0 58%, rgba(214,180,95,.035) 58.5%, transparent 59%);
  background-size: 72px 72px, 72px 72px, 72px 72px, 144px 144px;
}
.modal > * {
  position: relative;
  z-index: 1;
}
.modal-header {
  background: rgba(25,41,29,.88) !important;
  backdrop-filter: blur(12px);
}
.modal-whisper {
  color: #d6c892 !important;
}

.topbar {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(19,31,21,.96), rgba(14,25,17,.94)) !important;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .65;
  background-image:
    linear-gradient(115deg, transparent 0 18%, rgba(214,180,95,.032) 18.3% 18.8%, transparent 19.1% 43%, rgba(247,245,237,.018) 43.3% 43.8%, transparent 44.1%),
    radial-gradient(circle at center, rgba(214,180,95,.095) 0 1px, transparent 1.6px),
    linear-gradient(90deg, transparent, rgba(214,180,95,.05), transparent);
  background-size: 180px 100%, 34px 34px, 100% 1px;
  background-position: 0 0, 0 0, 0 calc(100% - 2px);
}
.topbar::after {
  content: "✦  ◇  ✦";
  position: absolute;
  left: 50%;
  bottom: 1px;
  z-index: 0;
  transform: translateX(-50%);
  color: rgba(214,180,95,.28);
  font-size: 9px;
  letter-spacing: .75em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(214,180,95,.2);
}
.topbar > * {
  position: relative;
  z-index: 1;
}

.result-icon-stage {
  display: grid !important;
  grid-template-columns: 184px !important;
  grid-template-rows: 184px !important;
  place-items: center !important;
  width: 184px !important;
  height: 184px !important;
}
.result-icon-stage .result-flare,
.result-icon-stage .result-orbit,
.result-icon-stage > img {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  translate: none !important;
  transform-origin: center center !important;
}
.result-icon-stage .result-flare {
  width: 158px !important;
  height: 158px !important;
  z-index: 0 !important;
  animation: rewardPulseCentered 2.8s ease-in-out infinite !important;
}
.result-icon-stage .result-orbit {
  width: 150px !important;
  height: 150px !important;
  z-index: 1 !important;
}
.result-icon-stage > img {
  width: 102px !important;
  height: 102px !important;
  z-index: 3 !important;
}
.result-icon-stage .result-orbit-a {
  animation: rewardSpin 8s linear infinite !important;
}
.result-icon-stage .result-orbit-b {
  animation: rewardSpinReverse 9.5s linear infinite !important;
}
@keyframes rewardPulseCentered {
  0%, 100% {
    transform: scale(.92);
    opacity: .72;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.main-layout {
  align-items: start;
}
.history-panel-dynamic {
  min-height: 0 !important;
}
.history-panel-dynamic .history-list {
  min-height: 0;
}

.history-list .history-item:nth-child(odd) {
  background: rgba(247, 245, 237, .022);
  border-color: rgba(247, 245, 237, .025);
}
.history-list .history-item:nth-child(even) {
  background: rgba(92, 121, 91, .075);
  border-color: rgba(116, 150, 112, .045);
}
.history-list .history-item:nth-child(odd):hover {
  background: rgba(247, 245, 237, .052);
}
.history-list .history-item:nth-child(even):hover {
  background: rgba(104, 142, 101, .13);
}

.inventory-word-red {
  color: #ffaaa7;
  text-shadow: 0 0 16px rgba(255, 170, 167, .2);
}

.topbar {
  grid-template-columns: auto minmax(72px, 1fr) auto minmax(72px, 1fr) auto !important;
  gap: clamp(12px, 1.5vw, 24px) !important;
}
.topbar-ornament {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, .7vw, 11px);
  color: rgba(214, 180, 95, .46);
  font-size: 8px;
  text-shadow: 0 0 10px rgba(214,180,95,.24);
  pointer-events: none;
}
.topbar-ornament i {
  display: block;
  flex: 1;
  min-width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,180,95,.24), rgba(247,245,237,.08), rgba(214,180,95,.24), transparent);
  box-shadow: 0 0 10px rgba(214,180,95,.08);
}
.topbar-ornament span:nth-of-type(2) {
  color: rgba(247,245,237,.24);
  transform: rotate(45deg);
}
@media (max-width: 1180px) {
  .topbar-ornament span:first-child,
  .topbar-ornament span:last-child { display: none; }
}
@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr auto !important;
  }
  .topbar-ornament { display: none; }
  .nav-tabs {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

.player-balance-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 19px;
  white-space: nowrap;
}
.player-balance {
  display: inline-block;
  transform-origin: center;
}
.player-balance.balance-roll-up {
  animation: balanceRollUp .54s cubic-bezier(.16,.86,.22,1);
}
.player-balance.balance-roll-down {
  animation: balanceRollDown .54s cubic-bezier(.16,.86,.22,1);
}
.balance-delta {
  position: absolute;
  right: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  animation: balanceDeltaAppear 2s ease forwards;
}
.balance-delta.is-gain {
  color: #79e5a1;
  text-shadow: 0 0 12px rgba(121,229,161,.24);
}
.balance-delta.is-loss {
  color: #ff8f8b;
  text-shadow: 0 0 12px rgba(255,143,139,.22);
}
@keyframes balanceRollUp {
  0% {
    opacity: .22;
    transform: translateY(12px) rotateX(-68deg);
    filter: blur(3px);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) rotateX(5deg);
    filter: blur(0);
  }
  100% { transform: translateY(0) rotateX(0); }
}
@keyframes balanceRollDown {
  0% {
    opacity: .22;
    transform: translateY(-12px) rotateX(68deg);
    filter: blur(3px);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) rotateX(-5deg);
    filter: blur(0);
  }
  100% { transform: translateY(0) rotateX(0); }
}
@keyframes balanceDeltaAppear {
  0% {
    opacity: 0;
    transform: translate(8px, -50%) scale(.86);
    filter: blur(3px);
  }
  16%, 72% {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-8px, -62%) scale(.94);
    filter: blur(2px);
  }
}

.purchase-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 13, 8, .18);
  -webkit-backdrop-filter: blur(13px) saturate(.88);
  backdrop-filter: blur(13px) saturate(.88);
  animation: purchaseOverlayIn .28s ease both;
}
.purchase-dialog {
  --accent: #52653c;
  --box-glow: #d6b45f;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(650px, 94vw);
  min-height: 510px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 34px clamp(22px, 4vw, 50px) 30px;
  border: 1px solid color-mix(in srgb, var(--box-glow) 42%, rgba(255,255,255,.12));
  border-radius: 20px;
  background:
    linear-gradient(155deg, rgba(31, 46, 33, .88), rgba(16, 27, 19, .9));
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 40px color-mix(in srgb, var(--accent) 10%, transparent);
  animation: purchaseDialogIn .44s cubic-bezier(.18,1,.3,1) both;
}
.purchase-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .62;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, color-mix(in srgb, var(--box-glow) 13%, transparent) 0 1.2px, transparent 1.9px),
    linear-gradient(45deg, transparent 49%, rgba(214,180,95,.035) 49.4% 50.6%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(247,245,237,.022) 49.4% 50.6%, transparent 51%);
  background-size: 72px 72px;
}
.purchase-dialog-title {
  max-width: 570px;
  min-height: 64px;
  display: grid;
  place-items: center;
  color: #f7f5ed;
  font-family: Georgia, serif;
  font-size: clamp(23px, 3.2vw, 36px);
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 22px color-mix(in srgb, var(--box-glow) 18%, transparent);
}
.purchase-dialog.is-success .purchase-dialog-title {
  color: var(--gold-soft);
  animation: purchaseSuccessTitle .85s cubic-bezier(.17,1,.28,1) both;
}
.purchase-dialog-visual {
  position: relative;
  width: min(330px, 72vw);
  height: 285px;
  display: grid;
  place-items: center;
}
.purchase-dialog-visual > img {
  position: relative;
  z-index: 4;
  width: min(260px, 60vw);
  max-height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.42));
  animation: purchaseCofferIdle 3.2s ease-in-out infinite;
}
.purchase-dialog-glow {
  position: absolute;
  z-index: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--box-glow) 34%, transparent), color-mix(in srgb, var(--accent) 17%, transparent) 44%, transparent 73%);
  filter: blur(16px);
  animation: purchaseGlow 2.5s ease-in-out infinite;
}
.purchase-dialog-rings {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.purchase-dialog-rings i {
  position: absolute;
  width: 220px;
  height: 92px;
  border: 1px solid color-mix(in srgb, var(--box-glow) 42%, transparent);
  border-radius: 50%;
  opacity: .46;
  animation: purchaseRingSpin 8s linear infinite;
}
.purchase-dialog-rings i:nth-child(2) {
  transform: rotate(60deg);
  animation-duration: 10s;
  animation-direction: reverse;
}
.purchase-dialog-rings i:nth-child(3) {
  transform: rotate(-60deg);
  animation-duration: 12s;
}
.purchase-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.purchase-dialog-actions .btn { min-width: 150px; }
.purchase-dialog.is-success .purchase-dialog-visual > img {
  animation: purchaseCofferSuccess 1.25s cubic-bezier(.16,1,.3,1) both;
}
.purchase-dialog.is-success .purchase-dialog-glow {
  animation: purchaseGlowSuccess 1.4s ease-out both;
}
.purchase-dialog.is-success .purchase-dialog-rings i {
  animation-duration: 1.15s;
  border-color: color-mix(in srgb, var(--box-glow) 72%, white 12%);
}
.purchase-success-stars {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.purchase-success-stars span {
  --angle: calc(var(--i) * 25.714deg);
  position: absolute;
  color: color-mix(in srgb, var(--box-glow) 72%, white 20%);
  text-shadow: 0 0 12px currentColor;
  opacity: 0;
  animation: purchaseStarBurst 1.15s cubic-bezier(.12,.75,.25,1) calc(var(--i) * 18ms) both;
}
@keyframes purchaseOverlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; } }
@keyframes purchaseDialogIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes purchaseCofferIdle { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-8px); } }
@keyframes purchaseGlow { 0%,100% { opacity: .66; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes purchaseRingSpin { to { rotate: 360deg; } }
@keyframes purchaseCofferSuccess {
  0% {
    transform: translateY(0) scale(1) rotate(0);
    filter: drop-shadow(0 24px 26px rgba(0,0,0,.42));
  }
  28% { transform: translateY(-18px) scale(1.08) rotate(-2deg); }
  54% { transform: translateY(4px) scale(.94) rotate(2deg); }
  76% {
    transform: translateY(-8px) scale(1.13) rotate(0);
    filter: drop-shadow(0 24px 34px color-mix(in srgb, var(--box-glow) 50%, rgba(0,0,0,.3)));
  }
  100% {
    transform: translateY(0) scale(1.03);
    filter: drop-shadow(0 20px 28px color-mix(in srgb, var(--box-glow) 35%, rgba(0,0,0,.36)));
  }
}
@keyframes purchaseGlowSuccess {
  0% {
    opacity: .6;
    transform: scale(.9);
  }
  45% {
    opacity: 1;
    transform: scale(1.42);
  }
  100% {
    opacity: .82;
    transform: scale(1.12);
  }
}
@keyframes purchaseSuccessTitle {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.92);
    filter: blur(5px);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
    filter: blur(0);
  }
  100% { transform: none; }
}
@keyframes purchaseStarBurst {
  0% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(12px) scale(.4) rotate(calc(var(--angle) * -1));
  }
  24% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(145px) scale(1.15) rotate(calc(var(--angle) * -1));
  }
}

@media (max-width: 680px) {
  .purchase-dialog {
    min-height: 470px;
    padding-inline: 18px;
  }
  .purchase-dialog-title { font-size: 23px; }
  .purchase-dialog-actions { width: 100%; }
  .purchase-dialog-actions .btn { min-width: 128px; }
  .balance-delta {
    right: 0;
    top: calc(100% + 7px);
  }
}

.purchase-title-highlight {
  color: var(--gold-soft);
  font-weight: 900;
  text-shadow: 0 0 16px rgba(214, 180, 95, .28);
}

.balance-delta {
  animation-duration: 5s !important;
}
@keyframes balanceDeltaAppear {
  0% {
    opacity: 0;
    transform: translate(8px, -50%) scale(.86);
    filter: blur(3px);
  }
  7%, 82% {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-8px, -62%) scale(.94);
    filter: blur(2px);
  }
}

.history-list {
  padding: 0 !important;
}
.history-list .history-item {
  width: 100%;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.history-list .history-item + .history-item {
  margin-top: 0 !important;
  border-top: 1px solid rgba(247, 245, 237, .035) !important;
}
.history-list .history-item:nth-child(odd) {
  background: rgba(247, 245, 237, .025) !important;
}
.history-list .history-item:nth-child(even) {
  background: rgba(82, 108, 82, .09) !important;
}
.history-list .history-item:nth-child(odd):hover {
  background: rgba(247, 245, 237, .055) !important;
}
.history-list .history-item:nth-child(even):hover {
  background: rgba(92, 126, 91, .15) !important;
}

.unlock-actions {
  width: min(440px, 92vw);
  flex-direction: column;
  align-items: center;
  gap: 16px !important;
}
.unlock-action-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.unlock-action-buttons .btn {
  min-width: 150px;
}
.skip-animation-option {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 44px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(214, 180, 95, .34);
  border-radius: 10px;
  color: #f7f5ed;
  background: rgba(22, 34, 24, .72);
  box-shadow: 0 0 0 0 rgba(214,180,95,.18), inset 0 1px 0 rgba(255,255,255,.045);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .025em;
  cursor: pointer;
  overflow: hidden;
  animation: skipOptionAttention 2.4s ease-in-out infinite;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.skip-animation-option::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.13) 44%, rgba(214,180,95,.18) 50%, transparent 72%);
  translate: -115% 0;
  animation: skipOptionSweep 3s ease-in-out infinite;
}
.skip-animation-option:hover {
  transform: translateY(-1px);
  border-color: rgba(214,180,95,.62);
  background: rgba(35, 50, 36, .86);
}
.skip-animation-option.is-checked {
  color: #fff2be;
  border-color: rgba(214,180,95,.72);
  background: rgba(52, 69, 42, .88);
}
.skip-animation-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.skip-checkbox {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(214,180,95,.55);
  border-radius: 5px;
  background: rgba(8, 15, 9, .72);
  box-shadow: inset 0 0 10px rgba(214,180,95,.05), 0 0 12px rgba(214,180,95,.08);
}
.skip-checkbox i {
  width: 10px;
  height: 6px;
  border-left: 2px solid #172018;
  border-bottom: 2px solid #172018;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  opacity: 0;
  transition: transform .24s cubic-bezier(.17,1,.3,1), opacity .18s ease;
}
.skip-animation-option.is-checked .skip-checkbox {
  background: linear-gradient(135deg, #f4e2a7, #d4af54);
  box-shadow: 0 0 16px rgba(214,180,95,.28);
}
.skip-animation-option.is-checked .skip-checkbox i {
  transform: translateY(-1px) rotate(-45deg) scale(1);
  opacity: 1;
}
@keyframes skipOptionAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,180,95,.1), inset 0 1px 0 rgba(255,255,255,.045); }
  50% { box-shadow: 0 0 0 5px rgba(214,180,95,.045), 0 0 22px rgba(214,180,95,.12), inset 0 1px 0 rgba(255,255,255,.06); }
}
@keyframes skipOptionSweep {
  0%, 22% {
    translate: -115% 0;
    opacity: 0;
  }
  40% { opacity: 1; }
  68%, 100% {
    translate: 115% 0;
    opacity: 0;
  }
}

.unlock-coffer-wrap {
  isolation: isolate;
}
.unlock-coffer-wrap::before,
.unlock-coffer-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.unlock-coffer-wrap::before {
  z-index: 0;
  width: 245px;
  height: 245px;
  border: 1px solid rgba(214,180,95,.2);
  box-shadow: 0 0 26px rgba(214,180,95,.12), inset 0 0 28px rgba(214,180,95,.08);
  animation: unlockHaloBreathe 2.8s ease-in-out infinite;
}
.unlock-coffer-wrap::after {
  z-index: 0;
  width: 178px;
  height: 178px;
  background: radial-gradient(circle, rgba(255,238,180,.18), rgba(214,180,95,.1) 28%, rgba(110,153,106,.07) 48%, transparent 72%);
  filter: blur(10px);
  animation: unlockCorePulse 2s ease-in-out infinite;
}
.unlock-orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.unlock-orbits i {
  position: absolute;
  width: 255px;
  height: 92px;
  border: 1px solid rgba(214,180,95,.28);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(214,180,95,.08);
  animation: unlockOrbitSpin 8s linear infinite;
}
.unlock-orbits i:nth-child(2) {
  transform: rotate(60deg);
  border-color: rgba(150, 202, 159, .2);
  animation-duration: 10s;
  animation-direction: reverse;
}
.unlock-orbits i:nth-child(3) {
  transform: rotate(-60deg);
  animation-duration: 12s;
}
.unlock-sparks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.unlock-sparks span {
  --spark-angle: calc(var(--spark-index) * 36deg);
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(244,226,167,.86);
  font-size: 12px;
  text-shadow: 0 0 10px currentColor;
  opacity: 0;
  animation: unlockSparkDrift 3.2s ease-in-out calc(var(--spark-index) * -290ms) infinite;
}
.coffer-unlock-stage.intro-complete .unlock-aura {
  opacity: 1;
  filter: blur(12px);
  animation: auraPulse 2.1s ease-in-out infinite !important;
}
@keyframes unlockHaloBreathe {
  0%,100% {
    opacity: .48;
    transform: translate(-50%, -50%) scale(.92);
  }
  50% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1.08);
  }
}
@keyframes unlockCorePulse {
  0%,100% {
    opacity: .66;
    transform: translate(-50%, -50%) scale(.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.13);
  }
}
@keyframes unlockOrbitSpin {
  to { rotate: 360deg; }
}
@keyframes unlockSparkDrift {
  0% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(78px) scale(.55) rotate(calc(var(--spark-angle) * -1));
  }
  25% { opacity: .9; }
  72% { opacity: .48; }
  100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(145px) scale(1.15) rotate(calc(var(--spark-angle) * -1));
  }
}

@media (max-width: 680px) {
  .unlock-action-buttons { width: 100%; }
  .unlock-action-buttons .btn { min-width: 128px; }
  .skip-animation-option { min-width: 190px; }
}

.purchase-dialog-title {
  display: block !important;
  min-height: 0 !important;
}
.purchase-question-line {
  display: inline !important;
  white-space: normal;
}

.coffer-unlock-stage {
  padding-top: 0 !important;
  width: min(1180px, 96vw);
  min-height: 540px;
}
.unlock-coffer-line {
  --unlock-unit-size: 330px;
  --unlock-coffer-size: 260px;
  --unlock-halo-size: 245px;
  --unlock-key-size: 235px;
  width: 100%;
  min-height: 390px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.3vw, 20px);
  margin: 0 auto;
}
.unlock-coffer-line.count-2 {
  --unlock-unit-size: 285px;
  --unlock-coffer-size: 225px;
  --unlock-halo-size: 218px;
  --unlock-key-size: 205px;
}
.unlock-coffer-line.count-3 {
  --unlock-unit-size: 240px;
  --unlock-coffer-size: 185px;
  --unlock-halo-size: 184px;
  --unlock-key-size: 174px;
}
.unlock-coffer-line.count-4 {
  --unlock-unit-size: 205px;
  --unlock-coffer-size: 154px;
  --unlock-halo-size: 158px;
  --unlock-key-size: 146px;
}
.unlock-coffer-line.count-5 {
  --unlock-unit-size: 180px;
  --unlock-coffer-size: 132px;
  --unlock-halo-size: 140px;
  --unlock-key-size: 126px;
}
.unlock-coffer-unit {
  position: relative;
  flex: 0 1 var(--unlock-unit-size);
  width: var(--unlock-unit-size);
  min-width: 0;
  height: 382px;
  padding-top: 116px;
}
.unlock-coffer-unit .unlock-key {
  top: 0 !important;
  left: 50% !important;
  width: var(--unlock-key-size) !important;
  height: 172px !important;
  animation-delay: calc(1.22s + var(--unlock-delay, 0ms)) !important;
}
.unlock-coffer-unit .unlock-key img {
  filter:
    drop-shadow(0 16px 16px rgba(0,0,0,.46))
    drop-shadow(0 0 25px color-mix(in srgb, var(--box-glow) 55%, transparent)) !important;
}
.unlock-coffer-unit .unlock-coffer-wrap {
  width: 100% !important;
  height: 250px !important;
  margin: 0 auto;
}
.unlock-coffer-unit .unlock-coffer-wrap > img {
  width: var(--unlock-coffer-size) !important;
  max-width: 92% !important;
  height: 210px !important;
  filter:
    drop-shadow(0 24px 28px rgba(0,0,0,.42))
    drop-shadow(0 0 18px color-mix(in srgb, var(--box-glow) 26%, transparent)) !important;
}
.unlock-coffer-unit .unlock-aura {
  width: var(--unlock-halo-size) !important;
  height: var(--unlock-halo-size) !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--box-glow) 38%, transparent),
    color-mix(in srgb, var(--accent) 20%, transparent) 44%,
    transparent 73%
  ) !important;
}
.unlock-coffer-unit .unlock-coffer-wrap::before {
  width: var(--unlock-halo-size) !important;
  height: var(--unlock-halo-size) !important;
  border-color: color-mix(in srgb, var(--box-glow) 38%, transparent) !important;
  box-shadow:
    0 0 28px color-mix(in srgb, var(--box-glow) 25%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--box-glow) 15%, transparent) !important;
}
.unlock-coffer-unit .unlock-coffer-wrap::after {
  width: calc(var(--unlock-halo-size) * .74) !important;
  height: calc(var(--unlock-halo-size) * .74) !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--box-glow) 34%, white 6%),
    color-mix(in srgb, var(--box-glow) 18%, transparent) 34%,
    color-mix(in srgb, var(--accent) 11%, transparent) 55%,
    transparent 74%
  ) !important;
}
.unlock-coffer-unit .unlock-orbits i {
  width: calc(var(--unlock-halo-size) * 1.04) !important;
  height: calc(var(--unlock-halo-size) * .38) !important;
  border-color: color-mix(in srgb, var(--box-glow) 48%, transparent) !important;
  box-shadow: 0 0 13px color-mix(in srgb, var(--box-glow) 18%, transparent) !important;
}
.unlock-coffer-unit .unlock-orbits i:nth-child(2) {
  border-color: color-mix(in srgb, var(--accent) 55%, white 8%) !important;
}
.unlock-coffer-unit .unlock-sparks span {
  color: color-mix(in srgb, var(--box-glow) 74%, white 24%) !important;
}
.coffer-unlock-stage.intro-complete .unlock-key {
  display: none !important;
}

.winning-slot-effect {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: 154px;
  height: 126px;
  translate: -50% -50%;
  pointer-events: none;
  isolation: isolate;
  animation: winningSlotArrival 1.05s cubic-bezier(.16,.82,.24,1) both;
}
.winning-slot-effect::before,
.winning-slot-effect::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
.winning-slot-effect::before {
  z-index: -1;
  width: 138px;
  height: 112px;
  background: radial-gradient(circle, color-mix(in srgb, var(--box-glow) 62%, white 8%), color-mix(in srgb, var(--box-glow) 24%, transparent) 45%, transparent 72%);
  filter: blur(9px);
  animation: winningSlotFlash 1.05s ease-out both;
}
.winning-slot-effect::after {
  width: 146px;
  height: 104px;
  border: 2px solid color-mix(in srgb, var(--box-glow) 72%, white 14%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--box-glow) 54%, transparent), inset 0 0 20px color-mix(in srgb, var(--box-glow) 25%, transparent);
  animation: winningSlotRing 1.05s ease-out both;
}
.winning-slot-effect i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 126px;
  height: 70px;
  translate: -50% -50%;
  border: 1px solid color-mix(in srgb, var(--box-glow) 60%, transparent);
  border-radius: 50%;
  animation: winningSlotOrbit .9s ease-out both;
}
.winning-slot-effect i:nth-child(2) { rotate: 60deg; }
.winning-slot-effect i:nth-child(3) { rotate: -60deg; }
.winning-slot-effect span {
  --slot-angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  color: color-mix(in srgb, var(--box-glow) 72%, white 24%);
  font-size: 13px;
  text-shadow: 0 0 12px currentColor;
  opacity: 0;
  animation: winningSlotSpark 1s cubic-bezier(.12,.72,.24,1) both;
}
.winning-slot-effect span:nth-of-type(1) { --slot-angle: 0deg; }
.winning-slot-effect span:nth-of-type(2) {
  --slot-angle: 60deg;
  animation-delay: 30ms;
}
.winning-slot-effect span:nth-of-type(3) {
  --slot-angle: 120deg;
  animation-delay: 60ms;
}
.winning-slot-effect span:nth-of-type(4) {
  --slot-angle: 180deg;
  animation-delay: 90ms;
}
.winning-slot-effect span:nth-of-type(5) {
  --slot-angle: 240deg;
  animation-delay: 120ms;
}
.winning-slot-effect span:nth-of-type(6) {
  --slot-angle: 300deg;
  animation-delay: 150ms;
}
@keyframes winningSlotArrival {
  0% {
    opacity: 0;
    scale: .42;
    filter: blur(7px);
  }
  28% {
    opacity: 1;
    scale: 1.08;
    filter: blur(0);
  }
  100% {
    opacity: .95;
    scale: 1;
  }
}
@keyframes winningSlotFlash {
  0% {
    opacity: 0;
    scale: .35;
  }
  35% {
    opacity: 1;
    scale: 1.18;
  }
  100% {
    opacity: .42;
    scale: 1;
  }
}
@keyframes winningSlotRing {
  0% {
    opacity: 0;
    scale: .4;
    rotate: -18deg;
  }
  42% {
    opacity: 1;
    scale: 1.08;
  }
  100% {
    opacity: .5;
    scale: 1;
    rotate: 18deg;
  }
}
@keyframes winningSlotOrbit {
  from {
    opacity: 0;
    scale: .45;
    rotate: -90deg;
  }
  40% { opacity: .9; }
  to {
    opacity: .35;
    scale: 1.08;
    rotate: 55deg;
  }
}
@keyframes winningSlotSpark {
  0% {
    opacity: 0;
    transform: rotate(var(--slot-angle)) translateX(16px) scale(.45) rotate(calc(var(--slot-angle) * -1));
  }
  28% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--slot-angle)) translateX(94px) scale(1.18) rotate(calc(var(--slot-angle) * -1));
  }
}

.history-list .history-item:nth-child(odd) {
  background: rgba(247, 245, 237, .092) !important;
}
.history-list .history-item:nth-child(even) {
  background: rgba(7, 16, 9, .29) !important;
}
.history-list .history-item:nth-child(odd):hover {
  background: rgba(247, 245, 237, .135) !important;
}
.history-list .history-item:nth-child(even):hover {
  background: rgba(12, 27, 15, .43) !important;
}

@media (max-width: 900px) {
  .coffer-unlock-stage { width: min(96vw, 820px); }
  .unlock-coffer-line { gap: 4px; }
  .unlock-coffer-line.count-4,
  .unlock-coffer-line.count-5 {
    --unlock-unit-size: 150px;
    --unlock-coffer-size: 108px;
    --unlock-halo-size: 116px;
    --unlock-key-size: 104px;
  }
}
@media (max-width: 680px) {
  .coffer-unlock-stage { min-height: 500px; }
  .unlock-coffer-line {
    min-height: 335px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-inline: 12px;
    scrollbar-width: thin;
  }
  .unlock-coffer-unit {
    flex: 0 0 145px;
    width: 145px;
    height: 326px;
    padding-top: 100px;
  }
  .unlock-coffer-line {
    --unlock-unit-size: 145px;
    --unlock-coffer-size: 104px;
    --unlock-halo-size: 112px;
    --unlock-key-size: 100px;
  }
  .unlock-coffer-unit .unlock-key { height: 148px !important; }
  .unlock-coffer-unit .unlock-coffer-wrap { height: 210px !important; }
  .unlock-coffer-unit .unlock-coffer-wrap > img { height: 170px !important; }
}

.deposit-allowance-summary {
  display: grid;
  gap: 1px;
  margin-top: 4px;
  min-width: 210px;
  color: rgba(247,245,237,.74);
  font-size: 12px;
  line-height: 1.25;
  text-align: right;
}
.deposit-allowance-summary > span {
  color: rgba(247,245,237,.54);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.deposit-allowance-summary strong {
  color: var(--gold-soft);
  font-size: 12px;
  text-shadow: 0 0 12px rgba(214,180,95,.18);
}
.deposit-allowance-summary small {
  color: rgba(247,245,237,.58);
  font-size: 9px;
}

.sale-stock-seal {
  position: absolute;
  z-index: 8;
  right: 13px;
  bottom: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(240,217,144,.52);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(46,65,45,.96), rgba(25,39,28,.95));
  color: #f0d990;
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px color-mix(in srgb, var(--box-glow) 22%, transparent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
  pointer-events: none;
  animation: stockSealBreath 2.7s ease-in-out infinite;
}
@keyframes stockSealBreath {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(.96);
  }
  50% {
    transform: translateY(-2px);
    filter: brightness(1.12);
  }
}

.history-gil-icon.is-gil {
  overflow: hidden;
  padding: 5px;
}
.history-gil-icon.is-gil img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(214,180,95,.25));
}
.history-gil-icon.is-inventory span {
  font-family: Georgia, serif;
  font-weight: 900;
}

.reward-row {
  position: relative;
}
.reward-row.is-out-of-stock {
  opacity: .48;
  filter: grayscale(.7) saturate(.5);
  background: linear-gradient(90deg, rgba(18,25,19,.72), rgba(36,31,24,.55)) !important;
  border-color: rgba(224,164,132,.2) !important;
}
.reward-row.is-out-of-stock > img,
.reward-row.is-out-of-stock > div,
.reward-row.is-out-of-stock > .chance {
  transform: scale(.985);
}
.reward-stock-stamp {
  position: absolute;
  z-index: 8;
  top: 50%;
  right: 74px;
  transform: translateY(-50%) rotate(-7deg);
  padding: 5px 9px;
  border: 2px solid rgba(255,154,145,.88);
  border-radius: 3px;
  color: #ffaaa7;
  background: rgba(42,17,17,.68);
  box-shadow: 0 0 16px rgba(255,122,112,.2);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 900px) {
  .deposit-allowance-summary {
    min-width: 0;
    text-align: left;
  }
  .reward-stock-stamp {
    right: 58px;
    font-size: 8px;
  }
}
.reward-row.is-out-of-stock {
  opacity: 1;
}
.reward-row.is-out-of-stock > img,
.reward-row.is-out-of-stock > div,
.reward-row.is-out-of-stock > .chance {
  opacity: .44;
  filter: grayscale(.75) saturate(.45);
}
.reward-row.is-out-of-stock .reward-stock-stamp {
  opacity: 1;
  filter: none;
}

.player-finance-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 20px;
  white-space: nowrap;
}
.player-finance-divider {
  width: 1px;
  height: 18px;
  flex: 0 0 1px;
  background: linear-gradient(180deg, transparent, rgba(214,180,95,.48), transparent);
  box-shadow: 0 0 8px rgba(214,180,95,.14);
}
.deposit-limit-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: rgba(247,245,237,.58);
  font-size: 12px;
  line-height: 1;
}
.deposit-limit-inline > span {
  font-weight: 750;
  letter-spacing: .025em;
}
.deposit-limit-inline > strong {
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 850;
  text-shadow: 0 0 11px rgba(214,180,95,.16);
}
.deposit-allowance-summary { display: none !important; }

.sale-stock-seal {
  right: 10px !important;
  bottom: 4px !important;
  min-width: 76px;
  padding: 8px 13px 7px !important;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--box-glow) 68%, #f0d990 32%) !important;
  border-radius: 9px 9px 9px 3px !important;
  background:
    linear-gradient(145deg, rgba(47,67,47,.98), rgba(18,31,22,.98)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.16), transparent) border-box !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -8px 16px rgba(0,0,0,.16),
    0 0 22px color-mix(in srgb, var(--box-glow) 34%, transparent) !important;
  color: var(--gold-soft) !important;
  letter-spacing: normal !important;
  animation: stockSealBreath 2.35s ease-in-out infinite, stockSealShimmer 3.8s linear infinite !important;
  overflow: hidden;
}
.sale-stock-seal::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(240,217,144,.13);
  border-radius: 6px 6px 6px 2px;
  pointer-events: none;
}
.sale-stock-seal::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  width: 24px;
  left: -40px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: stockSealSweep 3.8s ease-in-out infinite;
}
.sale-stock-seal b {
  position: relative;
  z-index: 1;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .035em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--box-glow) 44%, transparent);
}
.sale-stock-seal small {
  position: relative;
  z-index: 1;
  color: rgba(247,245,237,.72);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .18em;
}
@keyframes stockSealSweep {
  0%, 18% {
    left: -40px;
    opacity: 0;
  }
  32% { opacity: 1; }
  62% {
    left: calc(100% + 18px);
    opacity: .7;
  }
  72%, 100% {
    left: calc(100% + 18px);
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .deposit-limit-inline { font-size: 9px; }
  .deposit-limit-inline > strong { font-size: 9px; }
  .player-finance-line { gap: 7px; }
}
@media (max-width: 760px) {
  .player-finance-divider,
  .deposit-limit-inline { display: none; }
}

.nav-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.nav-help-button {
  position: relative;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(214,180,95,.22);
  border-radius: 9px;
  color: rgba(247,245,237,.78);
  background:
    radial-gradient(circle at 50% 0, rgba(214,180,95,.11), transparent 62%),
    linear-gradient(145deg, rgba(44,61,43,.62), rgba(23,35,25,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 7px 18px rgba(0,0,0,.18);
  font-weight: 800;
  letter-spacing: .025em;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.nav-help-button::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -30px;
  width: 18px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transition: left .55s ease;
}
.nav-help-button:hover {
  color: var(--gold-soft);
  border-color: rgba(214,180,95,.46);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 9px 22px rgba(0,0,0,.24), 0 0 18px rgba(214,180,95,.1);
}
.nav-help-button:hover::after { left: calc(100% + 18px); }

.player-finance-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  min-height: 30px;
  line-height: 1;
}
.player-finance-stack .player-balance-shell {
  min-height: 16px;
}
.player-finance-stack .player-balance {
  font-size: 13px;
  line-height: 1;
}
.deposit-limit-inline {
  display: inline-flex !important;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  color: rgba(247,245,237,.57);
  font-size: 8.5px !important;
  line-height: 1;
  white-space: nowrap;
}
.deposit-limit-inline > span {
  color: rgba(247,245,237,.55);
  font-size: inherit;
  font-weight: 750;
}
.deposit-limit-inline > strong {
  color: #f3b8cb !important;
  font-size: 8.5px !important;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(243,184,203,.2) !important;
}
.deposit-limit-inline.is-reached > strong {
  color: #ffaaa7 !important;
  text-shadow: 0 0 12px rgba(255,170,167,.25) !important;
}
.player-finance-divider,
.player-finance-line { display: none !important; }

.sale-stock-seal {
  min-width: 54px !important;
  width: auto !important;
  padding: 7px 8px 6px !important;
  border-radius: 8px 8px 8px 3px !important;
  gap: 2px !important;
}
.sale-stock-seal b {
  font-size: 15px !important;
}
.sale-stock-seal small {
  color: #fff3c4 !important;
  font-size: 9px !important;
  letter-spacing: .09em !important;
  text-shadow: 0 0 8px rgba(240,217,144,.34), 0 1px 2px rgba(0,0,0,.8);
}

.reward-icon-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
.reward-icon-wrap > img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
}
.reward-remaining-badge {
  position: absolute;
  z-index: 5;
  right: -5px;
  bottom: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240,217,144,.7);
  border-radius: 10px;
  color: #fff4ca;
  background: linear-gradient(145deg, rgba(67,87,59,.98), rgba(28,43,30,.98));
  box-shadow: 0 4px 10px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1), 0 0 12px rgba(214,180,95,.18);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.reward-row.is-out-of-stock > .reward-icon-wrap,
.reward-row.is-out-of-stock > div:not(.reward-icon-wrap),
.reward-row.is-out-of-stock > .chance {
  opacity: .44;
  filter: grayscale(.75) saturate(.45);
}
.reward-row.is-out-of-stock > .reward-icon-wrap img {
  filter: grayscale(.75) saturate(.45);
}

.history-spent-title {
  color: #ffaaa7 !important;
  text-shadow: 0 0 11px rgba(255,170,167,.18);
}

.help-backdrop {
  background: rgba(8,15,10,.28) !important;
  backdrop-filter: blur(13px) saturate(.82) !important;
}
.help-modal {
  position: relative;
  isolation: isolate;
  width: min(820px, 95vw);
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(214,180,95,.25);
  border-radius: 16px;
  color: #f7f5ed;
  /* Keep the original forest-green base; these layers add texture without changing the palette. */
  background: linear-gradient(180deg, rgba(26,42,29,.97), rgba(17,30,20,.98));
  box-shadow: 0 28px 80px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.06), 0 0 36px rgba(214,180,95,.08);
  animation: helpModalEnter .28s cubic-bezier(.18,.82,.25,1);
}
.help-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .63;
  background-image:
    radial-gradient(circle at center, rgba(240,217,144,.075) 0 1px, transparent 1.6px),
    linear-gradient(45deg, transparent 49.2%, rgba(214,180,95,.032) 49.55% 50.45%, transparent 50.8%),
    linear-gradient(-45deg, transparent 49.2%, rgba(247,245,237,.023) 49.55% 50.45%, transparent 50.8%),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(215,184,111,.018) 24px 25px, transparent 25px 50px);
  background-size: 42px 42px, 52px 52px, 52px 52px, 100% 100%;
}
.help-modal::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(214,180,95,.08);
  border-radius: 12px;
}
.help-modal > * {
  position: relative;
  z-index: 1;
}
.help-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 25px 62px 20px;
  border-bottom: 1px solid rgba(214,180,95,.13);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 100% at 50% -20%, rgba(214,180,95,.045), transparent 82%),
    linear-gradient(180deg, rgba(40,58,41,.72), rgba(29,45,32,.36));
}
.help-modal-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.help-modal-header > .close {
  position: absolute;
  right: 22px;
  top: 17px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #ffe88e;
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255,229,137,.65), 0 0 17px rgba(248,186,61,.42);
}
.help-modal-header .eyebrow {
  margin: 0 0 6px;
  color: var(--gold-soft);
  letter-spacing: .18em;
}
.help-modal-header h3 {
  margin: 0;
  color: #fff9e8;
  font-family: Georgia, serif;
  font-size: clamp(24px, 3vw, 34px);
}
.help-modal-header p:last-child {
  margin: 7px 0 0;
  color: rgba(247,245,237,.68);
  font-size: 12px;
}
.help-modal-content {
  overflow-y: auto;
  padding: 18px 24px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(214,180,95,.36) rgba(255,255,255,.025);
}
.help-section {
  position: relative;
  padding: 15px 17px 15px 19px;
  border-left: 2px solid rgba(214,180,95,.25);
  background: linear-gradient(90deg, rgba(247,245,237,.035), transparent 78%);
}
.help-section + .help-section { margin-top: 10px; }
.help-section h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  color: var(--gold-soft);
  font-family: Georgia, serif;
  font-size: 16px;
}
.help-section h4 > span {
  width: 20px;
  color: #f3b8cb;
  text-align: center;
  text-shadow: 0 0 11px rgba(243,184,203,.24);
}
.help-section p {
  margin: 0;
  color: #f7f5ed;
  font-size: 13px;
  line-height: 1.62;
}
.help-section strong { color: #f0d990; }
.help-section em {
  color: #f3b8cb;
  font-style: normal;
  font-weight: 850;
}
.help-section .help-vip {
  color: #d6b5ff;
  text-shadow: 0 0 10px rgba(198,151,255,.2);
}
.help-section .help-warning {
  color: #ffaaa7;
  text-shadow: 0 0 10px rgba(255,170,167,.16);
}
/* Highlighted Help topics share the other sections' typography and spacing. Only the accent and surface change. */
.help-modal-content > .help-priority {
  overflow: hidden;
  padding: 15px 17px 15px 19px;
  border-left: 2px solid rgba(214,180,95,.25);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(247,245,237,.035), transparent 78%);
}
.help-modal-content > .help-priority::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(214,180,95,.12);
  border-radius: inherit;
  pointer-events: none;
}
.help-modal-content > .help-priority h4 {
  margin: 0 0 7px;
  font-size: 16px;
  line-height: normal;
}
.help-modal-content > .help-priority h4 > span {
  width: 20px;
  flex: 0 0 20px;
  font-size: inherit;
  line-height: inherit;
}
.help-modal-content > .help-priority p {
  color: #f7f5ed;
  font-size: 13px;
  line-height: 1.62;
}
.help-modal-content > .help-priority p + p { margin-top: 8px; }
.help-modal-content > .help-ai-usage {
  border-left-color: #d3a4d7;
  background:
    linear-gradient(90deg, rgba(163,113,175,.075), rgba(247,245,237,.016) 75%);
}
.help-modal-content > .help-ai-usage::before { border-color: rgba(211,164,215,.20); }
.help-modal-content > .help-ai-usage h4 { color: #f2d5f3; }
.help-modal-content > .help-ai-usage .help-ai-emphasis { color: #f2bfec; }
.help-modal-content > .help-real-casino {
  border-left-color: #e6bd81;
  background:
    linear-gradient(90deg, rgba(198,146,84,.078), rgba(247,245,237,.016) 75%);
}
.help-modal-content > .help-real-casino::before { border-color: rgba(230,189,129,.20); }
.help-modal-content > .help-real-casino h4 { color: #ffe3b1; }
.help-modal-content > .help-real-casino .help-casino-emphasis { color: #ffceb1; }
.help-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px 16px;
  border-top: 1px solid rgba(214,180,95,.11);
  color: rgba(247,245,237,.65);
  background: rgba(8,18,11,.34);
  font-size: 12px;
  text-align: center;
}
.help-modal-footer span { color: var(--gold-soft); }
.help-modal-footer p { margin: 0; }
@keyframes helpModalEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.975);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 1180px) {
  .nav-help-button { padding-inline: 12px; }
  .deposit-limit-inline,
  .deposit-limit-inline > strong { font-size: 8px !important; }
}
@media (max-width: 980px) {
  .nav-cluster {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .nav-tabs {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}
@media (max-width: 760px) {
  .deposit-limit-inline { display: none !important; }
  .nav-cluster { gap: 5px; }
  .nav-help-button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .help-modal-header { padding: 21px 51px 17px; }
  .help-modal-header > .close {
    top: 14px;
    right: 15px;
  }
  .help-modal-header h3 { font-size: clamp(21px, 5.8vw, 29px); }
  .help-modal-content { padding: 14px 16px 18px; }
  .help-section { padding: 13px 12px 13px 14px; }
  .help-modal-content > .help-priority { padding: 13px 12px 13px 14px; }
}

.player-finance-stack {
  min-height: 20px !important;
  gap: 0 !important;
}
.player-finance-stack .player-balance-shell { min-height: 12px !important; }
.deposit-limit-inline { line-height: .95 !important; }

.player-finance-stack {
  overflow: visible;
}
.deposit-limit-inline {
  position: relative;
  top: 5px;
  line-height: 1 !important;
}
.deposit-limit-inline > span,
.deposit-limit-inline > strong {
  font-weight: 400 !important;
}

.reward-remaining-badge {
  right: -7px !important;
  bottom: -4px !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff4ca !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Georgia, serif;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em;
  text-shadow:
    0 2px 3px rgba(0,0,0,.96),
    0 0 7px rgba(0,0,0,.88),
    0 0 10px rgba(214,180,95,.28);
}

.help-inventory h4 > span { color: #9fd8b1; }
.help-hours {
  border-left-color: rgba(255,170,167,.46);
  background: linear-gradient(90deg, rgba(255,170,167,.055), transparent 78%);
}
.help-hours h4 { color: #ffcbc8; }
.help-hours h4 > span { color: #ffaaa7; }

@media (max-width: 1180px) {
  .deposit-limit-inline { top: 2px; }
}

.nav-tabs::before {
  width: calc(33.333% - 7px) !important;
}
.nav-tabs.nav-open::before {
  transform: translateX(calc(200% + 8px)) !important;
}
.nav-tabs .nav-tab {
  min-width: 126px;
}
.nav-tabs .nav-venue-button {
  z-index: 2;
  min-width: 104px;
  min-height: 38px;
  margin: 0;
  padding: 7px 13px;
  border-color: rgba(214,180,95,.18);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 0, rgba(214,180,95,.1), transparent 64%),
    linear-gradient(145deg, rgba(43,59,42,.58), rgba(25,36,27,.64));
}
.nav-tabs .nav-venue-button:hover:not(:disabled) {
  transform: translateY(-1px);
}
.nav-tabs .nav-venue-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
}

.inventory-link-button:disabled {
  opacity: .38 !important;
  filter: grayscale(.65) saturate(.45);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.vip-coffer-seal {
  overflow: hidden;
  animation: vipSealBreath 2.7s ease-in-out infinite;
}
.vip-coffer-seal::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -35%;
  width: 18px;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  animation: vipSealSweep 3.8s ease-in-out infinite;
}
@keyframes vipSealBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,0,0,.3), 0 0 0 rgba(214,180,95,0);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
    box-shadow: 0 8px 19px rgba(0,0,0,.34), 0 0 16px rgba(214,180,95,.24);
  }
}
@keyframes vipSealSweep {
  0%, 35% {
    left: -35%;
    opacity: 0;
  }
  45% { opacity: .8; }
  68% {
    left: 120%;
    opacity: .25;
  }
  76%, 100% {
    left: 120%;
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .nav-tabs .nav-tab { min-width: 112px; }
  .nav-tabs .nav-venue-button {
    min-width: 88px;
    padding-inline: 9px;
  }
}
@media (max-width: 760px) {
  .nav-tabs .nav-tab { min-width: 96px; }
  .nav-tabs .nav-venue-button {
    min-width: 76px;
    font-size: 12px;
  }
}

.nav-tabs::before {
  width: calc(50% - 6px) !important;
}
.nav-tabs.nav-open::before {
  transform: translateX(calc(100% + 4px)) !important;
}
.nav-tabs .nav-tab {
  min-width: 126px;
}
.nav-cluster > .nav-venue-button {
  flex: 0 0 auto;
}
.nav-cluster > .nav-venue-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
  transform: none;
}
@media (max-width: 1180px) {
  .nav-tabs .nav-tab { min-width: 112px; }
}
@media (max-width: 760px) {
  .nav-cluster { gap: 6px; }
  .nav-tabs .nav-tab { min-width: 96px; }
  .nav-cluster > .nav-venue-button,
  .nav-cluster > .nav-help-button {
    padding-inline: 10px;
    font-size: 12px;
  }
}

.topbar::after {
  content: none !important;
  display: none !important;
}

.sound-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 3px 0 2px;
  border: 1px solid rgba(214, 180, 95, .28);
  border-radius: 50%;
  color: var(--gold-soft);
  background:
    radial-gradient(circle at 50% 30%, rgba(214,180,95,.16), transparent 56%),
    linear-gradient(145deg, rgba(44,61,43,.78), rgba(20,31,22,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 7px 16px rgba(0,0,0,.2),
    0 0 16px rgba(214,180,95,.07);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.sound-toggle::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(247,245,237,.045);
  pointer-events: none;
}
.sound-toggle:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(214,180,95,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 9px 20px rgba(0,0,0,.24),
    0 0 20px rgba(214,180,95,.13);
}
.sound-toggle > span {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 17px;
  line-height: 14px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(214,180,95,.3);
}
.sound-toggle > small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 2px;
  font-size: 7px;
  line-height: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}
.sound-toggle.is-off {
  color: rgba(247,245,237,.42);
  border-color: rgba(247,245,237,.12);
  opacity: .76;
  filter: saturate(.55);
}
.sound-toggle.is-on > span {
  animation: sfxNotePulse 2.4s ease-in-out infinite;
}
@keyframes sfxNotePulse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-1px) rotate(-5deg); }
  55% { transform: translateY(-1px) rotate(5deg); }
}

@media (max-width: 760px) {
  .sound-toggle {
    width: 34px;
    height: 34px;
  }
  .sound-toggle > span {
    font-size: 14px;
    line-height: 12px;
  }
  .sound-toggle > small { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .sound-toggle.is-on > span { animation: none; }
}

.audio-controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.music-toggle {
  color: #f3b8cb;
  border-color: rgba(243, 184, 203, .3);
  background:
    radial-gradient(circle at 50% 30%, rgba(243,184,203,.14), transparent 56%),
    linear-gradient(145deg, rgba(44,61,43,.78), rgba(20,31,22,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 7px 16px rgba(0,0,0,.2),
    0 0 16px rgba(243,184,203,.07);
}
.music-toggle:hover {
  border-color: rgba(243,184,203,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 9px 20px rgba(0,0,0,.24),
    0 0 20px rgba(243,184,203,.14);
}
.music-toggle.is-on > span {
  animation: bgmNotePulse 2.2s ease-in-out infinite;
}
@keyframes bgmNotePulse {
  0%, 100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-1px) scale(1.06); }
  58% { transform: translateY(0) scale(.98); }
}
@media (max-width: 760px) {
  .audio-controls { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-on > span { animation: none; }
}

.audio-controls {
  width: 132px;
  height: 38px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 2px !important;
  flex: 0 0 132px;
  padding: 1px 5px;
  border: 1px solid rgba(214,180,95,.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(214,180,95,.035), transparent 38%, rgba(243,184,203,.025)),
    rgba(14,23,16,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.audio-slider-row {
  display: grid;
  grid-template-columns: 18px 25px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-height: 15px;
  color: var(--gold-soft);
}
.audio-slider-row.music-row { color: #f3b8cb; }
.audio-slider-row.is-muted {
  opacity: .55;
  filter: saturate(.55);
}
.audio-icon-button.sound-toggle,
.audio-icon-button.sound-toggle:hover {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 8px currentColor;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  background: rgba(17,28,19,.82);
}
.audio-icon-button.sound-toggle::before { inset: 2px; }
.audio-icon-button.sound-toggle > span {
  font-size: 9px !important;
  line-height: 1 !important;
  text-shadow: 0 0 7px currentColor;
  animation: none !important;
}
.audio-slider-label {
  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  color: currentColor;
  opacity: .92;
}
.audio-volume-slider {
  --audio-level: 50%;
  width: 100%;
  height: 12px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.audio-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, currentColor 0 var(--audio-level), rgba(247,245,237,.13) var(--audio-level) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 7px color-mix(in srgb, currentColor 25%, transparent);
}
.audio-volume-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -2.5px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0,0,0,.5);
}
.audio-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 10px;
  background: rgba(247,245,237,.13);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
.audio-volume-slider::-moz-range-progress {
  height: 4px;
  border-radius: 10px;
  background: currentColor;
  box-shadow: 0 0 7px color-mix(in srgb, currentColor 25%, transparent);
}
.audio-volume-slider::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0,0,0,.5);
}
.audio-volume-slider:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 10px;
}

.player-chip { gap: 14px !important; }
.player-meta {
  margin-left: 2px;
  line-height: 1.08;
}
.player-name { margin-bottom: 4px; }
.player-finance-stack {
  gap: 2px !important;
  overflow: visible;
}
.deposit-limit-inline { top: 4px !important; }

@media (max-width: 1180px) {
  .audio-controls {
    width: 112px;
    flex-basis: 112px;
  }
  .audio-slider-row {
    grid-template-columns: 17px 22px minmax(0, 1fr);
    gap: 2px;
  }
}
@media (max-width: 760px) {
  .audio-controls {
    width: 84px;
    flex-basis: 84px;
    padding-inline: 3px;
  }
  .audio-slider-row { grid-template-columns: 16px minmax(0, 1fr); }
  .audio-slider-label { display: none; }
  .audio-icon-button.sound-toggle {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

.audio-controls {
  width: 156px !important;
  flex-basis: 156px !important;
  height: 38px !important;
  padding: 1px 7px !important;
  gap: 3px !important;
}
.audio-slider-row {
  grid-template-columns: 20px 29px minmax(0, 1fr) !important;
  gap: 4px !important;
  min-height: 16px !important;
}
.audio-icon-button.sound-toggle,
.audio-icon-button.sound-toggle:hover {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
}
.audio-icon-button.sound-toggle > span {
  font-size: 10px !important;
}
.audio-slider-label {
  font-size: 8px !important;
  letter-spacing: .09em !important;
}
.audio-volume-slider {
  height: 14px !important;
}
.audio-volume-slider::-webkit-slider-runnable-track {
  height: 5px !important;
}
.audio-volume-slider::-webkit-slider-thumb {
  width: 11px !important;
  height: 11px !important;
  margin-top: -3px !important;
}
.audio-volume-slider::-moz-range-track,
.audio-volume-slider::-moz-range-progress {
  height: 5px !important;
}
.audio-volume-slider::-moz-range-thumb {
  width: 11px !important;
  height: 11px !important;
}
@media (max-width: 1180px) {
  .audio-controls {
    width: 136px !important;
    flex-basis: 136px !important;
  }
  .audio-slider-row {
    grid-template-columns: 19px 25px minmax(0, 1fr) !important;
    gap: 3px !important;
  }
}
@media (max-width: 760px) {
  .audio-controls {
    width: 96px !important;
    flex-basis: 96px !important;
    padding-inline: 4px !important;
  }
  .audio-slider-row { grid-template-columns: 18px minmax(0, 1fr) !important; }
  .audio-slider-label { display: none !important; }
}

.reel-scene {
  z-index: 3;
}

.grand-win-celebration {
  --celebration-accent: #d6b45f;
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.grand-win-flash {
  position: absolute;
  inset: -15%;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--celebration-accent) 34%, white) 0 5%, color-mix(in srgb, var(--celebration-accent) 22%, transparent) 18%, transparent 56%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.32), transparent 42%);
}
.grand-win-flash.flash-one {
  animation: grandWinFlashOne 2.8s ease-out forwards;
}
.grand-win-flash.flash-two {
  animation: grandWinFlashTwo 2.8s .34s ease-out forwards;
}

@keyframes grandWinFlashOne {
  0% {
    opacity: 0;
    transform: scale(.72);
    filter: blur(14px);
  }
  8% { opacity: .82; }
  20% {
    opacity: .14;
    transform: scale(1.02);
    filter: blur(2px);
  }
  35% { opacity: .42; }
  58%, 100% {
    opacity: 0;
    transform: scale(1.22);
  }
}
@keyframes grandWinFlashTwo {
  0% {
    opacity: 0;
    transform: scale(.9);
  }
  12% { opacity: .48; }
  28% { opacity: .08; }
  44% { opacity: .28; }
  70%, 100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

.grand-win-sweeps {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: screen;
}
.grand-win-sweeps i {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 18vh;
  background: linear-gradient(90deg, transparent 0 22%, color-mix(in srgb, var(--celebration-accent) 35%, white) 48%, transparent 76%);
  filter: blur(16px);
  opacity: 0;
  transform: rotate(-8deg) translateX(-45%);
  animation: grandSweep 1.65s ease-in-out forwards;
}
.grand-win-sweeps i:nth-child(1) { top: 14%; }
.grand-win-sweeps i:nth-child(2) {
  top: 43%;
  animation-delay: .18s;
  transform: rotate(7deg) translateX(-45%);
}
.grand-win-sweeps i:nth-child(3) {
  top: 69%;
  animation-delay: .36s;
}
@keyframes grandSweep {
  0% {
    opacity: 0;
    translate: -22vw 0;
  }
  18% { opacity: .38; }
  55% { opacity: .13; }
  100% {
    opacity: 0;
    translate: 78vw 0;
  }
}

.grand-win-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.grand-win-sparkles span {
  position: absolute;
  left: var(--celebration-x);
  top: var(--celebration-y);
  color: color-mix(in srgb, var(--celebration-accent) 68%, white);
  font-size: var(--celebration-size);
  line-height: 1;
  opacity: 0;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--celebration-accent) 70%, transparent),
    0 0 24px rgba(255,255,255,.28);
  animation: grandSparkleBurst 2.45s var(--celebration-delay) cubic-bezier(.16,.84,.28,1) forwards;
}
@keyframes grandSparkleBurst {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.2) rotate(0deg);
    filter: blur(5px);
  }
  12% {
    opacity: 1;
    filter: blur(0);
  }
  38% {
    opacity: .96;
    transform: translateY(calc(var(--celebration-drift) * -1)) scale(1.15) rotate(70deg);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--celebration-drift) * -2.2)) scale(.55) rotate(175deg);
    filter: blur(2px);
  }
}

.grand-win-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 28%, color-mix(in srgb, var(--celebration-accent) 10%, transparent) 62%, transparent 88%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22% 78%, rgba(255,255,255,.035));
  opacity: 0;
  animation: grandVignettePulse 2.8s ease-out forwards;
}
@keyframes grandVignettePulse {
  0% { opacity: 0; }
  10% { opacity: .95; }
  34% { opacity: .24; }
  56% { opacity: .56; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grand-win-sweeps i,
  .grand-win-sparkles span,
  .grand-win-flash,
  .grand-win-vignette {
    animation-duration: 1.2s !important;
  }
}

.grand-win-flash.flash-one {
  animation-duration: 4.4s !important;
  animation-iteration-count: infinite !important;
}
.grand-win-flash.flash-two {
  animation-duration: 4.4s !important;
  animation-delay: .55s !important;
  animation-iteration-count: infinite !important;
}
.grand-win-sweeps i {
  animation-duration: 3.45s !important;
  animation-iteration-count: infinite !important;
}
.grand-win-sweeps i:nth-child(2) { animation-delay: .45s !important; }
.grand-win-sweeps i:nth-child(3) { animation-delay: .9s !important; }
.grand-win-sparkles span {
  animation-duration: 3.7s !important;
  animation-iteration-count: infinite !important;
}
.grand-win-vignette {
  animation-duration: 4.5s !important;
  animation-iteration-count: infinite !important;
}

.open-stage { position: relative; }
.skip-to-roulette-option {
  position: absolute !important;
  left: 50%;
  top: 321px;
  z-index: 5 !important;
  min-height: 38px;
  padding-block: 7px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.skip-to-roulette-option:hover {
  transform: translate(-50%, calc(-50% - 1px));
}
@media (max-width: 900px) {
  .skip-to-roulette-option { top: 304px; }
}
@media (max-width: 680px) {
  .skip-to-roulette-option {
    top: 292px;
    min-height: 36px;
    padding: 6px 12px 6px 9px;
    font-size: 12px;
  }
}

.nav-cluster > .nav-help-button,
.nav-cluster > .nav-venue-button {
  font-weight: 500 !important;
}

.audio-icon-button.sound-toggle,
.audio-icon-button.sound-toggle:hover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.audio-icon-button.sound-toggle > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  line-height: 1 !important;
  transform: translateY(-.4px);
}

.collection-card { position: relative; }
.collection-profile-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  border: 1px solid rgba(214,180,95,.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34,49,35,.94), rgba(20,31,23,.92));
  color: #f0d990;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.05);
}

.login-screen {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.login-screen > .login-card,
.login-screen > .login-audio-controls {
  position: relative;
  z-index: 3;
}
.login-audio-controls.audio-controls {
  width: min(330px, 86vw) !important;
  flex-basis: auto !important;
  height: 46px !important;
  padding: 4px 12px !important;
  border-color: rgba(214,180,95,.24);
  background: rgba(18,29,20,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 38px rgba(3,9,4,.3), inset 0 1px rgba(255,255,255,.04);
}
.login-audio-controls .audio-slider-row {
  grid-template-columns: 22px 34px minmax(0, 1fr) !important;
}

.catalog-tools {
  padding-bottom: 9px !important;
}
.filter-chips {
  --filter-indicator-left: 0px;
  --filter-indicator-width: 0px;
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 5px !important;
  margin-top: 10px !important;
  padding: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  isolation: isolate;
}
.filter-chips::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: var(--filter-indicator-left);
  width: var(--filter-indicator-width);
  border: 1px solid rgba(255,239,185,.68);
  border-radius: 5px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 7px 18px rgba(232,196,103,.17), inset 0 1px rgba(255,255,255,.28);
  transition: left .34s cubic-bezier(.22,.9,.25,1), width .34s cubic-bezier(.22,.9,.25,1);
  pointer-events: none;
}
.filter-chip {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border-radius: 5px !important;
  padding: 7px 11px !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .22s ease, border-color .22s ease;
}
.filter-chip:hover {
  border-color: rgba(232,196,103,.28) !important;
}
.filter-chip.active {
  color: #19160d !important;
  border-color: transparent !important;
}
.catalog-count {
  margin-top: 6px !important;
}

.hero-title-stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  isolation: isolate;
}
.hero-title-light-slit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(112%, 980px);
  height: 3px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(.015);
  transform-origin: center;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,196,103,.04) 14%,
    rgba(255,224,145,.34) 40%,
    rgba(255,250,221,.92) 50%,
    rgba(255,224,145,.34) 60%,
    rgba(232,196,103,.04) 86%,
    transparent 100%
  );
  box-shadow:
    0 0 7px rgba(255,244,203,.62),
    0 0 20px rgba(232,196,103,.32),
    0 0 42px rgba(232,196,103,.16);
  filter: blur(.15px);
  will-change: opacity, transform, filter;
}
.hero-title-light-slit::before {
  content: "";
  position: absolute;
  inset: 50% 9% auto;
  height: clamp(34px, 5vw, 78px);
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(255,232,164,.17), rgba(232,196,103,.055) 38%, transparent 72%);
  filter: blur(10px);
}
.hero-title-stage-out .hero-title-light-slit {
  animation: heroLightSlitOpen .48s cubic-bezier(.22,.78,.3,1) forwards;
}
.hero-title-stage-in .hero-title-light-slit {
  animation: heroLightSlitClose .65s cubic-bezier(.42,0,.24,1) forwards;
}
@keyframes heroLightSlitOpen {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(.015) scaleY(.55);
    filter: blur(1.3px);
  }
  36% {
    opacity: .56;
    transform: translate(-50%, -50%) scaleX(.48) scaleY(1);
    filter: blur(.25px);
  }
  100% {
    opacity: .72;
    transform: translate(-50%, -50%) scaleX(1) scaleY(1.12);
    filter: blur(0);
  }
}
@keyframes heroLightSlitClose {
  0% {
    opacity: .72;
    transform: translate(-50%, -50%) scaleX(1) scaleY(1.12);
    filter: blur(0);
  }
  58% {
    opacity: .34;
    transform: translate(-50%, -50%) scaleX(.34) scaleY(.88);
    filter: blur(.5px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(.015) scaleY(.5);
    filter: blur(1.8px);
  }
}
.hero-rotating-title {
  position: relative;
  z-index: 1;
  min-height: 1.08em;
  transform-origin: 50% 50%;
  will-change: opacity, filter, transform, letter-spacing;
}
.hero-rotating-title > span {
  display: inline;
  transition: text-shadow .25s ease;
}
.hero-phrase-out {
  animation: heroPhraseDisintegrateOut .48s cubic-bezier(.55,.04,.84,.34) forwards;
}
.hero-phrase-in {
  animation: heroPhraseMaterializeIn .65s cubic-bezier(.16,.84,.3,1) forwards;
}
@keyframes heroPhraseDisintegrateOut {
  0% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0) scale(1);
    letter-spacing: normal;
  }
  45% {
    opacity: .56;
    filter: blur(3px) saturate(.72);
    transform: translateY(-2px) scale(1.012);
  }
  100% {
    opacity: 0;
    filter: blur(13px) saturate(.15);
    transform: translateY(-9px) scale(1.045);
    letter-spacing: .065em;
  }
}
@keyframes heroPhraseMaterializeIn {
  0% {
    opacity: 0;
    filter: blur(13px) saturate(.2);
    transform: translateY(9px) scale(.965);
    letter-spacing: .06em;
  }
  62% {
    opacity: .9;
    filter: blur(1.5px) saturate(.9);
    transform: translateY(-1px) scale(1.006);
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0) scale(1);
    letter-spacing: normal;
  }
}

.collection-profile-badge {
  top: 9px !important;
  left: 9px !important;
  right: auto !important;
  max-width: calc(100% - 18px);
  border-color: rgba(214,180,95,.3) !important;
  background: rgba(24,38,27,.64) !important;
  color: rgba(240,217,144,.76) !important;
  opacity: .82;
  box-shadow: 0 5px 15px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(8px);
}
.collection-claimed-badge {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 7;
  padding: 4px 9px;
  border: 1px solid rgba(157,255,183,.85);
  border-radius: 6px;
  background: rgba(72,255,125,.9);
  color: #092512;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(79,255,132,.5), 0 0 24px rgba(79,255,132,.25), inset 0 1px rgba(255,255,255,.48);
}
.collection-card.is-claimed {
  border-color: rgba(132,193,147,.16) !important;
  background: rgba(20,29,22,.5) !important;
  box-shadow: inset 0 0 30px rgba(7,13,8,.2);
}
.collection-card.is-claimed:hover {
  transform: none;
}
.collection-card.is-claimed > img,
.collection-card.is-claimed > div,
.collection-card.is-claimed > .collection-count,
.collection-card.is-claimed > .collection-profile-badge {
  opacity: .42;
  filter: grayscale(.82) saturate(.34) brightness(.7);
}
.collection-card.is-claimed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: rgba(7,13,8,.16);
  pointer-events: none;
}
.collection-card.is-claimed .collection-claimed-badge {
  filter: none;
  opacity: 1;
}

.modal-whisper.is-ready { color: #a7f2ba; }
.modal-whisper.is-warning { color: #ffaaa7; }

@media (max-width: 680px) {
  .login-audio-controls.audio-controls {
    width: min(300px, 88vw) !important;
  }
  .login-audio-controls .audio-slider-row {
    grid-template-columns: 19px 28px minmax(0, 1fr) !important;
  }
  .filter-chips { padding-bottom: 5px; }
  .hero-rotating-title { min-height: 2.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phrase-out,
  .hero-phrase-in,
  .hero-title-stage-out .hero-title-light-slit,
  .hero-title-stage-in .hero-title-light-slit {
    animation-duration: .15s !important;
  }
  .filter-chips::before {
    transition-duration: .01ms;
  }
}

input[type="checkbox"] {
  border-radius: 3px !important;
}

select,
button,
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea {
  border-radius: 6px !important;
}

.app-shell.entry-transition-entering,
.app-shell.entry-transition-dissolving {
  height: 100vh;
  overflow: hidden;
}

.entry-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 180, 95, .15), transparent 31%),
    radial-gradient(circle at 50% 66%, rgba(45, 82, 57, .36), transparent 44%),
    linear-gradient(145deg, rgba(5, 10, 7, .985), rgba(16, 27, 18, .972) 48%, rgba(5, 9, 7, .988));
  -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  isolation: isolate;
  animation: entryOverlayArrive .36s ease-out both;
  cursor: progress;
}

.entry-transition-overlay::before,
.entry-transition-overlay::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.entry-transition-overlay::before {
  inset: -30%;
  z-index: -2;
  background: conic-gradient(
    from 25deg,
    transparent 0 13%,
    rgba(214, 180, 95, .035) 14% 16%,
    transparent 17% 37%,
    rgba(92, 137, 99, .045) 38% 40%,
    transparent 41% 65%,
    rgba(214, 180, 95, .03) 66% 68%,
    transparent 69% 100%
  );
  animation: entryBackdropTurn 18s linear infinite;
}

.entry-transition-overlay::after {
  inset: 0;
  z-index: 8;
  opacity: 0;
  background:
    linear-gradient(112deg, transparent 0 44%, rgba(255, 244, 201, .13) 49%, transparent 55%),
    radial-gradient(circle at center, rgba(240, 217, 144, .09), transparent 46%);
  mix-blend-mode: screen;
}

.entry-transition-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.entry-transition-atmosphere span {
  position: absolute;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  animation: entryAtmosphereDrift 5.8s ease-in-out infinite alternate;
}

.entry-transition-atmosphere span:nth-child(1) {
  left: -19%;
  top: -35%;
  background: #72906d;
}

.entry-transition-atmosphere span:nth-child(2) {
  right: -20%;
  top: 4%;
  background: #d6b45f;
  animation-delay: -1.7s;
}

.entry-transition-atmosphere span:nth-child(3) {
  left: 25%;
  bottom: -47%;
  background: #355b41;
  animation-delay: -3.1s;
}

.entry-transition-lattice {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(240, 217, 144, .2) 0 1px, transparent 1.7px),
    linear-gradient(45deg, transparent 48.9%, rgba(214, 180, 95, .055) 49.35% 50.65%, transparent 51.1%),
    linear-gradient(-45deg, transparent 48.9%, rgba(247, 245, 237, .034) 49.35% 50.65%, transparent 51.1%);
  background-size: 92px 92px;
  background-position: 46px 46px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.85) 52%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.85) 52%, transparent 88%);
  animation: entryLatticeBreath 2.8s ease-in-out infinite;
}

.entry-transition-stage {
  position: relative;
  width: min(920px, 96vw);
  height: min(820px, 89vh);
  display: grid;
  place-items: center;
  text-align: center;
  animation: entryStageArrive .72s cubic-bezier(.18,.82,.24,1) both;
}

.entry-transition-seal {
  position: absolute;
  left: 50%;
  top: 45%;
  width: clamp(315px, 50vw, 610px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: .82;
  filter: drop-shadow(0 0 38px rgba(214,180,95,.16));
}

.entry-transition-seal i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(214, 180, 95, .25);
  box-shadow: inset 0 0 28px rgba(214,180,95,.035), 0 0 28px rgba(214,180,95,.025);
  animation: entrySealTurn 9s linear infinite;
}

.entry-transition-seal i::before,
.entry-transition-seal i::after {
  content: "✦";
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  color: rgba(240, 217, 144, .68);
  font-size: 16px;
  text-shadow: 0 0 14px rgba(214,180,95,.42);
}

.entry-transition-seal i::before { top: 0; }
.entry-transition-seal i::after { top: 100%; }
.entry-transition-seal i:nth-child(2) {
  inset: 10%;
  border-style: dashed;
  border-color: rgba(132, 174, 137, .3);
  animation-direction: reverse;
  animation-duration: 6.4s;
}
.entry-transition-seal i:nth-child(3) {
  inset: 22%;
  border-color: rgba(240, 217, 144, .36);
  animation-duration: 4.8s;
}

.entry-transition-character {
  position: absolute;
  left: 50%;
  bottom: clamp(94px, 13vh, 132px);
  width: clamp(230px, 29vw, 390px);
  height: min(72vh, 690px);
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transform-origin: 50% 85%;
  animation: entryCharacterArrive 3.05s cubic-bezier(.16,.78,.2,1) both;
}

.entry-transition-character-glow {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.24), rgba(62,105,71,.13) 38%, transparent 70%);
  filter: blur(28px);
  animation: entryCharacterGlow 1.8s ease-in-out infinite alternate;
}

.entry-transition-character img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 28px 26px rgba(0,0,0,.54))
    drop-shadow(0 0 25px rgba(214,180,95,.13));
}

.entry-transition-copy {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(8px, 2.2vh, 24px);
  width: min(680px, 90vw);
  translate: -50% 0;
  text-shadow: 0 5px 22px rgba(0,0,0,.78);
  animation: entryCopyArrive .7s .52s cubic-bezier(.2,.8,.2,1) both;
}

.entry-transition-eyebrow {
  margin: 0 0 7px;
  color: rgba(240,217,144,.82);
  font-size: clamp(9px, 1.2vw, 11px);
  font-weight: 800;
  letter-spacing: .24em;
}

.entry-transition-eyebrow span {
  display: inline-block;
  color: var(--gold-soft);
  animation: entryGlyphPulse 1.3s ease-in-out infinite;
}

.entry-transition-copy h2 {
  margin: 0;
  color: #fff9e4;
  font-family: Georgia, serif;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.02;
  text-shadow: 0 0 30px rgba(214,180,95,.18), 0 6px 30px rgba(0,0,0,.7);
}

.entry-transition-loading {
  margin: 12px 0 10px;
  color: rgba(224, 231, 220, .74);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.entry-transition-loading > span {
  display: inline-flex;
  width: 20px;
  margin-left: 2px;
}

.entry-transition-loading i {
  font-style: normal;
  opacity: .2;
  animation: entryLoadingDot 1.15s ease-in-out infinite;
}
.entry-transition-loading i:nth-child(2) { animation-delay: .16s; }
.entry-transition-loading i:nth-child(3) { animation-delay: .32s; }

.entry-transition-progress {
  position: relative;
  width: min(330px, 70vw);
  height: 2px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 12px rgba(214,180,95,.06);
}

.entry-transition-progress::before,
.entry-transition-progress::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  translate: 0 -50%;
  rotate: 45deg;
  border: 1px solid rgba(240,217,144,.58);
}
.entry-transition-progress::before { left: -1px; }
.entry-transition-progress::after { right: -1px; }

.entry-transition-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(98,142,104,.75), var(--gold-soft), rgba(255,249,220,.94));
  box-shadow: 0 0 14px rgba(214,180,95,.52);
  transform: scaleX(var(--entry-load-progress, 0));
  transition: transform .22s cubic-bezier(.18,.7,.2,1), opacity .18s ease;
}

.entry-transition-dust {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

.entry-transition-dust span {
  position: absolute;
  left: var(--entry-particle-x);
  top: var(--entry-particle-y);
  width: var(--entry-particle-size);
  height: var(--entry-particle-size);
  border-radius: 50%;
  opacity: 0;
  background: var(--gold-soft);
  box-shadow: 0 0 10px rgba(214,180,95,.75);
  animation: entryDustDrift 2.7s calc(var(--entry-particle-delay) + 120ms) ease-out infinite;
}

.entry-transition-overlay.is-dissolving {
  pointer-events: none;
  animation: entryOverlayDissolve 1.3s cubic-bezier(.42,0,.2,1) forwards;
}

.entry-transition-overlay.is-dissolving::after {
  animation: entryExitSweep 1.05s ease-out forwards;
}

.entry-transition-overlay.is-dissolving .entry-transition-stage {
  animation: entryStageDissolve 1.18s cubic-bezier(.42,0,.2,1) forwards;
}

.entry-transition-overlay.is-dissolving .entry-transition-character {
  animation: entryCharacterDissolve 1.14s cubic-bezier(.42,0,.2,1) forwards;
}

.entry-transition-overlay.is-dissolving .entry-transition-copy {
  animation: entryCopyDissolve .86s ease-in forwards;
}

.entry-transition-overlay.is-dissolving .entry-transition-seal {
  animation: entrySealDissolve 1.1s ease-out forwards;
}

.entry-transition-overlay.is-dissolving .entry-transition-dust span {
  animation: entryDustBurst 1.06s var(--entry-particle-delay) cubic-bezier(.15,.72,.18,1) forwards;
}

@keyframes entryOverlayArrive {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(.68);
    backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  }
}

@keyframes entryBackdropTurn { to { transform: rotate(360deg); } }
@keyframes entryAtmosphereDrift { to { transform: translate3d(7vw, 5vh, 0) scale(1.13); } }
@keyframes entryLatticeBreath { 50% { opacity: .48; transform: scale(1.018); } }
@keyframes entryStageArrive {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.975);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes entrySealTurn { to { transform: rotate(360deg); } }
@keyframes entryCharacterArrive {
  0% {
    opacity: 0;
    transform: translateY(54px) scale(.89);
    filter: blur(18px) brightness(.72);
  }
  18% { opacity: .28; }
  42% {
    opacity: 1;
    transform: translateY(-5px) scale(1.018);
    filter: blur(0) brightness(1.04);
  }
  68% { transform: translateY(1px) scale(1); }
  100% {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
    filter: blur(0) brightness(1);
  }
}
@keyframes entryCharacterGlow {
  from {
    opacity: .48;
    transform: scale(.9);
  }
  to {
    opacity: .92;
    transform: scale(1.14);
  }
}
@keyframes entryCopyArrive {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes entryGlyphPulse { 50% { opacity: .55; transform: scale(.82) rotate(45deg); } }
@keyframes entryLoadingDot {
  0%, 100% {
    opacity: .2;
    transform: translateY(0);
  }
  45% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes entryProgress {
  from {
    transform: scaleX(0);
    opacity: .55;
  }
  18% { opacity: 1; }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes entryDustDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.4);
  }
  20% { opacity: .72; }
  100% {
    opacity: 0;
    transform: translate3d(14px, -48px, 0) scale(1.4);
  }
}
@keyframes entryExitSweep {
  0% {
    opacity: 0;
    transform: translateX(-18%);
  }
  38% { opacity: .92; }
  100% {
    opacity: 0;
    transform: translateX(18%);
  }
}
@keyframes entryStageDissolve {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  45% {
    opacity: .78;
    filter: blur(3px) brightness(1.18);
  }
  100% {
    opacity: 0;
    filter: blur(18px) brightness(1.52);
    transform: translateY(-18px) scale(1.045);
  }
}
@keyframes entryCharacterDissolve {
  0% {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
    filter: blur(0) brightness(1);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  45% {
    opacity: .82;
    filter: blur(2px) brightness(1.28);
  }
  100% {
    opacity: 0;
    transform: translateY(-26px) scale(1.06);
    filter: blur(16px) brightness(1.8);
    -webkit-mask-position: 0 -70px;
    mask-position: 0 -70px;
  }
}
@keyframes entryCopyDissolve {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    letter-spacing: normal;
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
    filter: blur(11px);
    letter-spacing: .08em;
  }
}
@keyframes entrySealDissolve {
  from {
    opacity: .82;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(1.24) rotate(24deg);
    filter: blur(12px);
  }
}
@keyframes entryDustBurst {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.45);
  }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--entry-particle-drift-x), var(--entry-particle-drift-y), 0) scale(1.9) rotate(80deg);
    filter: blur(1px);
  }
}
@keyframes entryOverlayDissolve {
  0% {
    opacity: 1;
    background-color: rgba(5,10,7,.98);
    -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(.68);
    backdrop-filter: blur(18px) saturate(.82) brightness(.68);
  }
  48% { opacity: .78; }
  100% {
    opacity: 0;
    background-color: transparent;
    -webkit-backdrop-filter: blur(0) saturate(1) brightness(1);
    backdrop-filter: blur(0) saturate(1) brightness(1);
  }
}

@media (max-width: 680px) {
  .entry-transition-overlay { padding: 12px; }
  .entry-transition-stage { height: min(760px, 92vh); }
  .entry-transition-character {
    width: clamp(215px, 68vw, 330px);
    height: min(68vh, 590px);
    bottom: 112px;
  }
  .entry-transition-seal {
    top: 43%;
    width: min(118vw, 470px);
  }
  .entry-transition-copy { bottom: 18px; }
  .entry-transition-copy h2 { font-size: clamp(28px, 9.6vw, 43px); }
  .entry-transition-eyebrow { letter-spacing: .15em; }
}

@media (max-height: 720px) and (min-width: 681px) {
  .entry-transition-stage { height: 94vh; }
  .entry-transition-character {
    height: 72vh;
    bottom: 72px;
  }
  .entry-transition-copy { bottom: 2px; }
  .entry-transition-copy h2 { font-size: clamp(30px, 5.5vw, 46px); }
  .entry-transition-loading { margin: 7px 0; }
}

@media (prefers-reduced-motion: reduce) {

  .entry-transition-atmosphere span,
  .entry-transition-lattice,
  .entry-transition-seal i,
  .entry-transition-dust span,
  .entry-transition-loading i,
  .entry-transition-eyebrow span {
    animation-iteration-count: 1 !important;
  }
}

.entry-transition-host {
  position: fixed;
  inset: 0;
  z-index: 239;
  min-height: 100vh;
  overflow: hidden;
  background: #050907;
}

.limited-time-stamp {
  position: absolute;
  z-index: 16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px 5px;
  border: 1px solid rgba(255, 239, 170, .72);
  border-radius: 4px;
  color: #fff1aa;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(39, 21, 2, .8), 0 0 12px rgba(255, 214, 91, .6);
  background:
    linear-gradient(115deg, rgba(91, 49, 7, .94), rgba(181, 119, 27, .92) 48%, rgba(87, 45, 4, .95));
  box-shadow:
    0 7px 20px rgba(24, 12, 1, .44),
    inset 0 0 0 1px rgba(255, 245, 197, .14),
    0 0 18px rgba(231, 176, 58, .24);
  transform: rotate(2deg);
}
.limited-time-stamp::before,
.limited-time-stamp::after {
  content: "◆";
  margin: 0 5px;
  color: #fff7ce;
  font-size: 7px;
}
.limited-time-hall {
  top: 11px;
  right: 11px;
}
.limited-time-inventory {
  top: 17px;
  left: 10px;
  right: auto;
  z-index: 12;
  transform: rotate(-3deg) scale(.9);
  transform-origin: left top;
}

.limited-time-decor {
  position: absolute;
  inset: 4px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(255, 218, 113, .25);
  border-radius: 8px;
  opacity: .9;
}
.limited-time-decor::before,
.limited-time-decor::after,
.limited-time-decor i {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 224, 139, .32);
  border-radius: 50%;
}
.limited-time-decor::before {
  inset: 13% 19%;
  animation: limitedOrbit 9s linear infinite;
}
.limited-time-decor::after {
  inset: 22% 11%;
  animation: limitedOrbitReverse 12s linear infinite;
}
.limited-time-decor i:first-child {
  width: 22px;
  height: 22px;
  top: 8px;
  left: 8px;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.limited-time-decor i:nth-child(2) {
  width: 22px;
  height: 22px;
  right: 8px;
  bottom: 8px;
  border-left-color: transparent;
  border-top-color: transparent;
}
.limited-time-decor b {
  position: absolute;
  color: rgba(255, 238, 174, .82);
  font-size: 12px;
  text-shadow: 0 0 12px rgba(255, 208, 83, .8);
  animation: limitedTwinkle 2.4s ease-in-out infinite;
}
.limited-time-decor b:nth-of-type(1) {
  left: 12%;
  bottom: 19%;
}
.limited-time-decor b:nth-of-type(2) {
  right: 16%;
  top: 32%;
  animation-delay: -1.1s;
}

.box-card.is-limited-time {
  border-color: rgba(241, 194, 84, .48) !important;
  background:
    linear-gradient(145deg, rgba(71, 47, 15, .18), rgba(20, 31, 23, .82) 43%, rgba(81, 49, 12, .16)) !important;
  box-shadow:
    0 18px 45px rgba(3, 8, 4, .44),
    inset 0 0 0 1px rgba(255, 226, 139, .08),
    0 0 28px rgba(214, 157, 48, .13) !important;
}
.box-card.is-limited-time::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 226, 133, .35), transparent) top/55% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 226, 133, .22), transparent) right/1px 62% no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 226, 133, .22), transparent) bottom/55% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 226, 133, .22), transparent) left/1px 62% no-repeat;
  animation: limitedCardShimmer 4.8s ease-in-out infinite;
}
.box-card.is-limited-time .box-glow {
  opacity: 1 !important;
  filter: blur(16px) saturate(1.35);
  animation: limitedGlowBreathe 3.6s ease-in-out infinite;
}
.box-card.is-limited-time .box-visual img {
  filter:
    drop-shadow(0 18px 17px rgba(3, 8, 4, .54))
    drop-shadow(0 0 17px color-mix(in srgb, var(--box-glow) 56%, transparent));
  animation: limitedCofferFloat 4.4s ease-in-out infinite;
}

.carousel-quantity-badge {
  top: 20px !important;
  right: 14px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--gold-soft) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: .025em !important;
  line-height: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 2px 4px rgba(3,8,4,.88), 0 0 13px rgba(214,180,95,.45) !important;
  animation: none !important;
}

.carousel-coffer.is-limited-time::after {
  content: "";
  position: absolute;
  inset: 11px 4px 10px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(244, 198, 89, .22);
  clip-path: polygon(0 15%, 15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%);
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 195, 77, .12), transparent 55%),
    repeating-conic-gradient(from 0deg, rgba(255, 229, 151, .10) 0 2deg, transparent 2deg 24deg);
  animation: limitedInventorySeal 12s linear infinite;
}
.carousel-coffer.is-limited-time .carousel-selected-aura {
  background:
    radial-gradient(circle, rgba(255, 240, 178, .35) 0 11%, rgba(230, 173, 54, .28) 30%, color-mix(in srgb, var(--box-glow) 36%, transparent) 50%, transparent 72%) !important;
}
.carousel-coffer.is-limited-time.selected img {
  animation: limitedSelectedCoffer 3.2s ease-in-out infinite !important;
}
.limited-time-decor-inventory {
  inset: 16px 4px 12px;
  z-index: 2;
  border-color: rgba(255, 226, 139, .18);
}
.limited-time-decor-inventory b {
  left: 15%;
  bottom: 22%;
}

.vault-selection {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(118deg, rgba(19, 37, 31, .90), rgba(46, 42, 28, .72) 48%, rgba(20, 38, 32, .90)) !important;
  border-color: rgba(210, 194, 139, .27) !important;
}
.vault-selection::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .48;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(226,211,165,.095) 48% 49%, transparent 50%),
    linear-gradient(-30deg, transparent 47%, rgba(154,207,181,.06) 48% 49%, transparent 50%),
    radial-gradient(ellipse at 50% 125%, transparent 0 48%, rgba(231,203,124,.12) 49% 50%, transparent 51%),
    radial-gradient(circle at 8px 8px, rgba(255,240,190,.10) 0 1px, transparent 1.5px);
  background-size: 54px 31px, 54px 31px, 210px 82px, 24px 24px;
}
.vault-selection::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(244, 220, 151, .13);
  clip-path: polygon(0 13px, 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px));
}
.vault-selection-texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.vault-selection-texture::before,
.vault-selection-texture::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(226, 201, 126, .13);
  transform: translateY(-50%) rotate(45deg);
}
.vault-selection-texture::before { left: -72px; }
.vault-selection-texture::after { right: -72px; }
.vault-selection-texture i {
  position: absolute;
  top: 50%;
  width: 19%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,224,160,.18), transparent);
}
.vault-selection-texture i:first-child { left: 0; }
.vault-selection-texture i:nth-child(2) { right: 0; }
.vault-selection-texture span {
  position: absolute;
  top: 50%;
  color: rgba(246, 222, 152, .16);
  transform: translateY(-50%);
}
.vault-selection-texture span:nth-of-type(1) { left: 21%; }
.vault-selection-texture span:nth-of-type(2) {
  left: 50%;
  font-size: 22px;
  transform: translate(-50%, -50%);
}
.vault-selection-texture span:nth-of-type(3) { right: 21%; }
.vault-selection.is-limited-time {
  border-color: rgba(246, 202, 92, .46) !important;
  box-shadow: 0 18px 42px rgba(5,8,5,.4), inset 0 0 34px rgba(206,142,35,.08), 0 0 24px rgba(215,155,43,.10) !important;
}

.reel-overlay.limited-time-reel {
  background:
    radial-gradient(circle at 50% 42%, rgba(132, 84, 13, .33), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(45,62,46,.60), transparent 58%),
    rgba(5, 8, 6, .985) !important;
}
.limited-reel-sanctum {
  position: fixed;
  inset: 18px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(247, 211, 115, .17);
  clip-path: polygon(0 34px, 34px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 34px), calc(100% - 34px) 100%, 34px 100%, 0 calc(100% - 34px));
  box-shadow: inset 0 0 80px rgba(180, 112, 17, .06);
}
.limited-reel-sanctum::before,
.limited-reel-sanctum::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(780px, 76vw);
  height: min(780px, 76vw);
  border: 1px solid rgba(255, 218, 117, .12);
  border-radius: 50%;
  transform: translateX(-50%);
}
.limited-reel-sanctum::before {
  top: -61%;
  animation: limitedSanctumOrbit 22s linear infinite;
}
.limited-reel-sanctum::after {
  bottom: -61%;
  animation: limitedSanctumOrbitReverse 26s linear infinite;
}
.limited-reel-sanctum > b {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 226, 142, .45);
  font-size: 12px;
  letter-spacing: .42em;
  text-indent: .42em;
}
.limited-reel-corner {
  position: absolute;
  color: rgba(255, 224, 135, .52);
  font-size: 22px;
  text-shadow: 0 0 18px rgba(255, 193, 54, .46);
  animation: limitedTwinkle 2.8s ease-in-out infinite;
}
.limited-reel-corner.corner-a {
  top: 13px;
  left: 18px;
}
.limited-reel-corner.corner-b {
  top: 13px;
  right: 18px;
  animation-delay: -.7s;
}
.limited-reel-corner.corner-c {
  bottom: 13px;
  left: 18px;
  animation-delay: -1.4s;
}
.limited-reel-corner.corner-d {
  bottom: 13px;
  right: 18px;
  animation-delay: -2.1s;
}
.limited-reel-arc {
  position: absolute;
  top: 50%;
  width: 28vw;
  height: 46vh;
  border: 1px solid rgba(244, 199, 91, .10);
  border-radius: 50%;
}
.limited-reel-arc.arc-a {
  left: -18vw;
  transform: translateY(-50%);
}
.limited-reel-arc.arc-b {
  right: -18vw;
  transform: translateY(-50%);
}
.reel-scene.limited-time-scene {
  z-index: 3;
  border-color: rgba(244, 200, 91, .28);
  box-shadow: 0 30px 80px rgba(0,0,0,.52), inset 0 0 42px rgba(213,145,34,.055);
}
.limited-time-reel .reel-window {
  border-color: rgba(246, 204, 101, .49);
  box-shadow: inset 0 0 26px rgba(234, 170, 55, .08), 0 0 22px rgba(210, 143, 29, .10);
}
.limited-time-reel .reel-card {
  border-color: rgba(255, 220, 126, .20);
  background:
    linear-gradient(150deg, rgba(77, 58, 24, .97), rgba(29, 40, 30, .99) 50%, rgba(61, 40, 13, .98));
}
.marker.limited-time-golden-marker {
  width: 6px;
  background: linear-gradient(180deg, transparent, #fff5c4 10%, #e3ad31 43%, #fff5c4 68%, transparent) !important;
  box-shadow: 0 0 7px #fff4bb, 0 0 20px rgba(234, 171, 43, .92), 0 0 42px rgba(217, 139, 20, .56) !important;
}
.marker.limited-time-golden-marker::before,
.marker.limited-time-golden-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 225, 133, .88);
  transform: translateX(-50%) rotate(45deg);
  background: rgba(54, 33, 7, .72);
  box-shadow: 0 0 18px rgba(247, 190, 62, .52), inset 0 0 9px rgba(255,239,174,.22);
}
.marker.limited-time-golden-marker::before { top: -16px; }
.marker.limited-time-golden-marker::after { bottom: -16px; }
.marker.limited-time-golden-marker i {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 17px;
  height: 17px;
  border: 1px solid #fff0b0;
  transform: translateX(-50%) rotate(45deg);
}
.marker.limited-time-golden-marker i:first-child { top: -9px; }
.marker.limited-time-golden-marker i:nth-child(2) { bottom: -9px; }
.marker.limited-time-golden-marker span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  color: #fff7d1;
  font-size: 13px;
  text-shadow: 0 0 11px #fff0a7;
}

.reel-skip-button {
  position: relative;
  z-index: 12;
  display: block;
  min-width: 112px;
  margin: 16px auto 0;
  padding: 9px 22px;
  border: 1px solid rgba(244, 219, 143, .42);
  border-radius: 4px;
  color: rgba(255, 239, 188, .9);
  font: 900 11px/1 inherit;
  letter-spacing: .22em;
  text-indent: .22em;
  background: rgba(15, 22, 17, .72);
  box-shadow: 0 8px 25px rgba(0,0,0,.3), inset 0 0 18px rgba(214,180,95,.04);
  cursor: pointer;
  animation: reelSkipArrive .35s ease both;
}
.reel-skip-button:hover {
  color: #172018;
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: translateY(-1px);
}

.site-footer {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 18px 20px 22px;
  color: rgba(231, 225, 202, .48);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-align: center;
  border-top: 1px solid rgba(214, 180, 95, .09);
}
.login-site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 0;
}

@keyframes limitedOrbit { to { transform: rotate(360deg); } }
@keyframes limitedSanctumOrbit { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes limitedOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes limitedSanctumOrbitReverse { to { transform: translateX(-50%) rotate(-360deg); } }
@keyframes limitedTwinkle {
  0%, 100% {
    opacity: .35;
    transform: scale(.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.14);
  }
}
@keyframes limitedCardShimmer {
  0%, 100% {
    opacity: .48;
    filter: brightness(.85);
  }
  50% {
    opacity: 1;
    filter: brightness(1.2);
  }
}
@keyframes limitedGlowBreathe {
  0%, 100% {
    transform: scale(.92);
    opacity: .58;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes limitedCofferFloat {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-5px) rotate(.5deg); }
}
@keyframes limitedInventorySeal { to { transform: rotate(360deg); } }
@keyframes limitedSelectedCoffer {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 22px 18px rgba(3,8,4,.55)) drop-shadow(0 0 12px rgba(226,166,54,.30));
  }
  50% {
    transform: translateY(-5px) scale(1.025);
    filter: drop-shadow(0 25px 20px rgba(3,8,4,.58)) drop-shadow(0 0 25px rgba(244,194,76,.52));
  }
}
@keyframes reelSkipArrive {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 680px) {
  .limited-time-stamp {
    font-size: 8px;
    padding: 5px 6px 4px;
    letter-spacing: .10em;
  }
  .limited-time-stamp::before,
  .limited-time-stamp::after { margin: 0 3px; }
  .limited-time-inventory {
    top: 22px;
    left: 5px;
    transform: rotate(-3deg) scale(.78);
  }
  .carousel-quantity-badge {
    right: 8px !important;
    font-size: 17px !important;
  }
  .limited-reel-sanctum { inset: 7px; }
}

.limited-time-stamp {
  display: inline-flex !important;
  flex-direction: column;
  gap: 1px;
  min-width: 68px;
  padding: 7px 10px 6px !important;
  line-height: .94 !important;
  text-align: center;
  letter-spacing: .16em !important;
  white-space: normal !important;
}
.limited-time-stamp::before,
.limited-time-stamp::after {
  content: none !important;
}
.limited-time-stamp > span {
  display: block;
}
.limited-time-hall {
  top: 10px;
  right: 10px;
}
.limited-time-inventory {
  top: 14px;
  left: 8px;
  transform: rotate(-4deg) scale(.92);
}

.box-card.is-limited-time .box-visual,
.carousel-coffer.is-limited-time {
  overflow: visible;
}
.box-card.is-limited-time .box-visual::before {
  content: "";
  position: absolute;
  inset: 14px 6px 18px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--box-glow) 34%, transparent) 0 16%, transparent 54%),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--box-glow) 25%, transparent) 0 18%, transparent 56%),
    radial-gradient(circle at 22% 34%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 70%, rgba(255,255,255,.12) 0 1.5px, transparent 2.5px);
  filter: blur(11px) saturate(1.25);
  opacity: .95;
  animation: limitedMistPulse 3.7s ease-in-out infinite alternate;
}
.box-card.is-limited-time .box-visual::after {
  content: "";
  position: absolute;
  inset: -6px 10px 12px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 8%, color-mix(in srgb, var(--box-glow) 16%, transparent) 28%, transparent 46%, color-mix(in srgb, var(--box-glow) 18%, transparent) 64%, transparent 82%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--box-glow) 24%, transparent) 0 18%, transparent 60%);
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: .82;
  animation: limitedLightSweep 6.2s ease-in-out infinite;
}
.limited-time-decor {
  inset: -4px !important;
  border: 0 !important;
  border-radius: 18px !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}
.limited-time-decor::before,
.limited-time-decor::after,
.limited-time-decor i {
  border: 0 !important;
  border-radius: 999px !important;
}
.limited-time-decor::before {
  inset: 18% -6% 4% !important;
  background:
    radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--box-glow) 20%, transparent) 0 16%, transparent 54%),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--box-glow) 18%, transparent) 26%, transparent 50%, color-mix(in srgb, var(--box-glow) 18%, transparent) 74%, transparent 100%);
  filter: blur(7px);
  opacity: .9;
  animation: limitedWispDrift 7.4s ease-in-out infinite;
}
.limited-time-decor::after {
  inset: 2% 10% 22% !important;
  background:
    conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--box-glow) 26%, transparent) 11%, transparent 18%, transparent 44%, color-mix(in srgb, var(--box-glow) 24%, transparent) 49%, transparent 56%, transparent 82%, color-mix(in srgb, var(--box-glow) 22%, transparent) 87%, transparent 94%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--box-glow) 10%, transparent) 0 30%, transparent 60%);
  filter: blur(10px) saturate(1.25);
  opacity: .7;
  animation: limitedHaloSpin 14s linear infinite;
}
.limited-time-decor i:first-child,
.limited-time-decor i:nth-child(2) {
  width: 42px !important;
  height: 8px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), color-mix(in srgb, var(--box-glow) 72%, white), transparent) !important;
  filter: blur(1.3px);
  box-shadow: 0 0 16px color-mix(in srgb, var(--box-glow) 40%, transparent);
}
.limited-time-decor i:first-child {
  top: 26px !important;
  left: -8px !important;
  transform: rotate(-18deg);
}
.limited-time-decor i:nth-child(2) {
  right: -9px !important;
  bottom: 24px !important;
  transform: rotate(18deg);
}
.limited-time-decor b {
  color: color-mix(in srgb, var(--box-glow) 68%, white) !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--box-glow) 72%, transparent), 0 0 28px rgba(255,255,255,.22) !important;
}
.box-card.is-limited-time .box-glow {
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--box-glow) 52%, transparent) 0 18%, color-mix(in srgb, var(--box-glow) 16%, transparent) 42%, transparent 72%) !important;
  filter: blur(18px) saturate(1.4) !important;
}
.box-card.is-limited-time .box-visual img {
  filter:
    drop-shadow(0 18px 18px rgba(3, 8, 4, .58))
    drop-shadow(0 0 20px color-mix(in srgb, var(--box-glow) 70%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--box-glow) 28%, transparent)) !important;
}

.carousel-coffer.is-limited-time::before {
  content: "";
  position: absolute;
  inset: 18px 8px 16px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--box-glow) 26%, transparent) 0 18%, transparent 58%),
    linear-gradient(120deg, transparent 18%, color-mix(in srgb, var(--box-glow) 16%, transparent) 40%, transparent 52%, color-mix(in srgb, var(--box-glow) 16%, transparent) 70%, transparent 82%);
  filter: blur(10px);
  opacity: .9;
  animation: limitedMistPulse 3.6s ease-in-out infinite alternate;
}
.carousel-coffer.is-limited-time::after {
  inset: 14px 4px 10px !important;
  z-index: 2 !important;
  border: 0 !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--box-glow) 12%, transparent) 0 34%, transparent 60%),
    conic-gradient(from 0deg at 50% 50%, transparent 0 10%, color-mix(in srgb, var(--box-glow) 24%, transparent) 13%, transparent 17%, transparent 36%, color-mix(in srgb, var(--box-glow) 24%, transparent) 39%, transparent 44%, transparent 64%, color-mix(in srgb, var(--box-glow) 20%, transparent) 67%, transparent 72%, transparent 90%, color-mix(in srgb, var(--box-glow) 20%, transparent) 93%, transparent 100%);
  filter: blur(9px) saturate(1.2);
  opacity: .88;
  animation: limitedHaloSpin 12s linear infinite;
}
.carousel-coffer.is-limited-time img {
  filter:
    drop-shadow(0 16px 18px rgba(4,8,4,.62))
    drop-shadow(0 0 18px color-mix(in srgb, var(--box-glow) 70%, transparent))
    drop-shadow(0 0 30px color-mix(in srgb, var(--box-glow) 24%, transparent));
}
.carousel-coffer.is-limited-time.selected img {
  animation: limitedSelectedCoffer 3.2s ease-in-out infinite, limitedLightLift 5.6s ease-in-out infinite !important;
}
.limited-time-decor-inventory {
  inset: 14px 4px 12px !important;
  border: 0 !important;
}

.reel-overlay.limited-time-reel {
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--box-glow) 12%, transparent) 0 8%, transparent 22%),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--box-glow) 18%, transparent) 0 15%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(45,62,46,.56), transparent 58%),
    rgba(5, 8, 6, .985) !important;
}
.limited-reel-sanctum {
  inset: 0 !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.limited-reel-sanctum::before,
.limited-reel-sanctum::after {
  left: 50% !important;
  top: 50% !important;
  width: min(1040px, 88vw) !important;
  height: min(760px, 74vh) !important;
  border: 0 !important;
  border-radius: 48% 52% 55% 45% / 50% 44% 56% 50% !important;
  transform: translate(-50%, -50%) !important;
}
.limited-reel-sanctum::before {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--box-glow) 18%, transparent) 0 15%, transparent 46%),
    conic-gradient(from 0deg, transparent 0 10%, color-mix(in srgb, var(--box-glow) 15%, transparent) 14%, transparent 18%, transparent 36%, color-mix(in srgb, var(--box-glow) 14%, transparent) 40%, transparent 44%, transparent 62%, color-mix(in srgb, var(--box-glow) 13%, transparent) 66%, transparent 70%, transparent 88%, color-mix(in srgb, var(--box-glow) 14%, transparent) 92%, transparent 100%);
  filter: blur(18px);
  opacity: .78;
  animation: limitedNebulaSpin 16s linear infinite;
}
.limited-reel-sanctum::after {
  background:
    linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--box-glow) 14%, transparent) 12%, transparent 28%, transparent 72%, color-mix(in srgb, var(--box-glow) 14%, transparent) 88%, transparent 100%),
    radial-gradient(ellipse at center, transparent 0 48%, color-mix(in srgb, var(--box-glow) 18%, transparent) 58%, transparent 74%);
  filter: blur(24px);
  opacity: .64;
  animation: limitedNebulaPulse 6.5s ease-in-out infinite;
}
.limited-reel-sanctum > b {
  top: 32px !important;
  padding: 0 14px;
  color: color-mix(in srgb, var(--box-glow) 54%, white) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--box-glow) 50%, transparent);
  letter-spacing: .48em !important;
}
.limited-reel-corner {
  color: color-mix(in srgb, var(--box-glow) 62%, white) !important;
  text-shadow: 0 0 22px color-mix(in srgb, var(--box-glow) 46%, transparent) !important;
}
.limited-reel-arc {
  border: 0 !important;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--box-glow) 8%, transparent) 0 10%, transparent 55%);
  filter: blur(18px);
  opacity: .7;
}
.reel-scene.limited-time-scene {
  overflow: visible;
  background:
    linear-gradient(160deg, rgba(27,36,30,.96), rgba(51,38,17,.96) 48%, rgba(24,32,28,.98)),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--box-glow) 10%, transparent) 0 12%, transparent 36%);
  border-color: color-mix(in srgb, var(--box-glow) 34%, #f4c85b) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.52), inset 0 0 42px color-mix(in srgb, var(--box-glow) 10%, transparent), 0 0 24px color-mix(in srgb, var(--box-glow) 18%, transparent) !important;
}
.reel-scene.limited-time-scene::before,
.reel-scene.limited-time-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(540px, 64vw);
  height: 58px;
  transform: translateX(-50%);
  pointer-events: none;
}
.reel-scene.limited-time-scene::before {
  top: -26px;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--box-glow) 22%, transparent) 0 20%, transparent 60%),
    linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--box-glow) 20%, transparent) 20%, rgba(255,255,255,.18) 50%, color-mix(in srgb, var(--box-glow) 20%, transparent) 80%, transparent 90% 100%);
  filter: blur(10px);
}
.reel-scene.limited-time-scene::after {
  bottom: -30px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--box-glow) 18%, transparent) 0 18%, transparent 60%),
    linear-gradient(90deg, transparent 0 14%, color-mix(in srgb, var(--box-glow) 16%, transparent) 26%, transparent 50%, color-mix(in srgb, var(--box-glow) 16%, transparent) 74%, transparent 86% 100%);
  filter: blur(12px);
}
.reel-scene.limited-time-scene .reel-title {
  position: relative;
}
.reel-scene.limited-time-scene .reel-title::after {
  content: "✦ ✦ ✦";
  display: block;
  margin-top: 8px;
  color: color-mix(in srgb, var(--box-glow) 60%, white);
  font-size: 12px;
  letter-spacing: .38em;
  text-indent: .38em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--box-glow) 55%, transparent);
  opacity: .8;
}
.limited-time-reel .reel-window {
  position: relative;
  overflow: visible;
  border-color: color-mix(in srgb, var(--box-glow) 40%, #f6cc65) !important;
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--box-glow) 10%, transparent), 0 0 22px color-mix(in srgb, var(--box-glow) 16%, transparent) !important;
}
.limited-time-reel .reel-window::before,
.limited-time-reel .reel-window::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 36px;
  height: 66%;
  transform: translateY(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--box-glow) 18%, transparent), transparent);
  filter: blur(8px);
  opacity: .75;
}
.limited-time-reel .reel-window::before { left: -10px; }
.limited-time-reel .reel-window::after { right: -10px; }
.marker.limited-time-golden-marker {
  width: 8px !important;
  background: linear-gradient(180deg, transparent, #fff5c4 8%, color-mix(in srgb, var(--box-glow) 48%, #e3ad31) 40%, #fff5c4 64%, transparent) !important;
  box-shadow: 0 0 8px #fff4bb, 0 0 22px color-mix(in srgb, var(--box-glow) 66%, transparent), 0 0 48px color-mix(in srgb, var(--box-glow) 38%, transparent) !important;
}
.marker.limited-time-golden-marker::before,
.marker.limited-time-golden-marker::after {
  width: 34px !important;
  height: 34px !important;
  border-color: color-mix(in srgb, var(--box-glow) 48%, #ffe185) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,241,194,.32) 0 20%, rgba(54,33,7,.8) 58%, rgba(54,33,7,.66) 100%) !important;
}
.marker.limited-time-golden-marker i {
  width: 20px !important;
  height: 20px !important;
  border-color: color-mix(in srgb, var(--box-glow) 46%, #fff0b0) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--box-glow) 32%, transparent);
}
.marker.limited-time-golden-marker span {
  font-size: 16px !important;
}

@keyframes limitedMistPulse {
  0% {
    transform: translateY(2px) scale(.98);
    opacity: .72;
  }
  100% {
    transform: translateY(-4px) scale(1.04);
    opacity: 1;
  }
}
@keyframes limitedLightSweep {
  0%, 100% {
    transform: translateX(-2%) translateY(0);
    opacity: .48;
  }
  50% {
    transform: translateX(2%) translateY(-3px);
    opacity: .88;
  }
}
@keyframes limitedWispDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  35% { transform: translate3d(4px,-6px,0) scale(1.02); }
  68% { transform: translate3d(-5px,4px,0) scale(.99); }
}
@keyframes limitedHaloSpin {
  0% { transform: rotate(0deg) scale(.98); }
  100% { transform: rotate(360deg) scale(1.02); }
}
@keyframes limitedLightLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes limitedNebulaSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.04); }
}
@keyframes limitedNebulaPulse {
  0%, 100% {
    opacity: .48;
    transform: translate(-50%, -50%) scale(.98);
  }
  50% {
    opacity: .74;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

.box-card.is-limited-time {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.box-card.is-limited-time::before {
  content: none !important;
}

.box-card.is-limited-time .box-visual {
  isolation: isolate;
}
.box-card.is-limited-time .box-visual::before {
  inset: 10px -8px 8px !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at 50% 76%, color-mix(in srgb, var(--box-glow) 38%, transparent) 0 14%, transparent 48%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--box-glow) 22%, transparent) 0 17%, transparent 54%),
    radial-gradient(circle at 16% 38%, color-mix(in srgb, var(--box-glow) 56%, white) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--box-glow) 52%, white) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 72% 72%, color-mix(in srgb, var(--box-glow) 45%, white) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 29% 69%, color-mix(in srgb, var(--box-glow) 42%, white) 0 1.1px, transparent 2.2px) !important;
  filter: blur(12px) saturate(1.35) !important;
  opacity: .94 !important;
  animation: limitedHallAura 4.4s ease-in-out infinite alternate !important;
}
.box-card.is-limited-time .box-visual::after {
  inset: 5px -12px 0 !important;
  z-index: 1 !important;
  border-radius: 50% !important;
  background:
    linear-gradient(118deg, transparent 4%, color-mix(in srgb, var(--box-glow) 13%, transparent) 23%, transparent 39%, color-mix(in srgb, var(--box-glow) 17%, transparent) 57%, transparent 74%),
    radial-gradient(ellipse at 50% 82%, color-mix(in srgb, var(--box-glow) 18%, transparent) 0 13%, transparent 55%) !important;
  filter: blur(10px) !important;
  mix-blend-mode: screen;
  opacity: .78 !important;
  animation: limitedHallVeil 7s ease-in-out infinite !important;
}
.limited-time-decor-hall {
  inset: 3px -10px 3px !important;
  z-index: 3 !important;
  overflow: visible;
}
.limited-time-decor-hall::before {
  inset: 13% -4% 1% !important;
  background:
    radial-gradient(ellipse at 50% 72%, color-mix(in srgb, var(--box-glow) 25%, transparent) 0 12%, transparent 48%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--box-glow) 15%, transparent), transparent 46%, color-mix(in srgb, var(--box-glow) 15%, transparent), transparent) !important;
  filter: blur(8px) !important;
  animation: limitedHallWisp 7.8s ease-in-out infinite !important;
}
.limited-time-decor-hall::after {
  inset: 1% 4% 12% !important;
  background:
    radial-gradient(circle at 25% 44%, color-mix(in srgb, var(--box-glow) 72%, white) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 33%, color-mix(in srgb, var(--box-glow) 68%, white) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 74%, color-mix(in srgb, var(--box-glow) 58%, white) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 78%, color-mix(in srgb, var(--box-glow) 54%, white) 0 1px, transparent 2px) !important;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--box-glow) 45%, transparent)) !important;
  opacity: .82 !important;
  animation: limitedHallSparkDrift 4.8s ease-in-out infinite !important;
}
.limited-time-decor-hall i:first-child,
.limited-time-decor-hall i:nth-child(2) {
  width: 54px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--box-glow) 70%, white), transparent) !important;
  filter: blur(1.5px) !important;
  opacity: .72;
}
.limited-time-decor-hall i:first-child {
  top: 42px !important;
  left: -16px !important;
  transform: rotate(-22deg) !important;
  animation: limitedHallTrailA 5.2s ease-in-out infinite !important;
}
.limited-time-decor-hall i:nth-child(2) {
  right: -16px !important;
  bottom: 36px !important;
  transform: rotate(22deg) !important;
  animation: limitedHallTrailB 5.8s ease-in-out infinite !important;
}
.limited-time-decor-hall b {
  color: color-mix(in srgb, var(--box-glow) 72%, white) !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--box-glow) 72%, transparent) !important;
}
.box-card.is-limited-time .box-glow {
  width: 188px !important;
  height: 72px !important;
  bottom: 3px !important;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--box-glow) 42%, transparent) 0 16%, color-mix(in srgb, var(--box-glow) 13%, transparent) 42%, transparent 72%) !important;
  filter: blur(20px) saturate(1.45) !important;
  opacity: .88 !important;
}

.limited-time-reel .reel-window {
  overflow: hidden !important;
}
.limited-time-reel .reel-track,
.limited-time-reel .reel-card {
  max-height: 100%;
}

.reel-scene.limited-time-scene {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.reel-scene.limited-time-scene::before,
.reel-scene.limited-time-scene::after {
  width: min(620px, 72vw) !important;
  height: 44px !important;
  border-radius: 50% !important;
  opacity: .72;
}

.marker.limited-time-golden-marker::before {
  top: 5px !important;
}
.marker.limited-time-golden-marker::after {
  bottom: 5px !important;
}
.marker.limited-time-golden-marker::before,
.marker.limited-time-golden-marker::after {
  width: 25px !important;
  height: 25px !important;
}
.marker.limited-time-golden-marker i:first-child {
  top: 12px !important;
}
.marker.limited-time-golden-marker i:nth-child(2) {
  bottom: 4px !important;
}
.marker.limited-time-golden-marker i {
  width: 14px !important;
  height: 14px !important;
}

.reel-overlay.limited-time-reel.is-revealed {
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--box-glow) 16%, transparent) 0 12%, transparent 38%),
    rgba(6, 11, 7, .035) !important;
}
.limited-time-reel.is-revealed .reel-title-fortune {
  color: color-mix(in srgb, var(--box-glow) 56%, #fff1b8) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--box-glow) 48%, transparent), 0 0 36px rgba(255,255,255,.08) !important;
}
.limited-time-reel .result-card {
  border-color: color-mix(in srgb, var(--box-glow) 30%, rgba(232,196,103,.24)) !important;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--box-glow) 9%, transparent), transparent 52%),
    rgba(22, 34, 26, .96) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.42),
    inset 0 0 24px color-mix(in srgb, var(--box-glow) 7%, transparent),
    0 0 22px color-mix(in srgb, var(--box-glow) 10%, transparent) !important;
}
.limited-time-reel .result-icon-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--box-glow) 18%, transparent), transparent 66%);
  filter: blur(12px);
  animation: limitedResultPulse 3.2s ease-in-out infinite alternate;
}

@keyframes limitedHallAura {
  0% {
    transform: translateY(3px) scale(.96);
    opacity: .68;
  }
  100% {
    transform: translateY(-4px) scale(1.05);
    opacity: 1;
  }
}
@keyframes limitedHallVeil {
  0%, 100% {
    transform: translateX(-3%) translateY(1px);
    opacity: .46;
  }
  50% {
    transform: translateX(3%) translateY(-4px);
    opacity: .82;
  }
}
@keyframes limitedHallWisp {
  0%, 100% {
    transform: translate3d(-2px, 2px, 0) scale(.98);
    opacity: .5;
  }
  50% {
    transform: translate3d(4px, -5px, 0) scale(1.04);
    opacity: .9;
  }
}
@keyframes limitedHallSparkDrift {
  0%, 100% {
    transform: translateY(2px);
    opacity: .58;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
@keyframes limitedHallTrailA {
  0%, 100% {
    transform: translate3d(0,0,0) rotate(-22deg) scaleX(.8);
    opacity: .35;
  }
  50% {
    transform: translate3d(12px,-7px,0) rotate(-16deg) scaleX(1.15);
    opacity: .9;
  }
}
@keyframes limitedHallTrailB {
  0%, 100% {
    transform: translate3d(0,0,0) rotate(22deg) scaleX(.8);
    opacity: .32;
  }
  50% {
    transform: translate3d(-12px,-8px,0) rotate(16deg) scaleX(1.12);
    opacity: .86;
  }
}
@keyframes limitedResultPulse {
  from {
    transform: scale(.94);
    opacity: .45;
  }
  to {
    transform: scale(1.05);
    opacity: .85;
  }
}

.box-card.is-limited-time .box-glow {
  width: 252px !important;
  height: 252px !important;
  bottom: auto !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      color-mix(in srgb, var(--box-glow) 70%, transparent) 34deg,
      transparent 76deg,
      color-mix(in srgb, var(--box-glow) 42%, #2D3E2E 58%) 139deg,
      transparent 194deg,
      color-mix(in srgb, var(--box-glow) 66%, transparent) 260deg,
      transparent 322deg),
    radial-gradient(circle, color-mix(in srgb, var(--box-glow) 28%, transparent), rgba(45,62,46,.16) 48%, transparent 72%) !important;
  filter: blur(18px) !important;
  opacity: .9 !important;
  animation: catalogHaloOrbit 8.5s linear infinite !important;
}

.box-card.is-limited-time .box-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  width: 175px !important;
  height: 175px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--box-glow) 43%, white 12%) 0 8%,
      color-mix(in srgb, var(--box-glow) 31%, transparent) 24%,
      color-mix(in srgb, var(--box-glow) 18%, #2D3E2E 82%) 48%,
      rgba(45,62,46,.1) 63%,
      transparent 77%) !important;
  filter: blur(10px) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  animation: iconAuraPulse 3.8s ease-in-out infinite !important;
}
.box-card.is-limited-time .box-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  width: 178px !important;
  height: 48px !important;
  bottom: 12px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--box-glow) 42%, transparent), rgba(45,62,46,.18) 53%, transparent 78%) !important;
  filter: blur(16px) !important;
  mix-blend-mode: normal !important;
  opacity: .9 !important;
  animation: none !important;
}
.box-card.is-limited-time .box-visual img {
  filter: drop-shadow(0 22px 20px rgba(3,8,4,.32)) !important;
}

.limited-time-decor-hall::before,
.limited-time-decor-hall::after {
  content: none !important;
}
.limited-time-decor-hall i:first-child,
.limited-time-decor-hall i:nth-child(2) {
  width: 42px !important;
  height: 4px !important;
  opacity: .62 !important;
}
.limited-time-decor-hall b {
  position: absolute;
  z-index: 4;
  line-height: 1;
  opacity: .82;
  animation: limitedHallSymbolFloat 3.8s ease-in-out infinite !important;
}
.limited-time-decor-hall b:nth-of-type(1) {
  left: 9%;
  top: 28%;
  font-size: 13px;
  animation-delay: -.2s !important;
}
.limited-time-decor-hall b:nth-of-type(2) {
  left: 20%;
  bottom: 18%;
  font-size: 12px;
  animation-delay: -1.1s !important;
}
.limited-time-decor-hall b:nth-of-type(3) {
  left: 35%;
  top: 13%;
  font-size: 9px;
  animation-delay: -2.3s !important;
}
.limited-time-decor-hall b:nth-of-type(4) {
  right: 35%;
  bottom: 13%;
  font-size: 12px;
  animation-delay: -.7s !important;
}
.limited-time-decor-hall b:nth-of-type(5) {
  right: 21%;
  top: 25%;
  font-size: 12px;
  animation-delay: -1.8s !important;
}
.limited-time-decor-hall b:nth-of-type(6) {
  right: 8%;
  bottom: 27%;
  font-size: 9px;
  animation-delay: -2.8s !important;
}
.limited-time-decor-hall b:nth-of-type(7) {
  left: 13%;
  bottom: 42%;
  font-size: 8px;
  animation-delay: -3.2s !important;
}
.limited-time-decor-hall b:nth-of-type(8) {
  right: 13%;
  top: 48%;
  font-size: 12px;
  animation-delay: -1.4s !important;
}

.reel-overlay.limited-time-reel,
.reel-overlay.limited-time-reel.is-intro,
.reel-overlay.limited-time-reel.is-rolling,
.reel-overlay.limited-time-reel.is-revealed {
  background: rgba(6, 11, 7, .035) !important;
  -webkit-backdrop-filter: blur(13px) saturate(.88) brightness(.82) !important;
  backdrop-filter: blur(13px) saturate(.88) brightness(.82) !important;
}
.reel-overlay.limited-time-reel .reel-atmosphere span {
  background: var(--box-glow) !important;
  opacity: .045 !important;
}

@media (min-width: 761px) {
  .reel-line {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  }
  .reel-line::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
  }
}

.limited-time-reel .reel-window {
  background:
    linear-gradient(90deg,
      #050806 0%,
      color-mix(in srgb, var(--box-glow) 17%, #0a100c) 18%,
      color-mix(in srgb, var(--box-glow) 23%, #0c130e) 50%,
      color-mix(in srgb, var(--box-glow) 17%, #0a100c) 82%,
      #050806 100%) !important;
  border-color: color-mix(in srgb, var(--box-glow) 42%, rgba(255,255,255,.14)) !important;
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--box-glow) 13%, transparent),
    0 0 22px color-mix(in srgb, var(--box-glow) 13%, transparent) !important;
}
.limited-time-reel .reel-window::before {
  background: linear-gradient(90deg, #050806, transparent) !important;
}
.limited-time-reel .reel-window::after {
  background: linear-gradient(-90deg, #050806, transparent) !important;
}

.reel-card {
  --rarity-glow: #d7dde0;
  border-color: color-mix(in srgb, var(--rarity-glow) 34%, rgba(255,255,255,.08)) !important;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rarity-glow) 17%, transparent) 0 10%, transparent 56%),
    linear-gradient(160deg, rgba(28,34,31,.97), rgba(9,13,11,.99)) !important;
  box-shadow:
    inset 0 0 25px color-mix(in srgb, var(--rarity-glow) 13%, transparent),
    inset 0 -15px 26px rgba(0,0,0,.22),
    0 0 12px color-mix(in srgb, var(--rarity-glow) 8%, transparent) !important;
}
.reel-card.rarity-common { --rarity-glow: #d7dde0; }
.reel-card.rarity-uncommon { --rarity-glow: #79e5a1; }
.reel-card.rarity-rare { --rarity-glow: #73b7ff; }
.reel-card.rarity-epic { --rarity-glow: #c38cff; }
.reel-card.rarity-legendary { --rarity-glow: #ffd66f; }

.limited-time-reel .result-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.limited-time-reel .result-icon-stage::before {
  content: none !important;
}

.limited-time-reel.is-revealed .reel-title-fortune {
  color: var(--gold-soft) !important;
  text-shadow: 0 0 18px rgba(214,180,95,.32), 0 0 30px rgba(214,180,95,.14) !important;
}

@keyframes limitedHallSymbolFloat {
  0%, 100% {
    transform: translate3d(0, 2px, 0) scale(.9) rotate(-4deg);
    opacity: .46;
  }
  45% {
    transform: translate3d(3px, -6px, 0) scale(1.14) rotate(5deg);
    opacity: 1;
  }
  72% {
    transform: translate3d(-2px, -3px, 0) scale(1.02) rotate(1deg);
    opacity: .72;
  }
}

.reel-overlay {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
.reel-overlay .reel-scene {
  position: relative;
  z-index: 5;
  max-height: calc(100dvh - 24px);
}
.reel-overlay .grand-win-celebration { z-index: 7; }
.reel-overlay .limited-reel-sanctum { z-index: 2; }

.reel-pattern-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
  contain: paint;
}
.reel-pattern-texture {
  position: absolute;
  inset: -4%;
  opacity: .24;
  background-image:
    linear-gradient(30deg, transparent 47.5%, color-mix(in srgb, var(--box-glow) 12%, rgba(255,255,255,.08)) 48% 49%, transparent 49.5%),
    linear-gradient(-30deg, transparent 47.5%, color-mix(in srgb, var(--box-glow) 9%, rgba(255,255,255,.05)) 48% 49%, transparent 49.5%),
    radial-gradient(circle at center, color-mix(in srgb, var(--box-glow) 7%, transparent) 0 1px, transparent 1.5px);
  background-size: 74px 43px, 74px 43px, 31px 31px;
  mask-image: radial-gradient(ellipse at center, black 0 28%, rgba(0,0,0,.72) 48%, transparent 92%);
  animation: reelTextureDrift 20s linear infinite;
}
.reel-pattern-layer > span {
  position: absolute;
  left: var(--pattern-x);
  top: var(--pattern-y);
  color: color-mix(in srgb, var(--box-glow) 42%, rgba(255,245,205,.88));
  font-size: var(--pattern-size);
  line-height: 1;
  opacity: .24;
  text-shadow: 0 0 12px color-mix(in srgb, var(--box-glow) 28%, transparent);
  animation: reelSymbolDrift var(--pattern-duration) ease-in-out var(--pattern-delay) infinite;
}
@keyframes reelTextureDrift {
  from { transform: translate3d(-18px,-10px,0); }
  to { transform: translate3d(56px,33px,0); }
}
@keyframes reelSymbolDrift {
  0%, 100% {
    transform: translate3d(0,8px,0) rotate(-8deg) scale(.82);
    opacity: .10;
  }
  45% {
    transform: translate3d(8px,-13px,0) rotate(8deg) scale(1.12);
    opacity: .36;
  }
  72% {
    transform: translate3d(-5px,-20px,0) rotate(-3deg) scale(.96);
    opacity: .22;
  }
}

.reel-overlay .skip-animation-option {
  min-width: 0 !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
}
.reel-overlay .skip-animation-option::after {
  content: none !important;
}
.reel-overlay .skip-animation-option:hover,
.reel-overlay .skip-animation-option.is-checked {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.reel-skip-button,
.reel-skip-button:hover,
.reel-skip-button:focus-visible,
.reel-skip-button:active {
  min-width: 0 !important;
  margin-top: 15px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--gold-soft) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .24em !important;
  text-indent: .24em !important;
  background: transparent !important;
  box-shadow: none !important;
}
.reel-skip-button:hover {
  color: #fff2bd !important;
  text-shadow: 0 0 12px rgba(240,217,144,.68);
  transform: translateY(-1px) !important;
}

.reel-flow-button {
  min-width: 190px !important;
  color: var(--action-text) !important;
  border-color: color-mix(in srgb, var(--action-bg) 72%, white 20%) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--action-bg) 76%, white 24%), var(--action-bg)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--action-bg) 35%, white 65%),
    inset 0 -4px 0 color-mix(in srgb, var(--action-bg) 72%, black 28%),
    0 6px 0 color-mix(in srgb, var(--action-bg) 58%, black 42%),
    0 12px 24px color-mix(in srgb, var(--action-bg) 28%, transparent) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
.reel-flow-button:hover:not(:disabled) {
  color: var(--action-text) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--action-bg) 64%, white 36%), color-mix(in srgb, var(--action-bg) 92%, white 8%)) !important;
}

@media (max-height: 700px) {
  .reel-overlay { padding: 8px !important; }
  .reel-overlay .reel-scene {
    transform: scale(.92);
    transform-origin: center;
  }
}

.reel-overlay .reel-scene {
  isolation: isolate;
}
.reel-scene .reel-pattern-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1 !important;
  contain: paint;
}
.reel-scene .reel-pattern-texture {
  position: absolute;
  inset: -10%;
  opacity: .56 !important;
  background-image:
    linear-gradient(30deg, transparent 46.8%, color-mix(in srgb, var(--box-glow) 28%, rgba(255,255,255,.18)) 48% 49.3%, transparent 50.4%),
    linear-gradient(-30deg, transparent 46.8%, color-mix(in srgb, var(--box-glow) 22%, rgba(255,255,255,.12)) 48% 49.3%, transparent 50.4%),
    radial-gradient(circle at center, color-mix(in srgb, var(--box-glow) 28%, rgba(255,255,255,.22)) 0 1.4px, transparent 2.2px);
  background-size: 68px 39px, 68px 39px, 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 42%, rgba(0,0,0,.92) 64%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, black 0 42%, rgba(0,0,0,.92) 64%, transparent 98%);
  filter: saturate(1.25);
  animation: reelTextureDrift 17s linear infinite;
}
.reel-scene .reel-pattern-layer > span {
  position: absolute;
  left: var(--pattern-x);
  top: var(--pattern-y);
  color: color-mix(in srgb, var(--box-glow) 62%, rgba(255,248,218,.98));
  font-size: var(--pattern-size);
  line-height: 1;
  opacity: .48;
  text-shadow:
    0 0 9px color-mix(in srgb, var(--box-glow) 44%, transparent),
    0 0 19px color-mix(in srgb, var(--box-glow) 24%, transparent);
  animation: reelSymbolDrift var(--pattern-duration) ease-in-out var(--pattern-delay) infinite;
}
.reel-scene > .reel-title,
.reel-scene > .coffer-unlock-stage,
.reel-scene > .summoning-seal,
.reel-scene > .reel-stack,
.reel-scene > .reel-skip-button,
.reel-scene > .result-grid,
.reel-scene > .continue-button {
  position: relative;
  z-index: 2;
}

.reel-overlay .skip-animation-option {
  align-items: center !important;
  gap: 9px !important;
  min-height: 24px !important;
  line-height: 24px !important;
}
.reel-overlay .skip-animation-option .skip-checkbox {
  align-self: center;
}
.reel-overlay .skip-animation-option > span:last-child {
  display: inline-flex;
  align-items: center;
  height: 24px;
  line-height: 24px;
  transform: none !important;
}

.unlock-action-buttons {
  gap: 10px !important;
}
.unlock-action-buttons .btn {
  min-width: 108px !important;
  padding: 8px 13px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}
.unlock-action-buttons .reel-flow-button {
  min-width: 164px !important;
  padding: 10px 15px !important;
  font-size: 12px !important;
}

.reel-skip-button,
.reel-skip-button:hover,
.reel-skip-button:focus-visible,
.reel-skip-button:active {
  font-size: 20px !important;
  letter-spacing: .28em !important;
  text-indent: .28em !important;
  padding: 5px 10px !important;
}

.reel-pattern-layer,
.reel-pattern-texture {
  display: none !important;
}

.reel-stack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
}
.reel-stack::before {
  content: "";
  position: absolute;
  inset: 2px 48px;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  background-image:
    linear-gradient(30deg, transparent 47.8%, color-mix(in srgb, var(--box-glow) 18%, rgba(255,255,255,.09)) 48.5% 49.1%, transparent 49.8%),
    linear-gradient(-30deg, transparent 47.8%, color-mix(in srgb, var(--box-glow) 13%, rgba(255,255,255,.06)) 48.5% 49.1%, transparent 49.8%),
    radial-gradient(circle at center, color-mix(in srgb, var(--box-glow) 18%, rgba(255,255,255,.15)) 0 1px, transparent 1.8px);
  background-size: 72px 42px, 72px 42px, 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 50%, rgba(0,0,0,.72) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 0 50%, rgba(0,0,0,.72) 72%, transparent 100%);
  animation: reelStackTextureDrift 22s linear infinite;
}
.reel-stack-symbols {
  position: absolute;
  inset: 2px 50px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 58%, rgba(0,0,0,.68) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 0 58%, rgba(0,0,0,.68) 78%, transparent 100%);
}
.reel-stack-symbols > span {
  position: absolute;
  left: var(--pattern-x);
  top: var(--pattern-y);
  color: color-mix(in srgb, var(--box-glow) 48%, rgba(255,248,218,.92));
  font-size: var(--pattern-size);
  line-height: 1;
  opacity: .22;
  text-shadow: 0 0 10px color-mix(in srgb, var(--box-glow) 30%, transparent);
  animation: reelStackSymbolDrift var(--pattern-duration) ease-in-out var(--pattern-delay) infinite;
}
.reel-stack > .reel-line {
  position: relative;
  z-index: 2;
}

@keyframes reelStackTextureDrift {
  from { background-position: -18px -10px, -18px -10px, 0 0; }
  to { background-position: 54px 32px, 54px 32px, 30px 30px; }
}
@keyframes reelStackSymbolDrift {
  0%, 100% {
    transform: translate3d(0,5px,0) rotate(-7deg) scale(.86);
    opacity: .10;
  }
  48% {
    transform: translate3d(5px,-9px,0) rotate(7deg) scale(1.08);
    opacity: .28;
  }
  74% {
    transform: translate3d(-3px,-13px,0) rotate(-2deg) scale(.96);
    opacity: .18;
  }
}

.reel-overlay.is-intro .reel-stack::before,
.reel-overlay.is-intro .reel-stack-symbols,
.reel-overlay.is-revealed .reel-stack::before,
.reel-overlay.is-revealed .reel-stack-symbols {
  display: none !important;
}

@media (max-width: 760px) {
  .reel-stack::before,
  .reel-stack-symbols { inset-inline: 34px; }
}

.reel-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(34,46,38,.88), rgba(9,14,11,.94)) !important;
}
.reel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background-image:
    linear-gradient(30deg, transparent 46.7%, color-mix(in srgb, var(--rarity-glow) 30%, rgba(255,255,255,.16)) 48% 49.1%, transparent 50.3%),
    linear-gradient(-30deg, transparent 46.7%, color-mix(in srgb, var(--rarity-glow) 23%, rgba(255,255,255,.11)) 48% 49.1%, transparent 50.3%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rarity-glow) 28%, rgba(255,255,255,.2)) 0 1.1px, transparent 1.9px);
  background-size: 42px 24px, 42px 24px, 19px 19px;
  animation: reelCardTextureTravel 10s linear infinite;
}
.reel-card-arcana {
  position: absolute;
  inset: 4px;
  z-index: 1;
  pointer-events: none;
  color: color-mix(in srgb, var(--rarity-glow) 70%, white 18%);
  text-shadow: 0 0 8px color-mix(in srgb, var(--rarity-glow) 55%, transparent);
  opacity: .58;
}
.reel-card-arcana i {
  position: absolute;
  display: block;
  font-style: normal;
  line-height: 1;
  animation: reelCardArcanaFloat 3.8s ease-in-out infinite;
}
.reel-card-arcana i:nth-child(1) {
  left: 7px;
  top: 8px;
  font-size: 9px;
  animation-delay: -.4s;
}
.reel-card-arcana i:nth-child(2) {
  right: 8px;
  top: 14px;
  font-size: 12px;
  animation-delay: -1.3s;
}
.reel-card-arcana i:nth-child(3) {
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  animation-delay: -2.2s;
}
.reel-card-arcana i:nth-child(4) {
  right: 11px;
  bottom: 8px;
  font-size: 8px;
  animation-delay: -2.9s;
}
.reel-card > img,
.reel-card > strong {
  position: relative;
  z-index: 3;
}
@keyframes reelCardTextureTravel {
  from { background-position: -20px -12px, -20px -12px, 0 0; }
  to { background-position: 64px 36px, 64px 36px, 19px 19px; }
}
@keyframes reelCardArcanaFloat {
  0%, 100% {
    transform: translate3d(0,3px,0) scale(.82) rotate(-7deg);
    opacity: .26;
  }
  48% {
    transform: translate3d(2px,-4px,0) scale(1.15) rotate(7deg);
    opacity: .86;
  }
  72% {
    transform: translate3d(-2px,-2px,0) scale(.96) rotate(1deg);
    opacity: .48;
  }
}

.reel-overlay.is-intro .reel-title {
  min-height: 30px !important;
  margin-bottom: 4px !important;
  font-size: clamp(22px, 3vw, 36px) !important;
  line-height: 1.06;
}
.reel-overlay.is-intro .reel-title-awakening {
  gap: 8px;
}
.reel-overlay.is-intro .coffer-unlock-stage {
  margin-top: -12px;
  gap: 8px;
}
.unlock-coffer-line {
  --unlock-unit-size: 365px;
  --unlock-coffer-size: 300px;
  --unlock-halo-size: 282px;
}
.unlock-coffer-line.count-2 {
  --unlock-unit-size: 300px;
  --unlock-coffer-size: 242px;
  --unlock-halo-size: 235px;
}
.unlock-coffer-line.count-3 {
  --unlock-unit-size: 250px;
  --unlock-coffer-size: 202px;
  --unlock-halo-size: 201px;
}
.unlock-coffer-line.count-4 {
  --unlock-unit-size: 212px;
  --unlock-coffer-size: 168px;
  --unlock-halo-size: 172px;
}
.unlock-coffer-line.count-5 {
  --unlock-unit-size: 185px;
  --unlock-coffer-size: 144px;
  --unlock-halo-size: 153px;
}
.unlock-coffer-unit {
  height: 400px;
}
.unlock-coffer-unit .unlock-coffer-wrap {
  height: 270px !important;
}
.unlock-coffer-unit .unlock-coffer-wrap > img {
  height: 232px !important;
}
@media (max-width: 760px) {
  .reel-overlay.is-intro .reel-title { font-size: clamp(19px, 6vw, 27px) !important; }
  .reel-overlay.is-intro .coffer-unlock-stage { margin-top: -6px; }
}

.reel-card.rarity-legendary,
.result-card.rarity-legendary,
.legendary-flame-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(255,190,62,.72) !important;
  box-shadow:
    inset 0 0 24px rgba(255,134,24,.18),
    0 0 12px rgba(255,111,18,.38),
    0 0 30px rgba(255,190,58,.24) !important;
}
.reel-card.rarity-legendary::after,
.result-card.rarity-legendary::before,
.legendary-flame-card::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 8% 104%, rgba(255,70,8,.95) 0 7%, rgba(255,166,28,.72) 10%, transparent 24%),
    radial-gradient(ellipse at 24% 106%, rgba(255,191,54,.9) 0 6%, rgba(255,82,8,.7) 11%, transparent 25%),
    radial-gradient(ellipse at 43% 106%, rgba(255,87,8,.92) 0 8%, rgba(255,202,74,.7) 12%, transparent 28%),
    radial-gradient(ellipse at 63% 106%, rgba(255,206,81,.88) 0 6%, rgba(255,76,8,.72) 12%, transparent 25%),
    radial-gradient(ellipse at 82% 104%, rgba(255,79,8,.94) 0 7%, rgba(255,181,37,.72) 11%, transparent 25%),
    radial-gradient(ellipse at 102% 55%, rgba(255,105,9,.74) 0 6%, transparent 23%),
    radial-gradient(ellipse at -2% 42%, rgba(255,174,30,.67) 0 5%, transparent 22%);
  filter: blur(4px) saturate(1.35);
  opacity: .9;
  mix-blend-mode: screen;
  animation: legendaryFlameFlicker 1.25s ease-in-out infinite alternate;
}
.reel-card.rarity-legendary::after {
  z-index: 2;
  inset: -3px;
}
.result-card.rarity-legendary::before,
.legendary-flame-card::before {
  z-index: 0;
}
.result-card.rarity-legendary > *,
.legendary-flame-card > * {
  position: relative;
  z-index: 2;
}
.legendary-flame-card {
  overflow: visible !important;
}
.reward-row.legendary-flame-card,
.history-item.legendary-flame-card,
.collection-card.legendary-flame-card {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(255,112,12,.11), transparent 50%),
    rgba(255,255,255,.025) !important;
}
.reward-row.legendary-flame-card:hover,
.history-item.legendary-flame-card:hover,
.collection-card.legendary-flame-card:hover {
  box-shadow:
    inset 0 0 28px rgba(255,134,24,.22),
    0 0 16px rgba(255,111,18,.48),
    0 0 38px rgba(255,190,58,.30) !important;
}
.result-card.rarity-legendary .result-icon-stage,
.legendary-flame-card .reward-icon-wrap,
.legendary-flame-card > img,
.legendary-flame-card .reward-icon {
  filter: drop-shadow(0 0 10px rgba(255,105,10,.75)) drop-shadow(0 0 20px rgba(255,196,55,.42));
}
@keyframes legendaryFlameFlicker {
  0% {
    transform: translateY(2px) scaleX(.98) scaleY(.94);
    opacity: .68;
    filter: blur(5px) saturate(1.25);
  }
  38% {
    transform: translateY(-2px) scaleX(1.02) scaleY(1.08);
    opacity: 1;
    filter: blur(3px) saturate(1.52);
  }
  72% {
    transform: translateY(0) scaleX(.99) scaleY(1.02);
    opacity: .82;
    filter: blur(4px) saturate(1.38);
  }
  100% {
    transform: translateY(-4px) scaleX(1.03) scaleY(1.12);
    opacity: .96;
    filter: blur(3px) saturate(1.58);
  }
}

@media (max-width: 900px) {
  .unlock-coffer-line.count-4,
  .unlock-coffer-line.count-5 {
    --unlock-unit-size: 150px;
    --unlock-coffer-size: 112px;
    --unlock-halo-size: 120px;
    --unlock-key-size: 104px;
  }
}
@media (max-width: 680px) {
  .unlock-coffer-line,
  .unlock-coffer-line.count-2,
  .unlock-coffer-line.count-3,
  .unlock-coffer-line.count-4,
  .unlock-coffer-line.count-5 {
    --unlock-unit-size: 145px;
    --unlock-coffer-size: 112px;
    --unlock-halo-size: 120px;
    --unlock-key-size: 100px;
  }
  .unlock-coffer-unit {
    height: 326px;
  }
  .unlock-coffer-unit .unlock-coffer-wrap {
    height: 210px !important;
  }
  .unlock-coffer-unit .unlock-coffer-wrap > img {
    height: 178px !important;
  }
}

.reel-card::before,
.reel-card-arcana,
.reel-stack::before,
.reel-stack-symbols {
  display: none !important;
  content: none !important;
}
.reel-window {
  isolation: isolate;
}
.reel-window-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: .92;
}
.reel-window-texture {
  position: absolute;
  inset: -18%;
  display: block;
  opacity: .48;
  background-image:
    linear-gradient(31deg, transparent 47.2%, color-mix(in srgb, var(--box-glow) 31%, rgba(255,255,255,.16)) 48.2% 49.2%, transparent 50.2%),
    linear-gradient(-31deg, transparent 47.2%, color-mix(in srgb, var(--box-glow) 22%, rgba(255,255,255,.10)) 48.2% 49.2%, transparent 50.2%),
    radial-gradient(circle at center, color-mix(in srgb, var(--box-glow) 34%, rgba(255,255,255,.20)) 0 1.2px, transparent 2px);
  background-size: 62px 36px, 62px 36px, 27px 27px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  filter: saturate(1.25);
  animation: reelWindowTextureDrift 18s linear infinite;
}
.reel-window-ambient > span {
  position: absolute;
  left: var(--ambient-x);
  top: var(--ambient-y);
  color: color-mix(in srgb, var(--box-glow) 62%, rgba(255,248,220,.96));
  font-size: var(--ambient-size);
  line-height: 1;
  opacity: .34;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--box-glow) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--box-glow) 28%, transparent);
  animation: reelWindowSymbolFloat var(--ambient-duration) ease-in-out var(--ambient-delay) infinite;
}
.reel-track {
  position: relative;
  z-index: 2;
}
.reel-window::before,
.reel-window::after {
  z-index: 4;
}
.marker,
.winning-slot-effect {
  z-index: 6;
}
@keyframes reelWindowTextureDrift {
  from { transform: translate3d(-22px,-12px,0); }
  to { transform: translate3d(52px,31px,0); }
}
@keyframes reelWindowSymbolFloat {
  0%, 100% {
    transform: translate3d(0,5px,0) rotate(-8deg) scale(.82);
    opacity: .16;
  }
  44% {
    transform: translate3d(5px,-9px,0) rotate(7deg) scale(1.16);
    opacity: .52;
  }
  72% {
    transform: translate3d(-3px,-14px,0) rotate(-2deg) scale(.96);
    opacity: .28;
  }
}

.reel-card.rarity-legendary,
.result-card.rarity-legendary,
.legendary-flame-card {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  border-color: rgba(255,190,62,.82) !important;
  box-shadow:
    inset 0 0 22px rgba(255,149,29,.14),
    0 0 10px rgba(255,112,18,.34),
    0 0 28px rgba(255,195,65,.28) !important;
}
.reel-card.rarity-legendary::before,
.result-card.rarity-legendary::before,
.legendary-flame-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -8px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-repeat: no-repeat;
  background:
    radial-gradient(circle 2px at 9% 4%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),
    radial-gradient(circle 2.1px at 28% 3%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),
    radial-gradient(circle 2.2px at 49% 3%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),
    radial-gradient(circle 2px at 71% 4%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),
    radial-gradient(circle 2.1px at 91% 4%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),

    radial-gradient(circle 2px at 97% 21%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),
    radial-gradient(circle 2.2px at 98% 49%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),
    radial-gradient(circle 2px at 97% 78%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),

    radial-gradient(circle 2.1px at 90% 97%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),
    radial-gradient(circle 2px at 68% 98%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),
    radial-gradient(circle 2.2px at 46% 98%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),
    radial-gradient(circle 2px at 24% 97%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),

    radial-gradient(circle 2.1px at 3% 79%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%),
    radial-gradient(circle 2px at 2% 51%, rgba(255,245,188,.94) 0 38%, rgba(255,214,102,.92) 40%, rgba(255,185,58,.70) 58%, transparent 74%),
    radial-gradient(circle 2.1px at 3% 22%, rgba(255,247,195,.95) 0 38%, rgba(255,220,114,.92) 40%, rgba(255,190,66,.72) 58%, transparent 74%);
  filter: blur(.25px) saturate(1.14) drop-shadow(0 0 3px rgba(255,195,71,.30));
  opacity: .88;
  transform-origin: 50% 50%;
  animation: legendaryFlameTongues 1.25s ease-in-out infinite alternate;
}
.reel-card.rarity-legendary::after,
.result-card.rarity-legendary::after,
.legendary-flame-card::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -7px;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-repeat: no-repeat;
  background:
    radial-gradient(circle 1px at 18% 5%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 52% 4%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 86% 5%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 96% 50%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 82% 96%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 48% 96%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 14% 96%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%),
    radial-gradient(circle 1px at 4% 50%, rgba(255,255,223,.98) 0 50%, rgba(255,230,142,.72) 55%, transparent 78%);
  filter: blur(.1px) drop-shadow(0 0 2px rgba(255,224,136,.34));
  opacity: .8;
  transform-origin: 50% 50%;
  animation: legendaryFlameCore 1.65s ease-in-out infinite alternate-reverse;
}
.reel-card.rarity-legendary > *,
.result-card.rarity-legendary > *,
.legendary-flame-card > * {
  position: relative;
  z-index: 3;
}
.reward-row.legendary-flame-card,
.history-item.legendary-flame-card,
.collection-card.legendary-flame-card {
  background: rgba(255,255,255,.025) !important;
}
@keyframes legendaryFlameTongues {
  0% {
    transform: translateY(.4px) scaleX(.996) scaleY(.985);
    opacity: .70;
  }
  38% {
    transform: translateY(-.4px) scaleX(1.005) scaleY(1.02);
    opacity: .92;
  }
  72% {
    transform: translateY(0) scaleX(.999) scaleY(1.00);
    opacity: .84;
  }
  100% {
    transform: translateY(-.8px) scaleX(1.006) scaleY(1.035);
    opacity: .96;
  }
}
@keyframes legendaryFlameCore {
  0% {
    transform: translateY(0) scaleY(.97);
    opacity: .62;
  }
  100% {
    transform: translateY(-.5px) scaleY(1.03);
    opacity: .90;
  }
}

.collection-grid {
  grid-auto-rows: 118px;
  align-items: stretch;
}
.collection-card {
  box-sizing: border-box;
  width: 100%;
  height: 118px;
  min-height: 118px;
  max-height: 118px;
  align-content: center;
}
.collection-card > div {
  min-width: 0;
}
.collection-card strong,
.collection-card p {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-card.legendary-flame-card.is-claimed {
  border-color: rgba(255,190,62,.82) !important;
  box-shadow:
    inset 0 0 22px rgba(255,149,29,.10),
    0 0 8px rgba(255,112,18,.24),
    0 0 22px rgba(255,195,65,.20) !important;
}
.collection-card.legendary-flame-card.is-claimed::before,
.collection-card.legendary-flame-card.is-claimed::after {
  content: none !important;
  display: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  opacity: 0 !important;
}

@media (max-width: 680px) {
  .collection-grid {
    grid-auto-rows: 116px;
  }
  .collection-card {
    height: 116px;
    min-height: 116px;
    max-height: 116px;
  }
}

.collection-card > .collection-profile-badge {
  position: absolute !important;
  top: 9px !important;
  left: 9px !important;
  right: auto !important;
  z-index: 8 !important;
}
.collection-card > .collection-claimed-badge {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  left: auto !important;
  z-index: 9 !important;
}

.collection-card > img {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  position: relative;
  z-index: 3;
}
.collection-card > div {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  position: relative;
  z-index: 3;
}
.collection-card > .collection-count {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  position: relative;
  z-index: 3;
}

.collection-card {
  padding-top: 31px;
  padding-bottom: 9px;
  align-content: stretch;
}
.collection-card > div strong,
.collection-card > div p {
  line-height: 1.25;
}

.reel-card.rarity-epic,
.result-card.rarity-epic,
.epic-glow-card {
  position: relative;
  border-color: rgba(199, 131, 255, .58) !important;
  box-shadow:
    inset 0 0 10px rgba(177, 91, 255, .05),
    0 0 4px rgba(186, 101, 255, .16),
    0 0 10px rgba(154, 70, 238, .10) !important;
  animation: epicOutlineBreathe 3.8s ease-in-out infinite;
}
.reward-row.epic-glow-card,
.history-item.epic-glow-card,
.collection-card.epic-glow-card {
  background: rgba(255,255,255,.025) !important;
}
.collection-card.epic-glow-card.is-claimed {
  border-color: rgba(199, 131, 255, .46) !important;
  box-shadow:
    inset 0 0 8px rgba(177, 91, 255, .04),
    0 0 3px rgba(186, 101, 255, .12),
    0 0 8px rgba(154, 70, 238, .08) !important;
}
@keyframes epicOutlineBreathe {
  0%, 100% {
    border-color: rgba(193, 121, 255, .52);
    box-shadow:
      inset 0 0 9px rgba(177, 91, 255, .04),
      0 0 4px rgba(186, 101, 255, .14),
      0 0 9px rgba(154, 70, 238, .08);
  }
  50% {
    border-color: rgba(219, 171, 255, .72);
    box-shadow:
      inset 0 0 12px rgba(188, 111, 255, .07),
      0 0 6px rgba(201, 130, 255, .22),
      0 0 12px rgba(166, 79, 244, .12);
  }
}

.reel-card.rarity-rare,
.result-card.rarity-rare,
.rare-glow-card {
  position: relative;
  border-color: rgba(123, 214, 255, .58) !important;
  box-shadow:
    inset 0 0 10px rgba(83, 190, 255, .05),
    0 0 4px rgba(93, 201, 255, .16),
    0 0 10px rgba(64, 162, 231, .10) !important;
  animation: rareOutlineBreathe 3.8s ease-in-out infinite;
}
.reward-row.rare-glow-card,
.history-item.rare-glow-card,
.collection-card.rare-glow-card {
  background: rgba(255,255,255,.025) !important;
}
.collection-card.rare-glow-card.is-claimed {
  border-color: rgba(123, 214, 255, .46) !important;
  box-shadow:
    inset 0 0 8px rgba(83, 190, 255, .04),
    0 0 3px rgba(93, 201, 255, .12),
    0 0 8px rgba(64, 162, 231, .08) !important;
}
@keyframes rareOutlineBreathe {
  0%, 100% {
    border-color: rgba(105, 201, 247, .52);
    box-shadow:
      inset 0 0 9px rgba(83, 190, 255, .04),
      0 0 4px rgba(93, 201, 255, .14),
      0 0 9px rgba(64, 162, 231, .08);
  }
  50% {
    border-color: rgba(174, 232, 255, .72);
    box-shadow:
      inset 0 0 12px rgba(117, 211, 255, .07),
      0 0 6px rgba(139, 222, 255, .22),
      0 0 12px rgba(75, 177, 239, .12);
  }
}

.reel-card.rarity-uncommon,
.result-card.rarity-uncommon,
.uncommon-glow-card {
  position: relative;
  border-color: rgba(250, 250, 255, .56) !important;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.05),
    0 0 4px rgba(255,255,255,.14),
    0 0 10px rgba(230,238,255,.10) !important;
  animation: uncommonOutlineBreathe 3.8s ease-in-out infinite;
}
.reward-row.uncommon-glow-card,
.history-item.uncommon-glow-card,
.collection-card.uncommon-glow-card {
  background: rgba(255,255,255,.025) !important;
}
.collection-card.uncommon-glow-card.is-claimed {
  border-color: rgba(250, 250, 255, .44) !important;
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.03),
    0 0 3px rgba(255,255,255,.10),
    0 0 8px rgba(230,238,255,.07) !important;
}
@keyframes uncommonOutlineBreathe {
  0%, 100% {
    border-color: rgba(240, 243, 250, .50);
    box-shadow:
      inset 0 0 9px rgba(255,255,255,.03),
      0 0 4px rgba(255,255,255,.12),
      0 0 9px rgba(230,238,255,.08);
  }
  50% {
    border-color: rgba(255,255,255,.70);
    box-shadow:
      inset 0 0 12px rgba(255,255,255,.06),
      0 0 6px rgba(255,255,255,.20),
      0 0 12px rgba(240,245,255,.12);
  }
}

.reel-card.rarity-common,
.result-card.rarity-common,
.common-glow-card {
  position: relative;
  border-color: rgba(198, 205, 214, .54) !important;
  box-shadow:
    inset 0 0 10px rgba(190,199,210,.04),
    0 0 4px rgba(197,205,215,.14),
    0 0 10px rgba(156,166,179,.09) !important;
  animation: commonOutlineBreathe 3.8s ease-in-out infinite;
}
.reward-row.common-glow-card,
.history-item.common-glow-card,
.collection-card.common-glow-card {
  background: rgba(255,255,255,.025) !important;
}
.collection-card.common-glow-card.is-claimed {
  border-color: rgba(198, 205, 214, .42) !important;
  box-shadow:
    inset 0 0 8px rgba(190,199,210,.03),
    0 0 3px rgba(197,205,215,.10),
    0 0 8px rgba(156,166,179,.06) !important;
}
@keyframes commonOutlineBreathe {
  0%, 100% {
    border-color: rgba(177, 185, 196, .46);
    box-shadow:
      inset 0 0 9px rgba(190,199,210,.03),
      0 0 4px rgba(197,205,215,.11),
      0 0 9px rgba(156,166,179,.07);
  }
  50% {
    border-color: rgba(222, 227, 234, .64);
    box-shadow:
      inset 0 0 12px rgba(210,218,228,.05),
      0 0 6px rgba(218,225,234,.18),
      0 0 12px rgba(177,187,200,.10);
  }
}

.peek-inside-grid .reward-row {
  position: relative;
  padding-top: 22px;
}
.peek-inside-grid .reward-row.epic-glow-card,
.peek-inside-grid .reward-row.rare-glow-card,
.peek-inside-grid .reward-row.uncommon-glow-card,
.peek-inside-grid .reward-row.common-glow-card {
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  animation: none !important;
}
.peek-inside-grid .reward-row.epic-glow-card::before,
.peek-inside-grid .reward-row.epic-glow-card::after,
.peek-inside-grid .reward-row.rare-glow-card::before,
.peek-inside-grid .reward-row.rare-glow-card::after,
.peek-inside-grid .reward-row.uncommon-glow-card::before,
.peek-inside-grid .reward-row.uncommon-glow-card::after,
.peek-inside-grid .reward-row.common-glow-card::before,
.peek-inside-grid .reward-row.common-glow-card::after {
  content: none !important;
  display: none !important;
}
.peek-rarity-stamp {
  position: absolute;
  top: 8px;
  right: 11px;
  z-index: 3;
  display: block;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  background-color: transparent !important;
  opacity: 1 !important;
  border: 0 !important;
  padding: 0;
  min-width: 0;
  height: auto;
  border-radius: 0;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.28)) drop-shadow(0 1px 3px rgba(0,0,0,.72));
  paint-order: stroke fill;
  mix-blend-mode: normal;
  -webkit-text-stroke: .55px rgba(24, 18, 12, .62);
}
.peek-rarity-legendary {
  background-image: linear-gradient(180deg, #fffef7 0%, #fff0b8 18%, #ffd764 48%, #ffbc2b 72%, #c67610 100%) !important;
  color: #ffd978;
  text-shadow:
    0 1px 0 rgba(255,255,255,.46),
    0 -1px 0 rgba(86,50,5,.68),
    0 0 8px rgba(255,211,112,.36),
    0 0 1px rgba(255,248,212,.70);
}
.peek-rarity-epic {
  background-image: linear-gradient(180deg, #fffaff 0%, #f2dcff 18%, #d892ff 48%, #b95eff 72%, #7428ac 100%) !important;
  color: #d9a7ff;
  text-shadow:
    0 1px 0 rgba(255,255,255,.40),
    0 -1px 0 rgba(52,18,73,.64),
    0 0 8px rgba(207,146,255,.34),
    0 0 1px rgba(246,232,255,.68);
}
.peek-rarity-rare {
  background-image: linear-gradient(180deg, #ffffff 0%, #ddf4ff 18%, #95d8ff 48%, #4db6f3 72%, #1d76b2 100%) !important;
  color: #9edfff;
  text-shadow:
    0 1px 0 rgba(255,255,255,.40),
    0 -1px 0 rgba(16,46,70,.64),
    0 0 8px rgba(137,216,255,.34),
    0 0 1px rgba(235,249,255,.66);
}

.purchase-success-actions {
  position: relative;
  z-index: 8;
  margin-top: -6px;
  animation: purchaseSuccessActionsIn .42s ease .72s both;
}
.purchase-success-actions .btn {
  min-width: 178px;
}
@keyframes purchaseSuccessActionsIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (max-width: 520px) {
  .purchase-success-actions {
    width: 100%;
    flex-direction: column;
  }
  .purchase-success-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.reel-window-ambient {
  opacity: .56 !important;
}
.reel-window-texture {
  opacity: .24 !important;
  filter: saturate(1.08) !important;
}
.reel-window-ambient > span {
  opacity: .16 !important;
  text-shadow:
    0 0 6px color-mix(in srgb, var(--box-glow) 34%, transparent),
    0 0 12px color-mix(in srgb, var(--box-glow) 16%, transparent) !important;
}
@keyframes reelWindowSymbolFloat {
  0%, 100% {
    transform: translate3d(0,3px,0) rotate(-6deg) scale(.88);
    opacity: .08;
  }
  44% {
    transform: translate3d(3px,-5px,0) rotate(5deg) scale(1.05);
    opacity: .24;
  }
  72% {
    transform: translate3d(-2px,-7px,0) rotate(-1deg) scale(.97);
    opacity: .14;
  }
}

.reel-card {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--box-glow) 18%, transparent) 0 12%, transparent 56%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--box-glow) 25%, rgba(8, 12, 9, .78)),
      color-mix(in srgb, var(--box-glow) 12%, rgba(4, 7, 5, .88))) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.reel-overlay.is-revealed .result-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10 !important;
}
.reel-overlay.is-revealed .result-card {
  visibility: visible !important;
}
.reel-overlay.is-revealed .result-card.rarity-common {
  animation:
    resultPop .58s cubic-bezier(.2,1.4,.35,1) var(--result-delay) forwards,
    commonOutlineBreathe 3.8s ease-in-out calc(var(--result-delay) + .58s) infinite !important;
}
.reel-overlay.is-revealed .result-card.rarity-uncommon {
  animation:
    resultPop .58s cubic-bezier(.2,1.4,.35,1) var(--result-delay) forwards,
    uncommonOutlineBreathe 3.8s ease-in-out calc(var(--result-delay) + .58s) infinite !important;
}
.reel-overlay.is-revealed .result-card.rarity-rare {
  animation:
    resultPop .58s cubic-bezier(.2,1.4,.35,1) var(--result-delay) forwards,
    rareOutlineBreathe 3.8s ease-in-out calc(var(--result-delay) + .58s) infinite !important;
}
.reel-overlay.is-revealed .result-card.rarity-epic {
  animation:
    resultPop .58s cubic-bezier(.2,1.4,.35,1) var(--result-delay) forwards,
    epicOutlineBreathe 3.8s ease-in-out calc(var(--result-delay) + .58s) infinite !important;
}
.reel-overlay.is-revealed .result-card.rarity-legendary,
.reel-overlay.is-revealed .result-card.rarity-none {
  animation: resultPop .58s cubic-bezier(.2,1.4,.35,1) var(--result-delay) forwards !important;
}
.reel-overlay.is-revealed .continue-button {
  position: relative;
  z-index: 11 !important;
}

.reel-overlay .reel-window,
.reel-overlay.limited-time-reel .reel-window {
  background:
    radial-gradient(
      ellipse at 50% 42%,
      color-mix(in srgb, var(--box-glow) 20%, transparent) 0%,
      transparent 58%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--box-glow) 5%, rgba(2, 5, 3, .96)) 0%,
      color-mix(in srgb, var(--box-glow) 18%, rgba(6, 10, 7, .88)) 18%,
      color-mix(in srgb, var(--box-glow) 25%, rgba(8, 12, 9, .84)) 50%,
      color-mix(in srgb, var(--box-glow) 18%, rgba(6, 10, 7, .88)) 82%,
      color-mix(in srgb, var(--box-glow) 5%, rgba(2, 5, 3, .96)) 100%
    ) !important;
  border-color: color-mix(in srgb, var(--box-glow) 34%, rgba(255,255,255,.12)) !important;
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--box-glow) 12%, transparent),
    inset 0 -18px 30px rgba(0,0,0,.18),
    0 0 22px color-mix(in srgb, var(--box-glow) 9%, transparent) !important;
}
.reel-overlay .reel-window::before,
.reel-overlay.limited-time-reel .reel-window::before {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--box-glow) 5%, rgba(2, 5, 3, .98)),
    transparent
  ) !important;
}
.reel-overlay .reel-window::after,
.reel-overlay.limited-time-reel .reel-window::after {
  background: linear-gradient(
    -90deg,
    color-mix(in srgb, var(--box-glow) 5%, rgba(2, 5, 3, .98)),
    transparent
  ) !important;
}

.reel-stack {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 14px 16px 16px;
  border-radius: 24px;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--box-glow) 18%, rgba(255,235,185,.16)) 0%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 14%, rgba(0,0,0,.05) 48%, rgba(255,255,255,.015) 84%, rgba(255,255,255,.04) 100%),
    linear-gradient(135deg, rgba(4,8,6,.86), rgba(8,13,10,.76) 22%, rgba(6,9,7,.72) 78%, rgba(4,8,6,.86));
  border: 1px solid color-mix(in srgb, var(--box-glow) 18%, rgba(244,217,152,.24));
  box-shadow:
    0 0 0 1px rgba(255,245,214,.035) inset,
    0 18px 34px rgba(0,0,0,.22),
    0 0 28px color-mix(in srgb, var(--box-glow) 10%, transparent);
}
.reel-stack::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 7px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  border: 1px solid color-mix(in srgb, var(--box-glow) 24%, rgba(255,240,200,.18));
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--box-glow) 24%, rgba(255,236,188,.20)) 18%, transparent 36%) top center / 58% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--box-glow) 24%, rgba(255,236,188,.20)) 18%, transparent 36%) bottom center / 58% 1px no-repeat,
    radial-gradient(circle at 50% 12px, color-mix(in srgb, var(--gold-soft) 78%, white 22%) 0 2px, transparent 3px),
    radial-gradient(circle at 50% calc(100% - 12px), color-mix(in srgb, var(--gold-soft) 78%, white 22%) 0 2px, transparent 3px),
    radial-gradient(circle at 17px 17px, color-mix(in srgb, var(--box-glow) 20%, rgba(255,244,214,.16)) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 17px) 17px, color-mix(in srgb, var(--box-glow) 20%, rgba(255,244,214,.16)) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 17px calc(100% - 17px), color-mix(in srgb, var(--box-glow) 20%, rgba(255,244,214,.16)) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 17px) calc(100% - 17px), color-mix(in srgb, var(--box-glow) 20%, rgba(255,244,214,.16)) 0 1.2px, transparent 2.2px),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 18%, rgba(0,0,0,.08) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 22px rgba(255,255,255,.02);
}
.reel-stack > .reel-line {
  position: relative;
  z-index: 2;
}
.reel-window {
  border-radius: 16px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.16),
    inset 0 0 34px color-mix(in srgb, var(--box-glow) 12%, transparent),
    0 0 0 1px rgba(255,255,255,.02),
    0 0 22px color-mix(in srgb, var(--box-glow) 9%, transparent) !important;
}
.reel-window-ambient {
  overflow: hidden;
  border-radius: inherit;
}
.reel-window-ambient::before,
.reel-window-ambient::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  height: 14px;
  z-index: 1;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold-soft) 60%, white 40%) 0 1.4px, transparent 2px),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--box-glow) 18%, rgba(255,236,188,.24)) 16%, color-mix(in srgb, var(--gold-soft) 34%, rgba(255,236,188,.34)) 50%, color-mix(in srgb, var(--box-glow) 18%, rgba(255,236,188,.24)) 84%, transparent 100%);
  background-size: 100% 100%, 100% 1px;
  background-repeat: no-repeat;
}
.reel-window-ambient::before {
  top: 5px;
  background-position: center 5px, center 10px;
}
.reel-window-ambient::after {
  bottom: 5px;
  background-position: center 9px, center 4px;
}
.reel-window::before,
.reel-window::after {
  width: 15%;
}
@media (max-width: 760px) {
  .reel-stack {
    padding: 10px 11px 12px;
    border-radius: 18px;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  }
  .reel-stack::before {
    inset: 5px;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }
  .reel-window {
    border-radius: 12px;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }
  .reel-window-ambient::before,
  .reel-window-ambient::after {
    left: 18px;
    right: 18px;
  }
}

.reel-stack {
  margin-inline: 42px;
  padding: 18px 22px 20px;
  clip-path: none !important;
  border-radius: 22px;
}
.reel-frame-architecture {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.reel-frame-wing {
  position: absolute;
  top: 50%;
  width: 68px;
  height: 76%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--box-glow) 56%, #f0d99b);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.30));
}
.reel-frame-wing::before,
.reel-frame-wing::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 50%, 28% 4%, 72% 15%, 100% 0, 82% 50%, 100% 100%, 72% 85%, 28% 96%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%, rgba(0,0,0,.16) 74%, rgba(255,255,255,.04)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--box-glow) 18%, rgba(20,26,22,.96)),
      color-mix(in srgb, var(--box-glow) 8%, rgba(5,9,7,.98)) 56%,
      rgba(3,6,4,.98));
  border: 1px solid color-mix(in srgb, var(--box-glow) 28%, rgba(238,211,145,.30));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--box-glow) 9%, transparent);
}
.reel-frame-wing::after {
  inset: 8px 10px;
  opacity: .7;
  clip-path: polygon(0 50%, 34% 10%, 68% 20%, 100% 7%, 80% 50%, 100% 93%, 68% 80%, 34% 90%);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--box-glow) 18%, rgba(255,236,190,.14)), transparent),
    rgba(255,255,255,.015);
}
.reel-frame-wing-left {
  left: -54px;
}
.reel-frame-wing-right {
  right: -54px;
  transform: translateY(-50%) scaleX(-1);
}
.reel-frame-wing i {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--box-glow) 46%, #f4d98e);
  background: color-mix(in srgb, var(--box-glow) 14%, rgba(6,10,7,.92));
  box-shadow: 0 0 12px color-mix(in srgb, var(--box-glow) 20%, transparent), inset 0 0 8px rgba(255,255,255,.04);
}
.reel-frame-wing b {
  position: absolute;
  z-index: 3;
  font-size: 9px;
  text-shadow: 0 0 8px currentColor;
}
.reel-frame-wing-right b {
  transform: scaleX(-1);
}
.reel-frame-crown {
  position: absolute;
  left: 50%;
  width: min(330px, 34vw);
  height: 38px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: color-mix(in srgb, var(--box-glow) 58%, #f5dda4);
}
.reel-frame-crown::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 100%, 13% 46%, 32% 62%, 42% 20%, 50% 0, 58% 20%, 68% 62%, 87% 46%, 100% 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 48%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--box-glow) 20%, rgba(255,237,196,.13)), transparent),
    color-mix(in srgb, var(--box-glow) 8%, rgba(5,9,7,.96));
  border-bottom: 1px solid color-mix(in srgb, var(--box-glow) 28%, rgba(238,211,145,.28));
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.22));
}
.reel-frame-crown-top {
  top: -29px;
}
.reel-frame-crown-bottom {
  bottom: -29px;
  transform: translateX(-50%) scaleY(-1);
}
.reel-frame-crown i,
.reel-frame-crown b {
  position: relative;
  z-index: 2;
}
.reel-frame-crown i {
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .44;
}
.reel-frame-crown b {
  font-size: 13px;
  text-shadow: 0 0 12px currentColor;
}
.reel-frame-crown-bottom b,
.reel-frame-crown-bottom i {
  transform: scaleY(-1);
}
.reel-stack::before {
  inset: 8px 10px !important;
  clip-path: polygon(18px 0, calc(50% - 58px) 0, calc(50% - 45px) 8px, calc(50% + 45px) 8px, calc(50% + 58px) 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, calc(50% + 58px) 100%, calc(50% + 45px) calc(100% - 8px), calc(50% - 45px) calc(100% - 8px), calc(50% - 58px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px) !important;
}

.reel-overlay.is-revealed .result-card,
.reel-overlay.is-revealed .result-card.rarity-common,
.reel-overlay.is-revealed .result-card.rarity-uncommon,
.reel-overlay.is-revealed .result-card.rarity-rare,
.reel-overlay.is-revealed .result-card.rarity-epic,
.reel-overlay.is-revealed .result-card.rarity-legendary,
.reel-overlay.is-revealed .result-card.rarity-none {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.reel-overlay.is-revealed .result-card.rarity-common,
.reel-overlay.is-revealed .result-card.rarity-uncommon,
.reel-overlay.is-revealed .result-card.rarity-rare,
.reel-overlay.is-revealed .result-card.rarity-epic,
.reel-overlay.is-revealed .result-card.rarity-legendary,
.reel-overlay.is-revealed .result-card.rarity-none {
  animation: resultPop .58s cubic-bezier(.2,1.4,.35,1) var(--result-delay) forwards !important;
}
@media (max-width: 760px) {
  .reel-stack {
    margin-inline: 10px;
    padding: 12px 12px 14px;
  }
  .reel-frame-wing {
    display: none;
  }
  .reel-frame-crown {
    width: min(250px, 62vw);
    height: 28px;
  }
  .reel-frame-crown-top { top: -20px; }
  .reel-frame-crown-bottom { bottom: -20px; }
}

.reel-skip-button,
.reel-skip-button:hover,
.reel-skip-button:focus-visible,
.reel-skip-button:active {
  margin-top: 27px !important;
}

.content,
.view-page {
  contain: layout style;
  backface-visibility: hidden;
}
.page-is-transitioning .content {
  will-change: opacity, transform, filter;
  transform: translate3d(0, 7px, 0);
}

.modal-backdrop,
.help-backdrop,
.purchase-overlay,
.reel-overlay {
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, backdrop-filter;
}
.modal,
.help-modal,
.purchase-dialog,
.purchase-card,
.reel-scene {
  contain: layout style;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.collection-card,
.history-item,
.reward-row,
.box-card {
  contain: layout style;
}

.hero-stars,
.hero-character,
.reel-atmosphere,
.reel-window-ambient,
.reel-window-texture,
.limited-reel-sanctum,
.grand-win-celebration,
.purchase-success-effects {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.prize-gallery,
.history-panel {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.result-card .result-rarity-stamp {
  top: 18px;
  left: calc(50% + 42px);
  right: auto;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .12em;
  text-indent: .12em;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.32)) drop-shadow(0 2px 4px rgba(0,0,0,.74));
}
@media (max-width: 680px) {
  .result-card .result-rarity-stamp {
    top: 14px;
    left: calc(50% + 34px);
    font-size: 13px;
  }
}

.box-visual.is-sold-out .limited-time-stamp,
.box-visual.is-sold-out .limited-time-decor,
.box-visual.is-sold-out .vip-coffer-seal,
.box-visual.is-sold-out .vip-only-stamp,
.box-visual.is-sold-out .sale-stock-seal {
  opacity: .28 !important;
  filter: grayscale(.92) saturate(.18) brightness(.66) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  animation-play-state: paused !important;
}
.box-visual.is-sold-out .limited-time-decor *,
.box-visual.is-sold-out .limited-time-stamp * {
  animation-play-state: paused !important;
}
.box-visual.is-sold-out > .sold-out-stamp:not(.vip-only-stamp) {
  opacity: 1 !important;
  filter: none !important;
}

.collection-card[role="button"] {
  cursor: pointer;
}
.collection-card[role="button"]:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--gold-soft) 72%, white 28%);
  outline-offset: 3px;
}
.collection-card.is-claimed[role="button"]:hover {
  transform: translateY(-2px);
}

.collection-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 46px 22px 28px;
  overflow: auto;
  background: rgba(4, 8, 5, .48);
  -webkit-backdrop-filter: blur(18px) saturate(.82);
  backdrop-filter: blur(18px) saturate(.82);
  animation: fadeIn .2s ease;
}
.collection-detail-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 4;
  width: 38px;
  height: 38px;
  font-size: 26px;
  background: rgba(11, 18, 13, .36) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.28) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.collection-detail-content {
  position: relative;
  width: min(620px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 24px 28px;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: collectionDetailRise .34s cubic-bezier(.2,1,.35,1) both;
}
.collection-detail-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
  margin-bottom: 14px;
}
.collection-detail-profile-badge,
.collection-detail-claimed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
}
.collection-detail-profile-badge {
  border: 1px solid rgba(214,180,95,.42);
  color: #f0d990;
  background: linear-gradient(135deg, rgba(34,49,35,.72), rgba(20,31,23,.64));
}
.collection-detail-claimed-badge {
  border: 1px solid rgba(157,255,183,.85);
  background: rgba(72,255,125,.9);
  color: #092512;
  box-shadow: 0 0 12px rgba(79,255,132,.48), 0 0 28px rgba(79,255,132,.22);
}
.collection-detail-image-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 230px;
  height: 230px;
  margin: 4px auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.04), rgba(10,16,12,.18) 56%, transparent 72%) !important;
  box-shadow: none !important;
}
.collection-detail-image-stage > img {
  position: relative;
  z-index: 3;
  width: 168px;
  height: 168px;
  object-fit: contain;
  border: 0;
  border-radius: 20px;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.52));
}
.collection-detail-image-stage.epic-glow-card,
.collection-detail-image-stage.rare-glow-card,
.collection-detail-image-stage.uncommon-glow-card,
.collection-detail-image-stage.common-glow-card {
  border-radius: 50%;
}
.collection-detail-rarity-stamp {
  top: 5px;
  right: 12px;
  font-size: 13px;
  z-index: 8;
}
.collection-detail-content h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  text-shadow: 0 4px 18px rgba(0,0,0,.52);
}
.collection-detail-description {
  max-width: 520px;
  margin: 13px auto 18px;
  color: rgba(247,245,237,.82);
  font-size: 14px;
  line-height: 1.62;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.collection-detail-facts {
  width: min(500px, 100%);
  display: grid;
  gap: 9px;
  margin-top: 2px;
}
.collection-detail-facts p {
  display: grid;
  grid-template-columns: minmax(90px, .68fr) minmax(0, 1.32fr);
  gap: 16px;
  align-items: baseline;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
}
.collection-detail-facts span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.collection-detail-facts strong {
  color: rgba(247,245,237,.94);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  text-shadow: 0 2px 10px rgba(0,0,0,.58);
}
@keyframes collectionDetailRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@media (max-width: 620px) {
  .collection-detail-overlay { padding: 58px 15px 24px; }
  .collection-detail-content { padding-inline: 8px; }
  .collection-detail-image-stage {
    width: 190px;
    height: 190px;
  }
  .collection-detail-image-stage > img {
    width: 138px;
    height: 138px;
  }
  .collection-detail-facts p {
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
  }
  .collection-detail-facts strong { text-align: center; }
}

.reel-overlay.is-revealed {
  overflow: hidden !important;
  padding: 10px 12px 86px !important;
}
.reel-overlay.is-revealed .reel-scene {
  position: relative !important;
  display: block !important;
  width: min(1180px, 96vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 104px) !important;
  padding: 8px 0 4px !important;
  overflow: visible !important;
  transform: none !important;
}
.reel-overlay.is-revealed .reel-title {
  margin: 0 auto 4px !important;
  line-height: 1.04;
}
.reel-overlay.is-revealed .result-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 6px auto 0 !important;
  padding: 4px 12px 8px !important;
  overflow: visible !important;
  box-sizing: border-box;
  align-items: start;
  align-content: start;
}
.reel-overlay.is-revealed .continue-button {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 16px !important;
  translate: -50% 0 !important;
  margin: 0 !important;
  z-index: 120 !important;
}

.reel-overlay.is-revealed .result-grid.count-3,
.reel-overlay.is-revealed .result-grid.count-4,
.reel-overlay.is-revealed .result-grid.count-5 {
  gap: 8px !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-card,
.reel-overlay.is-revealed .result-grid.count-4 .result-card,
.reel-overlay.is-revealed .result-grid.count-5 .result-card {
  min-width: 0;
  padding: 5px 5px 2px !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage,
.reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage,
.reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage {
  width: clamp(122px, 17vh, 158px) !important;
  height: clamp(122px, 17vh, 158px) !important;
  margin-bottom: 2px !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage > img,
.reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage > img,
.reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage > img {
  width: clamp(74px, 10vh, 92px) !important;
  height: clamp(74px, 10vh, 92px) !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage .result-flare,
.reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage .result-flare,
.reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage .result-flare {
  width: clamp(112px, 15vh, 142px) !important;
  height: clamp(112px, 15vh, 142px) !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage .result-orbit,
.reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage .result-orbit,
.reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage .result-orbit {
  width: clamp(108px, 14.5vh, 136px) !important;
  height: clamp(108px, 14.5vh, 136px) !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-kicker,
.reel-overlay.is-revealed .result-grid.count-4 .result-kicker,
.reel-overlay.is-revealed .result-grid.count-5 .result-kicker {
  font-size: 10px !important;
}
.reel-overlay.is-revealed .result-grid.count-3 h3,
.reel-overlay.is-revealed .result-grid.count-4 h3,
.reel-overlay.is-revealed .result-grid.count-5 h3 {
  margin: 2px 0 2px !important;
  font-size: clamp(16px, 1.6vw, 22px) !important;
  line-height: 1.08 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-card > p:not(.price),
.reel-overlay.is-revealed .result-grid.count-4 .result-card > p:not(.price),
.reel-overlay.is-revealed .result-grid.count-5 .result-card > p:not(.price) {
  display: -webkit-box;
  max-width: 205px !important;
  margin: 2px auto !important;
  overflow: hidden;
  font-size: 10.5px !important;
  line-height: 1.24 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.reel-overlay.is-revealed .result-grid.count-3 .price,
.reel-overlay.is-revealed .result-grid.count-4 .price,
.reel-overlay.is-revealed .result-grid.count-5 .price {
  margin: 3px auto 0 !important;
  font-size: 13px !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-4 .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-5 .result-rarity-stamp {
  top: 10px !important;
  left: calc(50% + 34px) !important;
  font-size: 12px !important;
}

@media (max-height: 760px) {
  .reel-overlay.is-revealed {
    padding-top: 6px !important;
    padding-bottom: 76px !important;
  }
  .reel-overlay.is-revealed .reel-title {
    font-size: clamp(23px, 4.4vh, 34px) !important;
  }
  .reel-overlay.is-revealed .result-grid {
    margin-top: 2px !important;
    padding-top: 0 !important;
  }
  .reel-overlay.is-revealed .result-grid.count-2 .result-icon-stage,
  .reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage,
  .reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage,
  .reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage {
    width: 120px !important;
    height: 120px !important;
  }
  .reel-overlay.is-revealed .result-grid.count-2 .result-icon-stage > img,
  .reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage > img,
  .reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage > img,
  .reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage > img {
    width: 72px !important;
    height: 72px !important;
  }
  .reel-overlay.is-revealed .result-grid.count-2 .result-icon-stage .result-flare,
  .reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage .result-flare,
  .reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage .result-flare,
  .reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage .result-flare,
  .reel-overlay.is-revealed .result-grid.count-2 .result-icon-stage .result-orbit,
  .reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage .result-orbit,
  .reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage .result-orbit,
  .reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage .result-orbit {
    width: 108px !important;
    height: 108px !important;
  }
  .reel-overlay.is-revealed .continue-button {
    bottom: 10px !important;
  }
}

@media (max-width: 760px) {
  .reel-overlay.is-revealed {
    padding-inline: 6px !important;
  }
  .reel-overlay.is-revealed .reel-scene {
    width: 100% !important;
  }
  .reel-overlay.is-revealed .result-grid.count-3,
  .reel-overlay.is-revealed .result-grid.count-4,
  .reel-overlay.is-revealed .result-grid.count-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .reel-overlay.is-revealed .result-grid.count-3 .result-card,
  .reel-overlay.is-revealed .result-grid.count-4 .result-card,
  .reel-overlay.is-revealed .result-grid.count-5 .result-card {
    display: block !important;
    text-align: center !important;
  }
  .reel-overlay.is-revealed .result-grid.count-3 .result-card > p:not(.price),
  .reel-overlay.is-revealed .result-grid.count-4 .result-card > p:not(.price),
  .reel-overlay.is-revealed .result-grid.count-5 .result-card > p:not(.price) {
    -webkit-line-clamp: 1;
  }
}

.reel-overlay.is-revealed {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  place-items: start center !important;
  padding: 12px 12px 30px !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.reel-overlay.is-revealed .reel-scene {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: min(1180px, 96vw) !important;
  min-height: calc(100dvh - 42px) !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 0 20px !important;
  overflow: visible !important;
  transform: none !important;
}
.reel-overlay.is-revealed .result-grid {
  flex: 0 0 auto;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 8px !important;
}
.reel-overlay.is-revealed .continue-button {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  translate: none !important;
  transform: none !important;
  flex: 0 0 auto;
  align-self: center;
  margin: 24px auto 8px !important;
  z-index: 11 !important;
}
@media (max-height: 760px) {
  .reel-overlay.is-revealed {
    padding: 8px 8px 24px !important;
  }
  .reel-overlay.is-revealed .reel-scene {
    min-height: calc(100dvh - 32px) !important;
    padding-bottom: 12px !important;
  }
  .reel-overlay.is-revealed .continue-button {
    margin-top: 20px !important;
    margin-bottom: 6px !important;
  }
}
@media (max-width: 760px) {
  .reel-overlay.is-revealed {
    padding-inline: 6px !important;
  }
  .reel-overlay.is-revealed .reel-scene {
    width: 100% !important;
  }
}
.reel-overlay.is-revealed {
  touch-action: pan-y !important;
}

.reel-overlay.is-revealed .continue-button {
  display: block !important;
  width: fit-content !important;
  min-width: 190px !important;
  align-self: center !important;
  justify-self: center !important;
  place-self: center !important;
  margin: 24px auto 8px !important;
  margin-inline: auto !important;
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: none !important;
}

.app-shell.reel-is-active > .sparkles *,
.app-shell.reel-is-active > .topbar *,
.app-shell.reel-is-active > .ticker-wrap *,
.app-shell.reel-is-active > .main-layout *:not(.reel-overlay):not(.reel-overlay *) ,
.app-shell.reel-is-active > .site-footer * {
  animation-play-state: paused !important;
}
.app-shell.reel-is-active > .topbar,
.app-shell.reel-is-active > .ticker-wrap,
.app-shell.reel-is-active > .main-layout,
.app-shell.reel-is-active > .site-footer {
  contain: layout style paint;
}

.reel-scene.multi .reel-line,
.reel-scene.multi .reel-window {
  contain: layout paint style;
}
.reel-scene.multi .reel-window-ambient {
  contain: strict;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.reel-scene.multi .reel-window-texture,
.reel-scene.multi .reel-track {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.reel-scene.multi .reel-card {
  contain: layout style;
  backface-visibility: hidden;
}
.reel-overlay.is-revealed .result-card,
.reel-overlay.is-revealed .result-icon-stage,
.reel-overlay.is-revealed .result-flare,
.reel-overlay.is-revealed .result-orbit {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.reel-overlay.is-revealed .result-card {
  contain: layout style;
  will-change: opacity, transform, filter;
}
.grand-win-celebration {
  contain: strict;
  isolation: isolate;
}

@media (max-width: 760px) {
  .reel-overlay.is-revealed .continue-button {
    margin-top: 20px !important;
    margin-bottom: 6px !important;
  }
}

.staff-player-mark {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border: 1px solid rgba(17, 24, 18, .82);
  border-radius: 10px;
  color: #000;
  background: #3C4C3D;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 0 9px rgba(60,76,61,.30);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .09em;
  text-shadow: 0 1px 0 rgba(255,255,255,.08);
  vertical-align: middle;
}
.purchase-price.is-staff-access,
.staff-purchase-highlight {
  color: #ffabb3 !important;
  text-shadow: 0 0 12px rgba(255, 128, 142, .42);
  letter-spacing: .08em;
}

.reel-overlay.is-revealed .result-action-row {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 8px calc(50% - 50vw);
  padding: 0 12px;
  box-sizing: border-box;
  z-index: 12;
}
.reel-overlay.is-revealed .result-action-row .continue-button {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 210px !important;
  margin: 24px 0 0 !important;
  translate: none !important;
  transform: none !important;
}
@media (max-width: 760px) {
  .reel-overlay.is-revealed .result-action-row {
    padding-inline: 8px;
  }
  .reel-overlay.is-revealed .result-action-row .continue-button {
    margin-top: 20px !important;
  }
}

.reel-overlay.is-revealed .result-action-row {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  translate: none !important;
}
.reel-overlay.is-revealed .result-action-row .continue-button {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  justify-self: center !important;
  align-self: center !important;
  width: auto !important;
  min-width: 210px !important;
  margin: 24px auto 8px !important;
  transform: none !important;
  translate: none !important;
}

.reel-overlay.is-revealed .reel-scene {
  padding-bottom: 118px !important;
}
.reel-overlay.is-revealed > .result-action-viewport {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 20px !important;
  width: 100vw !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  transform: none !important;
  translate: none !important;
  z-index: 240 !important;
  pointer-events: none;
}
.reel-overlay.is-revealed > .result-action-viewport > .continue-button {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 210px !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .reel-overlay.is-revealed .reel-scene {
    padding-bottom: 106px !important;
  }
  .reel-overlay.is-revealed > .result-action-viewport {
    bottom: 14px !important;
    padding-inline: 10px !important;
  }
}

.reel-overlay.is-revealed .reel-scene {
  padding-bottom: 22px !important;
}
.reel-overlay.is-revealed > .result-action-viewport {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: start !important;
  width: calc(100% - 24px) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  translate: none !important;
  transform: translate3d(var(--result-marker-shift-x, 0px), 0, 0) !important;
  z-index: 240 !important;
  pointer-events: none;
  will-change: transform;
}
.reel-overlay.is-revealed > .result-action-viewport > .continue-button {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 210px !important;
  margin: 18px 0 0 !important;
  translate: none !important;
  transform: none !important;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .reel-overlay.is-revealed > .result-action-viewport {
    width: calc(100% - 12px) !important;
    margin-bottom: 14px !important;
  }
  .reel-overlay.is-revealed > .result-action-viewport > .continue-button {
    margin-top: 14px !important;
  }
}

.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 0 22px !important;
  box-sizing: border-box !important;
  transform: none !important;
  translate: none !important;
  z-index: 240 !important;
  pointer-events: none;
}
.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .continue-button {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: auto !important;
  justify-self: auto !important;
  width: auto !important;
  min-width: 210px !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto;
}

.reel-overlay.is-revealed > .result-action-viewport,
.reel-overlay.is-revealed .result-action-row {
  display: none !important;
}
@media (max-width: 760px) {
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
    padding: 14px 0 16px !important;
  }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .continue-button {
    min-width: 190px !important;
  }
}

.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
  transform: translate3d(var(--return-marker-shift, 0px), 0, 0) !important;
  will-change: transform;
}

.fortune-path-card {
  margin: 10px 0 2px;
  padding: 9px 10px 8px;
  border: 1px solid color-mix(in srgb, var(--box-glow) 28%, rgba(255,255,255,.08));
  border-radius: 10px;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--box-glow) 13%, transparent), transparent 58%),
    rgba(4,8,6,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.fortune-path-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.fortune-path-card-head strong {
  color: rgba(255,255,255,.88);
  font-size: 10px;
}
.fortune-path-track {
  position: relative;
  height: 5px;
  margin: 7px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
}
.fortune-path-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--box-glow) 72%, white 8%),
    color-mix(in srgb, var(--box-glow) 42%, var(--gold-soft) 58%));
  box-shadow: 0 0 9px color-mix(in srgb, var(--box-glow) 46%, transparent);
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.fortune-path-card p {
  margin: 0;
  color: rgba(233,237,228,.66);
  font-size: 10px;
  line-height: 1.35;
}
.fortune-path-card.is-complete { opacity: .68; }
.fortune-discount-badge {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(244,211,116,.42);
  border-radius: 999px;
  color: #ffe69b;
  background: rgba(118,83,13,.24);
  font-size: 9px;
  font-weight: 950;
}

.purchase-action-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 8px;
  min-width: 0;
}
.purchase-action-pair .btn {
  min-width: 0 !important;
  width: 100%;
  padding-inline: 8px;
}
.gift-buy-button {
  border-color: color-mix(in srgb, var(--box-glow) 42%, rgba(255,255,255,.14)) !important;
  color: color-mix(in srgb, var(--box-glow) 54%, #fff2d0 46%) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    color-mix(in srgb, var(--box-glow) 11%, rgba(6,11,8,.7)) !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
}

.history-column {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
}
.history-column .history-panel {
  position: relative;
  top: auto;
  height: calc(100% - 54px);
  min-height: 0;
  max-height: none;
}
.achievements-launch-button {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(214,180,95,.28);
  border-radius: 10px;
  color: var(--gold-soft);
  background:
    radial-gradient(circle at 20% 0%, rgba(214,180,95,.13), transparent 54%),
    rgba(23,35,25,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 9px 20px rgba(0,0,0,.12);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .11em;
  cursor: pointer;
}
.achievements-launch-button b {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  letter-spacing: .04em;
}
.achievements-launch-button.is-alerting {
  animation: achievementButtonSignal 1.15s ease-in-out infinite;
}
.achievements-launch-button.is-alerting::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255,215,111,.54);
  border-radius: inherit;
  pointer-events: none;
  animation: achievementButtonRing 1.15s ease-out infinite;
}
@keyframes achievementButtonSignal {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 10px rgba(214,180,95,.08); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 24px rgba(255,210,98,.34); }
}
@keyframes achievementButtonRing { from { opacity:.75; transform:scale(.985); } to { opacity:0; transform:scale(1.045); } }

.achievements-overlay,
.gift-compose-overlay,
.gift-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3,5,4,.66);
  -webkit-backdrop-filter: blur(14px) saturate(.86);
  backdrop-filter: blur(14px) saturate(.86);
}
.achievements-modal {
  position: relative;
  width: min(1060px, 96vw);
  max-height: min(850px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(214,180,95,.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -10%, rgba(214,180,95,.16), transparent 42%),
    linear-gradient(155deg, rgba(18,28,20,.97), rgba(7,12,9,.97));
  box-shadow: 0 30px 85px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.045);
}
.achievements-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
}
.achievements-header {
  padding: 28px 34px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(214,180,95,.12);
}
.achievements-header h2 {
  margin: 3px 0 4px;
  font-family: Georgia,serif;
  font-size: clamp(28px,4vw,44px);
  color: #f2d78e;
}
.achievements-header > p:last-child {
  margin: 0;
  color: var(--muted);
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
}
.achievement-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 13px;
  min-height: 114px;
  padding: 14px 14px 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.achievement-card.is-unlocked {
  border-color: rgba(239,205,111,.32);
  background: radial-gradient(circle at 10% 10%, rgba(239,205,111,.11), transparent 56%), rgba(255,255,255,.03);
  box-shadow: inset 0 0 20px rgba(239,205,111,.025), 0 0 15px rgba(239,205,111,.06);
}
.achievement-card.is-locked {
  filter: saturate(.55);
  opacity: .72;
}
.achievement-icon-stage {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,180,95,.16), transparent 68%);
}
.achievement-icon-stage img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.38));
}
.achievement-copy {
  min-width: 0;
  padding-right: 70px;
  align-self: center;
}
.achievement-copy h3 {
  margin: 0 0 4px;
  color: #f0d990;
  font-family: Georgia,serif;
  font-size: 18px;
}
.achievement-copy p {
  margin: 0 0 9px;
  color: rgba(229,235,225,.68);
  font-size: 11px;
  line-height: 1.42;
}
.achievement-copy small {
  color: rgba(255,255,255,.54);
  font-size: 9px;
}
.achievement-progress {
  height: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
}
.achievement-progress i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b98d3a,#f0d990);
  box-shadow:0 0 9px rgba(240,217,144,.28);
}
.achievement-state {
  position:absolute;
  top:12px;
  right:12px;
  color:rgba(255,255,255,.38);
  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
}
.achievement-card.is-unlocked .achievement-state { color:#f0d990; }

.milestone-notification-stack {
  position: fixed;
  top: 92px;
  right: 22px;
  z-index: 1750;
  width: min(390px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.milestone-notification {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 13px;
  min-height: 98px;
  padding: 12px 15px 12px 12px;
  border: 1px solid rgba(240,217,144,.38);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 10%, rgba(240,217,144,.16), transparent 58%),
    rgba(11,18,13,.95);
  box-shadow: 0 22px 48px rgba(0,0,0,.42), 0 0 28px rgba(214,180,95,.12);
  animation: milestoneNoticeIn .55s cubic-bezier(.2,1.15,.28,1) both;
}
.milestone-image {
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,217,144,.18),transparent 68%);
}
.milestone-image img {
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.36));
}
.milestone-notification span {
  color:#f0d990;
  font-size:8px;
  font-weight:950;
  letter-spacing:.15em;
}
.milestone-notification h3 {
  margin:3px 0 4px;
  color:#fff0bf;
  font-family:Georgia,serif;
  font-size:19px;
}
.milestone-notification p {
  margin:0;
  color:rgba(235,238,230,.68);
  font-size:11px;
  line-height:1.35;
}
.progress-award-notice { border-color: color-mix(in srgb, var(--gold-soft) 52%, #8dc6ff 18%); }
@keyframes milestoneNoticeIn { from { opacity:0; transform:translate3d(26px,-8px,0) scale(.96); } to { opacity:1; transform:none; } }

.gift-compose-dialog {
  --box-glow:#d6b45f;
  position: relative;
  width: min(520px, 94vw);
  max-height: 92vh;
  overflow: auto;
  padding: 24px 27px 26px;
  border: 1px solid color-mix(in srgb, var(--box-glow) 40%, rgba(255,255,255,.14));
  border-radius: 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--box-glow) 17%, transparent), transparent 48%),
    linear-gradient(160deg, rgba(19,29,21,.98), rgba(6,10,7,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 34px color-mix(in srgb,var(--box-glow) 12%,transparent);
}
.gift-compose-close,.gift-detail-close {
  position:absolute;
  top:10px;
  right:12px;
  z-index:8;
}
.gift-compose-visual {
  position:relative;
  height:170px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
}
.gift-compose-visual img {
  position:relative;
  z-index:2;
  width:185px;
  height:155px;
  object-fit:contain;
  filter:drop-shadow(0 18px 23px rgba(0,0,0,.46));
}
.gift-compose-glow {
  position:absolute;
  width:220px;
  height:145px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--box-glow) 45%,transparent),transparent 69%);
  filter:blur(15px);
}
.gift-ribbon {
  position:absolute;
  top:20px;
  right:44px;
  z-index:4;
  transform:rotate(8deg);
  color:#ffd9df;
  border:1px solid rgba(255,170,185,.52);
  background:rgba(124,35,51,.58);
  padding:4px 8px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.16em;
  box-shadow:0 0 14px rgba(255,129,151,.18);
}
.gift-compose-dialog h3 {
  margin:4px 0 14px;
  font-family:Georgia,serif;
  color:#f2d78e;
  font-size:27px;
}
.gift-compose-copy { color:var(--muted); }
.gift-compose-fields {
  display:grid;
  gap:10px;
  text-align:left;
}
.gift-recipient-picker {
  position:relative;
  z-index:20;
}
.gift-recipient-trigger {
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 12px;
  align-items:center;
  padding:9px 12px;
  border:1px solid rgba(214,180,95,.22);
  border-radius:10px;
  text-align:left;
  color:var(--text);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}
.gift-recipient-trigger span {
  grid-column:1;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.gift-recipient-trigger strong {
  grid-column:1;
  font-size:13px;
}
.gift-recipient-trigger b {
  grid-column:2;
  grid-row:1/3;
  color:var(--gold-soft);
  font-size:18px;
}
.gift-recipient-menu {
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);
  max-height:210px;
  overflow:auto;
  padding:5px;
  border:1px solid rgba(214,180,95,.22);
  border-radius:10px;
  background:rgba(7,12,8,.985);
  box-shadow:0 18px 35px rgba(0,0,0,.48);
}
.gift-recipient-menu button {
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:7px;
  text-align:left;
  color:rgba(241,244,236,.86);
  background:transparent;
  cursor:pointer;
}
.gift-recipient-menu button:hover {
  background:rgba(214,180,95,.12);
  color:#fff2c4;
}
.gift-summary-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  background:rgba(255,255,255,.022);
}
.gift-summary-line span,.gift-message-field>span {
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.gift-summary-line strong { color:#f0d990; }
.gift-message-field {
  position:relative;
  display:grid;
  gap:6px;
}
.gift-message-field textarea {
  min-height:86px;
  resize:vertical;
  padding:10px 11px 22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  color:var(--text);
  background:rgba(255,255,255,.025);
}
.gift-message-field small {
  position:absolute;
  right:9px;
  bottom:7px;
  color:rgba(255,255,255,.36);
  font-size:9px;
}
.gift-limit-note {
  margin:0;
  color:#e7c873;
  font-size:10px;
  text-align:center;
}
.gift-compose-actions,.gift-detail-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}

.gift-detail-content {
  position:relative;
  width:min(560px,94vw);
  text-align:center;
  color:var(--text);
}
.gift-detail-image-stage {
  position:relative;
  height:220px;
  display:grid;
  place-items:center;
}
.gift-detail-image-stage img {
  position:relative;
  z-index:2;
  width:235px;
  height:200px;
  object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.48));
}
.gift-detail-image-stage>span {
  position:absolute;
  right:calc(50% - 105px);
  top:34px;
  z-index:4;
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(240,217,144,.4);
  border-radius:50%;
  color:#fff0bd;
  background:rgba(35,45,36,.88);
  font-weight:950;
}
.gift-detail-glow {
  position:absolute;
  width:300px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,180,95,.28),transparent 70%);
  filter:blur(20px);
}
.gift-detail-content h2 {
  margin:0 0 7px;
  color:#f3dc9d;
  font-family:Georgia,serif;
  font-size:34px;
  text-shadow:0 0 18px rgba(214,180,95,.22);
}
.gift-detail-sender { color:rgba(236,239,231,.68); }
.gift-detail-content blockquote {
  max-width:480px;
  margin:16px auto 0;
  padding:12px 18px;
  color:#fff0c5;
  font-family:Georgia,serif;
  font-size:18px;
  line-height:1.45;
  text-shadow:0 3px 10px rgba(0,0,0,.55);
}
.gift-notification-stack {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1500;
  width:min(410px,calc(100vw - 24px));
  display:grid;
  gap:9px;
}
.gift-notification {
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:76px;
  padding:9px 10px;
  border:1px solid rgba(255,172,190,.28);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(38,22,27,.96),rgba(11,17,13,.96));
  box-shadow:0 16px 38px rgba(0,0,0,.42),0 0 20px rgba(255,126,151,.08);
  animation:giftNoticeIn .46s cubic-bezier(.2,1.15,.28,1) both;
}
.gift-notification>img {
  width:56px;
  height:56px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.38));
}
.gift-notification div {
  min-width:0;
  display:grid;
}
.gift-notification span {
  color:#ffb6c4;
  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
}
.gift-notification strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff0c9;
  font-size:13px;
}
.gift-notification small {
  color:rgba(255,255,255,.52);
  font-size:10px;
}
.gift-notification .btn {
  padding:8px 12px;
  font-size:10px;
}
@keyframes giftNoticeIn { from { opacity:0; transform:translateX(24px) scale(.97); } to { opacity:1; transform:none; } }

.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
  width: min(1180px, 96vw) !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
}

@media (max-width: 980px) {
  .history-column { height:auto !important; }
  .history-column .history-panel { height:auto; }
  .achievements-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .purchase-action-pair { grid-template-columns:1fr; }
  .achievements-overlay,.gift-compose-overlay,.gift-detail-overlay { padding:10px; }
  .achievements-modal { max-height:95vh; }
  .achievements-header { padding:22px 20px 15px; }
  .achievements-grid { padding:10px; }
  .achievement-card {
    grid-template-columns:58px minmax(0,1fr);
    min-height:105px;
    padding:11px;
  }
  .achievement-icon-stage {
    width:56px;
    height:56px;
  }
  .achievement-icon-stage img {
    width:45px;
    height:45px;
  }
  .achievement-copy { padding-right:0; }
  .achievement-state { display:none; }
  .gift-notification-stack {
    right:8px;
    bottom:8px;
  }
  .gift-notification { grid-template-columns:48px minmax(0,1fr) auto; }
  .gift-notification>img {
    width:46px;
    height:46px;
  }
  .milestone-notification-stack {
    top:72px;
    right:8px;
  }
}

.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  column-gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 0 22px !important;
  transform: none !important;
  translate: none !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
  pointer-events: none;
  z-index: 240 !important;
}
.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .result-action-side {
  display: block !important;
  width: 38px !important;
  min-width: 38px !important;
}
.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .result-action-window-center {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  transform: none !important;
  translate: none !important;
}
.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis .continue-button {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 210px !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    padding: 14px 0 18px !important;
  }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .result-action-side {
    display: none !important;
  }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .result-action-window-center {
    grid-column: 1 !important;
  }
}

.gift-summary-line small {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: -3px;
  color: #dfb7ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}
.gift-summary-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}
.gift-summary-line strong { justify-self: end; }

.purchase-action-pair {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
}
.purchase-action-pair > .btn,
.purchase-action-pair > .btn.primary,
.purchase-action-pair > .box-buy-button,
.purchase-action-pair > .gift-buy-button {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  grid-column: auto !important;
  margin: 0 !important;
  padding: 10px 7px !important;
  font-size: clamp(8px, .72vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.purchase-action-pair > .gift-buy-button {
  --gift-action-bg: color-mix(in srgb, var(--action-bg) 72%, white 28%);
  color: var(--action-text) !important;
  border-color: color-mix(in srgb, var(--gift-action-bg) 76%, white 18%) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--gift-action-bg) 72%, white 28%), var(--gift-action-bg)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gift-action-bg) 30%, white 70%),
    inset 0 -4px 0 color-mix(in srgb, var(--gift-action-bg) 72%, black 28%),
    0 6px 0 color-mix(in srgb, var(--gift-action-bg) 58%, black 42%),
    0 12px 24px color-mix(in srgb, var(--gift-action-bg) 28%, transparent) !important;
}
.purchase-action-pair > .gift-buy-button:hover:not(:disabled) {
  color: var(--action-text) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.20) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--gift-action-bg) 58%, white 42%), color-mix(in srgb, var(--gift-action-bg) 90%, white 10%)) !important;
}
@media (max-width: 700px) {
  .purchase-action-pair > .btn,
  .purchase-action-pair > .btn.primary,
  .purchase-action-pair > .box-buy-button,
  .purchase-action-pair > .gift-buy-button {
    min-height: 42px !important;
    padding-inline: 5px !important;
    font-size: clamp(7px, 2.35vw, 10px) !important;
    letter-spacing: .025em !important;
  }
}

.achievements-modal {
  width: min(1120px, 96vw);
  max-height: min(880px, 93vh);
}
.achievements-header {
  flex: 0 0 auto;
  padding: 21px 32px 15px;
}
.achievements-header h2 {
  font-size: clamp(27px, 3.4vw, 39px);
}
.achievements-sections-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 18px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 194, 103, .88) rgba(8, 14, 10, .64);
}
.achievements-sections-scroll::-webkit-scrollbar {
  width: 11px;
}
.achievements-sections-scroll::-webkit-scrollbar-track {
  margin: 10px 0;
  border: 1px solid rgba(214, 180, 95, .09);
  border-radius: 999px;
  background: rgba(4, 8, 6, .68);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .38);
}
.achievements-sections-scroll::-webkit-scrollbar-thumb {
  min-height: 52px;
  border: 2px solid rgba(4, 8, 6, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 239, 182, .94), rgba(196, 145, 52, .94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 0 9px rgba(229, 194, 103, .18);
}
.achievements-sections-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fff0ba, #dda944);
}
.achievement-section {
  margin-bottom: 14px;
  padding: 0 10px 11px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--section-accent, #d6b45f) 8%, transparent), transparent 34%),
    rgba(255,255,255,.014);
}
.achievement-section:last-child { margin-bottom: 0; }
.achievement-section-coffer { --section-accent: #d6b45f; }
.achievement-section-rarity { --section-accent: #84bfff; }
.achievement-section-wealth { --section-accent: #f0c65f; }
.achievement-section-collection { --section-accent: #9ed7ae; }
.achievement-section-community { --section-accent: #ff9eb4; }
.achievement-section-special { --section-accent: #b99bff; }
.achievement-section-fortune { --section-accent: #e1b2ff; }
.achievement-section-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 3px 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 18%, transparent);
}
.achievement-section-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--section-accent) 34%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--section-accent) 82%, white 18%);
  background: color-mix(in srgb, var(--section-accent) 9%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent) 10%, transparent);
}
.achievement-section-header h3 {
  margin: 0;
  color: color-mix(in srgb, var(--section-accent) 74%, #fff2c5 26%);
  font-family: Georgia, serif;
  font-size: 17px;
}
.achievement-section-header p {
  margin: 1px 0 0;
  color: rgba(232,237,228,.48);
  font-size: 9px;
  letter-spacing: .035em;
}
.achievement-section-header > strong {
  min-width: 48px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 22%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--section-accent) 78%, white 22%);
  background: rgba(0,0,0,.18);
  text-align: center;
  font-size: 10px;
}
.achievement-section .achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px 0 0;
  overflow: visible;
}
.achievement-section .achievement-card {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  min-height: 88px;
  padding: 9px 10px;
  border-radius: 10px;
}
.achievement-section .achievement-icon-stage {
  width: 52px;
  height: 52px;
}
.achievement-section .achievement-icon-stage img {
  width: 42px;
  height: 42px;
}
.achievement-section .achievement-copy {
  padding-right: 58px;
}
.achievement-section .achievement-copy h3 {
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.15;
}
.achievement-section .achievement-copy p {
  display: -webkit-box;
  margin-bottom: 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
  line-height: 1.25;
}
.achievement-section .achievement-copy small { font-size: 8px; }
.achievement-section .achievement-progress {
  height: 4px;
  margin-bottom: 4px;
}
.achievement-section .achievement-state {
  top: 9px;
  right: 9px;
  font-size: 7px;
}

.gift-quantity-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px;
  background: rgba(255,255,255,.022);
}
.gift-quantity-field > span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.gift-quantity-field > small {
  grid-column: 1 / -1;
  justify-self: end;
  color: rgba(255,255,255,.38);
  font-size: 8px;
}
.gift-quantity-control {
  justify-self: end;
  display: grid;
  grid-template-columns: 34px 82px 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--box-glow) 30%, rgba(255,255,255,.08));
  border-radius: 8px;
  background: rgba(0,0,0,.22);
}
.gift-quantity-control button,
.gift-quantity-control input {
  min-width: 0;
  border: 0;
  color: #fff0c3;
  background: transparent;
  text-align: center;
  font-weight: 900;
}
.gift-quantity-control button {
  cursor: pointer;
  font-size: 17px;
}
.gift-quantity-control button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--box-glow) 15%, transparent);
}
.gift-quantity-control button:disabled {
  opacity: .28;
  cursor: default;
}
.gift-quantity-control input {
  width: 100%;
  border-inline: 1px solid rgba(255,255,255,.06);
  outline: 0;
  font-size: 13px;
  -moz-appearance: textfield;
}
.gift-quantity-control input::-webkit-inner-spin-button,
.gift-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.gift-message-field textarea:focus {
  border-color: color-mix(in srgb, var(--box-glow) 40%, rgba(255,255,255,.12));
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--box-glow) 10%, transparent);
}

.gift-notification-stack {
  width: min(470px, calc(100vw - 24px));
  gap: 11px;
}
.gift-notification {
  grid-template-columns: 74px minmax(0,1fr) auto;
  gap: 13px;
  min-height: 98px;
  padding: 11px 13px;
  border-radius: 15px;
}
.gift-notification > img {
  width: 70px;
  height: 70px;
}
.gift-notification span { font-size: 9px; }
.gift-notification strong { font-size: 15px; }
.gift-notification small { font-size: 11px; }
.gift-notification .btn {
  padding: 10px 15px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .achievement-section .achievements-grid { grid-template-columns: 1fr; }
  .achievements-sections-scroll { padding: 9px 8px 12px; }
  .achievement-section { padding-inline: 8px; }
  .gift-quantity-control { grid-template-columns: 32px 70px 32px; }
  .gift-notification-stack { width: min(440px, calc(100vw - 16px)); }
  .gift-notification {
    grid-template-columns: 58px minmax(0,1fr) auto;
    min-height: 84px;
    padding: 9px 10px;
  }
  .gift-notification > img {
    width: 56px;
    height: 56px;
  }
}

.achievements-modal {
  width: min(1280px, 97vw);
  height: min(900px, 93dvh);
  max-height: 93dvh;
  contain: layout paint style;
  transform: translateZ(0);
}
.achievements-sections-scroll {
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.achievement-section {
  contain: layout paint style;
}
.achievement-section .achievements-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}
.achievement-section .achievement-card {
  min-width: 0;
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.achievement-section .achievement-icon-stage img {
  content-visibility: auto;
}

@media (max-width: 980px) {
  .achievements-modal {
    width: 98vw;
  }
  .achievement-section .achievement-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 7px;
    min-height: 82px;
    padding: 8px;
  }
  .achievement-section .achievement-icon-stage {
    width: 44px;
    height: 44px;
  }
  .achievement-section .achievement-icon-stage img {
    width: 36px;
    height: 36px;
  }
  .achievement-section .achievement-copy {
    padding-right: 44px;
  }
  .achievement-section .achievement-copy h3 {
    font-size: 13px;
  }
  .achievement-section .achievement-copy p {
    font-size: 9px;
  }
}

@media (max-width: 680px) {
  .achievement-section .achievements-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px;
  }
  .achievement-section .achievement-card {
    display: block;
    min-height: 112px;
    padding: 7px 6px;
    text-align: center;
  }
  .achievement-section .achievement-icon-stage {
    width: 38px;
    height: 38px;
    margin: 0 auto 4px;
  }
  .achievement-section .achievement-icon-stage img {
    width: 31px;
    height: 31px;
  }
  .achievement-section .achievement-copy {
    padding-right: 0;
  }
  .achievement-section .achievement-copy h3 {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .achievement-section .achievement-copy p {
    -webkit-line-clamp: 2;
    font-size: 7px;
    line-height: 1.15;
  }
  .achievement-section .achievement-copy small {
    font-size: 6px;
  }
  .achievement-section .achievement-state {
    display: none;
  }
}

.fortune-path-inventory {
  width: min(560px, 100%);
  margin: 3px auto 2px;
  padding: 11px 13px 10px;
  border-color: color-mix(in srgb, var(--box-glow) 38%, rgba(255,255,255,.10));
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--box-glow) 18%, transparent), transparent 62%),
    rgba(4,8,6,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 18px color-mix(in srgb, var(--box-glow) 7%, transparent);
}
.fortune-path-inventory .fortune-path-track { height: 7px; }
.fortune-path-inventory .fortune-path-card-head { font-size: 10px; }
.fortune-path-inventory .fortune-path-card-head strong { font-size: 11px; }
.fortune-path-inventory p { font-size: 11px; }

.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 0 22px !important;
  box-sizing: border-box !important;
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: translate3d(var(--return-marker-shift, 0px), 0, 0) !important;
  will-change: transform;
  z-index: 240 !important;
  pointer-events: none;
}
.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .continue-button {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 210px !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .fortune-path-inventory { width: 100%; }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
    padding: 14px 0 16px !important;
  }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .continue-button {
    min-width: 190px !important;
  }
}

.carousel-coffer.selected.has-fortune-path {
  min-height: 338px;
  padding-top: 82px;
}
.carousel-fortune-path {
  position: absolute;
  top: 54px;
  left: 50%;
  z-index: 14;
  display: flex;
  flex-direction: column;
  width: 184px;
  max-width: calc(100% - 18px);
  transform: translateX(-50%);
  pointer-events: none;
  color: rgba(248,242,219,.88);
  text-align: left;
  text-shadow: 0 2px 5px rgba(2,6,3,.9);
}
.carousel-fortune-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: color-mix(in srgb, var(--box-glow) 48%, var(--gold-soft) 52%);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
}
.carousel-fortune-heading > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.carousel-fortune-heading strong {
  flex: 0 0 auto;
  color: rgba(255,255,255,.96);
  font-size: 8px;
  letter-spacing: .035em;
}
.carousel-fortune-track {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  margin: 5px 0 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--box-glow) 28%, rgba(255,255,255,.08));
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.58),
    0 0 8px color-mix(in srgb, var(--box-glow) 8%, transparent);
}
.carousel-fortune-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--box-glow) 76%, white 8%),
    color-mix(in srgb, var(--box-glow) 44%, var(--gold-soft) 56%));
  box-shadow:
    0 0 9px color-mix(in srgb, var(--box-glow) 48%, transparent),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.carousel-fortune-prize {
  display: block;
  width: 100%;
  overflow: hidden;
  color: rgba(244,238,218,.88);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .015em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carousel-fortune-path.is-complete {
  opacity: .68;
}

.carousel-coffer.selected.has-fortune-path > img {
  margin-top: 6px;
}
.carousel-coffer.selected.has-fortune-path .carousel-selected-aura {
  inset: 82px 14px 22px;
}

.carousel-coffer.selected.has-fortune-path .limited-time-inventory {
  top: 12px;
}
.carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
  top: 18px !important;
}
.vault-carousel.has-fortune-path {
  min-height: 420px;
}
.vault-carousel.has-fortune-path .carousel-viewport {
  min-height: 380px;
}
@media (max-width: 680px) {
  .carousel-coffer.selected.has-fortune-path {
    min-height: 322px;
    padding-top: 78px;
  }
  .carousel-fortune-path {
    top: 49px;
    width: 172px;
  }
  .carousel-fortune-heading { font-size: 6.5px; }
  .carousel-fortune-heading strong,
  .carousel-fortune-prize { font-size: 7.5px; }
  .vault-carousel.has-fortune-path {
    min-height: 395px;
  }
  .vault-carousel.has-fortune-path .carousel-viewport {
    min-height: 355px;
  }
}

.carousel-coffer.selected.has-fortune-path {
  min-height: 255px !important;
  padding: 96px 12px 10px !important;
}
.carousel-fortune-path {
  top: 61px !important;
  width: 184px !important;
  max-width: calc(100% - 18px) !important;
}
.carousel-coffer.selected.has-fortune-path > img {
  width: 140px !important;
  height: 140px !important;
  margin: 0 auto !important;
}
.carousel-coffer.selected.has-fortune-path .carousel-selected-aura {
  inset: 91px 12px 5px !important;
}
.carousel-coffer.selected.has-fortune-path .carousel-orbit {
  top: 68% !important;
}

.carousel-coffer.selected.has-fortune-path .limited-time-inventory {
  top: 14px !important;
  left: 8px !important;
}
.carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
  top: 20px !important;
  right: 14px !important;
}

.vault-carousel.has-fortune-path {
  min-height: 335px !important;
}
.vault-carousel.has-fortune-path .carousel-viewport {
  min-height: 300px !important;
}

.open-stage .skip-to-roulette-option {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  margin: -2px auto 18px !important;
  transform: none !important;
  translate: none !important;
}
.open-stage .skip-to-roulette-option:hover {
  transform: translateY(-1px) !important;
}
@media (max-width: 680px) {
  .carousel-coffer.selected.has-fortune-path {
    min-height: 255px !important;
    padding: 92px 12px 10px !important;
  }
  .carousel-fortune-path {
    top: 57px !important;
    width: 176px !important;
  }
  .carousel-coffer.selected.has-fortune-path > img {
    width: 138px !important;
    height: 138px !important;
  }
  .carousel-coffer.selected.has-fortune-path .carousel-selected-aura {
    inset: 87px 10px 5px !important;
  }
  .carousel-coffer.selected.has-fortune-path .limited-time-inventory {
    top: 22px !important;
    left: 5px !important;
  }
  .carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
    top: 20px !important;
    right: 8px !important;
  }
  .vault-carousel.has-fortune-path {
    min-height: 335px !important;
  }
  .vault-carousel.has-fortune-path .carousel-viewport {
    min-height: 300px !important;
  }
  .open-stage .skip-to-roulette-option {
    margin: 0 auto 16px !important;
  }
}

.selected-coffer-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.selected-coffer-label-row .eyebrow {
  margin: 0;
}
.inventory-coffer-seals {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.inventory-coffer-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.2);
}
.inventory-coffer-seal.is-limited {
  color: #fff0b3;
  border-color: rgba(255,211,93,.5);
  background: linear-gradient(135deg, rgba(142,83,11,.92), rgba(201,137,32,.9));
  text-shadow: 0 1px 2px rgba(47,24,0,.9);
}
.inventory-coffer-seal.is-vip {
  color: #fff3b5;
  border-color: rgba(240,217,144,.48);
  background: linear-gradient(135deg, rgba(91,64,16,.94), rgba(160,117,31,.92));
}
.inventory-coffer-seal.is-sold-out {
  color: #ffd8d8;
  border-color: rgba(255,121,121,.46);
  background: linear-gradient(135deg, rgba(105,29,29,.94), rgba(157,54,54,.92));
}

.carousel-quantity-badge,
.carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
  top: auto !important;
  right: 16px !important;
  bottom: 18px !important;
  z-index: 9 !important;
  font-size: 18px !important;
}

.carousel-coffer.selected.has-fortune-path {
  min-height: 255px !important;
  padding: 70px 12px 10px !important;
}
.carousel-fortune-path {
  top: 16px !important;
  width: 184px !important;
  max-width: calc(100% - 18px) !important;
}
.carousel-fortune-heading strong {
  font-size: 7.5px !important;
  letter-spacing: .045em !important;
}
.carousel-coffer.selected.has-fortune-path > img {
  width: 145px !important;
  height: 145px !important;
  margin: 0 auto !important;
}
.carousel-coffer.selected.has-fortune-path .carousel-selected-aura {
  inset: 64px 10px 5px !important;
}
.carousel-coffer.selected.has-fortune-path .carousel-orbit {
  top: 63% !important;
}

.carousel-coffer .limited-time-inventory {
  display: none !important;
}

.reward-icon,
.history-item > img.reward-icon,
.reward-row img,
.reward-icon-wrap > img,
.collection-card > img,
.reel-card > img,
.result-icon-stage > img,
.collection-detail-image-stage > img,
.peek-inside-grid .reward-row img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
.reward-icon-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  .carousel-coffer.selected.has-fortune-path {
    min-height: 255px !important;
    padding: 68px 12px 10px !important;
  }
  .carousel-fortune-path {
    top: 14px !important;
    width: 176px !important;
  }
  .carousel-coffer.selected.has-fortune-path > img {
    width: 142px !important;
    height: 142px !important;
  }
  .carousel-coffer.selected.has-fortune-path .carousel-selected-aura {
    inset: 62px 8px 5px !important;
  }
  .carousel-quantity-badge,
  .carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
    right: 11px !important;
    bottom: 17px !important;
    font-size: 16px !important;
  }
  .selected-coffer-label-row {
    justify-content: center;
  }
  .inventory-coffer-seals {
    justify-content: center;
  }
}
.carousel-quantity-badge,
.carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
  position: absolute !important;
  display: inline-flex !important;
  margin: 0 !important;
  transform: none !important;
}

.inventory-coffer-seal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.inventory-coffer-seal.is-limited {
  color: #fff1bd;
  border-color: rgba(255, 190, 69, .72);
  border-radius: 5px 9px 5px 9px;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.10) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, rgba(122, 56, 5, .98), rgba(220, 132, 25, .96));
  box-shadow:
    inset 0 1px 0 rgba(255,244,197,.30),
    0 0 10px rgba(255, 151, 30, .20),
    0 4px 12px rgba(0,0,0,.22);
  text-shadow: 0 1px 2px rgba(52, 20, 0, .96);
  animation: inventoryLimitedSealWarmth 3.8s ease-in-out infinite;
}
.inventory-coffer-seal.is-limited::before {
  content: "✦";
  margin-right: 5px;
  color: #ffe49a;
  font-size: 8px;
  filter: drop-shadow(0 0 4px rgba(255,205,83,.65));
}
.inventory-coffer-seal.is-limited::after {
  content: "";
  position: absolute;
  top: -90%;
  bottom: -90%;
  left: -38%;
  width: 24%;
  z-index: -1;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,245,205,.34), transparent);
  animation: inventoryLimitedSealSweep 5.8s ease-in-out infinite;
}
.inventory-coffer-seal.is-vip {
  color: #ffe8f1;
  border-color: rgba(255, 143, 181, .64);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(91, 24, 61, .98), rgba(169, 56, 103, .95));
  box-shadow:
    inset 0 1px 0 rgba(255,230,241,.24),
    inset 0 -2px 5px rgba(64,4,31,.30),
    0 0 12px rgba(255, 104, 166, .18),
    0 4px 12px rgba(0,0,0,.22);
  text-shadow: 0 1px 3px rgba(48, 3, 23, .94);
  animation: inventoryVipSealPulse 3.2s ease-in-out infinite;
}
.inventory-coffer-seal.is-vip::before {
  content: "◆";
  margin-right: 5px;
  color: #ffd3e3;
  font-size: 7px;
  filter: drop-shadow(0 0 5px rgba(255,132,181,.78));
}
@keyframes inventoryLimitedSealWarmth {
  0%, 100% {
    filter: brightness(.96);
    box-shadow: inset 0 1px 0 rgba(255,244,197,.30), 0 0 8px rgba(255,151,30,.16), 0 4px 12px rgba(0,0,0,.22);
  }
  50% {
    filter: brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255,244,197,.36), 0 0 15px rgba(255,151,30,.30), 0 4px 12px rgba(0,0,0,.22);
  }
}
@keyframes inventoryLimitedSealSweep {
  0%, 68% {
    left: -38%;
    opacity: 0;
  }
  73% { opacity: .72; }
  88% {
    left: 118%;
    opacity: .18;
  }
  100% {
    left: 118%;
    opacity: 0;
  }
}
@keyframes inventoryVipSealPulse {
  0%, 100% {
    transform: translateY(0);
    filter: saturate(.96) brightness(.98);
  }
  50% {
    transform: translateY(-1px);
    filter: saturate(1.12) brightness(1.08);
  }
}

.carousel-fortune-path {
  width: 194px !important;
  max-width: calc(100% - 12px) !important;
}
.carousel-fortune-heading {
  font-size: 8px !important;
  letter-spacing: .085em !important;
}
.carousel-fortune-heading strong {
  font-size: 9.5px !important;
  letter-spacing: .035em !important;
}
.carousel-fortune-track {
  height: 8px !important;
  margin: 6px 0 5px !important;
}
.carousel-fortune-prize {
  font-size: 9.5px !important;
  line-height: 1.22 !important;
}

.carousel-fortune-path.is-complete {
  display: none !important;
}

.achievements-launch-button {
  overflow: hidden;
}
.achievements-launch-button::before {
  content: "";
  position: absolute;
  top: -65%;
  bottom: -65%;
  left: -34%;
  width: 18%;
  pointer-events: none;
  transform: skewX(-20deg);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,244,204,.18), rgba(255,255,255,.28), transparent);
  animation: achievementButtonSoftSheen 8.5s ease-in-out infinite;
}
.achievements-launch-button > * {
  position: relative;
  z-index: 1;
}
@keyframes achievementButtonSoftSheen {
  0%, 72% {
    left: -34%;
    opacity: 0;
  }
  76% { opacity: .42; }
  88% {
    left: 118%;
    opacity: .16;
  }
  100% {
    left: 118%;
    opacity: 0;
  }
}

.carousel-quantity-badge,
.carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: .045em !important;
  text-shadow:
    0 2px 4px rgba(3,8,4,.92),
    0 0 12px rgba(214,180,95,.40) !important;
}

@media (max-width: 680px) {
  .carousel-fortune-path {
    width: 184px !important;
  }
  .carousel-fortune-heading {
    font-size: 7.5px !important;
  }
  .carousel-fortune-heading strong,
  .carousel-fortune-prize {
    font-size: 9px !important;
  }
  .carousel-quantity-badge,
  .carousel-coffer.selected.has-fortune-path .carousel-quantity-badge {
    font-size: 20px !important;
  }
}

.carousel-viewport {
  position: relative;
}
.carousel-viewport > .carousel-fortune-path-overlay {
  position: absolute !important;
  top: 15px !important;
  left: 50% !important;
  width: 198px !important;
  max-width: calc(100% - 104px) !important;
  margin-left: -99px !important;
  transform: none !important;
  translate: none !important;
  z-index: 24 !important;
  filter: none !important;
  opacity: 1 !important;
  backface-visibility: visible !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  contain: layout paint;
  pointer-events: none;
}
.carousel-viewport > .carousel-fortune-path-overlay,
.carousel-viewport > .carousel-fortune-path-overlay * {
  font-synthesis: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.75) !important;
}
.carousel-viewport > .carousel-fortune-path-overlay .carousel-fortune-heading {
  font-size: 8.5px !important;
  line-height: 1.05 !important;
}
.carousel-viewport > .carousel-fortune-path-overlay .carousel-fortune-heading strong {
  font-size: 10px !important;
}
.carousel-viewport > .carousel-fortune-path-overlay .carousel-fortune-prize {
  font-size: 10px !important;
  line-height: 1.18 !important;
}
.carousel-viewport > .carousel-fortune-path-overlay .carousel-fortune-track {
  height: 8px !important;
}

.vault-selection .selected-coffer-label-row {
  display: block !important;
}
.vault-selection .inventory-coffer-seals {
  display: flex !important;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  justify-content: flex-start !important;
}
.inventory-coffer-seal.is-rarity {
  border-radius: 4px;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .11em;
}

.progress-award-notice .progress-award-prize {
  display: block;
  margin-top: 6px;
  color: #ffe29a;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .025em;
  text-shadow: 0 0 10px rgba(255,199,82,.32), 0 1px 2px rgba(0,0,0,.78);
}
.history-progress-award {
  border-color: rgba(236,194,95,.26) !important;
  background:
    radial-gradient(circle at 16% 42%, rgba(223,179,74,.10), transparent 36%),
    rgba(255,255,255,.024) !important;
}
.history-progress-image {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}
.history-progress-image img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.34));
}
.history-progress-award strong {
  color: #f2d487;
}
.history-progress-prize {
  color: #ffe4a0 !important;
  font-weight: 800;
}

.coffer-rarity-seal,
.carousel-rarity-seal,
.inventory-coffer-seal.is-rarity {
  --rarity-a: #aeb4b7;
  --rarity-b: #565c60;
  --rarity-text: #f5f7f8;
  color: var(--rarity-text) !important;
  border-color: color-mix(in srgb, var(--rarity-a) 66%, rgba(255,255,255,.18)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rarity-a) 32%, rgba(20,24,22,.94)), color-mix(in srgb, var(--rarity-b) 64%, rgba(5,8,6,.96))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 12px color-mix(in srgb, var(--rarity-a) 22%, transparent),
    0 4px 12px rgba(0,0,0,.28) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 7px color-mix(in srgb, var(--rarity-a) 32%, transparent) !important;
}
.coffer-rarity-common {
  --rarity-a: #d4d7d8;
  --rarity-b: #777d80;
  --rarity-text: #ffffff;
}
.coffer-rarity-uncommon {
  --rarity-a: #f5f5f0;
  --rarity-b: #a4aaa4;
  --rarity-text: #ffffff;
}
.coffer-rarity-rare {
  --rarity-a: #78c8ff;
  --rarity-b: #236daf;
  --rarity-text: #dff4ff;
}
.coffer-rarity-epic {
  --rarity-a: #ca8cff;
  --rarity-b: #6730a4;
  --rarity-text: #f1dcff;
}
.coffer-rarity-legendary {
  --rarity-a: #ffd669;
  --rarity-b: #9f4f0a;
  --rarity-text: #fff2b7;
}

.coffer-rarity-seal {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 999px;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  white-space: nowrap;
}
.coffer-rarity-seal i {
  font-style: normal;
  font-size: 7px;
}
.box-visual.is-sold-out .coffer-rarity-seal,
.box-card.is-sold-out .legendary-coffer-crown {
  opacity: .26 !important;
  filter: grayscale(.75) brightness(.55) !important;
}

.carousel-rarity-seal {
  position: absolute;
  left: 14px;
  bottom: 18px;
  z-index: 10;
  padding: 3px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .1em;
}

.box-card.is-legendary-coffer {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.box-card.is-legendary-coffer::before {
  content: "";
  position: absolute;
  inset: -14px -10px 42%;
  z-index: -1;
  pointer-events: none;
  opacity: .72;
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0 8%, rgba(255,190,47,.22) 10%, transparent 18% 34%, rgba(187,90,255,.18) 38%, transparent 48% 68%, rgba(255,190,47,.18) 72%, transparent 84%),
    radial-gradient(circle, rgba(255,202,72,.22), rgba(130,41,166,.12) 42%, transparent 72%);
  filter: blur(12px);
  animation: legendaryCofferHaloSpin 10s linear infinite;
}
.box-card.is-legendary-coffer .box-visual {
  overflow: visible;
  clip-path: polygon(50% 0, 92% 10%, 100% 50%, 91% 90%, 50% 100%, 9% 90%, 0 50%, 8% 10%);
  border: 1px solid rgba(255,210,95,.72);
  background:
    radial-gradient(circle at 50% 43%, rgba(173,73,255,.20), transparent 48%),
    linear-gradient(145deg, rgba(76,35,103,.54), rgba(16,13,25,.92) 44%, rgba(96,48,7,.76));
  box-shadow:
    inset 0 0 0 2px rgba(255,232,153,.08),
    inset 0 0 34px rgba(222,133,35,.16),
    0 0 16px rgba(255,191,52,.30),
    0 0 42px rgba(157,72,230,.24);
}
.box-card.is-legendary-coffer .box-visual::before,
.box-card.is-legendary-coffer .box-visual::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  pointer-events: none;
  clip-path: inherit;
  border: 1px solid rgba(255,226,137,.18);
}
.box-card.is-legendary-coffer .box-visual::after {
  inset: -5px;
  border: 0;
  background:
    radial-gradient(circle at 11% 18%, #fff4ba 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 27%, #ffe482 0 1.2px, transparent 2px),
    radial-gradient(circle at 18% 78%, #cf8cff 0 1.2px, transparent 2px),
    radial-gradient(circle at 81% 82%, #fff0aa 0 1.2px, transparent 2px);
  filter: drop-shadow(0 0 5px rgba(255,210,91,.74));
  animation: legendaryCofferStars 2.8s ease-in-out infinite alternate;
}
.box-card.is-legendary-coffer .box-visual > img {
  z-index: 4;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.44)) drop-shadow(0 0 16px rgba(255,186,47,.32)) !important;
  animation: legendaryCofferFloat 3.5s ease-in-out infinite;
}
.legendary-coffer-crown {
  position: absolute;
  left: 50%;
  top: -17px;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  color: #ffe38a;
  text-shadow: 0 0 8px rgba(255,190,47,.72);
}
.legendary-coffer-crown i {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffd76b);
}
.legendary-coffer-crown i:last-child { transform: scaleX(-1); }
.legendary-coffer-crown b {
  font-size: 15px;
  animation: legendaryCrownPulse 1.8s ease-in-out infinite;
}
.box-card.is-legendary-coffer .box-body {
  position: relative;
}
.box-card.is-legendary-coffer .box-body::before {
  content: "LEGENDARY VAULT";
  display: block;
  margin: 0 auto 7px;
  color: #f7d36d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: .16em;
  text-shadow: 0 0 10px rgba(255,183,43,.38);
}
@keyframes legendaryCofferHaloSpin { to { transform: rotate(360deg); } }
@keyframes legendaryCofferStars { from { opacity: .42; transform: scale(.98); } to { opacity: .96; transform: scale(1.02); } }
@keyframes legendaryCofferFloat { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
@keyframes legendaryCrownPulse { 0%,100% { transform: scale(.9); opacity: .72; } 50% { transform: scale(1.16); opacity: 1; } }

.carousel-coffer.is-legendary-coffer.selected {
  filter: drop-shadow(0 0 12px rgba(255,194,55,.50)) drop-shadow(0 0 28px rgba(166,74,255,.28));
}
.carousel-coffer.is-legendary-coffer.selected .carousel-selected-aura {
  background:
    radial-gradient(circle, rgba(255,205,75,.30), rgba(158,64,232,.20) 38%, transparent 72%) !important;
  animation: legendaryInventoryAura 2.2s ease-in-out infinite !important;
}
.carousel-coffer.is-legendary-coffer.selected > img {
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.46)) drop-shadow(0 0 15px rgba(255,194,56,.38)) !important;
}
@keyframes legendaryInventoryAura { 0%,100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }

.vault-selection.is-legendary-coffer {
  position: relative;
  overflow: visible;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  border-color: rgba(255,208,82,.64) !important;
  background:
    radial-gradient(circle at 17% 22%, rgba(255,206,83,.15), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(182,84,255,.18), transparent 38%),
    linear-gradient(145deg, rgba(45,20,57,.96), rgba(13,15,18,.96) 48%, rgba(70,38,8,.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,235,169,.08),
    inset 0 0 35px rgba(189,92,255,.10),
    0 0 18px rgba(255,193,49,.26),
    0 18px 44px rgba(0,0,0,.34) !important;
}
.vault-selection.is-legendary-coffer::before {
  content: "✦  LEGENDARY COFFER  ✦";
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  padding: 4px 16px;
  color: #ffe08a;
  border: 1px solid rgba(255,211,91,.62);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(93,40,9,.98), rgba(67,24,86,.98));
  box-shadow: 0 0 15px rgba(255,187,45,.26);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: .13em;
  white-space: nowrap;
}
.vault-selection.is-legendary-coffer h3 {
  color: #ffe392 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 40px) !important;
  letter-spacing: .025em;
  text-shadow: 0 0 15px rgba(255,190,45,.38), 0 2px 2px rgba(0,0,0,.72);
}
.vault-selection.is-legendary-coffer .vault-action-group .btn {
  border-color: rgba(255,207,78,.62) !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, rgba(91,35,119,.96), rgba(135,73,17,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,184,.20), 0 6px 0 rgba(44,17,5,.9), 0 12px 24px rgba(0,0,0,.25) !important;
}
.vault-selection.is-legendary-coffer .open-button {
  color: #fff0b1 !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #a855da, #b96a18 58%, #6c2d83) !important;
}
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary {
  animation: legendarySealBreath 2.2s ease-in-out infinite;
}
@keyframes legendarySealBreath { 0%,100% { filter: brightness(.94); } 50% { filter: brightness(1.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px rgba(255,198,61,.36), 0 4px 12px rgba(0,0,0,.28) !important; } }

.legendary-coffer-reel {
  background:
    radial-gradient(circle at 50% 48%, rgba(141,52,195,.28), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255,181,38,.12), transparent 65%),
    rgba(5,5,9,.90) !important;
}
.legendary-coffer-sanctum {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0 12%, rgba(255,196,54,.08) 14%, transparent 20% 38%, rgba(173,70,255,.10) 42%, transparent 49% 70%, rgba(255,196,54,.07) 74%, transparent 82%),
    radial-gradient(circle at 50% 50%, rgba(172,73,240,.12), transparent 54%);
  animation: legendarySanctumTurn 22s linear infinite;
}
.legendary-coffer-sanctum i {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,207,81,.10);
  transform: rotate(45deg);
}
.legendary-coffer-sanctum i:nth-child(2) {
  inset: 24%;
  border-color: rgba(194,100,255,.12);
  animation: legendarySanctumPulse 3s ease-in-out infinite;
}
.legendary-coffer-sanctum i:nth-child(3) {
  inset: 36%;
  border-color: rgba(255,220,112,.14);
  animation: legendarySanctumPulse 3s .8s ease-in-out infinite;
}
.legendary-coffer-sanctum span {
  position: absolute;
  color: #ffe69b;
  opacity: .32;
  text-shadow: 0 0 16px rgba(255,191,45,.62);
}
.legendary-coffer-sanctum span:nth-of-type(1) {
  left: 12%;
  top: 20%;
  font-size: 28px;
}
.legendary-coffer-sanctum span:nth-of-type(2) {
  right: 14%;
  top: 42%;
  font-size: 22px;
}
.legendary-coffer-sanctum span:nth-of-type(3) {
  left: 24%;
  bottom: 14%;
  font-size: 18px;
}
.legendary-coffer-scene {
  z-index: 6 !important;
}
.legendary-coffer-scene .reel-title {
  color: #ffe59a !important;
  text-shadow: 0 0 12px rgba(255,191,47,.45), 0 0 28px rgba(175,79,247,.28) !important;
}
.legendary-coffer-reel .reel-stack {
  clip-path: polygon(4% 0, 46% 0, 50% 7%, 54% 0, 96% 0, 100% 20%, 100% 80%, 96% 100%, 54% 100%, 50% 93%, 46% 100%, 4% 100%, 0 80%, 0 20%) !important;
  border: 1px solid rgba(255,210,90,.66) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(167,73,230,.15), transparent 54%),
    linear-gradient(145deg, rgba(64,23,84,.92), rgba(8,10,13,.96) 48%, rgba(74,40,8,.92)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,235,164,.05),
    inset 0 0 38px rgba(185,86,244,.12),
    0 0 22px rgba(255,195,57,.28),
    0 0 54px rgba(153,62,226,.20) !important;
}
.legendary-coffer-reel .reel-window {
  border-radius: 0 !important;
  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) !important;
  border-color: rgba(255,219,120,.54) !important;
  background:
    radial-gradient(ellipse at center, rgba(178,74,239,.20), transparent 57%),
    linear-gradient(90deg, rgba(10,7,14,.98), rgba(58,28,77,.90) 22%, rgba(72,39,16,.86) 50%, rgba(58,28,77,.90) 78%, rgba(10,7,14,.98)) !important;
}
.legendary-coffer-reel .marker {
  width: 5px !important;
  background: linear-gradient(180deg, #fff3bd, #ffc348 44%, #b25dff 55%, #fff3bd) !important;
  box-shadow: 0 0 10px #ffe09a, 0 0 28px rgba(255,181,40,.84), 0 0 44px rgba(179,77,255,.48) !important;
}
.legendary-coffer-reel .marker::before,
.legendary-coffer-reel .marker::after {
  border-left-width: 16px !important;
  border-right-width: 16px !important;
}
@keyframes legendarySanctumTurn { to { transform: rotate(360deg); } }
@keyframes legendarySanctumPulse { 0%,100% { opacity: .28; transform: rotate(45deg) scale(.96); } 50% { opacity: .72; transform: rotate(45deg) scale(1.04); } }

@media (max-width: 680px) {
  .carousel-viewport > .carousel-fortune-path-overlay {
    width: 184px !important;
    margin-left: -92px !important;
    max-width: calc(100% - 62px) !important;
  }
  .vault-selection .inventory-coffer-seals {
    margin-inline: auto;
    justify-content: center !important;
  }
  .coffer-rarity-seal {
    font-size: 8px;
    padding: 4px 8px;
  }
  .vault-selection.is-legendary-coffer::before {
    font-size: 8px;
    padding-inline: 10px;
  }
}

.box-card.is-legendary-coffer {
  isolation: isolate;
  overflow: visible !important;
}
.box-card.is-legendary-coffer::before {
  inset: -22px -18px 36% !important;
  z-index: 1 !important;
  opacity: .68 !important;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 188, 48, .24) 0 18%, rgba(255, 224, 143, .10) 36%, transparent 70%),
    conic-gradient(from 0deg at 50% 50%, transparent 0 12%, rgba(255, 166, 31, .18) 14%, transparent 21% 38%, rgba(255, 242, 205, .13) 41%, transparent 48% 68%, rgba(255, 191, 54, .16) 72%, transparent 82%) !important;
  filter: blur(13px) !important;
  animation: legendaryAmberHalo 12s linear infinite !important;
}
.box-card.is-legendary-coffer .box-visual {
  overflow: visible !important;
  clip-path: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.box-card.is-legendary-coffer .box-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 20px 24px 17px !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  border: 1px solid rgba(255, 202, 82, .48) !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 88% 9%, 100% 42%, 94% 78%, 72% 100%, 28% 100%, 6% 78%, 0 42%, 12% 9%) !important;
  background:
    linear-gradient(135deg, rgba(255, 245, 215, .045), transparent 28% 72%, rgba(255, 157, 24, .055)),
    radial-gradient(circle at 50% 42%, rgba(255, 190, 46, .11), transparent 58%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 222, .04),
    inset 0 0 30px rgba(255, 151, 20, .055),
    0 0 13px rgba(255, 181, 36, .16) !important;
  filter: none !important;
  opacity: 1 !important;
  animation: legendaryFrameBreathe 3.8s ease-in-out infinite !important;
}
.box-card.is-legendary-coffer .box-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px 10px !important;
  width: auto !important;
  height: auto !important;
  bottom: 8px !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 13% 22%, #fff8d9 0 1px, transparent 2.1px),
    radial-gradient(circle at 88% 31%, #ffd36a 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 19% 81%, #ffab2f 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 82% 78%, #fff1c3 0 1.2px, transparent 2.3px),
    linear-gradient(90deg, transparent 6%, rgba(255, 212, 105, .22) 50%, transparent 94%) top 22px center / 68% 1px no-repeat,
    linear-gradient(90deg, transparent 6%, rgba(255, 169, 42, .18) 50%, transparent 94%) bottom 18px center / 58% 1px no-repeat !important;
  filter: drop-shadow(0 0 4px rgba(255, 183, 43, .60)) !important;
  opacity: .82 !important;
  animation: legendaryIvoryStars 2.9s ease-in-out infinite alternate !important;
}
.box-card.is-legendary-coffer .box-glow {
  width: 244px !important;
  height: 244px !important;
  z-index: 0 !important;
  background:
    conic-gradient(from 0deg, transparent 0 14%, rgba(255, 179, 38, .34) 18%, transparent 24% 44%, rgba(255, 244, 216, .24) 49%, transparent 55% 72%, rgba(255, 133, 16, .25) 77%, transparent 84%),
    radial-gradient(circle, rgba(255, 202, 76, .22), rgba(255, 143, 19, .09) 46%, transparent 70%) !important;
  filter: blur(14px) !important;
  animation: legendaryAmberHalo 10.5s linear infinite !important;
}
.box-card.is-legendary-coffer .box-visual > img {
  z-index: 5 !important;
  filter:
    drop-shadow(0 17px 19px rgba(0,0,0,.46))
    drop-shadow(0 0 13px rgba(255, 172, 31, .34))
    drop-shadow(0 0 5px rgba(255, 246, 216, .18)) !important;
  animation: legendaryCofferFloat 3.5s ease-in-out infinite !important;
}
.box-card.is-legendary-coffer .coffer-rarity-seal,
.box-card.is-legendary-coffer .legendary-coffer-crown,
.box-card.is-legendary-coffer .sale-stock-seal,
.box-card.is-legendary-coffer .limited-time-stamp,
.box-card.is-legendary-coffer .vip-coffer-seal,
.box-card.is-legendary-coffer .sold-out-stamp {
  z-index: 24 !important;
}
.box-card.is-legendary-coffer .sale-stock-seal {
  clip-path: none !important;
}
.box-card.is-legendary-coffer .box-body::before {
  color: #ffd87a !important;
  text-shadow: 0 0 10px rgba(255, 157, 25, .32) !important;
}
@keyframes legendaryAmberHalo {
  to { transform: rotate(360deg); }
}
@keyframes legendaryFrameBreathe {
  0%, 100% {
    opacity: .72;
    transform: scale(.985);
    box-shadow: inset 0 0 0 1px rgba(255,248,222,.035), inset 0 0 24px rgba(255,151,20,.045), 0 0 10px rgba(255,181,36,.12);
  }
  50% {
    opacity: 1;
    transform: scale(1.008);
    box-shadow: inset 0 0 0 1px rgba(255,248,222,.07), inset 0 0 34px rgba(255,151,20,.08), 0 0 18px rgba(255,181,36,.23);
  }
}
@keyframes legendaryIvoryStars {
  from {
    opacity: .42;
    transform: scale(.985);
  }
  to {
    opacity: .96;
    transform: scale(1.012);
  }
}

.coffer-rarity-seal.coffer-rarity-legendary,
.carousel-rarity-seal.coffer-rarity-legendary,
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary {
  --rarity-a: #ffd66f;
  --rarity-b: #a84a08;
  --rarity-text: #fff6d7;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff6d7 !important;
  border: 1px solid rgba(255, 211, 104, .72) !important;
  border-radius: 7px 11px 7px 11px !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, rgba(111, 43, 3, .98), rgba(214, 113, 18, .97) 54%, rgba(107, 42, 3, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 215, .30),
    inset 0 -3px 8px rgba(75, 22, 0, .28),
    0 0 14px rgba(255, 151, 23, .30),
    0 4px 12px rgba(0,0,0,.30) !important;
  text-shadow: 0 1px 2px rgba(72, 20, 0, .94), 0 0 7px rgba(255, 220, 131, .34) !important;
  animation: legendarySealGoldPulse 2.7s ease-in-out infinite !important;
}
.carousel-rarity-seal.coffer-rarity-legendary {
  left: 50% !important;
  right: auto !important;
  bottom: 13px !important;
  z-index: 12 !important;
  min-height: 23px;
  padding: 5px 10px !important;
  transform: translateX(-50%) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  white-space: nowrap;
}
.carousel-rarity-seal.coffer-rarity-legendary i {
  font-style: normal;
  font-size: 7px;
}
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary {
  min-height: 25px;
  padding: 5px 11px !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px !important;
  letter-spacing: .12em;
}
@keyframes legendarySealGoldPulse {
  0%, 100% { filter: brightness(.96) saturate(.96); }
  50% {
    filter: brightness(1.13) saturate(1.08);
    box-shadow: inset 0 1px 0 rgba(255,247,215,.36), inset 0 -3px 8px rgba(75,22,0,.24), 0 0 20px rgba(255,151,23,.42), 0 4px 12px rgba(0,0,0,.30);
  }
}

.carousel-coffer.is-legendary-coffer.selected {
  filter: drop-shadow(0 0 13px rgba(255, 179, 42, .52)) drop-shadow(0 0 30px rgba(255, 230, 154, .17)) !important;
}
.carousel-coffer.is-legendary-coffer.selected .carousel-selected-aura {
  background:
    conic-gradient(from 0deg, transparent, rgba(255, 170, 32, .24), transparent 28%, rgba(255, 244, 214, .18), transparent 62%, rgba(255, 191, 53, .22), transparent),
    radial-gradient(circle, rgba(255, 204, 81, .29), rgba(255, 142, 18, .11) 42%, transparent 72%) !important;
  animation: legendaryInventoryAura 2.45s ease-in-out infinite !important;
}
.carousel-coffer.is-legendary-coffer.selected > img {
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.46)) drop-shadow(0 0 16px rgba(255, 177, 35, .42)) !important;
}

.vault-selection.is-legendary-coffer {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  min-height: 154px;
  padding: 34px 38px 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(
    28px 0,
    39% 0,
    43% 10px,
    57% 10px,
    61% 0,
    calc(100% - 28px) 0,
    100% 25px,
    100% calc(100% - 25px),
    calc(100% - 28px) 100%,
    61% 100%,
    57% calc(100% - 10px),
    43% calc(100% - 10px),
    39% 100%,
    28px 100%,
    0 calc(100% - 25px),
    0 25px
  ) !important;
  grid-template-columns: minmax(300px, 1fr) minmax(170px, auto) minmax(390px, auto) !important;
  gap: 30px !important;
  background:
    radial-gradient(circle at 16% 26%, rgba(255, 215, 121, .105), transparent 34%),
    radial-gradient(circle at 84% 72%, rgba(255, 139, 16, .09), transparent 38%),
    linear-gradient(135deg, rgba(44, 28, 12, .96), rgba(11, 14, 13, .97) 46%, rgba(72, 35, 7, .94)) !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 240, 198, .55))
    drop-shadow(0 0 13px rgba(255, 176, 35, .24))
    drop-shadow(0 18px 32px rgba(0,0,0,.36));
}
.vault-selection.is-legendary-coffer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  transform: none !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 210, 93, .72) !important;
  border-radius: 0 !important;
  clip-path: inherit !important;
  background:
    linear-gradient(90deg, transparent 6%, rgba(255, 238, 190, .18) 50%, transparent 94%) top 13px center / 54% 1px no-repeat,
    linear-gradient(90deg, transparent 6%, rgba(255, 164, 26, .15) 50%, transparent 94%) bottom 13px center / 48% 1px no-repeat,
    radial-gradient(circle at 50% 15px, #fff2c5 0 2px, #f5a82c 2.5px 3.5px, transparent 4.5px),
    radial-gradient(circle at 50% calc(100% - 15px), #fff2c5 0 2px, #f5a82c 2.5px 3.5px, transparent 4.5px),
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 28% 72%, rgba(255,144,13,.035)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 220, .045),
    inset 0 0 34px rgba(255, 155, 18, .055) !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.vault-selection.is-legendary-coffer::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  z-index: -1 !important;
  pointer-events: none;
  border: 1px solid rgba(255, 226, 145, .16) !important;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 19px), 0 19px) !important;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,243,207,.65) 0 1px, transparent 2px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(255,184,52,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 12px calc(100% - 12px), rgba(255,184,52,.55) 0 1px, transparent 2px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), rgba(255,243,207,.55) 0 1px, transparent 2px) !important;
}
.vault-selection.is-legendary-coffer > div:not(.vault-selection-texture) {
  position: relative;
  z-index: 3;
  min-width: 0;
}
.vault-selection.is-legendary-coffer .vault-selection-texture {
  z-index: 0 !important;
  overflow: hidden;
  opacity: .72;
}
.vault-selection.is-legendary-coffer .vault-selection-texture::before,
.vault-selection.is-legendary-coffer .vault-selection-texture::after {
  width: 132px !important;
  height: 132px !important;
  border-color: rgba(255, 202, 79, .19) !important;
  box-shadow: 0 0 18px rgba(255, 154, 18, .08);
}
.vault-selection.is-legendary-coffer .vault-selection-texture i {
  width: 16% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 221, 137, .23), transparent) !important;
}
.vault-selection.is-legendary-coffer .vault-selection-texture span {
  color: rgba(255, 216, 119, .20) !important;
  text-shadow: 0 0 11px rgba(255, 161, 24, .18);
}
.vault-selection.is-legendary-coffer h3 {
  max-width: 100%;
  margin: 3px 0 8px !important;
  color: #fff0bd !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.5vw, 37px) !important;
  line-height: 1.08;
  letter-spacing: .018em;
  white-space: normal !important;
  text-shadow: 0 0 13px rgba(255, 169, 32, .34), 0 2px 2px rgba(0,0,0,.72) !important;
}
.vault-selection.is-legendary-coffer .selected-coffer-label-row .eyebrow {
  color: #f3bd5a !important;
  text-shadow: 0 0 9px rgba(255, 164, 25, .24);
}
.vault-selection.is-legendary-coffer .inventory-coffer-seals {
  margin-top: 4px;
  gap: 7px;
}
.vault-selection.is-legendary-coffer .open-count-picker {
  position: relative;
  min-width: 180px;
  padding: 13px 14px;
  border-block: 1px solid rgba(255, 211, 108, .16);
  background: linear-gradient(90deg, transparent, rgba(255, 182, 47, .055), transparent);
  text-align: center;
}
.vault-selection.is-legendary-coffer .open-count-picker > span {
  color: #ffd77e !important;
}
.vault-selection.is-legendary-coffer .open-count-picker button.active {
  border-color: rgba(255, 209, 96, .72) !important;
  color: #3d2308 !important;
  background: linear-gradient(145deg, #fff0ba, #ef9f26) !important;
  box-shadow: 0 0 14px rgba(255, 157, 23, .27) !important;
}
.vault-selection.is-legendary-coffer .vault-action-group {
  position: relative;
  z-index: 4;
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr);
  gap: 13px !important;
  min-width: 390px;
  align-items: stretch;
}
.vault-selection.is-legendary-coffer .vault-action-group .btn {
  position: relative;
  z-index: 2;
  min-width: 0 !important;
  width: 100%;
  min-height: 50px;
  padding: 13px 18px !important;
  border-color: rgba(255, 210, 101, .56) !important;
  color: #fff0bd !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, rgba(87, 42, 8, .98), rgba(151, 72, 10, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 207, .20),
    inset 0 -4px 0 rgba(71, 28, 2, .72),
    0 6px 0 rgba(44, 19, 3, .88),
    0 11px 20px rgba(0,0,0,.24) !important;
}
.vault-selection.is-legendary-coffer .vault-action-group .open-secondary {
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, rgba(52, 43, 27, .98), rgba(109, 65, 19, .96)) !important;
}
.vault-selection.is-legendary-coffer .vault-action-group .open-button {
  color: #422504 !important;
  border-color: rgba(255, 235, 177, .80) !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.17) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #fff0ba, #ffbd48 48%, #e77914) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -4px 0 rgba(149, 69, 4, .55),
    0 6px 0 rgba(100, 42, 2, .88),
    0 12px 24px rgba(255, 137, 14, .18) !important;
}
.vault-selection.is-legendary-coffer .vault-action-group .btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.legendary-coffer-reel {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 174, 34, .18), transparent 44%),
    radial-gradient(circle at 50% 58%, rgba(255, 238, 193, .07), transparent 67%),
    rgba(6, 6, 7, .93) !important;
}
.legendary-coffer-sanctum {
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0 12%, rgba(255, 191, 48, .08) 14%, transparent 20% 38%, rgba(255, 244, 211, .055) 42%, transparent 49% 70%, rgba(255, 143, 18, .07) 74%, transparent 82%),
    radial-gradient(circle at 50% 50%, rgba(255, 172, 31, .085), transparent 56%) !important;
}
.legendary-coffer-sanctum i {
  border-color: rgba(255, 205, 85, .11) !important;
}
.legendary-coffer-sanctum i:nth-child(2) {
  border-color: rgba(255, 241, 203, .085) !important;
}
.legendary-coffer-sanctum i:nth-child(3) {
  border-color: rgba(255, 151, 23, .12) !important;
}
.legendary-coffer-sanctum span {
  color: #ffe7a8 !important;
  text-shadow: 0 0 16px rgba(255, 171, 29, .56) !important;
}
.legendary-coffer-scene .reel-title {
  color: #ffe8aa !important;
  text-shadow: 0 0 12px rgba(255, 174, 31, .42), 0 0 28px rgba(255, 238, 191, .13) !important;
}
.legendary-coffer-reel .reel-stack {
  border-color: rgba(255, 211, 104, .68) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 186, 47, .095), transparent 55%),
    linear-gradient(145deg, rgba(70, 36, 8, .90), rgba(9, 11, 12, .97) 48%, rgba(89, 43, 5, .90)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 243, 208, .05),
    inset 0 0 38px rgba(255, 148, 16, .07),
    0 0 22px rgba(255, 187, 46, .26),
    0 0 50px rgba(255, 235, 180, .09) !important;
}
.legendary-coffer-reel .reel-window {
  border-color: rgba(255, 224, 140, .56) !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 180, 43, .11), transparent 58%),
    linear-gradient(90deg, rgba(9,7,5,.98), rgba(65,35,9,.91) 22%, rgba(91,49,10,.86) 50%, rgba(65,35,9,.91) 78%, rgba(9,7,5,.98)) !important;
}
.legendary-coffer-reel .marker {
  background: linear-gradient(180deg, #fff7d7, #ffc955 47%, #ef8317 57%, #fff0b8) !important;
  box-shadow: 0 0 10px #fff0b4, 0 0 28px rgba(255, 164, 25, .82), 0 0 43px rgba(255, 235, 183, .24) !important;
}

@media (max-width: 1180px) {
  .vault-selection.is-legendary-coffer {
    width: min(920px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 38px 34px 34px !important;
  }
  .vault-selection.is-legendary-coffer .open-count-picker {
    width: min(360px, 100%);
    margin-inline: auto;
  }
  .vault-selection.is-legendary-coffer .vault-action-group {
    width: min(520px, 100%);
    min-width: 0;
    margin-inline: auto;
  }
}
@media (max-width: 680px) {
  .carousel-rarity-seal.coffer-rarity-legendary {
    bottom: 12px !important;
    padding: 4px 8px !important;
    font-size: 8px !important;
  }
  .vault-selection.is-legendary-coffer {
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px) !important;
    padding: 30px 20px 28px !important;
  }
  .vault-selection.is-legendary-coffer .vault-action-group {
    grid-template-columns: 1fr;
  }
}
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary i {
  font-style: normal;
  font-size: 7px;
}

.carousel-coffer .carousel-rarity-seal {
  display: none !important;
}

.vault-selection.is-legendary-coffer {
  width: min(1080px, 100%) !important;
  min-height: 0 !important;
  padding: 20px 30px !important;
  grid-template-columns: minmax(320px, 1fr) auto auto !important;
  gap: 28px !important;
  align-items: center !important;
}
.vault-selection.is-legendary-coffer h3 {
  margin: 2px 0 5px !important;
  font-size: clamp(22px, 2.25vw, 34px) !important;
}
.vault-selection.is-legendary-coffer .inventory-coffer-seals {
  margin-top: 8px !important;
}
.vault-selection.is-legendary-coffer .open-count-picker {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.vault-selection.is-legendary-coffer .vault-action-group {
  display: flex !important;
  grid-template-columns: none !important;
  min-width: 0 !important;
  gap: 12px !important;
}
.vault-selection.is-legendary-coffer .vault-action-group .btn {
  width: auto !important;
  min-width: 180px !important;
  min-height: 0 !important;
  padding: 14px 22px !important;
}

.legendary-coffer-sanctum {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 177, 35, .14) 0 8%, rgba(255, 225, 155, .055) 30%, transparent 67%) !important;
  animation: none !important;
}
.legendary-coffer-sanctum i {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(900px, 76vw) !important;
  height: min(330px, 42vh) !important;
  border: 1px solid rgba(255, 208, 91, .085) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) rotate(-4deg) !important;
  opacity: .65;
  animation: legendaryArcBreathe 5.8s ease-in-out infinite !important;
}
.legendary-coffer-sanctum i:nth-child(2) {
  width: min(690px, 60vw) !important;
  height: min(250px, 32vh) !important;
  border-color: rgba(255, 242, 205, .075) !important;
  transform: translate(-50%, -50%) rotate(5deg) !important;
  animation-delay: -1.8s !important;
}
.legendary-coffer-sanctum i:nth-child(3) {
  width: min(470px, 43vw) !important;
  height: min(170px, 24vh) !important;
  border-color: rgba(255, 147, 18, .10) !important;
  transform: translate(-50%, -50%) rotate(-2deg) !important;
  animation-delay: -3.2s !important;
}
.legendary-coffer-sanctum span {
  opacity: .24 !important;
  animation: legendarySanctumStar 6.8s ease-in-out infinite !important;
}
.legendary-coffer-sanctum span:nth-of-type(2) { animation-delay: -2.1s !important; }
.legendary-coffer-sanctum span:nth-of-type(3) { animation-delay: -4.3s !important; }
@keyframes legendaryArcBreathe {
  0%, 100% {
    opacity: .28;
    filter: drop-shadow(0 0 5px rgba(255,177,35,.05));
  }
  50% {
    opacity: .72;
    filter: drop-shadow(0 0 13px rgba(255,177,35,.12));
  }
}
@keyframes legendarySanctumStar {
  0%, 100% {
    transform: translate3d(0, 4px, 0) scale(.88);
    opacity: .13;
  }
  50% {
    transform: translate3d(0, -9px, 0) scale(1.08);
    opacity: .34;
  }
}

.legendary-coffer-reel .reel-stack {
  margin-inline: 74px !important;
  padding: 34px 28px 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
.legendary-coffer-reel .reel-stack::before {
  content: "" !important;
  display: block !important;
  inset: 13px 0 !important;
  border: 0 !important;
  clip-path: polygon(
    0 50%, 26px 18%, 42% 18%, 46% 0, 54% 0, 58% 18%,
    calc(100% - 26px) 18%, 100% 50%, calc(100% - 26px) 82%,
    58% 82%, 54% 100%, 46% 100%, 42% 82%, 26px 82%
  ) !important;
  background:
    linear-gradient(90deg, transparent 0 2%, rgba(255, 188, 51, .36) 9%, transparent 19% 81%, rgba(255, 188, 51, .36) 91%, transparent 98%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 205, 98, .07), transparent 68%) !important;
  box-shadow: none !important;
  opacity: .9;
}
.legendary-coffer-reel .reel-stack::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 9px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(255, 223, 139, .72);
  background: radial-gradient(circle, #fff5ce 0 8%, #f2a42b 24%, rgba(52,27,6,.97) 63%);
  color: #fff4c7;
  font-size: 10px;
  text-shadow: 0 0 8px rgba(255,244,196,.9);
  box-shadow: 0 0 13px rgba(255, 166, 28, .46), inset 0 0 9px rgba(255,255,255,.12);
}
.legendary-coffer-reel .reel-stack > .reel-line {
  position: relative;
  z-index: 3;
  padding: 10px 18px 10px 14px;
  clip-path: polygon(
    0 50%, 25px 7%, 42% 7%, 46% 0, 54% 0, 58% 7%,
    calc(100% - 25px) 7%, 100% 50%, calc(100% - 25px) 93%,
    58% 93%, 54% 100%, 46% 100%, 42% 93%, 25px 93%
  );
  background:
    linear-gradient(90deg, rgba(38,20,6,.88), rgba(8,10,11,.93) 18% 82%, rgba(55,27,5,.88)),
    radial-gradient(circle at 50% 50%, rgba(255,178,35,.10), transparent 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 103, .38),
    inset 0 0 28px rgba(255, 142, 15, .055),
    0 0 16px rgba(255, 174, 31, .10);
}
.legendary-coffer-reel .reel-line + .reel-line {
  margin-top: 5px;
}
.legendary-coffer-reel .reel-number {
  color: #ffe4a0 !important;
  text-shadow: 0 0 8px rgba(255,166,28,.38);
}
.legendary-coffer-reel .reel-window {
  clip-path: polygon(
    18px 0, calc(50% - 30px) 0, calc(50% - 20px) 8px,
    calc(50% + 20px) 8px, calc(50% + 30px) 0,
    calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, calc(50% + 30px) 100%,
    calc(50% + 20px) calc(100% - 8px), calc(50% - 20px) calc(100% - 8px),
    calc(50% - 30px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px
  ) !important;
  border: 1px solid rgba(255, 225, 151, .36) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 185, 43, .13), transparent 58%),
    linear-gradient(90deg, rgba(7,6,4,.98), rgba(52,29,8,.91) 18%, rgba(79,42,8,.88) 50%, rgba(52,29,8,.91) 82%, rgba(7,6,4,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.25),
    inset 0 0 32px rgba(255, 142, 12, .075),
    0 0 13px rgba(255, 182, 35, .13) !important;
}
.legendary-coffer-reel .reel-frame-wing {
  width: 104px !important;
  height: 90% !important;
  color: #ffd06a !important;
}
.legendary-coffer-reel .reel-frame-wing-left { left: -86px !important; }
.legendary-coffer-reel .reel-frame-wing-right { right: -86px !important; }
.legendary-coffer-reel .reel-frame-wing::before {
  clip-path: polygon(0 50%, 22% 4%, 52% 18%, 77% 0, 100% 35%, 82% 50%, 100% 65%, 77% 100%, 52% 82%, 22% 96%) !important;
  background:
    linear-gradient(180deg, rgba(255,244,207,.11), transparent 28% 70%, rgba(255,145,13,.08)),
    linear-gradient(135deg, rgba(98,48,7,.92), rgba(11,12,11,.98) 56%, rgba(57,27,5,.96)) !important;
  border-color: rgba(255, 212, 103, .52) !important;
}
.legendary-coffer-reel .reel-frame-wing::after {
  clip-path: polygon(0 50%, 34% 14%, 60% 27%, 100% 10%, 76% 50%, 100% 90%, 60% 73%, 34% 86%) !important;
  background: linear-gradient(90deg, transparent, rgba(255,224,147,.20), transparent) !important;
}
.legendary-coffer-reel .reel-frame-crown {
  width: min(470px, 48vw) !important;
  height: 58px !important;
  color: #ffe09a !important;
}
.legendary-coffer-reel .reel-frame-crown::before {
  clip-path: polygon(0 100%, 9% 55%, 25% 67%, 37% 26%, 46% 31%, 50% 0, 54% 31%, 63% 26%, 75% 67%, 91% 55%, 100% 100%) !important;
  background:
    linear-gradient(180deg, rgba(255,248,222,.14), transparent 55%),
    linear-gradient(90deg, transparent, rgba(255,190,48,.18), transparent),
    rgba(44,23,6,.88) !important;
  border-bottom-color: rgba(255, 216, 116, .48) !important;
}
.legendary-coffer-reel .reel-frame-crown-top { top: -43px !important; }
.legendary-coffer-reel .reel-frame-crown-bottom { bottom: -43px !important; }
.legendary-coffer-reel .marker {
  width: 4px !important;
}

@media (max-width: 1180px) {
  .vault-selection.is-legendary-coffer {
    width: min(900px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 20px 30px !important;
  }
  .vault-selection.is-legendary-coffer .open-count-picker {
    width: auto !important;
    margin-inline: auto;
  }
  .vault-selection.is-legendary-coffer .vault-action-group {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-inline: 0 !important;
  }
}
@media (max-width: 760px) {
  .legendary-coffer-reel .reel-stack {
    margin-inline: 10px !important;
    padding: 24px 10px 28px !important;
  }
  .legendary-coffer-reel .reel-stack > .reel-line {
    padding: 8px !important;
    clip-path: polygon(0 50%, 16px 8%, calc(100% - 16px) 8%, 100% 50%, calc(100% - 16px) 92%, 16px 92%);
  }
  .legendary-coffer-reel .reel-frame-crown {
    width: min(300px, 76vw) !important;
    height: 38px !important;
  }
  .legendary-coffer-reel .reel-frame-crown-top { top: -27px !important; }
  .legendary-coffer-reel .reel-frame-crown-bottom { bottom: -27px !important; }
  .vault-selection.is-legendary-coffer {
    padding: 20px !important;
  }
  .vault-selection.is-legendary-coffer .vault-action-group .btn {
    min-width: min(180px, 100%) !important;
  }
}

.grid > .box-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.box-card.is-legendary-coffer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.box-card.is-legendary-coffer .box-visual {
  width: 100% !important;
  height: 230px !important;
  margin-bottom: 8px !important;
}
.box-card.is-legendary-coffer .box-visual::before {
  inset: 24px 16px 19px !important;
}
.box-card.is-legendary-coffer .box-visual::after {
  inset: 11px 7px !important;
}
.box-card.is-legendary-coffer .box-glow {
  width: min(205px, 94%) !important;
  height: 205px !important;
}
.box-card.is-legendary-coffer .box-body::before {
  content: none !important;
  display: none !important;
}

.box-visual .sale-stock-seal,
.box-card.is-legendary-coffer .sale-stock-seal {
  right: 12px !important;
  bottom: 16px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff0b1 !important;
  animation: stockTextBreath 2.35s ease-in-out infinite !important;
}
.box-visual .sale-stock-seal::before,
.box-visual .sale-stock-seal::after {
  content: none !important;
  display: none !important;
}
.box-visual .sale-stock-seal b {
  font-size: 19px !important;
  color: #ffe298 !important;
  text-shadow:
    0 0 5px rgba(255,255,255,.34),
    0 0 12px color-mix(in srgb, var(--box-glow) 58%, transparent),
    0 2px 3px rgba(0,0,0,.78) !important;
}
.box-visual .sale-stock-seal small {
  color: rgba(255,246,211,.90) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--box-glow) 46%, transparent),
    0 2px 3px rgba(0,0,0,.78) !important;
}
@keyframes stockTextBreath {
  0%,100% {
    transform: translateY(0) scale(.985);
    filter: brightness(.93);
    opacity: .84;
  }
  50% {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.16);
    opacity: 1;
  }
}

.peek-inside-grid .reward-row {
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr) 78px;
}
.peek-inside-grid .reward-row > .chance {
  justify-self: end;
  align-self: start;
  margin-top: 3px;
}
.reward-type-stamp {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 8;
  max-width: 74px;
  padding: 3px 7px 2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(248,249,244,.88);
  background: rgba(5,9,6,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 9px rgba(0,0,0,.18);
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .11em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.reward-type-mount {
  color:#ffe2a3;
  border-color:rgba(255,190,79,.26);
}
.reward-type-minion {
  color:#bfe8ff;
  border-color:rgba(111,197,255,.24);
}
.reward-type-gil {
  color:#ffe08c;
  border-color:rgba(255,210,92,.24);
}
.reward-type-item {
  color:#d8f0dc;
  border-color:rgba(138,210,154,.22);
}
.reward-type-service {
  color:#e0c8ff;
  border-color:rgba(190,140,255,.24);
}
.reward-type-perk {
  color:#ffc8db;
  border-color:rgba(255,140,181,.22);
}
.reward-type-coffer {
  color:#ffd8a5;
  border-color:rgba(255,175,84,.24);
}
.reward-type-special {
  color:#fff0c8;
  border-color:rgba(240,217,144,.24);
}
.reward-type-empty {
  color:rgba(230,232,226,.58);
  border-color:rgba(255,255,255,.10);
}

.achievements-modal {
  isolation: isolate;
}
.achievements-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(30deg, transparent 47.5%, rgba(240,217,144,.055) 48% 49%, transparent 49.5%),
    linear-gradient(-30deg, transparent 47.5%, rgba(141,189,151,.035) 48% 49%, transparent 49.5%),
    radial-gradient(circle at center, rgba(255,245,205,.08) 0 1px, transparent 1.5px);
  background-size: 76px 44px, 76px 44px, 31px 31px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 64%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0 64%, transparent 100%);
}
.achievements-modal > * {
  position: relative;
  z-index: 1;
}
.achievement-browser-tools {
  width: min(930px, 100%);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 220px;
  gap: 10px;
}
.achievement-search-field,
.achievement-sort-field {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(214,180,95,.18);
  border-radius: 10px;
  background: rgba(2,7,4,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.achievement-search-field > span {
  color: #e4c778;
  font-size: 20px;
  transform: rotate(-13deg);
}
.achievement-search-field input,
.achievement-sort-field select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #f2f3ed;
  background: transparent;
}
.achievement-search-field input::placeholder { color: rgba(239,242,234,.38); }
.achievement-sort-field > span {
  flex: 0 0 auto;
  color: rgba(240,217,144,.66);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}
.achievement-sort-field select {
  cursor: pointer;
  color-scheme: dark;
  font-size: 11px;
}
.achievement-filter-row {
  width: min(930px, 100%);
  margin: 9px auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.achievement-filter-row button {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  color: rgba(236,240,231,.58);
  background: rgba(255,255,255,.018);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .055em;
  cursor: pointer;
  transition: .18s ease;
}
.achievement-filter-row button:hover {
  color: #fff1be;
  border-color: rgba(214,180,95,.28);
  background: rgba(214,180,95,.07);
}
.achievement-filter-row button.active {
  color: #171d17;
  border-color: transparent;
  background: linear-gradient(135deg,#f3dfa1,#cfa847);
  box-shadow: 0 4px 12px rgba(214,180,95,.12);
}
.achievement-search-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: rgba(238,241,233,.48);
  font-family: Georgia,serif;
  font-size: 15px;
  text-align: center;
}
@media (max-width: 760px) {
  .achievement-browser-tools { grid-template-columns: 1fr; }
  .achievement-filter-row {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
  }
  .achievement-filter-row button { flex: 0 0 auto; }
  .peek-inside-grid .reward-row { grid-template-columns: 52px minmax(0,1fr) 70px; }
}

.grid {
  align-items: stretch !important;
}
.grid > .box-card {
  display: grid !important;
  grid-template-rows: 238px minmax(0, 1fr) !important;
  align-content: start !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.grid > .box-card > .box-visual,
.grid > .box-card.is-legendary-coffer > .box-visual {
  grid-row: 1 !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  margin: 0 0 8px !important;
  box-sizing: border-box !important;
}
.grid > .box-card > .box-body,
.grid > .box-card.is-legendary-coffer > .box-body {
  grid-row: 2 !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.box-card.is-legendary-coffer::before {
  inset-inline: 0 !important;
}

.modal:has(.peek-inside-grid) {
  width: min(940px, 96vw) !important;
}
.peek-inside-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
}
.peek-inside-grid .reward-row {
  position: relative;
  grid-template-columns: 56px minmax(0, 1fr) 88px !important;
  gap: 10px !important;
  min-height: 98px !important;
  height: 98px !important;
  max-height: 98px !important;
  padding: 22px 10px 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.peek-inside-grid .reward-icon-wrap {
  width: 56px !important;
  height: 56px !important;
}
.peek-inside-grid .reward-icon-wrap > img {
  width: 56px !important;
  height: 56px !important;
}
.peek-inside-grid .reward-row > div:not(.reward-icon-wrap) {
  min-width: 0;
  overflow: hidden;
}
.peek-inside-grid .reward-row h4 {
  margin: 0 0 3px !important;
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peek-inside-grid .reward-row p {
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10.5px !important;
  line-height: 1.28 !important;
}
.peek-inside-grid .reward-row > .chance {
  align-self: center !important;
  justify-self: end !important;
  margin: 0 3px 0 0 !important;
  font-size: 12px !important;
}

.reward-rarity-seal {
  --seal-a: #d8dde0;
  --seal-b: #646a6e;
  --seal-text: #f8fafb;
  position: absolute;
  z-index: 18;
  top: 7px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 62px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--seal-a) 66%, white 12%);
  color: var(--seal-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 34%),
    linear-gradient(135deg, var(--seal-a), var(--seal-b));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 0 11px color-mix(in srgb, var(--seal-a) 24%, transparent),
    0 3px 8px rgba(0,0,0,.32);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
  text-indent: .12em;
  text-shadow: 0 1px 2px rgba(0,0,0,.82);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-fill-color: currentColor;
}
.reward-rarity-seal::before,
.reward-rarity-seal::after {
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: 6px;
  line-height: 1;
  text-indent: 0;
}
.rarity-seal-legendary {
  --seal-a: #f6b62d;
  --seal-b: #9a3f05;
  --seal-text: #fff6d7;
  min-width: 86px;
  height: 24px;
  padding-inline: 13px;
  clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
  border-color: #ffd978;
  background:
    linear-gradient(180deg, rgba(255,250,218,.34), transparent 37%),
    linear-gradient(135deg, #d36d09 0%, #f6b62d 48%, #9a3f05 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(83,28,0,.35),
    0 0 15px rgba(255,172,32,.38),
    0 4px 10px rgba(0,0,0,.34);
}
.rarity-seal-legendary::before,
.rarity-seal-legendary::after {
  content: "✦";
  color: #fff1b4;
}
.rarity-seal-epic {
  --seal-a: #c98bff;
  --seal-b: #58228f;
  --seal-text: #f7eaff;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.rarity-seal-epic::before,
.rarity-seal-epic::after {
  content: "◆";
  color: #f0d2ff;
}
.rarity-seal-rare {
  --seal-a: #73c5ff;
  --seal-b: #1d5f9d;
  --seal-text: #ebf8ff;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 6px 50%);
}
.rarity-seal-rare::before,
.rarity-seal-rare::after {
  content: "✧";
  color: #d9f3ff;
}
.rarity-seal-uncommon {
  --seal-a: #f5f3e7;
  --seal-b: #8f9990;
  --seal-text: #ffffff;
  border-radius: 10px 2px 10px 2px;
}
.rarity-seal-uncommon::before,
.rarity-seal-uncommon::after {
  content: "◇";
  color: #ffffff;
}
.rarity-seal-common {
  --seal-a: #cbd0d3;
  --seal-b: #60686d;
  --seal-text: #f7f8f8;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.rarity-seal-common::before {
  content: "•";
  color: #ffffff;
}
.rarity-seal-common::after {
  content: "•";
  color: #ffffff;
}
.rarity-seal-none {
  --seal-a: #777b80;
  --seal-b: #35383c;
  --seal-text: #d6d8da;
  border-style: dashed;
  opacity: .72;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.rarity-seal-none::before,
.rarity-seal-none::after {
  content: "×";
  color: #c9cccf;
}

.reward-type-bookmark {
  --type-a: #d8f0dc;
  --type-b: #416f4b;
  position: absolute;
  z-index: 17;
  right: 9px;
  bottom: 6px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 68px;
  height: 29px;
  padding: 5px 8px 9px;
  overflow: hidden;
  border: 0;
  color: #f9fff9;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(135deg, var(--type-a), var(--type-b));
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 10px color-mix(in srgb, var(--type-a) 22%, transparent),
    0 4px 9px rgba(0,0,0,.30);
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0,0,0,.76);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.reward-type-bookmark::before {
  content: "";
  position: absolute;
  inset: 3px 4px 8px;
  border-top: 1px solid rgba(255,255,255,.24);
  pointer-events: none;
}
.reward-type-mount {
  --type-a:#f1b84f;
  --type-b:#78430b;
}
.reward-type-minion {
  --type-a:#73cfff;
  --type-b:#225d87;
}
.reward-type-gil {
  --type-a:#ffd766;
  --type-b:#98650d;
}
.reward-type-item {
  --type-a:#9ed7ae;
  --type-b:#356444;
}
.reward-type-service {
  --type-a:#c99aff;
  --type-b:#654092;
}
.reward-type-perk {
  --type-a:#ff9dbb;
  --type-b:#913b5b;
}
.reward-type-lootbox,
.reward-type-coffer {
  --type-a:#ffad55;
  --type-b:#8d470b;
}
.reward-type-custom,
.reward-type-special {
  --type-a:#f3dfa1;
  --type-b:#7d6530;
}
.reward-type-none,
.reward-type-empty {
  --type-a:#8b8f93;
  --type-b:#3b3e42;
  color:#e0e2e3;
}

.peek-inside-grid .reward-rarity-seal {
  top: 6px;
  right: 8px;
}
.peek-inside-grid .reward-type-bookmark {
  right: 8px;
  bottom: 5px;
  min-width: 76px;
  height: 31px;
  font-size: 9px;
}
.reel-card {
  position: relative;
  padding: 27px 7px 6px !important;
}
.reel-card .reel-card-rarity-seal {
  top: 5px;
  right: 5px;
  min-width: 52px;
  height: 18px;
  padding-inline: 6px;
  font-size: 6.5px;
  letter-spacing: .07em;
  text-indent: .07em;
}
.reel-card .reel-card-rarity-seal.rarity-seal-legendary {
  min-width: 66px;
  height: 20px;
  padding-inline: 7px;
}
.reel-card .reel-card-type-stamp {
  top: 0;
  left: 6px;
  right: auto;
  bottom: auto;
  min-width: 54px;
  height: 25px;
  padding: 4px 6px 8px;
  font-size: 7px;
}
.result-card .result-rarity-stamp {
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  transform: none !important;
}
.result-card .result-type-stamp {
  top: 2px;
  left: 8px;
  right: auto;
  bottom: auto;
}
.collection-detail-image-stage .collection-detail-rarity-stamp {
  top: 8px;
  right: 8px;
}
.collection-detail-image-stage .collection-detail-type-stamp {
  left: 8px;
  right: auto;
  bottom: 8px;
}

.achievements-modal {
  width: min(1400px, 98vw) !important;
  height: min(940px, 95dvh) !important;
  max-height: 95dvh !important;
}
.achievements-header {
  padding: 23px 34px 17px !important;
}
.achievements-header > p:not(.eyebrow) {
  font-size: 13px !important;
}
.achievement-browser-tools {
  width: min(1160px, 100%) !important;
  grid-template-columns: minmax(280px, 1fr) 260px !important;
  gap: 12px !important;
}
.achievement-search-field,
.achievement-sort-menu > summary {
  min-height: 48px !important;
  border: 1px solid rgba(214,180,95,.22);
  border-radius: 11px;
  background: rgba(3,9,5,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.16);
}
.achievement-search-field {
  padding: 0 14px !important;
}
.achievement-search-field input {
  font-size: 13px !important;
}
.achievement-sort-menu {
  position: relative;
  min-width: 0;
}
.achievement-sort-menu > summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  color: #f3f0e6;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.achievement-sort-menu > summary::-webkit-details-marker { display: none; }
.achievement-sort-menu > summary > span {
  color: #e6c873;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}
.achievement-sort-menu > summary > strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.achievement-sort-menu > summary > i {
  color: #f0d990;
  font-size: 17px;
  font-style: normal;
  transition: transform .18s ease;
}
.achievement-sort-menu[open] > summary > i { transform: rotate(180deg); }
.achievement-sort-options {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 80;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(214,180,95,.25);
  border-radius: 11px;
  background: rgba(9,17,11,.98);
  box-shadow: 0 18px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
}
.achievement-sort-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(242,245,237,.78);
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.achievement-sort-options button:hover {
  color: #fff3c1;
  border-color: rgba(214,180,95,.18);
  background: rgba(214,180,95,.07);
}
.achievement-sort-options button.active {
  color: #171d17;
  background: linear-gradient(135deg,#f3dfa1,#cfa847);
}
.achievement-sort-options button b { font-size: 13px; }
.achievement-filter-row {
  width: min(1160px, 100%) !important;
  gap: 8px !important;
  margin-top: 11px !important;
}
.achievement-filter-row button {
  min-height: 32px;
  padding: 7px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: .045em !important;
}
.achievement-section-header {
  min-height: 60px !important;
}
.achievement-section-header h3 { font-size: 19px !important; }
.achievement-section-header p {
  font-size: 11px !important;
  line-height: 1.3 !important;
}
.achievement-section-header > strong { font-size: 11px !important; }
.achievement-section .achievement-card {
  grid-template-columns: 62px minmax(0,1fr) !important;
  gap: 11px !important;
  min-height: 112px !important;
  padding: 11px 12px !important;
}
.achievement-section .achievement-icon-stage {
  width: 58px !important;
  height: 58px !important;
}
.achievement-section .achievement-icon-stage img {
  width: 48px !important;
  height: 48px !important;
}
.achievement-section .achievement-copy { padding-right: 62px !important; }
.achievement-section .achievement-copy h3 {
  font-size: 16px !important;
  line-height: 1.18 !important;
}
.achievement-section .achievement-copy p {
  margin-bottom: 7px !important;
  font-size: 11.5px !important;
  line-height: 1.34 !important;
}
.achievement-section .achievement-copy small { font-size: 9.5px !important; }
.achievement-section .achievement-state { font-size: 8px !important; }
.achievement-section .achievement-progress { height: 5px !important; }

@media (max-width: 980px) {
  .achievement-browser-tools { grid-template-columns: 1fr 230px !important; }
  .achievement-section .achievement-card {
    grid-template-columns: 48px minmax(0,1fr) !important;
    min-height: 106px !important;
    padding: 9px !important;
  }
  .achievement-section .achievement-icon-stage {
    width: 44px !important;
    height: 44px !important;
  }
  .achievement-section .achievement-icon-stage img {
    width: 38px !important;
    height: 38px !important;
  }
  .achievement-section .achievement-copy { padding-right: 46px !important; }
  .achievement-section .achievement-copy h3 { font-size: 13px !important; }
  .achievement-section .achievement-copy p { font-size: 10px !important; }
}
@media (max-width: 680px) {
  .peek-inside-grid { grid-template-columns: 1fr !important; }
  .peek-inside-grid .reward-row {
    height: 96px !important;
    max-height: 96px !important;
  }
  .achievement-browser-tools { grid-template-columns: 1fr !important; }
  .achievement-filter-row button { font-size: 10px !important; }
  .achievement-section .achievement-card {
    min-height: 124px !important;
    padding: 8px 7px !important;
  }
  .achievement-section .achievement-copy h3 { font-size: 11px !important; }
  .achievement-section .achievement-copy p {
    font-size: 8.5px !important;
    line-height: 1.22 !important;
  }
  .achievement-section .achievement-copy small { font-size: 7.5px !important; }
}

.total-prizes-worth {
  color: rgba(235,239,230,.78) !important;
  font-size: 12px !important;
  letter-spacing: .025em;
}
.total-prizes-worth strong {
  color: #f1d786;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(214,180,95,.22);
}

.peek-inside-grid .reward-rarity-seal {
  top: 7px !important;
  right: 8px !important;
  min-width: 54px !important;
  height: 18px !important;
  padding-inline: 7px !important;
  gap: 3px !important;
  font-size: 6.8px !important;
  letter-spacing: .09em !important;
  text-indent: .09em !important;
}
.peek-inside-grid .reward-rarity-seal.rarity-seal-legendary {
  min-width: 72px !important;
  height: 20px !important;
  padding-inline: 9px !important;
}
.peek-inside-grid .reward-type-bookmark {
  right: 4px !important;
  bottom: 2px !important;
  min-width: 82px !important;
  height: 30px !important;
  padding: 5px 9px 10px !important;
  clip-path: polygon(0 0, 100% 0, 100% 73%, 76% 100%, 50% 82%, 24% 100%, 0 73%) !important;
  border-top: 1px solid color-mix(in srgb, var(--type-a) 68%, white 18%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 34%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.07) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, var(--type-a), var(--type-b)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 0 12px color-mix(in srgb, var(--type-a) 22%, transparent),
    0 4px 8px rgba(0,0,0,.28) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
}
.peek-inside-grid .reward-type-bookmark::before {
  inset: 3px 5px 9px !important;
  border-top: 1px solid rgba(255,255,255,.28) !important;
}

.reel-card {
  padding: 9px !important;
  align-content: center !important;
}
.reel-card > img,
.reel-card > strong {
  position: relative;
  z-index: 3;
}
.reel-card .reel-card-type-stamp {
  position: absolute !important;
  top: 4px !important;
  left: 5px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 24 !important;
  min-width: 49px !important;
  height: 22px !important;
  padding: 4px 5px 7px !important;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 50% 82%, 28% 100%, 0 72%) !important;
  font-size: 6.5px !important;
  letter-spacing: .055em !important;
  pointer-events: none;
}
.reel-rarity-icon {
  position: absolute;
  top: 6px;
  right: 7px;
  z-index: 25;
  display: block;
  width: 19px;
  height: 19px;
  color: #e9edef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 19px;
  text-align: center;
  text-shadow: 0 0 5px currentColor, 0 2px 3px rgba(0,0,0,.76);
  pointer-events: none;
}
.reel-rarity-icon.rarity-icon-legendary {
  color:#ffd76f;
  font-size:19px;
}
.reel-rarity-icon.rarity-icon-epic { color:#c98bff; }
.reel-rarity-icon.rarity-icon-rare { color:#78c9ff; }
.reel-rarity-icon.rarity-icon-uncommon { color:#f4f3e8; }
.reel-rarity-icon.rarity-icon-common {
  color:#cbd0d3;
  font-size:20px;
}

.achievement-sort-options {
  background: #0b1510 !important;
  background-image: linear-gradient(155deg, #142219, #08100b) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.achievements-modal,
.achievements-sections-scroll,
.achievement-section,
.achievement-section .achievement-card {
  transform: none !important;
  backface-visibility: visible !important;
}
.achievement-filter-row button,
.achievement-sort-menu,
.achievement-sort-menu *,
.achievement-search-field,
.achievement-search-field * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  filter: none !important;
}
.achievement-filter-row button {
  transform: none !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.64);
}
.achievements-modal > .achievements-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 120 !important;
}

.box-visual .sale-stock-seal,
.box-card.is-legendary-coffer .sale-stock-seal {
  animation: stockTextGlowSharp 2.35s ease-in-out infinite !important;
  transform: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.box-visual .sale-stock-seal b,
.box-visual .sale-stock-seal small {
  transform: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
@keyframes stockTextGlowSharp {
  0%,100% {
    opacity:.84;
    text-shadow: 0 0 5px rgba(255,255,255,.24), 0 0 9px color-mix(in srgb, var(--box-glow) 35%, transparent), 0 2px 3px rgba(0,0,0,.78);
  }
  50% {
    opacity:1;
    text-shadow: 0 0 6px rgba(255,255,255,.42), 0 0 15px color-mix(in srgb, var(--box-glow) 58%, transparent), 0 2px 3px rgba(0,0,0,.78);
  }
}

.limited-time-stamp.limited-time-hall {
  top: 11px !important;
  right: 11px !important;
  left: auto !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,190,69,.72) !important;
  border-radius: 5px 9px 5px 9px !important;
  color: #fff1bd !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.10) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, rgba(122,56,5,.98), rgba(220,132,25,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,197,.30), 0 0 10px rgba(255,151,30,.20), 0 4px 12px rgba(0,0,0,.22) !important;
  font-size: 8px !important;
  letter-spacing: .085em !important;
  text-shadow: 0 1px 2px rgba(52,20,0,.96) !important;
  transform: none !important;
  animation: inventoryLimitedSealWarmth 3.8s ease-in-out infinite !important;
}
.limited-time-stamp.limited-time-hall::before {
  content: "✦" !important;
  margin: 0 !important;
  color: #ffe49a !important;
  font-size: 8px !important;
}
.limited-time-stamp.limited-time-hall::after {
  content: "" !important;
  position: absolute;
  top: -90%;
  bottom: -90%;
  left: -38%;
  width: 24%;
  margin: 0 !important;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,245,205,.34), transparent);
  animation: inventoryLimitedSealSweep 5.8s ease-in-out infinite;
}
.vip-coffer-seal {
  top: 8px !important;
  left: 10px !important;
  height: 24px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,143,181,.64) !important;
  border-radius: 999px !important;
  color: #ffe8f1 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(91,24,61,.98), rgba(169,56,103,.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255,230,241,.24), inset 0 -2px 5px rgba(64,4,31,.30), 0 0 12px rgba(255,104,166,.18), 0 4px 12px rgba(0,0,0,.22) !important;
  font-size: 8px !important;
  letter-spacing: .10em !important;
  text-shadow: 0 1px 3px rgba(48,3,23,.94) !important;
  transform: none !important;
  animation: inventoryVipSealPulse 3.2s ease-in-out infinite !important;
}
.vip-coffer-seal::before {
  content: "◆";
  margin-right: 5px;
  color: #ffd3e3;
  font-size: 7px;
}
.vip-coffer-seal::after { display:none !important; }

.reward-type-text {
  position: absolute;
  z-index: 24;
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--type-a, #d8f0dc) 78%, white 22%);
  background: transparent;
  box-shadow: none;
  clip-path: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .075em;
  text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 0 7px color-mix(in srgb, var(--type-a, #d8f0dc) 28%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.reward-type-text::before,
.reward-type-text::after {
  content: none !important;
  display: none !important;
}
.peek-inside-grid .reward-type-text {
  right: 8px;
  bottom: 7px;
  left: auto;
  top: auto;
  font-size: 9.5px;
}
.reel-card .reel-card-type-text {
  top: 7px;
  left: 7px;
  right: auto;
  bottom: auto;
  max-width: 60px;
  overflow: hidden;
  font-size: 7px;
  letter-spacing: .055em;
  text-overflow: ellipsis;
}
.result-card .result-type-text {
  top: 8px;
  left: 9px;
  right: auto;
  bottom: auto;
  max-width: 82px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
}

.peek-inside-grid .reward-row > .chance {
  font-size: 14px !important;
  line-height: 1 !important;
}

.peek-inside-grid .reward-row.peek-legendary-reward {
  isolation: isolate;
  border-color: rgba(255, 207, 93, .30) !important;
  background:
    linear-gradient(110deg, rgba(255, 198, 62, .13), rgba(255, 231, 158, .055) 48%, rgba(186, 103, 12, .10)),
    rgba(11, 18, 13, .88) !important;
  box-shadow:
    inset 0 0 22px rgba(255, 190, 45, .055),
    0 0 14px rgba(255, 174, 31, .075) !important;
}
.peek-inside-grid .reward-row.peek-legendary-reward::before,
.peek-inside-grid .reward-row.peek-legendary-reward::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.peek-legendary-stars {
  position: absolute;
  inset: 3px;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.peek-legendary-stars i {
  position: absolute;
  color: #ffe8a1;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  line-height: 1;
  opacity: .12;
  text-shadow: 0 0 7px rgba(255, 193, 53, .56);
  animation: peekLegendaryStarBlink 8.6s ease-in-out infinite;
}
.peek-legendary-stars i:nth-child(1) {
  top: 12px;
  left: 12px;
  font-size: 9px;
  animation-delay: -1.1s;
}
.peek-legendary-stars i:nth-child(2) {
  right: 96px;
  top: 10px;
  font-size: 8px;
  animation-delay: -5.2s;
}
.peek-legendary-stars i:nth-child(3) {
  right: 12px;
  bottom: 12px;
  font-size: 10px;
  animation-delay: -3.3s;
}
.peek-legendary-stars i:nth-child(4) {
  left: 42%;
  bottom: 9px;
  font-size: 7px;
  animation-delay: -7.1s;
}
.peek-legendary-stars i:nth-child(5) {
  left: 74px;
  top: 44%;
  font-size: 8px;
  animation-delay: -4.3s;
}
.peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap,
.peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap),
.peek-inside-grid .reward-row.peek-legendary-reward > .chance,
.peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal,
.peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text,
.peek-inside-grid .reward-row.peek-legendary-reward > .reward-stock-stamp {
  z-index: 3;
}
@keyframes peekLegendaryStarBlink {
  0%, 12%, 100% {
    opacity: .10;
    transform: scale(.88);
    filter: brightness(.9);
  }
  3% {
    opacity: .68;
    transform: scale(1.16);
    filter: brightness(1.18);
  }
  6% {
    opacity: .24;
    transform: scale(.98);
    filter: brightness(1);
  }
}

.reel-card .reel-card-rarity-seal {
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 25 !important;
  min-width: 48px !important;
  height: 18px !important;
  padding-inline: 6px !important;
  gap: 3px !important;
  font-size: 6.2px !important;
  letter-spacing: .065em !important;
  text-indent: .065em !important;
}
.reel-card .reel-card-rarity-seal.rarity-seal-legendary {
  min-width: 65px !important;
  height: 19px !important;
  padding-inline: 7px !important;
}

.limited-time-stamp.limited-time-hall {
  width: max-content !important;
  max-width: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.limited-time-stamp.limited-time-hall::before {
  flex: 0 0 auto !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.reel-card .reel-card-label-row {
  position: absolute;
  top: 5px;
  left: 6px;
  right: 5px;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  height: 20px;
  pointer-events: none;
}
.reel-card .reel-card-label-row > .reel-card-type-text,
.reel-card .reel-card-label-row > .reel-card-rarity-seal {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}
.reel-card .reel-card-label-row > .reel-card-type-text {
  flex: 0 1 auto;
  align-self: center;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-card .reel-card-label-row > .reel-card-rarity-seal {
  flex: 0 0 auto;
  margin-left: auto;
}

.reel-card .reel-card-rarity-seal {
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 25 !important;
  transform: translateX(-50%) !important;
}
.reel-card .reel-card-type-text {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 4px !important;
  z-index: 25 !important;
  max-width: calc(100% - 14px) !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}

.reel-card > .reel-card-image-anchor {
  position: relative;
  z-index: 3;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
}
.reel-scene.single .reel-card > .reel-card-image-anchor {
  width: 67px;
  height: 67px;
}
.reel-card > .reel-card-image-anchor > img {
  display: block;
  width: 100%;
  height: 100%;
}
.reel-card > .reel-card-name-anchor {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: min(120px, 100%);
  min-width: 0;
}
.reel-card > .reel-card-name-anchor > strong {
  display: block;
  max-width: 120px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-card .reel-card-image-anchor > .reel-card-rarity-seal {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -100%) !important;
}
.reel-card .reel-card-name-anchor > .reel-card-type-text {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  max-width: 116px !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

.reel-card .reel-card-image-anchor > .reel-card-rarity-seal {
  top: -8px !important;
}

.reel-overlay.is-revealed .result-card .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-3 .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-4 .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-5 .result-rarity-stamp {
  top: 20px !important;
  left: 9px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.peek-inside-grid .peek-reward-title-line {
  position: relative;
  display: flex;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  margin: 0 0 3px;
  overflow: visible;
}
.peek-inside-grid .peek-reward-title-line > h4 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.peek-inside-grid .peek-reward-each-worth {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2px);
  z-index: 4;
  max-width: 100%;
  overflow: hidden;
  color: rgba(183, 193, 181, .72);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
}

.peek-inside-grid .reward-row > div:not(.reward-icon-wrap) {
  overflow: visible;
}

.peek-inside-backdrop {
  overflow-y: auto;
}
.rewards-modal,
.modal:has(.peek-inside-grid).rewards-modal {
  width: min(940px, 96vw) !important;
  max-height: 90vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.rewards-modal::before,
.rewards-modal::after {
  content: none !important;
  display: none !important;
}
.rewards-modal-header,
.rewards-modal .modal-header {
  position: relative !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  padding: 8px 16px 17px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  backdrop-filter: none !important;
}
.rewards-modal-heading {
  width: 100%;
  min-width: 0;
  text-align: center;
}
.peek-kicker-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 0 0 4px;
  flex-wrap: wrap;
  text-align: center;
}
.peek-kicker-line .eyebrow {
  margin: 0 !important;
}
.peek-lootbox-description {
  color: rgba(183, 202, 188, .72);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .015em;
  text-shadow: 0 1px 3px rgba(0,0,0,.72);
}
.rewards-modal-header h3 {
  margin-inline: auto !important;
  text-align: center !important;
}
.rewards-modal-header .total-prizes-worth {
  text-align: center !important;
}
.rewards-modal .peek-inside-grid {
  padding-top: 8px !important;
}
.rewards-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px 20px;
}
.rewards-modal-footer .peek-close-button {
  min-width: 164px;
  justify-content: center;
  text-align: center;
}
@media (max-width: 640px) {
  .rewards-modal-header,
  .rewards-modal .modal-header {
    padding-inline: 8px !important;
  }
  .peek-kicker-line {
    gap: 5px 8px;
  }
  .peek-lootbox-description {
    width: 100%;
    font-size: 9.5px;
  }
}

.peek-inside-grid .reward-row.peek-epic-reward {
  isolation: isolate;
  border-color: rgba(190, 112, 255, .40) !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow:
    inset 0 0 22px rgba(174, 78, 255, .065),
    0 0 15px rgba(174, 78, 255, .14) !important;
  animation: peekEpicOutlinePulse 4.8s ease-in-out infinite !important;
}
.peek-inside-grid .reward-row.peek-epic-reward::before,
.peek-inside-grid .reward-row.peek-epic-reward::after {
  content: none !important;
  display: none !important;
}
.peek-legendary-stars.peek-epic-stars i {
  color: #dfb2ff;
  text-shadow: 0 0 8px rgba(174, 78, 255, .66);
}
.peek-inside-grid .reward-row.peek-epic-reward .reward-icon-wrap,
.peek-inside-grid .reward-row.peek-epic-reward > div:not(.reward-icon-wrap),
.peek-inside-grid .reward-row.peek-epic-reward > .chance,
.peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal,
.peek-inside-grid .reward-row.peek-epic-reward > .reward-type-text,
.peek-inside-grid .reward-row.peek-epic-reward > .reward-stock-stamp {
  z-index: 3;
}
@keyframes peekEpicOutlinePulse {
  0%, 100% {
    border-color: rgba(190, 112, 255, .34);
    box-shadow: inset 0 0 20px rgba(174, 78, 255, .05), 0 0 12px rgba(174, 78, 255, .10);
  }
  50% {
    border-color: rgba(213, 158, 255, .54);
    box-shadow: inset 0 0 25px rgba(174, 78, 255, .085), 0 0 19px rgba(174, 78, 255, .19);
  }
}

.reel-overlay.is-revealed .reel-scene > .reel-title {
  position: relative;
  top: clamp(-58px, -6vh, -44px);
  z-index: 20 !important;
  margin-bottom: -8px !important;
  pointer-events: none;
}
.reel-overlay.is-revealed.legendary-coffer-reel .reel-scene > .reel-title {
  top: clamp(-70px, -7vh, -54px);
}
@media (max-width: 900px), (max-height: 780px) {
  .reel-overlay.is-revealed .reel-scene > .reel-title {
    top: clamp(-54px, -7vh, -42px);
    margin-bottom: -8px !important;
  }
  .reel-overlay.is-revealed.legendary-coffer-reel .reel-scene > .reel-title {
    top: clamp(-62px, -8vh, -48px);
  }
}

.purchase-action-pair > .btn,
.purchase-action-pair > .btn.primary,
.purchase-action-pair > .box-buy-button,
.purchase-action-pair > .gift-buy-button {
  font-size: clamp(9px, .78vw, 12px) !important;
}
@media (max-width: 700px) {
  .purchase-action-pair > .btn,
  .purchase-action-pair > .btn.primary,
  .purchase-action-pair > .box-buy-button,
  .purchase-action-pair > .gift-buy-button {
    font-size: clamp(8px, 2.55vw, 11px) !important;
  }
}

.reel-overlay.is-rolling .reel-title-marker {
  top: -12px;
}

.reel-overlay.is-revealed .reel-scene:has(.result-grid.count-4) > .reel-title {
  display: none !important;
}

.purchase-price-area {
  margin-left: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
}
.purchase-price-area.is-staff-preview {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.fortune-price-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
}
.fortune-price-current {
  color: #ffe69b;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 950;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(214, 180, 95, .24);
}
.fortune-price-original {
  margin-top: 3px;
  color: rgba(225, 228, 216, .54);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 192, 122, .78);
}
.staff-discount-preview {
  color: #ffabb3;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 128, 142, .34);
}
.qty-control > .fortune-discount-badge {
  margin-left: 0;
  flex: 0 0 auto;
  font-size: 10px;
  box-shadow: 0 0 12px rgba(214, 180, 95, .12);
}

.history-column .history-panel {
  width: 100%;
  align-self: stretch;
}
.achievements-launch-button {
  max-width: 100%;
}

@media (max-width: 700px) {
  .fortune-price-current { font-size: 13px; }
  .fortune-price-original { font-size: 9px; }
  .qty-control > .fortune-discount-badge {
    padding-inline: 5px;
    font-size: 9px;
  }
}

.purchase-action-pair > .gift-buy-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .46em !important;
}
.gift-button-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.02em;
  height: .84em;
  margin-top: .04em;
  border: max(1px, .08em) solid currentColor;
  border-radius: .16em;
  box-sizing: border-box;
  opacity: .98;
  background:
    linear-gradient(90deg, transparent 41%, currentColor 41% 59%, transparent 59%),
    linear-gradient(currentColor 0 0) center 34% / 100% .13em no-repeat;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, currentColor 22%, transparent),
    0 0 .34em color-mix(in srgb, currentColor 18%, transparent);
}
.gift-button-icon::before {
  content: "";
  position: absolute;
  left: -.09em;
  right: -.09em;
  top: 30%;
  height: .13em;
  background: currentColor;
  border-radius: 99px;
}
.gift-button-icon::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: -.86em;
  color: currentColor;
  font-size: .42em;
  line-height: 1;
  opacity: .88;
  transform: translateX(-50%);
  text-shadow: 0 0 .45em color-mix(in srgb, currentColor 28%, transparent);
}
.gift-button-icon > i::before,
.gift-button-icon > i::after {
  content: "";
  position: absolute;
  top: -.37em;
  width: .42em;
  height: .29em;
  border: max(1px, .08em) solid currentColor;
  border-bottom: 0;
  border-radius: .34em .34em 0 0;
}
.gift-button-icon > i::before {
  right: 50%;
  transform: rotate(-21deg);
  transform-origin: right bottom;
}
.gift-button-icon > i::after {
  left: 50%;
  transform: rotate(21deg);
  transform-origin: left bottom;
}

.gift-compose-dialog,
.gift-compose-dialog.is-success {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gift-compose-overlay.is-success {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--box-glow, #d6b45f) 13%, transparent), transparent 38%),
    rgba(3,5,4,.70);
}
.gift-compose-dialog > *:not(.gift-success-celebration):not(.gift-compose-close) {
  position: relative;
  z-index: 3;
}
.gift-compose-dialog.is-success {
  overflow: visible;
}
.gift-compose-dialog.is-success .gift-compose-visual,
.gift-compose-dialog.is-success .eyebrow,
.gift-compose-dialog.is-success h3,
.gift-compose-dialog.is-success .gift-compose-copy,
.gift-compose-dialog.is-success > .btn {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.58));
}

.gift-success-celebration {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.gift-celebration-item {
  --gift-left: 50%;
  --gift-size: 28px;
  --gift-duration: 8s;
  --gift-delay: 0s;
  --gift-drift: 30px;
  --gift-rotation: 320deg;
  --gift-color: #d84f73;
  --gift-ribbon: #f3d78c;
  position: absolute;
  left: var(--gift-left);
  top: -14vh;
  width: var(--gift-size);
  height: calc(var(--gift-size) * .82);
  border: 1px solid color-mix(in srgb, var(--gift-color) 74%, white 26%);
  border-radius: 4px;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 40%, var(--gift-ribbon) 40% 60%, transparent 60%),
    linear-gradient(var(--gift-color), color-mix(in srgb, var(--gift-color) 76%, black 24%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 7px 16px color-mix(in srgb, var(--gift-color) 30%, transparent),
    0 0 12px color-mix(in srgb, var(--gift-ribbon) 24%, transparent);
  animation: giftCelebrationFall var(--gift-duration) linear var(--gift-delay) infinite;
}
.gift-celebration-item::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 30%;
  height: 18%;
  background: var(--gift-ribbon);
  box-shadow: 0 0 7px color-mix(in srgb, var(--gift-ribbon) 36%, transparent);
}
.gift-celebration-item::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: -1.42em;
  color: var(--gift-ribbon);
  font-size: calc(var(--gift-size) * .42);
  text-shadow: 0 0 8px color-mix(in srgb, var(--gift-ribbon) 64%, transparent);
  transform: translateX(-50%);
}
.gift-celebration-item > i::before,
.gift-celebration-item > i::after {
  content: "";
  position: absolute;
  top: calc(var(--gift-size) * -.34);
  width: calc(var(--gift-size) * .44);
  height: calc(var(--gift-size) * .30);
  border: max(2px, calc(var(--gift-size) * .08)) solid var(--gift-ribbon);
  border-bottom: 0;
  border-radius: 60% 60% 0 0;
}
.gift-celebration-item > i::before {
  right: 50%;
  transform: rotate(-20deg);
  transform-origin: right bottom;
}
.gift-celebration-item > i::after {
  left: 50%;
  transform: rotate(20deg);
  transform-origin: left bottom;
}
.gift-celebration-item:nth-child(1) {
  --gift-left: 3%;
  --gift-size: 24px;
  --gift-duration: 8.2s;
  --gift-delay: -5.8s;
  --gift-drift: 80px;
  --gift-color:#d84f73;
}
.gift-celebration-item:nth-child(2) {
  --gift-left: 10%;
  --gift-size: 34px;
  --gift-duration: 10.4s;
  --gift-delay: -2.1s;
  --gift-drift: -35px;
  --gift-color:#8d60d8;
}
.gift-celebration-item:nth-child(3) {
  --gift-left: 17%;
  --gift-size: 21px;
  --gift-duration: 7.7s;
  --gift-delay: -6.3s;
  --gift-drift: 42px;
  --gift-color:#c58a35;
}
.gift-celebration-item:nth-child(4) {
  --gift-left: 24%;
  --gift-size: 29px;
  --gift-duration: 9.6s;
  --gift-delay: -4.7s;
  --gift-drift: -72px;
  --gift-color:#547e5a;
}
.gift-celebration-item:nth-child(5) {
  --gift-left: 31%;
  --gift-size: 18px;
  --gift-duration: 7.1s;
  --gift-delay: -1.6s;
  --gift-drift: 58px;
  --gift-color:#d84f73;
}
.gift-celebration-item:nth-child(6) {
  --gift-left: 38%;
  --gift-size: 32px;
  --gift-duration: 11.1s;
  --gift-delay: -8.4s;
  --gift-drift: -44px;
  --gift-color:#8d60d8;
}
.gift-celebration-item:nth-child(7) {
  --gift-left: 45%;
  --gift-size: 23px;
  --gift-duration: 8.8s;
  --gift-delay: -3.2s;
  --gift-drift: 76px;
  --gift-color:#c58a35;
}
.gift-celebration-item:nth-child(8) {
  --gift-left: 52%;
  --gift-size: 28px;
  --gift-duration: 9.2s;
  --gift-delay: -7.3s;
  --gift-drift: -54px;
  --gift-color:#547e5a;
}
.gift-celebration-item:nth-child(9) {
  --gift-left: 59%;
  --gift-size: 20px;
  --gift-duration: 7.8s;
  --gift-delay: -4.1s;
  --gift-drift: 64px;
  --gift-color:#d84f73;
}
.gift-celebration-item:nth-child(10) {
  --gift-left: 66%;
  --gift-size: 35px;
  --gift-duration: 10.8s;
  --gift-delay: -9.2s;
  --gift-drift: -86px;
  --gift-color:#8d60d8;
}
.gift-celebration-item:nth-child(11) {
  --gift-left: 73%;
  --gift-size: 22px;
  --gift-duration: 8.4s;
  --gift-delay: -2.7s;
  --gift-drift: 47px;
  --gift-color:#c58a35;
}
.gift-celebration-item:nth-child(12) {
  --gift-left: 80%;
  --gift-size: 30px;
  --gift-duration: 9.9s;
  --gift-delay: -6.9s;
  --gift-drift: -62px;
  --gift-color:#547e5a;
}
.gift-celebration-item:nth-child(13) {
  --gift-left: 87%;
  --gift-size: 19px;
  --gift-duration: 7.4s;
  --gift-delay: -5.1s;
  --gift-drift: 55px;
  --gift-color:#d84f73;
}
.gift-celebration-item:nth-child(14) {
  --gift-left: 94%;
  --gift-size: 27px;
  --gift-duration: 9.1s;
  --gift-delay: -1.1s;
  --gift-drift: -70px;
  --gift-color:#8d60d8;
}
.gift-celebration-item:nth-child(15) {
  --gift-left: 14%;
  --gift-size: 26px;
  --gift-duration: 12.2s;
  --gift-delay: -10.5s;
  --gift-drift: 92px;
  --gift-color:#c58a35;
}
.gift-celebration-item:nth-child(16) {
  --gift-left: 41%;
  --gift-size: 17px;
  --gift-duration: 6.9s;
  --gift-delay: -5.9s;
  --gift-drift: -38px;
  --gift-color:#547e5a;
}
.gift-celebration-item:nth-child(17) {
  --gift-left: 69%;
  --gift-size: 25px;
  --gift-duration: 11.6s;
  --gift-delay: -3.8s;
  --gift-drift: 71px;
  --gift-color:#d84f73;
}
.gift-celebration-item:nth-child(18) {
  --gift-left: 91%;
  --gift-size: 20px;
  --gift-duration: 8.1s;
  --gift-delay: -7.6s;
  --gift-drift: -50px;
  --gift-color:#c58a35;
}
@keyframes giftCelebrationFall {
  0% {
    opacity:0;
    transform:translate3d(0,-12vh,0) rotate(-20deg) scale(.78);
  }
  8%   { opacity:.88; }
  48%  { transform:translate3d(calc(var(--gift-drift) * .45),52vh,0) rotate(calc(var(--gift-rotation) * .52)) scale(1); }
  90%  { opacity:.82; }
  100% {
    opacity:0;
    transform:translate3d(var(--gift-drift),118vh,0) rotate(var(--gift-rotation)) scale(.86);
  }
}

.prize-gallery {
  position: relative;
  transition: padding .25s ease, min-height .25s ease;
}
.prize-gallery .gallery-heading {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  min-height: 52px;
  margin-bottom: 16px;
  text-align: center;
}
.gallery-title-block {
  min-width: 0;
  text-align: center;
}
.gallery-title-block .eyebrow {
  margin-inline: auto;
  text-align: center;
}
.gallery-title-block h3 {
  text-align: center;
}
.gallery-treasure-count {
  position: absolute;
  left: 0;
  bottom: 2px;
  color: var(--gold-soft) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}
.collection-collapse-button {
  position: absolute;
  right: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(214,180,95,.22);
  border-radius: 8px;
  color: rgba(240,217,144,.86);
  background: rgba(13,22,15,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.collection-collapse-button:hover {
  color: #fff0bc;
  border-color: rgba(214,180,95,.42);
  background: rgba(214,180,95,.09);
}
.collection-collapse-button b {
  color: #f0d990;
  font-size: 14px;
  line-height: 1;
}
.collection-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .36fr) minmax(150px, .36fr);
  gap: 10px;
  align-items: stretch;
  margin: 0 0 17px;
}
.collection-search-field,
.collection-select-field {
  position: relative;
  min-width: 0;
  min-height: 46px;
  border: 1px solid rgba(214,180,95,.15);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)),
    rgba(8,14,10,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.collection-search-field {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
}
.collection-search-field > span {
  display: grid;
  place-items: center;
  color: rgba(240,217,144,.68);
  font-size: 21px;
  transform: translateY(-1px);
}
.collection-search-field input,
.collection-select-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  color: rgba(241,244,236,.88);
  background: transparent;
  font: inherit;
  font-size: 11px;
}
.collection-search-field input {
  padding: 0 12px 0 0;
}
.collection-search-field input::placeholder {
  color: rgba(202,211,199,.42);
}
.collection-search-field:focus-within,
.collection-select-field:focus-within {
  border-color: rgba(214,180,95,.38);
  box-shadow: 0 0 0 2px rgba(214,180,95,.055), inset 0 1px 0 rgba(255,255,255,.035);
}
.collection-select-field {
  display: grid;
  grid-template-rows: 15px 1fr;
  padding: 4px 9px 2px;
}
.collection-select-field > span {
  color: rgba(240,217,144,.52);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.collection-select-field select {
  min-height: 25px;
  padding: 0 23px 0 0;
  cursor: pointer;
}
.collection-select-field select option {
  color: #edf1e9;
  background: #111b13;
}
.collection-empty-filter {
  border: 1px dashed rgba(214,180,95,.13);
  border-radius: 10px;
}
.prize-gallery.is-collapsed {
  padding-top: 16px;
  padding-bottom: 16px;
}
.prize-gallery.is-collapsed .gallery-heading {
  min-height: 46px;
  margin-bottom: 0;
}

.rewards-modal-footer .peek-close-button {
  color: var(--action-text) !important;
}

@media (max-width: 820px) {
  .collection-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .collection-search-field {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .prize-gallery .gallery-heading {
    min-height: 88px;
    padding-top: 0;
  }
  .gallery-treasure-count {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .collection-collapse-button {
    top: 0;
    right: 0;
    transform: none;
    min-width: 34px;
    width: 34px;
    padding-inline: 0;
  }
  .collection-collapse-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .prize-gallery.is-collapsed .gallery-heading {
    min-height: 60px;
  }
  .collection-toolbar {
    grid-template-columns: 1fr;
  }
  .collection-search-field,
  .collection-select-field {
    grid-column: 1;
  }
  .gift-compose-dialog {
    width: min(520px, 98vw);
    padding-inline: 14px;
  }
}

.achievement-sort-options {
  background: #0b140e !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
}

.collection-toolbar {
  grid-template-columns: minmax(170px, .34fr) minmax(170px, .34fr) minmax(260px, 1fr) !important;
  overflow: visible;
}
.collection-filter-menu {
  position: relative;
  min-width: 0;
  z-index: 35;
}
.collection-filter-menu[open] {
  z-index: 70;
}
.collection-filter-menu > summary,
.collection-search-field {
  min-height: 48px !important;
  border: 1px solid rgba(214,180,95,.19) !important;
  border-radius: 10px !important;
  background: #0a120d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.16) !important;
}
.collection-filter-menu > summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 12px;
  color: #f3f0e6;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.collection-filter-menu > summary::-webkit-details-marker {
  display: none;
}
.collection-filter-menu > summary > span {
  color: #e6c873;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
}
.collection-filter-menu > summary > strong {
  overflow: hidden;
  color: rgba(242,245,237,.9);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-filter-menu > summary > i {
  color: #f0d990;
  font-size: 17px;
  font-style: normal;
  transition: transform .18s ease;
}
.collection-filter-menu[open] > summary > i {
  transform: rotate(180deg);
}
.collection-filter-options {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  gap: 4px;
  max-height: 310px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(214,180,95,.28);
  border-radius: 11px;
  background: #0b140e !important;
  background-image: none !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.035);
  opacity: 1 !important;
}
.collection-filter-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(242,245,237,.82);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.collection-filter-options button:hover {
  color: #fff3c1;
  border-color: rgba(214,180,95,.2);
  background: rgba(214,180,95,.08);
}
.collection-filter-options button.active {
  color: #171d17;
  background: linear-gradient(135deg,#f3dfa1,#cfa847);
}
.collection-filter-options button b {
  font-size: 13px;
}
.collection-search-field {
  grid-template-columns: 38px minmax(0,1fr) !important;
}
.collection-search-field > span {
  font-size: 23px !important;
}
.collection-search-field input {
  min-height: 46px !important;
  font-size: 13px !important;
}

.carousel-coffer.is-unowned > img,
.carousel-coffer.is-unowned.selected > img,
.carousel-coffer.is-unowned.is-legendary-coffer.selected > img {
  opacity: .43 !important;
  filter: grayscale(1) saturate(0) brightness(.48) contrast(.88) !important;
}
.carousel-coffer.is-unowned .carousel-selected-aura,
.carousel-coffer.is-unowned .carousel-orbit {
  opacity: .18 !important;
  filter: grayscale(1) !important;
}
.carousel-coffer.is-unowned.selected .carousel-selected-aura {
  opacity: .28 !important;
}
.carousel-coffer.is-access-locked > img {
  filter: grayscale(1) saturate(0) brightness(.38) contrast(.84) !important;
}
.carousel-access-seal {
  position: absolute;
  top: 10px;
  right: 9px;
  z-index: 32;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff0bd;
  background: #6d4b12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.34);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.carousel-access-seal.is-vip {
  color: #ffe8f1;
  border-color: rgba(255,143,181,.58);
  background: linear-gradient(135deg,#621b43,#a73868);
}
.carousel-access-seal.is-vip.is-locked {
  color: #ffe3ec;
  border-color: rgba(255,125,168,.7);
  background: #711c45;
}
.carousel-access-seal.is-sold-out {
  top: 37px;
  color: #ffdada;
  border-color: rgba(255,121,121,.52);
  background: #782d2d;
}
.inventory-coffer-seal.is-vip.is-locked {
  color: #ffe0ea;
  border-color: rgba(255,118,164,.72);
  background: linear-gradient(135deg, rgba(108,22,59,.99), rgba(157,43,83,.98));
}
.inventory-buy-now-button {
  color: var(--action-text) !important;
  border-color: color-mix(in srgb, var(--action-bg) 66%, white 18%) !important;
  background: var(--action-bg) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--action-bg) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.inventory-buy-now-button:disabled {
  opacity: .42 !important;
  filter: grayscale(.72) brightness(.7) !important;
  cursor: not-allowed !important;
}

@media (max-width: 820px) {
  .collection-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
  .collection-search-field {
    grid-column: 1 / -1 !important;
    grid-row: 2;
  }
}
@media (max-width: 620px) {
  .collection-toolbar {
    grid-template-columns: 1fr !important;
  }
  .collection-filter-menu,
  .collection-search-field {
    grid-column: 1 !important;
  }
  .collection-search-field {
    grid-row: auto;
  }
  .collection-filter-menu > summary > strong,
  .collection-search-field input {
    font-size: 12.5px !important;
  }
}
.prize-gallery:not(.is-collapsed) {
  overflow: visible !important;
}
.prize-gallery::before {
  border-radius: inherit;
}

.carousel-coffer.is-inactive-owned > img,
.carousel-coffer.is-inactive-owned.selected > img,
.carousel-coffer.is-inactive-owned.is-legendary-coffer.selected > img,
.carousel-coffer.is-inactive-owned.is-unowned > img {
  opacity: 1 !important;
  filter: saturate(1.04) brightness(1.01) drop-shadow(0 22px 22px rgba(3,8,4,.42)) !important;
}
.carousel-coffer.is-inactive-owned .carousel-selected-aura {
  filter: none !important;
}
.carousel-coffer.is-inactive-owned.selected .carousel-selected-aura {
  opacity: 1 !important;
}

.inventory-purchase-picker {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-width: 154px;
}
.inventory-purchase-picker > span {
  color: rgba(241,221,157,.88);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.inventory-purchase-control {
  display: grid;
  grid-template-columns: 35px 64px 35px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(214,180,95,.28);
  border-radius: 10px;
  background: #0b140e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18);
}
.inventory-purchase-control button,
.inventory-purchase-control input {
  height: 38px;
  border: 0;
  color: #f6edcf;
  background: #0b140e;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}
.inventory-purchase-control button {
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.inventory-purchase-control button:hover:not(:disabled) {
  color: #172018;
  background: #efd783;
}
.inventory-purchase-control button:disabled {
  opacity: .3;
  cursor: default;
}
.inventory-purchase-control input {
  min-width: 0;
  border-inline: 1px solid rgba(214,180,95,.18);
  outline: none;
  appearance: textfield;
}
.inventory-purchase-control input::-webkit-inner-spin-button,
.inventory-purchase-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.inventory-purchase-picker > small {
  color: rgba(237,224,181,.74);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.collection-filter-options {
  background: rgb(8, 17, 12) !important;
  background-color: rgb(8, 17, 12) !important;
  background-image: linear-gradient(rgb(8, 17, 12), rgb(8, 17, 12)) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
}
.collection-filter-options button:not(.active) {
  background: rgb(11, 20, 14) !important;
  background-color: rgb(11, 20, 14) !important;
}
.collection-filter-options button:not(.active):hover {
  background: rgb(31, 38, 21) !important;
  background-color: rgb(31, 38, 21) !important;
}

@media (max-width: 760px) {
  .inventory-purchase-picker {
    width: 100%;
    min-width: 0;
  }
  .inventory-purchase-control {
    grid-template-columns: 38px minmax(68px, 88px) 38px;
  }
}

.carousel-track.is-snapping {
  transition: none !important;
}

.prize-gallery {
  content-visibility: visible !important;
  contain: none !important;
}
.collection-filter-options {
  position: absolute !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  background: #08110c !important;
  background-color: #08110c !important;
  background-image: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 0 0 1000px #08110c,
    0 18px 42px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.collection-filter-solid-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
  border-radius: inherit;
  background: #08110c !important;
  opacity: 1 !important;
  pointer-events: none;
}
.collection-filter-options > button {
  position: relative;
  z-index: 2;
  background: #0b140e !important;
  background-color: #0b140e !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.collection-filter-options > button:hover {
  background: #1f2615 !important;
  background-color: #1f2615 !important;
}
.collection-filter-options > button.active {
  background: linear-gradient(135deg,#f3dfa1,#cfa847) !important;
  background-color: #e2c36f !important;
}

.collection-filter-menu > .collection-filter-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(214,180,95,.19);
  border-radius: 10px;
  color: #f3f0e6;
  background: #0a120d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.16);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.collection-filter-menu > .collection-filter-trigger > span {
  color: #e6c873;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
}
.collection-filter-menu > .collection-filter-trigger > strong {
  overflow: hidden;
  color: rgba(242,245,237,.92);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-filter-menu > .collection-filter-trigger > i {
  color: #f0d990;
  font-size: 17px;
  font-style: normal;
  transition: transform .18s ease;
}
.collection-filter-menu.is-open > .collection-filter-trigger > i {
  transform: rotate(180deg);
}
.collection-filter-options-portal {
  position: fixed !important;
  z-index: 2147483000 !important;
  display: grid !important;
  gap: 4px !important;
  max-height: min(310px, calc(100vh - 28px)) !important;
  padding: 7px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(214,180,95,.34) !important;
  border-radius: 11px !important;
  background: #08110c !important;
  background-color: #08110c !important;
  background-image: none !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.045) !important;
  opacity: 1 !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
}
.collection-filter-options-portal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #08110c;
  opacity: 1;
  pointer-events: none;
}
.collection-filter-options-portal > button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(242,245,237,.84);
  background: #0b140e !important;
  background-color: #0b140e !important;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  opacity: 1 !important;
  cursor: pointer;
}
.collection-filter-options-portal > button:hover {
  color: #fff3c1;
  border-color: rgba(214,180,95,.22);
  background: #1f2615 !important;
  background-color: #1f2615 !important;
}
.collection-filter-options-portal > button.active {
  color: #171d17;
  border-color: rgba(255,239,177,.48);
  background: linear-gradient(135deg,#f3dfa1,#cfa847) !important;
  background-color: #e2c36f !important;
}
.collection-filter-options-portal > button b {
  font-size: 13px;
}

.carousel-track {
  min-width: max-content;
}

@media (max-width: 620px) {
  .collection-filter-menu > .collection-filter-trigger > strong {
    font-size: 12.5px;
  }
}

.collection-filter-options-portal,
.achievement-sort-options-portal {
  scrollbar-width: thin;
  scrollbar-color: #c9a84e #08110c;
  overscroll-behavior: contain;
}
.collection-filter-options-portal::-webkit-scrollbar,
.achievement-sort-options-portal::-webkit-scrollbar {
  width: 9px;
}
.collection-filter-options-portal::-webkit-scrollbar-track,
.achievement-sort-options-portal::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #08110c;
}
.collection-filter-options-portal::-webkit-scrollbar-thumb,
.achievement-sort-options-portal::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid #08110c;
  border-radius: 999px;
  background: linear-gradient(180deg, #efd887, #9a7426);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.collection-filter-options-portal::-webkit-scrollbar-thumb:hover,
.achievement-sort-options-portal::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe8a2, #bd9233);
}
.collection-filter-options-portal.is-filter {
  max-height: min(452px, calc(100vh - 24px)) !important;
}

.achievement-sort-menu > .achievement-sort-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(214,180,95,.22);
  border-radius: 11px;
  color: #f3f0e6;
  background: #0a120d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.16);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.achievement-sort-menu > .achievement-sort-trigger > span {
  color: #e6c873;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}
.achievement-sort-menu > .achievement-sort-trigger > strong {
  overflow: hidden;
  color: rgba(242,245,237,.92);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.achievement-sort-menu > .achievement-sort-trigger > i {
  color: #f0d990;
  font-size: 17px;
  font-style: normal;
  transition: transform .18s ease;
}
.achievement-sort-menu.is-open > .achievement-sort-trigger > i {
  transform: rotate(180deg);
}
.achievement-sort-options-portal {
  position: fixed !important;
  z-index: 2147483001 !important;
  display: grid !important;
  gap: 4px !important;
  padding: 7px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(214,180,95,.34) !important;
  border-radius: 11px !important;
  background: #08110c !important;
  background-color: #08110c !important;
  background-image: none !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.045) !important;
  opacity: 1 !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
}
.achievement-sort-options-portal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #08110c;
  opacity: 1;
  pointer-events: none;
}
.achievement-sort-options-portal > button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(242,245,237,.84);
  background: #0b140e !important;
  background-color: #0b140e !important;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  opacity: 1 !important;
  cursor: pointer;
}
.achievement-sort-options-portal > button:hover {
  color: #fff3c1;
  border-color: rgba(214,180,95,.22);
  background: #1f2615 !important;
  background-color: #1f2615 !important;
}
.achievement-sort-options-portal > button.active {
  color: #171d17;
  border-color: rgba(255,239,177,.48);
  background: linear-gradient(135deg,#f3dfa1,#cfa847) !important;
  background-color: #e2c36f !important;
}
.achievement-sort-options-portal > button b {
  font-size: 13px;
}

.collection-filter-options-portal,
.achievement-sort-options-portal {
  transition: none !important;
  animation: none !important;
  contain: layout paint style;
}

.carousel-vip-only-stamp {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 38;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 30px;
  padding: 7px 12px;
  transform: translate(-50%, -50%) rotate(-10deg);
  border: 3px double rgba(255, 232, 174, .94);
  color: #fff1c7;
  background: rgba(74, 18, 50, .92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 165, 202, .17),
    0 0 16px rgba(255, 91, 163, .27),
    0 9px 22px rgba(0,0,0,.48);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .13em;
  text-shadow: 0 2px 5px rgba(33,0,17,.88);
  white-space: nowrap;
  pointer-events: none;
}
.carousel-coffer.selected .carousel-vip-only-stamp {
  min-width: 94px;
  min-height: 33px;
  font-size: 11px;
}

.carousel-coffer.is-vip-coffer.selected {
  filter:
    drop-shadow(0 0 12px rgba(255, 102, 170, .38))
    drop-shadow(0 0 28px rgba(255, 221, 139, .16));
}
.carousel-coffer.is-vip-coffer.selected .carousel-selected-aura {
  background:
    conic-gradient(from 18deg, transparent 0 10%, rgba(255, 214, 133, .17) 14%, transparent 25% 42%, rgba(255, 94, 164, .23) 49%, transparent 61% 78%, rgba(255, 229, 169, .14) 84%, transparent),
    radial-gradient(circle, rgba(255, 99, 169, .26), rgba(111, 23, 69, .18) 39%, transparent 73%) !important;
  animation: vipInventoryAura 2.8s ease-in-out infinite !important;
}
.carousel-coffer.is-vip-coffer.selected > img {
  filter:
    drop-shadow(0 15px 20px rgba(0,0,0,.47))
    drop-shadow(0 0 15px rgba(255, 100, 168, .31)) !important;
}
.carousel-coffer.is-vip-coffer.is-unowned.selected > img,
.carousel-coffer.is-vip-coffer.is-access-locked.selected > img {
  filter: grayscale(1) saturate(0) brightness(.38) contrast(.84) !important;
}
@keyframes vipInventoryAura {
  0%, 100% {
    opacity: .64;
    transform: scale(.95) rotate(-1deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.07) rotate(1deg);
  }
}

.vault-selection.is-vip-coffer {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  width: min(1080px, 100%) !important;
  min-height: 0 !important;
  padding: 31px 38px 27px !important;
  grid-template-columns: minmax(320px, 1fr) auto auto !important;
  gap: 28px !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 52px 52px 68px 68px / 34px 34px 48px 48px !important;
  clip-path: none !important;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(255, 229, 164, .18) 0 8%, transparent 36%),
    radial-gradient(circle at 11% 52%, rgba(255, 97, 169, .16), transparent 31%),
    radial-gradient(circle at 89% 52%, rgba(255, 187, 103, .12), transparent 31%),
    repeating-radial-gradient(circle at 50% 0, rgba(255,255,255,.018) 0 1px, transparent 1px 8px),
    linear-gradient(112deg, rgba(67, 13, 47, .985), rgba(18, 13, 19, .99) 43%, rgba(35, 10, 28, .99) 64%, rgba(76, 25, 23, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 196, .15),
    inset 0 -18px 34px rgba(25, 0, 15, .28),
    0 0 0 1px rgba(255, 204, 126, .28),
    0 0 22px rgba(255, 89, 160, .19),
    0 20px 42px rgba(0,0,0,.38) !important;
  filter: none !important;
}
.vault-selection.is-vip-coffer::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: -1 !important;
  transform: none !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 218, 145, .36) !important;
  border-radius: 45px 45px 60px 60px / 29px 29px 42px 42px !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 18px 18px, #fff1bd 0 1.5px, #dc8b4a 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 18px) 18px, #ffd8e8 0 1.5px, #d44d8c 2px 3px, transparent 4px),
    radial-gradient(circle at 18px calc(100% - 18px), #ffd8e8 0 1.5px, #d44d8c 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #fff1bd 0 1.5px, #dc8b4a 2px 3px, transparent 4px),
    linear-gradient(90deg, transparent 8%, rgba(255, 227, 163, .24) 50%, transparent 92%) top 11px center / 52% 1px no-repeat,
    linear-gradient(90deg, transparent 8%, rgba(255, 111, 174, .19) 50%, transparent 92%) bottom 11px center / 44% 1px no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    inset 0 0 32px rgba(255, 84, 155, .055) !important;
  font-size: 0 !important;
  pointer-events: none;
}
.vault-selection.is-vip-coffer::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  top: auto !important;
  right: auto !important;
  z-index: 1 !important;
  width: 58px !important;
  height: 24px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 213, 133, .42) !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 50% 35%, #fff0b7 0 2px, #e06a9c 2.5px 4px, transparent 5px),
    linear-gradient(180deg, rgba(90, 24, 58, .98), rgba(35, 9, 26, .98)) !important;
  box-shadow: 0 7px 12px rgba(0,0,0,.32), 0 0 12px rgba(255, 92, 160, .16) !important;
  pointer-events: none;
}
.vault-selection.is-vip-coffer > div:not(.vault-selection-texture):not(.vip-selection-regalia) {
  position: relative;
  z-index: 4;
  min-width: 0;
}
.vault-selection.is-vip-coffer .vault-selection-texture {
  z-index: 0 !important;
  overflow: hidden;
  border-radius: inherit;
  opacity: .68;
}
.vault-selection.is-vip-coffer .vault-selection-texture::before,
.vault-selection.is-vip-coffer .vault-selection-texture::after {
  top: 50% !important;
  width: 144px !important;
  height: 144px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border: 1px solid rgba(255, 208, 131, .13) !important;
  border-radius: 46% 54% 44% 56% !important;
  box-shadow:
    0 0 0 10px rgba(255, 79, 150, .018),
    0 0 0 22px rgba(255, 218, 147, .012),
    0 0 24px rgba(255, 85, 153, .07) !important;
}
.vault-selection.is-vip-coffer .vault-selection-texture::before { left: -71px !important; }
.vault-selection.is-vip-coffer .vault-selection-texture::after { right: -71px !important; }
.vault-selection.is-vip-coffer .vault-selection-texture i {
  top: 50% !important;
  width: 21% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 157, .22), rgba(255, 98, 162, .14), transparent) !important;
}
.vault-selection.is-vip-coffer .vault-selection-texture span {
  color: rgba(255, 211, 145, .17) !important;
  text-shadow: 0 0 14px rgba(255, 77, 147, .14);
}

.vip-selection-regalia {
  position: absolute !important;
  left: 50%;
  top: -27px;
  z-index: 8 !important;
  display: grid;
  grid-template-columns: 96px 35px auto 96px;
  align-items: center;
  gap: 8px;
  width: min(520px, 72%);
  min-width: 0 !important;
  transform: translateX(-50%);
  color: #ffe9af;
  pointer-events: none;
}
.vip-selection-regalia > b {
  position: relative;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255, 224, 157, .72);
  border-radius: 50% 50% 45% 45%;
  color: #fff0bc;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.28), transparent 25%),
    linear-gradient(145deg, #9e3a6a, #541738 56%, #b46c31);
  box-shadow:
    inset 0 1px 0 rgba(255,244,215,.28),
    0 0 0 5px rgba(74, 18, 49, .92),
    0 0 0 6px rgba(255, 200, 116, .25),
    0 0 18px rgba(255, 95, 163, .28);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 223, 146, .42);
}
.vip-selection-regalia > em {
  justify-self: center;
  padding: 5px 12px 4px;
  border-block: 1px solid rgba(255, 210, 132, .28);
  color: #f5cde0;
  background: linear-gradient(90deg, transparent, rgba(104, 24, 65, .78), transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .16em;
  text-shadow: 0 0 10px rgba(255, 89, 157, .3);
  white-space: nowrap;
}
.vip-regalia-wing {
  display: grid;
  gap: 4px;
}
.vip-regalia-wing i {
  display: block;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 147, .72), rgba(229, 90, 146, .45));
  box-shadow: 0 0 7px rgba(255, 106, 168, .15);
}
.vip-regalia-wing i:nth-child(1) {
  width: 100%;
  transform: rotate(5deg);
}
.vip-regalia-wing i:nth-child(2) {
  width: 82%;
  justify-self: end;
  transform: rotate(-3deg);
}
.vip-regalia-wing i:nth-child(3) {
  width: 63%;
  justify-self: end;
  transform: rotate(7deg);
}
.vip-regalia-wing.is-right { transform: scaleX(-1); }
.vip-regalia-gems {
  position: absolute;
  left: 50%;
  top: 38px;
  display: flex;
  gap: 17px;
  transform: translateX(-50%);
}
.vip-regalia-gems i {
  display: block;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 226, 165, .72);
  background: #d5538d;
  box-shadow: 0 0 7px rgba(255, 90, 157, .42);
}
.vip-regalia-gems i:nth-child(2) {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  background: #f2bd66;
}

.vault-selection.is-vip-coffer h3 {
  max-width: 100%;
  margin: 2px 0 6px !important;
  color: #fff0d4 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 2.35vw, 35px) !important;
  letter-spacing: .018em;
  text-shadow: 0 0 14px rgba(255, 89, 157, .25), 0 2px 2px rgba(0,0,0,.72) !important;
}
.vault-selection.is-vip-coffer .selected-coffer-label-row .eyebrow {
  color: #eaa7c5 !important;
  text-shadow: 0 0 9px rgba(255, 89, 157, .24);
}
.vault-selection.is-vip-coffer .inventory-coffer-seals {
  margin-top: 8px !important;
}
.vault-selection.is-vip-coffer .open-count-picker,
.vault-selection.is-vip-coffer .inventory-purchase-picker {
  position: relative;
  min-width: 0 !important;
  padding: 9px 16px !important;
  border-block: 1px solid rgba(255, 212, 143, .15) !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 84, 153, .07), transparent 72%) !important;
}
.vault-selection.is-vip-coffer .open-count-picker > span,
.vault-selection.is-vip-coffer .inventory-purchase-picker > span {
  color: #f2b5d0 !important;
}
.vault-selection.is-vip-coffer .open-count-picker button.active {
  border-color: rgba(255, 220, 145, .66) !important;
  color: #4b1732 !important;
  background: linear-gradient(145deg, #ffe6ad, #e66b9e) !important;
  box-shadow: 0 0 15px rgba(255, 91, 158, .23) !important;
}
.vault-selection.is-vip-coffer .vault-action-group {
  display: flex !important;
  min-width: 0 !important;
  gap: 12px !important;
}
.vault-selection.is-vip-coffer .vault-action-group .btn {
  position: relative;
  overflow: hidden;
  min-width: 180px !important;
  padding: 14px 22px !important;
  border-color: rgba(255, 211, 135, .48) !important;
  color: #ffe9c1 !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.055) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(88, 22, 58, .99), rgba(132, 38, 78, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, .17),
    inset 0 -4px 0 rgba(42, 4, 25, .62),
    0 6px 0 rgba(35, 7, 24, .9),
    0 12px 22px rgba(0,0,0,.25) !important;
}
.vault-selection.is-vip-coffer .vault-action-group .open-secondary {
  color: #f5c7dc !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(46, 17, 36, .99), rgba(83, 25, 58, .98)) !important;
}
.vault-selection.is-vip-coffer .vault-action-group .open-button {
  color: #3e142a !important;
  border-color: rgba(255, 239, 187, .72) !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #ffe7ab, #ed7cac 48%, #c24b82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -4px 0 rgba(116, 28, 68, .5),
    0 6px 0 rgba(66, 12, 43, .92),
    0 0 18px rgba(255, 93, 160, .2),
    0 12px 24px rgba(0,0,0,.27) !important;
}
.vault-selection.is-vip-coffer .vault-action-group .btn:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.06);
  transform: translateY(-2px);
}

@media (max-width: 1180px) {
  .vault-selection.is-vip-coffer {
    width: min(920px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 40px 34px 32px !important;
    text-align: center;
  }
  .vault-selection.is-vip-coffer .inventory-coffer-seals,
  .vault-selection.is-vip-coffer .vault-action-group {
    justify-content: center;
  }
  .vault-selection.is-vip-coffer .open-count-picker,
  .vault-selection.is-vip-coffer .inventory-purchase-picker {
    width: min(380px, 100%);
    margin-inline: auto;
  }
}
@media (max-width: 680px) {
  .vault-selection.is-vip-coffer {
    padding: 43px 20px 28px !important;
    border-radius: 34px 34px 46px 46px / 25px 25px 34px 34px !important;
  }
  .vip-selection-regalia {
    grid-template-columns: 42px 31px auto 42px;
    width: 88%;
  }
  .vip-selection-regalia > em {
    padding-inline: 7px;
    font-size: 7px;
    letter-spacing: .11em;
  }
  .vault-selection.is-vip-coffer .vault-action-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .vault-selection.is-vip-coffer .vault-action-group .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.view-shop .hero-copy > p:last-child,
.view-vault .inventory-hero .hero-copy > p:last-child {
  position: relative;
}
.hero-host-line {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  display: block;
  color: rgba(222, 202, 155, .72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 0 10px rgba(214, 180, 95, .12);
  white-space: nowrap;
}
.view-vault .inventory-hero .hero-host-line {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .hero-host-line {
    top: calc(100% + 5px);
    font-size: 9px;
    letter-spacing: .055em;
  }
}

.inventory-link-button:disabled {
  cursor: not-allowed !important;
  opacity: .42 !important;
  filter: grayscale(.58) brightness(.74) !important;
  box-shadow: none !important;
  transform: none !important;
}

.vault-selection.is-vip-coffer {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  width: min(1080px, 100%) !important;
  min-height: 0 !important;
  padding: 42px 82px 34px !important;
  grid-template-columns: minmax(300px, 1fr) auto auto !important;
  gap: 28px !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.vault-selection.is-vip-coffer::before {
  content: "" !important;
  position: absolute !important;
  inset: 9px 46px 13px !important;
  z-index: -2 !important;
  transform: none !important;
  padding: 0 !important;
  border: 1px solid rgba(238, 205, 119, .58) !important;
  border-radius: 108px 108px 38px 38px / 58px 58px 30px 30px !important;
  clip-path: none !important;
  background:
    radial-gradient(ellipse at 50% -4%, rgba(255, 227, 147, .18), transparent 35%),
    radial-gradient(circle at 15% 52%, rgba(190, 45, 94, .12), transparent 29%),
    radial-gradient(circle at 85% 52%, rgba(190, 45, 94, .12), transparent 29%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px),
    linear-gradient(116deg, #17231b 0%, #0b100d 38%, #151c16 62%, #24131a 100%) !important;
  box-shadow:
    inset 0 0 0 7px rgba(6, 11, 8, .72),
    inset 0 0 0 8px rgba(238, 205, 119, .18),
    inset 0 -26px 48px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(0,0,0,.72),
    0 18px 44px rgba(0,0,0,.42),
    0 0 26px rgba(214, 180, 95, .10) !important;
  pointer-events: none;
}
.vault-selection.is-vip-coffer::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 1px !important;
  top: auto !important;
  right: auto !important;
  z-index: 0 !important;
  width: 178px !important;
  height: 30px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(238, 205, 119, .48) !important;
  border-radius: 4px 4px 52% 52% / 4px 4px 100% 100% !important;
  clip-path: none !important;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(214,180,95,.18) 7% 8%, transparent 8% 92%, rgba(214,180,95,.18) 92% 93%, transparent 93%),
    linear-gradient(180deg, #263329, #101711 58%, #080c09) !important;
  box-shadow: 0 8px 14px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,235,177,.12) !important;
  pointer-events: none;
}
.vault-selection.is-vip-coffer > div:not(.vault-selection-texture):not(.vip-selection-regalia):not(.vip-panel-medallion):not(.vip-panel-footer-crest) {
  position: relative;
  z-index: 5;
  min-width: 0;
}
.vault-selection.is-vip-coffer .vault-selection-texture {
  position: absolute !important;
  inset: 18px 56px 22px !important;
  z-index: -1 !important;
  overflow: hidden !important;
  border-radius: 95px 95px 31px 31px / 49px 49px 25px 25px !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(238,205,119,.08), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(151, 35, 77, .10), transparent 37%) !important;
}
.vault-selection.is-vip-coffer .vault-selection-texture::before,
.vault-selection.is-vip-coffer .vault-selection-texture::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 76px !important;
  height: 122px !important;
  transform: translateY(-50%) !important;
  border: 1px solid rgba(238, 205, 119, .14) !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(circle, transparent 0 8px, rgba(238,205,119,.035) 9px 10px) !important;
  box-shadow: none !important;
}
.vault-selection.is-vip-coffer .vault-selection-texture::before { left: -40px !important; }
.vault-selection.is-vip-coffer .vault-selection-texture::after { right: -40px !important; }
.vault-selection.is-vip-coffer .vault-selection-texture i {
  top: 50% !important;
  width: 24% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(238,205,119,.24), rgba(174,48,91,.14), transparent) !important;
}
.vault-selection.is-vip-coffer .vault-selection-texture span {
  color: rgba(238, 205, 119, .14) !important;
  text-shadow: 0 0 12px rgba(214,180,95,.10) !important;
}

.vip-selection-regalia {
  position: absolute !important;
  left: 50% !important;
  top: -8px !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: minmax(70px, 1fr) 48px auto minmax(70px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(590px, 66%) !important;
  min-width: 0 !important;
  transform: translateX(-50%) !important;
  color: #ead49b !important;
  pointer-events: none;
}
.vip-vault-crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(245, 220, 150, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(145deg, #d3b25b, #6d5321 49%, #1a251c 51%, #0c120e);
  box-shadow:
    inset 0 0 0 4px #111a14,
    inset 0 0 0 5px rgba(244,218,145,.32),
    0 0 0 5px rgba(5,9,6,.88),
    0 0 0 6px rgba(214,180,95,.28),
    0 0 18px rgba(214,180,95,.20);
}
.vip-vault-crest b {
  color: #f4dc96;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(244,220,150,.35);
}
.vip-vault-crest i {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 6px;
  height: 11px;
  transform: translate(-50%, -8%);
  border-radius: 50% 50% 3px 3px;
  background: #0b100d;
  box-shadow: 0 0 0 1px rgba(255,225,143,.28);
}
.vip-selection-regalia > em {
  justify-self: center !important;
  min-width: 174px;
  padding: 6px 15px 5px !important;
  border: 1px solid rgba(238, 205, 119, .25) !important;
  border-radius: 999px !important;
  color: #ead9ad !important;
  background: linear-gradient(90deg, rgba(15,24,18,.96), rgba(52,42,22,.92), rgba(15,24,18,.96)) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-align: center;
  text-shadow: 0 0 9px rgba(214,180,95,.18) !important;
  white-space: nowrap;
}
.vip-casino-rail {
  display: grid;
  gap: 5px;
}
.vip-casino-rail i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,205,119,.66), rgba(158,42,81,.36));
  box-shadow: 0 0 7px rgba(214,180,95,.10);
}
.vip-casino-rail i:nth-child(1) { width: 100%; }
.vip-casino-rail i:nth-child(2) {
  width: 78%;
  justify-self: end;
}
.vip-casino-rail i:nth-child(3) {
  width: 52%;
  justify-self: end;
}
.vip-casino-rail.is-right { transform: scaleX(-1); }
.vip-casino-suits {
  position: absolute;
  left: 50%;
  top: 51px;
  display: flex;
  gap: 14px;
  transform: translateX(-50%);
  color: rgba(234, 212, 155, .72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  text-shadow: 0 0 8px rgba(214,180,95,.16);
}
.vip-casino-suits i {
  font-style: normal;
}
.vip-casino-suits i:nth-child(2),
.vip-casino-suits i:nth-child(4) { color: rgba(218, 79, 121, .82); }

.vip-panel-medallion {
  position: absolute !important;
  top: 50% !important;
  z-index: 3 !important;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  transform: translateY(-50%);
  border: 1px solid rgba(238,205,119,.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle, #25352a 0 39%, #111a14 40% 54%, #8b6f2e 55% 58%, #0b100d 59%);
  box-shadow:
    inset 0 0 0 5px rgba(4,8,5,.72),
    0 0 0 5px rgba(8,13,9,.92),
    0 0 0 6px rgba(238,205,119,.26),
    0 9px 22px rgba(0,0,0,.42),
    0 0 18px rgba(214,180,95,.13);
  pointer-events: none;
}
.vip-panel-medallion.is-left { left: 10px !important; }
.vip-panel-medallion.is-right { right: 10px !important; }
.vip-panel-medallion span {
  color: #e8d091;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(214,180,95,.28);
}
.vip-panel-medallion.is-right span { color: #d55c86; }
.vip-panel-footer-crest {
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  z-index: 7 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 154px;
  height: 27px;
  transform: translateX(-50%);
  border: 1px solid rgba(238,205,119,.54);
  border-radius: 3px 3px 50% 50% / 3px 3px 100% 100%;
  color: #e8d091;
  background: linear-gradient(180deg, #28372c, #0d140f 64%, #080c09);
  box-shadow: 0 7px 13px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,236,181,.12);
  pointer-events: none;
}
.vip-panel-footer-crest i {
  display: block;
  width: 33px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,205,119,.52));
}
.vip-panel-footer-crest i:last-child { transform: scaleX(-1); }
.vip-panel-footer-crest b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: .2em;
}

.vault-selection.is-vip-coffer h3 {
  max-width: 100%;
  margin: 2px 0 6px !important;
  color: #f4ead0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 2.35vw, 35px) !important;
  letter-spacing: .018em;
  text-shadow: 0 0 14px rgba(214,180,95,.14), 0 2px 2px rgba(0,0,0,.72) !important;
}
.vault-selection.is-vip-coffer .selected-coffer-label-row .eyebrow,
.vault-selection.is-vip-coffer .open-count-picker > span,
.vault-selection.is-vip-coffer .inventory-purchase-picker > span {
  color: #d8c18a !important;
  text-shadow: 0 0 9px rgba(214,180,95,.14) !important;
}
.vault-selection.is-vip-coffer .open-count-picker,
.vault-selection.is-vip-coffer .inventory-purchase-picker {
  position: relative;
  min-width: 0 !important;
  padding: 9px 16px !important;
  border-block: 1px solid rgba(238,205,119,.15) !important;
  background: radial-gradient(ellipse at center, rgba(214,180,95,.055), transparent 72%) !important;
}
.vault-selection.is-vip-coffer .open-count-picker button.active {
  border-color: rgba(238,205,119,.66) !important;
  color: #162018 !important;
  background: linear-gradient(145deg, #f0d78e, #b9903c) !important;
  box-shadow: 0 0 15px rgba(214,180,95,.18) !important;
}
.vault-selection.is-vip-coffer .vault-action-group {
  display: flex !important;
  min-width: 0 !important;
  gap: 12px !important;
}
.vault-selection.is-vip-coffer .vault-action-group .btn {
  position: relative;
  overflow: hidden;
  min-width: 180px !important;
  padding: 14px 22px !important;
  border-color: rgba(238,205,119,.44) !important;
  color: #ead9ad !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, #17231b, #26352a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,236,181,.12),
    inset 0 -4px 0 rgba(4,8,5,.62),
    0 6px 0 rgba(5,9,6,.92),
    0 12px 22px rgba(0,0,0,.25) !important;
}
.vault-selection.is-vip-coffer .vault-action-group .open-secondary {
  color: #cfc5aa !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, #101812, #1c281f) !important;
}
.vault-selection.is-vip-coffer .vault-action-group .open-button {
  color: #172018 !important;
  border-color: rgba(255,239,187,.72) !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.12) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #f3dea0, #c39b45 52%, #987126) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -4px 0 rgba(86,61,14,.46),
    0 6px 0 rgba(53,37,9,.92),
    0 0 18px rgba(214,180,95,.16),
    0 12px 24px rgba(0,0,0,.27) !important;
}
.vault-selection.is-vip-coffer .vault-action-group .btn:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.04);
  transform: translateY(-2px);
}

@media (max-width: 1180px) {
  .vault-selection.is-vip-coffer {
    width: min(920px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 48px 88px 39px !important;
    text-align: center;
  }
  .vault-selection.is-vip-coffer .inventory-coffer-seals,
  .vault-selection.is-vip-coffer .vault-action-group { justify-content: center; }
  .vault-selection.is-vip-coffer .open-count-picker,
  .vault-selection.is-vip-coffer .inventory-purchase-picker {
    width: min(380px, 100%);
    margin-inline: auto;
  }
}
@media (max-width: 680px) {
  .vault-selection.is-vip-coffer {
    padding: 51px 42px 36px !important;
  }
  .vault-selection.is-vip-coffer::before {
    inset-inline: 16px !important;
    border-radius: 72px 72px 30px 30px / 44px 44px 24px 24px !important;
  }
  .vault-selection.is-vip-coffer .vault-selection-texture { inset-inline: 25px !important; }
  .vip-selection-regalia {
    grid-template-columns: 30px 39px auto 30px !important;
    width: 84% !important;
    gap: 6px !important;
  }
  .vip-vault-crest {
    width: 39px;
    height: 39px;
  }
  .vip-selection-regalia > em {
    min-width: 0;
    padding-inline: 8px !important;
    font-size: 7px !important;
    letter-spacing: .11em !important;
  }
  .vip-casino-suits {
    top: 43px;
    gap: 10px;
    font-size: 8px;
  }
  .vip-panel-medallion {
    width: 54px;
    height: 54px;
  }
  .vip-panel-medallion.is-left { left: -2px !important; }
  .vip-panel-medallion.is-right { right: -2px !important; }
  .vip-panel-medallion span { font-size: 19px; }
  .vault-selection.is-vip-coffer .vault-action-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .vault-selection.is-vip-coffer .vault-action-group .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.vip-vault-crest b {
  display: grid;
  place-items: center;
  color: #f7dda0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(-1px);
  text-shadow:
    0 1px 0 rgba(255,255,255,.26),
    0 0 8px rgba(244,220,150,.42),
    0 0 16px rgba(214,180,95,.18) !important;
}
.vip-vault-crest i { display: none !important; }
.vip-selection-regalia > em {
  min-width: 158px !important;
  letter-spacing: .19em !important;
}

.vault-selection .vault-action-group .open-button:not(.inventory-buy-now-button),
.vault-selection.is-legendary-coffer .vault-action-group .open-button:not(.inventory-buy-now-button),
.vault-selection.is-vip-coffer .vault-action-group .open-button:not(.inventory-buy-now-button) {
  color: #fffaf0 !important;
  border-color: color-mix(in srgb, var(--box-glow) 72%, white 28%) !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--box-glow) 62%, white 38%),
      var(--box-glow) 51%,
      color-mix(in srgb, var(--box-glow) 72%, #090d0a 28%)
    ) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 8px rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -4px 0 color-mix(in srgb, var(--box-glow) 58%, #050806 42%),
    0 6px 0 color-mix(in srgb, var(--box-glow) 34%, #030503 66%),
    0 0 20px color-mix(in srgb, var(--box-glow) 28%, transparent),
    0 12px 24px rgba(0,0,0,.27) !important;
}
.vault-selection .vault-action-group .open-button:not(.inventory-buy-now-button):hover:not(:disabled) {
  filter: brightness(1.11) saturate(1.08) !important;
}

.open-stage {
  isolation: isolate;
  border-color: rgba(151,181,153,.19) !important;
  background:
    radial-gradient(circle at 14% 32%, rgba(103,145,108,.055), transparent 30%),
    radial-gradient(circle at 86% 32%, rgba(103,145,108,.045), transparent 30%),
    linear-gradient(180deg, rgba(24,36,27,.78), rgba(12,20,14,.86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,208,.045),
    inset 0 0 52px rgba(4,10,6,.30),
    0 24px 58px rgba(2,7,4,.27) !important;
}
.open-stage::before {
  opacity: .92 !important;
  background-image:
    radial-gradient(circle at 50% 20px, rgba(248,224,158,.76) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% calc(100% - 20px), rgba(248,224,158,.48) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 15% 24%, rgba(214,180,95,.09) 0 2px, transparent 2.8px),
    radial-gradient(circle at 82% 38%, rgba(247,245,237,.052) 0 1.1px, transparent 1.8px),
    linear-gradient(0deg, transparent 24px, rgba(214,180,95,.024) 24px 25px, transparent 25px),
    linear-gradient(90deg, transparent 24px, rgba(214,180,95,.024) 24px 25px, transparent 25px),
    linear-gradient(135deg, transparent 49.3%, rgba(214,180,95,.026) 49.55% 50.45%, transparent 50.7%),
    linear-gradient(45deg, transparent 49.3%, rgba(247,245,237,.018) 49.55% 50.45%, transparent 50.7%) !important;
  background-size: auto, auto, 170px 170px, 210px 210px, 25px 25px, 25px 25px, 90px 90px, 90px 90px !important;
}
.open-stage::after {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(151,181,153,.12) !important;
  clip-path: polygon(
    24px 0, calc(50% - 84px) 0, calc(50% - 76px) 6px,
    calc(50% + 76px) 6px, calc(50% + 84px) 0, calc(100% - 24px) 0,
    100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%,
    24px 100%, 0 calc(100% - 24px), 0 24px
  );
  background:
    radial-gradient(circle at 18px 18px, rgba(164,195,166,.45) 0 1px, transparent 2px),
    radial-gradient(circle at calc(100% - 18px) 18px, rgba(164,195,166,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 18px calc(100% - 18px), rgba(164,195,166,.34) 0 1px, transparent 2px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(164,195,166,.34) 0 1px, transparent 2px) !important;
  box-shadow: inset 0 0 34px rgba(91,128,95,.018) !important;
}

.vault-carousel {
  isolation: isolate;
  background: transparent !important;
  box-shadow: none !important;
}
.vault-carousel::before,
.vault-carousel::after {
  top: 50% !important;
  z-index: 0 !important;
  width: 74px !important;
  height: 176px !important;
  border: 1px solid rgba(224,197,120,.17) !important;
  border-radius: 0 !important;
  opacity: .78 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(224,197,120,.17) 0 3px, transparent 4px),
    linear-gradient(135deg, rgba(214,180,95,.075), transparent 42%),
    linear-gradient(180deg, rgba(36,51,38,.54), rgba(11,18,13,.18)) !important;
  clip-path: polygon(50% 0, 100% 21%, 76% 50%, 100% 79%, 50% 100%, 0 79%, 24% 50%, 0 21%);
  box-shadow: inset 0 0 20px rgba(214,180,95,.04), 0 0 18px rgba(0,0,0,.18);
}
.vault-carousel::before { left: 10px !important; }
.vault-carousel::after {
  right: 10px !important;
  transform: translateY(-50%) scaleX(-1) !important;
}
.carousel-viewport {
  border-block: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.carousel-viewport::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 50% !important;
  top: 51% !important;
  width: min(610px, 65vw) !important;
  height: 250px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse, rgba(244,226,167,.20) 0%, rgba(214,180,95,.12) 26%, rgba(62,87,65,.18) 48%, transparent 72%) !important;
  filter: blur(22px) !important;
  animation: vaultSpotlight 4.2s ease-in-out infinite !important;
  pointer-events: none !important;
}
.carousel-viewport::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 26% !important;
  bottom: 24% !important;
  left: -35% !important;
  width: 36% !important;
  transform: skewX(-18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(240,217,144,.105), transparent) !important;
  filter: blur(12px) !important;
  animation: vaultLightSweep 7.5s ease-in-out infinite !important;
  pointer-events: none !important;
}
.carousel-arrow {
  text-shadow: 0 0 12px rgba(234,209,139,.26);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.30));
}

@media (max-width: 1180px) {
  .vip-selection-regalia > em { min-width: 0 !important; }
  .vault-carousel::before,
  .vault-carousel::after {
    width: 54px !important;
    height: 138px !important;
    opacity: .54 !important;
  }
}

.carousel-viewport::before,
.carousel-viewport::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.carousel-background-glow,
.carousel-background-sweep {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.carousel-background-glow {
  top: 50%;
  left: -34%;
  width: min(430px, 46vw);
  height: 230px;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(.88);
  background: radial-gradient(
    ellipse at center,
    rgba(250, 235, 188, .24) 0%,
    rgba(214, 180, 95, .15) 25%,
    rgba(91, 132, 97, .19) 48%,
    rgba(48, 79, 55, .08) 62%,
    transparent 75%
  );
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: carouselTravellingGlow 8.8s ease-in-out infinite;
}
.carousel-background-sweep {
  top: 19%;
  bottom: 18%;
  left: -28%;
  width: 22%;
  transform: skewX(-17deg) translate3d(0, 0, 0);
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(239, 222, 168, .03) 18%,
    rgba(249, 236, 196, .17) 50%,
    rgba(137, 177, 142, .07) 76%,
    transparent 100%
  );
  filter: blur(9px);
  mix-blend-mode: screen;
  animation: carouselTravellingSweep 8.8s ease-in-out infinite;
}
@keyframes carouselTravellingGlow {
  0%, 10% {
    left: -34%;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.84);
  }
  24% { opacity: .78; }
  50% {
    left: 50%;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.08);
  }
  76% { opacity: .72; }
  90%, 100% {
    left: 134%;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.88);
  }
}
@keyframes carouselTravellingSweep {
  0%, 12% {
    left: -28%;
    opacity: 0;
  }
  28% { opacity: .72; }
  50% { opacity: .95; }
  72% { opacity: .62; }
  88%, 100% {
    left: 108%;
    opacity: 0;
  }
}

.view-shop .hero-copy .hero-host-line {
  left: 50% !important;
  right: auto !important;
  width: max-content;
  max-width: 100%;
  text-align: center;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-background-glow,
  .carousel-background-sweep {
    animation-duration: 16s !important;
  }
}

.purchase-action-pair > .gift-buy-button {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding-inline: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.purchase-action-pair > .gift-buy-button .gift-button-icon {
  width: 1.16em;
  height: .90em;
  margin: .13em 0 0;
  font-size: 14px;
}
.purchase-action-pair > .box-buy-button {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding-inline: 14px !important;
  font-size: clamp(11px, .94vw, 14px) !important;
  letter-spacing: .055em !important;
}
@media (max-width: 700px) {
  .purchase-action-pair > .gift-buy-button {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
  .purchase-action-pair > .gift-buy-button .gift-button-icon {
    font-size: 14px;
  }
  .purchase-action-pair > .box-buy-button {
    padding-inline: 9px !important;
    font-size: clamp(11px, 3.2vw, 15px) !important;
  }
}

.purchase-action-pair > .gift-buy-button {
  position: relative !important;
  isolation: isolate !important;
  color: transparent !important;
  text-shadow: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  --gift-box-base: color-mix(in srgb, var(--action-bg) 74%, white 26%);
  --gift-box-deep: color-mix(in srgb, var(--gift-box-base) 78%, black 22%);
  --gift-ribbon-main: color-mix(in srgb, var(--action-text) 84%, #d94d72 16%);
  --gift-ribbon-shine: color-mix(in srgb, var(--gift-ribbon-main) 64%, white 36%);
  background:
    radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--gift-ribbon-shine) 40%, transparent) 0 16px, transparent 17px),
    linear-gradient(90deg, transparent 0 37%, var(--gift-ribbon-main) 37% 63%, transparent 63% 100%),
    linear-gradient(180deg, transparent 0 38%, var(--gift-ribbon-main) 38% 58%, transparent 58% 100%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--gift-box-base) 88%, white 12%), var(--gift-box-deep)) !important;
  border-color: color-mix(in srgb, var(--gift-box-base) 74%, white 26%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gift-box-base) 34%, white 66%),
    inset 0 -4px 0 color-mix(in srgb, var(--gift-box-deep) 72%, black 28%),
    0 6px 0 color-mix(in srgb, var(--gift-box-deep) 60%, black 40%),
    0 12px 24px color-mix(in srgb, var(--gift-box-base) 28%, transparent) !important;
}
.purchase-action-pair > .gift-buy-button::before,
.purchase-action-pair > .gift-buy-button::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 15px;
  height: 11px;
  border: 2px solid var(--gift-ribbon-main);
  border-bottom: 0;
  background: color-mix(in srgb, var(--gift-ribbon-shine) 34%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gift-ribbon-main) 26%, transparent);
}
.purchase-action-pair > .gift-buy-button::before {
  left: calc(50% - 14px);
  border-radius: 12px 12px 2px 10px;
  transform: rotate(-24deg);
  transform-origin: right bottom;
}
.purchase-action-pair > .gift-buy-button::after {
  left: calc(50% - 1px);
  border-radius: 12px 12px 10px 2px;
  transform: rotate(24deg);
  transform-origin: left bottom;
}
.purchase-action-pair > .gift-buy-button .gift-button-icon {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.purchase-action-pair > .gift-buy-button:hover:not(:disabled) {
  color: transparent !important;
  background:
    radial-gradient(circle at 50% -16%, color-mix(in srgb, var(--gift-ribbon-shine) 56%, transparent) 0 17px, transparent 18px),
    linear-gradient(90deg, transparent 0 37%, color-mix(in srgb, var(--gift-ribbon-main) 76%, white 24%) 37% 63%, transparent 63% 100%),
    linear-gradient(180deg, transparent 0 38%, color-mix(in srgb, var(--gift-ribbon-main) 76%, white 24%) 38% 58%, transparent 58% 100%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.20) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--gift-box-base) 56%, white 44%), color-mix(in srgb, var(--gift-box-base) 88%, white 12%)) !important;
}
.purchase-action-pair > .gift-buy-button:disabled {
  color: transparent !important;
}
@media (max-width: 700px) {
  .purchase-action-pair > .gift-buy-button::before,
  .purchase-action-pair > .gift-buy-button::after {
    top: 8px;
    width: 13px;
    height: 10px;
  }
  .purchase-action-pair > .gift-buy-button::before {
    left: calc(50% - 12px);
  }
  .purchase-action-pair > .gift-buy-button::after {
    left: calc(50% - 1px);
  }
}

.purchase-action-pair > .gift-buy-button {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.purchase-action-pair > .gift-buy-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: url("/gift-button.svg") center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(103, 58, 183, .38));
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.purchase-action-pair > .gift-buy-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.25), transparent 42%);
  opacity: .52;
  pointer-events: none;
}
.purchase-action-pair > .gift-buy-button .gift-button-icon {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.purchase-action-pair > .gift-buy-button:hover:not(:disabled)::before {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 6px 12px rgba(124, 77, 255, .34)) brightness(1.06);
}
.purchase-action-pair > .gift-buy-button:active:not(:disabled)::before {
  transform: translateY(1px) scale(.985);
}
.purchase-action-pair > .gift-buy-button:disabled {
  opacity: .52 !important;
  filter: saturate(.7) grayscale(.08) !important;
}
.purchase-action-pair > .gift-buy-button:disabled::before {
  opacity: .7;
}
@media (max-width: 700px) {
  .purchase-action-pair > .gift-buy-button {
    flex-basis: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 44px !important;
  }
  .purchase-action-pair > .gift-buy-button::before {
    inset: -1px;
  }
}

.purchase-action-pair > .gift-buy-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.purchase-action-pair > .gift-buy-button::before,
.purchase-action-pair > .gift-buy-button::after,
.purchase-action-pair > .gift-buy-button .gift-button-icon {
  display: none !important;
  content: none !important;
}
.purchase-action-pair > .gift-buy-button .gift-button-art {
  display: block !important;
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: auto;
  filter: hue-rotate(var(--gift-hue, 0deg)) saturate(1.12) brightness(1.03) drop-shadow(0 4px 8px rgba(86, 48, 144, .34));
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  pointer-events: none;
  user-select: none;
}
.purchase-action-pair > .gift-buy-button:hover:not(:disabled) .gift-button-art {
  transform: translateY(-1px) scale(1.035);
  filter: hue-rotate(var(--gift-hue, 0deg)) saturate(1.2) brightness(1.08) drop-shadow(0 6px 12px rgba(108, 62, 176, .38));
}
.purchase-action-pair > .gift-buy-button:active:not(:disabled) .gift-button-art {
  transform: translateY(1px) scale(.985);
}
.purchase-action-pair > .gift-buy-button:disabled .gift-button-art {
  opacity: .52;
  filter: hue-rotate(var(--gift-hue, 0deg)) saturate(.84) brightness(.86) grayscale(.06);
}
@media (max-width: 700px) {
  .purchase-action-pair > .gift-buy-button {
    flex-basis: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 44px !important;
  }
  .purchase-action-pair > .gift-buy-button .gift-button-art {
    width: 48px;
    height: 48px;
  }
}

.purchase-action-pair > button.gift-buy-button,
.purchase-action-pair > button.gift-buy-button:hover:not(:disabled),
.purchase-action-pair > button.gift-buy-button:focus-visible,
.purchase-action-pair > button.gift-buy-button:active:not(:disabled),
.purchase-action-pair > button.gift-buy-button:disabled {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--action-bg) 72%, white 28%) !important;
  border-radius: 8px !important;
  color: transparent !important;
  text-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--action-bg) 66%, white 34%),
      color-mix(in srgb, var(--action-bg) 90%, black 10%)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -4px 0 color-mix(in srgb, var(--action-bg) 68%, black 32%),
    0 5px 0 color-mix(in srgb, var(--action-bg) 52%, black 48%),
    0 8px 14px rgba(0,0,0,.20) !important;
  filter: none !important;
}
.purchase-action-pair > button.gift-buy-button:hover:not(:disabled) {
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--action-bg) 54%, white 46%),
      color-mix(in srgb, var(--action-bg) 82%, white 18%)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -4px 0 color-mix(in srgb, var(--action-bg) 66%, black 34%),
    0 5px 0 color-mix(in srgb, var(--action-bg) 48%, black 52%),
    0 9px 16px rgba(0,0,0,.24) !important;
}
.purchase-action-pair > button.gift-buy-button:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -3px 0 color-mix(in srgb, var(--action-bg) 68%, black 32%),
    0 3px 0 color-mix(in srgb, var(--action-bg) 52%, black 48%),
    0 5px 9px rgba(0,0,0,.18) !important;
}
.purchase-action-pair > button.gift-buy-button::before,
.purchase-action-pair > button.gift-buy-button::after,
.purchase-action-pair > button.gift-buy-button:hover:not(:disabled)::before,
.purchase-action-pair > button.gift-buy-button:hover:not(:disabled)::after,
.purchase-action-pair > button.gift-buy-button:active:not(:disabled)::before,
.purchase-action-pair > button.gift-buy-button:active:not(:disabled)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.purchase-action-pair > button.gift-buy-button .gift-button-art,
.purchase-action-pair > button.gift-buy-button:hover:not(:disabled) .gift-button-art,
.purchase-action-pair > button.gift-buy-button:active:not(:disabled) .gift-button-art {
  display: block !important;
  position: relative;
  z-index: 2;
  width: 46px !important;
  height: 46px !important;
  max-width: none !important;
  object-fit: contain !important;
  opacity: 1;
  transform: translateY(-2px) scale(.88) !important;
  mix-blend-mode: luminosity;
  filter:
    brightness(1.06)
    contrast(.96)
    drop-shadow(0 2px 2px rgba(0,0,0,.26)) !important;
  transition: transform .16s ease, filter .16s ease !important;
  pointer-events: none;
  user-select: none;
}
.purchase-action-pair > button.gift-buy-button:hover:not(:disabled) .gift-button-art {
  transform: translateY(-3px) scale(.91) !important;
  mix-blend-mode: luminosity;
  filter:
    brightness(1.10)
    contrast(.98)
    drop-shadow(0 3px 3px rgba(0,0,0,.28)) !important;
}
.purchase-action-pair > button.gift-buy-button:active:not(:disabled) .gift-button-art {
  transform: translateY(-1px) scale(.86) !important;
}
.purchase-action-pair > button.gift-buy-button:disabled {
  opacity: .58 !important;
}
.purchase-action-pair > button.gift-buy-button:disabled .gift-button-art {
  opacity: .72 !important;
  mix-blend-mode: luminosity;
  filter:
    brightness(.82)
    contrast(.94)
    grayscale(.08)
    drop-shadow(0 2px 2px rgba(0,0,0,.20)) !important;
}
@media (max-width: 700px) {
  .purchase-action-pair > button.gift-buy-button,
  .purchase-action-pair > button.gift-buy-button:hover:not(:disabled),
  .purchase-action-pair > button.gift-buy-button:focus-visible,
  .purchase-action-pair > button.gift-buy-button:active:not(:disabled),
  .purchase-action-pair > button.gift-buy-button:disabled {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 42px !important;
  }
  .purchase-action-pair > button.gift-buy-button .gift-button-art,
  .purchase-action-pair > button.gift-buy-button:hover:not(:disabled) .gift-button-art,
  .purchase-action-pair > button.gift-buy-button:active:not(:disabled) .gift-button-art {
    width: 42px !important;
    height: 42px !important;
    transform: translateY(-2px) scale(.88) !important;
  }
}

.box-card .purchase-action-pair > button.gift-buy-button,
.box-card .purchase-action-pair > button.gift-buy-button:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button:disabled {
  --gift-button-base: color-mix(in srgb, var(--action-bg, #F0D990) 86%, white 14%);
  border-color: color-mix(in srgb, var(--gift-button-base) 76%, white 24%) !important;
  background-color: var(--gift-button-base) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -4px 0 color-mix(in srgb, var(--gift-button-base) 72%, black 28%),
    0 5px 0 color-mix(in srgb, var(--gift-button-base) 56%, black 44%),
    0 8px 14px rgba(0,0,0,.20) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled) {
  --gift-button-base: color-mix(in srgb, var(--action-bg, #F0D990) 80%, white 20%);
  border-color: color-mix(in srgb, var(--gift-button-base) 68%, white 32%) !important;
  background-color: var(--gift-button-base) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -4px 0 color-mix(in srgb, var(--gift-button-base) 70%, black 30%),
    0 5px 0 color-mix(in srgb, var(--gift-button-base) 52%, black 48%),
    0 9px 16px rgba(0,0,0,.24) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled) {
  --gift-button-base: color-mix(in srgb, var(--action-bg, #F0D990) 86%, white 14%);
  background-color: var(--gift-button-base) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -3px 0 color-mix(in srgb, var(--gift-button-base) 72%, black 28%),
    0 3px 0 color-mix(in srgb, var(--gift-button-base) 56%, black 44%),
    0 5px 9px rgba(0,0,0,.18) !important;
}

.box-card .purchase-action-pair > button.gift-buy-button > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled) > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:focus-visible > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled) > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:disabled > img.gift-button-art {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.box-card .purchase-action-pair > button.gift-buy-button::after,
.box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled)::after,
.box-card .purchase-action-pair > button.gift-buy-button:focus-visible::after,
.box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled)::after,
.box-card .purchase-action-pair > button.gift-buy-button:disabled::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  flex: 0 0 31px !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: auto !important;
  opacity: 1 !important;
  background: var(--action-text, #e0e0e0) !important;
  background-color: var(--action-text, #e0e0e0) !important;
  background-image: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.24)) !important;
  -webkit-mask-image: url("/gift-button-reference.png") !important;
  mask-image: url("/gift-button-reference.png") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  transform: none !important;
  transition: filter .16s ease, opacity .16s ease !important;
  pointer-events: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled)::after {
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.27)) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button:disabled::after {
  opacity: .72 !important;
}
@media (max-width: 700px) {
  .box-card .purchase-action-pair > button.gift-buy-button::after,
  .box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled)::after,
  .box-card .purchase-action-pair > button.gift-buy-button:focus-visible::after,
  .box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled)::after,
  .box-card .purchase-action-pair > button.gift-buy-button:disabled::after {
    flex-basis: 29px !important;
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    transform: none !important;
  }
}

.purchase-action-pair > .box-buy-button {
  font-size: 16px !important;
  letter-spacing: .045em !important;
  position: relative !important;
  isolation: isolate !important;
}
.purchase-action-pair > .box-buy-button .box-buy-button-label {
  position: relative;
  z-index: 4;
}
@media (max-width: 700px) {
  .purchase-action-pair > .box-buy-button {
    font-size: 14px !important;
    letter-spacing: .03em !important;
  }
}

.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary,
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary:disabled,
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary:focus-visible {
  color: color-mix(in srgb, var(--action-text) 78%, #6f4300 22%) !important;
  border-color: #d9ad55 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0 2px, transparent 2px calc(100% - 2px), rgba(113,74,6,.10) calc(100% - 2px) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.62), transparent 44%),
    linear-gradient(145deg, #fffdf9 0%, #f8f1e6 37%, #ecdfca 72%, #dfccb0 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 0 rgba(126, 87, 23, .22),
    0 6px 0 rgba(124, 81, 18, .46),
    0 12px 24px rgba(176, 130, 52, .26) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 0 10px rgba(205, 161, 82, .18) !important;
}
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary::before,
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary::before {
  inset: 2px !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(152, 115, 42, .07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 58%, rgba(152, 115, 42, .06) 0 1px, transparent 1.6px),
    linear-gradient(118deg, transparent 0 28%, rgba(137, 109, 70, .08) 31%, transparent 34%, transparent 60%, rgba(137, 109, 70, .05) 63%, transparent 66%),
    linear-gradient(154deg, transparent 0 18%, rgba(128, 102, 67, .05) 21%, transparent 24%, transparent 78%, rgba(128, 102, 67, .05) 81%, transparent 84%),
    linear-gradient(0deg, rgba(255,255,255,.26), rgba(255,255,255,0));
  border: 1px solid rgba(212, 171, 88, .64) !important;
  box-shadow: inset 0 0 0 1px rgba(255,247,228,.86), inset 0 -1px 0 rgba(138,95,24,.10) !important;
}
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary::after {
  inset: 0 !important;
  z-index: 2 !important;
  opacity: .98 !important;
  background:
    radial-gradient(circle at 16px 11px, rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 16px) 11px, rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    radial-gradient(circle at 16px calc(100% - 11px), rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 11px), rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    conic-gradient(from 180deg at 15px 12px, rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from 270deg at calc(100% - 15px) 12px, rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from 90deg at 15px calc(100% - 12px), rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from 0deg at calc(100% - 15px) calc(100% - 12px), rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    radial-gradient(ellipse at center top, rgba(218, 167, 65, .94) 0 1.3px, transparent 1.8px),
    linear-gradient(90deg, transparent 0 25%, rgba(218, 167, 65, .72) 25% 34%, transparent 34% 66%, rgba(218, 167, 65, .72) 66% 75%, transparent 75% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(218, 167, 65, .64) 18% 23%, transparent 23% 77%, rgba(218, 167, 65, .64) 77% 82%, transparent 82% 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) center / 100% 100% no-repeat;
  mask: linear-gradient(#000 0 0) center / 100% 100% no-repeat;
}
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary:hover:not(:disabled) {
  color: color-mix(in srgb, var(--action-text) 82%, #704400 18%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0 2px, transparent 2px calc(100% - 2px), rgba(113,74,6,.12) calc(100% - 2px) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.7), transparent 48%),
    linear-gradient(145deg, #fffefb 0%, #faf3e8 37%, #efe3cf 72%, #e4d2b5 100%) !important;
}
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary:hover:not(:disabled)::before {
  box-shadow: inset 0 0 0 1px rgba(255,250,236,.9), inset 0 -1px 0 rgba(138,95,24,.12), 0 0 14px rgba(219,174,85,.16) !important;
}
.box-card .purchase-action-pair > .box-buy-button.buy-style-legendary .box-buy-button-label {
  z-index: 4 !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button .box-buy-button-label {
  font-size: 16px !important;
  line-height: 1 !important;
}
@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button,
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button .box-buy-button-label {
    font-size: 14px !important;
  }
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary:disabled {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #65410d !important;
  border-color: #d6a842 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.60) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 63%, rgba(151,116,74,.08) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 0 22%, rgba(129,104,77,.06) 24%, transparent 27%, transparent 58%, rgba(129,104,77,.05) 61%, transparent 64%),
    linear-gradient(154deg, transparent 0 18%, rgba(125,99,67,.05) 21%, transparent 24%, transparent 76%, rgba(125,99,67,.04) 79%, transparent 82%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.88), transparent 54%),
    linear-gradient(145deg, #fffefa 0%, #f8f1e5 38%, #eee0ca 72%, #e1ceb0 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -2px 0 rgba(255,247,224,.42),
    inset 0 -7px 0 rgba(126,84,19,.42),
    inset 0 -10px 0 rgba(84,53,11,.22),
    0 7px 0 rgba(118,75,12,.60),
    0 12px 24px rgba(180,132,49,.24) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 0 10px rgba(178,127,36,.14) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary:hover:not(:disabled) {
  color: #573606 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 63%, rgba(151,116,74,.08) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 0 22%, rgba(129,104,77,.06) 24%, transparent 27%, transparent 58%, rgba(129,104,77,.05) 61%, transparent 64%),
    linear-gradient(154deg, transparent 0 18%, rgba(125,99,67,.05) 21%, transparent 24%, transparent 76%, rgba(125,99,67,.04) 79%, transparent 82%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.96), transparent 58%),
    linear-gradient(145deg, #fffffc 0%, #fbf4e9 38%, #f1e4cf 72%, #e6d3b4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(255,248,229,.48),
    inset 0 -7px 0 rgba(126,84,19,.42),
    inset 0 -10px 0 rgba(84,53,11,.22),
    0 7px 0 rgba(118,75,12,.60),
    0 12px 27px rgba(211,162,68,.31) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary::before {
  display: none !important;
  content: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 9px !important;
  display: block !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(255, 246, 224, .32) 0 1px, rgba(146, 97, 17, .92) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 241, 210, .46), inset 0 -1px 0 rgba(102, 63, 10, .88) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.legendary-buy-ornament {
  position: absolute;
  z-index: 2;
  inset: 0 0 8px 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
.legendary-buy-ornament * {
  vector-effect: non-scaling-stroke;
}
.legendary-buy-ivory {
  fill: rgba(255, 252, 245, .12);
  stroke: rgba(255,255,255,.72);
  stroke-width: 1.15;
}
.legendary-buy-gold-outer {
  fill: none;
  stroke: #d7a638;
  stroke-width: 2.35;
}
.legendary-buy-gold-inner {
  fill: none;
  stroke: rgba(178, 126, 29, .62);
  stroke-width: 1.1;
}
.legendary-buy-bottom-lip {
  fill: rgba(170, 116, 24, .16);
  stroke: rgba(106, 67, 13, .20);
  stroke-width: .6;
}
.legendary-buy-top-sheen {
  fill: none;
  stroke: rgba(255,255,255,.58);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.legendary-buy-marble {
  fill: none;
  stroke: rgba(137, 108, 73, .13);
  stroke-width: 1.15;
  stroke-linecap: round;
}
.legendary-buy-marble.is-secondary {
  stroke: rgba(157, 124, 82, .09);
  stroke-width: .85;
}
.legendary-buy-filigree {
  fill: none;
  stroke: #c9942c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}
.legendary-buy-filigree path:nth-child(3),
.legendary-buy-filigree path:nth-child(4),
.legendary-buy-filigree path:nth-child(5) {
  display: none;
}
.legendary-buy-crest path,
.legendary-buy-side-gem path,
.legendary-buy-corner-sparkles path {
  fill: #e7b848;
  stroke: #9f6811;
  stroke-width: 1.05;
  stroke-linejoin: round;
}
.legendary-buy-crest path:nth-child(2),
.legendary-buy-side-gem path:nth-child(2) {
  fill: #fff1a3;
  stroke: #c58a1e;
  stroke-width: .8;
}
.legendary-buy-crest path:nth-child(3) {
  fill: none;
  stroke: #bc8121;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.legendary-buy-crest circle {
  fill: #fff4bd;
  stroke: #b97715;
  stroke-width: .8;
}
.legendary-buy-corner-sparkles {
  opacity: .94;
}
.legendary-buy-corner-sparkles path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary .box-buy-button-label {
  position: relative !important;
  z-index: 5 !important;
  color: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary:disabled .legendary-buy-ornament {
  opacity: .68;
  filter: grayscale(.12) drop-shadow(0 1px 0 rgba(255,255,255,.32));
}
@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary .box-buy-button-label {
    font-size: 14px !important;
    letter-spacing: .03em !important;
  }
  .legendary-buy-filigree,
  .legendary-buy-corner-sparkles {
    opacity: .98;
  }
}

.legendary-buy-corner-sparkles {
  opacity: .96;
}
.legendary-buy-corner-sparkles path {
  stroke-width: .92;
}
.legendary-buy-filigree {
  stroke-width: 1.8;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer:disabled {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #f3e7c5 !important;
  border-color: #b7892f !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 64%, rgba(255,210,120,.08) 0 1px, transparent 2px),
    repeating-linear-gradient(120deg, rgba(255,215,130,.08) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, transparent 2px calc(100% - 2px), rgba(0,0,0,.26) calc(100% - 2px) 100%),
    linear-gradient(145deg, #5d441a 0%, #23190f 18%, #111010 52%, #1d1a17 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(232,197,111,.16),
    inset 0 -7px 0 rgba(0,0,0,.50),
    inset 0 -10px 0 rgba(214,173,79,.12),
    0 7px 0 rgba(45,30,7,.66),
    0 12px 24px rgba(189,143,49,.20) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.72), 0 0 12px rgba(255,223,150,.08) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer:hover:not(:disabled) {
  color: #fff1cd !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 64%, rgba(255,210,120,.10) 0 1px, transparent 2px),
    repeating-linear-gradient(120deg, rgba(255,215,130,.11) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.22) 0 2px, transparent 2px calc(100% - 2px), rgba(0,0,0,.28) calc(100% - 2px) 100%),
    linear-gradient(145deg, #6a4e1e 0%, #2a1f13 18%, #141312 52%, #24201b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(239,206,124,.18),
    inset 0 -7px 0 rgba(0,0,0,.52),
    inset 0 -10px 0 rgba(214,173,79,.14),
    0 7px 0 rgba(45,30,7,.66),
    0 12px 26px rgba(206,157,57,.26) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer::before {
  display: none !important;
  content: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 9px !important;
  display: block !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(231, 194, 108, .24) 0 1px, rgba(32, 24, 10, .96) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(229, 186, 88, .30), inset 0 -1px 0 rgba(8, 8, 8, .95) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.bryer-buy-ornament {
  position: absolute;
  z-index: 2;
  inset: 0 0 8px 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.14));
}
.bryer-buy-ornament * { vector-effect: non-scaling-stroke; }
.bryer-buy-obsidian { fill: rgba(9,9,10,.22); }
.bryer-buy-gold-outer {
  fill: none;
  stroke: #e2b75a;
  stroke-width: 1.7;
}
.bryer-buy-black-band {
  fill: rgba(7,7,8,.58);
  stroke: rgba(143,104,32,.86);
  stroke-width: .95;
}
.bryer-buy-gold-inner {
  fill: none;
  stroke: rgba(243,206,126,.92);
  stroke-width: 1.45;
}
.bryer-buy-green-panel {
  fill: rgba(15,58,49,.76);
  stroke: rgba(236,195,104,.24);
  stroke-width: .72;
}
.bryer-buy-bottom-lip {
  fill: rgba(8, 18, 16, .22);
  stroke: rgba(215, 168, 68, .16);
  stroke-width: .55;
}
.bryer-buy-top-sheen {
  fill: none;
  stroke: rgba(255,255,255,.28);
  stroke-width: .9;
  stroke-linecap: round;
}
.bryer-buy-woodgrain {
  fill: none;
  stroke: rgba(205, 178, 104, .12);
  stroke-width: .95;
  stroke-linecap: round;
}
.bryer-buy-woodgrain.is-two {
  stroke: rgba(236, 213, 156, .10);
  stroke-width: .8;
}
.bryer-buy-woodgrain.is-three {
  stroke: rgba(172, 142, 72, .10);
  stroke-width: .72;
}
.bryer-buy-green-crack {
  fill: none;
  stroke: rgba(219,184,92,.17);
  stroke-width: .92;
  stroke-linecap: round;
}
.bryer-buy-green-crack.is-two {
  stroke: rgba(214,172,72,.10);
  stroke-width: .72;
}
.bryer-buy-top-bottom-frame path {
  fill: none;
  stroke: rgba(214,173,79,.94);
  stroke-width: 1.08;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bryer-buy-center-crest path {
  fill: #129a82;
  stroke: #dcae49;
  stroke-width: 1.05;
  stroke-linejoin: round;
}
.bryer-buy-center-crest path:nth-child(2) {
  fill: #1dd0b4;
  stroke: #f6d788;
  stroke-width: .74;
}
.bryer-buy-center-crest path:nth-child(3) {
  fill: none;
  stroke: #c69434;
  stroke-width: 1.18;
  stroke-linecap: round;
}
.bryer-buy-center-skull-frame {
  fill: rgba(10, 123, 104, .78);
  stroke: #dcae49;
  stroke-width: .92;
  stroke-linejoin: round;
}
.bryer-buy-center-skull-frame-inner {
  fill: rgba(29, 208, 180, .32);
  stroke: #f6d788;
  stroke-width: .62;
  stroke-linejoin: round;
}
.bryer-buy-center-skull-arch {
  fill: none;
  stroke: #c69434;
  stroke-width: .96;
  stroke-linecap: round;
}
.bryer-buy-center-skull-icon path {
  fill: rgba(242, 228, 198, .98);
  stroke: #8f6118;
  stroke-width: .54;
  stroke-linejoin: round;
}
.bryer-buy-center-skull-icon circle { fill: rgba(20, 19, 18, .96); }
.bryer-buy-side-flare {
  fill: rgba(12,12,13,.44);
  stroke: #dbaa49;
  stroke-width: .92;
  stroke-linejoin: round;
}
.bryer-buy-side-plaque {
  fill: rgba(13, 67, 56, .56);
  stroke: rgba(220, 174, 73, .92);
  stroke-width: .92;
  stroke-linejoin: round;
}
.bryer-buy-side-scroll {
  fill: none;
  stroke: #cb9736;
  stroke-width: .86;
  stroke-linecap: round;
}
.bryer-buy-side-notch {
  fill: none;
  stroke: rgba(215, 168, 68, .78);
  stroke-width: 1.05;
  stroke-linecap: round;
}
.bryer-buy-skull path {
  fill: rgba(240,226,197,.97);
  stroke: #96661b;
  stroke-width: .58;
  stroke-linejoin: round;
}
.bryer-buy-skull circle { fill: rgba(17,17,17,.92); }
.bryer-buy-studs path {
  fill: #d7a844;
  stroke: #83520f;
  stroke-width: .62;
  stroke-linejoin: round;
  opacity: .92;
}
.bryer-buy-sparkles path {
  fill: #f8d986;
  stroke: #9d6a19;
  stroke-width: .56;
  stroke-linejoin: round;
  opacity: .84;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer .box-buy-button-label {
  position: relative !important;
  z-index: 5 !important;
  color: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer:disabled .bryer-buy-ornament {
  opacity: .7;
  filter: grayscale(.1) drop-shadow(0 1px 0 rgba(255,255,255,.1));
}
@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer .box-buy-button-label {
    font-size: 14px !important;
    letter-spacing: .03em !important;
  }
}

.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:hover:not(:disabled),
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:active:not(:disabled),
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:disabled {

}

.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:disabled {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: #d6a842 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.60) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 0 22%, rgba(129,104,77,.06) 24%, transparent 27%, transparent 58%, rgba(129,104,77,.05) 61%, transparent 64%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.88), transparent 54%),
    linear-gradient(145deg, #fffefa 0%, #f8f1e5 38%, #eee0ca 72%, #e1ceb0 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -2px 0 rgba(255,247,224,.42),
    inset 0 -7px 0 rgba(126,84,19,.42),
    inset 0 -10px 0 rgba(84,53,11,.22),
    0 5px 0 rgba(118,75,12,.60),
    0 8px 14px rgba(180,132,49,.22) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:hover:not(:disabled) {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 0 22%, rgba(129,104,77,.06) 24%, transparent 27%, transparent 58%, rgba(129,104,77,.05) 61%, transparent 64%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.96), transparent 58%),
    linear-gradient(145deg, #fffffc 0%, #fbf4e9 38%, #f1e4cf 72%, #e6d3b4 100%) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before {
  display: none !important;
  content: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 8px !important;
  display: block !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(255, 246, 224, .32) 0 1px, rgba(146, 97, 17, .92) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 241, 210, .46), inset 0 -1px 0 rgba(102, 63, 10, .88) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.legendary-gift-ornament {
  position: absolute;
  inset: 0 0 8px 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.legendary-gift-ornament * { vector-effect: non-scaling-stroke; }
.legendary-gift-ivory { fill: rgba(255, 251, 242, .90); }
.legendary-gift-gold-outer {
  fill: none;
  stroke: #e1b55b;
  stroke-width: 1.8;
}
.legendary-gift-gold-inner {
  fill: none;
  stroke: rgba(178,126,29,.68);
  stroke-width: 1;
}
.legendary-gift-bottom-lip {
  fill: rgba(170,116,24,.16);
  stroke: rgba(106,67,13,.20);
  stroke-width: .55;
}
.legendary-gift-top-sheen {
  fill: none;
  stroke: rgba(255,255,255,.58);
  stroke-width: 1;
  stroke-linecap: round;
}
.legendary-gift-marble {
  fill: none;
  stroke: rgba(171,133,84,.20);
  stroke-width: .95;
  stroke-linecap: round;
}
.legendary-gift-marble.is-two {
  stroke: rgba(208,176,132,.16);
  stroke-width: .82;
}
.legendary-gift-filigree-left path,
.legendary-gift-filigree-right path {
  fill: none;
  stroke: #ca9837;
  stroke-width: 1.02;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legendary-gift-crest-top path {
  fill: #c3912f;
  stroke: #f8df9a;
  stroke-width: .68;
  stroke-linejoin: round;
}
.legendary-gift-crest-top path:nth-child(2) {
  fill: #f8df9a;
  stroke: #c3912f;
  stroke-width: .52;
}
.legendary-gift-sparkles path {
  fill: #f8d986;
  stroke: #9d6a19;
  stroke-width: .56;
  stroke-linejoin: round;
  opacity: .84;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-art {
  display: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:hover:not(:disabled) > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:focus-visible > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:active:not(:disabled) > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:disabled > img.gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament + img,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:hover:not(:disabled)::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:focus-visible::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:active:not(:disabled)::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:disabled::after { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg + img { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-icon,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .bryer-gift-icon { display: none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img.gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg.legendary-gift-ornament ~ img.gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::marker { content: none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament ~ .gift-button-art { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament ~ img.gift-button-art { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary {
  color: #65410d !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > span,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > span {
  position: relative;
  z-index: 4;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > img.gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-icon-mask,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .gift-icon-mask { display: none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::selection { background: transparent; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::after { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament::after { content:none; }

.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament + .gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .bryer-gift-ornament + .gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament + img + .gift-icon,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament + img + .gift-icon { display:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer {
  justify-content: center !important;
  align-items: center !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .gift-button-art { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::selection,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::selection { background: transparent; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > svg { pointer-events:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }

.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:disabled {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: #b7892f !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    repeating-linear-gradient(120deg, rgba(255,215,130,.08) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, transparent 2px calc(100% - 2px), rgba(0,0,0,.26) calc(100% - 2px) 100%),
    linear-gradient(145deg, #5d441a 0%, #23190f 18%, #111010 52%, #1d1a17 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(232,197,111,.16),
    inset 0 -7px 0 rgba(0,0,0,.50),
    inset 0 -10px 0 rgba(214,173,79,.12),
    0 5px 0 rgba(45,30,7,.66),
    0 8px 14px rgba(189,143,49,.18) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:hover:not(:disabled) {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.24) 0 1px, transparent 2px),
    repeating-linear-gradient(120deg, rgba(255,215,130,.11) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.22) 0 2px, transparent 2px calc(100% - 2px), rgba(0,0,0,.28) calc(100% - 2px) 100%),
    linear-gradient(145deg, #6a4e1e 0%, #2a1f13 18%, #141312 52%, #24201b 100%) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before {
  display: none !important;
  content: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 8px !important;
  display: block !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(231, 194, 108, .24) 0 1px, rgba(32, 24, 10, .96) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(229, 186, 88, .30), inset 0 -1px 0 rgba(8, 8, 8, .95) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.bryer-gift-ornament {
  position: absolute;
  inset: 0 0 8px 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.bryer-gift-ornament * { vector-effect: non-scaling-stroke; }
.bryer-gift-obsidian { fill: rgba(9, 9, 10, .22); }
.bryer-gift-gold-outer {
  fill: none;
  stroke: #e2b75a;
  stroke-width: 1.55;
}
.bryer-gift-black-band {
  fill: rgba(7, 7, 8, .58);
  stroke: rgba(143, 104, 32, .86);
  stroke-width: .9;
}
.bryer-gift-green-panel {
  fill: rgba(15, 58, 49, .76);
  stroke: rgba(236, 195, 104, .22);
  stroke-width: .62;
}
.bryer-gift-bottom-lip {
  fill: rgba(8, 18, 16, .22);
  stroke: rgba(215, 168, 68, .16);
  stroke-width: .5;
}
.bryer-gift-top-sheen {
  fill: none;
  stroke: rgba(255,255,255,.24);
  stroke-width: .75;
  stroke-linecap: round;
}
.bryer-gift-woodgrain {
  fill: none;
  stroke: rgba(205, 178, 104, .12);
  stroke-width: .82;
  stroke-linecap: round;
}
.bryer-gift-woodgrain.is-two {
  stroke: rgba(236, 213, 156, .10);
  stroke-width: .68;
}
.bryer-gift-woodgrain.is-three {
  stroke: rgba(172, 142, 72, .10);
  stroke-width: .62;
}
.bryer-gift-side-plaque {
  fill: rgba(13, 67, 56, .56);
  stroke: rgba(220, 174, 73, .92);
  stroke-width: .8;
  stroke-linejoin: round;
}
.bryer-gift-side-notch {
  fill: none;
  stroke: rgba(215, 168, 68, .78);
  stroke-width: .9;
  stroke-linecap: round;
}
.bryer-gift-skull path {
  fill: rgba(242, 228, 198, .97);
  stroke: #96661b;
  stroke-width: .54;
  stroke-linejoin: round;
}
.bryer-gift-skull circle { fill: rgba(17,17,17,.92); }
.bryer-gift-center-skull-frame {
  fill: rgba(10, 123, 104, .78);
  stroke: #dcae49;
  stroke-width: .82;
  stroke-linejoin: round;
}
.bryer-gift-center-skull-frame-inner {
  fill: rgba(29, 208, 180, .32);
  stroke: #f6d788;
  stroke-width: .56;
  stroke-linejoin: round;
}
.bryer-gift-center-skull path {
  fill: rgba(242, 228, 198, .98);
  stroke: #8f6118;
  stroke-width: .48;
  stroke-linejoin: round;
}
.bryer-gift-center-skull circle { fill: rgba(20,19,18,.96); }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary {
  justify-content: center !important;
  align-items: center !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::after {
  z-index: 1 !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > svg { z-index: 2; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .gift-button-art {
  display: none !important;
}

.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > svg::after { content:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament { pointer-events:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::marker,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::marker { content:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > img { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament + img,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament + img { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-overlay,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .gift-button-overlay { display:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament { position:absolute; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { background:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > img {
  opacity:0 !important;
  visibility:hidden !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::selection,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::selection { background:transparent; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > svg { pointer-events:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::after { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary span,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer span { display:none; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .bryer-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { content:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > img.gift-button-art { display:none !important; }

.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > svg,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > svg { overflow: visible; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::selection,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::selection { background: transparent; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .bryer-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::after { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > img.gift-button-art { display: none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .gift-button-art { display:none !important; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::after,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::after { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::selection,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::selection { background:transparent; }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer {
  color: transparent !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary > .legendary-gift-ornament,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer > .bryer-gift-ornament { }
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, calc(-50% - 3px)) !important;
  width: 26px !important;
  height: 26px !important;
  z-index: 4 !important;
  background: currentColor !important;
  box-shadow: none !important;
  -webkit-mask: url("/gift-button-reference.png") center / contain no-repeat !important;
  mask: url("/gift-button-reference.png") center / contain no-repeat !important;
  pointer-events: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary {
  color: #65410d !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer {
  color: #f3e7c5 !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:hover:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:hover:not(:disabled)::before {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.24)) !important;
}
@media (max-width: 700px) {
  .box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
  .box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before {
    width: 24px !important;
    height: 24px !important;
  }
}

.box-card .purchase-action-pair > button.gift-buy-button {
  justify-content: center !important;
  align-items: center !important;
}
.box-card .purchase-action-pair > button.gift-buy-button > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled) > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:focus-visible > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled) > img.gift-button-art,
.box-card .purchase-action-pair > button.gift-buy-button:disabled > img.gift-button-art {
  display: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:disabled {
  color: var(--action-text, #1b1b1b) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--action-bg) 76%, white 24%), var(--action-bg)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--action-bg) 35%, white 65%),
    inset 0 -4px 0 color-mix(in srgb, var(--action-bg) 72%, black 28%),
    0 6px 0 color-mix(in srgb, var(--action-bg) 58%, black 42%),
    0 12px 24px color-mix(in srgb, var(--action-bg) 28%, transparent) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:hover:not(:disabled) {
  color: var(--action-text, #1b1b1b) !important;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, color-mix(in srgb, var(--action-bg) 64%, white 36%), color-mix(in srgb, var(--action-bg) 92%, white 8%)) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:disabled {
  color: #65410d !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:hover:not(:disabled) {
  color: #573606 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 0 22%, rgba(129,104,77,.06) 24%, transparent 27%, transparent 58%, rgba(129,104,77,.05) 61%, transparent 64%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.96), transparent 58%),
    linear-gradient(145deg, #fffffc 0%, #fbf4e9 38%, #f1e4cf 72%, #e6d3b4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(255,248,229,.48),
    inset 0 -7px 0 rgba(126,84,19,.42),
    inset 0 -10px 0 rgba(84,53,11,.22),
    0 5px 0 rgba(118,75,12,.60),
    0 8px 14px rgba(211,162,68,.31) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:focus-visible,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:disabled {
  color: #f3e7c5 !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:hover:not(:disabled) {
  color: #fff1cd !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.24) 0 1px, transparent 2px),
    repeating-linear-gradient(120deg, rgba(255,215,130,.11) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.22) 0 2px, transparent 2px calc(100% - 2px), rgba(0,0,0,.28) calc(100% - 2px) 100%),
    linear-gradient(145deg, #6a4e1e 0%, #2a1f13 18%, #141312 52%, #24201b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(239,206,124,.18),
    inset 0 -7px 0 rgba(0,0,0,.52),
    inset 0 -10px 0 rgba(214,173,79,.14),
    0 5px 0 rgba(45,30,7,.66),
    0 8px 14px rgba(206,157,57,.26) !important;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:hover:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:focus-visible::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:active:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default:disabled::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:hover:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:focus-visible::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:active:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary:disabled::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:hover:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:focus-visible::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:active:not(:disabled)::before,
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer:disabled::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol,
.box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled) .gift-button-symbol,
.box-card .purchase-action-pair > button.gift-buy-button:focus-visible .gift-button-symbol,
.box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled) .gift-button-symbol,
.box-card .purchase-action-pair > button.gift-buy-button:disabled .gift-button-symbol {
  position: relative;
  z-index: 4;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transform: translateY(-1px);
}
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-lid-fill,
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-box-fill {
  fill: #f1c24d;
}
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-ribbon-fill,
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-bow-fill,
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-knot-fill {
  fill: #8c54d8;
}
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-outline,
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-bow-outline {
  fill: none;
  stroke: #fff7df;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol .gift-symbol-highlight {
  fill: none;
  stroke: rgba(255,255,255,.38);
  stroke-width: 1.05;
  stroke-linecap: round;
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-default .gift-button-symbol {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-legendary .gift-button-symbol {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.24)) drop-shadow(0 2px 2px rgba(117,80,19,.12));
}
.box-card .purchase-action-pair > button.gift-buy-button.gift-style-bryer .gift-button-symbol {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.22)) drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.box-card .purchase-action-pair > button.gift-buy-button:disabled .gift-button-symbol {
  opacity: .76 !important;
}
@media (max-width: 700px) {
  .box-card .purchase-action-pair > button.gift-buy-button .gift-button-symbol,
  .box-card .purchase-action-pair > button.gift-buy-button:hover:not(:disabled) .gift-button-symbol,
  .box-card .purchase-action-pair > button.gift-buy-button:focus-visible .gift-button-symbol,
  .box-card .purchase-action-pair > button.gift-buy-button:active:not(:disabled) .gift-button-symbol,
  .box-card .purchase-action-pair > button.gift-buy-button:disabled .gift-button-symbol {
    width: 22px;
    height: 22px;
  }
}

.qty-control {
  align-items: center !important;
}
.qty-gift-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 2px 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  cursor: pointer;
  flex: 0 0 34px;
  transform: translateY(1px);
}
.qty-gift-button:hover:not(:disabled) {
  transform: translateY(0px) scale(1.03);
  filter: drop-shadow(0 3px 8px rgba(255, 197, 86, .18));
}
.qty-gift-button:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
}
.qty-gift-button:focus-visible {
  outline: 2px solid rgba(232, 196, 103, .55);
  outline-offset: 3px;
  border-radius: 8px;
}
.qty-gift-button:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.12);
}
.qty-gift-button-art {
  display: block;
  width: 30px;
  height: auto;
  max-height: 30px;
  object-fit: contain;
  pointer-events: none;
}
.box-card .purchase-action-pair {
  display: block !important;
  width: 100% !important;
}
.box-card .purchase-action-pair > .box-buy-button,
.box-card .purchase-action-pair > .btn.primary.box-buy-button,
.box-card .purchase-action-pair > button.btn.primary.box-buy-button {
  width: 100% !important;
  flex: none !important;
  min-width: 0 !important;
  max-width: none !important;
}
@media (max-width: 700px) {
  .qty-gift-button {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .qty-gift-button-art {
    width: 26px;
    max-height: 26px;
  }
}

.qty-gift-button {
  margin: 0 !important;
  transform: translate(-2px, -1px) !important;
}
.qty-gift-button:hover:not(:disabled) {
  transform: translate(-2px, -2px) scale(1.03) !important;
}
.qty-gift-button:active:not(:disabled) {
  transform: translate(-2px, -1px) scale(.98) !important;
}

.box-card .card-actions .purchase-action-pair {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}
.box-card .card-actions .purchase-action-pair.purchase-style-legendary,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer {
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > .box-buy-button,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > .box-buy-button {
  position: relative !important;
  z-index: 3 !important;
}

.legendary-buy-stage,
.bryer-buy-stage {
  position: absolute;
  z-index: 1;
  left: -17px;
  top: 50%;
  width: calc(100% + 34px);
  height: 94px;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
}
.legendary-buy-stage * ,
.bryer-buy-stage * {
  vector-effect: non-scaling-stroke;
}

.legendary-stage-wing {
  fill: rgba(246, 236, 218, .97);
  stroke: #d7a63e;
  stroke-width: 2.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgba(104, 68, 12, .26));
}
.legendary-stage-wing-inner {
  fill: rgba(255, 252, 244, .58);
  stroke: rgba(185, 126, 27, .84);
  stroke-width: 1.1;
}
.legendary-stage-crown,
.legendary-stage-pendant {
  fill: rgba(119, 77, 16, .82);
  stroke: #dcad49;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgba(91, 59, 12, .28));
}
.legendary-stage-crown-inner,
.legendary-stage-pendant-inner {
  fill: rgba(250, 239, 213, .92);
  stroke: rgba(191, 132, 31, .82);
  stroke-width: 1;
}
.legendary-stage-gem path,
.legendary-stage-side-gem path {
  fill: #e5af3d;
  stroke: #925d0d;
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.legendary-stage-gem path:nth-child(2),
.legendary-stage-side-gem path:nth-child(2) {
  fill: #fff1a9;
  stroke: #bc7e17;
  stroke-width: .82;
}
.legendary-stage-thread {
  fill: none;
  stroke: rgba(212, 164, 66, .82);
  stroke-width: 1.15;
  stroke-linecap: round;
}
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary,
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:focus-visible,
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:disabled {
  border-radius: 21px 21px 12px 12px / 50% 50% 30% 30% !important;
  overflow: hidden !important;
}

.bryer-stage-blade {
  fill: rgba(13, 13, 14, .96);
  stroke: #d3a344;
  stroke-width: 2.1;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .38));
}
.bryer-stage-blade-inner {
  fill: rgba(14, 72, 60, .88);
  stroke: rgba(228, 184, 85, .88);
  stroke-width: 1.15;
  stroke-linejoin: round;
}
.bryer-stage-top-armor,
.bryer-stage-bottom-armor {
  fill: rgba(18, 17, 16, .96);
  stroke: #d3a344;
  stroke-width: 1.9;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .38));
}
.bryer-stage-top-green,
.bryer-stage-bottom-green {
  fill: rgba(13, 76, 64, .92);
  stroke: rgba(222, 174, 74, .88);
  stroke-width: 1.05;
}
.bryer-stage-skull path {
  fill: #f0e3c5;
  stroke: #936219;
  stroke-width: .62;
  stroke-linejoin: round;
}
.bryer-stage-skull circle {
  fill: #131211;
}
.bryer-stage-connector {
  fill: none;
  stroke: rgba(211, 164, 68, .86);
  stroke-width: 1.15;
  stroke-linecap: round;
}
.bryer-stage-stud {
  fill: #d9a83f;
  stroke: #7f500d;
  stroke-width: .8;
}
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:focus-visible,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:disabled {
  border-radius: 5px 15px 5px 15px / 18px 42% 18px 42% !important;
  overflow: hidden !important;
}

@media (max-width: 700px) {
  .qty-gift-button { transform: translate(-2px, -1px) !important; }
  .qty-gift-button:hover:not(:disabled) { transform: translate(-2px, -2px) scale(1.03) !important; }
  .qty-gift-button:active:not(:disabled) { transform: translate(-2px, -1px) scale(.98) !important; }
  .legendary-buy-stage,
  .bryer-buy-stage {
    left: -13px;
    width: calc(100% + 26px);
    height: 84px;
  }
  .box-card .card-actions .purchase-action-pair.purchase-style-legendary,
  .box-card .card-actions .purchase-action-pair.purchase-style-bryer {
    margin-top: 9px !important;
    margin-bottom: 19px !important;
  }
}

.box-visual:has(.box-peek-trigger:hover)::before,
.box-visual:has(.box-peek-trigger:focus-visible)::before {
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--box-glow) 56%, white 16%) 0 9%,
      color-mix(in srgb, var(--box-glow) 38%, transparent) 25%,
      color-mix(in srgb, var(--box-glow) 23%, #2D3E2E 77%) 49%,
      rgba(45,62,46,.12) 65%,
      transparent 78%) !important;
}

.box-peek-trigger {
  appearance: none;
  position: relative;
  z-index: 2;
  width: 195px;
  height: 195px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  outline: none;
}
.box-peek-trigger img {
  width: 195px !important;
  height: 195px !important;
  object-fit: contain;
  transition: transform .24s ease, filter .24s ease, opacity .24s ease !important;
}
.box-peek-trigger:hover img,
.box-peek-trigger:focus-visible img {
  transform: translateY(-4px) scale(1.04) !important;
  filter: drop-shadow(0 25px 24px rgba(3,8,4,.4)) brightness(.72) !important;
}
.box-peek-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--box-glow) 58%, white 18%);
  outline-offset: 5px;
}
.box-peek-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff2cb;
  opacity: 0;
  transform: translateY(5px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.8), 0 0 15px color-mix(in srgb, var(--box-glow) 38%, transparent);
}
.box-peek-trigger:hover .box-peek-overlay,
.box-peek-trigger:focus-visible .box-peek-overlay {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.box-peek-overlay b {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
}
.box-peek-eye {
  position: relative;
  width: 42px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 75% 12%;
  transform: rotate(45deg);
  box-shadow: 0 0 13px color-mix(in srgb, var(--box-glow) 48%, transparent);
}
.box-peek-eye i {
  width: 13px;
  height: 13px;
  display: block;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 0 0 0 4px #5a3a0d, 0 0 9px currentColor;
}

.box-card .card-actions {
  grid-template-columns: 1fr !important;
}
.box-card .card-actions > .purchase-action-pair {
  grid-column: 1 / -1 !important;
}

.purchase-dialog,
.purchase-dialog.is-confirming,
.purchase-dialog.is-success {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.purchase-dialog::before,
.purchase-dialog.is-confirming::before,
.purchase-dialog.is-success::before {
  content: none !important;
  display: none !important;
}
.purchase-current-owned {
  margin: -17px 0 1px;
  color: rgba(247,245,237,.76);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.purchase-current-owned strong {
  color: var(--gold-soft);
  font-size: 14px;
  font-weight: 900;
}

.legendary-stage-crown,
.legendary-stage-crown-inner,
.legendary-stage-pendant,
.legendary-stage-pendant-inner,
.legendary-stage-thread,
.bryer-stage-top-armor,
.bryer-stage-bottom-armor,
.bryer-stage-top-green,
.bryer-stage-bottom-green,
.bryer-stage-connector {
  display: none !important;
}

.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary,
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:focus-visible,
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:disabled,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:focus-visible,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:disabled {
  box-shadow: none !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary::after,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer::after {
  content: none !important;
  display: none !important;
}
.legendary-stage-wing,
.legendary-stage-crown,
.legendary-stage-pendant,
.bryer-stage-blade,
.bryer-stage-top-armor,
.bryer-stage-bottom-armor {
  filter: none !important;
}

.bryer-stage-skull-emoji,
.bryer-buy-skull-emoji {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: rgba(106,68,14,.82);
  stroke-width: .65px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.38));
}
.bryer-stage-skull-top { font-size: 29px; }
.bryer-stage-skull-left,
.bryer-stage-skull-right { font-size: 25px; }
.bryer-stage-skull-bottom { font-size: 24px; }
.bryer-buy-skull-emoji-top { font-size: 27px; }
.bryer-buy-skull-emoji-side { font-size: 29px; }

@media (max-width: 700px) {
  .box-peek-trigger,
  .box-peek-trigger img {
    width: 170px !important;
    height: 170px !important;
  }
  .box-peek-overlay b { font-size: 14px; }
  .box-peek-eye {
    width: 36px;
    height: 22px;
  }
  .purchase-current-owned { font-size: 12px; }
}

.box-peek-eye {
  position: relative;
  width: 56px;
  height: 34px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--box-glow) 36%, transparent));
}
.box-peek-eye svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.box-peek-eye .peek-eye-outline {
  fill: rgba(16, 14, 10, .48);
  stroke: #fff1c8;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.box-peek-eye .peek-eye-inner {
  fill: rgba(255, 247, 227, .9);
  stroke: rgba(255, 228, 155, .95);
  stroke-width: 1.15;
}
.box-peek-eye .peek-eye-iris {
  fill: color-mix(in srgb, var(--box-glow) 74%, #f7d36e 26%);
  stroke: rgba(126, 78, 9, .7);
  stroke-width: 1.1;
}
.box-peek-eye .peek-eye-pupil {
  fill: #24170a;
}
.box-peek-eye .peek-eye-glint {
  fill: rgba(255,255,255,.95);
}

.legendary-buy-stage,
.bryer-buy-stage,
.legendary-stage-wing,
.legendary-stage-wing-inner,
.legendary-stage-gem,
.legendary-stage-side-gem,
.bryer-stage-blade,
.bryer-stage-blade-inner,
.bryer-stage-skull-emoji,
.bryer-stage-stud {
  visibility: visible !important;
  opacity: 1 !important;
}
.legendary-stage-crown,
.legendary-stage-crown-inner,
.legendary-stage-pendant,
.legendary-stage-pendant-inner,
.legendary-stage-thread,
.bryer-stage-top-armor,
.bryer-stage-bottom-armor,
.bryer-stage-top-green,
.bryer-stage-bottom-green,
.bryer-stage-connector {
  display: none !important;
}

@media (max-width: 700px) {
  .box-peek-eye {
    width: 48px;
    height: 30px;
  }
}

.box-peek-eye {
  width: 56px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--box-glow) 36%, transparent)) !important;
}
.box-peek-eye i { display: none !important; }
.box-peek-eye svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.legendary-stage-wing,
.legendary-stage-wing-inner,
.legendary-stage-crown,
.legendary-stage-crown-inner,
.legendary-stage-pendant,
.legendary-stage-pendant-inner,
.legendary-stage-gem,
.legendary-stage-side-gem,
.legendary-stage-thread,
.bryer-stage-blade,
.bryer-stage-blade-inner,
.bryer-stage-top-armor,
.bryer-stage-bottom-armor,
.bryer-stage-top-green,
.bryer-stage-bottom-green,
.bryer-stage-skull-emoji,
.bryer-stage-connector,
.bryer-stage-stud {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary,
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:focus-visible,
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary:disabled {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 0 rgba(126, 87, 23, .22),
    0 6px 0 rgba(124, 81, 18, .46),
    0 12px 24px rgba(176, 130, 52, .26) !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-legendary > button.btn.primary.box-buy-button.buy-style-legendary::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: .98 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 16px 11px, rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 16px) 11px, rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    radial-gradient(circle at 16px calc(100% - 11px), rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 11px), rgba(225, 182, 81, .96) 0 1.6px, transparent 2px),
    conic-gradient(from 180deg at 15px 12px, rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from 270deg at calc(100% - 15px) 12px, rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from 90deg at 15px calc(100% - 12px), rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from 0deg at calc(100% - 15px) calc(100% - 12px), rgba(218, 167, 65, .94) 0 90deg, transparent 90deg 360deg),
    radial-gradient(ellipse at center top, rgba(218, 167, 65, .94) 0 1.3px, transparent 1.8px),
    linear-gradient(90deg, transparent 0 25%, rgba(218, 167, 65, .72) 25% 34%, transparent 34% 66%, rgba(218, 167, 65, .72) 66% 75%, transparent 75% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(218, 167, 65, .64) 18% 23%, transparent 23% 77%, rgba(218, 167, 65, .64) 77% 82%, transparent 82% 100%) !important;
}
.legendary-stage-wing,
.legendary-stage-crown,
.legendary-stage-pendant {
  filter: drop-shadow(0 3px 4px rgba(104, 68, 12, .26)) !important;
}

.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:focus-visible,
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer:disabled {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(232,197,111,.16),
    inset 0 -7px 0 rgba(0,0,0,.50),
    inset 0 -10px 0 rgba(214,173,79,.12),
    0 7px 0 rgba(45,30,7,.66),
    0 12px 24px rgba(189,143,49,.20) !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-bryer > button.btn.primary.box-buy-button.buy-style-bryer::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 9px !important;
  display: block !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(231, 194, 108, .24) 0 1px, rgba(32, 24, 10, .96) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(229, 186, 88, .30), inset 0 -1px 0 rgba(8, 8, 8, .95) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.bryer-stage-blade,
.bryer-stage-top-armor,
.bryer-stage-bottom-armor {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .38)) !important;
}

@media (max-width: 700px) {
  .box-peek-eye {
    width: 48px !important;
    height: 30px !important;
  }
}

@keyframes cofferIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.box-peek-trigger {
  animation: cofferIdleFloat 4.8s ease-in-out infinite;
  will-change: transform;
}
.box-card:nth-child(2n) .box-peek-trigger {
  animation-duration: 5.4s;
  animation-delay: -.7s;
}
.box-card:nth-child(3n) .box-peek-trigger {
  animation-duration: 5.9s;
  animation-delay: -1.4s;
}
.box-card.is-buying .box-peek-trigger,
.box-card.is-purchased .box-peek-trigger {
  animation: none !important;
}

.box-peek-caption {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f4e8ba 78%, var(--box-glow) 22%);
  text-shadow: 0 2px 8px rgba(0,0,0,.56), 0 0 14px color-mix(in srgb, var(--box-glow) 24%, transparent);
  pointer-events: none;
}

.coffer-sections {
  display: grid;
  gap: 28px;
}
.coffer-section-block {
  display: grid;
  gap: 16px;
}
.coffer-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.16);
}
.coffer-section-heading::after {
  content: "";
  position: absolute;
  inset: auto 16px 0 16px;
  height: 1px;
  opacity: .42;
  background: currentColor;
}
.coffer-section-heading h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.coffer-section-heading p {
  margin: 5px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .88;
}
.coffer-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: 0 0 42px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 16px rgba(0,0,0,.22);
}
.recommended-heading {
  color: #f7e7b0;
  border: 1px solid rgba(227, 185, 84, .32);
  background:
    linear-gradient(180deg, rgba(111,79,25,.20), rgba(26,23,16,.18)),
    radial-gradient(circle at left center, rgba(230,187,87,.12), transparent 42%);
}
.recommended-heading .coffer-section-icon {
  color: #fff4d0;
  background: radial-gradient(circle at 35% 30%, rgba(255,248,210,.44), rgba(204,153,52,.78));
}
.others-heading {
  color: #d7f0e4;
  border: 1px solid rgba(132, 191, 171, .26);
  background:
    linear-gradient(180deg, rgba(26,58,47,.20), rgba(18,28,24,.18)),
    radial-gradient(circle at left center, rgba(118,194,166,.10), transparent 42%);
}
.others-heading .coffer-section-icon {
  color: #f3fff9;
  background: radial-gradient(circle at 35% 30%, rgba(225,255,244,.26), rgba(71,141,117,.72));
}
.coffer-section-block .grid {
  margin-top: 2px;
}

@media (max-width: 700px) {
  .coffer-sections { gap: 24px; }
  .coffer-section-heading {
    padding: 11px 13px;
    gap: 12px;
  }
  .coffer-section-heading h3 { font-size: 20px; }
  .coffer-section-heading p { font-size: 11px; }
  .coffer-section-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 19px;
  }
  .box-peek-caption {
    font-size: 9px;
    letter-spacing: .12em;
  }
}

.box-peek-caption {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 12 !important;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 14px);
  margin: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(11,17,14,.74);
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(3px);
}
.box-glow,
.box-visual::before,
.box-visual::after { z-index: 0 !important; }
.box-peek-trigger {
  position: relative;
  z-index: 3 !important;
}

.coffer-sections { gap: 20px; }
.coffer-section-block { gap: 10px; }
.coffer-section-heading {
  gap: 10px;
  min-height: 44px;
  padding: 7px 11px;
  border-radius: 13px;
}
.coffer-section-heading h3 {
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}
.coffer-section-heading p { display: none !important; }
.coffer-section-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 17px;
}

@keyframes exactRecommendedSweep {
  0%, 14% { transform: translateX(-135%); }
  46%, 100% { transform: translateX(135%); }
}
@keyframes exactRecommendedGlow {
  0%, 100% {
    border-color: rgba(227,185,84,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.15), 0 0 0 rgba(239,199,94,0);
  }
  50% {
    border-color: rgba(247,211,126,.68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.15), 0 0 20px rgba(239,199,94,.30);
  }
}
@keyframes exactRecommendedIcon {
  0%,100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1) rotate(8deg);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,226,143,.52));
  }
}
.recommended-heading {
  position: relative;
  overflow: hidden;
  animation: exactRecommendedGlow 3.4s ease-in-out infinite;
}
.recommended-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255,249,228,0) 42%, rgba(255,249,228,.48) 50%, rgba(255,249,228,0) 58%, transparent 66%);
  transform: translateX(-135%);
  animation: exactRecommendedSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
.recommended-heading h3,
.recommended-heading .coffer-section-icon {
  position: relative;
  z-index: 1;
}
.recommended-heading .coffer-section-icon { animation: exactRecommendedIcon 3.4s ease-in-out infinite; }

.purchase-action-pair.purchase-style-legendary,
.purchase-action-pair.purchase-style-bryer {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.custom-buy-fx {
  position: absolute;
  inset: -12px -14px;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.custom-buy-fx i {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform-origin: center;
}

@keyframes exactLegendaryAura {
  0%,100% {
    opacity: .22;
    transform: scale(.98);
  }
  50% {
    opacity: .58;
    transform: scale(1.02);
  }
}
@keyframes exactLegendarySpark {
  0%,100% {
    opacity: .25;
    transform: translateY(1px) scale(.72);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.25);
  }
}
.custom-buy-fx-legendary::before {
  content: "";
  position: absolute;
  inset: 12px 28px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(249,213,126,.36) 0%, rgba(249,213,126,.13) 48%, rgba(249,213,126,0) 76%);
  filter: blur(8px);
  animation: exactLegendaryAura 2.8s ease-in-out infinite;
}
.custom-buy-fx-legendary i {
  width: 5px;
  height: 5px;
  background: #ffe6a0;
  box-shadow: 0 0 8px rgba(255,221,125,.88);
  animation: exactLegendarySpark 1.7s ease-in-out infinite;
}
.custom-buy-fx-legendary i:nth-child(1) {
  left: 8%;
  top: 42%;
}
.custom-buy-fx-legendary i:nth-child(2) {
  left: 20%;
  top: 18%;
  animation-delay: -.28s;
  width: 4px;
  height: 4px;
}
.custom-buy-fx-legendary i:nth-child(3) {
  left: 49%;
  top: 4%;
  animation-delay: -.56s;
}
.custom-buy-fx-legendary i:nth-child(4) {
  right: 18%;
  top: 22%;
  animation-delay: -.84s;
  width: 4px;
  height: 4px;
}
.custom-buy-fx-legendary i:nth-child(5) {
  right: 7%;
  top: 48%;
  animation-delay: -1.12s;
}
.custom-buy-fx-legendary i:nth-child(6) {
  left: 51%;
  bottom: 3%;
  animation-delay: -1.4s;
  width: 4px;
  height: 4px;
}

@keyframes exactBryerAura {
  0%,100% {
    opacity: .18;
    transform: scale(.98);
  }
  50% {
    opacity: .48;
    transform: scale(1.02);
  }
}
@keyframes exactBryerMote {
  0%,100% {
    opacity: .22;
    transform: translateY(1px) scale(.75);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.2);
  }
}
.custom-buy-fx-bryer::before {
  content: "";
  position: absolute;
  inset: 12px 28px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(48,228,174,.30) 0%, rgba(48,228,174,.10) 48%, rgba(48,228,174,0) 76%);
  filter: blur(8px);
  animation: exactBryerAura 3.1s ease-in-out infinite;
}
.custom-buy-fx-bryer i {
  width: 5px;
  height: 5px;
  background: #e7bb54;
  box-shadow: 0 0 7px rgba(231,187,84,.82);
  animation: exactBryerMote 1.95s ease-in-out infinite;
}
.custom-buy-fx-bryer i:nth-child(1) {
  left: 9%;
  top: 46%;
}
.custom-buy-fx-bryer i:nth-child(2) {
  left: 24%;
  top: 16%;
  animation-delay: -.32s;
  width: 4px;
  height: 4px;
  background: #55e9bd;
  box-shadow: 0 0 8px rgba(85,233,189,.86);
}
.custom-buy-fx-bryer i:nth-child(3) {
  left: 50%;
  top: 2%;
  animation-delay: -.64s;
  background: #55e9bd;
  box-shadow: 0 0 8px rgba(85,233,189,.86);
}
.custom-buy-fx-bryer i:nth-child(4) {
  right: 22%;
  top: 18%;
  animation-delay: -.96s;
  width: 4px;
  height: 4px;
}
.custom-buy-fx-bryer i:nth-child(5) {
  right: 8%;
  top: 48%;
  animation-delay: -1.28s;
}
.custom-buy-fx-bryer i:nth-child(6) {
  left: 50%;
  bottom: 2%;
  animation-delay: -1.6s;
  width: 4px;
  height: 4px;
  background: #55e9bd;
  box-shadow: 0 0 8px rgba(85,233,189,.86);
}

@media (max-width: 700px) {
  .custom-buy-fx { inset: -9px -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .recommended-heading,
  .recommended-heading::before,
  .recommended-heading .coffer-section-icon,
  .custom-buy-fx::before,
  .custom-buy-fx i { animation: none !important; }
}

.gil-price-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .34em;
  vertical-align: middle;
}
.gil-price-icon {
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex: 0 0 1em;
  display: inline-block;
  transform: translateY(-.01em);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.22));
}
.gil-price-text {
  line-height: 1;
  display: inline-block;
}
.purchase-price .gil-price-inline,
.fortune-price-current .gil-price-inline {
  font: inherit;
  color: inherit;
}

.purchase-action-pair.purchase-style-legendary,
.purchase-action-pair.purchase-style-bryer {
  overflow: visible !important;
  isolation: isolate !important;
}
.custom-buy-fx {
  position: absolute;
  inset: -16px -22px -14px;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.custom-buy-fx i {
  position: absolute;
  display: block;
  transform-origin: center;
  border-radius: 0 !important;
}

@keyframes legendaryButtonHaloPulse {
  0%,100% {
    opacity: .42;
    transform: scale(.98);
  }
  50% {
    opacity: .88;
    transform: scale(1.04);
  }
}
@keyframes legendaryButtonSweep {
  0% {
    transform: translateX(-145%) skewX(-20deg);
    opacity: 0;
  }
  15% { opacity: .0; }
  28% { opacity: .86; }
  52% { opacity: .5; }
  70% { opacity: 0; }
  100% {
    transform: translateX(155%) skewX(-20deg);
    opacity: 0;
  }
}
@keyframes legendaryButtonStar {
  0%,100% {
    opacity: .28;
    transform: scale(.7) rotate(0deg);
  }
  45% {
    opacity: 1;
    transform: scale(1.3) rotate(22deg);
  }
  70% {
    opacity: .72;
    transform: scale(.96) rotate(44deg);
  }
}
.custom-buy-fx-legendary::before {
  content: "";
  position: absolute;
  inset: 16px 20px 12px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(247,220,140,.56) 0%, rgba(247,220,140,.22) 38%, rgba(247,220,140,0) 72%);
  filter: blur(12px);
  animation: legendaryButtonHaloPulse 3s ease-in-out infinite;
}
.custom-buy-fx-legendary::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 10px;
  width: 18%;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,249,233,.18) 24%, rgba(255,253,244,.98) 50%, rgba(255,244,212,.28) 76%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: legendaryButtonSweep 3.8s ease-in-out infinite;
}
.custom-buy-fx-legendary i {
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  background: radial-gradient(circle at center, #fffef8 0 32%, #ffe4a0 33% 62%, rgba(255,228,160,.0) 63%);
  filter: drop-shadow(0 0 6px rgba(255, 217, 120, .92)) drop-shadow(0 0 12px rgba(255, 200, 86, .55));
  animation: legendaryButtonStar 1.7s ease-in-out infinite;
}
.custom-buy-fx-legendary i:nth-child(1) {
  left: 4%;
  top: 34%;
  width: 15px;
  height: 15px;
}
.custom-buy-fx-legendary i:nth-child(2) {
  left: 17%;
  top: 6%;
  width: 11px;
  height: 11px;
  animation-delay: -.28s;
}
.custom-buy-fx-legendary i:nth-child(3) {
  left: 49%;
  top: -1%;
  width: 13px;
  height: 13px;
  animation-delay: -.6s;
}
.custom-buy-fx-legendary i:nth-child(4) {
  right: 16%;
  top: 8%;
  width: 11px;
  height: 11px;
  animation-delay: -.9s;
}
.custom-buy-fx-legendary i:nth-child(5) {
  right: 3%;
  top: 36%;
  width: 15px;
  height: 15px;
  animation-delay: -1.18s;
}
.custom-buy-fx-legendary i:nth-child(6) {
  left: 50%;
  bottom: -1%;
  width: 12px;
  height: 12px;
  animation-delay: -1.42s;
  transform: translateX(-50%);
}

@keyframes bryerButtonFogPulse {
  0%,100% {
    opacity: .30;
    transform: scale(.98);
  }
  50% {
    opacity: .76;
    transform: scale(1.03);
  }
}
@keyframes bryerButtonSweep {
  0% {
    transform: translateX(140%) skewX(18deg);
    opacity: 0;
  }
  18% { opacity: 0; }
  35% { opacity: .62; }
  52% { opacity: .28; }
  72% { opacity: 0; }
  100% {
    transform: translateX(-150%) skewX(18deg);
    opacity: 0;
  }
}
@keyframes bryerButtonEmber {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.6) rotate(0deg);
  }
  15% { opacity: .94; }
  65% {
    opacity: .68;
    transform: translateY(-8px) scale(1.05) rotate(18deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(.74) rotate(36deg);
  }
}
.custom-buy-fx-bryer::before {
  content: "";
  position: absolute;
  inset: 16px 20px 12px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(48,228,174,.42) 0%, rgba(48,228,174,.18) 40%, rgba(48,228,174,0) 74%);
  filter: blur(12px);
  animation: bryerButtonFogPulse 3.35s ease-in-out infinite;
}
.custom-buy-fx-bryer::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 12px;
  width: 13%;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(99,255,209,.18) 22%, rgba(110,244,204,.82) 50%, rgba(244,212,124,.22) 78%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: bryerButtonSweep 4.2s ease-in-out infinite;
}
.custom-buy-fx-bryer i {
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: radial-gradient(circle at 35% 35%, #fff5d0 0 16%, #efc66f 17% 42%, #39e7ba 43% 76%, rgba(57,231,186,0) 77%);
  filter: drop-shadow(0 0 6px rgba(57,231,186,.72)) drop-shadow(0 0 10px rgba(239,198,111,.48));
  animation: bryerButtonEmber 2.25s linear infinite;
}
.custom-buy-fx-bryer i:nth-child(1) {
  left: 10%;
  bottom: 4px;
  width: 10px;
  height: 10px;
}
.custom-buy-fx-bryer i:nth-child(2) {
  left: 21%;
  top: 4px;
  width: 8px;
  height: 8px;
  animation-delay: -.36s;
}
.custom-buy-fx-bryer i:nth-child(3) {
  left: 50%;
  bottom: -1px;
  width: 12px;
  height: 12px;
  animation-delay: -.82s;
  transform: translateX(-50%);
}
.custom-buy-fx-bryer i:nth-child(4) {
  right: 21%;
  top: 6px;
  width: 8px;
  height: 8px;
  animation-delay: -1.14s;
}
.custom-buy-fx-bryer i:nth-child(5) {
  right: 10%;
  bottom: 3px;
  width: 10px;
  height: 10px;
  animation-delay: -1.52s;
}
.custom-buy-fx-bryer i:nth-child(6) {
  left: 50%;
  top: -2px;
  width: 9px;
  height: 9px;
  animation-delay: -1.88s;
  transform: translateX(-50%);
}

.bryer-buy-skull-emoji-side {
  font-size: 31px !important;
  dominant-baseline: middle;
  text-anchor: middle;
}
.bryer-buy-side-plaque {
  fill: rgba(13, 67, 56, .62);
}

@media (max-width: 700px) {
  .custom-buy-fx { inset: -12px -16px -10px; }
  .custom-buy-fx-legendary i {
    width: 10px;
    height: 10px;
  }
  .custom-buy-fx-bryer i {
    width: 8px;
    height: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .custom-buy-fx::before,
  .custom-buy-fx::after,
  .custom-buy-fx i {
    animation: none !important;
  }
}

.gil-price-icon {
  width: 1.18em !important;
  height: 1.18em !important;
  flex-basis: 1.18em !important;
}

.coffer-section-heading,
.recommended-heading,
.others-heading {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}
.coffer-section-heading::before,
.coffer-section-heading::after,
.recommended-heading::before,
.recommended-heading::after,
.others-heading::before,
.others-heading::after {
  content: none !important;
  display: none !important;
}
.coffer-section-heading h3 {
  font-size: 20px !important;
}
.coffer-section-heading .coffer-section-icon {
  box-shadow: none !important;
}

.purchase-action-pair.purchase-style-legendary,
.purchase-action-pair.purchase-style-bryer {
  overflow: visible !important;
  isolation: isolate !important;
}
.custom-buy-fx {
  inset: -18px -20px -16px !important;
  z-index: 4 !important;
}
.custom-buy-fx::after {
  content: none !important;
  display: none !important;
}

@keyframes qaLegendaryAura {
  0%, 100% {
    opacity: .36;
    transform: scale(.985);
  }
  50% {
    opacity: .9;
    transform: scale(1.03);
  }
}
@keyframes qaLegendaryTwinkle {
  0%,100% {
    opacity: .26;
    transform: scale(.65) rotate(0deg);
  }
  35% {
    opacity: 1;
    transform: scale(1.34) rotate(20deg);
  }
  70% {
    opacity: .64;
    transform: scale(.92) rotate(40deg);
  }
}
@keyframes qaLegendaryStageGlow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(250,214,119,.10)) drop-shadow(0 0 10px rgba(250,214,119,.08)); }
  50% { filter: drop-shadow(0 0 8px rgba(250,214,119,.28)) drop-shadow(0 0 18px rgba(250,214,119,.18)); }
}
.purchase-style-legendary .legendary-buy-stage,
.purchase-style-legendary .legendary-buy-ornament {
  animation: qaLegendaryStageGlow 2.9s ease-in-out infinite !important;
}
.custom-buy-fx-legendary::before {
  inset: 12px 16px 10px !important;
  border-radius: 16px !important;
  background: radial-gradient(ellipse at center, rgba(255,223,138,.58) 0%, rgba(255,223,138,.22) 42%, rgba(255,223,138,0) 76%) !important;
  filter: blur(12px) !important;
  animation: qaLegendaryAura 2.7s ease-in-out infinite !important;
}
.custom-buy-fx-legendary i {
  width: 16px !important;
  height: 16px !important;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%) !important;
  background: radial-gradient(circle at center, #fffef7 0 32%, #ffe49c 33% 65%, rgba(255,228,156,0) 66%) !important;
  filter: drop-shadow(0 0 6px rgba(255,228,135,.95)) drop-shadow(0 0 12px rgba(246,191,82,.62)) !important;
  animation: qaLegendaryTwinkle 1.8s ease-in-out infinite !important;
}
.custom-buy-fx-legendary i:nth-child(1) {
  left: 3% !important;
  top: 30% !important;
}
.custom-buy-fx-legendary i:nth-child(2) {
  left: 15% !important;
  top: 2% !important;
  width: 12px !important;
  height: 12px !important;
  animation-delay: -.22s !important;
}
.custom-buy-fx-legendary i:nth-child(3) {
  left: 50% !important;
  top: -4% !important;
  width: 14px !important;
  height: 14px !important;
  transform: translateX(-50%);
  animation-delay: -.54s !important;
}
.custom-buy-fx-legendary i:nth-child(4) {
  right: 14% !important;
  top: 3% !important;
  width: 12px !important;
  height: 12px !important;
  animation-delay: -.82s !important;
}
.custom-buy-fx-legendary i:nth-child(5) {
  right: 2% !important;
  top: 30% !important;
  animation-delay: -1.08s !important;
}
.custom-buy-fx-legendary i:nth-child(6) {
  left: 50% !important;
  bottom: -3% !important;
  width: 13px !important;
  height: 13px !important;
  transform: translateX(-50%);
  animation-delay: -1.32s !important;
}

@keyframes qaBryerAura {
  0%,100% {
    opacity: .26;
    transform: scale(.985);
  }
  50% {
    opacity: .78;
    transform: scale(1.03);
  }
}
@keyframes qaBryerMote {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.68) rotate(0deg);
  }
  18% { opacity: .95; }
  62% {
    opacity: .72;
    transform: translateY(-10px) scale(1.08) rotate(24deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(.78) rotate(46deg);
  }
}
@keyframes qaBryerStageGlow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(74,230,187,.10)) drop-shadow(0 0 10px rgba(223,182,89,.08)); }
  50% { filter: drop-shadow(0 0 8px rgba(74,230,187,.26)) drop-shadow(0 0 18px rgba(223,182,89,.16)); }
}
.purchase-style-bryer .bryer-buy-stage,
.purchase-style-bryer .bryer-buy-ornament {
  animation: qaBryerStageGlow 3.2s ease-in-out infinite !important;
}
.custom-buy-fx-bryer::before {
  inset: 12px 16px 10px !important;
  border-radius: 16px !important;
  background: radial-gradient(ellipse at center, rgba(63,225,181,.44) 0%, rgba(63,225,181,.18) 42%, rgba(63,225,181,0) 76%) !important;
  filter: blur(12px) !important;
  animation: qaBryerAura 3.1s ease-in-out infinite !important;
}
.custom-buy-fx-bryer i {
  width: 12px !important;
  height: 12px !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
  background: radial-gradient(circle at 35% 35%, #fff4d0 0 18%, #efc66f 19% 42%, #41e7bf 43% 78%, rgba(65,231,191,0) 79%) !important;
  filter: drop-shadow(0 0 6px rgba(65,231,191,.74)) drop-shadow(0 0 10px rgba(239,198,111,.54)) !important;
  animation: qaBryerMote 2.15s linear infinite !important;
}
.custom-buy-fx-bryer i:nth-child(1) {
  left: 8% !important;
  bottom: 0 !important;
}
.custom-buy-fx-bryer i:nth-child(2) {
  left: 22% !important;
  top: 2% !important;
  width: 9px !important;
  height: 9px !important;
  animation-delay: -.34s !important;
}
.custom-buy-fx-bryer i:nth-child(3) {
  left: 50% !important;
  bottom: -2% !important;
  width: 14px !important;
  height: 14px !important;
  transform: translateX(-50%);
  animation-delay: -.7s !important;
}
.custom-buy-fx-bryer i:nth-child(4) {
  right: 22% !important;
  top: 3% !important;
  width: 9px !important;
  height: 9px !important;
  animation-delay: -1.02s !important;
}
.custom-buy-fx-bryer i:nth-child(5) {
  right: 8% !important;
  bottom: 0 !important;
  animation-delay: -1.36s !important;
}
.custom-buy-fx-bryer i:nth-child(6) {
  left: 50% !important;
  top: -4% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateX(-50%);
  animation-delay: -1.68s !important;
}

.bryer-buy-skull-emoji-top {
  font-size: 27px !important;
}
.bryer-buy-skull-emoji-side {
  font-size: 31px !important;
  dominant-baseline: middle !important;
  text-anchor: middle !important;
}

@media (max-width: 700px) {
  .coffer-section-heading h3 { font-size: 18px !important; }
  .custom-buy-fx { inset: -14px -14px -12px !important; }
  .custom-buy-fx-legendary i {
    width: 12px !important;
    height: 12px !important;
  }
  .custom-buy-fx-bryer i {
    width: 9px !important;
    height: 9px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .purchase-style-legendary .legendary-buy-stage,
  .purchase-style-legendary .legendary-buy-ornament,
  .purchase-style-bryer .bryer-buy-stage,
  .purchase-style-bryer .bryer-buy-ornament {
    animation: none !important;
  }
}

.gil-price-icon {
  transform: translateY(2px) !important;
}

.purchase-style-bryer .bryer-buy-obsidian { fill: rgba(18, 16, 15, .28) !important; }
.purchase-style-bryer .bryer-buy-gold-outer { stroke: #AF8554 !important; }
.purchase-style-bryer .bryer-buy-black-band {
  fill: rgba(42, 38, 36, .62) !important;
  stroke: rgba(175, 133, 84, .68) !important;
}
.purchase-style-bryer .bryer-buy-gold-inner { stroke: rgba(255, 209, 125, .90) !important; }
.purchase-style-bryer .bryer-buy-green-panel {
  fill: rgba(36, 44, 35, .92) !important;
  stroke: rgba(175, 133, 84, .28) !important;
}
.purchase-style-bryer .bryer-buy-bottom-lip {
  fill: rgba(42, 38, 36, .34) !important;
  stroke: rgba(175, 133, 84, .24) !important;
}
.purchase-style-bryer .bryer-buy-woodgrain { stroke: rgba(255, 209, 125, .12) !important; }
.purchase-style-bryer .bryer-buy-woodgrain.is-two { stroke: rgba(175, 133, 84, .16) !important; }
.purchase-style-bryer .bryer-buy-woodgrain.is-three { stroke: rgba(42, 38, 36, .34) !important; }
.purchase-style-bryer .bryer-buy-green-crack { stroke: rgba(175, 133, 84, .22) !important; }
.purchase-style-bryer .bryer-buy-green-crack.is-two { stroke: rgba(255, 209, 125, .12) !important; }
.purchase-style-bryer .bryer-buy-top-bottom-frame path { stroke: #AF8554 !important; }
.purchase-style-bryer .bryer-buy-center-crest path:first-child,
.purchase-style-bryer .bryer-buy-center-crest path:nth-child(2) {
  fill: #242C23 !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-center-crest path:nth-child(2) {
  fill: #AF8554 !important;
  stroke: #FFD17D !important;
}
.purchase-style-bryer .bryer-buy-center-crest path:nth-child(3) { stroke: rgba(255, 209, 125, .48) !important; }
.purchase-style-bryer .bryer-buy-side-flare {
  fill: rgba(42, 38, 36, .44) !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-side-plaque {
  fill: rgba(36, 44, 35, .82) !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-side-scroll,
.purchase-style-bryer .bryer-buy-side-notch { stroke: #AF8554 !important; }
.purchase-style-bryer .bryer-buy-skull-emoji,
.purchase-style-bryer .bryer-stage-skull-emoji { filter: drop-shadow(0 0 5px rgba(255, 209, 125, .22)); }
.purchase-style-bryer .bryer-buy-studs path {
  fill: #AF8554 !important;
  stroke: #2A2624 !important;
}
.purchase-style-bryer .bryer-buy-sparkles path {
  fill: #FFD17D !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer > button.box-buy-button.buy-style-bryer,
.purchase-style-bryer > button.box-buy-button.buy-style-bryer:hover:not(:disabled),
.purchase-style-bryer > button.box-buy-button.buy-style-bryer:focus-visible,
.purchase-style-bryer > button.box-buy-button.buy-style-bryer:disabled {
  background: linear-gradient(180deg, rgba(43, 41, 38, .96), rgba(36, 44, 35, .98)) !important;
  border-color: rgba(175, 133, 84, .92) !important;
}

.purchase-action-pair.purchase-style-gil {
  overflow: visible !important;
  isolation: isolate !important;
}

@keyframes gilButtonAuraPulse {
  0%,100% {
    opacity: .34;
    transform: scale(.98);
  }
  50% {
    opacity: .86;
    transform: scale(1.03);
  }
}
@keyframes gilButtonSweep {
  0% {
    transform: translateX(-155%) skewX(-18deg);
    opacity: 0;
  }
  26% { opacity: .0; }
  40% { opacity: .92; }
  54% { opacity: .44; }
  72% { opacity: 0; }
  100% {
    transform: translateX(160%) skewX(-18deg);
    opacity: 0;
  }
}
@keyframes gilButtonCoinSpark {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.65) rotate(0deg);
  }
  18% { opacity: 1; }
  65% {
    opacity: .74;
    transform: translateY(-10px) scale(1.08) rotate(18deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(.72) rotate(44deg);
  }
}
.custom-buy-fx-gil::before {
  content: "";
  position: absolute;
  inset: 14px 20px 10px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, rgba(255, 206, 112, .56) 0%, rgba(255, 206, 112, .20) 40%, rgba(255, 206, 112, 0) 74%);
  filter: blur(12px);
  animation: gilButtonAuraPulse 3.1s ease-in-out infinite;
}
.custom-buy-fx-gil::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 18%;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,246,220,.16) 24%, rgba(255,248,228,.94) 50%, rgba(255,214,125,.26) 78%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: gilButtonSweep 4.1s ease-in-out infinite;
}
.custom-buy-fx-gil i {
  width: 12px;
  height: 12px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #fff7e5 0 16%, #ffe3a0 17% 36%, #d69d3f 37% 68%, rgba(214, 157, 63, 0) 69%);
  border: 1px solid rgba(255, 219, 143, .58);
  box-shadow: 0 0 10px rgba(255, 209, 125, .48), inset 0 0 5px rgba(255,255,255,.32);
  animation: gilButtonCoinSpark 2.35s linear infinite;
}
.custom-buy-fx-gil i:nth-child(1) {
  left: 8%;
  bottom: 2px;
}
.custom-buy-fx-gil i:nth-child(2) {
  left: 18%;
  top: 4px;
  width: 9px;
  height: 9px;
  animation-delay: -.42s;
}
.custom-buy-fx-gil i:nth-child(3) {
  left: 50%;
  bottom: -2px;
  width: 13px;
  height: 13px;
  animation-delay: -.82s;
  transform: translateX(-50%);
}
.custom-buy-fx-gil i:nth-child(4) {
  right: 18%;
  top: 6px;
  width: 9px;
  height: 9px;
  animation-delay: -1.14s;
}
.custom-buy-fx-gil i:nth-child(5) {
  right: 8%;
  bottom: 3px;
  animation-delay: -1.56s;
}
.custom-buy-fx-gil i:nth-child(6) {
  left: 50%;
  top: -3px;
  width: 10px;
  height: 10px;
  animation-delay: -1.9s;
  transform: translateX(-50%);
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:disabled {
  color: #fff4d2 !important;
  border-color: rgba(255, 209, 125, .9) !important;
  background:
    linear-gradient(180deg, rgba(92, 56, 18, .96), rgba(48, 30, 12, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -4px 0 rgba(59, 35, 12, .9),
    0 0 0 1px rgba(255, 209, 125, .20),
    0 10px 22px rgba(0,0,0,.28) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(111, 67, 22, .98), rgba(58, 35, 14, .98)) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil::before {
  display: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 9px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 224, 151, .26), rgba(122, 76, 20, .44));
  pointer-events: none;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil .box-buy-button-label {
  position: relative;
  z-index: 3;
  letter-spacing: .05em;
  color: #fff6dd !important;
  text-shadow: 0 0 10px rgba(255, 209, 125, .18);
}
.gil-buy-stage,
.gil-buy-ornament {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.gil-buy-stage {
  inset: -48px -18px -50px;
  width: calc(100% + 36px);
  height: calc(100% + 98px);
  z-index: 1;
}
.gil-buy-stage *,
.gil-buy-ornament * {
  vector-effect: non-scaling-stroke;
}
.gil-stage-side-coin {
  fill: rgba(111, 67, 22, .30);
  stroke: #d9a347;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.gil-stage-side-inner {
  fill: rgba(255, 224, 151, .12);
  stroke: rgba(255, 234, 186, .64);
  stroke-width: .96;
  stroke-linejoin: round;
}
.gil-stage-top-crown,
.gil-stage-bottom-crown {
  fill: rgba(146, 90, 28, .26);
  stroke: #e3b055;
  stroke-width: 1.08;
  stroke-linejoin: round;
}
.gil-stage-top-inset,
.gil-stage-bottom-inset {
  fill: rgba(255, 214, 125, .34);
  stroke: rgba(255, 240, 194, .58);
  stroke-width: .8;
}
.gil-stage-top-crest path,
.gil-stage-bottom-crest path {
  fill: #d79d43;
  stroke: #fff1c2;
  stroke-width: .86;
  stroke-linejoin: round;
}
.gil-stage-connectors path {
  fill: none;
  stroke: rgba(243, 195, 102, .84);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.gil-stage-side-medallions circle {
  fill: #cf983b;
  stroke: #fff1c2;
  stroke-width: .84;
}
.gil-stage-side-medallions .inner {
  fill: rgba(255, 242, 201, .20);
  stroke: #9f6922;
}
.gil-stage-g-text {
  fill: #fff7df;
  font-size: 32px;
  font-family: Georgia, serif;
  font-weight: 700;
  dominant-baseline: middle;
}

.gil-buy-ornament { z-index: 2; }
.gil-buy-shadow-plate { fill: rgba(18, 12, 7, .26); }
.gil-buy-gold-frame {
  fill: none;
  stroke: #f0bf63;
  stroke-width: 1.8;
}
.gil-buy-gold-frame-inner {
  fill: none;
  stroke: rgba(255, 236, 188, .92);
  stroke-width: 1.18;
}
.gil-buy-wood-panel {
  fill: rgba(77, 47, 17, .94);
  stroke: rgba(255, 214, 125, .16);
  stroke-width: .72;
}
.gil-buy-bottom-lip {
  fill: rgba(55, 31, 11, .72);
  stroke: rgba(236, 185, 89, .26);
  stroke-width: .55;
}
.gil-buy-top-sheen {
  fill: none;
  stroke: rgba(255,255,255,.26);
  stroke-width: .9;
  stroke-linecap: round;
}
.gil-buy-woodgrain {
  fill: none;
  stroke: rgba(255, 214, 125, .11);
  stroke-width: .92;
  stroke-linecap: round;
}
.gil-buy-woodgrain.is-two {
  stroke: rgba(255, 235, 190, .08);
  stroke-width: .78;
}
.gil-buy-woodgrain.is-three {
  stroke: rgba(167, 111, 44, .16);
  stroke-width: .72;
}
.gil-buy-side-medallion circle {
  fill: #d4a247;
  stroke: #fff0c1;
  stroke-width: .84;
}
.gil-buy-side-medallion .inner-ring {
  fill: rgba(255,244,214,.18);
  stroke: #a2691f;
}
.gil-buy-side-medallion .core {
  fill: rgba(255, 231, 176, .28);
  stroke: #f2cf88;
}
.gil-buy-side-medallion .spokes {
  fill: none;
  stroke: #f6d78c;
  stroke-width: .82;
  stroke-linecap: round;
}
.gil-buy-side-g {
  fill: #fff8e7;
  font-size: 31px;
  font-family: Georgia, serif;
  font-weight: 700;
  dominant-baseline: middle;
  text-anchor: middle;
}
.gil-buy-top-crest path,
.gil-buy-bottom-crest path {
  fill: #dba149;
  stroke: #fff0c0;
  stroke-width: .86;
  stroke-linejoin: round;
}
.gil-buy-top-crest .arch,
.gil-buy-bottom-crest .arch {
  fill: none;
  stroke: rgba(255, 226, 154, .74);
  stroke-width: 1.02;
  stroke-linecap: round;
}
.gil-buy-filigree path {
  fill: none;
  stroke: rgba(232, 185, 92, .88);
  stroke-width: .96;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gil-buy-corner-stars path {
  fill: #fff0c6;
  stroke: #a96a1f;
  stroke-width: .52;
  stroke-linejoin: round;
  opacity: .9;
}
.purchase-style-gil .gil-buy-stage,
.purchase-style-gil .gil-buy-ornament { overflow: visible !important; }

@media (max-width: 700px) {
  .custom-buy-fx-gil i {
    width: 9px;
    height: 9px;
  }
  .gil-buy-stage {
    inset: -34px -12px -36px;
    width: calc(100% + 24px);
    height: calc(100% + 70px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .custom-buy-fx-gil::before,
  .custom-buy-fx-gil::after,
  .custom-buy-fx-gil i {
    animation: none !important;
  }
}

.purchase-style-bryer .bryer-stage-blade {
  fill: rgba(42, 38, 36, .96) !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-stage-blade-inner {
  fill: rgba(36, 44, 35, .98) !important;
  stroke: #FFD17D !important;
}
.purchase-style-bryer .bryer-stage-top-armor,
.purchase-style-bryer .bryer-stage-bottom-armor {
  fill: rgba(42, 38, 36, .94) !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-stage-top-green,
.purchase-style-bryer .bryer-stage-bottom-green {
  fill: #356249 !important;
  stroke: #FFD17D !important;
  filter: drop-shadow(0 0 4px rgba(255, 209, 125, .18)) !important;
}
.purchase-style-bryer .bryer-stage-connector {
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-stage-stud {
  fill: #FFD17D !important;
  stroke: #2A2624 !important;
}
.purchase-style-bryer .bryer-stage-skull-emoji {
  filter: drop-shadow(0 1px 0 rgba(42, 38, 36, .9)) drop-shadow(0 0 4px rgba(255, 209, 125, .22)) !important;
}
.purchase-style-bryer .bryer-buy-center-crest path:first-child {
  fill: #2A2624 !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-center-crest path:nth-child(2) {
  fill: #3E7658 !important;
  stroke: #FFD17D !important;
}
.purchase-style-bryer .bryer-buy-center-crest path:nth-child(3) {
  fill: none !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-center-skull-frame {
  fill: #242C23 !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-center-skull-frame-inner {
  fill: #3E7658 !important;
  stroke: #FFD17D !important;
}
.purchase-style-bryer .bryer-buy-center-skull-arch {
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-side-flare {
  fill: rgba(42, 38, 36, .94) !important;
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-side-plaque {
  fill: rgba(36, 44, 35, .96) !important;
  stroke: #FFD17D !important;
}
.purchase-style-bryer .bryer-buy-side-scroll,
.purchase-style-bryer .bryer-buy-side-notch {
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-gold-outer,
.purchase-style-bryer .bryer-buy-gold-inner,
.purchase-style-bryer .bryer-buy-top-bottom-frame path {
  stroke: #AF8554 !important;
}
.purchase-style-bryer .bryer-buy-gold-inner {
  stroke: #FFD17D !important;
}
.purchase-style-bryer .bryer-buy-black-band {
  fill: rgba(42, 38, 36, .90) !important;
  stroke: rgba(175, 133, 84, .72) !important;
}
.purchase-style-bryer .bryer-buy-green-panel {
  fill: rgba(36, 44, 35, .96) !important;
  stroke: rgba(255, 209, 125, .18) !important;
}
.purchase-style-bryer .bryer-buy-bottom-lip {
  fill: rgba(42, 38, 36, .54) !important;
  stroke: rgba(175, 133, 84, .24) !important;
}
.purchase-style-bryer .bryer-buy-studs path {
  fill: #AF8554 !important;
  stroke: #2A2624 !important;
}
.purchase-style-bryer .bryer-buy-sparkles path {
  fill: #FFD17D !important;
  stroke: #AF8554 !important;
}

.purchase-style-gil .gil-buy-stage {
  inset: -31px -10px -33px !important;
  width: calc(100% + 20px) !important;
  height: calc(100% + 64px) !important;
}
.purchase-style-gil .gil-stage-wing {
  fill: rgba(42, 29, 17, .96) !important;
  stroke: #AF8554 !important;
  stroke-width: 1.35 !important;
  stroke-linejoin: round !important;
}
.purchase-style-gil .gil-stage-wing-inner {
  fill: rgba(35, 25, 16, .98) !important;
  stroke: #FFD17D !important;
  stroke-width: .82 !important;
  stroke-linejoin: round !important;
}
.purchase-style-gil .gil-stage-top-crown,
.purchase-style-gil .gil-stage-bottom-crown {
  fill: rgba(42, 29, 17, .95) !important;
  stroke: #AF8554 !important;
  stroke-width: 1.08 !important;
  stroke-linejoin: round !important;
}
.purchase-style-gil .gil-stage-top-inset,
.purchase-style-gil .gil-stage-bottom-inset {
  fill: rgba(175, 133, 84, .28) !important;
  stroke: #FFD17D !important;
  stroke-width: .72 !important;
}
.purchase-style-gil .gil-stage-coin circle:first-child {
  fill: rgba(42, 29, 17, .98) !important;
  stroke: #AF8554 !important;
  stroke-width: 1.15 !important;
}
.purchase-style-gil .gil-stage-coin .inner {
  fill: rgba(255, 209, 125, .08) !important;
  stroke: #FFD17D !important;
  stroke-width: .78 !important;
}
.purchase-style-gil .gil-stage-coin text {
  font-size: 39px !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.52)) drop-shadow(0 0 5px rgba(255,209,125,.28));
}
.purchase-style-gil .gil-stage-top-coin circle {
  fill: rgba(42, 29, 17, .98) !important;
  stroke: #FFD17D !important;
  stroke-width: .86 !important;
}
.purchase-style-gil .gil-stage-top-coin text {
  font-size: 22px !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
}
.purchase-style-gil .gil-stage-bottom-gem path:first-child {
  fill: #AF8554 !important;
  stroke: #FFD17D !important;
  stroke-width: .8 !important;
}
.purchase-style-gil .gil-stage-bottom-gem path:nth-child(2) {
  fill: #FFD17D !important;
  stroke: #6D481E !important;
  stroke-width: .58 !important;
}

.purchase-style-gil .gil-buy-shadow-plate {
  fill: rgba(12, 8, 5, .42) !important;
}
.purchase-style-gil .gil-buy-gold-frame {
  fill: none !important;
  stroke: #AF8554 !important;
  stroke-width: 1.65 !important;
}
.purchase-style-gil .gil-buy-gold-frame-inner {
  fill: none !important;
  stroke: #FFD17D !important;
  stroke-width: 1.0 !important;
}
.purchase-style-gil .gil-buy-wood-panel {
  fill: rgba(43, 28, 15, .98) !important;
  stroke: rgba(175, 133, 84, .26) !important;
  stroke-width: .7 !important;
}
.purchase-style-gil .gil-buy-bottom-lip {
  fill: rgba(22, 13, 7, .76) !important;
  stroke: rgba(175, 133, 84, .24) !important;
  stroke-width: .52 !important;
}
.purchase-style-gil .gil-buy-top-sheen {
  fill: none !important;
  stroke: rgba(255, 209, 125, .28) !important;
  stroke-width: .72 !important;
  stroke-linecap: round !important;
}
.purchase-style-gil .gil-buy-woodgrain {
  fill: none !important;
  stroke: rgba(255, 209, 125, .08) !important;
  stroke-width: .78 !important;
  stroke-linecap: round !important;
}
.purchase-style-gil .gil-buy-woodgrain.is-two {
  stroke: rgba(175, 133, 84, .12) !important;
  stroke-width: .7 !important;
}
.purchase-style-gil .gil-buy-woodgrain.is-three {
  stroke: rgba(18, 10, 5, .34) !important;
  stroke-width: .64 !important;
}
.purchase-style-gil .gil-buy-side-emblem path {
  fill: rgba(42, 29, 17, .98) !important;
  stroke: #AF8554 !important;
  stroke-width: .92 !important;
  stroke-linejoin: round !important;
}
.purchase-style-gil .gil-buy-side-emblem circle {
  fill: rgba(255, 209, 125, .06) !important;
  stroke: #FFD17D !important;
  stroke-width: .72 !important;
}
.purchase-style-gil .gil-buy-side-emblem text {
  font-size: 28px !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.52));
}
.purchase-style-gil .gil-buy-top-crest path:first-child,
.purchase-style-gil .gil-buy-bottom-crest path:first-child {
  fill: #AF8554 !important;
  stroke: #FFD17D !important;
  stroke-width: .8 !important;
}
.purchase-style-gil .gil-buy-top-crest path:nth-child(2),
.purchase-style-gil .gil-buy-bottom-crest path:nth-child(2) {
  fill: #FFD17D !important;
  stroke: #724A20 !important;
  stroke-width: .56 !important;
}
.purchase-style-gil .gil-buy-top-crest text {
  font-size: 20px !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
}
.purchase-style-gil .gil-buy-corner-stars path {
  fill: #FFD17D !important;
  stroke: #AF8554 !important;
  stroke-width: .5 !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:disabled {
  background: linear-gradient(180deg, #382414, #201309) !important;
  border-color: #AF8554 !important;
}

@media (max-width: 700px) {
  .purchase-style-gil .gil-buy-stage {
    inset: -23px -7px -25px !important;
    width: calc(100% + 14px) !important;
    height: calc(100% + 48px) !important;
  }
  .purchase-style-gil .gil-stage-coin text { font-size: 32px !important; }
  .purchase-style-gil .gil-buy-side-emblem text { font-size: 23px !important; }
}

.box-card .card-actions .purchase-action-pair.purchase-style-gil {
  margin-top: 9px !important;
  margin-bottom: 23px !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-gil > .box-buy-button {
  position: relative !important;
  z-index: 3 !important;
}
.purchase-style-gil .gil-buy-stage {
  inset: auto !important;
  left: -17px !important;
  top: 50% !important;
  width: calc(100% + 34px) !important;
  height: 94px !important;
  transform: translateY(-50%) !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:disabled {
  border-radius: 10px 10px 7px 7px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #28180d 0%, #1d1008 58%, #120904 100%) !important;
  border-color: #9a7041 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 154, .15),
    inset 0 -4px 0 rgba(10, 5, 2, .92),
    0 6px 0 rgba(12, 6, 3, .86),
    0 11px 20px rgba(0, 0, 0, .30) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:hover:not(:disabled) {
  background: linear-gradient(180deg, #342012 0%, #241309 58%, #160b05 100%) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil::after {
  left: 18px !important;
  right: 18px !important;
  bottom: 4px !important;
  height: 7px !important;
  border-radius: 0 0 5px 5px !important;
  background: linear-gradient(180deg, rgba(174, 126, 67, .24), rgba(30, 16, 7, .72)) !important;
}

.purchase-style-gil .gil-buy-shadow-plate {
  fill: rgba(7, 4, 2, .68) !important;
}
.purchase-style-gil .gil-buy-gold-frame {
  stroke: #9f7443 !important;
}
.purchase-style-gil .gil-buy-gold-frame-inner {
  stroke: #d2a861 !important;
}
.purchase-style-gil .gil-buy-wood-panel {
  fill: rgba(34, 20, 10, .99) !important;
  stroke: rgba(159, 116, 67, .30) !important;
}
.purchase-style-gil .gil-buy-bottom-lip {
  fill: rgba(12, 6, 3, .88) !important;
  stroke: rgba(159, 116, 67, .24) !important;
}
.purchase-style-gil .gil-buy-top-sheen {
  stroke: rgba(210, 168, 97, .22) !important;
}
.purchase-style-gil .gil-buy-woodgrain {
  stroke: rgba(210, 168, 97, .07) !important;
}
.purchase-style-gil .gil-buy-woodgrain.is-two {
  stroke: rgba(159, 116, 67, .10) !important;
}
.purchase-style-gil .gil-buy-woodgrain.is-three {
  stroke: rgba(6, 3, 2, .46) !important;
}
.purchase-style-gil .gil-stage-wing,
.purchase-style-gil .gil-stage-top-crown,
.purchase-style-gil .gil-stage-bottom-crown,
.purchase-style-gil .gil-buy-side-emblem path {
  fill: rgba(31, 18, 9, .99) !important;
  stroke: #9f7443 !important;
}
.purchase-style-gil .gil-stage-wing-inner {
  fill: rgba(20, 11, 6, .99) !important;
  stroke: #d2a861 !important;
}
.purchase-style-gil .gil-stage-top-inset,
.purchase-style-gil .gil-stage-bottom-inset,
.purchase-style-gil .gil-buy-side-emblem circle {
  fill: rgba(159, 116, 67, .18) !important;
  stroke: #d2a861 !important;
}
.purchase-style-gil .gil-stage-coin circle:first-child,
.purchase-style-gil .gil-stage-top-coin circle {
  fill: rgba(25, 14, 7, .99) !important;
  stroke: #9f7443 !important;
}
.purchase-style-gil .gil-stage-coin .inner {
  fill: rgba(210, 168, 97, .07) !important;
  stroke: #d2a861 !important;
}
.purchase-style-gil .gil-buy-top-crest path:first-child,
.purchase-style-gil .gil-buy-bottom-crest path:first-child,
.purchase-style-gil .gil-stage-bottom-gem path:first-child {
  fill: #9f7443 !important;
  stroke: #d2a861 !important;
}
.purchase-style-gil .gil-buy-top-crest path:nth-child(2),
.purchase-style-gil .gil-buy-bottom-crest path:nth-child(2),
.purchase-style-gil .gil-stage-bottom-gem path:nth-child(2),
.purchase-style-gil .gil-buy-corner-stars path {
  fill: #d2a861 !important;
  stroke: #70451f !important;
}

@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-gil {
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }
  .purchase-style-gil .gil-buy-stage {
    left: -13px !important;
    width: calc(100% + 26px) !important;
    height: 84px !important;
  }
}

.purchase-style-gil .gil-stage-coin text,
.purchase-style-gil .gil-stage-top-coin text,
.purchase-style-gil .gil-buy-side-emblem text,
.purchase-style-gil .gil-buy-top-crest text {
  transform-box: fill-box !important;
  transform-origin: center !important;
  transform: scaleX(.82) scaleY(1.04) !important;
}

@keyframes gilFxReflectionSweep {
  0%, 12% {
    transform: translateX(-145%) skewX(-18deg);
    opacity: 0;
  }
  24% { opacity: .15; }
  38% { opacity: .82; }
  52% { opacity: .34; }
  68%, 100% {
    transform: translateX(165%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes gilFxCoinGlint {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 210, 122, 0));
    opacity: .94;
  }
  46% {
    filter: brightness(1.28) drop-shadow(0 0 9px rgba(255, 210, 122, .72));
    opacity: 1;
  }
  58% {
    filter: brightness(1.08) drop-shadow(0 0 4px rgba(255, 210, 122, .30));
  }
}

@keyframes gilFxStarTwinkle {
  0%, 100% {
    opacity: .36;
    transform: scale(.72) rotate(0deg);
  }
  42% {
    opacity: 1;
    transform: scale(1.34) rotate(24deg);
  }
  68% {
    opacity: .72;
    transform: scale(.96) rotate(44deg);
  }
}

@keyframes gilFxDustRise {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.58) rotate(0deg);
  }
  16% { opacity: 1; }
  58% {
    opacity: .86;
    transform: translateY(-8px) scale(1.08) rotate(18deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(.68) rotate(42deg);
  }
}

@keyframes gilFxFrameBreath {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 205, 111, .08));
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(255, 205, 111, .34));
  }
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil::before,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:hover:not(:disabled)::before,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:focus-visible::before,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil:disabled::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 4px !important;
  bottom: 8px !important;
  left: -28% !important;
  width: 22% !important;
  border: 0 !important;
  border-radius: 5px !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255, 235, 190, .08) 22%,
    rgba(255, 245, 217, .66) 50%,
    rgba(255, 210, 129, .16) 78%,
    rgba(255,255,255,0) 100%
  ) !important;
  mix-blend-mode: screen !important;
  filter: blur(.4px) !important;
  animation: gilFxReflectionSweep 4.4s ease-in-out infinite !important;
}

.purchase-style-gil .gil-buy-stage,
.purchase-style-gil .gil-buy-ornament {
  animation: gilFxFrameBreath 3.2s ease-in-out infinite !important;
}

.purchase-style-gil .gil-stage-coin,
.purchase-style-gil .gil-stage-top-coin,
.purchase-style-gil .gil-buy-side-emblem,
.purchase-style-gil .gil-buy-top-crest {
  transform-box: fill-box !important;
  transform-origin: center !important;
  animation: gilFxCoinGlint 2.8s ease-in-out infinite !important;
}
.purchase-style-gil .gil-stage-coin-right,
.purchase-style-gil .gil-buy-side-emblem-right {
  animation-delay: -.9s !important;
}
.purchase-style-gil .gil-stage-top-coin,
.purchase-style-gil .gil-buy-top-crest {
  animation-delay: -1.6s !important;
}

.purchase-style-gil .gil-buy-corner-stars path {
  transform-box: fill-box !important;
  transform-origin: center !important;
  animation: gilFxStarTwinkle 1.75s ease-in-out infinite !important;
}
.purchase-style-gil .gil-buy-corner-stars path:nth-child(2) { animation-delay: -.42s !important; }
.purchase-style-gil .gil-buy-corner-stars path:nth-child(3) { animation-delay: -.84s !important; }
.purchase-style-gil .gil-buy-corner-stars path:nth-child(4) { animation-delay: -1.26s !important; }

.purchase-style-gil .custom-buy-fx-gil {
  display: block !important;
  position: absolute !important;
  inset: -19px -20px -18px !important;
  z-index: 8 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.purchase-style-gil .custom-buy-fx-gil::before,
.purchase-style-gil .custom-buy-fx-gil::after {
  content: none !important;
  display: none !important;
}
.purchase-style-gil .custom-buy-fx-gil i {
  display: block !important;
  position: absolute !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 222, 151, .68) !important;
  background:
    radial-gradient(circle at 34% 30%, #fff9e9 0 13%, #ffe3a0 14% 34%, #cf8e31 35% 68%, rgba(207, 142, 49, 0) 69%) !important;
  box-shadow:
    0 0 8px rgba(255, 210, 122, .68),
    0 0 16px rgba(255, 178, 63, .34),
    inset 0 0 4px rgba(255,255,255,.38) !important;
  filter: none !important;
  animation: gilFxDustRise 2.35s linear infinite !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(1) {
  left: 5% !important;
  bottom: 0 !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(2) {
  left: 18% !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  animation-delay: -.38s !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(3) {
  left: 47% !important;
  bottom: -2px !important;
  width: 17px !important;
  height: 17px !important;
  animation-delay: -.78s !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(4) {
  right: 18% !important;
  top: -2px !important;
  width: 11px !important;
  height: 11px !important;
  animation-delay: -1.16s !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(5) {
  right: 5% !important;
  bottom: 1px !important;
  animation-delay: -1.54s !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(6) {
  left: 51% !important;
  top: -4px !important;
  width: 12px !important;
  height: 12px !important;
  animation-delay: -1.92s !important;
}

@media (max-width: 700px) {
  .purchase-style-gil .custom-buy-fx-gil {
    inset: -15px -14px -14px !important;
  }
  .purchase-style-gil .custom-buy-fx-gil i {
    width: 11px !important;
    height: 11px !important;
  }
}

.box-card.is-sold-out .purchase-style-legendary .legendary-buy-stage,
.box-card.is-sold-out .purchase-style-legendary .legendary-buy-ornament,
.box-card.is-sold-out .purchase-style-bryer .bryer-buy-stage,
.box-card.is-sold-out .purchase-style-bryer .bryer-buy-ornament,
.box-card.is-sold-out .purchase-style-gil .gil-buy-stage,
.box-card.is-sold-out .purchase-style-gil .gil-buy-ornament {
  opacity: .30 !important;
  filter: grayscale(.78) saturate(.28) brightness(.58) !important;
  animation-play-state: paused !important;
}
.box-card.is-sold-out .purchase-style-legendary .custom-buy-fx,
.box-card.is-sold-out .purchase-style-bryer .custom-buy-fx,
.box-card.is-sold-out .purchase-style-gil .custom-buy-fx,
.box-card.is-sold-out .purchase-style-cards .custom-buy-fx,
.box-card.is-sold-out .purchase-style-legendary .custom-buy-fx::before,
.box-card.is-sold-out .purchase-style-legendary .custom-buy-fx::after,
.box-card.is-sold-out .purchase-style-bryer .custom-buy-fx::before,
.box-card.is-sold-out .purchase-style-bryer .custom-buy-fx::after,
.box-card.is-sold-out .purchase-style-gil .custom-buy-fx::before,
.box-card.is-sold-out .purchase-style-gil .custom-buy-fx::after,
.box-card.is-sold-out .purchase-style-cards .custom-buy-fx::before,
.box-card.is-sold-out .purchase-style-cards .custom-buy-fx::after,
.box-card.is-sold-out .purchase-style-legendary .custom-buy-fx i,
.box-card.is-sold-out .purchase-style-bryer .custom-buy-fx i,
.box-card.is-sold-out .purchase-style-gil .custom-buy-fx i,
.box-card.is-sold-out .purchase-style-cards .custom-buy-fx i {
  opacity: .12 !important;
  filter: grayscale(1) brightness(.48) !important;
  animation-play-state: paused !important;
}

.box-card:not(.is-sold-out) .box-glow,
.box-card:not(.is-sold-out) .box-visual::before,
.box-card:not(.is-sold-out) .box-visual::after,
.box-card.is-legendary-coffer:not(.is-sold-out)::before,
.box-card:not(.is-sold-out) .box-peek-trigger,
.box-card:not(.is-sold-out) .box-peek-trigger img {
  animation-play-state: running !important;
}

.purchase-action-pair.purchase-style-minions {
  position: relative;
  isolation: isolate;
}
.box-card .card-actions .purchase-action-pair.purchase-style-minions {
  min-height: 132px;
}
.box-card .card-actions .purchase-action-pair.purchase-style-minions > .box-buy-button {
  position: relative;
  z-index: 4;
}
.purchase-style-minions .minions-buy-stage,
.purchase-style-minions .minions-buy-ornament {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.purchase-style-minions .minions-buy-stage {
  inset: -20px -58px -22px -58px;
  z-index: 1;
}
.purchase-style-minions .minions-buy-ornament {
  inset: 0;
  z-index: 3;
}
.purchase-style-minions > button.box-buy-button.buy-style-minions,
.purchase-style-minions > button.box-buy-button.buy-style-minions:hover:not(:disabled),
.purchase-style-minions > button.box-buy-button.buy-style-minions:focus-visible,
.purchase-style-minions > button.box-buy-button.buy-style-minions:disabled {
  background: linear-gradient(180deg, rgba(255,244,174,.96), rgba(221,197,74,.93) 34%, rgba(150,122,28,.94) 66%, rgba(91,97,26,.95) 100%) !important;
  border-color: rgba(246, 205, 97, .9) !important;
  color: #463109 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,230,.72), inset 0 -1px 0 rgba(76,65,12,.32) !important;
}
.purchase-style-minions .box-buy-button-label {
  color: #463109 !important;
  text-shadow: 0 1px 0 rgba(255,248,210,.72), 0 0 10px rgba(244,215,122,.22) !important;
}
.purchase-style-minions .minions-stage-side {
  fill: rgba(62, 49, 14, .82);
  stroke: #d4ae44;
  stroke-width: 6;
}
.purchase-style-minions .minions-stage-side-inner {
  fill: rgba(118, 106, 30, .55);
  stroke: rgba(250, 229, 150, .75);
  stroke-width: 4;
}
.purchase-style-minions .minions-stage-crown,
.purchase-style-minions .minions-stage-pendant {
  fill: rgba(95, 72, 18, .78);
  stroke: #e3bc59;
  stroke-width: 5;
}
.purchase-style-minions .minions-stage-crown-inner,
.purchase-style-minions .minions-stage-pendant-inner {
  fill: rgba(255, 245, 190, .62);
  stroke: rgba(248, 218, 120, .95);
  stroke-width: 3;
}
.purchase-style-minions .minions-stage-top-gem path:first-child,
.purchase-style-minions .minions-stage-bottom-gem path:first-child {
  fill: #58d172;
  stroke: #d5ffb1;
  stroke-width: 3;
}
.purchase-style-minions .minions-stage-top-gem path:nth-child(2),
.purchase-style-minions .minions-stage-bottom-gem path:nth-child(2) {
  fill: #ffe78a;
  stroke: #ffd45e;
  stroke-width: 2;
}
.purchase-style-minions .minions-stage-left-crystals path {
  fill: #7fea71;
  stroke: #d6ffbc;
  stroke-width: 3;
}
.purchase-style-minions .minions-stage-right-crystals path {
  fill: #cc85ff;
  stroke: #ffd6ff;
  stroke-width: 3;
}
.purchase-style-minions .minions-stage-left-minion path:first-child {
  fill: rgba(38, 26, 8, .92);
  stroke: #d9b04d;
  stroke-width: 4;
}
.purchase-style-minions .minions-stage-left-minion path:nth-child(2),
.purchase-style-minions .minions-stage-left-minion path:nth-child(3) {
  stroke: #d9b04d;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}
.purchase-style-minions .minions-stage-left-minion circle { fill: #f8e8b2; }
.purchase-style-minions .minions-stage-right-dragon path {
  fill: rgba(163, 115, 21, .88);
  stroke: #f0cf78;
  stroke-width: 4;
}
.purchase-style-minions .minions-stage-right-dragon circle { fill: #84a6ff; }
.purchase-style-minions .minions-stage-thread {
  stroke: rgba(249, 223, 136, .55);
  stroke-width: 4;
  stroke-linecap: round;
}
.purchase-style-minions .minions-stage-stars path {
  fill: #f6df8b;
  opacity: .9;
}
.purchase-style-minions .minions-buy-shadow { fill: rgba(48, 41, 13, .28); }
.purchase-style-minions .minions-buy-frame {
  fill: rgba(66, 54, 14, .68);
  stroke: #e3bc59;
  stroke-width: 3;
}
.purchase-style-minions .minions-buy-frame-inner {
  fill: rgba(112, 95, 28, .76);
  stroke: rgba(250, 228, 149, .82);
  stroke-width: 2.5;
}
.purchase-style-minions .minions-buy-panel {
  fill: rgba(0,0,0,0);
  stroke: rgba(246, 223, 126, .3);
  stroke-width: 1.5;
}
.purchase-style-minions .minions-buy-bottom-lip {
  fill: rgba(84, 73, 20, .52);
  stroke: rgba(238, 207, 103, .28);
  stroke-width: 1.5;
}
.purchase-style-minions .minions-buy-panel-glow {
  stroke: rgba(255, 252, 205, .36);
  stroke-width: 24;
  stroke-linecap: round;
}
.purchase-style-minions .minions-buy-woodgrain {
  fill: none;
  stroke: rgba(255, 241, 166, .14);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.purchase-style-minions .minions-buy-woodgrain.is-two { stroke: rgba(111, 168, 70, .20); }
.purchase-style-minions .minions-buy-woodgrain.is-three { stroke: rgba(227, 186, 92, .12); }
.purchase-style-minions .minions-buy-top-crest path:first-child,
.purchase-style-minions .minions-buy-bottom-crest path:first-child {
  fill: #4ccd63;
  stroke: #e5ffc0;
  stroke-width: 2.8;
}
.purchase-style-minions .minions-buy-top-crest path:nth-child(2),
.purchase-style-minions .minions-buy-bottom-crest path:nth-child(2) {
  fill: #fce694;
  stroke: #e1bb58;
  stroke-width: 2;
}
.purchase-style-minions .minions-buy-top-crest path:nth-child(3) {
  fill: none;
  stroke: rgba(250, 233, 150, .58);
  stroke-width: 3;
  stroke-linecap: round;
}
.purchase-style-minions .minions-buy-left-plinth .shell,
.purchase-style-minions .minions-buy-right-plinth .shell {
  fill: rgba(78, 61, 16, .84);
  stroke: #e2bb57;
  stroke-width: 3;
}
.purchase-style-minions .minions-buy-left-plinth .inset,
.purchase-style-minions .minions-buy-right-plinth .inset {
  fill: rgba(160, 132, 28, .32);
  stroke: rgba(250, 233, 148, .74);
  stroke-width: 2;
}
.purchase-style-minions .minions-buy-left-plinth .face path:first-child {
  fill: rgba(34, 24, 10, .92);
  stroke: #e1bb57;
  stroke-width: 3;
}
.purchase-style-minions .minions-buy-left-plinth .face path:nth-child(2),
.purchase-style-minions .minions-buy-left-plinth .face path:nth-child(3) {
  fill: none;
  stroke: #e1bb57;
  stroke-width: 3.2;
  stroke-linecap: round;
}
.purchase-style-minions .minions-buy-left-plinth .face circle { fill: #fff2be; }
.purchase-style-minions .minions-buy-right-plinth .face.dragon path {
  fill: rgba(171, 122, 24, .84);
  stroke: #f2d47f;
  stroke-width: 3;
}
.purchase-style-minions .minions-buy-right-plinth .face.dragon circle { fill: #8db4ff; }
.purchase-style-minions .minions-buy-left-crystals path {
  fill: #7ae26a;
  stroke: #ddffc6;
  stroke-width: 2.6;
}
.purchase-style-minions .minions-buy-right-crystals path {
  fill: #c57cff;
  stroke: #ffd7ff;
  stroke-width: 2.6;
}
.purchase-style-minions .minions-buy-stars path {
  fill: #ffe387;
  stroke: rgba(184, 140, 48, .72);
  stroke-width: 1.2;
}
.purchase-style-minions .minions-buy-ornament::before {
  content: "";
  position: absolute;
  left: 8.8%;
  right: 8.8%;
  top: 24.2%;
  bottom: 24.2%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 48%, rgba(255,252,210,.98) 0%, rgba(234,208,84,.92) 24%, rgba(157,170,56,.88) 58%, rgba(82,96,31,.92) 82%, rgba(66,77,25,.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,242,178,.24), inset 0 -10px 20px rgba(60,70,20,.22);
  pointer-events: none;
  z-index: 2;
}
.purchase-style-minions .minions-buy-ornament::after {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 35%;
  height: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,252,220,.52) 20%, rgba(255,255,255,.88) 50%, rgba(255,252,220,.52) 80%, rgba(255,255,255,0) 100%);
  filter: blur(10px);
  opacity: .75;
  pointer-events: none;
  z-index: 2;
}
@keyframes minionsFireflyFloat {
  0% {
    transform: translate3d(0, 4px, 0) scale(.72);
    opacity: 0;
  }
  18% { opacity: .95; }
  50% {
    transform: translate3d(8px, -18px, 0) scale(1);
    opacity: .85;
  }
  100% {
    transform: translate3d(-6px, -38px, 0) scale(.66);
    opacity: 0;
  }
}
@keyframes minionsCrystalPulse {
  0%,100% {
    filter: drop-shadow(0 0 2px rgba(255,255,255,.1));
    opacity: .92;
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255,248,174,.55)) drop-shadow(0 0 12px rgba(103, 229, 118, .28));
    opacity: 1;
  }
}
@keyframes minionsManaSweep {
  0% {
    transform: translateX(-110%) skewX(-20deg);
    opacity: 0;
  }
  12% { opacity: .18; }
  48% { opacity: .38; }
  100% {
    transform: translateX(120%) skewX(-20deg);
    opacity: 0;
  }
}
.custom-buy-fx.custom-buy-fx-minions {
  position: absolute;
  inset: -10px -26px -8px -26px;
  pointer-events: none;
  z-index: 2;
}
.custom-buy-fx.custom-buy-fx-minions i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,182,.95) 0%, rgba(247,214,97,.8) 52%, rgba(247,214,97,0) 72%);
  box-shadow: 0 0 10px rgba(247,214,97,.55), 0 0 16px rgba(136,220,88,.28);
  animation: minionsFireflyFloat 2.8s ease-in-out infinite;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(1) {
  left: 7%;
  top: 76%;
  animation-delay: 0s;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(2) {
  left: 12%;
  top: 26%;
  animation-delay: .55s;
  width: 6px;
  height: 6px;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(3) {
  left: 23%;
  top: 20%;
  animation-delay: 1s;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(4) {
  right: 20%;
  top: 24%;
  animation-delay: .35s;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(5) {
  right: 10%;
  top: 68%;
  animation-delay: 1.5s;
  width: 6px;
  height: 6px;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(6) {
  right: 7%;
  top: 34%;
  animation-delay: .9s;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(7) {
  left: 50%;
  bottom: 6%;
  animation-delay: 1.8s;
}
.custom-buy-fx.custom-buy-fx-minions i:nth-child(8) {
  left: 46%;
  top: 8%;
  animation-delay: 2.15s;
  width: 5px;
  height: 5px;
}
.purchase-style-minions .minions-buy-left-crystals path,
.purchase-style-minions .minions-buy-right-crystals path,
.purchase-style-minions .minions-stage-left-crystals path,
.purchase-style-minions .minions-stage-right-crystals path { animation: minionsCrystalPulse 3.2s ease-in-out infinite; }
.purchase-style-minions .minions-buy-right-crystals path:nth-child(2),
.purchase-style-minions .minions-buy-left-crystals path:nth-child(2),
.purchase-style-minions .minions-stage-right-crystals path:nth-child(2),
.purchase-style-minions .minions-stage-left-crystals path:nth-child(2) { animation-delay: .5s; }
.purchase-style-minions .minions-buy-right-crystals path:nth-child(3),
.purchase-style-minions .minions-buy-left-crystals path:nth-child(3),
.purchase-style-minions .minions-stage-right-crystals path:nth-child(3),
.purchase-style-minions .minions-stage-left-crystals path:nth-child(3) { animation-delay: 1s; }
.purchase-style-minions > button.box-buy-button.buy-style-minions::before {
  content: "";
  position: absolute;
  inset: 10% -12%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,252,208,.15) 40%, rgba(255,255,255,.38) 50%, rgba(255,252,208,.15) 60%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  transform: translateX(-110%) skewX(-20deg);
  animation: minionsManaSweep 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.box-card.is-sold-out .purchase-style-minions .custom-buy-fx-minions,
.box-card.is-sold-out .purchase-style-minions .minions-buy-stage,
.box-card.is-sold-out .purchase-style-minions .minions-buy-ornament {
  opacity: .32;
  filter: saturate(.15) brightness(.85);
}
@media (max-width: 820px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-minions { min-height: 122px; }
  .purchase-style-minions .minions-buy-stage { inset: -18px -42px -18px -42px; }
}

.box-card .card-actions .purchase-action-pair.purchase-style-minions {
  min-height: 0 !important;
  margin-top: 7px !important;
  margin-bottom: 25px !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-minions > .box-buy-button {
  position: relative !important;
  z-index: 3 !important;
}

.purchase-style-minions .minions-buy-stage {
  inset: auto !important;
  left: -17px !important;
  top: 50% !important;
  width: calc(100% + 34px) !important;
  height: 94px !important;
  transform: translateY(-50%) !important;
  transform-origin: center !important;
  overflow: visible !important;
}
.purchase-style-minions .minions-buy-ornament {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  overflow: visible !important;
}

.purchase-style-minions .minions-stage-side-left,
.purchase-style-minions .minions-stage-side-inner-left,
.purchase-style-minions .minions-stage-left-crystals,
.purchase-style-minions .minions-stage-left-minion {
  transform-box: fill-box !important;
  transform-origin: left center !important;
  transform: translateX(13px) scale(.70, .82) !important;
}
.purchase-style-minions .minions-stage-side-right,
.purchase-style-minions .minions-stage-side-inner-right,
.purchase-style-minions .minions-stage-right-crystals,
.purchase-style-minions .minions-stage-right-dragon {
  transform-box: fill-box !important;
  transform-origin: right center !important;
  transform: translateX(-13px) scale(.70, .82) !important;
}
.purchase-style-minions .minions-stage-crown,
.purchase-style-minions .minions-stage-crown-inner,
.purchase-style-minions .minions-stage-top-gem {
  transform-box: fill-box !important;
  transform-origin: center top !important;
  transform: translateY(7px) scale(.72, .78) !important;
}
.purchase-style-minions .minions-stage-pendant,
.purchase-style-minions .minions-stage-pendant-inner,
.purchase-style-minions .minions-stage-bottom-gem {
  transform-box: fill-box !important;
  transform-origin: center bottom !important;
  transform: translateY(-7px) scale(.70, .76) !important;
}
.purchase-style-minions .minions-stage-thread {
  display: none !important;
}
.purchase-style-minions .minions-stage-stars {
  transform-box: fill-box !important;
  transform-origin: center !important;
  transform: scale(.78) !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions:hover:not(:disabled),
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions:disabled {
  border-radius: 12px 12px 8px 8px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 205, .98) 0%, rgba(245, 231, 111, .96) 26%, rgba(177, 185, 57, .95) 61%, rgba(82, 104, 34, .98) 100%) !important;
  border-color: #f1c95c !important;
  color: #4a350c !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 224, .82),
    inset 0 -4px 0 rgba(87, 84, 22, .58),
    0 0 0 1px rgba(255, 231, 130, .28),
    0 7px 0 rgba(61, 55, 15, .72),
    0 12px 22px rgba(0, 0, 0, .24) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions:hover:not(:disabled) {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 220, 1) 0%, rgba(255, 239, 122, .98) 28%, rgba(190, 199, 65, .97) 62%, rgba(91, 116, 37, .99) 100%) !important;
}
.purchase-style-minions .box-buy-button-label {
  color: #4a350c !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 221, .82),
    0 0 9px rgba(255, 241, 151, .34) !important;
}

.purchase-style-minions .minions-stage-side {
  fill: rgba(104, 80, 20, .94) !important;
  stroke: #f0c451 !important;
  stroke-width: 4.2 !important;
  filter: drop-shadow(0 3px 4px rgba(72, 50, 8, .28));
}
.purchase-style-minions .minions-stage-side-inner {
  fill: rgba(158, 169, 48, .78) !important;
  stroke: #ffe79a !important;
  stroke-width: 2.4 !important;
}
.purchase-style-minions .minions-stage-crown,
.purchase-style-minions .minions-stage-pendant {
  fill: rgba(122, 91, 18, .94) !important;
  stroke: #f3ca5c !important;
  stroke-width: 3.4 !important;
  filter: drop-shadow(0 3px 4px rgba(72, 50, 8, .25));
}
.purchase-style-minions .minions-stage-crown-inner,
.purchase-style-minions .minions-stage-pendant-inner {
  fill: rgba(255, 239, 151, .94) !important;
  stroke: #d9a938 !important;
  stroke-width: 1.8 !important;
}
.purchase-style-minions .minions-stage-top-gem path:first-child,
.purchase-style-minions .minions-stage-bottom-gem path:first-child,
.purchase-style-minions .minions-buy-top-crest path:first-child,
.purchase-style-minions .minions-buy-bottom-crest path:first-child {
  fill: #54e17b !important;
  stroke: #e1ffc5 !important;
}
.purchase-style-minions .minions-stage-top-gem path:nth-child(2),
.purchase-style-minions .minions-stage-bottom-gem path:nth-child(2),
.purchase-style-minions .minions-buy-top-crest path:nth-child(2),
.purchase-style-minions .minions-buy-bottom-crest path:nth-child(2) {
  fill: #fff29d !important;
  stroke: #e5b93e !important;
}
.purchase-style-minions .minions-stage-left-crystals path,
.purchase-style-minions .minions-buy-left-crystals path {
  fill: #69eb78 !important;
  stroke: #d8ffc0 !important;
  filter: drop-shadow(0 0 4px rgba(89, 234, 113, .44));
}
.purchase-style-minions .minions-stage-right-crystals path,
.purchase-style-minions .minions-buy-right-crystals path {
  fill: #d47cff !important;
  stroke: #ffd1ff !important;
  filter: drop-shadow(0 0 4px rgba(207, 104, 255, .44));
}
.purchase-style-minions .minions-stage-left-minion path:first-child,
.purchase-style-minions .minions-buy-left-plinth .face path:first-child {
  fill: rgba(34, 27, 13, .98) !important;
  stroke: #f1c85b !important;
}
.purchase-style-minions .minions-stage-left-minion path:nth-child(2),
.purchase-style-minions .minions-stage-left-minion path:nth-child(3),
.purchase-style-minions .minions-buy-left-plinth .face path:nth-child(2),
.purchase-style-minions .minions-buy-left-plinth .face path:nth-child(3) {
  stroke: #f1c85b !important;
}
.purchase-style-minions .minions-stage-left-minion circle,
.purchase-style-minions .minions-buy-left-plinth .face circle {
  fill: #fff4c1 !important;
  stroke: #c98d24 !important;
  stroke-width: 1.2 !important;
}
.purchase-style-minions .minions-stage-right-dragon path,
.purchase-style-minions .minions-buy-right-plinth .face.dragon path {
  fill: rgba(211, 153, 39, .96) !important;
  stroke: #ffe89d !important;
}
.purchase-style-minions .minions-stage-right-dragon circle,
.purchase-style-minions .minions-buy-right-plinth .face.dragon circle {
  fill: #925cff !important;
  stroke: #e6d1ff !important;
  stroke-width: 1.1 !important;
}

.purchase-style-minions .minions-buy-shadow {
  fill: rgba(72, 53, 13, .32) !important;
}
.purchase-style-minions .minions-buy-frame {
  fill: rgba(160, 119, 24, .72) !important;
  stroke: #f4cb5e !important;
  stroke-width: 2.4 !important;
}
.purchase-style-minions .minions-buy-frame-inner {
  fill: rgba(247, 218, 103, .58) !important;
  stroke: #fff0a7 !important;
  stroke-width: 1.7 !important;
}
.purchase-style-minions .minions-buy-panel {
  fill: rgba(161, 177, 54, .18) !important;
  stroke: rgba(255, 244, 172, .56) !important;
}
.purchase-style-minions .minions-buy-bottom-lip {
  fill: rgba(105, 94, 26, .44) !important;
  stroke: rgba(247, 208, 89, .52) !important;
}
.purchase-style-minions .minions-buy-panel-glow {
  stroke: rgba(255, 255, 211, .52) !important;
  stroke-width: 18 !important;
}
.purchase-style-minions .minions-buy-woodgrain {
  stroke: rgba(255, 250, 195, .20) !important;
}
.purchase-style-minions .minions-buy-woodgrain.is-two {
  stroke: rgba(92, 181, 75, .27) !important;
}
.purchase-style-minions .minions-buy-woodgrain.is-three {
  stroke: rgba(216, 170, 61, .20) !important;
}
.purchase-style-minions .minions-buy-left-plinth .shell,
.purchase-style-minions .minions-buy-right-plinth .shell {
  fill: rgba(121, 88, 18, .92) !important;
  stroke: #f1c65a !important;
  stroke-width: 2.2 !important;
}
.purchase-style-minions .minions-buy-left-plinth .inset,
.purchase-style-minions .minions-buy-right-plinth .inset {
  fill: rgba(244, 216, 102, .30) !important;
  stroke: #fff0aa !important;
  stroke-width: 1.4 !important;
}
.purchase-style-minions .minions-buy-stars path,
.purchase-style-minions .minions-stage-stars path {
  fill: #fff19a !important;
  stroke: #c68b22 !important;
  opacity: 1 !important;
}

.box-card.is-sold-out .purchase-style-minions .minions-buy-stage,
.box-card.is-sold-out .purchase-style-minions .minions-buy-ornament,
.box-card.is-sold-out .purchase-style-minions .custom-buy-fx-minions {
  opacity: .32 !important;
  filter: saturate(.15) brightness(.85) !important;
}

@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-minions {
    min-height: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 13px !important;
  }
  .purchase-style-minions .minions-buy-stage {
    left: -13px !important;
    width: calc(100% + 26px) !important;
    height: 84px !important;
  }
}

@keyframes minionsStagePrismaticAura {
  0%, 100% {
    filter:
      drop-shadow(-1px 0 2px rgba(87, 255, 119, .14))
      drop-shadow(1px 0 2px rgba(213, 103, 255, .12))
      drop-shadow(0 1px 3px rgba(255, 219, 88, .10));
  }
  50% {
    filter:
      drop-shadow(-3px 0 5px rgba(87, 255, 119, .34))
      drop-shadow(3px 0 5px rgba(213, 103, 255, .30))
      drop-shadow(0 0 6px rgba(255, 227, 101, .22));
  }
}

@keyframes minionsEmeraldWisp {
  0% {
    transform: translate3d(0, 12px, 0) rotate(0deg) scale(.45);
    opacity: 0;
  }
  14%  { opacity: .95; }
  48% {
    transform: translate3d(10px, -5px, 0) rotate(105deg) scale(1.08);
    opacity: 1;
  }
  78%  { opacity: .72; }
  100% {
    transform: translate3d(-5px, -28px, 0) rotate(210deg) scale(.56);
    opacity: 0;
  }
}

@keyframes minionsAmethystWisp {
  0% {
    transform: translate3d(0, 10px, 0) rotate(0deg) scale(.48);
    opacity: 0;
  }
  16%  { opacity: .92; }
  52% {
    transform: translate3d(-11px, -6px, 0) rotate(-110deg) scale(1.12);
    opacity: 1;
  }
  80%  { opacity: .70; }
  100% {
    transform: translate3d(6px, -30px, 0) rotate(-220deg) scale(.58);
    opacity: 0;
  }
}

@keyframes minionsCrystalDance {
  0%, 100% { transform: translateY(1px) scale(.94) rotate(-1deg); }
  50%      { transform: translateY(-2px) scale(1.10) rotate(1.5deg); }
}

@keyframes minionsGemHeartbeat {
  0%, 100% {
    transform: scale(.90) rotate(0deg);
    filter: drop-shadow(0 0 2px rgba(255, 240, 132, .38));
  }
  45% {
    transform: scale(1.16) rotate(4deg);
    filter:
      drop-shadow(0 0 8px rgba(112, 255, 128, .82))
      drop-shadow(0 0 13px rgba(255, 230, 105, .60));
  }
}

@keyframes minionsStarSpark {
  0%, 100% {
    transform: scale(.65) rotate(0deg);
    filter: drop-shadow(0 0 1px rgba(255, 241, 143, .25));
  }
  50% {
    transform: scale(1.35) rotate(45deg);
    filter:
      drop-shadow(0 0 6px rgba(255, 245, 164, .95))
      drop-shadow(0 0 11px rgba(202, 112, 255, .48));
  }
}

@keyframes minionsSideSpiritPulse {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(255, 221, 94, .18));
  }
  50% {
    filter:
      drop-shadow(0 0 7px rgba(255, 224, 100, .58))
      drop-shadow(0 0 11px rgba(101, 239, 119, .35));
  }
}

@keyframes minionsManaCurrent {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -330; }
}

@keyframes minionsAuraBreathLeft {
  0%, 100% {
    transform: translate3d(-2px, 1px, 0) scale(.90);
    opacity: .08;
  }
  50% {
    transform: translate3d(1px, -1px, 0) scale(1.04);
    opacity: .26;
  }
}

@keyframes minionsAuraBreathRight {
  0%, 100% {
    transform: translate3d(2px, 1px, 0) scale(.90);
    opacity: .07;
  }
  50% {
    transform: translate3d(-1px, -1px, 0) scale(1.04);
    opacity: .24;
  }
}

.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stage {
  animation: minionsStagePrismaticAura 3.4s ease-in-out infinite !important;
}

.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions {
  inset: -16px -27px -14px -27px !important;
  z-index: 7 !important;
  overflow: visible !important;
  isolation: isolate !important;
  mix-blend-mode: screen;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions::before,
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 32%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(9px);
  z-index: 0;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions::before {
  left: 0;
  background: radial-gradient(ellipse at center, rgba(100, 255, 122, .34) 0%, rgba(90, 235, 113, .12) 42%, rgba(90, 235, 113, 0) 72%);
  animation: minionsAuraBreathLeft 3.25s ease-in-out infinite !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions::after {
  right: 0;
  background: radial-gradient(ellipse at center, rgba(214, 105, 255, .32) 0%, rgba(191, 90, 244, .11) 42%, rgba(191, 90, 244, 0) 72%);
  animation: minionsAuraBreathRight 3.25s ease-in-out -1.6s infinite !important;
}

.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i {
  z-index: 2 !important;
  width: 11px !important;
  height: 11px !important;
  opacity: 0;
  border-radius: 52% 48% 54% 46% !important;
  clip-path: polygon(50% 0, 76% 28%, 100% 50%, 75% 72%, 50% 100%, 26% 73%, 0 50%, 25% 28%);
  transform-origin: center !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 72%;
  width: 3px;
  height: 19px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, currentColor, transparent);
  filter: blur(1.4px);
  opacity: .62;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(1),
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(2),
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(7) {
  color: #82ff91;
  background: radial-gradient(circle at 35% 30%, #f1ffe7 0 13%, #9cff9c 14% 39%, #45df6d 40% 70%, rgba(69, 223, 109, 0) 72%) !important;
  filter: drop-shadow(0 0 5px rgba(105, 255, 126, .95)) drop-shadow(0 0 12px rgba(74, 231, 105, .70));
  animation: minionsEmeraldWisp 2.45s ease-in-out infinite !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(3),
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(8) {
  color: #ffe56e;
  background: radial-gradient(circle at 35% 30%, #fffde1 0 13%, #fff09a 14% 42%, #e8b83d 43% 72%, rgba(232, 184, 61, 0) 74%) !important;
  filter: drop-shadow(0 0 5px rgba(255, 239, 128, .96)) drop-shadow(0 0 12px rgba(232, 184, 61, .70));
  animation: minionsEmeraldWisp 2.7s ease-in-out infinite !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(4),
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(5),
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(6) {
  color: #dc88ff;
  background: radial-gradient(circle at 35% 30%, #fff0ff 0 13%, #e9a1ff 14% 40%, #ad55e8 41% 71%, rgba(173, 85, 232, 0) 73%) !important;
  filter: drop-shadow(0 0 5px rgba(225, 137, 255, .96)) drop-shadow(0 0 12px rgba(184, 79, 239, .72));
  animation: minionsAmethystWisp 2.55s ease-in-out infinite !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(1) {
  left: 4% !important;
  top: 70% !important;
  animation-delay: -1.75s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(2) {
  left: 12% !important;
  top: 31% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -.55s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(3) {
  left: 27% !important;
  top: 4% !important;
  width: 9px !important;
  height: 9px !important;
  animation-delay: -2.05s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(4) {
  right: 25% !important;
  top: 3% !important;
  width: 9px !important;
  height: 9px !important;
  animation-delay: -1.10s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(5) {
  right: 11% !important;
  top: 67% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -2.18s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(6) {
  right: 3% !important;
  top: 34% !important;
  animation-delay: -.72s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(7) {
  left: 42% !important;
  bottom: -4% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -1.30s !important;
}
.purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i:nth-child(8) {
  left: 55% !important;
  top: -5% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -.28s !important;
}

.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-left-crystals path,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-right-crystals path,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-left-crystals path,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-right-crystals path {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: minionsCrystalDance 1.85s ease-in-out infinite !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-left-crystals path:nth-child(2),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-right-crystals path:nth-child(2),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-left-crystals path:nth-child(2),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-right-crystals path:nth-child(2) {
  animation-delay: -.62s !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-left-crystals path:nth-child(3),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-right-crystals path:nth-child(3),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-left-crystals path:nth-child(3),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-right-crystals path:nth-child(3) {
  animation-delay: -1.18s !important;
}

.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-top-gem path:first-child,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-bottom-gem path:first-child,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-top-crest path:first-child,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-bottom-crest path:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: minionsGemHeartbeat 1.65s ease-in-out infinite !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-bottom-gem path:first-child,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-bottom-crest path:first-child {
  animation-delay: -.82s !important;
}

.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stars path,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-stars path {
  transform-box: fill-box;
  transform-origin: center;
  animation: minionsStarSpark 1.45s ease-in-out infinite !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stars path:nth-child(2),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-stars path:nth-child(2) { animation-delay: -.35s !important; }
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stars path:nth-child(3),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-stars path:nth-child(3) { animation-delay: -.72s !important; }
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stars path:nth-child(4),
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-stars path:nth-child(4) { animation-delay: -1.08s !important; }

.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-left-minion,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-left-plinth .face {
  animation: minionsSideSpiritPulse 2.10s ease-in-out infinite !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-right-dragon,
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-right-plinth .face.dragon {
  animation: minionsSideSpiritPulse 2.10s ease-in-out -1.05s infinite !important;
}

.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-woodgrain {
  stroke-dasharray: 78 38;
  animation: minionsManaCurrent 4.4s linear infinite !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-woodgrain.is-two {
  animation-duration: 5.2s !important;
  animation-direction: reverse !important;
}
.box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-woodgrain.is-three {
  animation-duration: 6.1s !important;
}

.box-card.is-sold-out .purchase-style-minions .minions-buy-stage,
.box-card.is-sold-out .purchase-style-minions .minions-buy-ornament,
.box-card.is-sold-out .purchase-style-minions .custom-buy-fx-minions,
.box-card.is-sold-out .purchase-style-minions .custom-buy-fx-minions::before,
.box-card.is-sold-out .purchase-style-minions .custom-buy-fx-minions::after,
.box-card.is-sold-out .purchase-style-minions .custom-buy-fx-minions i,
.box-card.is-sold-out .purchase-style-minions .minions-buy-stage *,
.box-card.is-sold-out .purchase-style-minions .minions-buy-ornament * {
  animation-play-state: paused !important;
}

@media (max-width: 700px) {
  .purchase-style-minions .custom-buy-fx.custom-buy-fx-minions {
    inset: -18px -27px -16px -27px !important;
  }
  .purchase-style-minions .custom-buy-fx.custom-buy-fx-minions i {
    width: 8px !important;
    height: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-style-minions .minions-buy-stage,
  .purchase-style-minions .minions-buy-ornament,
  .purchase-style-minions .custom-buy-fx-minions,
  .purchase-style-minions .custom-buy-fx-minions::before,
  .purchase-style-minions .custom-buy-fx-minions::after,
  .purchase-style-minions .custom-buy-fx-minions i,
  .purchase-style-minions .minions-buy-stage *,
  .purchase-style-minions .minions-buy-ornament * {
    animation: none !important;
  }
  .purchase-style-minions .custom-buy-fx-minions::before,
  .purchase-style-minions .custom-buy-fx-minions::after {
    opacity: .42 !important;
  }
  .purchase-style-minions .custom-buy-fx-minions i {
    opacity: .82 !important;
  }
}

@keyframes shopAmbientDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .76;
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.015);
    opacity: 1;
  }
}
@keyframes shopOrbitTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shopSigilFloat {
  0%, 100% {
    transform: translateY(0) rotate(-8deg) scale(.96);
    opacity: .075;
  }
  50% {
    transform: translateY(-13px) rotate(5deg) scale(1.04);
    opacity: .14;
  }
}
@keyframes shopSparkWander {
  0%, 100% {
    transform: translate3d(0, 6px, 0) scale(.72) rotate(0deg);
    opacity: .16;
  }
  38% { opacity: .72; }
  60% {
    transform: translate3d(7px, -10px, 0) scale(1.14) rotate(20deg);
    opacity: .46;
  }
}
@keyframes shopHeadingGlimmer {
  0%, 100% {
    opacity: .42;
    filter: brightness(.9);
    transform: scaleX(.98);
  }
  50% {
    opacity: .9;
    filter: brightness(1.24);
    transform: scaleX(1);
  }
}
@keyframes shopIconBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(.95);
  }
  50% {
    transform: translateY(-2px) scale(1.08);
    filter: brightness(1.2);
  }
}
@keyframes shopDividerPulse {
  0%, 100% {
    opacity: .46;
    filter: brightness(.86);
  }
  50% {
    opacity: .9;
    filter: brightness(1.18);
  }
}
@keyframes shopGridAura {
  0%, 100% {
    opacity: .42;
    transform: scale(.985);
  }
  50% {
    opacity: .72;
    transform: scale(1.01);
  }
}

.view-shop .coffer-sections {
  position: relative;
  isolation: isolate;
  overflow: visible;
  gap: 36px !important;
  margin-top: 8px;
  padding: 24px 24px 70px;
}
.view-shop .coffer-sections > *:not(.shop-catalog-ambience) {
  position: relative;
  z-index: 2;
}

.shop-catalog-ambience {
  position: absolute;
  inset: -34px -62px -38px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 18% at 24% 6%, rgba(235, 197, 101, .105), transparent 72%),
    radial-gradient(ellipse 40% 22% at 82% 26%, rgba(91, 190, 153, .085), transparent 74%),
    radial-gradient(ellipse 34% 18% at 14% 62%, rgba(195, 75, 121, .055), transparent 76%),
    radial-gradient(ellipse 48% 18% at 61% 92%, rgba(215, 176, 85, .07), transparent 78%),
    radial-gradient(circle, rgba(255, 232, 165, .08) 0 1px, transparent 1.5px);
  background-size: auto, auto, auto, auto, 43px 43px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
  animation: shopAmbientDrift 9s ease-in-out infinite;
}
.shop-catalog-ambience::before,
.shop-catalog-ambience::after {
  content: "";
  position: absolute;
  top: 58px;
  bottom: 76px;
  width: 30px;
  opacity: .54;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 225, 145, .86) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 25%, rgba(115, 207, 172, .72) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(255, 225, 145, .72) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 75%, rgba(196, 86, 128, .58) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 95%, rgba(255, 225, 145, .82) 0 2px, transparent 3px),
    linear-gradient(to bottom, transparent, rgba(233, 199, 112, .22) 8%, rgba(91, 176, 145, .18) 47%, rgba(233, 199, 112, .22) 88%, transparent);
  background-size: 100% 100%;
  filter: drop-shadow(0 0 8px rgba(218, 182, 91, .12));
}
.shop-catalog-ambience::before { left: 4px; }
.shop-catalog-ambience::after {
  right: 4px;
  transform: scaleX(-1);
}

.shop-ambient-orbit {
  position: absolute;
  width: 238px;
  height: 238px;
  border: 1px solid rgba(230, 198, 113, .10);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 12px rgba(230, 198, 113, .018),
    inset 0 0 0 34px rgba(87, 169, 139, .014);
  opacity: .8;
  animation: shopOrbitTurn 38s linear infinite;
}
.shop-ambient-orbit::before,
.shop-ambient-orbit::after {
  content: "◆";
  position: absolute;
  left: 50%;
  color: rgba(239, 208, 126, .28);
  font-size: 11px;
  text-shadow: 0 0 10px rgba(239, 208, 126, .20);
}
.shop-ambient-orbit::before {
  top: -7px;
  transform: translateX(-50%);
}
.shop-ambient-orbit::after {
  bottom: -7px;
  transform: translateX(-50%);
}
.shop-ambient-orbit-left {
  left: -144px;
  top: 20%;
}
.shop-ambient-orbit-right {
  right: -144px;
  top: 58%;
  animation-direction: reverse;
  animation-duration: 46s;
}

.shop-ambient-sigil {
  position: absolute;
  color: rgba(238, 208, 128, .10);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 90px;
  line-height: 1;
  text-shadow: 0 0 28px rgba(212, 174, 81, .10);
  animation: shopSigilFloat 8.5s ease-in-out infinite;
}
.shop-ambient-sigil-left {
  left: 1.5%;
  top: 38%;
}
.shop-ambient-sigil-right {
  right: 1.5%;
  top: 69%;
  color: rgba(103, 195, 161, .11);
  animation-delay: -4.1s;
}

.shop-ambient-spark {
  position: absolute;
  color: rgba(255, 229, 156, .76);
  font-size: 12px;
  text-shadow: 0 0 9px rgba(255, 221, 132, .64);
  animation: shopSparkWander 5.6s ease-in-out infinite;
}
.shop-ambient-spark-1 {
  left: 8%;
  top: 12%;
}
.shop-ambient-spark-2 {
  right: 13%;
  top: 18%;
  animation-delay: -.8s;
  color: rgba(120, 224, 184, .72);
}
.shop-ambient-spark-3 {
  left: 3%;
  top: 42%;
  animation-delay: -1.5s;
}
.shop-ambient-spark-4 {
  right: 5%;
  top: 43%;
  animation-delay: -2.2s;
  color: rgba(221, 117, 157, .62);
  font-size: 9px;
}
.shop-ambient-spark-5 {
  left: 16%;
  top: 73%;
  animation-delay: -2.9s;
  color: rgba(121, 213, 179, .66);
}
.shop-ambient-spark-6 {
  right: 9%;
  top: 78%;
  animation-delay: -3.6s;
}
.shop-ambient-spark-7 {
  left: 43%;
  top: 96%;
  animation-delay: -4.3s;
  color: rgba(219, 119, 158, .52);
  font-size: 10px;
}
.shop-ambient-spark-8 {
  right: 39%;
  top: 55%;
  animation-delay: -4.9s;
  font-size: 9px;
}

.view-shop .coffer-section-block {
  position: relative;
  gap: 20px !important;
  padding-inline: 8px;
}
.view-shop .coffer-section-block::before {
  content: "";
  position: absolute;
  inset: 36px -3.5% -34px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(11px);
  animation: shopGridAura 7.8s ease-in-out infinite;
}
.view-shop .coffer-section-recommended::before {
  background:
    radial-gradient(ellipse 30% 32% at 17% 34%, rgba(229, 186, 82, .08), transparent 72%),
    radial-gradient(ellipse 34% 34% at 52% 62%, rgba(229, 186, 82, .045), transparent 75%),
    radial-gradient(ellipse 28% 30% at 88% 36%, rgba(88, 174, 143, .045), transparent 74%);
}
.view-shop .coffer-section-others::before {
  background:
    radial-gradient(ellipse 31% 34% at 15% 38%, rgba(87, 175, 143, .065), transparent 74%),
    radial-gradient(ellipse 35% 36% at 53% 66%, rgba(87, 175, 143, .04), transparent 76%),
    radial-gradient(ellipse 28% 30% at 89% 35%, rgba(217, 177, 85, .042), transparent 74%);
  animation-delay: -3.9s;
}
.view-shop .coffer-section-block > * {
  position: relative;
  z-index: 1;
}

.view-shop .coffer-section-heading {
  width: 100%;
  overflow: visible !important;
  gap: 11px !important;
}
.view-shop .coffer-section-heading::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 4px !important;
  bottom: -9px !important;
  top: auto !important;
  right: auto !important;
  width: 56px !important;
  height: 1px !important;
  opacity: .78 !important;
  background: linear-gradient(90deg, transparent, currentColor 38%, transparent) !important;
  box-shadow: 13px 0 8px currentColor !important;
  pointer-events: none;
}
.view-shop .coffer-section-heading::after {
  content: "" !important;
  display: block !important;
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto;
  height: 1px !important;
  margin-left: 14px;
  opacity: .68 !important;
  background:
    radial-gradient(circle at 100% 50%, currentColor 0 2px, transparent 3px),
    linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 34%, transparent) 38%, transparent 88%) !important;
  transform-origin: left center;
  animation: shopHeadingGlimmer 4.6s ease-in-out infinite;
  pointer-events: none;
}
.view-shop .coffer-section-heading h3 {
  letter-spacing: .075em !important;
  text-shadow: 0 0 14px color-mix(in srgb, currentColor 20%, transparent), 0 2px 3px rgba(0,0,0,.62);
}
.view-shop .coffer-section-heading .coffer-section-icon {
  animation: shopIconBreath 3.8s ease-in-out infinite;
  text-shadow: 0 0 12px currentColor;
}
.view-shop .others-heading::after { animation-delay: -2.2s; }
.view-shop .others-heading .coffer-section-icon { animation-delay: -1.9s; }

.shop-section-divider,
.shop-catalog-footer-ornament {
  width: min(760px, 88%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto auto auto minmax(28px, 1fr);
  align-items: center;
  gap: 10px;
  color: rgba(236, 204, 119, .62);
  pointer-events: none;
  animation: shopDividerPulse 5.2s ease-in-out infinite;
}
.shop-section-divider span,
.shop-catalog-footer-ornament span {
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 58%, transparent);
}
.shop-section-divider span:last-child,
.shop-catalog-footer-ornament span:last-child { transform: scaleX(-1); }
.shop-section-divider i,
.shop-catalog-footer-ornament i {
  color: rgba(103, 193, 159, .64);
  font-style: normal;
  font-size: 11px;
  text-shadow: 0 0 9px rgba(103, 193, 159, .38);
}
.shop-section-divider b,
.shop-catalog-footer-ornament b {
  color: #edcf80;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(237, 207, 128, .52);
}
.shop-section-divider {
  margin-top: -6px;
  margin-bottom: -6px;
}
.shop-catalog-footer-ornament {
  width: min(640px, 78%);
  margin-top: 8px;
  color: rgba(232, 199, 111, .48);
  animation-delay: -2.6s;
}
.shop-catalog-footer-ornament b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 204, 122, .25);
  transform: rotate(45deg);
  font-size: 9px;
}
.shop-catalog-footer-ornament b::first-letter { transform: rotate(-45deg); }

.view-shop .coffer-section-block .grid {
  position: relative;
  z-index: 2;
}
.view-shop .coffer-section-block .grid > .box-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .view-shop .coffer-sections {
    padding-inline: 8px;
    gap: 30px !important;
  }
  .shop-catalog-ambience { inset-inline: -24px; }
  .shop-catalog-ambience::before,
  .shop-catalog-ambience::after { opacity: .32; }
  .shop-ambient-sigil { font-size: 66px; }
  .shop-ambient-orbit {
    width: 190px;
    height: 190px;
  }
  .shop-ambient-orbit-left { left: -132px; }
  .shop-ambient-orbit-right { right: -132px; }
}

@media (max-width: 700px) {
  .view-shop .coffer-sections {
    margin-top: 2px;
    padding: 18px 0 52px;
    gap: 26px !important;
  }
  .view-shop .coffer-section-block {
    padding-inline: 0;
    gap: 16px !important;
  }
  .view-shop .coffer-section-heading::after {
    margin-left: 8px;
    opacity: .48 !important;
  }
  .view-shop .coffer-section-heading::before { width: 38px !important; }
  .shop-catalog-ambience::before,
  .shop-catalog-ambience::after,
  .shop-ambient-sigil,
  .shop-ambient-orbit { display: none; }
  .shop-ambient-spark-3,
  .shop-ambient-spark-4,
  .shop-ambient-spark-7,
  .shop-ambient-spark-8 { display: none; }
  .shop-section-divider,
  .shop-catalog-footer-ornament {
    width: 92%;
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-catalog-ambience,
  .shop-ambient-orbit,
  .shop-ambient-sigil,
  .shop-ambient-spark,
  .view-shop .coffer-section-block::before,
  .view-shop .coffer-section-heading::after,
  .view-shop .coffer-section-heading .coffer-section-icon,
  .shop-section-divider,
  .shop-catalog-footer-ornament {
    animation: none !important;
  }
}

@keyframes shopOpenBloom {
  0%, 100% {
    opacity: .22;
    transform: translate3d(0, 0, 0) scale(.94);
  }
  50% {
    opacity: .42;
    transform: translate3d(0, -18px, 0) scale(1.08);
  }
}
@keyframes shopRibbonDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--ribbon-angle)) scaleX(.96);
    opacity: .34;
  }
  50% {
    transform: translate3d(28px, -13px, 0) rotate(calc(var(--ribbon-angle) + 2deg)) scaleX(1.04);
    opacity: .66;
  }
}
@keyframes shopFiligreeGlow {
  0%, 100% {
    opacity: .34;
    filter: drop-shadow(0 0 4px currentColor);
    transform: translateY(0) scaleX(var(--filigree-flip, 1));
  }
  50% {
    opacity: .66;
    filter: drop-shadow(0 0 12px currentColor);
    transform: translateY(-13px) scaleX(var(--filigree-flip, 1));
  }
}
@keyframes shopSigilFloatVisible {
  0%, 100% {
    transform: translateY(0) rotate(-8deg) scale(.96);
    opacity: .12;
  }
  50% {
    transform: translateY(-13px) rotate(5deg) scale(1.04);
    opacity: .26;
  }
}
@keyframes shopFiligreeTrace {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -70; }
}
@keyframes shopConstellationFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -130; }
}
@keyframes shopConstellationNode {
  0%, 100% {
    opacity: .26;
    r: 2.6px;
  }
  50% {
    opacity: .92;
    r: 5px;
  }
}
@keyframes shopDustAscend {
  0% {
    transform: translate3d(0, 34px, 0);
    opacity: 0;
  }
  18% { opacity: .82; }
  76% { opacity: .56; }
  100% {
    transform: translate3d(18px, -115px, 0);
    opacity: 0;
  }
}
@keyframes shopSideRailShimmer {
  0%, 100% {
    opacity: .28;
    filter: brightness(.88);
  }
  50% {
    opacity: .72;
    filter: brightness(1.35);
  }
}

.view-shop .coffer-sections {
  background: transparent !important;
  padding-inline: 0 !important;
}
.shop-catalog-ambience {
  inset: -72px calc(50% - 50vw) -126px !important;
  overflow: visible !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
}
.shop-catalog-ambience::before,
.shop-catalog-ambience::after {
  content: none !important;
  display: none !important;
}
.view-shop .coffer-section-block,
.view-shop .coffer-section-block .grid {
  background: transparent !important;
}

.view-shop .coffer-section-block::before {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

.shop-ambient-bloom {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(28px);
  animation: shopOpenBloom 9s ease-in-out infinite;
}
.shop-ambient-bloom-gold {
  left: -7vw;
  top: 3%;
  width: min(560px, 48vw);
  height: 320px;
  background: radial-gradient(ellipse, rgba(247, 205, 94, .32) 0%, rgba(231, 183, 71, .13) 38%, transparent 72%);
}
.shop-ambient-bloom-emerald {
  right: -8vw;
  top: 37%;
  width: min(620px, 52vw);
  height: 360px;
  background: radial-gradient(ellipse, rgba(86, 221, 167, .26) 0%, rgba(55, 169, 129, .11) 42%, transparent 74%);
  animation-delay: -4.4s;
}
.shop-ambient-bloom-rose {
  left: 20%;
  bottom: -2%;
  width: min(640px, 55vw);
  height: 310px;
  background: radial-gradient(ellipse, rgba(224, 87, 153, .20) 0%, rgba(148, 65, 122, .09) 43%, transparent 75%);
  animation-delay: -6.8s;
}

.shop-ambient-ribbon {
  --ribbon-angle: -8deg;
  position: absolute;
  width: min(980px, 78vw);
  height: 260px;
  border-radius: 50%;
  border-top: 1px solid rgba(247, 211, 118, .42);
  border-bottom: 1px solid rgba(247, 211, 118, .09);
  filter: drop-shadow(0 0 9px rgba(242, 198, 89, .28));
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
  animation: shopRibbonDrift 12s ease-in-out infinite;
}
.shop-ambient-ribbon::before,
.shop-ambient-ribbon::after {
  content: "";
  position: absolute;
  inset: 18px 34px;
  border-radius: 50%;
  border-top: 1px dashed rgba(100, 221, 173, .30);
}
.shop-ambient-ribbon::after {
  inset: 38px 78px;
  border-top-style: solid;
  border-top-color: rgba(221, 100, 157, .22);
}
.shop-ambient-ribbon-top {
  left: 7vw;
  top: 7%;
}
.shop-ambient-ribbon-middle {
  --ribbon-angle: 9deg;
  right: 3vw;
  top: 43%;
  animation-delay: -5.2s;
  animation-duration: 15s;
}
.shop-ambient-ribbon-bottom {
  --ribbon-angle: -4deg;
  left: 13vw;
  bottom: 0;
  animation-delay: -8.3s;
  animation-duration: 17s;
}

.shop-ambient-filigree {
  position: absolute;
  top: 2%;
  width: 116px;
  height: 96%;
  overflow: visible;
  fill: none;
  color: rgba(244, 207, 111, .72);
  pointer-events: none;
  animation: shopFiligreeGlow 8s ease-in-out infinite;
}
.shop-ambient-filigree-left {
  left: max(7px, 1.2vw);
  --filigree-flip: 1;
}
.shop-ambient-filigree-right {
  right: max(7px, 1.2vw);
  color: rgba(104, 218, 173, .62);
  --filigree-flip: -1;
  animation-delay: -4s;
}
.shop-filigree-main,
.shop-filigree-branch {
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shop-filigree-main {
  stroke-width: 1.4;
  stroke-dasharray: 7 10;
  animation: shopFiligreeTrace 11s linear infinite;
}
.shop-filigree-branch {
  stroke-width: 1;
  opacity: .64;
}
.shop-filigree-diamonds {
  fill: rgba(247, 210, 111, .28);
  stroke: currentColor;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.shop-ambient-filigree-right .shop-filigree-diamonds {
  fill: rgba(104, 218, 173, .24);
}

.shop-ambient-constellation {
  position: absolute;
  inset: 2% 2.5% 1%;
  width: 95%;
  height: 97%;
  overflow: visible;
  pointer-events: none;
  opacity: .76;
  filter: drop-shadow(0 0 7px rgba(242, 202, 104, .22));
}
.shop-constellation-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3 13;
  animation: shopConstellationFlow 17s linear infinite;
}
.shop-constellation-gold { stroke: rgba(245, 211, 123, .34); }
.shop-constellation-emerald {
  stroke: rgba(100, 218, 171, .28);
  animation-delay: -5s;
}
.shop-constellation-rose {
  stroke: rgba(221, 102, 157, .24);
  animation-delay: -10s;
}
.shop-constellation-nodes circle {
  vector-effect: non-scaling-stroke;
  animation: shopConstellationNode 4.8s ease-in-out infinite;
}
.shop-constellation-nodes circle:nth-child(2n) { animation-delay: -2.4s; }
.shop-constellation-nodes-gold circle { fill: #f6d982; }
.shop-constellation-nodes-emerald circle { fill: #79e1b6; }
.shop-constellation-nodes-rose circle { fill: #e47aaa; }

.shop-ambient-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  animation: shopDustAscend 10s linear infinite;
}
.shop-ambient-dust-gold {
  left: 12%;
  top: 44%;
  background: rgba(255, 223, 137, .82);
  box-shadow: 72px -91px rgba(255,223,137,.68), 168px 35px rgba(255,223,137,.44), 256px -42px rgba(255,223,137,.72), 348px 77px rgba(255,223,137,.38), 452px -108px rgba(255,223,137,.62), 588px 16px rgba(255,223,137,.48), 710px -65px rgba(255,223,137,.74);
}
.shop-ambient-dust-emerald {
  right: 14%;
  top: 71%;
  background: rgba(113, 226, 181, .75);
  box-shadow: -86px -78px rgba(113,226,181,.55), -188px 22px rgba(113,226,181,.39), -302px -110px rgba(113,226,181,.65), -426px 58px rgba(113,226,181,.42), -562px -44px rgba(113,226,181,.58);
  animation-delay: -3.6s;
  animation-duration: 12s;
}
.shop-ambient-dust-rose {
  left: 35%;
  top: 91%;
  background: rgba(229, 121, 170, .66);
  box-shadow: 94px -54px rgba(229,121,170,.48), 214px 28px rgba(229,121,170,.32), 355px -86px rgba(229,121,170,.54), 496px 13px rgba(229,121,170,.38);
  animation-delay: -7.2s;
  animation-duration: 13.5s;
}

.view-shop .coffer-section-block .grid::before,
.view-shop .coffer-section-block .grid::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 5%;
  width: 22px;
  pointer-events: none;
  opacity: .56;
  background:
    radial-gradient(circle at 50% 6%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 50% 31%, currentColor 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 57%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 50% 82%, currentColor 0 1.5px, transparent 2.5px),
    linear-gradient(to bottom, transparent 0%, currentColor 11%, color-mix(in srgb, currentColor 28%, transparent) 46%, currentColor 88%, transparent 100%) center / 1px 100% no-repeat;
  filter: drop-shadow(0 0 7px currentColor);
  animation: shopSideRailShimmer 5.8s ease-in-out infinite;
}
.view-shop .coffer-section-block .grid::before { left: -38px; }
.view-shop .coffer-section-block .grid::after {
  right: -38px;
  animation-delay: -2.9s;
}
.view-shop .coffer-section-recommended .grid::before,
.view-shop .coffer-section-recommended .grid::after { color: rgba(242, 207, 112, .58); }
.view-shop .coffer-section-others .grid::before,
.view-shop .coffer-section-others .grid::after { color: rgba(103, 211, 169, .52); }

.shop-ambient-sigil-left {
  left: 8.5vw !important;
  top: 29% !important;
}
.shop-ambient-sigil-right {
  right: 8vw !important;
  top: 68% !important;
}
.shop-ambient-sigil {
  font-size: 104px;
  animation-name: shopSigilFloatVisible !important;
}
.shop-ambient-spark {
  opacity: 1;
  filter: drop-shadow(0 0 5px currentColor);
}
.shop-ambient-spark-1 { box-shadow: 48px 22px currentColor, 116px 91px rgba(255,229,156,.42); }
.shop-ambient-spark-2 { box-shadow: -64px 64px currentColor, -145px 8px rgba(120,224,184,.38); }
.shop-ambient-spark-3 { box-shadow: 38px 96px currentColor, 122px -31px rgba(255,229,156,.36); }
.shop-ambient-spark-4 { box-shadow: -51px 78px currentColor, -126px -16px rgba(221,117,157,.34); }
.shop-ambient-spark-5 { box-shadow: 72px -48px currentColor, 164px 36px rgba(121,213,179,.34); }
.shop-ambient-spark-6 { box-shadow: -82px -52px currentColor, -174px 28px rgba(255,229,156,.38); }

@media (max-width: 900px) {
  .shop-catalog-ambience { inset-inline: calc(50% - 50vw) !important; }
  .shop-ambient-filigree {
    width: 78px;
    opacity: .62;
  }
  .shop-ambient-ribbon { width: 92vw; }
  .view-shop .coffer-section-block .grid::before { left: -20px; }
  .view-shop .coffer-section-block .grid::after { right: -20px; }
}

@media (max-width: 700px) {
  .shop-ambient-bloom {
    filter: blur(22px);
    opacity: .72;
  }
  .shop-ambient-bloom-gold {
    left: -38%;
    width: 88vw;
  }
  .shop-ambient-bloom-emerald {
    right: -42%;
    width: 94vw;
  }
  .shop-ambient-bloom-rose {
    left: 5%;
    width: 90vw;
  }
  .shop-ambient-ribbon {
    width: 112vw;
    opacity: .64;
  }
  .shop-ambient-filigree {
    display: block !important;
    width: 54px;
    opacity: .64;
  }
  .shop-ambient-filigree-left { left: 1px; }
  .shop-ambient-filigree-right { right: 1px; }
  .shop-ambient-constellation {
    inset-inline: 0;
    width: 100%;
    opacity: .62;
  }
  .view-shop .coffer-section-block .grid::before,
  .view-shop .coffer-section-block .grid::after {
    width: 14px;
    opacity: .48;
  }
  .view-shop .coffer-section-block .grid::before { left: -11px; }
  .view-shop .coffer-section-block .grid::after { right: -11px; }
  .shop-ambient-sigil {
    display: block !important;
    font-size: 68px;
  }
  .shop-ambient-sigil-left { left: 4vw !important; }
  .shop-ambient-sigil-right { right: 4vw !important; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-ambient-bloom,
  .shop-ambient-ribbon,
  .shop-ambient-filigree,
  .shop-filigree-main,
  .shop-constellation-line,
  .shop-constellation-nodes circle,
  .shop-ambient-dust,
  .view-shop .coffer-section-block .grid::before,
  .view-shop .coffer-section-block .grid::after {
    animation: none !important;
  }
}

.shop-ambient-constellation {
  display: none !important;
}

.view-shop .coffer-section-heading::before,
.view-shop .coffer-section-heading::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}

.view-shop .coffer-section-block .grid {
  column-gap: 24px !important;
  row-gap: 34px !important;
}

.shop-ambient-spark-1,
.shop-ambient-spark-2,
.shop-ambient-spark-3,
.shop-ambient-spark-4,
.shop-ambient-spark-5,
.shop-ambient-spark-6,
.shop-ambient-spark-7,
.shop-ambient-spark-8 {
  box-shadow: none !important;
}

.purchase-style-gil .custom-buy-fx-gil i {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: initial !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 221, 136, .78))
    drop-shadow(0 0 8px rgba(255, 174, 53, .34)) !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(2),
.purchase-style-gil .custom-buy-fx-gil i:nth-child(4),
.purchase-style-gil .custom-buy-fx-gil i:nth-child(6) {
  font-size: 12px !important;
}
.purchase-style-gil .custom-buy-fx-gil i:nth-child(3) {
  font-size: 18px !important;
}

@media (max-width: 700px) {
  .view-shop .coffer-section-block .grid {
    column-gap: 20px !important;
    row-gap: 30px !important;
  }
  .purchase-style-gil .custom-buy-fx-gil i {
    font-size: 12px !important;
  }
  .purchase-style-gil .custom-buy-fx-gil i:nth-child(2),
  .purchase-style-gil .custom-buy-fx-gil i:nth-child(4),
  .purchase-style-gil .custom-buy-fx-gil i:nth-child(6) {
    font-size: 10px !important;
  }
  .purchase-style-gil .custom-buy-fx-gil i:nth-child(3) {
    font-size: 14px !important;
  }
}

@font-face {
  font-family: "Bryer Legendary Buy";
  src:
    url("/fonts/Legendary%20Runes%20Free%20Trial.otf") format("opentype"),
    url("/fonts/Legendary%20Runes%20Free%20Trial.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bryer Cracked Buy";
  src:
    url("/fonts/MetalShred.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary .box-buy-button-label {
  font-family: "Bryer Legendary Buy", fantasy !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  letter-spacing: .055em !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer .box-buy-button-label {
  font-family: "Bryer Cracked Buy", fantasy !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  letter-spacing: .045em !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary .box-buy-button-label {
  font-size: 22px !important;
  line-height: .92 !important;
  transform: translateY(1px);
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer .box-buy-button-label {
  font-size: 26px !important;
  line-height: .92 !important;
  transform: translateY(1px);
}

@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-legendary .box-buy-button-label,
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-bryer .box-buy-button-label {
    font-size: 16px !important;
  }
}

@font-face {
  font-family: "Bryer Minions Buy";
  src: url("/fonts/Animal%20Paw.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bryer Gil Buy";
  src: url("/fonts/NeonLight-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions .box-buy-button-label {
  font-family: "Bryer Minions Buy", fantasy !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  letter-spacing: .035em !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil .box-buy-button-label {
  font-family: "Bryer Gil Buy", fantasy !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  letter-spacing: .045em !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions .box-buy-button-label {
  font-size: 22px !important;
  line-height: .92 !important;
  transform: translateY(1px);
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil .box-buy-button-label {
  font-size: 19px !important;
  line-height: .9 !important;
  transform: translateY(1px);
}

@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-minions .box-buy-button-label,
  .box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-gil .box-buy-button-label {
    font-size: 17px !important;
  }
}

.box-card
.card-actions
.purchase-action-pair
> button.btn.primary.box-buy-button:is(
  .buy-style-legendary,
  .buy-style-bryer,
  .buy-style-gil,
  .buy-style-minions
):not(#custom-buy-text-color-override) {
  color: var(--action-text, #172018) !important;
  -webkit-text-fill-color: var(--action-text, #172018) !important;
}

.box-card
.card-actions
.purchase-action-pair
> button.btn.primary.box-buy-button:is(
  .buy-style-legendary,
  .buy-style-bryer,
  .buy-style-gil,
  .buy-style-minions
):not(#custom-buy-text-color-override)
.box-buy-button-label {
  color: var(--action-text, #172018) !important;
  -webkit-text-fill-color: var(--action-text, #172018) !important;
}

.rewards-modal,
.rewards-modal-footer {
  overflow: visible !important;
}

.rewards-modal-footer .peek-close-button-shell.box-card {
  display: block !important;
  flex: 0 0 auto !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  min-width: 0 !important;
  max-width: calc(100vw - 72px) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 2px auto 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.rewards-modal-footer .peek-close-button-shell.box-card::before,
.rewards-modal-footer .peek-close-button-shell.box-card::after {
  content: none !important;
  display: none !important;
}

.rewards-modal-footer .peek-close-button-shell.peek-close-style-default {
  width: 184px !important;
}

.rewards-modal-footer .peek-close-button-shell:is(
  .peek-close-style-legendary,
  .peek-close-style-bryer,
  .peek-close-style-gil,
  .peek-close-style-minions
) {
  width: 242px !important;
}

.rewards-modal-footer .peek-close-button-shell .card-actions {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.rewards-modal-footer .peek-close-button-shell .purchase-action-pair {
  width: 100% !important;
}

.rewards-modal-footer .peek-close-button-shell .peek-close-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer;
}

.rewards-modal-footer .peek-close-button-shell .peek-close-button .box-buy-button-label {
  display: block;
  width: 100%;
  text-align: center;
}

.rewards-modal-footer .peek-close-button-shell.peek-close-style-default .peek-close-button {
  color: var(--action-text) !important;
  -webkit-text-fill-color: var(--action-text) !important;
}

.rewards-modal-footer .peek-close-button-shell:is(
  .peek-close-style-legendary,
  .peek-close-style-bryer,
  .peek-close-style-gil,
  .peek-close-style-minions
) .purchase-action-pair {
  transform-origin: center;
}

@media (max-width: 640px) {
  .rewards-modal-footer {
    padding-inline: 8px !important;
  }

  .rewards-modal-footer .peek-close-button-shell.peek-close-style-default {
    width: 170px !important;
  }

  .rewards-modal-footer .peek-close-button-shell:is(
    .peek-close-style-legendary,
    .peek-close-style-bryer,
    .peek-close-style-gil,
    .peek-close-style-minions
  ) {
    width: min(222px, calc(100vw - 76px)) !important;
  }
}

.rewards-modal-footer
.peek-close-button-shell:is(.peek-close-style-bryer, .peek-close-style-gil)
.peek-close-button {
  position: relative !important;
  z-index: 8 !important;
  color: var(--action-text, #172018) !important;
  -webkit-text-fill-color: var(--action-text, #172018) !important;
}

.rewards-modal-footer
.peek-close-button-shell:is(.peek-close-style-bryer, .peek-close-style-gil)
.peek-close-button .box-buy-button-label {
  position: relative !important;
  z-index: 30 !important;
  color: var(--action-text, #172018) !important;
  -webkit-text-fill-color: var(--action-text, #172018) !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  isolation: isolate !important;
}

.vault-action-group .inventory-open-button-shell.box-card {
  position: relative !important;
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
  transform: none !important;
}
.vault-action-group .inventory-open-button-shell.box-card::before,
.vault-action-group .inventory-open-button-shell.box-card::after {
  content: none !important;
  display: none !important;
}
.inventory-open-button-shell .card-actions,
.inventory-open-button-shell .purchase-action-pair {
  position: relative !important;
  display: block !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
.inventory-open-button-shell .inventory-open-custom-button {
  position: relative !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}
.inventory-open-button-shell .inventory-open-button-label {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  width: 100% !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: currentColor !important;
}
.inventory-open-button-shell .inventory-open-custom-button.has-long-label .inventory-open-button-label {
  font-size: 9px !important;
  line-height: 1.12 !important;
  letter-spacing: .02em !important;
  white-space: normal !important;
}

.inventory-open-button-shell .custom-buy-fx,
.inventory-open-button-shell .legendary-buy-stage,
.inventory-open-button-shell .bryer-buy-stage,
.inventory-open-button-shell .gil-buy-stage,
.inventory-open-button-shell .minions-buy-stage,
.inventory-open-button-shell .cards-buy-stage {
  pointer-events: none !important;
}
.vault-action-group > .open-secondary {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

.ticker,
.ticker-message {
  text-align: center;
}

.gift-inline-error,
.gift-balance-warning {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}
.gift-inline-error {
  border: 1px solid rgba(255, 132, 126, .48);
  color: #ffd0cc;
  background: rgba(106, 28, 26, .54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18);
}
.gift-balance-warning {
  border: 1px solid rgba(240, 196, 99, .32);
  color: #f2d98f;
  background: rgba(76, 55, 17, .36);
}

.carousel-track {
  --carousel-step: 234px;
  --carousel-half: 105px;
}

@media (max-width: 820px) {
  html,
  body,
  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 7px 9px !important;
    padding: calc(7px + env(safe-area-inset-top)) 9px 8px !important;
  }
  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  .brand-mark {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .brand-mark img {
    width: 23px !important;
    height: 23px !important;
  }
  .brand > div:last-child {
    min-width: 0 !important;
  }
  .brand h1 {
    overflow: hidden !important;
    margin: 0 !important;
    font-size: clamp(12px, 3.7vw, 16px) !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .brand p,
  .topbar-ornament,
  .player-meta {
    display: none !important;
  }
  .player-chip {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  .avatar {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 10px !important;
  }
  .player-chip .audio-controls {
    width: 132px !important;
    min-width: 132px !important;
    flex: 0 0 132px !important;
    padding: 2px 5px !important;
  }
  .player-chip .audio-slider-row {
    grid-template-columns: 17px 22px minmax(58px, 1fr) !important;
    gap: 3px !important;
    min-height: 15px !important;
  }
  .player-chip .audio-slider-label {
    display: block !important;
    font-size: 7px !important;
    letter-spacing: .02em !important;
  }
  .player-chip .audio-volume-slider {
    width: 100% !important;
    min-width: 58px !important;
  }
  .player-chip .audio-icon-button.sound-toggle,
  .player-chip .audio-icon-button.sound-toggle:hover {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }
  .nav-cluster {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .nav-tabs {
    display: contents !important;
  }
  .nav-tabs::before,
  .nav-tabs::after {
    content: none !important;
    display: none !important;
  }
  .nav-cluster > .nav-help-button,
  .nav-cluster > .nav-venue-button,
  .nav-tabs .nav-tab {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 3px !important;
    font-size: clamp(8px, 2.55vw, 10px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ticker-wrap {
    padding: 8px 10px 0 !important;
  }
  .ticker {
    display: grid !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 7px 12px !important;
    text-align: center !important;
  }
  .ticker-label,
  .ticker-message {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .ticker-label {
    font-size: 9px !important;
  }
  .ticker-message {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .view-shop .hero,
  .view-vault .inventory-hero {
    overflow: visible !important;
  }
  .view-shop .hero-character,
  .view-vault .inventory-hero .hero-character {
    display: flex !important;
    top: auto !important;
    bottom: 0 !important;
    width: clamp(132px, 38vw, 190px) !important;
    height: 82% !important;
    overflow: visible !important;
    opacity: .64 !important;
  }
  .view-shop .hero-character-left,
  .view-vault .inventory-hero .hero-character-left {
    left: -5px !important;
    right: auto !important;
    justify-content: flex-start !important;
  }
  .view-shop .hero-character-right,
  .view-vault .inventory-hero .hero-character-right {
    display: flex !important;
    left: auto !important;
    right: -5px !important;
    justify-content: flex-end !important;
    opacity: .52 !important;
  }
  .view-shop .hero-character img,
  .view-vault .inventory-hero .hero-character img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .view-shop .hero-character-left img,
  .view-vault .inventory-hero .hero-character-left img {
    object-position: left bottom !important;
  }
  .view-shop .hero-character-right img,
  .view-vault .inventory-hero .hero-character-right img {
    object-position: right bottom !important;
  }

  .carousel-track {
    --carousel-step: 234px;
    --carousel-half: 105px;
    gap: 24px !important;
  }
  .carousel-viewport {
    width: 100% !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
  }
  .carousel-coffer {
    flex: 0 0 210px !important;
  }
  .carousel-arrow.left { left: 2px !important; }
  .carousel-arrow.right { right: 2px !important; }
  .carousel-fortune-path-overlay {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .vault-action-group {
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .vault-action-group > .open-secondary,
  .vault-action-group .inventory-open-button-shell.box-card,
  .inventory-open-button-shell .card-actions,
  .inventory-open-button-shell .purchase-action-pair,
  .inventory-open-button-shell .inventory-open-custom-button {
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
  .inventory-open-button-shell .inventory-open-custom-button,
  .vault-action-group > .open-secondary {
    padding: 12px 12px !important;
    font-size: 13px !important;
  }
  .inventory-open-button-shell .inventory-open-custom-button.has-long-label .inventory-open-button-label {
    font-size: 8px !important;
  }

  .inventory-purchase-picker {
    width: auto !important;
    min-width: 126px !important;
    max-width: 126px !important;
    justify-self: center !important;
  }
  .inventory-purchase-control {
    grid-template-columns: 32px 60px 32px !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
  }
  .inventory-purchase-control button {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }
  .inventory-purchase-control input {
    width: 60px !important;
    min-width: 0 !important;
    padding: 0 4px !important;
  }

  .collection-card {
    box-sizing: border-box !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .collection-card > img {
    width: 58px !important;
    height: 58px !important;
  }
  .collection-card > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .collection-card > div strong,
  .collection-card > div p,
  .collection-card .collection-gil {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .collection-card > .collection-count {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
  }

  .reel-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .reel-scene {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: min(100%, 720px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: auto !important;
    padding-inline: 0 !important;
    transform: none !important;
    text-align: center !important;
  }
  .reel-title,
  .reel-stack,
  .reel-line,
  .result-grid,
  .result-action-marker-axis {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .reel-stack {
    box-sizing: border-box !important;
    padding-inline: 8px !important;
  }
  .reel-line {
    box-sizing: border-box !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  .reel-number {
    width: 24px !important;
    min-width: 24px !important;
  }
  .reel-window,
  .reel-overlay.limited-time-reel .reel-window {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .reel-skip-button,
  .reel-skip-button:hover,
  .reel-skip-button:focus-visible,
  .reel-skip-button:active {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: max-content !important;
    max-width: calc(100% - 20px) !important;
    margin: 18px auto 0 !important;
    transform: none !important;
    text-align: center !important;
  }
  .result-grid,
  .result-grid.count-1,
  .result-grid.count-2,
  .result-grid.count-3,
  .result-grid.count-4,
  .result-grid.count-5,
  .reel-overlay.is-revealed .result-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 14px !important;
  }
  .result-card,
  .reel-overlay.is-revealed .result-card {
    box-sizing: border-box !important;
    width: min(100%, 350px) !important;
    max-width: 350px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .result-icon-stage,
  .reel-overlay.is-revealed .result-icon-stage,
  .reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage,
  .reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage,
  .reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage {
    display: grid !important;
    place-items: center !important;
    width: clamp(118px, 38vw, 166px) !important;
    height: clamp(118px, 38vw, 166px) !important;
    margin: 0 auto 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .result-icon-stage > img,
  .reel-overlay.is-revealed .result-icon-stage > img,
  .reel-overlay.is-revealed .result-grid.count-3 .result-icon-stage > img,
  .reel-overlay.is-revealed .result-grid.count-4 .result-icon-stage > img,
  .reel-overlay.is-revealed .result-grid.count-5 .result-icon-stage > img {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    width: 82% !important;
    height: 82% !important;
    max-width: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }

  .gift-compose-dialog {
    width: min(100%, 420px) !important;
    max-width: calc(100vw - 20px) !important;
  }
  .gift-inline-error,
  .gift-balance-warning {
    font-size: 11px !important;
  }
}

@media (max-width: 390px) {
  .player-chip .audio-controls {
    width: 112px !important;
    min-width: 112px !important;
    flex-basis: 112px !important;
  }
  .player-chip .audio-slider-row {
    grid-template-columns: 16px 18px minmax(46px, 1fr) !important;
  }
  .nav-cluster > .nav-help-button,
  .nav-cluster > .nav-venue-button,
  .nav-tabs .nav-tab {
    font-size: 8px !important;
  }
  .vault-action-group > .open-secondary,
  .vault-action-group .inventory-open-button-shell.box-card,
  .inventory-open-button-shell .card-actions,
  .inventory-open-button-shell .purchase-action-pair,
  .inventory-open-button-shell .inventory-open-custom-button {
    flex-basis: 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }
}

.vault-action-group > .inventory-open-button-shell {
  position: relative !important;
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.inventory-open-button-shell > .custom-buy-fx {
  z-index: 1 !important;
  pointer-events: none !important;
}
.inventory-open-button-shell > .inventory-open-custom-button {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  margin: 0 !important;
  transform: none;
}

@media (max-width: 820px) {

  .topbar .brand > div:last-child {
    min-width: 0 !important;
    overflow: visible !important;
  }
  .topbar .brand h1 {
    max-width: 100% !important;
    overflow: visible !important;
    font-size: clamp(11px, 3.35vw, 15px) !important;
    line-height: 1.02 !important;
    letter-spacing: .035em !important;
    text-overflow: clip !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }

  .topbar .nav-tabs .nav-tab {
    border: 1px solid rgba(214, 180, 95, .22) !important;
    border-radius: 7px !important;
    color: rgba(247, 245, 237, .82) !important;
    background:
      radial-gradient(circle at 50% 0, rgba(214,180,95,.09), transparent 64%),
      linear-gradient(145deg, rgba(43,59,42,.74), rgba(19,30,21,.84)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -2px 0 rgba(2,8,3,.26),
      0 4px 10px rgba(0,0,0,.18) !important;
    opacity: 1 !important;
  }
  .topbar .nav-tabs .nav-tab:hover:not(.active) {
    color: var(--gold-soft) !important;
    border-color: rgba(214,180,95,.4) !important;
    background:
      radial-gradient(circle at 50% 0, rgba(214,180,95,.15), transparent 64%),
      linear-gradient(145deg, rgba(52,71,51,.82), rgba(24,37,26,.9)) !important;
  }
  .topbar .nav-tabs .nav-tab.active {
    color: #172018 !important;
    border-color: rgba(247,232,181,.72) !important;
    background:
      repeating-linear-gradient(125deg, rgba(255,255,255,.13) 0 1px, transparent 1px 6px),
      linear-gradient(145deg, #f7e8b5, var(--gold)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      inset 0 -3px 0 rgba(104,76,18,.2),
      0 5px 12px rgba(214,180,95,.2) !important;
  }

  .vault-action-group > .inventory-open-button-shell,
  .inventory-open-button-shell > .inventory-open-custom-button,
  .vault-action-group > .open-secondary {
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

@media (max-width: 390px) {

  .vault-action-group > .inventory-open-button-shell,
  .inventory-open-button-shell > .inventory-open-custom-button,
  .vault-action-group > .open-secondary {
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

.inventory-open-style-gil > .custom-buy-fx-gil {
  display: block !important;
  position: absolute !important;
  inset: -18px -20px -17px !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 12px 18px 9px !important;
  border-radius: 18px !important;
  background: radial-gradient(ellipse at center, rgba(255,206,112,.54), rgba(255,206,112,.17) 44%, transparent 76%) !important;
  filter: blur(11px) !important;
  animation: gilButtonAuraPulse 3.1s ease-in-out infinite !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 20% !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, transparent, rgba(255,246,220,.15) 24%, rgba(255,248,228,.9) 50%, rgba(255,214,125,.24) 78%, transparent) !important;
  mix-blend-mode: screen !important;
  filter: blur(1px) !important;
  animation: gilButtonSweep 4.1s ease-in-out infinite !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  width: 15px !important;
  height: 15px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: initial !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  filter: drop-shadow(0 0 4px rgba(255,221,136,.78)) drop-shadow(0 0 8px rgba(255,174,53,.34)) !important;
  animation: gilFxDustRise 2.35s linear infinite !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(1) {
  left: 5% !important;
  bottom: 0 !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(2) {
  left: 18% !important;
  top: 1px !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  animation-delay: -.38s !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(3) {
  left: 47% !important;
  bottom: -2px !important;
  width: 17px !important;
  height: 17px !important;
  font-size: 17px !important;
  animation-delay: -.78s !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(4) {
  right: 18% !important;
  top: 2px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 12px !important;
  animation-delay: -1.16s !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(5) {
  right: 5% !important;
  bottom: 1px !important;
  animation-delay: -1.54s !important;
}
.inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(6) {
  left: 51% !important;
  top: -4px !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  animation-delay: -1.92s !important;
}

@media (max-width: 820px) {

  .reel-stack {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 4px !important;
    overflow: visible !important;
  }
  .reel-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  .reel-number {
    display: none !important;
  }
  .reel-window,
  .reel-overlay.limited-time-reel .reel-window {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    contain: layout paint !important;
  }
  .reel-track,
  .reel-overlay.limited-time-reel .reel-track {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    min-width: max-content !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 calc(50% - 72px) !important;
    box-sizing: border-box !important;
    transform-origin: left center !important;
  }
  .reel-card,
  .reel-overlay.limited-time-reel .reel-card {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 144px !important;
    align-self: center !important;
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none;
  }
  .reel-card > .reel-card-image-anchor {
    position: relative !important;
    inset: auto !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto !important;
  }
  .reel-card > .reel-card-name-anchor {
    position: relative !important;
    inset: auto !important;
    width: min(116px, 100%) !important;
    margin: 0 auto !important;
  }
  .marker,
  .marker.limited-time-golden-marker {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: center !important;
  }
  .marker.limited-time-golden-marker::before {
    top: 5px !important;
  }
  .marker.limited-time-golden-marker::after {
    bottom: 5px !important;
  }

  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 8px max(18px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    translate: none !important;
    transform: none !important;
  }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .continue-button {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 250px) !important;
    min-width: 0 !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
  }

  .inventory-open-style-gil > .custom-buy-fx-gil {
    inset: -15px -14px -14px !important;
  }
  .inventory-open-style-gil > .custom-buy-fx-gil i {
    font-size: 12px !important;
  }
  .inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(2),
  .inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(4),
  .inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(6) {
    font-size: 10px !important;
  }
  .inventory-open-style-gil > .custom-buy-fx-gil i:nth-child(3) {
    font-size: 14px !important;
  }
}

.inventory-open-style-gil > .custom-buy-fx-gil::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.inventory-open-style-minions > .custom-buy-fx-minions {
  display: block !important;
  position: absolute !important;
  inset: -18px -24px -16px !important;
  z-index: 1 !important;
  overflow: visible !important;
  isolation: isolate !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions::before,
.inventory-open-style-minions > .custom-buy-fx-minions::after {
  content: "" !important;
  position: absolute !important;
  top: 8% !important;
  bottom: 8% !important;
  width: 34% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: blur(9px) !important;
  will-change: transform, opacity !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions::before {
  left: 0 !important;
  background: radial-gradient(ellipse at center, rgba(100,255,122,.34), rgba(90,235,113,.12) 42%, transparent 72%) !important;
  animation: minionsAuraBreathLeft 3.25s ease-in-out infinite !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions::after {
  right: 0 !important;
  background: radial-gradient(ellipse at center, rgba(214,105,255,.32), rgba(191,90,244,.11) 42%, transparent 72%) !important;
  animation: minionsAuraBreathRight 3.25s ease-in-out -1.6s infinite !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  opacity: 0;
  border: 0 !important;
  border-radius: 52% 48% 54% 46% !important;
  clip-path: polygon(50% 0, 76% 28%, 100% 50%, 75% 72%, 50% 100%, 26% 73%, 0 50%, 25% 28%) !important;
  transform-origin: center !important;
  will-change: transform, opacity !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 72% !important;
  width: 3px !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, currentColor, transparent) !important;
  filter: blur(1.4px) !important;
  opacity: .62 !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(1),
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(2),
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(7) {
  color: #82ff91 !important;
  background: radial-gradient(circle at 35% 30%, #f1ffe7 0 13%, #9cff9c 14% 39%, #45df6d 40% 70%, transparent 72%) !important;
  filter: drop-shadow(0 0 5px rgba(105,255,126,.95)) drop-shadow(0 0 12px rgba(74,231,105,.70)) !important;
  animation: minionsEmeraldWisp 2.45s ease-in-out infinite !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(3),
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(8) {
  color: #ffe56e !important;
  background: radial-gradient(circle at 35% 30%, #fffde1 0 13%, #fff09a 14% 42%, #e8b83d 43% 72%, transparent 74%) !important;
  filter: drop-shadow(0 0 5px rgba(255,239,128,.96)) drop-shadow(0 0 12px rgba(232,184,61,.70)) !important;
  animation: minionsEmeraldWisp 2.7s ease-in-out infinite !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(4),
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(5),
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(6) {
  color: #dc88ff !important;
  background: radial-gradient(circle at 35% 30%, #fff0ff 0 13%, #e9a1ff 14% 40%, #ad55e8 41% 71%, transparent 73%) !important;
  filter: drop-shadow(0 0 5px rgba(225,137,255,.96)) drop-shadow(0 0 12px rgba(184,79,239,.72)) !important;
  animation: minionsAmethystWisp 2.55s ease-in-out infinite !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(1) {
  left: 3% !important;
  top: 70% !important;
  animation-delay: -1.75s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(2) {
  left: 13% !important;
  top: 28% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -.55s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(3) {
  left: 30% !important;
  top: 2% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -2.05s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(4) {
  right: 28% !important;
  top: 2% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -1.10s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(5) {
  right: 12% !important;
  top: 68% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -2.18s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(6) {
  right: 3% !important;
  top: 32% !important;
  animation-delay: -.72s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(7) {
  left: 42% !important;
  bottom: -4% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -1.30s !important;
}
.inventory-open-style-minions > .custom-buy-fx-minions i:nth-child(8) {
  left: 56% !important;
  top: -5% !important;
  width: 8px !important;
  height: 8px !important;
  animation-delay: -.28s !important;
}

@media (max-width: 820px) {
  .vault-selection.is-vip-coffer .vault-action-group {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    gap: 12px !important;
  }
  .vault-selection.is-vip-coffer .vault-action-group > .open-secondary,
  .vault-selection.is-vip-coffer .vault-action-group > .inventory-open-button-shell,
  .vault-selection.is-vip-coffer .vault-action-group > .inventory-open-button-shell > .inventory-open-custom-button {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
    position: fixed !important;
    inset: auto 0 max(14px, env(safe-area-inset-bottom)) 0 !important;
    z-index: 10020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    transform: none !important;
    translate: none !important;
    pointer-events: none !important;
  }
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .continue-button {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    width: min(250px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
    pointer-events: auto !important;
  }

  .inventory-open-style-minions > .custom-buy-fx-minions {
    inset: -15px -16px -14px !important;
  }
}

.mobile-result-return-portal {
  display: none;
}

@media (max-width: 820px) {
  .reel-overlay.is-revealed .reel-scene > .result-action-marker-axis {
    display: none !important;
  }

  .mobile-result-return-portal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    transform: none !important;
    translate: none !important;
  }

  .mobile-result-return-portal > .mobile-result-return-button {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(250px, calc(100% - 0px)) !important;
    min-width: 0 !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    transform: none !important;
    translate: none !important;
  }
}

.reward-showcase {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 18px 0 28px;
  padding: 10px 0 12px;
  isolation: isolate;
}

.reward-showcase-inventory {
  margin-top: 24px;
  margin-bottom: 24px;
}

.reward-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
  margin: 0 auto 9px;
  text-align: center;
  pointer-events: none;
}

.reward-showcase-heading > span {
  color: rgba(214, 180, 95, .72);
  font-size: 10px;
  text-shadow: 0 0 12px rgba(214, 180, 95, .36);
}

.reward-showcase-heading p {
  margin: 0 0 1px;
  color: rgba(214, 180, 95, .66);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .22em;
  text-indent: .22em;
}

.reward-showcase-heading h3 {
  margin: 0;
  color: rgba(247, 245, 237, .92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .035em;
  text-shadow: 0 3px 15px rgba(0, 0, 0, .58);
}

.reward-showcase-viewport {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 4px 0 7px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
}

.reward-showcase-viewport::before,
.reward-showcase-viewport::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  width: min(72px, 8vw);
  pointer-events: none;
}

.reward-showcase-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5, 11, 7, .78), transparent);
}

.reward-showcase-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(5, 11, 7, .78), transparent);
}

.reward-showcase-track {
  --reward-showcase-duration: 40s;
  display: flex;
  width: max-content;
  min-width: max-content;
  animation-duration: var(--reward-showcase-duration);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-delay: -0.01s;
  will-change: transform;
  transform: translate3d(-50%, 0, 0);
  transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.reward-showcase-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}

.reward-showcase-track.is-cycle-a {
  animation-name: rewardShowcaseDriftRightA;
}

.reward-showcase-track.is-cycle-b {
  animation-name: rewardShowcaseDriftRightB;
}

@keyframes rewardShowcaseDriftRightA {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes rewardShowcaseDriftRightB {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.reward-showcase-divider {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: -1px;
  width: 154px;
  height: 16px;
  transform: translateX(-50%);
  pointer-events: none;
}

.reward-showcase-divider svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .48));
}

.reward-showcase-divider-scroll {
  fill: rgba(214, 180, 95, .13);
  stroke: rgba(214, 180, 95, .66);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reward-showcase-divider-scroll.is-right {
  fill: rgba(214, 180, 95, .1);
}

.reward-showcase-divider-gem {
  fill: rgba(71, 116, 78, .96);
  stroke: rgba(240, 217, 144, .88);
  stroke-width: 1.2;
}

.reward-showcase-divider-gem-core {
  fill: rgba(240, 217, 144, .94);
}

.reward-showcase-divider circle {
  fill: rgba(240, 217, 144, .82);
  filter: drop-shadow(0 0 4px rgba(214, 180, 95, .48));
}

.reward-showcase-card {
  --showcase-rarity: #cbd2da;
  --showcase-rarity-soft: rgba(203, 210, 218, .22);
  position: relative;
  isolation: isolate;
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  min-width: 100px;
  max-width: 100px;
  min-height: 100px;
  max-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  margin: 0;
  padding: 20px 4px 3px;
  overflow: hidden;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--showcase-rarity) 38%, rgba(214, 180, 95, .26));
  border-radius: 0;
  clip-path: polygon(
    9px 0,
    39px 0,
    44px 4px,
    56px 4px,
    61px 0,
    91px 0,
    100% 9px,
    100% 91px,
    91px 100%,
    61px 100%,
    56px 96px,
    44px 96px,
    39px 100%,
    9px 100%,
    0 91px,
    0 9px
  );
  color: rgba(247, 245, 237, .94);
  background:
    radial-gradient(circle at 50% -9%, color-mix(in srgb, var(--showcase-rarity) 31%, transparent), transparent 43%),
    linear-gradient(90deg, color-mix(in srgb, var(--showcase-rarity) 8%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--showcase-rarity) 8%, transparent)),
    linear-gradient(152deg, rgba(255, 255, 255, .058), transparent 36%),
    rgba(8, 15, 10, .76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 24px color-mix(in srgb, var(--showcase-rarity) 7%, transparent),
    0 8px 22px rgba(0, 0, 0, .31);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
  contain: layout style;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.reward-showcase-card.rarity-border-common {
  --showcase-rarity: #cbd2da;
  --showcase-rarity-soft: rgba(203, 210, 218, .2);
}

.reward-showcase-card.rarity-border-uncommon {
  --showcase-rarity: #79e5a1;
  --showcase-rarity-soft: rgba(121, 229, 161, .21);
}

.reward-showcase-card.rarity-border-rare {
  --showcase-rarity: #73b7ff;
  --showcase-rarity-soft: rgba(115, 183, 255, .22);
}

.reward-showcase-card.rarity-border-epic {
  --showcase-rarity: #c38cff;
  --showcase-rarity-soft: rgba(195, 140, 255, .22);
}

.reward-showcase-card.rarity-border-legendary {
  --showcase-rarity: #ffd66f;
  --showcase-rarity-soft: rgba(255, 214, 111, .25);
}

.reward-showcase-card:hover,
.reward-showcase-card:focus-visible {
  z-index: 7;
  transform: translate3d(0, -2px, 0) scale(1.035);
  border-color: color-mix(in srgb, var(--showcase-rarity) 72%, #f0d990);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 28px color-mix(in srgb, var(--showcase-rarity) 11%, transparent),
    0 11px 28px rgba(0, 0, 0, .4);
}

.reward-showcase-card:focus-visible {
  outline: 1px solid rgba(240, 217, 144, .9);
  outline-offset: 2px;
}

.reward-showcase-card > * {
  position: relative;
  z-index: 4;
}

.reward-showcase-card::before,
.reward-showcase-card::after {
  border-radius: 0 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.reward-showcase-card .reward-showcase-frame {
  position: absolute;
  z-index: 3;
  inset: 2px;
  display: block;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--showcase-rarity) 58%, rgba(240, 217, 144, .58));
  clip-path: polygon(
    7px 0,
    35px 0,
    40px 4px,
    56px 4px,
    61px 0,
    89px 0,
    100% 7px,
    100% 89px,
    89px 100%,
    61px 100%,
    56px 96px,
    40px 96px,
    35px 100%,
    7px 100%,
    0 89px,
    0 7px
  );
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--showcase-rarity) 64%, #f0d990) 0 1px, transparent 1px) 4px 4px / 17px 17px no-repeat,
    linear-gradient(225deg, color-mix(in srgb, var(--showcase-rarity) 64%, #f0d990) 0 1px, transparent 1px) calc(100% - 4px) 4px / 17px 17px no-repeat,
    linear-gradient(45deg, color-mix(in srgb, var(--showcase-rarity) 54%, #f0d990) 0 1px, transparent 1px) 4px calc(100% - 4px) / 17px 17px no-repeat,
    linear-gradient(315deg, color-mix(in srgb, var(--showcase-rarity) 54%, #f0d990) 0 1px, transparent 1px) calc(100% - 4px) calc(100% - 4px) / 17px 17px no-repeat,
    linear-gradient(90deg, transparent 8%, rgba(240, 217, 144, .2) 26%, transparent 42%, transparent 58%, rgba(240, 217, 144, .2) 74%, transparent 92%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 13%, var(--showcase-rarity-soft) 31%, transparent 44%, transparent 56%, var(--showcase-rarity-soft) 69%, transparent 87%) bottom / 100% 1px no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(4, 10, 6, .54),
    inset 0 0 0 3px color-mix(in srgb, var(--showcase-rarity) 15%, rgba(214, 180, 95, .08)),
    inset 0 0 18px var(--showcase-rarity-soft);
  opacity: .9;
  transition: border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.reward-showcase-card .reward-showcase-frame::before,
.reward-showcase-card .reward-showcase-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(240, 217, 144, .74);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--showcase-rarity) 78%, #f0d990), color-mix(in srgb, var(--showcase-rarity) 42%, #172018));
  box-shadow:
    inset 0 0 0 1px rgba(7, 14, 9, .56),
    0 0 7px var(--showcase-rarity-soft);
  transform: translateX(-50%) rotate(45deg);
}

.reward-showcase-card .reward-showcase-frame::before {
  top: -5px;
}

.reward-showcase-card .reward-showcase-frame::after {
  bottom: -5px;
}

.reward-showcase-card:hover .reward-showcase-frame,
.reward-showcase-card:focus-visible .reward-showcase-frame {
  border-color: color-mix(in srgb, var(--showcase-rarity) 78%, #f0d990);
  box-shadow:
    inset 0 0 0 2px rgba(4, 10, 6, .48),
    inset 0 0 0 3px color-mix(in srgb, var(--showcase-rarity) 23%, rgba(214, 180, 95, .1)),
    inset 0 0 22px color-mix(in srgb, var(--showcase-rarity) 18%, transparent);
  opacity: 1;
}

.reward-showcase-card .peek-legendary-stars {
  z-index: 2;
  inset: 2px;
}

.reward-showcase-card .peek-legendary-stars i:nth-child(1) {
  top: 27px;
  left: 7px;
}
.reward-showcase-card .peek-legendary-stars i:nth-child(2) {
  top: 25px;
  right: 8px;
}
.reward-showcase-card .peek-legendary-stars i:nth-child(3) {
  right: 8px;
  bottom: 7px;
}
.reward-showcase-card .peek-legendary-stars i:nth-child(4) {
  left: 42%;
  bottom: 5px;
}
.reward-showcase-card .peek-legendary-stars i:nth-child(5) {
  left: 7px;
  top: 57%;
}

.reward-showcase-card .reward-rarity-seal {
  position: absolute;
  z-index: 6;
  top: 3px;
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 16px);
  min-width: 44px;
  height: 13px;
  margin-inline: auto;
  padding: 0 5px;
  transform: none;
  font-size: 5.2px;
  letter-spacing: .07em;
  text-indent: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 8px color-mix(in srgb, var(--seal-a) 20%, transparent),
    0 2px 5px rgba(0, 0, 0, .34);
}

.reward-showcase-card .reward-rarity-seal::before,
.reward-showcase-card .reward-rarity-seal::after {
  font-size: 4.1px;
}

.reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  min-width: 58px;
  height: 15px;
  padding-inline: 7px;
}

.reward-showcase-image-wrap {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  margin-top: 0;
  border-radius: 11px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--showcase-rarity) 11%, rgba(255, 255, 255, .04)), transparent 69%);
}

.reward-showcase-image-wrap img {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .58));
  transition: transform .24s ease, filter .24s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  user-select: none;
}

.reward-showcase-card:hover .reward-showcase-image-wrap img,
.reward-showcase-card:focus-visible .reward-showcase-image-wrap img {
  transform: translateZ(0) scale(1.07);
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .64));
}

.reward-showcase-card > strong {
  display: -webkit-box;
  width: 100%;
  min-height: 18px;
  max-height: 18px;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9.1px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .76);
}

.reward-showcase-card.legendary-flame-card,
.reward-showcase-card.epic-glow-card,
.reward-showcase-card.rare-glow-card,
.reward-showcase-card.uncommon-glow-card,
.reward-showcase-card.common-glow-card {
  border-radius: 0 !important;
}

.showcase-detail-content {
  width: min(680px, 95vw);
  max-height: calc(100dvh - 76px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 180, 95, .38) transparent;
}

.showcase-detail-badges {
  flex-wrap: wrap;
}

.showcase-detail-source-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(163, 204, 178, .3);
  border-radius: 8px;
  color: #cfe9d7;
  background: rgba(25, 48, 32, .62);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
}

.showcase-detail-facts {
  margin-bottom: 18px;
}

.showcase-detail-availability {
  width: min(570px, 100%);
  margin: 2px auto 0;
  padding-top: 4px;
}

.showcase-detail-availability-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
}

.showcase-detail-availability-heading span {
  color: rgba(214, 180, 95, .66);
  font-size: 9px;
}

.showcase-detail-availability-heading h3 {
  margin: 0;
  color: rgba(247, 245, 237, .9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  letter-spacing: .035em;
}

.showcase-detail-source-list {
  display: grid;
  gap: 8px;
  width: 100%;
}

.showcase-detail-source {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(214, 180, 95, .14);
  border-radius: 11px;
  background:
    linear-gradient(130deg, rgba(214, 180, 95, .045), transparent 48%),
    rgba(9, 16, 11, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  text-align: left;
}

.showcase-detail-source-name {
  min-width: 0;
}

.showcase-detail-source-name > strong {
  display: block;
  overflow: hidden;
  color: rgba(247, 245, 237, .94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-detail-source-name > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.showcase-detail-source-name i {
  display: inline-flex;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .1em;
}

.showcase-source-vip {
  border: 1px solid rgba(255, 218, 113, .42);
  color: #ffe39a;
  background: rgba(94, 63, 12, .46);
}

.showcase-source-limited {
  border: 1px solid rgba(255, 156, 177, .4);
  color: #ffc3d0;
  background: rgba(96, 24, 45, .42);
}

.showcase-detail-source-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.showcase-detail-source-facts p {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: right;
}

.showcase-detail-source-facts span {
  color: rgba(176, 188, 179, .62);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.showcase-detail-source-facts b {
  overflow: hidden;
  color: rgba(247, 245, 237, .9);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .reward-showcase {
    margin-top: 15px;
    margin-bottom: 20px;
    padding-top: 7px;
  }

  .reward-showcase-inventory {
    margin-top: 18px;
  }

  .reward-showcase-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .reward-showcase-viewport::before,
  .reward-showcase-viewport::after {
    width: 34px;
  }

  .reward-showcase-group {
    gap: 8px;
    padding-right: 8px;
  }

  .reward-showcase-card {
    flex-basis: 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
  }

  .showcase-detail-content {
    width: min(96vw, 620px);
    padding-inline: 6px;
  }

  .showcase-detail-source {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    text-align: center;
  }

  .showcase-detail-source-name > strong {
    white-space: normal;
  }

  .showcase-detail-source-name > span {
    justify-content: center;
  }

  .showcase-detail-source-facts p {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .reward-showcase-heading {
    margin-bottom: 7px;
  }

  .reward-showcase-heading h3 {
    font-size: 13px;
  }

  .showcase-detail-source-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fourfun-card-shell {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-rz: 0deg;
  --card-shine-x: 50%;
  --card-shine-y: 50%;
  --card-hue: 40;
  --card-delay: 0s;
  position: relative;
  display: block;
  width: 174px;
  aspect-ratio: 0.705;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  perspective: 1100px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

.fourfun-card-face {
  --card-rarity: 203, 189, 151;
  --card-rarity-deep: 73, 69, 57;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 25px minmax(0, 1fr) auto 19px;
  overflow: hidden;
  border: 2px solid rgba(var(--card-rarity), 0.94);
  border-radius: 15px;
  background:
    radial-gradient(circle at 25% 8%, rgba(var(--card-rarity), 0.19), transparent 28%),
    linear-gradient(145deg, rgba(17, 23, 19, 0.99), rgba(8, 12, 10, 0.99));
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.46),
    0 0 23px rgba(var(--card-rarity), 0.23),
    inset 0 0 0 1px rgba(255, 246, 212, 0.17),
    inset 0 -18px 30px rgba(0, 0, 0, 0.38);
  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) rotateZ(var(--card-rz));
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 130ms ease-out, box-shadow 240ms ease, filter 240ms ease;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style;
}

.fourfun-card-face.rarity-common {
  --card-rarity: 194, 184, 159;
  --card-rarity-deep: 76, 70, 58;
}
.fourfun-card-face.rarity-uncommon {
  --card-rarity: 109, 218, 149;
  --card-rarity-deep: 26, 91, 55;
}
.fourfun-card-face.rarity-rare {
  --card-rarity: 104, 170, 255;
  --card-rarity-deep: 25, 67, 132;
}
.fourfun-card-face.rarity-epic {
  --card-rarity: 206, 111, 255;
  --card-rarity-deep: 91, 30, 132;
}
.fourfun-card-face.rarity-legendary {
  --card-rarity: 255, 205, 84;
  --card-rarity-deep: 145, 73, 15;
}

.fourfun-card-shell:hover .fourfun-card-face,
.fourfun-card-shell:focus-visible .fourfun-card-face {
  box-shadow:
    0 22px 43px rgba(0, 0, 0, 0.54),
    0 0 35px rgba(var(--card-rarity), 0.43),
    inset 0 0 0 1px rgba(255, 248, 222, 0.28),
    inset 0 -18px 30px rgba(0, 0, 0, 0.35);
}

.fourfun-card-shell:focus-visible {
  outline: 2px solid rgba(255, 226, 139, 0.92);
  outline-offset: 5px;
}

.fourfun-card-border {
  position: absolute;
  z-index: 9;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(var(--card-rarity), 0.55);
  border-radius: 11px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.fourfun-card-border::before,
.fourfun-card-border::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 40px;
  height: 7px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--card-rarity), 0.85), transparent);
  clip-path: polygon(0 50%, 18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%);
}
.fourfun-card-border::before { top: -2px; }
.fourfun-card-border::after { bottom: -2px; }
.fourfun-card-border i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(var(--card-rarity), .75);
}
.fourfun-card-border i:nth-child(1) {
  top: 5px;
  left: 5px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.fourfun-card-border i:nth-child(2) {
  top: 5px;
  right: 5px;
  border-top: 1px solid;
  border-right: 1px solid;
}
.fourfun-card-border i:nth-child(3) {
  bottom: 5px;
  left: 5px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
.fourfun-card-border i:nth-child(4) {
  bottom: 5px;
  right: 5px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.fourfun-card-header,
.fourfun-card-footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  background: linear-gradient(90deg, rgba(var(--card-rarity-deep), .85), rgba(12, 16, 14, .9), rgba(var(--card-rarity-deep), .85));
  border-bottom: 1px solid rgba(var(--card-rarity), .38);
  font-family: var(--font-display, Georgia, serif);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.fourfun-card-footer {
  border-top: 1px solid rgba(var(--card-rarity), .32);
  border-bottom: 0;
  font-size: 8px;
  color: rgba(244, 238, 215, .73);
}
.fourfun-card-footer b {
  color: rgb(var(--card-rarity));
  text-shadow: 0 0 9px rgba(var(--card-rarity), .75);
}
.fourfun-card-set {
  font-size: 9px;
  font-weight: 900;
  color: #f7e8b0;
}
.fourfun-card-rarity {
  font-size: 7px;
  font-weight: 900;
  color: rgb(var(--card-rarity));
  text-shadow: 0 0 8px rgba(var(--card-rarity), .55);
}

.fourfun-card-art {
  position: relative;
  z-index: 2;
  min-height: 0;
  margin: 5px 7px 0;
  overflow: hidden;
  border: 1px solid rgba(var(--card-rarity), .48);
  border-radius: 8px 8px 5px 5px;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .54), 0 0 13px rgba(var(--card-rarity), .1);
}
.fourfun-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transform: scale(1.015);
}
.fourfun-card-art-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(3, 5, 4, .75)), radial-gradient(circle at 50% 40%, transparent 48%, rgba(0, 0, 0, .36));
  pointer-events: none;
}

.fourfun-card-copy {
  position: relative;
  z-index: 5;
  min-height: 54px;
  padding: 6px 10px 5px;
  text-align: center;
  background: linear-gradient(180deg, rgba(var(--card-rarity-deep), .23), rgba(7, 10, 8, .82));
}
.fourfun-card-copy strong {
  display: block;
  overflow: hidden;
  color: #fff4cf;
  font-family: var(--font-display, Georgia, serif);
  font-size: 13px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 5px #000;
}
.fourfun-card-copy p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: rgba(238, 233, 214, .72);
  font-size: 8px;
  line-height: 1.25;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.fourfun-card-face.is-compact .fourfun-card-copy {
  min-height: 34px;
  padding-top: 7px;
}
.fourfun-card-face.is-compact .fourfun-card-copy strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fourfun-card-quantity {
  position: absolute;
  z-index: 12;
  top: 30px;
  right: 8px;
  min-width: 29px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 229, 146, .76);
  border-radius: 999px;
  background: rgba(8, 12, 9, .9);
  color: #ffdfa0;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 11px rgba(255, 205, 88, .25);
}

.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain,
.fourfun-card-particles {
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  pointer-events: none;
  backface-visibility: hidden;
}
.fourfun-card-holo {
  opacity: .3;
  mix-blend-mode: color-dodge;
  background: conic-gradient(from calc(var(--card-hue) * 1deg) at var(--card-shine-x) var(--card-shine-y), transparent 0 9%, rgba(255, 79, 207, .45) 16%, rgba(76, 220, 255, .48) 27%, rgba(255, 231, 82, .42) 38%, transparent 49% 100%);
  filter: saturate(1.35);
  transform: translateZ(2px);
}
.fourfun-card-gloss {
  opacity: .42;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.82), rgba(255,255,255,.18) 13%, transparent 34%);
  transform: translateZ(3px);
}
.fourfun-card-grain {
  opacity: .09;
  background-image: repeating-linear-gradient(115deg, transparent 0 4px, rgba(255,255,255,.45) 5px, transparent 6px 10px);
  mix-blend-mode: overlay;
}
.fourfun-card-particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(var(--card-rarity));
  box-shadow: 0 0 8px rgba(var(--card-rarity), .9);
  animation: fourfun-card-spark 3.8s ease-in-out infinite var(--card-delay);
}
.fourfun-card-particles i:nth-child(1) {
  left: 13%;
  top: 18%;
}
.fourfun-card-particles i:nth-child(2) {
  left: 82%;
  top: 28%;
  animation-delay: calc(var(--card-delay) - .8s);
}
.fourfun-card-particles i:nth-child(3) {
  left: 23%;
  top: 63%;
  animation-delay: calc(var(--card-delay) - 1.4s);
}
.fourfun-card-particles i:nth-child(4) {
  left: 74%;
  top: 72%;
  animation-delay: calc(var(--card-delay) - 2.2s);
}
.fourfun-card-particles i:nth-child(5) {
  left: 48%;
  top: 12%;
  animation-delay: calc(var(--card-delay) - 2.9s);
}
.fourfun-card-particles i:nth-child(6) {
  left: 55%;
  top: 86%;
  animation-delay: calc(var(--card-delay) - 3.4s);
}

.fourfun-card-face.rarity-common .fourfun-card-particles { opacity: .18; }
.fourfun-card-face.rarity-uncommon .fourfun-card-holo { opacity: .24; }
.fourfun-card-face.rarity-rare .fourfun-card-holo {
  opacity: .4;
  background-image: linear-gradient(115deg, transparent 30%, rgba(95,190,255,.58) 45%, rgba(255,255,255,.34) 50%, transparent 66%), repeating-radial-gradient(circle at 50% 50%, rgba(104,170,255,.13) 0 2px, transparent 3px 10px);
}
.fourfun-card-face.rarity-epic .fourfun-card-holo {
  opacity: .48;
  animation: fourfun-epic-holo 6s linear infinite var(--card-delay);
}
.fourfun-card-face.rarity-legendary .fourfun-card-holo {
  opacity: .62;
  background: conic-gradient(from 0deg at var(--card-shine-x) var(--card-shine-y), #fff8b9, rgba(255,183,35,.74), rgba(255,83,198,.5), rgba(64,220,255,.56), #fff8b9);
  animation: fourfun-legendary-holo 4.5s linear infinite var(--card-delay);
}
.fourfun-card-face.rarity-legendary { animation: fourfun-legendary-aura 3.2s ease-in-out infinite var(--card-delay); }
.fourfun-card-face.is-locked { filter: grayscale(1) brightness(.45); }
.fourfun-card-face.is-locked .fourfun-card-holo,
.fourfun-card-face.is-locked .fourfun-card-gloss,
.fourfun-card-face.is-locked .fourfun-card-particles { display: none; }

@keyframes fourfun-card-spark { 0%, 100% { opacity: .05; transform: translate3d(0, 6px, 4px) scale(.5); } 45% { opacity: 1; transform: translate3d(3px, -7px, 7px) scale(1.35); } }
@keyframes fourfun-epic-holo { to { filter: hue-rotate(360deg) saturate(1.6); } }
@keyframes fourfun-legendary-holo { to { filter: hue-rotate(360deg) saturate(1.7); transform: translateZ(3px) rotate(360deg); } }
@keyframes fourfun-legendary-aura { 50% { box-shadow: 0 22px 45px rgba(0,0,0,.53), 0 0 40px rgba(255,198,60,.52), inset 0 0 0 1px rgba(255,248,212,.42); } }

.card-catalog-backdrop,
.card-inspector-backdrop {
  z-index: 2050;
  padding: 18px;
}
.card-catalog-modal {
  width: min(1120px, 96vw);
  max-height: min(900px, 94vh);
  padding: 24px;
  overflow: auto;
  border-color: rgba(225, 194, 108, .42);
  background: radial-gradient(circle at 50% 0, rgba(96,73,30,.2), transparent 31%), linear-gradient(160deg, rgba(12,18,14,.99), rgba(5,8,7,.99));
}
.card-catalog-header { text-align: center; }
.card-catalog-header h2 { margin: 3px 0 7px; }
.card-catalog-header > p:last-of-type {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
}
.card-catalog-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.card-catalog-stats span {
  padding: 5px 10px;
  border: 1px solid rgba(215,184,102,.27);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #e8d7a7;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.card-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin: 20px 0;
}
.card-catalog-entry {
  --entry-rarity: 198,188,160;
  position: relative;
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);
  align-items: center;
  min-height: 155px;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--entry-rarity), .36);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  background: linear-gradient(135deg, rgba(var(--entry-rarity), .12), rgba(8,13,10,.76));
  box-shadow: inset 0 0 20px rgba(var(--entry-rarity), .07);
}
.card-catalog-entry.rarity-uncommon { --entry-rarity: 104,220,145; }
.card-catalog-entry.rarity-rare { --entry-rarity: 94,169,255; }
.card-catalog-entry.rarity-epic { --entry-rarity: 204,103,255; }
.card-catalog-entry.rarity-legendary { --entry-rarity: 255,200,72; }
.card-catalog-entry .fourfun-card-shell { width: 102px; }
.card-catalog-entry-copy { min-width: 0; }
.card-catalog-entry-copy strong {
  display: block;
  color: #f5e8bd;
  font-family: var(--font-display, Georgia, serif);
  font-size: 13px;
}
.card-catalog-entry-copy p {
  display: -webkit-box;
  margin: 5px 0;
  overflow: hidden;
  color: rgba(231,228,213,.67);
  font-size: 10px;
  line-height: 1.35;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.card-catalog-entry-copy small {
  color: rgb(var(--entry-rarity));
  font-size: 9px;
  text-transform: uppercase;
}
.card-catalog-entry.is-out-of-stock {
  opacity: .52;
  filter: grayscale(.32);
}
.card-stock-stamp {
  position: absolute;
  z-index: 20;
  top: 45%;
  left: 50%;
  padding: 5px 12px;
  border: 1px solid rgba(255,130,130,.75);
  transform: translate(-50%,-50%) rotate(-9deg);
  background: rgba(42,5,7,.88);
  color: #ffacac;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}
.card-catalog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-catalog-pagination,
.card-catalog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-catalog-pagination button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(221,188,98,.34);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: #f2d98e;
  cursor: pointer;
}
.card-catalog-pagination button:disabled {
  opacity: .28;
  cursor: default;
}
.card-catalog-pagination span {
  min-width: 92px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.card-catalog-empty { grid-column: 1/-1; }

.card-inspector-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  overflow: auto;
  background: radial-gradient(circle at 50% 45%, rgba(88,66,28,.16), transparent 40%), rgba(1,3,2,.91);
  backdrop-filter: blur(12px);
}
.card-inspector {
  --inspect-rarity: 216,190,112;
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, 420px) minmax(330px, 520px);
  width: min(1020px, 96vw);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(var(--inspect-rarity), .48);
  border-radius: 26px;
  background: radial-gradient(circle at 72% 45%, rgba(var(--inspect-rarity), .13), transparent 38%), linear-gradient(145deg, #111914, #050807);
  box-shadow: 0 38px 90px rgba(0,0,0,.7), 0 0 45px rgba(var(--inspect-rarity), .12);
}
.card-inspector.rarity-uncommon { --inspect-rarity: 105,220,145; }
.card-inspector.rarity-rare { --inspect-rarity: 94,169,255; }
.card-inspector.rarity-epic { --inspect-rarity: 204,103,255; }
.card-inspector.rarity-legendary { --inspect-rarity: 255,201,75; }
.card-inspector-copy {
  position: relative;
  z-index: 3;
  padding: 48px 34px 32px;
}
.card-inspector-copy h2 {
  margin: 6px 0 10px;
  color: #fff2ca;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(28px,4vw,48px);
}
.card-inspector-copy > p:not(.eyebrow):not(.card-inspector-help) {
  color: rgba(235,231,214,.77);
  line-height: 1.65;
}
.card-inspector-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 19px 0;
}
.card-inspector-meta > span:not(.reward-rarity-seal) {
  padding: 6px 9px;
  border: 1px solid rgba(var(--inspect-rarity),.25);
  border-radius: 8px;
  background: rgba(var(--inspect-rarity),.06);
  color: rgb(var(--inspect-rarity));
  font-size: 10px;
}
.card-inspector-help {
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.card-axis-controls {
  display: grid;
  gap: 8px;
  margin: 12px 0 18px;
}
.card-axis-controls label {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 42px;
  align-items: center;
  gap: 8px;
  color: #dfce9b;
  font-size: 9px;
  letter-spacing: .08em;
}
.card-axis-controls input {
  width: 100%;
  accent-color: rgb(var(--inspect-rarity));
}
.card-axis-controls b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.card-inspector-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 620px;
  cursor: grab;
  perspective: 1500px;
  touch-action: none;
  user-select: none;
}
.card-inspector-stage:active { cursor: grabbing; }
.card-inspector-card {
  width: 292px;
  transform-style: preserve-3d;
}
.card-inspector-aura {
  position: absolute;
  width: 330px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--inspect-rarity),.34), rgba(var(--inspect-rarity),.08) 42%, transparent 70%);
  filter: blur(20px);
  animation: card-inspector-aura 3.4s ease-in-out infinite;
}
.card-inspector-close { z-index: 30; }
@keyframes card-inspector-aura { 50% { transform: scale(1.12); opacity: .65; } }

.card-album {
  position: relative;
  margin-top: 24px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(215,182,94,.27);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 0, rgba(121,86,31,.13), transparent 34%), rgba(7,12,9,.72);
  box-shadow: inset 0 0 44px rgba(0,0,0,.28);
  scroll-margin-top: 110px;
}
.card-album::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(229,198,111,.08);
  border-radius: 16px;
}
.card-album-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 4px 18px;
}
.card-album-heading h3 {
  margin: 2px 0 4px;
  color: #f4e5b6;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(22px,3vw,34px);
}
.card-album-heading > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.card-album-tools {
  display: flex;
  align-items: end;
  gap: 9px;
}
.card-album-tools label {
  display: grid;
  gap: 4px;
  color: #bda872;
  font-size: 8px;
  letter-spacing: .11em;
}
.card-album-tools select {
  min-width: 140px;
  height: 35px;
  padding: 0 9px;
  border: 1px solid rgba(216,184,96,.25);
  border-radius: 9px;
  background: #0d1510;
  color: #e9ddb8;
}
.card-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
}
.card-album-slot {
  --slot-rarity: 197,188,160;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 12px 7px 9px;
  border: 1px solid rgba(var(--slot-rarity),.22);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(var(--slot-rarity),.07), rgba(0,0,0,.14));
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.card-album-slot.rarity-uncommon { --slot-rarity: 104,220,145; }
.card-album-slot.rarity-rare { --slot-rarity: 94,169,255; }
.card-album-slot.rarity-epic { --slot-rarity: 204,103,255; }
.card-album-slot.rarity-legendary { --slot-rarity: 255,200,72; }
.card-album-slot.is-owned:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--slot-rarity),.48);
  background: linear-gradient(180deg, rgba(var(--slot-rarity),.12), rgba(0,0,0,.14));
}
.card-album-slot .fourfun-card-shell { width: min(126px, 100%); }
.card-album-slot-meta {
  min-width: 0;
  width: 100%;
  text-align: center;
}
.card-album-slot-meta strong {
  display: block;
  overflow: hidden;
  color: #eee1bc;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-album-slot-meta span {
  color: var(--muted);
  font-size: 8px;
}
.card-album-slot.is-locked .card-album-slot-meta strong { color: rgba(220,214,194,.45); }
.card-album-slot.is-album-focus { animation: album-focus-pulse 1s ease-in-out 2; }
@keyframes album-focus-pulse { 50% { transform: translateY(-5px) scale(1.025); border-color: rgba(var(--slot-rarity),.88); box-shadow: 0 0 30px rgba(var(--slot-rarity),.4); } }

.card-pack-opening {
  --opening-rarity: 215,189,105;
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  justify-items: center;
  align-items: center;
  padding: 24px;
  overflow: auto;
  background: radial-gradient(circle at 50% 47%, rgba(var(--opening-rarity),.2), transparent 38%), linear-gradient(145deg, rgba(3,7,5,.98), rgba(1,2,2,.99));
  isolation: isolate;
}
.card-pack-opening.rarity-uncommon { --opening-rarity: 104,220,145; }
.card-pack-opening.rarity-rare { --opening-rarity: 94,169,255; }
.card-pack-opening.rarity-epic { --opening-rarity: 204,103,255; }
.card-pack-opening.rarity-legendary { --opening-rarity: 255,200,72; }
.card-pack-opening-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.card-pack-opening-background::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, transparent, rgba(var(--opening-rarity),.12), transparent 25%);
  animation: card-opening-spin 18s linear infinite;
}
.card-pack-opening-background i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--opening-rarity));
  box-shadow: 0 0 14px rgb(var(--opening-rarity));
  animation: card-opening-dust 6s ease-in-out infinite;
}
.card-pack-opening-background i:nth-child(1) {
  left: 13%;
  top: 76%;
}
.card-pack-opening-background i:nth-child(2) {
  left: 82%;
  top: 23%;
  animation-delay: -1.3s;
}
.card-pack-opening-background i:nth-child(3) {
  left: 30%;
  top: 19%;
  animation-delay: -2.8s;
}
.card-pack-opening-background i:nth-child(4) {
  left: 71%;
  top: 79%;
  animation-delay: -4.2s;
}
.card-pack-opening-heading {
  z-index: 4;
  max-width: 720px;
  padding-top: 8px;
  text-align: center;
}
.card-pack-opening-heading h2 {
  margin: 3px 0 5px;
  color: #fff0bd;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(28px,5vw,58px);
  text-shadow: 0 0 23px rgba(var(--opening-rarity),.28);
}
.card-pack-opening-heading > p:last-child {
  margin: 0;
  color: rgba(238,232,209,.68);
}
.card-pack-wrapper {
  --tear-progress: 0%;
  --pack-accent: #d6b45f;
  position: relative;
  width: min(330px,78vw);
  aspect-ratio: .67;
  filter: drop-shadow(0 32px 34px rgba(0,0,0,.58));
  animation: card-pack-float 3.2s ease-in-out infinite;
}
.card-pack-front {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  border: 2px solid #e3c366;
  border-radius: 13px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pack-accent) 28%, transparent), transparent 38%), repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0 2px, transparent 2px 8px), linear-gradient(145deg,#142219,#070c09);
  box-shadow: inset 0 0 0 5px #0b130e, inset 0 0 0 7px rgba(229,194,91,.43);
}
.card-pack-front::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(245,217,129,.28);
  clip-path: polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
}
.card-pack-front img {
  width: 56%;
  max-height: 42%;
  object-fit: contain;
  filter: drop-shadow(0 0 19px color-mix(in srgb,var(--pack-accent) 55%,transparent));
}
.card-pack-brand {
  color: #d1b45f;
  font-size: 10px;
  letter-spacing: .35em;
}
.card-pack-front strong {
  color: #fff1b9;
  font-family: var(--font-display, Georgia, serif);
  font-size: 58px;
  line-height: .92;
  text-shadow: 0 0 20px rgba(230,186,65,.32);
}
.card-pack-front b {
  color: #9fc4a5;
  font-size: 12px;
  letter-spacing: .2em;
}
.card-pack-front small {
  padding: 5px 12px;
  border: 1px solid rgba(223,191,91,.4);
  border-radius: 999px;
  color: #f5d97f;
  font-size: 9px;
  letter-spacing: .14em;
}
.card-pack-tear-line {
  position: absolute;
  z-index: 8;
  top: 4%;
  left: 5%;
  right: 5%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  overflow: hidden;
  border: 1px dashed rgba(255,227,137,.68);
  border-radius: 7px;
  background: linear-gradient(90deg,rgba(240,195,67,.85) 0 var(--tear-progress),rgba(10,17,12,.88) var(--tear-progress));
  color: #fff1bd;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  cursor: ew-resize;
  touch-action: none;
}
.card-pack-tear-line i {
  display: grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f0c450;
  color: #172018;
  font-style: normal;
  transform: translateX(calc(var(--tear-progress) * .14));
}
.card-pack-top-shred {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 15%;
  pointer-events: none;
  clip-path: polygon(0 0,100% 0,100% 73%,95% 85%,90% 69%,83% 89%,76% 73%,68% 91%,59% 71%,51% 90%,43% 71%,34% 90%,25% 70%,17% 88%,9% 72%,0 87%);
  background: linear-gradient(145deg,#243a2a,#09110c);
  transform: translateX(calc(var(--tear-progress) * .25));
}
.card-pack-wrapper.is-torn .card-pack-top-shred { animation: card-pack-shred-away .85s cubic-bezier(.3,.8,.2,1) forwards; }
.card-pack-wrapper.is-torn .card-pack-front { animation: card-pack-open-away .9s ease-in forwards; }
.card-reveal-stage {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 19px;
  width: min(1000px,94vw);
  min-height: 500px;
  perspective: 1400px;
}
.card-reveal-stack {
  position: relative;
  width: 280px;
  aspect-ratio: .705;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: card-reveal-enter var(--card-pack-reveal-enter-duration, .7s) cubic-bezier(.2,.8,.2,1);
}
.card-reveal-stack::before,
.card-reveal-stack::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid rgba(var(--opening-rarity),.28);
  border-radius: 15px;
  background: #0b130e;
  transform: translate(12px,9px) rotate(3deg);
}
.card-reveal-stack::after { transform: translate(-11px,7px) rotate(-3deg); }
.card-reveal-back,
.card-reveal-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.card-reveal-back {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  border: 2px solid #d8b75a;
  border-radius: 18px;
  background: radial-gradient(circle,#294231,#09110c 70%);
  color: #ead179;
  box-shadow: 0 24px 45px rgba(0,0,0,.5),0 0 30px rgba(var(--opening-rarity),.2);
}
.card-reveal-back::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(228,196,96,.35);
  transform: rotate(45deg) scale(.7);
}
.card-reveal-back span {
  font-family: var(--font-display,Georgia,serif);
  font-size: 52px;
  font-weight: 900;
}
.card-reveal-back b {
  font-size: 42px;
  text-shadow: 0 0 18px #eacb66;
}
.card-reveal-back small {
  font-size: 8px;
  letter-spacing: .2em;
}
.card-reveal-front {
  width: 100%;
  transform: rotateY(180deg);
}
.card-reveal-stack:active .card-reveal-back { transform: scale(.98); }
.card-reveal-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.card-reveal-progress button {
  width: 48px;
  aspect-ratio: .705;
  overflow: hidden;
  border: 1px solid rgba(224,194,105,.29);
  border-radius: 6px;
  background: #0b120e;
  color: #9e8c5d;
}
.card-reveal-progress button.is-revealed {
  border-color: rgba(224,194,105,.64);
  cursor: pointer;
}
.card-reveal-progress img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-pack-complete-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}
.card-pack-complete-grid .fourfun-card-shell { width: min(145px,26vw); }
.card-pack-opening-actions {
  z-index: 5;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
}
@keyframes card-opening-spin { to { transform: rotate(360deg); } }
@keyframes card-opening-dust { 50% { opacity: .2; transform: translateY(-55px) scale(.5); } }
@keyframes card-pack-float { 50% { transform: translateY(-9px) rotate(-.7deg); } }
@keyframes card-pack-shred-away { to { opacity: 0; transform: translate(100px,-150px) rotate(28deg); } }
@keyframes card-pack-open-away { to { opacity: 0; transform: scale(1.18); filter: blur(12px); } }
@keyframes card-reveal-enter { from { opacity: 0; transform: translateY(35px) rotateY(-30deg) scale(.9); } }

@media (max-width: 900px) {
  .card-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-inspector {
    grid-template-columns: 1fr;
    width: min(620px,96vw);
  }
  .card-inspector-copy {
    order: 2;
    padding: 20px;
  }
  .card-inspector-stage { min-height: 490px; }
  .card-inspector-card { width: 240px; }
}

@media (max-width: 620px) {
  .card-catalog-backdrop { padding: 0; }
  .card-catalog-modal {
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    padding: 52px 12px 16px;
    border-radius: 0;
  }
  .card-catalog-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .card-catalog-entry {
    grid-template-columns: 90px minmax(0,1fr);
    min-height: 132px;
  }
  .card-catalog-entry .fourfun-card-shell { width: 88px; }
  .card-catalog-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .card-catalog-pagination,.card-catalog-actions { justify-content: center; }
  .card-catalog-actions .btn { flex: 1; }
  .card-inspector-backdrop {
    align-items: start;
    padding: 0;
  }
  .card-inspector {
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .card-inspector-stage {
    min-height: 440px;
    padding-top: 45px;
  }
  .card-inspector-card { width: 210px; }
  .card-inspector-copy { padding: 16px 14px 28px; }
  .card-axis-controls label { grid-template-columns: 44px minmax(0,1fr) 38px; }
  .card-album {
    margin: 16px -4px 0;
    padding: 14px 10px;
    border-radius: 16px;
  }
  .card-album-heading {
    align-items: stretch;
    flex-direction: column;
    padding-bottom: 13px;
  }
  .card-album-tools { justify-content: space-between; }
  .card-album-tools label { flex: 1; }
  .card-album-tools select {
    width: 100%;
    min-width: 0;
  }
  .card-album-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .card-album-slot { padding: 8px 4px; }
  .card-album-slot .fourfun-card-shell { width: min(122px,100%); }
  .card-pack-opening {
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(0,1fr) auto;
  }
  .card-pack-opening-heading { padding-top: env(safe-area-inset-top); }
  .card-pack-wrapper { width: min(270px,70vw); }
  .card-reveal-stage { min-height: 420px; }
  .card-reveal-stack { width: min(225px,63vw); }
  .card-pack-complete-grid { gap: 7px; }
  .card-pack-complete-grid .fourfun-card-shell { width: min(105px,29vw); }
  .card-pack-opening-actions {
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg,transparent,rgba(2,5,3,.92) 28%);
  }
  .card-pack-opening-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fourfun-card-particles i,
  .fourfun-card-face.rarity-epic .fourfun-card-holo,
  .fourfun-card-face.rarity-legendary,
  .fourfun-card-face.rarity-legendary .fourfun-card-holo,
  .card-inspector-aura,
  .card-pack-opening-background::before,
  .card-pack-opening-background i,
  .card-pack-wrapper {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.fourfun-card-body {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) rotateZ(var(--card-rz));
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 130ms ease-out;
  will-change: transform;
}
.fourfun-card-face { transform: translateZ(1px); }
.fourfun-card-back {
  --card-rarity: 203, 189, 151;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  overflow: hidden;
  border: 2px solid rgba(var(--card-rarity), .94);
  border-radius: 15px;
  background:
    repeating-conic-gradient(from 45deg at 50% 50%, rgba(var(--card-rarity),.07) 0 10deg, transparent 10deg 22deg),
    radial-gradient(circle, rgba(var(--card-rarity),.2), transparent 44%),
    linear-gradient(145deg, #17251b, #060a07);
  box-shadow: 0 18px 35px rgba(0,0,0,.46), inset 0 0 0 4px #09100b, inset 0 0 0 5px rgba(var(--card-rarity),.44);
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: hidden;
  color: #f4dfa0;
  text-align: center;
}
.fourfun-card-back.rarity-uncommon { --card-rarity: 109,218,149; }
.fourfun-card-back.rarity-rare { --card-rarity: 104,170,255; }
.fourfun-card-back.rarity-epic { --card-rarity: 206,111,255; }
.fourfun-card-back.rarity-legendary { --card-rarity: 255,205,84; }
.fourfun-card-back-frame {
  position:absolute;
  inset:8px;
  border:1px solid rgba(var(--card-rarity),.45);
  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);
}
.fourfun-card-back-frame i {
  position:absolute;
  width:20px;
  height:20px;
  border:1px solid rgba(var(--card-rarity),.5);
  transform:rotate(45deg);
}
.fourfun-card-back-frame i:nth-child(1){top:9px;left:9px}.fourfun-card-back-frame i:nth-child(2){top:9px;right:9px}.fourfun-card-back-frame i:nth-child(3){bottom:9px;left:9px}.fourfun-card-back-frame i:nth-child(4){bottom:9px;right:9px}
.fourfun-card-back-brand {
  font-size:9px;
  letter-spacing:.28em;
}
.fourfun-card-back > strong {
  font-family:var(--font-display,Georgia,serif);
  font-size:38px;
  line-height:.9;
  text-shadow:0 0 18px rgba(var(--card-rarity),.5);
}
.fourfun-card-back > b {
  color:rgb(var(--card-rarity));
  font-size:8px;
  letter-spacing:.16em;
}
.fourfun-card-back > small {
  max-width:75%;
  color:rgba(242,232,198,.63);
  font-size:6px;
  letter-spacing:.1em;
}
.fourfun-card-back-sigil {
  position:relative;
  display:grid;
  place-items:center;
  width:72px;
  aspect-ratio:1;
  margin:8px;
  border:1px solid rgba(var(--card-rarity),.62);
  transform:rotate(45deg);
}
.fourfun-card-back-sigil::before,.fourfun-card-back-sigil::after {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(var(--card-rarity),.3);
  border-radius:50%;
}
.fourfun-card-back-sigil span {
  color:rgb(var(--card-rarity));
  font-size:28px;
  transform:rotate(-45deg);
  text-shadow:0 0 18px rgb(var(--card-rarity));
}

.fourfun-card-face.effect-0 .fourfun-card-grain { background-image:repeating-linear-gradient(115deg,transparent 0 4px,rgba(255,255,255,.45) 5px,transparent 6px 10px); }
.fourfun-card-face.effect-1 .fourfun-card-grain { background-image:repeating-radial-gradient(circle at 20% 20%,rgba(255,255,255,.35) 0 1px,transparent 2px 10px); }
.fourfun-card-face.effect-2 .fourfun-card-grain {
  background-image:linear-gradient(45deg,transparent 45%,rgba(255,255,255,.35) 50%,transparent 55%);
  background-size:18px 18px;
}
.fourfun-card-face.effect-3 .fourfun-card-holo {
  background-image:repeating-conic-gradient(from 0deg at var(--card-shine-x) var(--card-shine-y),transparent 0 13deg,rgba(255,255,255,.3) 15deg,transparent 19deg 31deg);
}
.fourfun-card-face.effect-4 .fourfun-card-grain { background-image:repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,255,255,.25) 8px,transparent 9px 15px); }
.fourfun-card-face.effect-5 .fourfun-card-holo {
  background-image:radial-gradient(circle at var(--card-shine-x) var(--card-shine-y),rgba(255,255,255,.7),transparent 19%),repeating-radial-gradient(circle at 50%,rgba(255,90,210,.2) 0 2px,transparent 4px 12px);
}
.fourfun-card-face.effect-6 .fourfun-card-grain {
  background-image:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 33%,transparent 46%,rgba(255,255,255,.13) 62%,transparent 74%);
  background-size:180% 180%;
  animation:fourfun-material-drift 5s ease-in-out infinite var(--card-delay);
}
@keyframes fourfun-material-drift { 50% { background-position:100% 100%; } }

.card-reveal-back,
.card-reveal-front {
  transition: transform var(--card-pack-flip-duration, .72s) cubic-bezier(.2,.76,.15,1);
  transform-style:preserve-3d;
}
.card-reveal-back { transform:rotateY(0deg); }
.card-reveal-front { transform:rotateY(180deg); }
.card-reveal-stack.is-flipped .card-reveal-back { transform:rotateY(-180deg); }
.card-reveal-stack.is-flipped .card-reveal-front { transform:rotateY(0deg); }
.card-reveal-stack.is-flipped { animation:card-reveal-rarity-pulse var(--card-pack-rarity-pulse-duration, .9s) ease-out; }
@keyframes card-reveal-rarity-pulse { 45% { filter:drop-shadow(0 0 32px rgba(var(--opening-rarity),.7)); transform:scale(1.035); } }

.fourfun-card-face {
  grid-template-rows: auto minmax(108px, 1fr) auto auto;
}

.fourfun-card-header {
  min-height: 36px;
  align-items: start;
  gap: 8px;
  padding: 8px 12px 7px;
}

.fourfun-card-title {
  flex: 1;
  display: -webkit-box;
  overflow: hidden;
  color: #fff6dc;
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  line-height: 1.02;
  letter-spacing: .03em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(var(--card-rarity), .18), 0 2px 8px rgba(0, 0, 0, .85);
}

.fourfun-card-title::first-letter { font-size: 1.08em; }
.fourfun-card-rarity {
  font-size: 8.5px;
  letter-spacing: .11em;
}

.fourfun-card-art {
  margin: 4px 8px 0;
  min-height: 94px;
  max-height: 108px;
}

.fourfun-card-copy {
  min-height: 56px;
  padding: 7px 11px 6px;
}

.fourfun-card-copy p {
  margin: 0;
  font-size: 8.5px;
  line-height: 1.27;
  -webkit-line-clamp: 4;
}

.fourfun-card-face.is-compact .fourfun-card-header {
  min-height: 31px;
  padding: 7px 10px 6px;
}

.fourfun-card-face.is-compact .fourfun-card-title {
  font-size: 12px;
  -webkit-line-clamp: 2;
}

.fourfun-card-face.is-compact .fourfun-card-rarity { font-size: 7.5px; }
.fourfun-card-face.is-compact .fourfun-card-art {
  min-height: 76px;
  max-height: 88px;
}
.fourfun-card-face.is-compact .fourfun-card-copy {
  min-height: 46px;
  padding: 6px 9px 5px;
}
.fourfun-card-face.is-compact .fourfun-card-copy p {
  font-size: 7.3px;
  -webkit-line-clamp: 3;
}

.fourfun-card-footer {
  min-height: 28px;
  padding: 5px 10px 6px;
  align-items: end;
}

.fourfun-card-footer-left,
.fourfun-card-footer-right {
  display: grid;
  gap: 1px;
}

.fourfun-card-footer-left { justify-items: start; }
.fourfun-card-footer-right { justify-items: end; }

.fourfun-card-number {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff0c7;
}

.fourfun-card-footer small {
  font-size: 6.8px;
  line-height: 1.1;
  color: rgba(244, 238, 215, .72);
  letter-spacing: .05em;
}

.fourfun-card-edition {
  color: rgb(var(--card-rarity));
  text-shadow: 0 0 9px rgba(var(--card-rarity), .36);
}

.fourfun-card-back-brand {
  font-size: 8px;
  letter-spacing: .24em;
}
.fourfun-card-back > strong {
  font-size: 28px;
  max-width: 75%;
  text-align: center;
}
.fourfun-card-back > b {
  font-size: 10px;
  letter-spacing: .16em;
}

.card-catalog-backdrop {
  padding: 22px 20px 18px;
  background: radial-gradient(circle at 50% 45%, rgba(88,66,28,.08), transparent 40%), rgba(1,3,2,.88);
  backdrop-filter: blur(10px);
}

.card-catalog-modal {
  width: min(1160px, 96vw);
  max-height: min(900px, 94vh);
  padding: 12px 0 8px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-catalog-header { padding: 0 20px 8px; }
.card-catalog-grid {
  margin: 14px 0 18px;
  padding: 0 20px;
}
.card-catalog-footer {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.card-catalog-pagination,
.card-catalog-actions {
  justify-content: center;
  width: 100%;
}
.card-catalog-actions .btn { min-width: 160px; }

.card-inspector-backdrop {
  padding: 18px 20px;
  overflow: auto;
  background: radial-gradient(circle at 50% 45%, rgba(88,66,28,.10), transparent 42%), rgba(1,3,2,.90);
}

.card-inspector {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 460px) minmax(320px, 480px);
  align-items: center;
  gap: clamp(18px, 3vw, 52px);
  width: min(1080px, 96vw);
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-inspector-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 2600;
}

.card-inspector-copy {
  order: 2;
  padding: 0;
  max-width: 480px;
}

.card-inspector-copy h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 46px);
}

.card-inspector-copy > p:not(.card-inspector-help) {
  margin: 0;
}

.card-inspector-meta { margin: 18px 0 12px; }
.card-inspector-help { margin: 0 0 16px; }
.card-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card-inspector-stage {
  order: 1;
  min-height: 0;
  padding: 26px 0 18px;
}

.card-inspector-card { width: min(320px, 62vw); }

.card-inspector-aura {
  width: 360px;
  opacity: .95;
}

.card-inspector-rarity-fx,
.card-reveal-rarity-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-inspector-rarity-fx i,
.card-reveal-rarity-fx i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.card-inspector-rarity-fx.rarity-epic i,
.card-reveal-rarity-fx.rarity-epic i {
  background: rgba(223, 120, 255, .95);
  box-shadow: 0 0 16px rgba(223, 120, 255, .95), 0 0 32px rgba(87, 39, 120, .6);
  animation: fourfun-epic-fx 4.4s ease-in-out infinite;
}

.card-inspector-rarity-fx.rarity-legendary i,
.card-reveal-rarity-fx.rarity-legendary i {
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 16px rgba(255,255,255,.92), 0 0 34px rgba(255,58,218,.75);
  animation: fourfun-legendary-fx 5.4s linear infinite;
}

.card-inspector-rarity-fx i:nth-child(1), .card-reveal-rarity-fx i:nth-child(1) {
  top: 14%;
  left: 16%;
}
.card-inspector-rarity-fx i:nth-child(2), .card-reveal-rarity-fx i:nth-child(2) {
  top: 22%;
  right: 17%;
  animation-delay: -.8s;
}
.card-inspector-rarity-fx i:nth-child(3), .card-reveal-rarity-fx i:nth-child(3) {
  top: 66%;
  left: 20%;
  animation-delay: -1.6s;
}
.card-inspector-rarity-fx i:nth-child(4), .card-reveal-rarity-fx i:nth-child(4) {
  top: 74%;
  right: 19%;
  animation-delay: -2.4s;
}
.card-inspector-rarity-fx i:nth-child(5), .card-reveal-rarity-fx i:nth-child(5) {
  top: 48%;
  left: 9%;
  animation-delay: -3.2s;
}
.card-inspector-rarity-fx i:nth-child(6), .card-reveal-rarity-fx i:nth-child(6) {
  top: 42%;
  right: 11%;
  animation-delay: -4s;
}
.card-reveal-rarity-fx i:nth-child(7) {
  top: 10%;
  left: 50%;
  animation-delay: -.45s;
}
.card-reveal-rarity-fx i:nth-child(8) {
  bottom: 10%;
  left: 50%;
  animation-delay: -1.2s;
}

@keyframes fourfun-epic-fx {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(.65);
    opacity: .2;
  }
  50% {
    transform: translate3d(0, -18px, 0) scale(1.25);
    opacity: 1;
  }
}

@keyframes fourfun-legendary-fx {
  0% {
    transform: translate3d(0, 0, 0) scale(.7);
    filter: hue-rotate(0deg);
    opacity: .25;
  }
  50% {
    transform: translate3d(0, -24px, 0) scale(1.35);
    filter: hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(.7);
    filter: hue-rotate(360deg);
    opacity: .25;
  }
}

.card-album {
  margin-top: 26px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-album::before { display: none; }
.card-album-heading { padding: 3px 4px 16px; }

.card-book-shell {
  position: relative;
  padding: 26px 18px 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 239, 191, .06), transparent 52%),
    linear-gradient(135deg, rgba(52, 38, 22, .92), rgba(20, 13, 8, .95));
  box-shadow: inset 0 0 0 1px rgba(227, 194, 109, .18), 0 18px 40px rgba(0,0,0,.36);
}

.card-book-shell::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(232, 198, 117, .10);
  border-radius: 18px;
  pointer-events: none;
}

.card-book-spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  min-height: 760px;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.card-book-spread.turn-next { animation: book-spread-next .5s ease; }
.card-book-spread.turn-prev { animation: book-spread-prev .5s ease; }

@keyframes book-spread-next {
  from {
    transform: rotateY(-10deg) translateX(10px);
    opacity: .75;
  }
  to {
    transform: rotateY(0deg) translateX(0);
    opacity: 1;
  }
}

@keyframes book-spread-prev {
  from {
    transform: rotateY(10deg) translateX(-10px);
    opacity: .75;
  }
  to {
    transform: rotateY(0deg) translateX(0);
    opacity: 1;
  }
}

.card-book-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  justify-items: center;
  gap: 24px 18px;
  padding: 30px 18px 26px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(245, 231, 199, .98), rgba(229, 211, 171, .96));
  box-shadow: inset 0 0 0 1px rgba(128, 91, 41, .16), inset 0 -16px 22px rgba(124, 84, 30, .08);
}

.card-book-page-left {
  transform-origin: right center;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.card-book-page-right {
  transform-origin: left center;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.card-book-gutter {
  position: relative;
  background: linear-gradient(180deg, rgba(62, 41, 17, .94), rgba(22, 13, 5, .95));
  border-radius: 14px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.05);
}

.card-book-gutter::before,
.card-book-gutter::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 224, 157, .22);
}

.card-book-gutter::before { inset: 30px auto; }
.card-book-gutter::after {
  inset: 44px auto 44px;
  width: 1px;
  background: rgba(255,255,255,.14);
}

.card-book-slot {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 302px;
}

.card-book-slot .fourfun-card-shell { width: min(188px, 100%); }
.card-book-slot-empty { opacity: .22; }
.card-book-slot-empty::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 126px;
  aspect-ratio: .705;
  border: 1px dashed rgba(109, 77, 30, .24);
  border-radius: 18px;
  color: rgba(92, 65, 24, .24);
  font-size: 34px;
}

.card-book-slot.is-album-focus .fourfun-card-shell { animation: album-card-focus 1s ease-in-out 2; }

@keyframes album-card-focus {
  50% {
    transform: translateY(-5px) scale(1.025);
    filter: drop-shadow(0 0 26px rgba(255, 214, 114, .42));
  }
}

.card-book-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.card-book-pagination span {
  min-width: 128px;
  text-align: center;
  color: #e8d8ad;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.card-pack-opening {
  padding: 18px 16px 24px;
}

.card-pack-opening-main {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  width: min(1040px, 94vw);
  min-height: min(78vh, 820px);
}

.card-pack-opening-heading {
  max-width: 760px;
  padding-top: 0;
}

.card-reveal-stage {
  position: relative;
  min-height: 0;
}

.card-reveal-stack { width: 290px; }
.card-reveal-front {
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease;
}
.card-reveal-stack.is-flipped .card-reveal-front {
  opacity: 1;
  visibility: visible;
}
.card-reveal-stack.is-flipped .card-reveal-back { visibility: hidden; }

.card-reveal-stage.rarity-legendary::before {
  content: "";
  position: absolute;
  inset: 10% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,97,216,.08) 28%, rgba(74,235,255,.08) 44%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.card-pack-opening-actions {
  width: 100%;
}

@media (max-width: 980px) {
  .card-inspector {
    grid-template-columns: 1fr;
    width: min(720px, 96vw);
    justify-items: center;
  }

  .card-inspector-copy {
    order: 2;
    text-align: center;
  }

  .card-inspector-meta,
  .card-inspector-actions { justify-content: center; }

  .card-book-spread {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
  }

  .card-book-gutter { display: none; }
}

@media (max-width: 620px) {
  .card-catalog-backdrop,
  .card-inspector-backdrop { padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); }

  .card-catalog-modal {
    width: 100%;
    max-height: none;
  }
  .card-catalog-header,
  .card-catalog-grid {
    padding-left: 4px;
    padding-right: 4px;
  }
  .card-catalog-actions { flex-wrap: wrap; }
  .card-catalog-actions .btn,
  .card-catalog-pagination { width: 100%; }

  .card-inspector {
    width: 100%;
    gap: 10px;
  }

  .card-inspector-stage { padding-top: 44px; }
  .card-inspector-card { width: min(260px, 68vw); }
  .card-inspector-copy { width: 100%; }

  .card-album-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .card-book-shell { padding: 14px 8px 12px; }
  .card-book-page {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 8px 20px;
  }
  .card-book-slot { min-height: 0; }
  .card-book-slot .fourfun-card-shell { width: min(170px, 54vw); }
  .card-book-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-book-pagination .btn {
    flex: 1;
    min-width: 0;
  }
  .card-pack-opening-main {
    min-height: min(72vh, 760px);
    gap: 14px;
  }
  .card-pack-opening-heading h2 { font-size: clamp(26px, 9vw, 40px); }
  .card-reveal-stack { width: min(235px, 66vw); }
}

.fourfun-card-header {
  position: relative;
  justify-content: center;
  padding-right: 12px;
  padding-left: 12px;
}

.fourfun-card-title {
  width: 100%;
  padding: 0 34px 0 16px;
  text-align: center;
}

.fourfun-card-rarity {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.fourfun-card-art {
  min-height: 128px;
  max-height: none;
}

.fourfun-card-art img {
  object-fit: contain;
  padding: 4px;
  transform: none;
}

.fourfun-card-copy { min-height: 68px; }

.fourfun-card-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.fourfun-card-footer-left,
.fourfun-card-footer-center,
.fourfun-card-footer-right {
  display: flex;
  align-items: center;
}

.fourfun-card-footer-left { justify-content: flex-start; }
.fourfun-card-footer-center {
  justify-content: center;
  min-width: 0;
}
.fourfun-card-footer-right {
  justify-content: flex-end;
  gap: 5px;
}
.fourfun-card-footer-center small { text-align: center; }

.fourfun-card-face.is-compact .fourfun-card-art {
  min-height: 92px;
}

.fourfun-card-face.is-compact .fourfun-card-copy {
  min-height: 52px;
}

.fourfun-card-face.rarity-legendary,
.fourfun-card-back.rarity-legendary {
  --card-rarity: 118, 214, 255;
  --card-rarity-deep: 33, 15, 74;
}

.fourfun-card-face.rarity-legendary {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 59, 207, .18), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(71, 220, 255, .16), transparent 28%),
    linear-gradient(145deg, rgba(16, 17, 28, .99), rgba(7, 8, 16, .99));
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.46),
    0 0 30px rgba(255, 86, 207, 0.18),
    0 0 45px rgba(71, 220, 255, 0.16),
    inset 0 0 0 1px rgba(255, 246, 212, 0.17),
    inset 0 -18px 30px rgba(0, 0, 0, 0.38);
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo {
  background: conic-gradient(from 0deg at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.7), rgba(255,83,198,.7), rgba(64,220,255,.76), rgba(131,86,255,.72), rgba(110,255,178,.74), rgba(255,255,255,.7));
}

.fourfun-card-face.rarity-legendary .fourfun-card-particles i {
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 22px rgba(255,83,198,.6);
  animation: fourfun-legendary-fx 4.8s linear infinite;
}

.card-inspector-copy > p:not(.card-inspector-help),
.card-inspector-help {
  max-width: 46ch;
}

.card-inspector-actions .btn { min-width: 140px; }

.card-catalog-modal {
  padding-top: 8px;
}

.card-catalog-header h2 { margin-bottom: 8px; }
.card-catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  gap: 18px 16px;
}

.card-catalog-entry {
  min-height: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  align-items: start;
  grid-template-columns: 1fr;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.card-catalog-entry .fourfun-card-shell { width: min(188px, 100%); }

.card-catalog-entry-copy,
.card-catalog-header > p:last-of-type,
.card-catalog-close { display: none !important; }

.card-album-tools {
  flex-wrap: nowrap;
  align-items: end;
}

.card-album-tools label { order: 1; }
.card-album-tools .collection-collapse-button { order: 2; }

.card-book-slot .fourfun-card-shell {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.card-book-page {
  overflow: visible;
}

.card-pack-opening {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.card-pack-opening-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(1040px, 94vw);
  min-height: calc(100dvh - 140px);
  gap: 22px;
}

.card-pack-opening-heading,
.card-pack-opening-actions,
.card-reveal-stage,
.card-pack-complete-grid {
  width: 100%;
}

.card-pack-opening-heading {
  display: grid;
  justify-items: center;
}

.card-pack-wrapper {
  overflow: visible;
}

.card-pack-tear-line {
  top: 3.5%;
  height: 56px;
  border-style: solid;
  border-color: rgba(255, 234, 158, .75);
  background:
    linear-gradient(90deg, rgba(255, 232, 149, .95) 0 calc(var(--tear-progress) * 1%), rgba(22, 32, 24, .92) calc(var(--tear-progress) * 1%)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 3px, transparent 3px 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 20px rgba(255, 213, 97, .22);
}

.card-pack-tear-line::before,
.card-pack-tear-line::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.card-pack-tear-line::before {
  inset: auto 8px 6px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  opacity: .85;
}

.card-pack-tear-line::after {
  top: 50%;
  left: calc(var(--tear-progress) * 1% - 14px);
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,231,120,.76) 34%, transparent 70%);
  filter: blur(.4px);
  box-shadow: 0 0 12px rgba(255, 226, 114, .8), 0 0 22px rgba(255, 173, 48, .52);
}

.card-pack-tear-line i {
  width: 34px;
  background: linear-gradient(180deg, #ffe694, #e9b845);
  box-shadow: 0 0 18px rgba(255, 208, 82, .42);
}

.card-reveal-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 0;
}

.card-pack-complete-grid {
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.card-pack-complete-grid .fourfun-card-shell {
  width: min(190px, 30vw);
}

.card-pack-opening-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.card-pack-opening.rarity-legendary {
  --opening-rarity: 118, 214, 255;
  background: radial-gradient(circle at 50% 47%, rgba(255, 83, 198, .10), transparent 28%), radial-gradient(circle at 40% 40%, rgba(64, 220, 255, .12), transparent 32%), linear-gradient(145deg, rgba(3,7,10,.98), rgba(1,2,6,.99));
}

@media (max-width: 980px) {
  .card-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-pack-complete-grid .fourfun-card-shell { width: min(160px, 38vw); }
}

@media (max-width: 620px) {
  .fourfun-card-art { min-height: 100px; }
  .card-catalog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .card-catalog-entry .fourfun-card-shell { width: min(190px, 58vw); }
  .card-album-tools {
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-album-tools label { flex: 1; }
  .card-album-tools .collection-collapse-button { width: 100%; }
  .card-pack-opening-main {
    min-height: calc(100dvh - 118px);
    gap: 14px;
  }
  .card-pack-complete-grid .fourfun-card-shell { width: min(148px, 42vw); }
  .card-pack-opening-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .card-pack-opening-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

.fourfun-card-shell,
.fourfun-card-body,
.fourfun-card-face,
.fourfun-card-back {
  visibility: visible !important;
  opacity: 1 !important;
}

.fourfun-card-shell {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.fourfun-card-title {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(var(--card-rarity), .18), 0 2px 8px rgba(0,0,0,.8);
}

.fourfun-card-art,
.fourfun-card-face.is-compact .fourfun-card-art {
  min-height: 138px;
}

.fourfun-card-face.is-compact .fourfun-card-art {
  min-height: 110px;
  max-height: none;
}

.fourfun-card-face.is-compact .fourfun-card-copy {
  min-height: 54px;
}

.card-catalog-backdrop {
  padding: 18px 16px;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(8px);
}

.card-catalog-modal {
  display: grid;
  justify-items: center;
  align-content: start;
  width: min(1100px, 96vw);
  max-height: 94vh;
  padding: 0 !important;
  overflow: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-catalog-header,
.card-catalog-footer {
  width: 100%;
}

.card-catalog-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  gap: 20px 16px;
  margin: 18px 0;
  padding: 0 4px;
}

.card-catalog-card-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
}

.card-catalog-card {
  width: min(190px, 100%) !important;
}

.card-stock-stamp {
  z-index: 4;
}

.card-book-shell,
.card-book-spread,
.card-book-page,
.card-book-slot {
  overflow: visible;
}

.card-book-slot {
  position: relative;
  width: 100%;
}

.card-book-slot .fourfun-card-shell {
  width: min(188px, 100%) !important;
  margin: 0 auto;
}

.card-book-slot .fourfun-card-shell .fourfun-card-face,
.card-book-slot .fourfun-card-shell .fourfun-card-back {
  pointer-events: none;
}

.card-book-page {
  justify-items: center;
}

.card-book-slot-empty::before {
  opacity: .5;
}

.card-inspector-card {
  width: min(336px, 64vw);
}

.card-inspector-copy h2,
.fourfun-card-title {
  text-align: center;
}

.card-inspector-help {
  color: rgba(232, 226, 203, .8);
}

.card-reveal-front,
.card-pack-complete-grid .fourfun-card-shell {
  width: min(205px, 32vw);
}

.card-pack-complete-grid {
  gap: 20px;
}

.card-pack-complete-grid .fourfun-card-shell .fourfun-card-art {
  min-height: 126px;
}

@media (max-width: 980px) {
  .card-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-book-slot .fourfun-card-shell { width: min(170px, 100%) !important; }
}

@media (max-width: 620px) {
  .card-catalog-backdrop { padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); }
  .card-catalog-modal {
    width: 100%;
    max-height: none;
  }
  .card-catalog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .card-catalog-card { width: min(200px, 58vw) !important; }
  .card-book-slot .fourfun-card-shell { width: min(170px, 56vw) !important; }
  .card-inspector-card { width: min(280px, 72vw); }
  .card-reveal-front,
  .card-pack-complete-grid .fourfun-card-shell { width: min(160px, 42vw); }
}

.card-catalog-backdrop,
.card-inspector-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2800 !important;
}

.card-catalog-modal,
.card-inspector {
  position: relative;
  margin: 0 auto;
}

.fourfun-card-title {
  font-family: "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Garamond, Georgia, serif !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: center !important;
  font-style: italic;
}

.fourfun-card-copy p {
  font-size: 9.4px;
  line-height: 1.34;
}

.fourfun-card-footer small {
  font-size: 7.4px;
  line-height: 1.15;
}

.fourfun-card-face.is-compact .fourfun-card-copy p {
  font-size: 8px;
  line-height: 1.34;
}

.fourfun-card-face.is-compact .fourfun-card-footer small {
  font-size: 7px;
}

.card-catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.card-catalog-card-wrap .fourfun-card-shell {
  display: block;
}

.card-catalog-empty {
  grid-column: 1 / -1;
  justify-self: center;
}

.card-book-page {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 18px 12px;
  padding: 24px 14px 22px;
}

.card-book-slot {
  position: relative;
  padding: 12px 8px 10px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(164, 122, 58, .16), rgba(92, 63, 23, .08));
  box-shadow:
    inset 0 0 0 1px rgba(120, 80, 32, .18),
    inset 0 14px 18px rgba(255,255,255,.08),
    inset 0 -12px 16px rgba(73,47,12,.08);
}

.card-book-slot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px dashed rgba(111, 78, 29, .24);
  pointer-events: none;
}

.card-book-slot .fourfun-card-shell {
  width: min(112px, 100%) !important;
}

.card-book-slot-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(120, 80, 32, .1);
}

.card-book-slot-empty::before {
  inset: 12px;
}

.card-book-shell {
  padding: 20px 14px 16px;
}

.card-book-spread {
  min-height: 720px;
}

.card-album-tools {
  align-items: center;
}

.card-inspector-rarity-fx.rarity-legendary i,
.card-reveal-rarity-fx.rarity-legendary i {
  background: rgba(255,255,255,.98);
  box-shadow:
    0 0 16px rgba(255,255,255,.95),
    0 0 28px rgba(255,78,206,.7),
    0 0 40px rgba(88,218,255,.62);
}

.card-inspector-rarity-fx.rarity-legendary,
.card-reveal-rarity-fx.rarity-legendary {
  filter: saturate(1.2) hue-rotate(0deg);
}

.fourfun-card-face.rarity-legendary,
.fourfun-card-back.rarity-legendary {
  --card-rarity: 112, 215, 255 !important;
  --card-rarity-deep: 27, 19, 72 !important;
}

.fourfun-card-face.rarity-legendary {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 82, 210, .16), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(80, 224, 255, .18), transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(116, 96, 255, .14), transparent 32%),
    linear-gradient(145deg, rgba(16, 18, 34, .99), rgba(7, 7, 20, .99)) !important;
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.46),
    0 0 18px rgba(255, 88, 198, 0.18),
    0 0 30px rgba(82, 227, 255, 0.18),
    inset 0 0 0 1px rgba(255, 246, 212, 0.12),
    inset 0 -18px 30px rgba(0, 0, 0, 0.38) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border {
  border-color: rgba(255,255,255,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 18px rgba(255, 75, 204, .34),
    0 0 28px rgba(80, 224, 255, .3);
  animation: legendary-rgb-border 4.2s linear infinite;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo {
  opacity: .82 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.78), rgba(255,255,255,.18) 10%, transparent 22%),
    conic-gradient(from 0deg at var(--card-shine-x) var(--card-shine-y), rgba(255, 77, 199, .72), rgba(255, 155, 77, .68), rgba(236, 255, 120, .55), rgba(102, 255, 197, .68), rgba(79, 224, 255, .74), rgba(129, 110, 255, .72), rgba(255, 77, 199, .72)) !important;
  background-blend-mode: screen;
  filter: saturate(1.35) hue-rotate(0deg);
  animation: legendary-oil-slick 5.8s linear infinite var(--card-delay) !important;
}

.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .78 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.82), transparent 20%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,77,199,.7), rgba(255,170,83,.64), rgba(222,255,120,.56), rgba(102,255,197,.66), rgba(79,224,255,.7), rgba(129,110,255,.72), rgba(255,77,199,.7));
  animation: legendary-oil-slick 5.8s linear infinite var(--card-delay) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-particles,
.fourfun-card-back.rarity-legendary .fourfun-card-particles {
  opacity: 1;
}

.fourfun-card-face.rarity-legendary .fourfun-card-particles i {
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 18px rgba(255,86,210,.72),
    0 0 30px rgba(80,224,255,.7);
  animation: fourfun-legendary-fx 4.3s linear infinite;
}

.card-inspector-aura {
  background: radial-gradient(circle, rgba(var(--inspect-rarity),.44), rgba(var(--inspect-rarity),.12) 38%, transparent 70%);
}

.card-inspector.rarity-legendary .card-inspector-aura {
  background:
    radial-gradient(circle, rgba(79,224,255,.26), transparent 38%),
    radial-gradient(circle at 60% 40%, rgba(255,84,205,.24), transparent 42%),
    radial-gradient(circle at 42% 58%, rgba(129,110,255,.22), transparent 44%);
  filter: blur(18px) saturate(1.25);
}

@keyframes legendary-rgb-border {
  0% { filter: hue-rotate(0deg) saturate(1.15); }
  100% { filter: hue-rotate(360deg) saturate(1.15); }
}

@keyframes legendary-oil-slick {
  0% {
    transform: translateZ(0);
    filter: hue-rotate(0deg) saturate(1.2);
  }
  50% {
    transform: translateZ(0);
    filter: hue-rotate(180deg) saturate(1.45);
  }
  100% {
    transform: translateZ(0);
    filter: hue-rotate(360deg) saturate(1.2);
  }
}

@media (max-width: 980px) {
  .card-book-page {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .card-book-slot .fourfun-card-shell {
    width: min(98px, 100%) !important;
  }
}

@media (max-width: 620px) {
  .card-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-book-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  .card-book-spread {
    min-height: 0;
  }
  .card-book-slot .fourfun-card-shell {
    width: min(128px, 100%) !important;
  }
}

.card-catalog-backdrop {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 18px 16px !important;
}

.card-catalog-modal {
  align-content: center !important;
  justify-items: center !important;
}

.card-catalog-header,
.card-catalog-footer {
  text-align: center;
}

.card-catalog-stats,
.card-catalog-pagination,
.card-catalog-actions {
  justify-content: center !important;
}

.card-catalog-grid {
  place-content: center;
}

.card-catalog-card {
  width: min(236px, 100%) !important;
}

.card-catalog-card .fourfun-card-title,
.card-inspector-card .fourfun-card-title,
.card-book-slot .fourfun-card-title {
  left: auto;
  transform: none;
  width: 100%;
  padding: 0 34px 0 10px;
  text-align: center !important;
  justify-self: center;
}

.fourfun-card-header {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.fourfun-card-rarity {
  right: 8px;
}

.fourfun-card-number {
  font-size: 10px;
}

.fourfun-card-footer small {
  font-size: 8.2px !important;
  line-height: 1.18;
}

.fourfun-card-copy p {
  font-size: 10px;
  line-height: 1.36;
}

.card-book-page {
  gap: 16px 12px;
}

.card-book-slot {
  min-height: 250px;
  padding: 10px 6px 8px;
}

.card-book-slot .fourfun-card-shell {
  width: min(138px, 100%) !important;
}

.card-book-slot .fourfun-card-face,
.card-book-slot .fourfun-card-back {
  min-height: 0;
}

.card-book-slot .fourfun-card-art {
  min-height: 122px;
}

.card-book-slot .fourfun-card-copy {
  min-height: 62px;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 8.7px;
}

.card-book-slot .fourfun-card-footer small {
  font-size: 7.6px !important;
}

.card-book-slot-empty {
  display: grid;
  place-items: center;
  min-height: 250px;
}

.card-book-slot-empty::after {
  content: "Empty Slot";
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(96, 66, 25, .38);
}

.card-inspector-rarity-fx,
.card-reveal-rarity-fx {
  overflow: visible;
}

.card-inspector-rarity-fx.rarity-epic::before,
.card-reveal-rarity-fx.rarity-epic::before,
.card-inspector-rarity-fx.rarity-legendary::before,
.card-reveal-rarity-fx.rarity-legendary::before {
  content: "";
  position: absolute;
  inset: 10% 14%;
  border-radius: 50%;
  pointer-events: none;
}

.card-inspector-rarity-fx.rarity-epic::before,
.card-reveal-rarity-fx.rarity-epic::before {
  background: radial-gradient(circle, rgba(220, 125, 255, .2), rgba(160, 71, 250, .08) 38%, transparent 72%);
  filter: blur(14px);
  animation: epic-pulse-ring 2.6s ease-in-out infinite;
}

.card-inspector-rarity-fx.rarity-legendary::before,
.card-reveal-rarity-fx.rarity-legendary::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.16), transparent 24%),
    conic-gradient(from 0deg, rgba(255,75,205,.24), rgba(84,228,255,.22), rgba(111,255,187,.18), rgba(125,121,255,.22), rgba(255,75,205,.24));
  filter: blur(18px) saturate(1.2);
  animation: legendary-orbit-ring 5s linear infinite;
}

.card-inspector-rarity-fx.rarity-epic i,
.card-reveal-rarity-fx.rarity-epic i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #f2afff 50%, rgba(202,105,255,.18) 72%);
  box-shadow: 0 0 14px rgba(236, 169, 255, .95), 0 0 26px rgba(123, 50, 184, .68);
  animation: epic-sparkle 3.1s ease-in-out infinite;
}

.card-inspector-rarity-fx.rarity-legendary i,
.card-reveal-rarity-fx.rarity-legendary i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.96) 26%, rgba(255, 85, 212, .75) 50%, rgba(79,224,255,.7) 78%, transparent 86%);
  box-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 28px rgba(255,85,212,.74), 0 0 42px rgba(79,224,255,.72);
  animation: legendary-sparkle 4.2s linear infinite;
}

@keyframes epic-pulse-ring {
  0%, 100% {
    transform: scale(.92);
    opacity: .38;
  }
  50% {
    transform: scale(1.06);
    opacity: .78;
  }
}

@keyframes epic-sparkle {
  0%, 100% {
    transform: translate3d(0,0,0) scale(.62);
    opacity: .28;
  }
  50% {
    transform: translate3d(0,-18px,0) scale(1.42);
    opacity: 1;
  }
}

@keyframes legendary-orbit-ring {
  0% {
    transform: rotate(0deg) scale(.96);
    opacity: .42;
  }
  50% {
    transform: rotate(180deg) scale(1.06);
    opacity: .88;
  }
  100% {
    transform: rotate(360deg) scale(.96);
    opacity: .42;
  }
}

@keyframes legendary-sparkle {
  0% {
    transform: translate3d(0,0,0) scale(.56);
    opacity: .24;
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translate3d(0,-22px,0) scale(1.48);
    opacity: 1;
    filter: hue-rotate(180deg);
  }
  100% {
    transform: translate3d(0,0,0) scale(.56);
    opacity: .24;
    filter: hue-rotate(360deg);
  }
}

.fourfun-card-face.rarity-legendary,
.fourfun-card-back.rarity-legendary {
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(145deg, rgba(30, 30, 39, .98), rgba(14, 15, 21, .99)) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border,
.fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 10px rgba(255,82,210,.32),
    0 0 18px rgba(82,230,255,.28),
    0 0 26px rgba(117,122,255,.26);
  animation: legendary-rgb-border 3.6s linear infinite;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .92 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.88), rgba(255,255,255,.22) 10%, transparent 22%),
    linear-gradient(125deg,
      rgba(255, 72, 200, .26) 0%,
      rgba(255, 198, 84, .18) 18%,
      rgba(182, 255, 116, .18) 34%,
      rgba(86, 232, 255, .24) 50%,
      rgba(107, 123, 255, .26) 67%,
      rgba(255, 72, 200, .26) 100%);
  background-size: 100% 100%, 220% 220%;
  background-position: center, calc(var(--card-shine-x) * 1.1) calc(var(--card-shine-y) * 1.1);
  mix-blend-mode: screen;
  filter: saturate(1.35) contrast(1.05);
  animation: legendary-oil-slick 4.8s linear infinite var(--card-delay) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-gloss,
.fourfun-card-back.rarity-legendary .fourfun-card-gloss {
  opacity: .92;
  background: linear-gradient(112deg, transparent 22%, rgba(255,255,255,.06) 34%, rgba(255,255,255,.42) 48%, rgba(255,255,255,.08) 58%, transparent 70%);
  animation-duration: 3.8s;
}

.fourfun-card-face.rarity-legendary .fourfun-card-particles i {
  width: 6px;
  height: 6px;
}

.card-catalog-card .fourfun-card-quantity,
.card-catalog-card .fourfun-card-edition,
.card-catalog-card .fourfun-card-footer-center small {
  display: none !important;
}

.card-catalog-card .fourfun-card-footer {
  grid-template-columns: auto 1fr auto;
}

.card-catalog-card .fourfun-card-footer-left,
.card-catalog-card .fourfun-card-footer-right {
  display: flex;
}

@media (max-width: 980px) {
  .card-book-slot .fourfun-card-shell {
    width: min(122px, 100%) !important;
  }
}

@media (max-width: 620px) {
  .card-catalog-backdrop {
    place-items: start center !important;
  }
  .card-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-catalog-card {
    width: min(166px, 100%) !important;
  }
  .card-book-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-book-slot {
    min-height: 238px;
  }
  .card-book-slot .fourfun-card-shell {
    width: min(140px, 100%) !important;
  }
}

.fourfun-card-rarity-seal {
  position: absolute;
  right: 8px;
  top: 7px;
  transform: none !important;
  font-size: 0 !important;
  min-width: 42px;
  min-height: 18px;
  padding: 0 !important;
  background-position: center;
}

.fourfun-card-header {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px 5px;
}

.fourfun-card-title {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 44px 0 16px !important;
  text-align: center !important;
  justify-self: center;
  align-self: center;
  left: 0 !important;
  right: 0 !important;
  font-family: "Cormorant Garamond", "Garamond", "Baskerville Old Face", Georgia, serif !important;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .02em;
}

.fourfun-card-footer {
  grid-template-columns: auto 1fr auto;
}

.fourfun-card-footer-center small,
.fourfun-card-footer small {
  font-size: 8.8px !important;
  line-height: 1.15;
}

.fourfun-card-copy p {
  font-size: 10.2px !important;
  line-height: 1.34;
}

.card-book-shell {
  width: 100%;
}

.card-book-page {
  gap: 12px 10px;
  padding: 18px 10px 16px;
}

.card-book-slot {
  min-height: 228px;
  padding: 6px 4px;
}

.card-book-slot::before {
  inset: 5px;
  border-style: solid;
  border-color: rgba(126, 92, 41, .22);
}

.card-book-slot .fourfun-card-shell {
  width: calc(100% - 8px) !important;
  max-width: 126px !important;
}

.card-book-slot .fourfun-card-art {
  min-height: 114px;
}

.card-book-slot-empty {
  opacity: 1;
}

.card-book-slot-empty::before {
  display: none;
}

.card-book-slot-empty .empty-card-slot-shape,
.card-book-slot-empty::after {
  content: "";
}

.card-book-slot-empty::after {
  position: absolute;
  inset: 16px 16px 40px;
  border-radius: 14px;
  border: 1px dashed rgba(117, 82, 31, .35);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(255,248,225,.24), rgba(212, 185, 137, .12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.card-book-slot-empty > span {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.card-book-slot-empty::before,
.card-book-slot-empty::after {
  opacity: .9;
}

.card-book-slot-empty::before {
  content: "✦";
  display: grid;
  place-items: center;
  position: absolute;
  inset: 16px 16px 40px;
  color: rgba(110, 78, 27, .22);
  font-size: 32px;
  z-index: 1;
}

.card-book-slot-empty::after {
  content: "Empty Slot";
  inset: auto 0 16px 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(96, 66, 25, .48);
  background: none;
  border: 0;
  box-shadow: none;
}

.card-reveal-stack {
  width: 312px;
}

.card-reveal-front {
  width: 100% !important;
  display: none;
  opacity: 0;
  visibility: hidden;
}

.card-reveal-stack.is-flipped .card-reveal-front {
  display: block;
  opacity: 1;
  visibility: visible;
}

.card-reveal-stack.is-flipped .card-reveal-back {
  opacity: 0;
  visibility: hidden;
}

.card-reveal-front .fourfun-card-copy p,
.card-pack-complete-grid .fourfun-card-copy p {
  font-size: 10.2px !important;
}

.card-reveal-front .fourfun-card-art,
.card-pack-complete-grid .fourfun-card-art {
  min-height: 132px;
}

.card-pack-complete-grid .fourfun-card-shell {
  width: min(214px, 32vw) !important;
}

.fourfun-card-face.rarity-legendary,
.fourfun-card-back.rarity-legendary {
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(145deg, rgba(27, 29, 38, .985), rgba(13, 14, 20, .99)) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .52 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.60), rgba(255,255,255,.08) 12%, transparent 26%),
    linear-gradient(135deg,
      rgba(255, 66, 196, .10) 0%,
      rgba(255, 166, 77, .08) 16%,
      rgba(220, 255, 126, .09) 31%,
      rgba(88, 232, 255, .12) 49%,
      rgba(110, 128, 255, .13) 67%,
      rgba(255, 66, 196, .10) 100%);
  background-size: 100% 100%, 180% 180%;
  background-position: center, calc((var(--card-shine-x) - 50%) * 2 + 50%) calc((var(--card-shine-y) - 50%) * 2 + 50%);
  mix-blend-mode: screen;
  filter: saturate(1.22) contrast(1.03);
  animation: none !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-gloss,
.fourfun-card-back.rarity-legendary .fourfun-card-gloss {
  opacity: .72;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border,
.fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  animation: legendary-rgb-border 2.6s linear infinite;
}

.card-inspector-card .fourfun-card-holo,
.card-catalog-card .fourfun-card-holo,
.card-book-slot .fourfun-card-holo,
.card-reveal-front .fourfun-card-holo {
  background-size: 100% 100%, 180% 180%;
}

.card-inspector-rarity-fx.rarity-epic::after,
.card-reveal-rarity-fx.rarity-epic::after,
.card-inspector-rarity-fx.rarity-legendary::after,
.card-reveal-rarity-fx.rarity-legendary::after {
  content: "";
  position: absolute;
  inset: -6% 20%;
  pointer-events: none;
}

.card-inspector-rarity-fx.rarity-epic::after,
.card-reveal-rarity-fx.rarity-epic::after {
  background: conic-gradient(from 0deg, transparent, rgba(222, 142, 255, .24), transparent, rgba(167, 92, 255, .20), transparent);
  filter: blur(8px);
  animation: epic-pulse-ring 2.1s ease-in-out infinite;
}

.card-inspector-rarity-fx.rarity-legendary::after,
.card-reveal-rarity-fx.rarity-legendary::after {
  background: conic-gradient(from 0deg, transparent, rgba(255,87,208,.20), rgba(77,225,255,.18), transparent, rgba(120,255,190,.16), transparent, rgba(131,118,255,.18), transparent);
  filter: blur(10px) saturate(1.2);
  animation: legendary-orbit-ring 3.8s linear infinite;
}

.card-inspector-rarity-fx.rarity-legendary i,
.card-reveal-rarity-fx.rarity-legendary i {
  width: 12px;
  height: 12px;
}

.card-inspector-rarity-fx i:nth-child(1), .card-reveal-rarity-fx i:nth-child(1) {
  top: 10%;
  left: 10%;
}
.card-inspector-rarity-fx i:nth-child(2), .card-reveal-rarity-fx i:nth-child(2) {
  top: 14%;
  right: 10%;
}
.card-inspector-rarity-fx i:nth-child(3), .card-reveal-rarity-fx i:nth-child(3) {
  top: 78%;
  left: 12%;
}
.card-inspector-rarity-fx i:nth-child(4), .card-reveal-rarity-fx i:nth-child(4) {
  top: 76%;
  right: 12%;
}
.card-inspector-rarity-fx i:nth-child(5), .card-reveal-rarity-fx i:nth-child(5) {
  top: 48%;
  left: 4%;
}
.card-inspector-rarity-fx i:nth-child(6), .card-reveal-rarity-fx i:nth-child(6) {
  top: 44%;
  right: 4%;
}

@media (max-width: 980px) {
  .card-book-slot {
    min-height: 214px;
  }
  .card-book-slot .fourfun-card-shell {
    max-width: 116px !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot {
    min-height: 244px;
  }
  .card-book-slot .fourfun-card-shell {
    width: calc(100% - 6px) !important;
    max-width: 154px !important;
  }
  .card-reveal-stack {
    width: min(250px, 72vw);
  }
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  top: 8px;
  right: 8px;
  min-width: 38px !important;
  height: 16px !important;
  padding: 0 6px !important;
  gap: 2px !important;
  font-size: 6px !important;
  letter-spacing: .08em !important;
  text-indent: 0 !important;
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 7px color-mix(in srgb, var(--seal-a) 18%, transparent),
    0 2px 6px rgba(0,0,0,.22) !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal::before,
.fourfun-card-rarity-seal.reward-rarity-seal::after {
  font-size: 5px !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 56px !important;
  height: 17px !important;
  padding-inline: 8px !important;
}

.fourfun-card-header {
  padding: 7px 42px 6px 42px !important;
}

.fourfun-card-title {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  align-self: center;
}

.fourfun-card-footer-center small,
.fourfun-card-footer small {
  font-size: 9.6px !important;
}

.card-book-page {
  gap: 10px 8px !important;
  padding: 14px 8px !important;
}

.card-book-slot,
.card-book-slot-empty {
  min-height: 258px !important;
  padding: 8px 6px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.card-book-slot::before,
.card-book-slot-empty::before {
  content: "" !important;
  position: absolute;
  inset: 5px !important;
  border-radius: 12px;
  border: 1px solid rgba(126, 92, 41, .18) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.14), transparent 44%),
    linear-gradient(180deg, rgba(164, 122, 58, .08), rgba(92, 63, 23, .04)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 12px 16px rgba(255,255,255,.06),
    inset 0 -8px 12px rgba(73,47,12,.05) !important;
  pointer-events: none;
}

.card-book-slot .fourfun-card-shell {
  width: calc(100% - 14px) !important;
  max-width: 152px !important;
  z-index: 2;
}

.card-book-slot .fourfun-card-art {
  min-height: 132px !important;
}

.card-book-slot .fourfun-card-copy {
  min-height: 66px !important;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 10px !important;
  line-height: 1.34 !important;
}

.card-book-slot .fourfun-card-footer small {
  font-size: 9px !important;
}

.card-book-slot-empty {
  opacity: 1 !important;
}

.card-book-slot-empty::after {
  content: "" !important;
  position: absolute;
  z-index: 1;
  width: min(150px, calc(100% - 22px));
  aspect-ratio: .705;
  border-radius: 18px;
  border: 1px dashed rgba(117, 82, 31, .35);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(255,248,225,.16), rgba(212, 185, 137, .08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.card-book-slot-empty > * { display: none !important; }

.card-inspector-rarity-fx.rarity-legendary::after,
.card-reveal-rarity-fx.rarity-legendary::after,
.card-inspector-rarity-fx.rarity-epic::after,
.card-reveal-rarity-fx.rarity-epic::after {
  display: none !important;
}

.card-inspector-rarity-fx.rarity-epic::before,
.card-reveal-rarity-fx.rarity-epic::before {
  inset: 18% 22% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(220, 125, 255, .18), rgba(160, 71, 250, .08) 40%, transparent 72%) !important;
  filter: blur(12px);
}

.card-inspector-rarity-fx.rarity-legendary::before,
.card-reveal-rarity-fx.rarity-legendary::before {
  inset: 16% 20% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 24%),
    radial-gradient(circle at 42% 44%, rgba(255,86,210,.12), transparent 36%),
    radial-gradient(circle at 58% 54%, rgba(79,224,255,.12), transparent 40%),
    radial-gradient(circle at 50% 52%, rgba(131,118,255,.10), transparent 42%) !important;
  filter: blur(16px) saturate(1.1);
  animation: epic-pulse-ring 3s ease-in-out infinite !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .40 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.46), rgba(255,255,255,.06) 12%, transparent 28%),
    linear-gradient(135deg,
      rgba(255, 66, 196, .08) 0%,
      rgba(255, 166, 77, .06) 16%,
      rgba(220, 255, 126, .06) 31%,
      rgba(88, 232, 255, .09) 49%,
      rgba(110, 128, 255, .10) 67%,
      rgba(255, 66, 196, .08) 100%) !important;
  background-size: 100% 100%, 160% 160% !important;
  background-position: center, calc((var(--card-shine-x) - 50%) * 1.4 + 50%) calc((var(--card-shine-y) - 50%) * 1.4 + 50%) !important;
  animation: none !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border,
.fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 8px rgba(255,82,210,.22),
    0 0 14px rgba(82,230,255,.18),
    0 0 20px rgba(117,122,255,.16) !important;
}

.card-inspector-card,
.card-catalog-card,
.card-book-slot .fourfun-card-shell,
.card-reveal-front {
  --card-shine-spread: 1;
}

.card-inspector-card .fourfun-card-holo,
.card-catalog-card .fourfun-card-holo,
.card-book-slot .fourfun-card-holo,
.card-reveal-front .fourfun-card-holo {
  background-size: 100% 100%, 160% 160% !important;
}

.card-catalog-card {
  width: min(246px, 100%) !important;
}

.card-catalog-card .fourfun-card-art {
  min-height: 136px !important;
}

.card-catalog-card .fourfun-card-copy p {
  font-size: 10px !important;
}

.card-catalog-card .fourfun-card-footer small,
.card-catalog-card .fourfun-card-quantity,
.card-catalog-card .fourfun-card-edition,
.card-catalog-card .fourfun-card-footer-center {
  display: none !important;
}

.card-catalog-card .fourfun-card-footer {
  grid-template-columns: auto 1fr auto !important;
}

@media (max-width: 980px) {
  .card-book-slot,
  .card-book-slot-empty {
    min-height: 242px !important;
  }
  .card-book-slot .fourfun-card-shell {
    max-width: 138px !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot,
  .card-book-slot-empty {
    min-height: 252px !important;
  }
  .card-book-slot .fourfun-card-shell {
    width: calc(100% - 8px) !important;
    max-width: 158px !important;
  }
  .card-catalog-card {
    width: min(178px, 100%) !important;
  }
}

.fourfun-card-art {
  position: relative;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  position: absolute !important;
  z-index: 6 !important;
  min-width: 40px !important;
  height: 17px !important;
  padding: 0 6px !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 58px !important;
  height: 18px !important;
}

.fourfun-card-header {
  padding: 7px 14px 6px 14px !important;
}

.fourfun-card-title {
  max-width: 100%;
}

.card-book-slot .fourfun-card-shell {
  width: calc(100% - 12px) !important;
  max-width: 162px !important;
}

.card-book-slot .fourfun-card-face,
.card-book-slot .fourfun-card-back {
  box-shadow: inherit;
}

.card-book-slot .fourfun-card-art {
  min-height: 136px !important;
  max-height: none !important;
}

.card-book-slot .fourfun-card-copy {
  min-height: 68px !important;
  padding: 7px 11px 6px !important;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 10.1px !important;
  line-height: 1.34 !important;
}

.card-book-slot .fourfun-card-footer small,
.card-book-slot .fourfun-card-footer-center small {
  font-size: 9.4px !important;
}

.card-book-slot .fourfun-card-number {
  font-size: 10px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  min-width: 40px !important;
  height: 17px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 58px !important;
  height: 18px !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .52 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.54), rgba(255,255,255,.08) 12%, transparent 28%),
    linear-gradient(135deg,
      rgba(255, 74, 198, .11) 0%,
      rgba(255, 174, 79, .09) 15%,
      rgba(225, 255, 130, .09) 30%,
      rgba(86, 232, 255, .13) 48%,
      rgba(114, 126, 255, .14) 66%,
      rgba(255, 74, 198, .11) 100%) !important;
  background-size: 100% 100%, 180% 180% !important;
  background-position: center, calc((var(--card-shine-x) - 50%) * 1.65 + 50%) calc((var(--card-shine-y) - 50%) * 1.65 + 50%) !important;
  mix-blend-mode: screen;
  filter: saturate(1.3) contrast(1.04);
}

.fourfun-card-face.rarity-legendary .fourfun-card-gloss,
.fourfun-card-back.rarity-legendary .fourfun-card-gloss {
  opacity: .78 !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border,
.fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 9px rgba(255,82,210,.24),
    0 0 16px rgba(82,230,255,.20),
    0 0 24px rgba(117,122,255,.18) !important;
}

@media (max-width: 980px) {
  .card-book-slot .fourfun-card-shell {
    max-width: 148px !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot .fourfun-card-shell {
    max-width: 160px !important;
  }
}

.card-book-slot .fourfun-card-shell {
  width: calc(100% - 10px) !important;
  max-width: 172px !important;
}

.card-book-slot .fourfun-card-face,
.card-book-slot .fourfun-card-back {
  min-height: 0 !important;
}

.card-book-slot .fourfun-card-header {
  min-height: 36px !important;
  padding: 8px 14px 7px 14px !important;
}

.card-book-slot .fourfun-card-title {
  font-size: 15px !important;
  line-height: 1.02 !important;
  letter-spacing: .02em !important;
}

.card-book-slot .fourfun-card-art {
  min-height: 128px !important;
  max-height: none !important;
  margin: 4px 8px 0 !important;
}

.card-book-slot .fourfun-card-art img {
  object-fit: contain !important;
  padding: 4px !important;
}

.card-book-slot .fourfun-card-copy {
  min-height: 68px !important;
  padding: 7px 11px 6px !important;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 10.2px !important;
  line-height: 1.34 !important;
  -webkit-line-clamp: 4 !important;
}

.card-book-slot .fourfun-card-footer {
  min-height: 28px !important;
  padding: 5px 10px 6px !important;
}

.card-book-slot .fourfun-card-number {
  font-size: 10px !important;
}

.card-book-slot .fourfun-card-footer small,
.card-book-slot .fourfun-card-footer-center small {
  font-size: 9.6px !important;
  line-height: 1.15 !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  min-width: 40px !important;
  height: 17px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 58px !important;
  height: 18px !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .68 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.70), rgba(255,255,255,.14) 12%, transparent 30%),
    linear-gradient(135deg,
      rgba(255, 78, 206, .16) 0%,
      rgba(255, 180, 84, .13) 16%,
      rgba(225, 255, 132, .12) 30%,
      rgba(88, 236, 255, .17) 48%,
      rgba(119, 130, 255, .19) 66%,
      rgba(255, 78, 206, .16) 100%) !important;
  background-size: 100% 100%, 190% 190% !important;
  background-position: center, calc((var(--card-shine-x) - 50%) * 1.95 + 50%) calc((var(--card-shine-y) - 50%) * 1.95 + 50%) !important;
  mix-blend-mode: screen;
  filter: saturate(1.45) contrast(1.06) brightness(1.02) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-gloss,
.fourfun-card-back.rarity-legendary .fourfun-card-gloss {
  opacity: .88 !important;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.08) 34%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.10) 58%, transparent 70%) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border,
.fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 12px rgba(255,82,210,.28),
    0 0 20px rgba(82,230,255,.24),
    0 0 28px rgba(117,122,255,.22) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-particles i {
  opacity: .92 !important;
  box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 18px rgba(255,86,210,.58),
    0 0 26px rgba(80,224,255,.56) !important;
}

@media (max-width: 980px) {
  .card-book-slot .fourfun-card-shell {
    max-width: 160px !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot .fourfun-card-shell {
    max-width: 166px !important;
  }
}

.card-book-shell {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(85, 59, 28, .12), rgba(45, 28, 10, .12)),
    linear-gradient(135deg, rgba(52, 38, 22, .92), rgba(20, 13, 8, .95));
}

.card-book-page {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 34%),
    repeating-linear-gradient(0deg, rgba(123, 91, 43, .030) 0 2px, rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(90deg, rgba(141, 108, 58, .022) 0 3px, rgba(0,0,0,0) 3px 11px),
    linear-gradient(180deg, rgba(245, 231, 199, .985), rgba(229, 211, 171, .972));
  box-shadow: inset 0 0 0 1px rgba(128, 91, 41, .16), inset 0 -16px 22px rgba(124, 84, 30, .08);
}

.card-book-slot,
.card-book-slot-empty {
  min-height: 262px !important;
  padding: 6px 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-book-slot::before,
.card-book-slot-empty::before,
.card-book-slot::after,
.card-book-slot-empty::after {
  display: none !important;
  content: none !important;
}

.card-book-slot .fourfun-card-shell,
.card-book-slot-empty .fourfun-card-shell {
  width: calc(100% - 8px) !important;
  max-width: 176px !important;
}

.card-book-slot .fourfun-card-face,
.card-book-slot .fourfun-card-back {
  min-height: unset !important;
}

.card-book-slot .fourfun-card-header {
  min-height: 36px !important;
  padding: 8px 14px 7px 14px !important;
}

.card-book-slot .fourfun-card-title {
  font-size: 15px !important;
  line-height: 1.02 !important;
  letter-spacing: .02em !important;
}

.card-book-slot .fourfun-card-art {
  margin: 4px 8px 0 !important;
  min-height: 128px !important;
  max-height: none !important;
}

.card-book-slot .fourfun-card-art img {
  object-fit: contain !important;
  padding: 4px !important;
}

.card-book-slot .fourfun-card-copy {
  min-height: 68px !important;
  padding: 7px 11px 6px !important;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 10.2px !important;
  line-height: 1.34 !important;
  -webkit-line-clamp: 4 !important;
}

.card-book-slot .fourfun-card-footer {
  min-height: 28px !important;
  padding: 5px 10px 6px !important;
}

.card-book-slot .fourfun-card-number {
  font-size: 10px !important;
}

.card-book-slot .fourfun-card-footer small,
.card-book-slot .fourfun-card-footer-center small {
  font-size: 9.6px !important;
  line-height: 1.15 !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  min-width: 40px !important;
  height: 17px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 58px !important;
  height: 18px !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo {
  opacity: .82 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.78), rgba(255,255,255,.14) 12%, transparent 28%),
    conic-gradient(from 180deg at var(--card-shine-x) var(--card-shine-y),
      rgba(255, 80, 204, .18),
      rgba(255, 182, 82, .15),
      rgba(227, 255, 130, .14),
      rgba(92, 236, 255, .20),
      rgba(120, 132, 255, .22),
      rgba(255, 80, 204, .18)),
    linear-gradient(135deg,
      rgba(255, 80, 204, .12) 0%,
      rgba(255, 182, 82, .10) 16%,
      rgba(227, 255, 130, .10) 30%,
      rgba(92, 236, 255, .14) 48%,
      rgba(120, 132, 255, .15) 66%,
      rgba(255, 80, 204, .12) 100%) !important;
  background-size: 100% 100%, 190% 190%, 180% 180% !important;
  background-position:
    center,
    calc((var(--card-shine-x) - 50%) * 2.2 + 50%) calc((var(--card-shine-y) - 50%) * 2.2 + 50%),
    calc((var(--card-shine-x) - 50%) * 1.8 + 50%) calc((var(--card-shine-y) - 50%) * 1.8 + 50%) !important;
  mix-blend-mode: screen;
  filter: saturate(1.55) contrast(1.08) brightness(1.03) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-gloss,
.fourfun-card-back.rarity-legendary .fourfun-card-gloss {
  opacity: .92 !important;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.10) 32%, rgba(255,255,255,.38) 46%, rgba(255,255,255,.12) 58%, transparent 72%) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-border,
.fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 14px rgba(255,82,210,.30),
    0 0 22px rgba(82,230,255,.26),
    0 0 32px rgba(117,122,255,.24) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-particles i {
  opacity: .95 !important;
  box-shadow:
    0 0 12px rgba(255,255,255,.98),
    0 0 22px rgba(255,86,210,.62),
    0 0 30px rgba(80,224,255,.60) !important;
}

@media (max-width: 980px) {
  .card-book-slot .fourfun-card-shell {
    max-width: 164px !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot,
  .card-book-slot-empty {
    min-height: 252px !important;
  }
  .card-book-slot .fourfun-card-shell {
    max-width: 166px !important;
  }
}

.card-book-slot {
  position: relative !important;
  min-height: 262px !important;
  display: grid !important;
  place-items: center !important;
}

.card-book-slot::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  width: min(164px, calc(100% - 18px)) !important;
  aspect-ratio: .705 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(173, 142, 90, .28) !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 247, 225, .18), rgba(213, 188, 143, .08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 12px 18px rgba(255,255,255,.06),
    inset 0 -10px 14px rgba(117, 86, 37, .06),
    0 6px 14px rgba(89, 60, 20, .08) !important;
  pointer-events: none !important;
}

.card-book-slot .fourfun-card-shell {
  position: relative !important;
  z-index: 2 !important;
  width: calc(100% - 26px) !important;
  max-width: 148px !important;
}

.card-book-slot .fourfun-card-header {
  min-height: 28px !important;
  padding: 6px 12px 4px 12px !important;
}

.card-book-slot .fourfun-card-title {
  font-size: 12px !important;
  line-height: 1.02 !important;
  letter-spacing: .015em !important;
  padding: 0 !important;
}

.card-book-slot .fourfun-card-art {
  margin: 3px 7px 0 !important;
  min-height: 112px !important;
  max-height: none !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 6px !important;
  right: 6px !important;
  min-width: 32px !important;
  height: 14px !important;
  padding: 0 5px !important;
  font-size: 5px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 48px !important;
  height: 15px !important;
}

.card-book-slot .fourfun-card-copy {
  min-height: 48px !important;
  padding: 5px 9px 4px !important;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 8.1px !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

.card-book-slot .fourfun-card-footer {
  min-height: 22px !important;
  padding: 4px 8px 5px !important;
}

.card-book-slot .fourfun-card-number {
  font-size: 8px !important;
}

.card-book-slot .fourfun-card-footer small,
.card-book-slot .fourfun-card-footer-center small {
  font-size: 7.4px !important;
  line-height: 1.1 !important;
}

.card-book-slot-empty {
  min-height: 262px !important;
  background: transparent !important;
}

.card-book-slot-empty::before,
.card-book-slot-empty::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 980px) {
  .card-book-slot::before {
    width: min(154px, calc(100% - 14px)) !important;
  }
  .card-book-slot .fourfun-card-shell {
    max-width: 140px !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot::before {
    width: min(170px, calc(100% - 14px)) !important;
  }
  .card-book-slot .fourfun-card-shell {
    max-width: 156px !important;
  }
}

.card-book-slot,
.card-book-slot-empty {
  position: relative !important;
  min-height: 276px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.card-book-slot::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  width: min(172px, calc(100% - 18px)) !important;
  aspect-ratio: .705 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(173, 142, 90, .26) !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,247,225,.16), rgba(213,188,143,.07)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 10px 16px rgba(255,255,255,.05),
    inset 0 -8px 12px rgba(117,86,37,.05),
    0 4px 10px rgba(89,60,20,.07) !important;
  pointer-events: none !important;
}

.card-book-slot .fourfun-card-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(168px, calc(100% - 22px)) !important;
  max-width: none !important;
}

.card-book-slot .fourfun-card-header {
  min-height: 31px !important;
  padding: 6px 12px 5px 12px !important;
}

.card-book-slot .fourfun-card-title {
  font-size: 12.5px !important;
  line-height: 1.02 !important;
}

.card-book-slot .fourfun-card-art {
  margin: 3px 7px 0 !important;
  min-height: 118px !important;
}

.card-book-slot .fourfun-card-copy {
  min-height: 52px !important;
  padding: 5px 9px 5px !important;
}

.card-book-slot .fourfun-card-copy p {
  font-size: 8.4px !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 3 !important;
}

.card-book-slot .fourfun-card-footer {
  min-height: 23px !important;
  padding: 4px 8px 5px !important;
}

.card-book-slot .fourfun-card-number {
  font-size: 8.2px !important;
}

.card-book-slot .fourfun-card-footer small,
.card-book-slot .fourfun-card-footer-center small {
  font-size: 7.6px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 5px !important;
  right: 5px !important;
  min-width: 28px !important;
  height: 12px !important;
  padding: 0 4px !important;
  font-size: 4.6px !important;
  letter-spacing: .06em !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal::before,
.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal::after {
  font-size: 4px !important;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 42px !important;
  height: 13px !important;
}

@media (max-width: 980px) {
  .card-book-slot,
  .card-book-slot-empty {
    min-height: 260px !important;
  }

  .card-book-slot::before {
    width: min(158px, calc(100% - 16px)) !important;
  }

  .card-book-slot .fourfun-card-shell {
    width: min(154px, calc(100% - 18px)) !important;
  }
}

@media (max-width: 620px) {
  .card-book-slot,
  .card-book-slot-empty {
    min-height: 270px !important;
  }

  .card-book-slot::before {
    width: min(170px, calc(100% - 14px)) !important;
  }

  .card-book-slot .fourfun-card-shell {
    width: min(164px, calc(100% - 12px)) !important;
  }
}

.fourfun-card-title,
.card-book-slot .fourfun-card-title {
  text-transform: none !important;
}

.card-book-slot .fourfun-card-title {
  font-size: 11.2px !important;
  line-height: 1.02 !important;
  letter-spacing: .01em !important;
}

.card-book-slot .fourfun-card-gloss {
  animation: fourfun-card-gloss 5.2s linear infinite !important;
}

.card-book-slot .fourfun-card-border {
  animation: album-card-border-breathe 3.4s ease-in-out infinite;
}

.card-book-slot .fourfun-card-particles {
  opacity: 1 !important;
}

.card-book-slot .fourfun-card-particles i {
  animation: fourfun-card-spark 3.2s ease-in-out infinite var(--card-delay) !important;
}

.card-book-slot .fourfun-card-shell {
  animation: album-card-idle-float 4.8s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform, filter;
}

.card-book-slot .fourfun-card-shell:hover {
  animation-play-state: running;
}

.card-book-slot .fourfun-card-face.rarity-epic .fourfun-card-border,
.card-book-slot .fourfun-card-back.rarity-epic .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 9px rgba(198,116,255,.24),
    0 0 18px rgba(140,86,255,.18) !important;
}

.card-book-slot .fourfun-card-face.rarity-legendary .fourfun-card-border,
.card-book-slot .fourfun-card-back.rarity-legendary .fourfun-card-back-frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 14px rgba(255,82,210,.30),
    0 0 22px rgba(82,230,255,.26),
    0 0 32px rgba(117,122,255,.24) !important;
}

@keyframes album-card-idle-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

@keyframes album-card-border-breathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.08) saturate(1.08); }
}

.fourfun-card-art {
  display: grid;
  place-items: center;
}

.fourfun-card-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  padding: 1px !important;
}

.card-inline-rarity-fx {
  position: absolute;
  inset: -10px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.card-inline-rarity-fx i {
  position: absolute;
  border-radius: 999px;
}

.card-inline-rarity-fx.rarity-epic::before,
.card-inline-rarity-fx.rarity-legendary::before {
  content: "";
  position: absolute;
  inset: 14% 18%;
  border-radius: 50%;
  pointer-events: none;
}

.card-inline-rarity-fx.rarity-epic::before {
  background: radial-gradient(circle, rgba(220,125,255,.18), rgba(160,71,250,.07) 42%, transparent 72%);
  filter: blur(12px);
  animation: epic-pulse-ring 2.5s ease-in-out infinite;
}

.card-inline-rarity-fx.rarity-legendary::before {
  background:
    radial-gradient(circle at 42% 44%, rgba(255,86,210,.13), transparent 34%),
    radial-gradient(circle at 58% 56%, rgba(79,224,255,.13), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(131,118,255,.11), transparent 40%);
  filter: blur(16px) saturate(1.1);
  animation: epic-pulse-ring 3s ease-in-out infinite;
}

.card-inline-rarity-fx.rarity-epic i {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #fff, #f2afff 50%, rgba(202,105,255,.18) 72%);
  box-shadow: 0 0 14px rgba(236,169,255,.95), 0 0 26px rgba(123,50,184,.68);
  animation: epic-sparkle 3.1s ease-in-out infinite;
}

.card-inline-rarity-fx.rarity-legendary i {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.96) 26%, rgba(255,85,212,.75) 50%, rgba(79,224,255,.7) 78%, transparent 86%);
  box-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 28px rgba(255,85,212,.74), 0 0 42px rgba(79,224,255,.72);
  animation: legendary-sparkle 4.2s linear infinite;
}

.card-inline-rarity-fx i:nth-child(1) {
  top: 10%;
  left: 10%;
}
.card-inline-rarity-fx i:nth-child(2) {
  top: 14%;
  right: 10%;
}
.card-inline-rarity-fx i:nth-child(3) {
  top: 78%;
  left: 12%;
}
.card-inline-rarity-fx i:nth-child(4) {
  top: 76%;
  right: 12%;
}
.card-inline-rarity-fx i:nth-child(5) {
  top: 48%;
  left: 4%;
}
.card-inline-rarity-fx i:nth-child(6) {
  top: 44%;
  right: 4%;
}

.card-book-slot {
  overflow: visible !important;
}

.card-book-slot .fourfun-card-shell {
  z-index: 2 !important;
}

.card-book-slot .card-inline-rarity-fx {
  inset: -14px;
  z-index: 1;
}

.fourfun-card-face.rarity-common .fourfun-card-holo,
.fourfun-card-back.rarity-common .fourfun-card-holo {
  opacity: .10 !important;
  background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.16) 48%, transparent 64%) !important;
  animation: common-soft-sheen 8s ease-in-out infinite !important;
}

.fourfun-card-face.rarity-common .fourfun-card-particles,
.fourfun-card-back.rarity-common .fourfun-card-particles { opacity: .06 !important; }

.fourfun-card-face.rarity-uncommon .fourfun-card-holo,
.fourfun-card-back.rarity-uncommon .fourfun-card-holo {
  opacity: .18 !important;
  background:
    linear-gradient(118deg, transparent 30%, rgba(128, 235, 173, .28) 46%, rgba(255,255,255,.18) 52%, transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(132, 255, 191, .10), transparent 60%) !important;
  animation: uncommon-leaf-shimmer 6.8s ease-in-out infinite !important;
}

.fourfun-card-face.rarity-uncommon .fourfun-card-particles,
.fourfun-card-back.rarity-uncommon .fourfun-card-particles { opacity: .16 !important; }
.fourfun-card-face.rarity-uncommon .fourfun-card-particles i {
  animation: uncommon-twinkle 4.4s ease-in-out infinite var(--card-delay) !important;
}

.fourfun-card-face.rarity-rare .fourfun-card-holo,
.fourfun-card-back.rarity-rare .fourfun-card-holo {
  opacity: .28 !important;
  background:
    linear-gradient(115deg, transparent 28%, rgba(95,190,255,.42) 44%, rgba(255,255,255,.24) 50%, transparent 66%),
    repeating-radial-gradient(circle at 50% 50%, rgba(104,170,255,.10) 0 2px, transparent 3px 10px) !important;
  animation: rare-starflow 5.5s linear infinite !important;
}

.fourfun-card-face.rarity-rare .fourfun-card-particles,
.fourfun-card-back.rarity-rare .fourfun-card-particles { opacity: .24 !important; }
.fourfun-card-face.rarity-rare .fourfun-card-particles i {
  animation: rare-glint 3.8s ease-in-out infinite var(--card-delay) !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-back.rarity-epic .fourfun-card-holo {
  opacity: .40 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.42), transparent 22%),
    conic-gradient(from 0deg at 50% 50%, rgba(214, 121, 255, .22), rgba(163, 92, 255, .12), rgba(255,255,255,.14), rgba(214, 121, 255, .22)) !important;
  animation: epic-arcane-wave 5.6s ease-in-out infinite !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-particles,
.fourfun-card-back.rarity-epic .fourfun-card-particles { opacity: .40 !important; }
.fourfun-card-face.rarity-epic .fourfun-card-particles i {
  animation: epic-sparkle 2.8s ease-in-out infinite var(--card-delay) !important;
}

.card-inline-rarity-fx.rarity-common { display: none !important; }

.card-inline-rarity-fx.rarity-uncommon::before {
  inset: 22% 26% !important;
  background: radial-gradient(circle, rgba(122,229,161,.10), rgba(122,229,161,.04) 40%, transparent 70%) !important;
  filter: blur(10px);
  animation: uncommon-twinkle 4.6s ease-in-out infinite !important;
}
.card-inline-rarity-fx.rarity-uncommon i {
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fff, rgba(145,255,198,.72) 58%, transparent 80%);
  box-shadow: 0 0 10px rgba(145,255,198,.66);
  animation: uncommon-twinkle 4.2s ease-in-out infinite;
}

.card-inline-rarity-fx.rarity-rare::before {
  inset: 18% 22% !important;
  background: radial-gradient(circle, rgba(115,183,255,.12), rgba(115,183,255,.05) 42%, transparent 70%) !important;
  filter: blur(12px);
  animation: rare-orbit 4.8s linear infinite !important;
}
.card-inline-rarity-fx.rarity-rare i {
  width: 7px; height: 7px;
  background: radial-gradient(circle, #fff, rgba(148,205,255,.78) 58%, transparent 80%);
  box-shadow: 0 0 12px rgba(115,183,255,.72);
  animation: rare-glint 3.4s ease-in-out infinite;
}

.card-inline-rarity-fx.rarity-epic::before {
  inset: 16% 20% !important;
  background: radial-gradient(circle, rgba(220,125,255,.18), rgba(160,71,250,.07) 42%, transparent 72%) !important;
  filter: blur(14px);
  animation: epic-pulse-ring 2.5s ease-in-out infinite !important;
}
.card-inline-rarity-fx.rarity-epic i {
  width: 9px; height: 9px;
  background: radial-gradient(circle, #fff, #f2afff 50%, rgba(202,105,255,.18) 72%);
  box-shadow: 0 0 14px rgba(236,169,255,.95), 0 0 26px rgba(123,50,184,.68);
  animation: epic-sparkle 3.1s ease-in-out infinite;
}

.card-inline-rarity-fx.rarity-legendary::before {
  inset: 12% 14% !important;
  background:
    radial-gradient(circle at 42% 44%, rgba(255,86,210,.16), transparent 34%),
    radial-gradient(circle at 58% 56%, rgba(79,224,255,.16), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(131,118,255,.14), transparent 40%) !important;
  filter: blur(18px) saturate(1.12);
  animation: legendary-aura-breathe 2.8s ease-in-out infinite !important;
}
.card-inline-rarity-fx.rarity-legendary i {
  width: 12px; height: 12px;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.96) 26%, rgba(255,85,212,.75) 50%, rgba(79,224,255,.7) 78%, transparent 86%);
  box-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 28px rgba(255,85,212,.74), 0 0 42px rgba(79,224,255,.72);
  animation: legendary-sparkle 3.2s linear infinite;
}

@keyframes common-soft-sheen {
  0%,100% {
    transform: translateX(-8%);
    opacity: .08;
  }
  50% {
    transform: translateX(8%);
    opacity: .14;
  }
}
@keyframes uncommon-leaf-shimmer {
  0%,100% {
    transform: translateX(-4%) translateY(0);
    opacity: .12;
  }
  50% {
    transform: translateX(4%) translateY(-1%);
    opacity: .22;
  }
}
@keyframes uncommon-twinkle {
  0%,100% {
    transform: scale(.75);
    opacity: .22;
  }
  50% {
    transform: scale(1.18);
    opacity: .9;
  }
}
@keyframes rare-starflow {
  0% { background-position: 0% 0%, 50% 50%; }
  100% { background-position: 120% 0%, 50% 50%; }
}
@keyframes rare-orbit {
  0% {
    transform: rotate(0deg) scale(.96);
    opacity: .32;
  }
  50% {
    transform: rotate(180deg) scale(1.04);
    opacity: .62;
  }
  100% {
    transform: rotate(360deg) scale(.96);
    opacity: .32;
  }
}
@keyframes rare-glint {
  0%,100% {
    transform: translateY(0) scale(.7);
    opacity: .24;
  }
  50% {
    transform: translateY(-12px) scale(1.18);
    opacity: 1;
  }
}
@keyframes epic-arcane-wave {
  0%,100% {
    transform: translateY(0);
    filter: hue-rotate(0deg) saturate(1.1);
  }
  50% {
    transform: translateY(-1px);
    filter: hue-rotate(12deg) saturate(1.24);
  }
}
@keyframes legendary-aura-breathe {
  0%,100% {
    transform: scale(.94);
    opacity: .46;
  }
  50% {
    transform: scale(1.08);
    opacity: .92;
  }
}

.fourfun-card-body {
  z-index: 2;
}

.card-rarity-fx {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  transform-style: preserve-3d;
}

.card-rarity-fx.is-inline { inset: -24px; }
.card-rarity-fx.is-stage { inset: 4%; }

.card-rarity-fx > i,
.card-rarity-fx-ring,
.card-rarity-fx-wisp {
  position: absolute;
  pointer-events: none;
}

.card-rarity-fx.rarity-common .card-rarity-fx-ring {
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(225, 229, 232, .12);
  box-shadow: 0 0 18px rgba(225, 229, 232, .10);
  animation: card-common-halo 4.8s ease-in-out infinite;
}
.card-rarity-fx.rarity-common .card-rarity-fx-wisp,
.card-rarity-fx.rarity-common > i { display: none; }

.card-rarity-fx.rarity-uncommon .card-rarity-fx-ring {
  inset: 18%;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(circle, rgba(105, 229, 151, .10), transparent 66%);
  filter: blur(10px);
  animation: card-uncommon-bloom 3.9s ease-in-out infinite;
}
.card-rarity-fx.rarity-uncommon .card-rarity-fx-wisp {
  left: 12%;
  bottom: 12%;
  width: 76%;
  height: 32%;
  border-bottom: 2px solid rgba(113, 232, 158, .20);
  border-radius: 50%;
  filter: blur(1px);
  animation: card-uncommon-wisp 4.6s ease-in-out infinite;
}
.card-rarity-fx.rarity-uncommon > i {
  width: 8px;
  height: 13px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, rgba(235,255,242,.95), rgba(103,230,151,.68));
  box-shadow: 0 0 11px rgba(103,230,151,.52);
  transform: rotate(38deg);
  animation: card-uncommon-leaf 4.8s ease-in-out infinite;
}
.card-rarity-fx.rarity-uncommon > i:nth-of-type(1) {
  left: 10%;
  bottom: 13%;
}
.card-rarity-fx.rarity-uncommon > i:nth-of-type(2) {
  right: 12%;
  bottom: 22%;
  animation-delay: -.8s;
}
.card-rarity-fx.rarity-uncommon > i:nth-of-type(3) {
  left: 19%;
  top: 30%;
  animation-delay: -1.6s;
}
.card-rarity-fx.rarity-uncommon > i:nth-of-type(4) {
  right: 18%;
  top: 18%;
  animation-delay: -2.4s;
}
.card-rarity-fx.rarity-uncommon > i:nth-of-type(n+5) { display: none; }

.card-rarity-fx.rarity-rare .card-rarity-fx-ring {
  inset: 11%;
  border-radius: 50%;
  border: 1px solid rgba(101, 181, 255, .28);
  border-left-color: transparent;
  border-right-color: rgba(185, 225, 255, .46);
  box-shadow: 0 0 20px rgba(88, 169, 255, .20), inset 0 0 14px rgba(88, 169, 255, .10);
  animation: card-rare-orbit 5.2s linear infinite;
}
.card-rarity-fx.rarity-rare .card-rarity-fx-wisp {
  inset: 23%;
  border-radius: 50%;
  border: 1px dashed rgba(127, 196, 255, .18);
  animation: card-rare-orbit-reverse 7.4s linear infinite;
}
.card-rarity-fx.rarity-rare > i {
  width: 7px;
  height: 7px;
  background: #f5fbff;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  box-shadow: 0 0 13px rgba(112, 190, 255, .92);
  animation: card-rare-star 2.7s ease-in-out infinite;
}
.card-rarity-fx.rarity-rare > i:nth-of-type(1) {
  left: 8%;
  top: 18%;
}
.card-rarity-fx.rarity-rare > i:nth-of-type(2) {
  right: 8%;
  top: 34%;
  animation-delay: -.55s;
}
.card-rarity-fx.rarity-rare > i:nth-of-type(3) {
  left: 15%;
  bottom: 16%;
  animation-delay: -1.1s;
}
.card-rarity-fx.rarity-rare > i:nth-of-type(4) {
  right: 17%;
  bottom: 12%;
  animation-delay: -1.65s;
}
.card-rarity-fx.rarity-rare > i:nth-of-type(5) {
  left: 46%;
  top: 4%;
  animation-delay: -2.2s;
}
.card-rarity-fx.rarity-rare > i:nth-of-type(n+6) { display: none; }

.card-rarity-fx.rarity-epic .card-rarity-fx-ring {
  inset: 7%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(222,142,255,.36) 0 4deg, transparent 4deg 18deg),
    radial-gradient(circle, transparent 55%, rgba(174, 86, 255, .14) 57%, transparent 68%);
  mask: radial-gradient(circle, transparent 0 53%, #000 55% 62%, transparent 64%);
  filter: drop-shadow(0 0 12px rgba(194, 111, 255, .42));
  animation: card-epic-runes 7s linear infinite;
}
.card-rarity-fx.rarity-epic .card-rarity-fx-wisp {
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 58%;
  background:
    radial-gradient(ellipse at 22% 100%, rgba(189, 104, 255, .30), transparent 52%),
    radial-gradient(ellipse at 78% 100%, rgba(122, 76, 255, .26), transparent 52%);
  filter: blur(12px);
  animation: card-epic-wisps 3.1s ease-in-out infinite;
}
.card-rarity-fx.rarity-epic > i {
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #fff, #dd9cff 48%, #8c52ff);
  clip-path: polygon(50% 0, 68% 32%, 100% 50%, 68% 68%, 50% 100%, 32% 68%, 0 50%, 32% 32%);
  box-shadow: 0 0 14px rgba(228, 163, 255, .94), 0 0 28px rgba(136, 70, 214, .64);
  animation: card-epic-burst 2.9s ease-in-out infinite;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(1) {
  left: 5%;
  top: 18%;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(2) {
  right: 5%;
  top: 28%;
  animation-delay: -.45s;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(3) {
  left: 11%;
  bottom: 20%;
  animation-delay: -.9s;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(4) {
  right: 12%;
  bottom: 14%;
  animation-delay: -1.35s;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(5) {
  left: 47%;
  top: 0;
  animation-delay: -1.8s;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(6) {
  left: 48%;
  bottom: 0;
  animation-delay: -2.25s;
}
.card-rarity-fx.rarity-epic > i:nth-of-type(n+7) { display: none; }

.card-rarity-fx.rarity-legendary .card-rarity-fx-ring {
  inset: -1%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 8%, rgba(255,72,199,.44) 12%, transparent 20%,
      rgba(67,224,255,.44) 30%, transparent 40%,
      rgba(126,255,180,.38) 50%, transparent 60%,
      rgba(126,102,255,.44) 72%, transparent 82%,
      rgba(255,72,199,.44) 92%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 58%, #000 61% 66%, transparent 69%);
  filter: blur(.5px) drop-shadow(0 0 15px rgba(255,80,210,.38)) drop-shadow(0 0 22px rgba(70,224,255,.32));
  animation: card-legendary-ring 4.2s linear infinite;
}
.card-rarity-fx.rarity-legendary .card-rarity-fx-wisp {
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,72,199,.24), transparent 38%),
    radial-gradient(circle at 68% 42%, rgba(67,224,255,.24), transparent 38%),
    radial-gradient(circle at 50% 68%, rgba(126,102,255,.22), transparent 42%);
  filter: blur(16px) saturate(1.35);
  animation: card-legendary-aura 2.8s ease-in-out infinite;
}
.card-rarity-fx.rarity-legendary::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.20);
  box-shadow: 0 0 14px rgba(255,255,255,.14);
  animation: card-legendary-ring-reverse 6.3s linear infinite;
}
.card-rarity-fx.rarity-legendary > i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(255,255,255,.96) 20%, rgba(255,82,208,.78) 48%, rgba(69,224,255,.74) 74%, transparent 84%);
  box-shadow: 0 0 16px rgba(255,255,255,.96), 0 0 30px rgba(255,82,208,.74), 0 0 44px rgba(69,224,255,.68);
  animation: card-legendary-comet 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.card-rarity-fx.rarity-legendary > i::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 4px;
  width: 28px;
  height: 2px;
  transform: rotate(-28deg);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72));
  filter: blur(.5px);
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(1) {
  left: 2%;
  top: 12%;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(2) {
  right: 1%;
  top: 21%;
  animation-delay: -.42s;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(3) {
  left: 5%;
  bottom: 18%;
  animation-delay: -.84s;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(4) {
  right: 4%;
  bottom: 9%;
  animation-delay: -1.26s;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(5) {
  left: 44%;
  top: -4%;
  animation-delay: -1.68s;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(6) {
  left: 48%;
  bottom: -5%;
  animation-delay: -2.1s;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(7) {
  left: -1%;
  top: 48%;
  animation-delay: -2.52s;
}
.card-rarity-fx.rarity-legendary > i:nth-of-type(8) {
  right: -2%;
  top: 51%;
  animation-delay: -2.94s;
}

@keyframes card-common-halo {
  0%,100% {
    transform: scale(.94);
    opacity: .25;
  }
  50% {
    transform: scale(1.03);
    opacity: .48;
  }
}
@keyframes card-uncommon-bloom {
  0%,100% {
    transform: scale(.94);
    opacity: .40;
  }
  50% {
    transform: scale(1.06);
    opacity: .76;
  }
}
@keyframes card-uncommon-wisp {
  0%,100% {
    transform: translateY(3px) scaleX(.94);
    opacity: .22;
  }
  50% {
    transform: translateY(-5px) scaleX(1.06);
    opacity: .62;
  }
}
@keyframes card-uncommon-leaf {
  0% {
    transform: translateY(8px) rotate(20deg) scale(.65);
    opacity: 0;
  }
  25% { opacity: .88; }
  75% { opacity: .72; }
  100% {
    transform: translateY(-30px) rotate(150deg) scale(1.05);
    opacity: 0;
  }
}
@keyframes card-rare-orbit { to { transform: rotate(360deg); } }
@keyframes card-rare-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes card-rare-star {
  0%,100% {
    transform: scale(.55) rotate(0deg);
    opacity: .25;
  }
  50% {
    transform: scale(1.4) rotate(45deg);
    opacity: 1;
  }
}
@keyframes card-epic-runes { to { transform: rotate(360deg); } }
@keyframes card-epic-wisps {
  0%,100% {
    transform: translateY(5px) scaleX(.94);
    opacity: .36;
  }
  50% {
    transform: translateY(-7px) scaleX(1.06);
    opacity: .82;
  }
}
@keyframes card-epic-burst {
  0%,100% {
    transform: scale(.45) rotate(0deg);
    opacity: .15;
  }
  45% {
    transform: scale(1.55) rotate(35deg);
    opacity: 1;
  }
  70% {
    transform: scale(.9) rotate(55deg);
    opacity: .52;
  }
}
@keyframes card-legendary-ring { to { transform: rotate(360deg); filter: hue-rotate(360deg) blur(.5px) drop-shadow(0 0 15px rgba(255,80,210,.38)) drop-shadow(0 0 22px rgba(70,224,255,.32)); } }
@keyframes card-legendary-ring-reverse { to { transform: rotate(-360deg); } }
@keyframes card-legendary-aura {
  0%,100% {
    transform: scale(.92);
    opacity: .50;
    filter: blur(16px) hue-rotate(0deg) saturate(1.3);
  }
  50% {
    transform: scale(1.10);
    opacity: .98;
    filter: blur(18px) hue-rotate(180deg) saturate(1.5);
  }
}
@keyframes card-legendary-comet {
  0%,100% {
    transform: translate3d(0,0,0) scale(.45);
    opacity: .12;
    filter: hue-rotate(0deg);
  }
  45% {
    transform: translate3d(8px,-14px,0) scale(1.35);
    opacity: 1;
    filter: hue-rotate(160deg);
  }
  72% {
    transform: translate3d(-4px,-7px,0) scale(.85);
    opacity: .58;
    filter: hue-rotate(260deg);
  }
}

.card-catalog-backdrop,
.card-catalog-modal,
.card-catalog-grid {
  overflow-x: hidden !important;
}

.card-catalog-grid,
.card-catalog-card-wrap,
.card-catalog-card,
.card-book-slot,
.fourfun-card-shell {
  overflow: visible !important;
}

.card-inline-rarity-fx {
  inset: -12px !important;
  z-index: 3 !important;
}

.card-inline-rarity-fx.rarity-uncommon,
.card-inline-rarity-fx.rarity-rare,
.card-inline-rarity-fx.rarity-epic {
  inset: -14px !important;
}

.fourfun-card-rarity-seal,
.fourfun-card-copy,
.fourfun-card-copy p,
.fourfun-card-footer {
  position: relative;
  z-index: 6 !important;
}

.fourfun-card-art,
.fourfun-card-art img {
  position: relative;
  z-index: 4;
}

.card-inline-rarity-fx.rarity-uncommon i:nth-child(1),
.card-inline-rarity-fx.rarity-rare i:nth-child(1),
.card-inline-rarity-fx.rarity-epic i:nth-child(1) {
  top: 6%;
  left: 4%;
}

.card-inline-rarity-fx.rarity-uncommon i:nth-child(2),
.card-inline-rarity-fx.rarity-rare i:nth-child(2),
.card-inline-rarity-fx.rarity-epic i:nth-child(2) {
  top: 8%;
  right: 4%;
}

.card-inline-rarity-fx.rarity-uncommon i:nth-child(3),
.card-inline-rarity-fx.rarity-rare i:nth-child(3),
.card-inline-rarity-fx.rarity-epic i:nth-child(3) {
  bottom: 8%;
  left: 6%;
  top: auto;
}

.card-inline-rarity-fx.rarity-uncommon i:nth-child(4),
.card-inline-rarity-fx.rarity-rare i:nth-child(4),
.card-inline-rarity-fx.rarity-epic i:nth-child(4) {
  bottom: 8%;
  right: 6%;
  top: auto;
}

.card-inline-rarity-fx.rarity-uncommon i:nth-child(5),
.card-inline-rarity-fx.rarity-rare i:nth-child(5),
.card-inline-rarity-fx.rarity-epic i:nth-child(5) {
  top: 46%;
  left: -1%;
}

.card-inline-rarity-fx.rarity-uncommon i:nth-child(6),
.card-inline-rarity-fx.rarity-rare i:nth-child(6),
.card-inline-rarity-fx.rarity-epic i:nth-child(6) {
  top: 42%;
  right: -1%;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 40 !important;
  isolation: isolate;
}

.fourfun-card-copy {
  z-index: 35 !important;
  isolation: isolate;
  overflow: hidden !important;
  background:
    linear-gradient(180deg,
      rgba(var(--card-rarity-deep), .96),
      rgba(7, 10, 8, .985)) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--card-rarity), .14),
    0 -1px 0 rgba(0, 0, 0, .32);
}

.fourfun-card-copy p {
  position: relative;
  z-index: 2 !important;
}

.card-catalog-card-wrap,
.card-book-slot,
.card-catalog-card-wrap .fourfun-card-shell,
.card-book-slot .fourfun-card-shell {
  overflow: visible !important;
}

.card-catalog-card-wrap .card-rarity-fx.is-inline,
.card-book-slot .card-rarity-fx.is-inline {
  inset: -24px !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.card-catalog-card-wrap .fourfun-card-body,
.card-book-slot .fourfun-card-body {
  z-index: 3 !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-uncommon .card-rarity-fx-ring,
.card-book-slot .card-rarity-fx.rarity-uncommon .card-rarity-fx-ring {
  inset: 3% !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-uncommon .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.rarity-uncommon .card-rarity-fx-wisp {
  left: 2% !important;
  right: 2% !important;
  width: auto !important;
  bottom: 3% !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-uncommon > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.rarity-uncommon > i:nth-of-type(1) {
  left: 1% !important;
  bottom: 15% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-uncommon > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.rarity-uncommon > i:nth-of-type(2) {
  right: 1% !important;
  bottom: 24% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-uncommon > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.rarity-uncommon > i:nth-of-type(3) {
  left: 3% !important;
  top: 24% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-uncommon > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.rarity-uncommon > i:nth-of-type(4) {
  right: 3% !important;
  top: 14% !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-rare .card-rarity-fx-ring,
.card-book-slot .card-rarity-fx.rarity-rare .card-rarity-fx-ring {
  inset: 1.5% !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-rare .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.rarity-rare .card-rarity-fx-wisp {
  inset: 8% !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-rare > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.rarity-rare > i:nth-of-type(1) {
  left: 1% !important;
  top: 13% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-rare > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.rarity-rare > i:nth-of-type(2) {
  right: 1% !important;
  top: 31% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-rare > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.rarity-rare > i:nth-of-type(3) {
  left: 3% !important;
  bottom: 13% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-rare > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.rarity-rare > i:nth-of-type(4) {
  right: 4% !important;
  bottom: 9% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-rare > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.rarity-rare > i:nth-of-type(5) {
  left: 47% !important;
  top: 0 !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-epic .card-rarity-fx-ring,
.card-book-slot .card-rarity-fx.rarity-epic .card-rarity-fx-ring {
  inset: 0 !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-epic .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.rarity-epic .card-rarity-fx-wisp {
  left: 4% !important;
  right: 4% !important;
  bottom: 0 !important;
  height: 60% !important;
}

.card-catalog-card-wrap .card-rarity-fx.rarity-epic > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.rarity-epic > i:nth-of-type(1) {
  left: 0 !important;
  top: 16% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-epic > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.rarity-epic > i:nth-of-type(2) {
  right: 0 !important;
  top: 26% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-epic > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.rarity-epic > i:nth-of-type(3) {
  left: 2% !important;
  bottom: 17% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-epic > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.rarity-epic > i:nth-of-type(4) {
  right: 2% !important;
  bottom: 11% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-epic > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.rarity-epic > i:nth-of-type(5) {
  left: 47% !important;
  top: -1% !important;
}
.card-catalog-card-wrap .card-rarity-fx.rarity-epic > i:nth-of-type(6),
.card-book-slot .card-rarity-fx.rarity-epic > i:nth-of-type(6) {
  left: 48% !important;
  bottom: -1% !important;
}

.card-rarity-fx.is-inline { z-index: 5 !important; }
.fourfun-card-body {
  position: relative;
  z-index: 2 !important;
}
.fourfun-card-header,
.fourfun-card-title,
.fourfun-card-rarity-seal,
.fourfun-card-copy,
.fourfun-card-copy p,
.fourfun-card-footer,
.fourfun-card-quantity {
  position: relative;
  z-index: 9 !important;
}
.fourfun-card-art,
.fourfun-card-art img,
.fourfun-card-art-vignette {
  position: relative;
  z-index: 4 !important;
}
.fourfun-card-border,
.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain,
.fourfun-card-particles { z-index: 4 !important; }

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 6px !important;
  right: 26px !important;
  min-width: 24px !important;
  height: 11px !important;
  line-height: 11px !important;
  padding: 0 4px !important;
  font-size: 4.4px !important;
  letter-spacing: .05em !important;
}
.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 36px !important;
  height: 11px !important;
}
.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal::before,
.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal::after {
  font-size: 3.8px !important;
}
.card-book-slot .fourfun-card-quantity {
  position: absolute !important;
  top: 7px !important;
  right: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffe7a7 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(0,0,0,.45), 0 0 12px rgba(255,222,132,.28) !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-face:not(.rarity-legendary),
.fourfun-card-body.has-custom-accent .fourfun-card-back:not(.rarity-legendary) {
  border-color: color-mix(in srgb, var(--card-accent) 46%, rgba(255,255,255,.18)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.36), 0 0 22px color-mix(in srgb, var(--card-accent) 18%, transparent) !important;
}
.fourfun-card-body.has-custom-accent .fourfun-card-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 28%, rgba(14,18,24,.96)), rgba(12,16,22,.92)) !important;
}
.fourfun-card-body.has-custom-accent .fourfun-card-copy {
  background: linear-gradient(180deg, rgba(11,14,18,.78), color-mix(in srgb, var(--card-accent) 16%, rgba(9,12,16,.78))) !important;
  border-top: 1px solid color-mix(in srgb, var(--card-accent) 38%, rgba(255,255,255,.12)) !important;
}
.fourfun-card-body.has-custom-accent .fourfun-card-border i,
.fourfun-card-body.has-custom-accent .fourfun-card-back-frame i {
  border-color: color-mix(in srgb, var(--card-accent) 62%, rgba(255,255,255,.22)) !important;
}
.fourfun-card-body.has-custom-accent .fourfun-card-particles i {
  box-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 18px color-mix(in srgb, var(--card-accent) 56%, transparent) !important;
}
.fourfun-card-body.has-custom-accent .fourfun-card-holo {
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.30), transparent 22%),
    linear-gradient(130deg, transparent 28%, color-mix(in srgb, var(--card-accent) 26%, white 10%) 48%, transparent 68%) !important;
}

.card-rarity-fx.has-custom-accent:not(.rarity-legendary) .card-rarity-fx-ring {
  border-color: color-mix(in srgb, var(--card-accent) 60%, rgba(255,255,255,.18)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 28%, transparent), inset 0 0 12px color-mix(in srgb, var(--card-accent) 14%, transparent) !important;
}
.card-rarity-fx.has-custom-accent:not(.rarity-legendary) .card-rarity-fx-wisp {
  border-color: color-mix(in srgb, var(--card-accent) 54%, rgba(255,255,255,.16)) !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 66%) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 20%, transparent) !important;
}
.card-rarity-fx.has-custom-accent:not(.rarity-legendary) > i {
  box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 58%, transparent), 0 0 22px color-mix(in srgb, var(--card-accent) 34%, transparent) !important;
}
.card-rarity-fx.has-custom-accent.rarity-uncommon > i {
  background: linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, var(--card-accent) 82%, white 18%)) !important;
}
.card-rarity-fx.has-custom-accent.rarity-rare > i,
.card-rarity-fx.has-custom-accent.rarity-epic > i {
  background: radial-gradient(circle, #fff, color-mix(in srgb, var(--card-accent) 76%, white 24%) 56%, transparent 80%) !important;
}

.fourfun-card-shell > .fourfun-card-body,
.card-inspector-card > .fourfun-card-body,
.card-reveal-front > .fourfun-card-body {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.fourfun-card-face,
.fourfun-card-back {
  visibility: visible !important;
  opacity: 1 !important;
}

.card-rarity-fx.is-inline {
  z-index: 1 !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
}

.fourfun-card-quantity {
  position: absolute !important;
}

.card-book-slot .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-face:not(.rarity-legendary),
.fourfun-card-body.has-secondary-accent .fourfun-card-back:not(.rarity-legendary) {
  border-color: color-mix(in srgb, var(--card-secondary) 78%, white 12%) !important;
  background:
    radial-gradient(circle at 23% 9%, color-mix(in srgb, var(--card-secondary) 24%, transparent), transparent 31%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--card-secondary) 22%, rgba(17, 23, 19, .99)),
      color-mix(in srgb, var(--card-secondary) 10%, rgba(8, 12, 10, .99))) !important;
  box-shadow:
    0 18px 35px rgba(0, 0, 0, .46),
    0 0 25px color-mix(in srgb, var(--card-secondary) 24%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--card-secondary) 42%, rgba(255,255,255,.12)),
    inset 0 -18px 30px rgba(0, 0, 0, .38) !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-border:not(.rarity-legendary) {
  border-color: color-mix(in srgb, var(--card-secondary) 68%, rgba(255,255,255,.18)) !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-border::before,
.fourfun-card-body.has-secondary-accent .fourfun-card-border::after {
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--card-secondary) 88%, white 8%),
    transparent) !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-border i,
.fourfun-card-body.has-secondary-accent .fourfun-card-back-frame i {
  border-color: color-mix(in srgb, var(--card-secondary) 78%, rgba(255,255,255,.18)) !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-art {
  border-color: color-mix(in srgb, var(--card-secondary) 72%, rgba(255,255,255,.16)) !important;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, .54),
    0 0 15px color-mix(in srgb, var(--card-secondary) 25%, transparent) !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-footer {
  border-top-color: color-mix(in srgb, var(--card-secondary) 68%, rgba(255,255,255,.12)) !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--card-secondary) 84%, black 24%),
    color-mix(in srgb, var(--card-secondary) 66%, rgba(12,16,14,.92)),
    color-mix(in srgb, var(--card-secondary) 84%, black 24%)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--card-secondary) 36%, rgba(255,255,255,.12)),
    0 -1px 0 rgba(0,0,0,.32) !important;
}

.fourfun-card-body.has-secondary-accent .fourfun-card-footer b,
.fourfun-card-body.has-secondary-accent .fourfun-card-number,
.fourfun-card-body.has-secondary-accent .fourfun-card-edition {
  color: color-mix(in srgb, var(--card-secondary) 72%, white 28%) !important;
  text-shadow: 0 0 9px color-mix(in srgb, var(--card-secondary) 62%, transparent) !important;
}

.card-inspector-stage {
  --fourfun-inspector-card-width: min(320px, 62vw);
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

.card-inspector-stage > .card-inspector-card {
  width: var(--fourfun-inspector-card-width) !important;
  position: relative !important;
  z-index: 3 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--fourfun-inspector-card-width) + 72px) !important;
  height: auto !important;
  aspect-ratio: .705 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.card-inspector-stage > .card-inspector-aura {
  z-index: 0 !important;
}

@media (max-width: 620px) {
  .card-inspector-stage {
    --fourfun-inspector-card-width: min(280px, 72vw);
  }

  .card-inspector-stage > .card-rarity-fx.is-stage {
    width: calc(var(--fourfun-inspector-card-width) + 56px) !important;
  }
}

.card-rarity-fx.is-edge-overlay {
  z-index: 4 !important;
  pointer-events: none !important;
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 8% 76%, 8% 50%;
  -webkit-mask-position: left 12%, right 38%;
  mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  mask-repeat: no-repeat;
  mask-size: 8% 76%, 8% 50%;
  mask-position: left 12%, right 38%;
}

.fourfun-card-shell > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  z-index: 1 !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 4 !important;
}

.card-inspector,
.card-inspector-stage {
  overflow: visible !important;
}

.card-inspector-stage {
  isolation: isolate !important;
}

.card-inspector-stage > .card-inspector-card {
  z-index: 3 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage {
  width: calc(var(--fourfun-inspector-card-width) + 104px) !important;
  z-index: 1 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  z-index: 5 !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18)),
    var(--card-accent) !important;
  border-bottom-color: color-mix(in srgb, var(--card-accent) 78%, black 12%) !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-copy {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.20)),
    var(--card-accent) !important;
  border-top-color: color-mix(in srgb, var(--card-accent) 82%, black 10%) !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-title,
.fourfun-card-body.has-custom-accent .fourfun-card-copy p {
  color: var(--card-accent-ink, #fff7df) !important;
  text-shadow:
    0 1px 1px color-mix(in srgb, var(--card-accent-ink, #fff7df) 18%, transparent),
    0 0 8px rgba(0,0,0,.18) !important;
}

.card-rarity-fx.has-custom-accent.rarity-epic .card-rarity-fx-ring {
  background:
    repeating-conic-gradient(
      from 0deg,
      color-mix(in srgb, var(--card-accent) 86%, white 14%) 0 4deg,
      transparent 4deg 18deg
    ),
    radial-gradient(
      circle,
      transparent 55%,
      color-mix(in srgb, var(--card-accent) 34%, transparent) 57%,
      transparent 68%
    ) !important;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--card-accent) 58%, transparent)) !important;
}

.card-rarity-fx.has-custom-accent.rarity-epic .card-rarity-fx-wisp {
  background:
    radial-gradient(ellipse at 22% 100%, color-mix(in srgb, var(--card-accent) 42%, transparent), transparent 52%),
    radial-gradient(ellipse at 78% 100%, color-mix(in srgb, var(--card-accent) 32%, transparent), transparent 52%) !important;
}

.card-rarity-fx.has-custom-accent.rarity-epic > i {
  background: linear-gradient(
    135deg,
    #fff,
    color-mix(in srgb, var(--card-accent) 74%, white 26%) 48%,
    color-mix(in srgb, var(--card-accent) 86%, black 14%)
  ) !important;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--card-accent) 64%, white 18%),
    0 0 28px color-mix(in srgb, var(--card-accent) 54%, transparent) !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-back.rarity-epic .fourfun-card-holo {
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.45), transparent 22%),
    conic-gradient(
      from 0deg at 50% 50%,
      color-mix(in srgb, var(--card-accent) 34%, transparent),
      color-mix(in srgb, var(--card-accent) 18%, transparent),
      rgba(255,255,255,.14),
      color-mix(in srgb, var(--card-accent) 34%, transparent)
    ) !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-header,
.fourfun-card-face.rarity-legendary .fourfun-card-footer {
  position: relative !important;
  z-index: 6 !important;
  overflow: hidden !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-face.rarity-legendary .fourfun-card-gloss {
  z-index: 8 !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-title,
.fourfun-card-face.rarity-legendary .fourfun-card-footer-left,
.fourfun-card-face.rarity-legendary .fourfun-card-footer-center,
.fourfun-card-face.rarity-legendary .fourfun-card-footer-right,
.fourfun-card-face.rarity-legendary .fourfun-card-rarity-seal,
.fourfun-card-face.rarity-legendary .fourfun-card-copy,
.fourfun-card-face.rarity-legendary .fourfun-card-copy p {
  position: relative !important;
  z-index: 10 !important;
}

.fourfun-card-quantity,
.card-catalog-card .fourfun-card-quantity,
.card-reveal-front .fourfun-card-quantity,
.card-inspector-card .fourfun-card-quantity,
.card-pack-complete-grid .fourfun-card-quantity {
  display: block !important;
  position: absolute !important;
  top: 7px !important;
  right: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffe7a7 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.84), 0 0 11px rgba(255,222,132,.34) !important;
  z-index: 14 !important;
}

.card-pack-wrapper {
  width: min(390px, 82vw) !important;
}

.card-pack-front {
  grid-template-rows: auto auto minmax(210px, 1fr) auto !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  padding: 54px 24px 24px !important;
  gap: 5px !important;
}

.card-pack-front img {
  width: 88% !important;
  height: 100% !important;
  max-height: 58% !important;
  min-height: 190px !important;
  justify-self: center !important;
  align-self: center !important;
  object-fit: contain !important;
  object-position: center !important;
}

.card-pack-front strong {
  font-size: 48px !important;
}

.card-reveal-heading-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(420px, 80vw);
  margin: 2px auto 4px;
  color: rgb(var(--opening-rarity));
}

.card-reveal-heading-ornament i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--opening-rarity), .72));
  box-shadow: 0 0 9px rgba(var(--opening-rarity), .32);
}

.card-reveal-heading-ornament i:last-child {
  transform: scaleX(-1);
}

.card-reveal-heading-ornament span {
  font-size: 18px;
  text-shadow: 0 0 14px rgba(var(--opening-rarity), .72);
  animation: card-pack-heading-star 2.2s ease-in-out infinite;
}

.card-reveal-card-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(410px, 86vw);
  min-height: 510px;
  isolation: isolate;
}

.card-reveal-card-wrap > .card-rarity-fx.is-stage {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(390px, 84vw) !important;
  aspect-ratio: .705 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.card-reveal-card-wrap > .card-rarity-fx.is-stage.is-edge-overlay {
  z-index: 5 !important;
}

.card-reveal-stack {
  position: relative !important;
  z-index: 3 !important;
}

.card-reveal-stack:disabled {
  cursor: wait !important;
}

.card-reveal-suspense {
  position: absolute;
  inset: 10% 8%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}

.card-reveal-card-wrap.is-revealing .card-reveal-suspense {
  opacity: 1;
}

.card-reveal-suspense > i {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(var(--opening-rarity), .42);
  border-radius: 50%;
  animation: card-reveal-suspense-ring var(--card-pack-reveal-charge-duration, .72s) ease-out infinite;
}

.card-reveal-suspense > i:nth-child(2) {
  inset: 18%;
  animation-delay: -.24s;
}

.card-reveal-suspense > i:nth-child(3) {
  inset: 28%;
  animation-delay: -.48s;
}

.card-reveal-suspense > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff5ce;
  font-size: 34px;
  text-shadow: 0 0 18px rgba(var(--opening-rarity), .96), 0 0 38px rgba(var(--opening-rarity), .65);
  animation: card-reveal-suspense-star var(--card-pack-reveal-charge-duration, .72s) ease-in-out infinite;
}

.card-reveal-stack.is-revealing .card-reveal-back {
  animation: card-reveal-back-charge var(--card-pack-reveal-charge-duration, .72s) ease-in-out both;
}

.card-reveal-back span {
  max-width: 82%;
  text-align: center;
  font-size: 34px !important;
  line-height: .94;
}

.card-pack-complete-celebration {
  position: relative;
  width: 100%;
  min-height: 430px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.card-pack-complete-grid {
  position: relative;
  z-index: 4;
}

.card-completion-fireworks {
  position: absolute;
  inset: -8% -3%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.card-completion-fireworks > span {
  position: absolute;
  width: 170px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--opening-rarity), .88) 0 2deg, transparent 2deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 35%, #000 37% 39%, transparent 41% 100%);
  mask: radial-gradient(circle, transparent 0 35%, #000 37% 39%, transparent 41% 100%);
  filter: drop-shadow(0 0 12px rgba(var(--opening-rarity), .58));
  animation: card-completion-burst var(--card-pack-completion-burst-duration, 3.2s) ease-in-out infinite;
}

.card-completion-fireworks > span:nth-child(1) {
  left: 4%;
  top: 8%;
}
.card-completion-fireworks > span:nth-child(2) {
  right: 4%;
  top: 15%;
  animation-delay: -1.55s;
}

.card-completion-fireworks > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff7cf;
  box-shadow: 0 0 12px rgba(var(--opening-rarity), .92), 0 0 24px rgba(var(--opening-rarity), .52);
  animation: card-completion-confetti var(--card-pack-completion-confetti-duration, 3.8s) ease-in-out infinite;
}

.card-completion-fireworks > i:nth-of-type(1) {
  left: 8%;
  top: 22%;
}
.card-completion-fireworks > i:nth-of-type(2) {
  left: 18%;
  top: 68%;
  animation-delay: -.35s;
}
.card-completion-fireworks > i:nth-of-type(3) {
  left: 30%;
  top: 12%;
  animation-delay: -.7s;
}
.card-completion-fireworks > i:nth-of-type(4) {
  left: 42%;
  top: 82%;
  animation-delay: -1.05s;
}
.card-completion-fireworks > i:nth-of-type(5) {
  left: 54%;
  top: 8%;
  animation-delay: -1.4s;
}
.card-completion-fireworks > i:nth-of-type(6) {
  left: 65%;
  top: 76%;
  animation-delay: -1.75s;
}
.card-completion-fireworks > i:nth-of-type(7) {
  left: 78%;
  top: 18%;
  animation-delay: -2.1s;
}
.card-completion-fireworks > i:nth-of-type(8) {
  left: 90%;
  top: 62%;
  animation-delay: -2.45s;
}
.card-completion-fireworks > i:nth-of-type(9) {
  left: 12%;
  top: 46%;
  animation-delay: -2.8s;
}
.card-completion-fireworks > i:nth-of-type(10) {
  left: 88%;
  top: 38%;
  animation-delay: -3.15s;
}
.card-completion-fireworks > i:nth-of-type(11) {
  left: 36%;
  top: 46%;
  animation-delay: -3.5s;
}
.card-completion-fireworks > i:nth-of-type(12) {
  left: 70%;
  top: 48%;
  animation-delay: -3.85s;
}

@keyframes card-pack-heading-star {
  0%, 100% {
    transform: scale(.86) rotate(0deg);
    opacity: .58;
  }
  50% {
    transform: scale(1.18) rotate(90deg);
    opacity: 1;
  }
}

@keyframes card-reveal-suspense-ring {
  0% {
    transform: scale(.66);
    opacity: .9;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes card-reveal-suspense-star {
  0%, 100% { transform: translate(-50%, -50%) scale(.78) rotate(0deg); }
  50% { transform: translate(-50%, -50%) scale(1.24) rotate(90deg); }
}

@keyframes card-reveal-back-charge {
  0% {
    transform: rotateY(0deg) scale(1);
    filter: brightness(1);
  }
  45% {
    transform: rotateY(0deg) scale(.965);
    filter: brightness(1.45) saturate(1.25);
  }
  100% {
    transform: rotateY(0deg) scale(1.025);
    filter: brightness(1.12);
  }
}

@keyframes card-completion-burst {
  0%, 100% {
    transform: scale(.72) rotate(0deg);
    opacity: .12;
  }
  38% {
    transform: scale(1.04) rotate(45deg);
    opacity: .92;
  }
  70% {
    transform: scale(1.18) rotate(72deg);
    opacity: 0;
  }
}

@keyframes card-completion-confetti {
  0%, 100% {
    transform: translateY(18px) scale(.7);
    opacity: .18;
  }
  45% {
    transform: translateY(-18px) scale(1.25);
    opacity: 1;
  }
  70% {
    transform: translateY(-30px) scale(.82);
    opacity: .25;
  }
}

@media (max-width: 620px) {
  .card-inspector-stage > .card-rarity-fx.is-stage {
    width: calc(var(--fourfun-inspector-card-width) + 74px) !important;
  }

  .card-pack-wrapper {
    width: min(330px, 82vw) !important;
  }

  .card-pack-front img {
    min-height: 150px !important;
  }

  .card-reveal-card-wrap {
    width: min(340px, 92vw);
    min-height: 440px;
  }

  .card-reveal-card-wrap > .card-rarity-fx.is-stage {
    width: min(330px, 90vw) !important;
  }
}

:root {
  --card-album-paper: #eadcbc;
  --card-album-paper-deep: #d7c49c;
}

.fourfun-card-shell,
.card-book-slot,
.card-catalog-card-wrap,
.card-pack-complete-grid,
.card-reveal-stage,
.card-inspector-stage {
  contain: layout paint style;
}

.fourfun-card-shell,
.card-inspector-card,
.card-book-slot .fourfun-card-shell,
.card-catalog-card-wrap .fourfun-card-shell {
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.fourfun-card-body,
.card-inspector-aura {
  background: transparent !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 28%, rgba(14,18,24,.96)), rgba(12,16,22,.92)) !important;
  border-bottom-color: color-mix(in srgb, var(--card-accent) 76%, rgba(255,255,255,.12)) !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-copy {
  background: linear-gradient(180deg, rgba(11,14,18,.78), color-mix(in srgb, var(--card-accent) 16%, rgba(9,12,16,.78))) !important;
  border-top-color: color-mix(in srgb, var(--card-accent) 38%, rgba(255,255,255,.12)) !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-title,
.fourfun-card-body.has-custom-accent .fourfun-card-copy p {
  color: #fff7df !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.8) !important;
}

.fourfun-card-rarity-seal,
.fourfun-card-copy,
.fourfun-card-copy p,
.fourfun-card-footer,
.fourfun-card-footer * {
  position: relative;
  z-index: 26 !important;
}

.card-rarity-fx.is-edge-overlay,
.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  z-index: 10 !important;
  pointer-events: none !important;
  inset: -14px !important;
  -webkit-mask: linear-gradient(90deg, #000 0 15%, transparent 22% 78%, #000 85% 100%);
  mask: linear-gradient(90deg, #000 0 15%, transparent 22% 78%, #000 85% 100%);
}

.fourfun-card-shell > .card-rarity-fx.is-inline:not(.is-edge-overlay),
.card-inspector-stage > .card-rarity-fx.is-stage:not(.is-edge-overlay) {
  z-index: 1 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage {
  width: calc(var(--fourfun-inspector-card-width) + 96px) !important;
}

.card-inspector-copy h2 {
  text-align: left !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 46px !important;
  max-width: calc(100% - 16px) !important;
  height: 18px !important;
  padding: 0 7px !important;
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  font-size: 6.35px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-indent: .12em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  transform-origin: center !important;
  box-shadow: 0 5px 11px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.34) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fourfun-card-rarity-seal.reward-rarity-seal::before,
.fourfun-card-rarity-seal.reward-rarity-seal::after {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  font-size: 5.8px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-common {
  background: linear-gradient(135deg, rgba(249,244,231,.96), rgba(192,178,154,.92)) !important;
  color: #3f3528 !important;
  border-color: rgba(121,102,78,.45) !important;
  clip-path: polygon(10px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 10px 100%, 0 50%) !important;
}
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-common::before,
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-common::after {
  content: "✦";
  color: #756043;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-uncommon {
  background: linear-gradient(135deg, rgba(203,255,219,.96), rgba(75,156,104,.94)) !important;
  color: #123720 !important;
  border-color: rgba(145,255,180,.44) !important;
  clip-path: polygon(8px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%) !important;
}
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-uncommon::before {
  content: "❖";
  color: #effff0;
}
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-uncommon::after {
  content: "❖";
  color: #e0ffe4;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-rare {
  background: linear-gradient(135deg, rgba(223,242,255,.98), rgba(58,122,222,.94)) !important;
  color: #f3fbff !important;
  border-color: rgba(161,223,255,.44) !important;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 30%, 100% 70%, calc(100% - 12px) 100%, 12px 100%, 0 70%, 0 30%) !important;
}
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-rare::before,
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-rare::after {
  content: "✧";
  color: #edf9ff;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-epic {
  min-width: 52px !important;
  background: linear-gradient(135deg, rgba(251,233,255,.98), rgba(137,77,255,.94) 58%, rgba(63,18,98,.96)) !important;
  color: #fff3ff !important;
  border-color: rgba(236,176,255,.48) !important;
  clip-path: polygon(14px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 14px 100%, 0 50%) !important;
  animation: cardSealEpicShimmer 3.8s linear infinite !important;
}
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-epic::before,
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-epic::after {
  content: "✶";
  color: #ffe5ff;
  animation: cardSealSparkPulse 1.8s ease-in-out infinite;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 58px !important;
  height: 19px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 36%),
    linear-gradient(90deg, rgba(255,74,174,.92), rgba(255,174,45,.92), rgba(82,231,255,.92), rgba(170,104,255,.92), rgba(255,74,174,.92)) !important;
  background-size: auto, 220% 100% !important;
  color: #fffef9 !important;
  border-color: rgba(255,245,255,.52) !important;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%) !important;
  animation: cardSealLegendarySpectrum 4.4s linear infinite !important;
}
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary::before,
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary::after {
  content: "✦";
  color: #fff7ff;
  animation: cardSealSparkPulse 1.4s ease-in-out infinite;
}

.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 7px !important;
  right: 7px !important;
  min-width: 42px !important;
  height: 16px !important;
  padding-inline: 6px !important;
  font-size: 5.85px !important;
}
.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-epic {
  min-width: 48px !important;
}
.card-book-slot .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 52px !important;
  height: 17px !important;
}

.fourfun-card-header {
  padding: 7px 13px 6px !important;
}

.fourfun-card-title {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  font-size: 17px !important;
  line-height: 1.02 !important;
}

.card-book-slot .fourfun-card-title {
  font-size: 12.6px !important;
}

.fourfun-card-art {
  min-height: 154px !important;
  padding: 6px !important;
}

.fourfun-card-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.fourfun-card-copy {
  overflow: hidden !important;
}

.fourfun-card-copy p {
  font-size: 9.3px !important;
  line-height: 1.33 !important;
}

.fourfun-card-footer-center small,
.fourfun-card-footer small {
  font-size: 9px !important;
}

.card-book-slot .fourfun-card-footer small,
.card-book-slot .fourfun-card-footer-center small {
  font-size: 8.8px !important;
}

.card-album {
  background:
    radial-gradient(circle at 50% 0, rgba(145,104,39,.14), transparent 34%),
    linear-gradient(180deg, rgba(18,27,21,.74), rgba(7,11,8,.86)) !important;
}

.card-book-page {
  background:
    linear-gradient(180deg, rgba(255,249,235,.68), rgba(231,217,188,.88)),
    repeating-linear-gradient(90deg, rgba(118,92,52,.045) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(118,92,52,.028) 0 1px, transparent 1px 24px) !important;
  box-shadow: inset 0 0 0 1px rgba(184,151,104,.22), inset 0 18px 30px rgba(255,255,255,.14), inset 0 -12px 26px rgba(88,60,22,.08) !important;
}

.card-book-slot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card-book-slot::before {
  content: "";
  position: absolute;
  inset: 8px 8px 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(169,138,92,.10), rgba(119,91,52,.06));
  box-shadow: inset 0 0 0 1px rgba(171,140,92,.25), 0 6px 14px rgba(84,57,18,.08);
  z-index: 0;
}

.card-book-slot .fourfun-card-shell {
  position: relative !important;
  z-index: 2 !important;
}

.card-book-slot .card-rarity-fx.is-inline,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 6 !important;
}

.card-book-slot-empty {
  opacity: 1 !important;
}

.card-book-slot-empty::before,
.card-book-slot-empty::after,
.card-book-slot-empty > * {
  display: none !important;
}

.card-album-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,6,4,.54);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-album-modal-stage {
  position: relative;
  width: min(1320px, 96vw);
}

.card-album.card-album-modal-book {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-album.card-album-modal-book::before {
  display: none !important;
}

.card-album-modal-close {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  z-index: 12 !important;
}

.card-pack-wrapper {
  overflow: visible !important;
  perspective: 1500px;
}

.card-pack-wrapper::before,
.card-pack-wrapper::after {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

.card-pack-wrapper::before {
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.16), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(255,215,129,.14), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--pack-accent) 18%, transparent), transparent 30%, color-mix(in srgb, var(--pack-accent) 12%, transparent) 75%, transparent);
  filter: blur(2px);
}

.card-pack-wrapper::after {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--pack-accent) 56%, rgba(255,240,212,.32));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.22);
}

.card-pack-front {
  position: relative;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(155deg, color-mix(in srgb, var(--pack-accent) 38%, #1a2a1f), #0b130e 76%) !important;
}

.card-pack-front::before,
.card-pack-front::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
}

.card-pack-front::before {
  border: 1px solid rgba(255,239,192,.24);
  border-radius: 22px;
  box-shadow: inset 0 0 22px rgba(255,255,255,.06);
}

.card-pack-front::after {
  inset: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 16%, transparent 84%, rgba(255,233,186,.08));
}

.card-pack-brand,
.card-pack-front strong,
.card-pack-front b,
.card-pack-front small {
  position: relative;
  z-index: 2;
}

.card-pack-front img {
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.28));
  transform: translateZ(16px);
}

.card-reveal-back {
  position: relative;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.15), transparent 22%),
    linear-gradient(155deg, rgba(31,53,40,.98), rgba(10,18,13,.98) 72%) !important;
}

.card-reveal-back::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255,228,154,.26);
  box-shadow: inset 0 0 14px rgba(255,255,255,.06);
}

.card-reveal-back span,
.card-reveal-back b,
.card-reveal-back small {
  transform: translateZ(12px);
}

.reward-showcase-card,
.reward-showcase-card .reward-showcase-frame {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

.reward-showcase-card::before,
.reward-showcase-card::after,
.reward-showcase-card .reward-showcase-frame::before,
.reward-showcase-card .reward-showcase-frame::after {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

@keyframes cardSealEpicShimmer {
  0% { filter: drop-shadow(0 0 5px rgba(196,112,255,.22)); }
  50% { filter: drop-shadow(0 0 10px rgba(222,171,255,.38)); }
  100% { filter: drop-shadow(0 0 5px rgba(196,112,255,.22)); }
}

@keyframes cardSealLegendarySpectrum {
  0% {
    background-position: 0 0, 0% 50%;
    filter: drop-shadow(0 0 7px rgba(255,114,193,.28));
  }
  50% {
    background-position: 0 0, 100% 50%;
    filter: drop-shadow(0 0 12px rgba(82,231,255,.34));
  }
  100% {
    background-position: 0 0, 0% 50%;
    filter: drop-shadow(0 0 7px rgba(255,114,193,.28));
  }
}

@keyframes cardSealSparkPulse {
  0%, 100% {
    opacity: .7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.history-launch-buttons {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  height: 82px;
  flex: 0 0 82px;
}

.history-column .history-panel {
  height: calc(100% - 92px) !important;
}

.card-album-launch-button,
.history-launch-buttons .achievements-launch-button {
  min-height: 38px !important;
  height: 38px !important;
}

.card-album-launch-button {
  --album-button-gold: #e4bd62;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px 0 9px;
  overflow: hidden;
  border: 1px solid rgba(238,201,105,.42);
  border-radius: 10px;
  color: #f7e6b2;
  background:
    linear-gradient(90deg, rgba(230,189,92,.12), transparent 28%, rgba(230,189,92,.08)),
    radial-gradient(circle at 18% 0, rgba(255,224,136,.16), transparent 54%),
    rgba(19,31,22,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.36),
    0 7px 17px rgba(0,0,0,.14),
    0 0 16px rgba(226,184,82,.08);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .115em;
  cursor: pointer;
  isolation: isolate;
}

.card-album-launch-button::before {
  content: "";
  position: absolute;
  inset: -30% -15%;
  z-index: -1;
  background: linear-gradient(112deg, transparent 35%, rgba(255,239,188,.16) 48%, transparent 61%);
  transform: translateX(-65%);
  animation: cardAlbumButtonSheen 4.8s ease-in-out infinite;
}

.card-album-launch-button::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 1px solid rgba(255,225,147,.08);
  border-radius: 7px;
  pointer-events: none;
}

.card-album-launch-button > span:nth-child(2) {
  text-align: left;
}

.card-album-launch-button > b {
  color: rgba(255,255,255,.82);
  font-size: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.card-album-launch-button > b small {
  color: rgba(228,196,117,.74);
  font: inherit;
}

.card-album-launch-icon {
  position: relative;
  width: 31px;
  height: 25px;
  display: block;
  transform: perspective(90px) rotateX(5deg);
}

.card-album-launch-card {
  position: absolute;
  width: 13px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid rgba(255,224,142,.62);
  background:
    linear-gradient(180deg, rgba(255,248,216,.26), rgba(95,66,24,.14)),
    linear-gradient(145deg, rgba(32,51,38,.96), rgba(14,25,18,.98));
  box-shadow:
    inset 0 0 0 1px rgba(255,243,192,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 0 8px rgba(225,180,75,.14);
}

.card-album-launch-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 2px;
  border: 1px solid rgba(255,233,167,.14);
}

.card-album-launch-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,242,194,.94) 0%, rgba(241,207,111,.84) 40%, rgba(241,207,111,0) 70%);
  box-shadow: 0 0 6px rgba(255,223,131,.52);
  opacity: .84;
}

.card-album-launch-card.is-center {
  left: 50%;
  top: 3px;
  z-index: 3;
  transform: translateX(-50%);
}

.card-album-launch-card.is-left {
  left: 2px;
  top: 5px;
  z-index: 1;
  transform: rotate(-17deg);
}

.card-album-launch-card.is-right {
  right: 2px;
  top: 5px;
  z-index: 2;
  transform: rotate(17deg);
}

.card-album-modal-stage {
  max-height: calc(100vh - 24px);
  overflow: visible;
}

.card-album.card-album-modal-book .card-album-heading {
  margin: 0 18px -4px;
  padding: 13px 22px 10px !important;
  border-radius: 20px 20px 5px 5px;
  background:
    linear-gradient(180deg, rgba(72,45,19,.96), rgba(42,25,11,.97)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 1px 0 rgba(255,229,168,.12), 0 8px 20px rgba(0,0,0,.20);
}

.card-album.card-album-modal-book .card-book-shell {
  margin-top: 0 !important;
}

.card-album-modal-close {
  top: 14px !important;
  right: 28px !important;
}

.card-pack-image-wrapper {
  width: min(354px, 76vw) !important;
  aspect-ratio: 709 / 1299 !important;
  filter: drop-shadow(0 34px 32px rgba(0,0,0,.54)) !important;
  perspective: 1400px;
  animation: card-pack-image-float 3.8s ease-in-out infinite !important;
}

.card-pack-image-wrapper::before,
.card-pack-image-wrapper::after,
.card-pack-image-wrapper .card-pack-top-shred {
  display: none !important;
  content: none !important;
}

.card-pack-image-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateX(1.7deg) rotateY(-1.4deg);
  transform-origin: center 62%;
}

.card-pack-full-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;

  clip-path: inset(6.236% 0 0 0);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}

.card-pack-top-handle.card-pack-tear-line {
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 6.236% !important;
  min-height: 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(var(--tear-progress)) translateZ(18px) !important;
  transition: filter .18s ease;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.card-pack-top-handle.card-pack-tear-line:active {
  cursor: grabbing;
  filter: brightness(1.08) drop-shadow(0 8px 7px rgba(0,0,0,.34));
}

.card-pack-top-handle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.card-pack-drag-hint {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 5px 10px;
  border: 1px solid rgba(235,196,99,.28);
  border-radius: 999px;
  color: #efd893 !important;
  background: rgba(8,14,10,.78);
  box-shadow: 0 5px 14px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 8px !important;
  font-weight: 900;
  letter-spacing: .16em;
  white-space: nowrap;
  pointer-events: none;
}

.card-pack-drag-hint b {
  color: #fff1bd;
  animation: cardPackHintArrow 1.2s ease-in-out infinite;
}

.card-pack-image-wrapper.is-torn .card-pack-top-handle {
  animation: card-pack-supplied-top-away .82s cubic-bezier(.2,.8,.2,1) forwards !important;
}

.card-pack-image-wrapper.is-torn .card-pack-full-image {
  animation: card-pack-supplied-body-away .9s ease-in forwards !important;
}

@keyframes card-pack-image-float {
  0%, 100% { transform: translateY(0) rotateZ(-.15deg); }
  50% { transform: translateY(-8px) rotateZ(.15deg); }
}

@keyframes card-pack-supplied-top-away {
  to {
    transform: translateX(122%) translateY(-10px) rotateZ(7deg) translateZ(30px);
    opacity: 0;
  }
}

@keyframes card-pack-supplied-body-away {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.045) translateY(18px);
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes cardPackHintArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes cardAlbumButtonSheen {
  0%, 54% {
    transform: translateX(-65%);
    opacity: 0;
  }
  64% { opacity: 1; }
  82%, 100% {
    transform: translateX(65%);
    opacity: 0;
  }
}

@keyframes cardAlbumBookSpark {
  0%, 100% {
    opacity: .48;
    transform: scale(.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
  }
}

@media (max-width: 980px) {
  .history-launch-buttons {
    height: auto;
    flex-basis: auto;
  }

  .history-column .history-panel {
    height: auto !important;
  }
}

@media (max-width: 620px) {
  .card-pack-image-wrapper {
    width: min(306px, 76vw) !important;
  }

  .card-album-modal-backdrop {
    padding: 8px !important;
  }

  .card-album.card-album-modal-book .card-album-heading {
    margin-inline: 5px;
    padding: 12px 14px 10px !important;
  }
}

.card-album.card-album-modal-book {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.card-album.card-album-modal-book .card-album-heading {
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.card-album.card-album-modal-book .card-album-heading > div:first-child {
  display: grid;
  justify-items: center;
}

.card-album.card-album-modal-book .card-album-heading .eyebrow,
.card-album.card-album-modal-book .card-album-heading h3,
.card-album.card-album-modal-book .card-album-heading p {
  text-align: center !important;
}

.card-album.card-album-modal-book .card-album-tools {
  align-items: center !important;
  justify-content: center !important;
}

.card-album.card-album-modal-book .card-album-tools .collection-collapse-button {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-shell {
  margin-top: 0 !important;
  background:
    linear-gradient(180deg, rgba(61,42,23,.96), rgba(31,21,11,.98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 9px) !important;
  border: 1px solid rgba(175,131,73,.24) !important;
  border-radius: 28px !important;
  box-shadow: inset 0 0 0 1px rgba(255,230,182,.06), 0 24px 54px rgba(0,0,0,.28) !important;
}

.card-album.card-album-modal-book .card-book-page {
  background:
    linear-gradient(180deg, rgba(248,241,226,.98), rgba(232,219,193,.98)),
    repeating-linear-gradient(90deg, rgba(130,102,58,.042) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(130,102,58,.03) 0 1px, transparent 1px 24px) !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  min-height: 286px !important;
}

.card-album.card-album-modal-book .card-book-slot::before {
  inset: 10px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(174,141,95,.10), rgba(119,89,50,.06)) !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-shell {
  width: min(188px, 96%) !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-face,
.card-album.card-album-modal-book .card-book-slot .fourfun-card-back {
  min-height: 248px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-header {
  padding: 7px 12px 5px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-title {
  font-size: 11.4px !important;
  line-height: 1.02 !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-art {
  min-height: 148px !important;
  padding: 6px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-copy {
  min-height: 44px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-copy p {
  font-size: 8.8px !important;
  line-height: 1.27 !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-footer small,
.card-album.card-album-modal-book .card-book-slot .fourfun-card-number {
  font-size: 8.2px !important;
}

.fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal,
.card-book-slot .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal,
.card-catalog-card-wrap .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  align-self: auto !important;
  justify-self: auto !important;
  transform: none !important;
}

.fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary,
.card-book-slot .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary,
.card-catalog-card-wrap .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  min-width: 42px !important;
  width: auto !important;
  max-width: 44% !important;
  height: 16px !important;
  font-size: 5.6px !important;
  padding-inline: 6px !important;
}

.card-inspector-meta .fourfun-card-rarity-seal.reward-rarity-seal {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 56px !important;
  height: 20px !important;
}

.card-inspector-copy h2 {
  text-align: left !important;
}

.fourfun-card-shell,
.card-book-slot,
.card-catalog-card-wrap,
.card-inspector-stage,
.card-rarity-fx {
  contain: none !important;
}

.card-rarity-fx,
.card-rarity-fx::before,
.card-rarity-fx::after {
  background-color: transparent !important;
}

.fourfun-card-shell,
.card-inspector-card,
.card-book-slot .fourfun-card-shell,
.card-catalog-card-wrap .fourfun-card-shell {
  isolation: isolate !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage:not(.is-edge-overlay) {
  z-index: 1 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  z-index: 8 !important;
  inset: -20px !important;
  width: calc(var(--fourfun-inspector-card-width) + 104px) !important;
  height: auto !important;
  background: transparent !important;
  -webkit-mask: linear-gradient(90deg, #000 0 16%, transparent 22% 78%, #000 84% 100%) !important;
  mask: linear-gradient(90deg, #000 0 16%, transparent 22% 78%, #000 84% 100%) !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 6 !important;
  inset: -16px !important;
  background: transparent !important;
  -webkit-mask: linear-gradient(90deg, #000 0 15%, transparent 24% 76%, #000 85% 100%) !important;
  mask: linear-gradient(90deg, #000 0 15%, transparent 24% 76%, #000 85% 100%) !important;
}

.card-pack-image-wrapper {
  width: min(314px, 71vw) !important;
  aspect-ratio: 709 / 1299 !important;
}

.card-pack-image-stage {
  transform: rotateX(1.4deg) rotateY(-1.2deg) !important;
}

.card-pack-plastic-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.18), transparent 24%, transparent 72%, rgba(255,255,255,.08)),
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  mix-blend-mode: screen;
}

.card-pack-top-static,
.card-pack-top-peel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.236%;
  z-index: 3;
  pointer-events: none;
}

.card-pack-top-static img,
.card-pack-top-peel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.card-pack-top-static {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

.card-pack-top-peel {
  z-index: 5;
  clip-path: polygon(0 0, var(--tear-progress) 0, var(--tear-progress) 100%, 0 100%);
  transform-origin: left center;
  transform: translateX(var(--tear-shift)) rotateZ(var(--tear-rotate)) skewY(-4deg);
  filter: drop-shadow(8px 7px 9px rgba(0,0,0,.28));
}

.card-pack-top-handle.card-pack-tear-line {
  width: 20% !important;
  min-width: 42px;
  height: 6.236% !important;
  left: 0 !important;
  z-index: 6 !important;
  transform: none !important;
}

.card-pack-drag-zone {
  position: absolute;
  inset: 0;
}

.card-pack-image-wrapper.is-torn .card-pack-top-static,
.card-pack-image-wrapper.is-torn .card-pack-top-peel,
.card-pack-image-wrapper.is-torn .card-pack-top-handle {
  animation: card-pack-supplied-top-away .82s cubic-bezier(.2,.8,.2,1) forwards !important;
}

.card-reveal-back {
  overflow: hidden !important;
  border-radius: 18px !important;
}

.card-reveal-back-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.card-reveal-back-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  pointer-events: none;
}

.card-reveal-back > span,
.card-reveal-back > b,
.card-reveal-back > small {
  position: relative;
  z-index: 3;
  transform: translateZ(16px);
}

.card-reveal-back.rarity-common .card-reveal-back-overlay {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(135deg, rgba(244,230,205,.10), transparent 52%, rgba(161,134,89,.14));
}
.card-reveal-back.rarity-uncommon .card-reveal-back-overlay {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(135deg, rgba(86,233,142,.16), transparent 52%, rgba(10,71,41,.18));
}
.card-reveal-back.rarity-rare .card-reveal-back-overlay {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.13), transparent 22%),
    linear-gradient(135deg, rgba(88,156,255,.18), transparent 52%, rgba(11,44,96,.2));
}
.card-reveal-back.rarity-epic .card-reveal-back-overlay {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.13), transparent 22%),
    linear-gradient(135deg, rgba(212,113,255,.20), transparent 52%, rgba(58,16,89,.22));
  box-shadow: inset 0 0 30px rgba(209,122,255,.18);
}
.card-reveal-back.rarity-legendary .card-reveal-back-overlay {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(120deg, rgba(255,60,170,.18), rgba(255,202,72,.14), rgba(93,228,255,.18), rgba(174,109,255,.16));
  background-size: 200% 200%;
  animation: legendaryBackSpectrum 3.8s linear infinite;
  mix-blend-mode: screen;
}

@keyframes legendaryBackSpectrum {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (max-width: 620px) {
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell {
    width: min(154px, 96%) !important;
  }

  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    min-height: 238px !important;
  }

  .card-pack-image-wrapper {
    width: min(278px, 74vw) !important;
  }
}

.card-album-modal-backdrop {
  background: rgba(3, 7, 6, .86) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 2000 !important;
}

.card-album-modal-stage {
  width: min(1320px, calc(100vw - 24px)) !important;
  position: relative;
  display: grid;
  justify-items: center;
}

.card-album.card-album-modal-book .card-book-page {
  align-content: start !important;
  grid-auto-rows: min-content !important;
}

.card-album.card-album-modal-book .card-book-slot-empty,
.card-album.card-album-modal-book .card-book-slot-empty::before,
.card-album.card-album-modal-book .card-book-slot-empty::after {
  display: none !important;
  content: none !important;
}

.card-album.card-album-modal-book .card-book-slot {
  min-height: 300px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-shell {
  width: min(204px, 98%) !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-face,
.card-album.card-album-modal-book .card-book-slot .fourfun-card-back {
  min-height: 270px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-art {
  min-height: 164px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-copy p {
  font-size: 9.2px !important;
  line-height: 1.24 !important;
}

.fourfun-card-art {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

.fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal,
.card-book-slot .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal,
.card-catalog-card-wrap .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal,
.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 12 !important;
  margin: 0 !important;
  transform: none !important;
  align-self: auto !important;
  justify-self: auto !important;
}

.fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary,
.card-book-slot .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary,
.card-catalog-card-wrap .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary,
.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  width: auto !important;
  max-width: 38% !important;
  min-width: 44px !important;
  height: 16px !important;
  padding-inline: 7px !important;
  font-size: 5.4px !important;
}

.card-inspector-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.card-inspector-titlebar h2 {
  margin: 0 !important;
  flex: 1;
  text-align: left !important;
}

.card-inspector-heading-seal {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  flex: 0 0 auto;
}

.card-inspector-heading-seal.rarity-seal-legendary {
  background: linear-gradient(120deg, rgba(255,112,203,.88), rgba(255,206,86,.88), rgba(91,227,255,.92), rgba(163,114,255,.92)) !important;
  background-size: 220% 220% !important;
  color: #fff6dc !important;
  box-shadow: 0 0 16px rgba(255,152,233,.22), 0 0 18px rgba(108,228,255,.22) !important;
  animation: legendarySealSpectrum 3s linear infinite !important;
}

@keyframes legendarySealSpectrum {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.card-inspector-stage > .card-rarity-fx.is-stage {
  width: calc(var(--fourfun-inspector-card-width) + 58px) !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage:not(.is-edge-overlay) {
  inset: -4px !important;
  z-index: 1 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  inset: -10px !important;
  width: calc(var(--fourfun-inspector-card-width) + 70px) !important;
  z-index: 8 !important;
  -webkit-mask: linear-gradient(90deg, #000 0 17%, transparent 24% 76%, #000 83% 100%) !important;
  mask: linear-gradient(90deg, #000 0 17%, transparent 24% 76%, #000 83% 100%) !important;
}

.card-inspector-stage > .card-inspector-card {
  z-index: 5 !important;
}

.card-pack-top-static {
  clip-path: polygon(var(--tear-progress) 0, 100% 0, 100% 100%, var(--tear-progress) 100%) !important;
}

.card-pack-top-peel {
  clip-path: polygon(0 0, var(--tear-progress) 0, var(--tear-progress) 100%, 0 100%) !important;
}

.card-reveal-stack {
  width: 290px !important;
}

.card-reveal-back,
.card-reveal-front,
.card-reveal-front .fourfun-card-shell {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-reveal-back {
  padding: 0 !important;
}

.card-reveal-back::before,
.card-reveal-back::after,
.card-reveal-back > span,
.card-reveal-back > b,
.card-reveal-back > small {
  display: none !important;
  content: none !important;
}

.card-reveal-back-image {
  object-fit: cover !important;
  object-position: center !important;
}

.card-reveal-front .fourfun-card-body,
.card-reveal-front .fourfun-card-face,
.card-reveal-front .fourfun-card-back {
  height: 100% !important;
}

.card-reveal-front .fourfun-card-face,
.card-reveal-front .fourfun-card-back {
  min-height: 100% !important;
}

.card-reveal-front .fourfun-card-art {
  min-height: 170px !important;
}

@media (max-width: 620px) {
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell {
    width: min(164px, 98%) !important;
  }

  .card-reveal-stack {
    width: min(238px, 70vw) !important;
  }
}

.card-album.card-album-modal-book {
  width: min(1320px, calc(100vw - 24px)) !important;
}

.card-album.card-album-modal-book .card-book-shell {
  width: 100% !important;
}

.card-album.card-album-modal-book .card-book-page {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 18px 12px !important;
  padding: 24px 14px 22px !important;
  align-content: start !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  min-height: 250px !important;
  padding: 10px 6px 8px !important;
}

.card-album.card-album-modal-book .card-book-slot::before {
  inset: 7px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-shell {
  width: min(112px, 100%) !important;
  max-width: 112px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-face,
.card-album.card-album-modal-book .card-book-slot .fourfun-card-back {
  min-height: 206px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-header {
  min-height: 26px !important;
  padding: 5px 7px 4px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-title {
  font-size: 9.5px !important;
  padding: 0 30px 0 8px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-art {
  min-height: 112px !important;
  max-height: 112px !important;
  padding: 5px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-copy {
  min-height: 36px !important;
  padding: 5px 7px 4px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-copy p {
  font-size: 7.2px !important;
  line-height: 1.22 !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-footer {
  min-height: 20px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-footer small,
.card-album.card-album-modal-book .card-book-slot .fourfun-card-number {
  font-size: 6.8px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline {
  inset: -3px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -8px !important;
  -webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 24% 76%, #000 88% 100%) !important;
  mask: linear-gradient(90deg, #000 0 12%, transparent 24% 76%, #000 88% 100%) !important;
}

.card-inspector-stage {
  overflow: visible !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage,
.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  width: calc(var(--fourfun-inspector-card-width) + 18px) !important;
  inset: -3px !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  z-index: 7 !important;
  -webkit-mask: linear-gradient(90deg, #000 0 11%, transparent 21% 79%, #000 89% 100%) !important;
  mask: linear-gradient(90deg, #000 0 11%, transparent 21% 79%, #000 89% 100%) !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage:not(.is-edge-overlay) {
  opacity: .84 !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary,
.card-inspector-heading-seal.rarity-seal-legendary {
  background:
    linear-gradient(125deg, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(90deg, rgba(255,74,174,.95), rgba(255,194,68,.93), rgba(77,229,255,.94), rgba(166,108,255,.94), rgba(255,74,174,.95)) !important;
  background-size: auto, 240% 100% !important;
  animation: cardSealLegendaryHolo 2.8s linear infinite !important;
}

@keyframes cardSealLegendaryHolo {
  0% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 8px rgba(255,113,199,.18), 0 0 10px rgba(77,229,255,.18);
  }
  50% {
    background-position: 0 0, 100% 50%;
    box-shadow: 0 0 10px rgba(255,194,68,.2), 0 0 14px rgba(166,108,255,.2);
  }
  100% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 8px rgba(255,113,199,.18), 0 0 10px rgba(77,229,255,.18);
  }
}

.card-pack-top-peel {
  transform-origin: left top !important;
  transform: translateX(var(--tear-shift)) translateY(calc(var(--tear-shift) * -0.14)) rotateZ(calc(var(--tear-rotate) * .55)) rotateX(18deg) !important;
}

.card-pack-image-wrapper.is-torn .card-pack-top-static,
.card-pack-image-wrapper.is-torn .card-pack-top-peel,
.card-pack-image-wrapper.is-torn .card-pack-top-handle {
  animation: card-pack-supplied-top-away-lift .78s cubic-bezier(.2,.82,.25,1) forwards !important;
}

@keyframes card-pack-supplied-top-away-lift {
  to {
    transform: translateX(122%) translateY(-42px) rotateZ(11deg) rotateX(22deg) !important;
    opacity: 0;
  }
}

.card-reveal-back {
  overflow: hidden !important;
  background: #0a120d !important;
}

.card-reveal-back-image {
  object-fit: contain !important;
  object-position: center !important;
  padding: 4px !important;
}

.card-reveal-back-overlay {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #d8b75a) 18%, transparent), transparent 52%, color-mix(in srgb, var(--card-accent, #d8b75a) 12%, transparent)),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08)) !important;
}

.card-reveal-back.rarity-legendary .card-reveal-back-overlay {
  background:
    linear-gradient(125deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(90deg, rgba(255,74,174,.18), rgba(255,194,68,.14), rgba(77,229,255,.18), rgba(166,108,255,.18), rgba(255,74,174,.18)),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.14), transparent 22%) !important;
  background-size: auto, 220% 100%, auto !important;
  animation: revealLegendaryBackHolo 3s linear infinite !important;
  mix-blend-mode: screen !important;
}

.card-reveal-back.rarity-legendary .card-reveal-back-image {
  filter: saturate(1.06) contrast(1.04) !important;
}

@keyframes revealLegendaryBackHolo {
  0% { background-position: 0 0, 0% 50%, 0 0; }
  100% { background-position: 0 0, 100% 50%, 0 0; }
}

.card-reveal-card-wrap,
.card-reveal-card-wrap::before,
.card-reveal-card-wrap::after,
.card-reveal-stage {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 620px) {
  .card-album.card-album-modal-book .card-book-page {
    gap: 14px 10px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell {
    width: min(92px, 100%) !important;
    max-width: 92px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-face,
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-back {
    min-height: 178px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-art {
    min-height: 96px !important;
    max-height: 96px !important;
  }
}

:root {
  --fourfun-card-ratio: 991 / 1473;
}

.fourfun-card-shell {
  position: relative !important;
  overflow: visible !important;
}

.fourfun-card-body {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: var(--fourfun-card-ratio) !important;
  transform-style: preserve-3d;
}

.fourfun-card-face,
.fourfun-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #070909 !important;
}

.fourfun-card-face {
  transform: translateZ(1px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

.fourfun-card-full-art,
.fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.fourfun-card-full-art {
  z-index: 1 !important;
}

.fourfun-card-full-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.fourfun-card-preset-frame {
  z-index: 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
  user-select: none !important;
}

.fourfun-card-border,
.fourfun-card-back-frame,
.fourfun-card-art-vignette {
  display: none !important;
}

.fourfun-card-header,
.fourfun-card-copy,
.fourfun-card-footer,
.fourfun-card-art,
.fourfun-card-quantity,
.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain,
.fourfun-card-particles {
  position: absolute !important;
}

.fourfun-card-header {
  z-index: 12 !important;
  left: 3.2% !important;
  right: 3.2% !important;
  top: 1.2% !important;
  height: 7.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 7% !important;
  background: linear-gradient(180deg, rgba(11,15,18,.28), rgba(11,15,18,.12)) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

.fourfun-card-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #f6f1e0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: .95 !important;
  font-size: clamp(9px, 5.1cqw, 15px) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fourfun-card-art {
  z-index: 13 !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.fourfun-card-copy {
  z-index: 12 !important;
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 8.3% !important;
  height: 18.1% !important;
  display: grid !important;
  place-items: center !important;
  padding: 2.5% 8% !important;
  background: linear-gradient(180deg, rgba(8,10,11,.20), rgba(8,10,11,.34)) !important;
  backdrop-filter: blur(13px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.05) !important;
}

.fourfun-card-copy p {
  margin: 0 !important;
  color: #f3efe7 !important;
  text-align: center !important;
  font-size: clamp(7px, 3.7cqw, 11px) !important;
  line-height: 1.22 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.72) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

.fourfun-card-footer {
  z-index: 12 !important;
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 1.2% !important;
  height: 5.7% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr .55fr !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 3.5% !important;
  background: linear-gradient(180deg, rgba(8,10,11,.18), rgba(8,10,11,.3)) !important;
  backdrop-filter: blur(11px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.05) !important;
}

.fourfun-card-number,
.fourfun-card-footer small,
.fourfun-card-footer b {
  color: #fff8eb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.78) !important;
}

.fourfun-card-number {
  font-size: clamp(7px, 3.9cqw, 12px) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.fourfun-card-footer-center small,
.fourfun-card-footer small {
  font-size: clamp(6px, 3.1cqw, 10px) !important;
  font-weight: 700 !important;
}

.fourfun-card-footer-center { justify-content: center !important; }
.fourfun-card-footer-right {
  justify-content: flex-end !important;
  gap: 4px !important;
}
.fourfun-card-edition {
  display: inline !important;
  font-size: inherit !important;
}

.fourfun-card-quantity {
  z-index: 14 !important;
  top: 8.8% !important;
  right: 5.1% !important;
  font-size: clamp(6px, 3.5cqw, 10px) !important;
  font-weight: 900 !important;
  color: #fff4cd !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  z-index: 15 !important;
  top: 8.4% !important;
  right: 2.7% !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 25.8% !important;
  width: auto !important;
  max-width: 28% !important;
  height: 4.8% !important;
  font-size: clamp(4.5px, 2.35cqw, 7px) !important;
  line-height: 1 !important;
  padding: 0 3.7% !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transform: none !important;
}

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.card-reveal-back.rarity-legendary .card-reveal-back-overlay {
  background:
    linear-gradient(118deg, rgba(255,255,255,.04), transparent 32%),
    linear-gradient(90deg, rgba(255,72,174,.18), rgba(255,197,86,.12), rgba(79,228,255,.18), rgba(165,110,255,.16), rgba(255,72,174,.18)) !important;
  background-size: auto, 220% 100% !important;
  animation: fourfun-legendary-holo 3s linear infinite !important;
}

.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain,
.fourfun-card-particles {
  z-index: 8 !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.fourfun-card-particles { z-index: 7 !important; }

.fourfun-card-face.is-locked .fourfun-card-particles,
.fourfun-card-face.is-locked .fourfun-card-holo,
.fourfun-card-face.is-locked .fourfun-card-gloss,
.fourfun-card-face.is-locked .fourfun-card-grain {
  display: none !important;
}

.card-album.card-album-modal-book .card-album-heading {
  width: 100% !important;
  margin: 0 0 12px !important;
}

.card-album.card-album-modal-book .card-book-shell {
  width: 100% !important;
}

.card-album.card-album-modal-book .card-book-page {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  gap: 16px 10px !important;
  padding: 18px 10px 16px !important;
  justify-items: center !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  position: relative !important;
  min-height: 252px !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px 4px !important;
}

.card-album.card-album-modal-book .card-book-slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(168,136,82,.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
}

.card-album.card-album-modal-book .card-book-slot-empty::before {
  opacity: .35 !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
.card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
  width: min(112px, 100%) !important;
  max-width: 112px !important;
  z-index: 2 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline {
  inset: -4px !important;
  z-index: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -8px !important;
  -webkit-mask: linear-gradient(90deg, #000 0 10%, transparent 22% 78%, #000 90% 100%) !important;
  mask: linear-gradient(90deg, #000 0 10%, transparent 22% 78%, #000 90% 100%) !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-title { font-size: 9px !important; }
.card-album.card-album-modal-book .card-book-slot .fourfun-card-copy p { font-size: 6.8px !important; }
.card-album.card-album-modal-book .card-book-slot .fourfun-card-number,
.card-album.card-album-modal-book .card-book-slot .fourfun-card-footer small { font-size: 6.2px !important; }

.card-inspector-stage {
  position: relative !important;
  width: max-content !important;
  overflow: visible !important;
}

.card-inspector-card {
  position: relative !important;
  z-index: 5 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(var(--fourfun-inspector-card-width) + 14px) !important;
  height: calc((var(--fourfun-inspector-card-width) / (991 / 1473)) + 14px) !important;
  inset: auto !important;
  z-index: 1 !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  width: calc(var(--fourfun-inspector-card-width) + 18px) !important;
  height: calc((var(--fourfun-inspector-card-width) / (991 / 1473)) + 18px) !important;
  z-index: 6 !important;
  -webkit-mask: linear-gradient(90deg, #000 0 10%, transparent 22% 78%, #000 90% 100%) !important;
  mask: linear-gradient(90deg, #000 0 10%, transparent 22% 78%, #000 90% 100%) !important;
}

.card-inspector-titlebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.card-inspector-heading-seal {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}
.card-inspector-heading-seal.rarity-seal-legendary {
  background: linear-gradient(90deg, rgba(255,72,174,.95), rgba(255,197,86,.93), rgba(79,228,255,.95), rgba(165,110,255,.95), rgba(255,72,174,.95)) !important;
  background-size: 220% 100% !important;
  animation: cardSealLegendaryHolo 2.8s linear infinite !important;
}

.card-pack-image-wrapper {
  width: min(328px, 72vw) !important;
  aspect-ratio: 709 / 1299 !important;
}

.card-pack-full-image {
  clip-path: none !important;
}

.card-pack-plastic-overlay {
  inset: 1.5% 1.6% !important;
  border-radius: 16px !important;
  z-index: 2 !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.13), transparent 22%, transparent 74%, rgba(255,255,255,.05)),
    radial-gradient(circle at 24% 14%, rgba(255,255,255,.08), transparent 20%) !important;
}

.card-pack-top-static,
.card-pack-top-peel {
  height: 6.236% !important;
  overflow: hidden !important;
}
.card-pack-top-static { z-index: 4 !important; }
.card-pack-top-peel { z-index: 5 !important; }

.card-pack-top-peel {
  transform-origin: left top !important;
  transform: translateX(var(--tear-shift)) translateY(calc(var(--tear-shift) * -0.18)) rotateZ(calc(var(--tear-rotate) * .38)) rotateX(15deg) !important;
}

.card-pack-top-static { clip-path: polygon(var(--tear-progress) 0, 100% 0, 100% 100%, var(--tear-progress) 100%) !important; }
.card-pack-top-peel { clip-path: polygon(0 0, var(--tear-progress) 0, var(--tear-progress) 100%, 0 100%) !important; }

.card-pack-image-wrapper.is-torn .card-pack-top-static,
.card-pack-image-wrapper.is-torn .card-pack-top-peel,
.card-pack-image-wrapper.is-torn .card-pack-top-handle {
  animation: card-pack-supplied-top-away-arc .95s cubic-bezier(.2,.82,.25,1) forwards !important;
}

@keyframes card-pack-supplied-top-away-arc {
  to {
    transform: translateX(120%) translateY(-52px) rotateZ(12deg) rotateX(24deg) !important;
    opacity: 0;
  }
}

.card-reveal-stage,
.card-reveal-card-wrap {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.card-reveal-stack {
  position: relative !important;
  width: min(308px, 74vw) !important;
  aspect-ratio: var(--fourfun-card-ratio) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-reveal-back,
.card-reveal-front,
.card-reveal-front .fourfun-card-shell {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-reveal-back {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.card-reveal-back-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
}

.card-reveal-back-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #d8b75a) 18%, transparent), transparent 52%, color-mix(in srgb, var(--card-accent, #d8b75a) 12%, transparent)),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.10), transparent 22%) !important;
  mix-blend-mode: screen !important;
}

.card-reveal-card-wrap .card-rarity-fx.is-stage {
  width: calc(100% + 10px) !important;
  height: calc(100% + 10px) !important;
  inset: -5px !important;
}

.card-reveal-card-wrap .card-rarity-fx.is-stage.is-edge-overlay {
  width: calc(100% + 14px) !important;
  height: calc(100% + 14px) !important;
  inset: -7px !important;
  -webkit-mask: linear-gradient(90deg, #000 0 10%, transparent 22% 78%, #000 90% 100%) !important;
  mask: linear-gradient(90deg, #000 0 10%, transparent 22% 78%, #000 90% 100%) !important;
}

.card-reveal-stage.rarity-legendary::before { display: none !important; }

@media (max-width: 620px) {
  .card-album.card-album-modal-book .card-book-page {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
  }
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty { min-height: 205px !important; }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
    width: min(86px, 100%) !important;
    max-width: 86px !important;
  }
  .card-pack-image-wrapper { width: min(292px, 74vw) !important; }
  .card-reveal-stack { width: min(252px, 70vw) !important; }
}

.card-album-modal-stage {
  width: min(1420px, calc(100vw - 18px)) !important;
  max-width: min(1420px, calc(100vw - 18px)) !important;
}

.card-album.card-album-modal-book {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book::before {
  display: none !important;
}

.card-album.card-album-modal-book .card-album-heading {
  width: 100% !important;
  padding: 0 0 10px !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.card-album.card-album-modal-book .card-album-heading > div:first-child {
  display: grid !important;
  justify-items: center !important;
}

.card-album.card-album-modal-book .card-album-tools {
  align-items: center !important;
}

.card-album.card-album-modal-book .card-book-shell {
  padding: 18px 14px 14px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(95, 63, 28, .95), rgba(48, 30, 12, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(215,178,93,.2), 0 18px 42px rgba(0,0,0,.34) !important;
}

.card-album.card-album-modal-book .card-book-spread {
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
  min-height: auto !important;
  align-items: stretch !important;
}

.card-album.card-album-modal-book .card-book-page {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 16px 8px !important;
  padding: 16px 10px 16px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  position: relative !important;
  min-height: 0 !important;
  height: 196px !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 6px 3px !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-book-slot::before,
.card-album.card-album-modal-book .card-book-slot-empty::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(164,130,77,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.card-album.card-album-modal-book .card-book-slot-empty,
.card-album.card-album-modal-book .card-book-slot-empty::after,
.card-album.card-album-modal-book .card-book-slot-empty > * {
  opacity: .45 !important;
}

.card-album.card-album-modal-book .card-book-slot-empty::after {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
.card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
  width: 112px !important;
  max-width: 112px !important;
  min-width: 112px !important;
  aspect-ratio: 991 / 1473 !important;
  height: auto !important;
  z-index: 2 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline,
.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -4px !important;
  z-index: 1 !important;
  transform: scale(.78) !important;
  transform-origin: center !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  -webkit-mask: linear-gradient(90deg, #000 0 11%, transparent 22% 78%, #000 89% 100%) !important;
  mask: linear-gradient(90deg, #000 0 11%, transparent 22% 78%, #000 89% 100%) !important;
}

.fourfun-card-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fourfun-card-face,
.fourfun-card-back {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.fourfun-card-face::before,
.fourfun-card-face::after,
.fourfun-card-back::before,
.fourfun-card-back::after,
.fourfun-card-border,
.fourfun-card-back-frame,
.fourfun-card-back-brand,
.fourfun-card-back-sigil,
.fourfun-card-art-vignette {
  display: none !important;
}

.fourfun-card-full-art,
.fourfun-card-preset-frame,
.fourfun-card-back-preset {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.fourfun-card-full-art { z-index: 1 !important; }
.fourfun-card-preset-frame,
.fourfun-card-back-preset {
  z-index: 10 !important;
  object-fit: contain !important;
  pointer-events: none !important;
}
.fourfun-card-full-art img,
.fourfun-card-back-preset {
  object-fit: cover !important;
  object-position: center !important;
}

.fourfun-card-header,
.fourfun-card-copy,
.fourfun-card-footer,
.fourfun-card-art,
.fourfun-card-quantity,
.fourfun-card-particles,
.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain {
  position: absolute !important;
}

.fourfun-card-header {
  inset: 1.25% 3.2% auto 3.2% !important;
  height: 7.8% !important;
  z-index: 14 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8% !important;
  background: linear-gradient(180deg, rgba(8,10,10,.42), rgba(8,10,10,.16)) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

.fourfun-card-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #fff7eb !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(11px, 5.1cqw, 17px) !important;
  line-height: .96 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.85) !important;
}

.fourfun-card-art {
  inset: 0 !important;
  z-index: 15 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 10.05% !important;
  right: 3.7% !important;
  z-index: 18 !important;
  min-width: 23.5% !important;
  max-width: 25.5% !important;
  height: 4.5% !important;
  padding: 0 3.2% !important;
  font-size: clamp(4.6px, 2.1cqw, 6.6px) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.fourfun-card-copy {
  left: 3.25% !important;
  right: 3.25% !important;
  bottom: 8.1% !important;
  height: 18.6% !important;
  z-index: 14 !important;
  display: grid !important;
  place-items: center !important;
  padding: 2.5% 7.8% !important;
  background: linear-gradient(180deg, rgba(10,10,10,.1), rgba(10,10,10,.28)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.fourfun-card-copy p {
  margin: 0 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(255,248,236,.96) !important;
  font-size: clamp(8px, 3.55cqw, 11px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.fourfun-card-footer {
  left: 3.25% !important;
  right: 3.25% !important;
  bottom: 1.45% !important;
  height: 5.4% !important;
  z-index: 14 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr .55fr !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 4.5% !important;
  background: linear-gradient(180deg, rgba(10,10,10,.08), rgba(10,10,10,.18)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.fourfun-card-footer-left { justify-content: flex-start !important; }
.fourfun-card-footer-center { justify-content: center !important; }
.fourfun-card-footer-right { justify-content: flex-end !important; }
.fourfun-card-number,
.fourfun-card-footer small,
.fourfun-card-footer b {
  color: #fff6e8 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
}

.fourfun-card-number {
  font-size: clamp(8px, 3.8cqw, 12px) !important;
  font-weight: 800 !important;
}
.fourfun-card-footer small {
  font-size: clamp(6.8px, 3cqw, 9.5px) !important;
  font-weight: 700 !important;
}
.fourfun-card-edition { display: none !important; }

.fourfun-card-quantity {
  top: 8.65% !important;
  right: 6.2% !important;
  z-index: 19 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff0b2 !important;
  font-size: clamp(7px, 3.8cqw, 11px) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.86) !important;
}

.fourfun-card-back {
  transform: rotateY(180deg) rotateZ(var(--card-rz)) !important;
}

.fourfun-card-back-preset { z-index: 1 !important; }
.fourfun-card-back-labels {
  position: absolute !important;
  inset: 0 !important;
  z-index: 14 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}
.fourfun-card-back-labels strong,
.fourfun-card-back-labels small {
  color: #fff3dd !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.72) !important;
}
.fourfun-card-back-labels strong {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(12px, 5.5cqw, 18px) !important;
}
.fourfun-card-back-labels small {
  margin-top: 52% !important;
  font-size: clamp(8px, 3.6cqw, 11px) !important;
  letter-spacing: .14em !important;
}

.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain,
.fourfun-card-particles {
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
.fourfun-card-holo { z-index: 6 !important; }
.fourfun-card-gloss { z-index: 7 !important; }
.fourfun-card-grain { z-index: 5 !important; }
.fourfun-card-particles { z-index: 8 !important; }

.fourfun-card-face.rarity-legendary .fourfun-card-holo,
.fourfun-card-back.rarity-legendary .fourfun-card-holo,
.card-reveal-back.rarity-legendary .card-reveal-back-overlay,
.card-inspector-heading-seal.rarity-seal-legendary,
.fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  background:
    linear-gradient(115deg, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(90deg, rgba(255,74,174,.28), rgba(255,194,68,.2), rgba(77,229,255,.28), rgba(166,108,255,.24), rgba(255,74,174,.28)) !important;
  background-size: auto, 220% 100% !important;
  animation: cardSealLegendaryHolo 2.6s linear infinite !important;
}

.card-inspector-stage {
  position: relative !important;
  width: max-content !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--fourfun-inspector-card-width) + 18px) !important;
  height: calc((var(--fourfun-inspector-card-width) / (991 / 1473)) + 18px) !important;
  inset: auto !important;
  transform: translate(-50%, -50%) scale(.58) !important;
  transform-origin: center !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  width: calc(var(--fourfun-inspector-card-width) + 22px) !important;
  height: calc((var(--fourfun-inspector-card-width) / (991 / 1473)) + 22px) !important;
  transform: translate(-50%, -50%) scale(.61) !important;
  z-index: 6 !important;
  -webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88% 100%) !important;
  mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88% 100%) !important;
}

.card-inspector-card {
  position: relative !important;
  top: -3px !important;
  z-index: 4 !important;
}

.card-inspector-titlebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.card-inspector-titlebar h2 { text-align: left !important; }
.card-inspector-heading-seal {
  position: relative !important;
  right: auto !important;
  top: auto !important;
}

.card-pack-image-wrapper {
  width: min(354px, 76vw) !important;
  aspect-ratio: 709 / 1299 !important;
  overflow: visible !important;
}
.card-pack-full-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.card-pack-plastic-overlay {
  inset: 0 !important;
  background:
    linear-gradient(112deg, rgba(255,255,255,.12), transparent 22%, transparent 74%, rgba(255,255,255,.05)),
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.08), transparent 18%) !important;
  border-radius: 16px !important;
}
.card-pack-top-static { display: none !important; }
.card-pack-top-peel {
  transform-origin: left top !important;
  clip-path: polygon(0 0, var(--tear-progress) 0, var(--tear-progress) 100%, 0 100%) !important;
  transform: translateX(var(--tear-shift)) translateY(calc(var(--tear-shift) * -0.09)) rotateZ(calc(var(--tear-rotate) * .22)) !important;
}
.card-pack-image-wrapper.is-torn .card-pack-top-peel,
.card-pack-image-wrapper.is-torn .card-pack-top-handle {
  animation: card-pack-peel-away var(--card-pack-peel-duration, .95s) cubic-bezier(.24,.84,.25,1) forwards !important;
}
@keyframes card-pack-peel-away {
  to {
    transform: translateX(110%) translateY(-40px) rotateZ(12deg) !important;
    opacity: 0;
  }
}

.card-reveal-card-wrap,
.card-reveal-stage,
.card-reveal-stack {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.card-reveal-card-wrap {
  position: relative !important;
  width: min(316px, 74vw) !important;
  aspect-ratio: 991 / 1473 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-reveal-stack {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-reveal-back,
.card-reveal-front,
.card-reveal-front .fourfun-card-shell {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-reveal-back {
  overflow: hidden !important;
  border-radius: 16px !important;
}
.card-reveal-back-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.card-reveal-back-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #d8b75a) 22%, transparent), transparent 52%, color-mix(in srgb, var(--card-accent, #d8b75a) 15%, transparent)),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.11), transparent 22%) !important;
  mix-blend-mode: screen !important;
  opacity: .92 !important;
}

.card-reveal-card-wrap > .card-rarity-fx.is-stage {
  position: absolute !important;
  inset: -8px !important;
  transform: scale(.78) !important;
  transform-origin: center !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.card-reveal-card-wrap > .card-rarity-fx.is-stage.is-edge-overlay {
  inset: -10px !important;
  z-index: 6 !important;
  transform: scale(.82) !important;
  -webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88% 100%) !important;
  mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88% 100%) !important;
}

@media (max-width: 900px) {
  .card-album.card-album-modal-book .card-book-page {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
  }
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    height: 176px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
    width: 96px !important; min-width: 96px !important; max-width: 96px !important;
  }
}

@media (max-width: 620px) {
  .card-album-modal-stage { width: min(100vw - 10px, 760px) !important; }
  .card-album.card-album-modal-book .card-book-shell { padding: 10px 8px !important; }
  .card-album.card-album-modal-book .card-book-page {
    gap: 8px 4px !important;
    padding: 10px 6px !important;
  }
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty { height: 154px !important; }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }
  .card-reveal-card-wrap { width: min(270px, 72vw) !important; }
}

.fourfun-card-shell > .fourfun-card-body,
.card-inspector-card > .fourfun-card-body,
.card-reveal-front > .fourfun-card-body {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform-style: preserve-3d !important;
}

.fourfun-card-face,
.fourfun-card-back {
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.fourfun-card-full-art,
.fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.fourfun-card-full-art img {
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

.fourfun-card-preset-frame,
.fourfun-card-back-preset {
  z-index: 16 !important;
}

.fourfun-card-holo,
.fourfun-card-gloss,
.fourfun-card-grain,
.fourfun-card-particles {
  z-index: 8 !important;
}

.fourfun-card-header,
.fourfun-card-copy,
.fourfun-card-footer,
.fourfun-card-rarity-seal,
.fourfun-card-quantity {
  z-index: 20 !important;
}

.fourfun-card-header {
  inset: 1.4% 3.35% auto 3.35% !important;
  height: 7.35% !important;
  padding: 0 9% !important;
}

.fourfun-card-title {
  font-size: clamp(11px, 5.0cqw, 16px) !important;
  line-height: .92 !important;
  letter-spacing: .01em !important;
}

.fourfun-card-rarity-seal.reward-rarity-seal {
  top: 7.75% !important;
  right: 3.55% !important;
  height: 4.25% !important;
  min-width: 22% !important;
  max-width: 23.5% !important;
  padding: 0 2.8% !important;
  font-size: clamp(4.7px, 2.15cqw, 6.4px) !important;
  overflow: hidden !important;
}

.fourfun-card-copy {
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 8.2% !important;
  height: 18.3% !important;
  padding: 2.2% 7.6% !important;
}

.fourfun-card-copy p {
  font-size: clamp(7.8px, 3.35cqw, 10.2px) !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 4 !important;
}

.fourfun-card-footer {
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 1.5% !important;
  height: 5.35% !important;
  padding: 0 4.2% !important;
}

.fourfun-card-number { font-size: clamp(7.5px, 3.6cqw, 11px) !important; }
.fourfun-card-footer small { font-size: clamp(6.5px, 2.8cqw, 8.8px) !important; }
.fourfun-card-quantity { font-size: clamp(7px, 3.4cqw, 10.5px) !important; }

.card-album-modal-stage {
  display: grid !important;
  justify-items: center !important;
  width: min(1450px, calc(100vw - 18px)) !important;
  max-width: min(1450px, calc(100vw - 18px)) !important;
}

.card-album.card-album-modal-book .card-album-heading {
  margin-bottom: 6px !important;
}

.card-album.card-album-modal-book .card-book-shell {
  width: min(1360px, calc(100vw - 46px)) !important;
}

.card-album.card-album-modal-book .card-book-page {
  grid-template-columns: repeat(5, minmax(116px, 1fr)) !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 18px 10px !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  width: 116px !important;
  height: 186px !important;
  padding: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot::before,
.card-album.card-album-modal-book .card-book-slot-empty::before {
  inset: 5px !important;
  border-radius: 14px !important;
}

.card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
.card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  aspect-ratio: 991 / 1473 !important;
  height: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline,
.card-album.card-album-modal-book .card-book-slot .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -3px !important;
  transform: scale(.72) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage,
.card-reveal-card-wrap > .card-rarity-fx.is-stage {
  inset: -5px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transform: scale(.92) !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay,
.card-reveal-card-wrap > .card-rarity-fx.is-stage.is-edge-overlay {
  inset: -6px !important;
  z-index: 5 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transform: scale(.95) !important;
  -webkit-mask: linear-gradient(90deg, #000 0 9%, transparent 18% 82%, #000 91% 100%) !important;
  mask: linear-gradient(90deg, #000 0 9%, transparent 18% 82%, #000 91% 100%) !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage .card-rarity-fx-ring,
.card-reveal-card-wrap > .card-rarity-fx.is-stage .card-rarity-fx-ring {
  inset: 3% !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage > i,
.card-reveal-card-wrap > .card-rarity-fx.is-stage > i {
  transform: scale(.88) !important;
}

.card-inspector-titlebar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.card-inspector-titlebar h2 {
  margin: 0 !important;
  text-align: left !important;
}

.card-inspector-heading-seal {
  margin-left: auto !important;
}

.card-inspector-heading-seal.rarity-seal-legendary {
  background-size: 220% 100% !important;
  animation: cardSealLegendaryHolo 2.6s linear infinite !important;
}

.card-reveal-card-wrap {
  aspect-ratio: 991 / 1473 !important;
}

.card-reveal-stack {
  border-radius: 16px !important;
  overflow: visible !important;
}

.card-reveal-back,
.card-reveal-front,
.card-reveal-front .fourfun-card-shell {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.card-reveal-back-image {
  object-fit: contain !important;
}

.card-reveal-back-overlay {
  z-index: 3 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #d8b75a) 24%, transparent), transparent 52%, color-mix(in srgb, var(--card-accent, #d8b75a) 18%, transparent)),
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.12), transparent 20%) !important;
}

.card-reveal-back.rarity-legendary .card-reveal-back-overlay {
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.82), rgba(255,255,255,.18) 12%, transparent 24%),
    linear-gradient(125deg, rgba(255,72,200,.26), rgba(255,198,84,.18), rgba(182,255,116,.18), rgba(86,232,255,.24), rgba(107,123,255,.26), rgba(255,72,200,.26)) !important;
  background-size: auto, 220% 100% !important;
  animation: cardSealLegendaryHolo 2.6s linear infinite !important;
}

.card-pack-image-stage { overflow: visible !important; }
.card-pack-image-wrapper { overflow: visible !important; }
.card-pack-top-handle.card-pack-tear-line {
  background: transparent !important;
  border: 0 !important;
  height: 6.2% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
}
.card-pack-top-handle.card-pack-tear-line::before,
.card-pack-top-handle.card-pack-tear-line::after {
  display: none !important;
}
.card-pack-drag-zone {
  position: absolute !important;
  inset: 0 !important;
}
.card-pack-drag-hint {
  position: absolute !important;
  right: 8px !important;
  bottom: -18px !important;
}
.card-pack-top-peel {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 6.2% !important;
  overflow: hidden !important;
  clip-path: polygon(0 0, var(--tear-progress) 0, calc(var(--tear-progress) + 12px) 100%, 0 100%) !important;
  transform-origin: left top !important;
  transform: translateX(calc(var(--tear-progress) * .08px)) translateY(calc(var(--tear-progress) * -.12px)) rotateZ(calc(var(--tear-progress) * .03deg)) !important;
}
.card-pack-top-peel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

@media (max-width: 900px) {
  .card-album.card-album-modal-book .card-book-shell { width: calc(100vw - 18px) !important; }
  .card-album.card-album-modal-book .card-book-page { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 98px !important;
    height: 160px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-page { gap: 10px 4px !important; }
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 76px !important;
    height: 126px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .fourfun-card-shell {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
  }
}

.card-album.card-album-modal-book .card-book-shell {
  width: min(1360px, calc(100vw - 48px)) !important;
  padding: 18px 16px 14px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.07), transparent 22%),
    radial-gradient(circle at 78% 74%, rgba(255,255,255,.05), transparent 18%),
    repeating-linear-gradient(0deg, rgba(120,93,55,.028) 0 2px, rgba(255,255,255,0) 2px 5px),
    linear-gradient(180deg, rgba(103, 68, 28, .95), rgba(63, 39, 16, .98)) !important;
  box-shadow: inset 0 0 0 1px rgba(216,177,89,.25), 0 18px 46px rgba(0,0,0,.36) !important;
}

.card-album.card-album-modal-book .card-book-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-auto-rows: 1fr !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 16px 10px !important;
  padding: 18px 14px !important;
  min-height: 680px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 16%),
    radial-gradient(circle at 82% 88%, rgba(138, 115, 74, .08), transparent 18%),
    repeating-linear-gradient(90deg, rgba(125,101,65,.018) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #eee7d8, #ece4d3 58%, #e7ddc9) !important;
}

.card-album.card-album-modal-book .card-book-page::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(87,61,29,.045) 100%) !important;
}

.card-album.card-album-modal-book .card-book-spread {
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  position: relative !important;
  width: 118px !important;
  height: 176px !important;
  min-height: 176px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-book-slot::before,
.card-album.card-album-modal-book .card-book-slot-empty::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(121,95,59,.028)) !important;
  border: 1px solid rgba(171, 141, 98, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.card-album.card-album-modal-book .card-book-slot-empty::after {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell,
.card-album.card-album-modal-book .card-book-slot-empty .card-album-card.fourfun-card-shell {
  position: relative !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  aspect-ratio: 991 / 1473 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  inset: -4px !important;
  transform: scale(.75) !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card > .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -5px !important;
  transform: scale(.79) !important;
  z-index: 6 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  -webkit-mask: linear-gradient(90deg, #000 0 9%, transparent 17% 83%, #000 91% 100%) !important;
  mask: linear-gradient(90deg, #000 0 9%, transparent 17% 83%, #000 91% 100%) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card > .fourfun-card-body {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 3 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-face,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-border,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back-frame,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-art-vignette {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art img,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art img {
  object-fit: cover !important;
  object-position: center !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-preset-frame {
  z-index: 15 !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-quantity,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-rarity-seal {
  position: absolute !important;
  z-index: 20 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header {
  top: 1.45% !important;
  left: 3.3% !important;
  right: 3.3% !important;
  height: 7.35% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10% !important;
  background: linear-gradient(180deg, rgba(7,9,9,.38), rgba(7,9,9,.14)) !important;
  backdrop-filter: blur(7px) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-title {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: .95 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-rarity-seal.reward-rarity-seal {
  top: 7.85% !important;
  right: 3.7% !important;
  min-width: 23% !important;
  max-width: 24% !important;
  height: 4.1% !important;
  font-size: 4.9px !important;
  padding: 0 2.8% !important;
  overflow: hidden !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy {
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 8.15% !important;
  height: 18.4% !important;
  display: grid !important;
  place-items: center !important;
  padding: 2.2% 7.6% !important;
  background: linear-gradient(180deg, rgba(10,10,10,.08), rgba(10,10,10,.22)) !important;
  backdrop-filter: blur(8px) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy p {
  margin: 0 !important;
  font-size: 7.7px !important;
  line-height: 1.18 !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer {
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 1.55% !important;
  height: 5.3% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr .55fr !important;
  align-items: center !important;
  padding: 0 4.2% !important;
  background: linear-gradient(180deg, rgba(10,10,10,.08), rgba(10,10,10,.18)) !important;
  backdrop-filter: blur(7px) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-number { font-size: 7.6px !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer small { font-size: 6.1px !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-edition { display: none !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-quantity {
  top: 8.55% !important;
  right: 6.1% !important;
  font-size: 8.4px !important;
  z-index: 22 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .card-album.card-album-modal-book .card-book-shell { width: calc(100vw - 18px) !important; }
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 98px !important;
    height: 150px !important;
    min-height: 150px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .card-album-card.fourfun-card-shell {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 76px !important;
    height: 118px !important;
    min-height: 118px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell,
  .card-album.card-album-modal-book .card-book-slot-empty .card-album-card.fourfun-card-shell {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }
}

.card-album-modal-backdrop {
  padding: 10px !important;
  overflow: auto !important;
}

.card-album-modal-stage {
  width: min(1560px, 98vw) !important;
  max-width: min(1560px, 98vw) !important;
}

.card-album.card-album-modal-book {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-album-heading {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.card-album.card-album-modal-book .card-book-shell {
  width: 100% !important;
  max-width: none !important;
  padding: 18px 16px 16px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.06), transparent 22%),
    radial-gradient(circle at 82% 86%, rgba(255,255,255,.035), transparent 20%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #70491f 0%, #4f3014 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(236,194,104,.24),
    inset 0 0 40px rgba(18,10,3,.20),
    0 22px 48px rgba(0,0,0,.34) !important;
}

.card-album.card-album-modal-book .card-book-spread {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: 560px !important;
}

.card-album.card-album-modal-book .card-book-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: stretch !important;
  gap: 18px 10px !important;
  min-height: 560px !important;
  padding: 24px 14px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.22), transparent 18%),
    radial-gradient(circle at 84% 86%, rgba(116,87,48,.07), transparent 19%),
    repeating-linear-gradient(90deg, rgba(125,95,56,.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(125,95,56,.012) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #f2ebdd 0%, #eee6d7 55%, #e9deca 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(132,92,43,.14),
    inset 0 14px 28px rgba(255,255,255,.10),
    inset 0 -18px 30px rgba(99,65,27,.05) !important;
}

.card-album.card-album-modal-book .card-book-page::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(84,57,25,.04) 100%) !important;
}

.card-album.card-album-modal-book .card-book-gutter {
  width: 18px !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  position: relative !important;
  width: 138px !important;
  height: 210px !important;
  min-width: 138px !important;
  min-height: 210px !important;
  max-width: 138px !important;
  max-height: 210px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-book-slot:not(.card-book-slot-empty)::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 132px !important;
  aspect-ratio: 991 / 1473 !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(163,130,84,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.025)),
    linear-gradient(180deg, rgba(165,128,76,.035), rgba(116,84,43,.025)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    0 6px 15px rgba(77,48,14,.07) !important;
  z-index: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot-empty::before,
.card-album.card-album-modal-book .card-book-slot-empty::after,
.card-album.card-album-modal-book .card-book-slot-empty > * {
  display: none !important;
  content: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell {
  position: relative !important;
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
  height: auto !important;
  aspect-ratio: 991 / 1473 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  z-index: 2 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card > .fourfun-card-body {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 991 / 1473 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  z-index: 3 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-face,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-border,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back-frame,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-art-vignette,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-face::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-face::after,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back::after {
  display: none !important;
  content: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art img,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art {
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art img {
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-preset-frame {
  z-index: 24 !important;
  object-fit: fill !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 26 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer {
  position: absolute !important;
  z-index: 30 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header {
  left: 3.35% !important;
  right: 3.35% !important;
  top: 1.35% !important;
  height: 6.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10% !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff6ea !important;
  text-align: center !important;
  font-size: 10.4px !important;
  font-weight: 700 !important;
  line-height: .96 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.86) !important;
  -webkit-line-clamp: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 8.45% !important;
  right: 3.7% !important;
  left: auto !important;
  width: auto !important;
  min-width: 23.2% !important;
  max-width: 25% !important;
  height: 4.15% !important;
  padding: 0 2.7% !important;
  margin: 0 !important;
  font-size: 4.8px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transform: none !important;
  z-index: 31 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy {
  left: 3.35% !important;
  right: 3.35% !important;
  top: 67.8% !important;
  bottom: auto !important;
  height: 24.9% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 3.5% 8.5% !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy p {
  margin: 0 !important;
  color: rgba(255,248,237,.97) !important;
  font-size: 7.3px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.88) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  overflow: hidden !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer {
  left: 3.35% !important;
  right: 3.35% !important;
  top: 93.45% !important;
  bottom: auto !important;
  height: 5.1% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.25fr .5fr !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 4.1% !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer-left { justify-content: flex-start !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer-center { justify-content: center !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer-right { justify-content: flex-end !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-number { font-size: 7.4px !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer small { font-size: 6.1px !important; }
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-edition { display: none !important; }

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-quantity {
  position: absolute !important;
  top: 8.25% !important;
  right: 6.1% !important;
  z-index: 32 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 8.3px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-holo,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-gloss,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-grain,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-particles {
  z-index: 12 !important;
}

@media (max-width: 1120px) {
  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 112px !important;
    height: 174px !important;
    min-width: 112px !important;
    min-height: 174px !important;
  }
  .card-album.card-album-modal-book .card-book-slot:not(.card-book-slot-empty)::before { width: 108px !important; }
  .card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell,
.card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell:hover,
.card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell:focus-visible {
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-face,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-back,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-preset-frame,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-full-art img {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer,
.card-album.card-album-modal-book .card-book-slot .card-album-card.has-custom-accent .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card.has-custom-accent .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card.has-secondary-accent .fourfun-card-footer,
.card-album.card-album-modal-book .card-book-slot .card-album-card .has-custom-accent .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card .has-custom-accent .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card .has-secondary-accent .fourfun-card-footer {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header::after,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy::after,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-preset-frame {
  transform: translateZ(0) !important;
  will-change: auto !important;
  z-index: 24 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer {
  transform: translateZ(1px) !important;
  z-index: 30 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-header::after,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy::after,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer::before,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer::after {
  display: none !important;
  content: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-title,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-copy p,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-number,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer small,
.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-footer b {
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  position: relative !important;
  display: block !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  aspect-ratio: 985 / 1473 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer !important;
  overflow: visible !important;
  isolation: isolate !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-surface {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: fill !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-foil {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: block !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .2 !important;
  mix-blend-mode: screen !important;
  background: radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.5), transparent 28%) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-foil {
  opacity: .72 !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.86), rgba(255,255,255,.16) 12%, transparent 25%),
    linear-gradient(120deg, rgba(255,76,199,.22), rgba(255,202,82,.18), rgba(84,232,255,.22), rgba(164,108,255,.22), rgba(255,76,199,.22)) !important;
  background-size: auto, 220% 100% !important;
  animation: cardSealLegendaryHolo 2.8s linear infinite !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-title,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-description,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-number,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-date,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-mark,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-quantity,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity {
  position: absolute !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
  left: 10% !important;
  right: 10% !important;
  top: 2.05% !important;
  height: 5.7% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: #fff7eb !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 10.4px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: .95 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-transform: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.88) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.reward-rarity-seal {
  top: 8.55% !important;
  right: 4.05% !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 23.5% !important;
  max-width: 25.5% !important;
  height: 4.05% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2.7% !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  font-size: 4.75px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-indent: .08em !important;
  white-space: nowrap !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-description {
  left: 11.2% !important;
  right: 11.2% !important;
  top: 70.15% !important;
  height: 20.6% !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(255,248,237,.98) !important;
  font-size: 7.25px !important;
  font-weight: 600 !important;
  line-height: 1.17 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-number {
  left: 7.7% !important;
  bottom: 2.45% !important;
  color: #fff5e3 !important;
  font-size: 7.35px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-date {
  left: 31% !important;
  right: 24% !important;
  bottom: 2.5% !important;
  overflow: hidden !important;
  color: #fff5e3 !important;
  font-size: 6.05px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-mark {
  right: 6.2% !important;
  bottom: 2.05% !important;
  color: #fff1b4 !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  text-shadow: 0 0 7px rgba(255,221,125,.42), 0 1px 2px rgba(0,0,0,.85) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-quantity {
  top: 2.3% !important;
  right: 5.6% !important;
  color: #fff0ae !important;
  font-size: 8.2px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  inset: -4px !important;
  z-index: 1 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transform: scale(.75) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -5px !important;
  z-index: 4 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transform: scale(.79) !important;
  -webkit-mask: linear-gradient(90deg, #000 0 9%, transparent 17% 83%, #000 91% 100%) !important;
  mask: linear-gradient(90deg, #000 0 9%, transparent 17% 83%, #000 91% 100%) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card.is-locked .album-preset-card-image {
  filter: grayscale(1) brightness(.46) !important;
}

@media (max-width: 1120px) {
  .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-title {
  font-size: 9.2px !important;
  line-height: .94 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-rarity-seal.reward-rarity-seal {
  top: calc(8.45% - 4px) !important;
  z-index: 34 !important;
}

@media (max-width: 1120px) {
  .card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
  }
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .card-album-card.fourfun-card-shell {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .card-album-card .fourfun-card-title {
    font-size: 7.7px !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
  font-size: 9.15px !important;
  line-height: .93 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.reward-rarity-seal {
  top: calc(8.55% - 4px) !important;
  z-index: 40 !important;
}

@media (max-width: 1120px) {
  .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }

  .card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
    font-size: 7.4px !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-surface {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: block !important;
  overflow: hidden !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-frame {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 20 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-image,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-foil {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
  top: calc(2.05% - 1px) !important;
  font-size: 8.35px !important;
  line-height: .92 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.reward-rarity-seal {
  z-index: 50 !important;
  overflow: visible !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.rarity-seal-common {
  color: #3d3325 !important;
  background: linear-gradient(135deg, #fff8e8, #c7b99d) !important;
  border-color: rgba(91,73,48,.58) !important;
  clip-path: polygon(9px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 9px 100%, 0 50%) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.rarity-seal-uncommon {
  color: #10331d !important;
  background: linear-gradient(135deg, #d9ffe3, #55b979) !important;
  border-color: rgba(111,238,154,.62) !important;
  clip-path: polygon(8px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.rarity-seal-rare {
  color: #f6fbff !important;
  background: linear-gradient(135deg, #dceeff, #4588e8) !important;
  border-color: rgba(143,208,255,.66) !important;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 30%, 100% 70%, calc(100% - 10px) 100%, 10px 100%, 0 70%, 0 30%) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.rarity-seal-epic {
  color: #fff6ff !important;
  background: linear-gradient(135deg, #f5dfff, #9c59ed 58%, #4c166f) !important;
  border-color: rgba(229,168,255,.72) !important;
  clip-path: polygon(11px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 11px 100%, 0 50%) !important;
  animation: cardSealEpicShimmer 3.8s linear infinite !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity.rarity-seal-legendary {
  color: #fffef8 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 36%),
    linear-gradient(90deg, #ff4aae, #ffbf42, #50ddff, #a86cff, #ff4aae) !important;
  background-size: auto, 220% 100% !important;
  border-color: rgba(255,247,255,.72) !important;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%) !important;
  animation: cardSealLegendaryHolo 2.8s linear infinite !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  width: 134px !important;
  height: 202px !important;
  min-width: 134px !important;
  min-height: 202px !important;
}

@media (max-width: 1120px) {
  .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }

  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 128px !important;
    height: 196px !important;
    min-width: 128px !important;
    min-height: 196px !important;
  }
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  .card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
    font-size: 6.8px !important;
  }

  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    width: 86px !important;
    height: 132px !important;
    min-width: 86px !important;
    min-height: 132px !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-surface,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-image,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-frame,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-foil {
  border-radius: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor {
  position: absolute !important;
  top: calc(8.45% - 4px) !important;
  right: 3.7% !important;
  z-index: 50 !important;
  width: 64px !important;
  height: 22px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 46px !important;
  max-width: none !important;
  height: 18px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  font-size: 6.35px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-indent: .12em !important;
  transform: scale(.58) !important;
  transform-origin: top right !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-epic {
  min-width: 52px !important;
  height: 18px !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-legendary {
  min-width: 58px !important;
  height: 19px !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-common {
  clip-path: polygon(10px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 10px 100%, 0 50%) !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-uncommon {
  clip-path: polygon(8px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%) !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-rare {
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 30%, 100% 70%, calc(100% - 12px) 100%, 12px 100%, 0 70%, 0 30%) !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-epic {
  clip-path: polygon(14px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 14px 100%, 0 50%) !important;
}

.card-album.card-album-modal-book .card-book-slot
.album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-legendary {
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-surface,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-frame,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-image,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-image img,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-foil {
  border-radius: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor {
  top: calc(8.45% - 2px) !important;
  right: calc(3.7% - 1px) !important;
  width: auto !important;
  height: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.reward-rarity-seal {
  min-width: unset !important;
  max-width: unset !important;
  width: auto !important;
  height: auto !important;
  padding-inline: inherit !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: scale(.58) !important;
  transform-origin: top right !important;
  opacity: 1 !important;
  filter: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.reward-rarity-seal::before,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.reward-rarity-seal::after {
  opacity: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-common,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-uncommon,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-rare,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-epic,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-legendary {
  clip-path: revert !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor > .fourfun-card-rarity-seal.rarity-seal-legendary {
  color: #fff6d7 !important;
  border-color: #ffd978 !important;
  background:
    linear-gradient(180deg, rgba(255,250,218,.34), transparent 37%),
    linear-gradient(135deg, #d36d09 0%, #f6b62d 48%, #9a3f05 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(83,28,0,.35),
    0 0 15px rgba(255,172,32,.38),
    0 4px 10px rgba(0,0,0,.34) !important;
  opacity: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot {
  padding-top: 16px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  z-index: 60 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 60 !important;
  transform: scale(.72) !important;
  transform-origin: center top !important;
  opacity: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-rarity-anchor,
.card-album.card-album-modal-book .card-book-slot .album-preset-card .fourfun-card-rarity-seal {
  display: none !important;
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot {
    padding-top: 12px !important;
  }
  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
    transform: scale(.62) !important;
  }
}

.card-album.card-album-modal-book .card-book-slot {
  padding-top: 0 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  z-index: 80 !important;
  width: 0 !important;
  height: 0 !important;
  display: block !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) scale(.84) !important;
  transform-origin: center top !important;
  opacity: 1 !important;
  z-index: 80 !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot {
    padding-top: 0 !important;
  }

  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
    top: -8px !important;
  }

  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
    transform: translateX(-50%) scale(.72) !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
  top: -7px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
  transform: translateX(-50%) scale(.92) !important;
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
    top: -5px !important;
  }

  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
    transform: translateX(-50%) scale(.80) !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
  transform: scale(.88) !important;
  font-size: 7.3px !important;
  min-width: 56px !important;
  height: 20px !important;
  padding: 0 8px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-epic {
  min-width: 62px !important;
  height: 21px !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary {
  min-width: 70px !important;
  height: 22px !important;
  font-size: 7.6px !important;
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
    transform: scale(.76) !important;
    font-size: 6.4px !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
  left: 50% !important;
  right: auto !important;
  justify-content: center !important;
  transform: translateX(-50%) !important;
  width: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
  transform: translateX(0) scale(.88) !important;
  transform-origin: center top !important;
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
    transform: translateX(0) scale(.76) !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
  position: absolute !important;
  top: -7px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 80 !important;
}

.card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
  position: relative !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 auto !important;
  transform: scale(.88) !important;
  transform-origin: center top !important;
}

@media (max-width: 640px) {
  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity {
    top: -5px !important;
  }

  .card-album.card-album-modal-book .card-book-slot .card-book-slot-rarity > .reward-rarity-seal {
    transform: scale(.76) !important;
  }
}

.card-album.card-album-modal-book .card-book-shell {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 210, 150, .12), transparent 26%),
    radial-gradient(circle at 82% 88%, rgba(173, 38, 58, .10), transparent 20%),
    linear-gradient(180deg, rgba(84, 45, 25, .98), rgba(53, 26, 18, .99) 50%, rgba(28, 15, 13, 1)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(243, 201, 123, .22),
    inset 0 0 0 5px rgba(89, 49, 28, .82),
    inset 0 0 32px rgba(0, 0, 0, .38),
    0 26px 60px rgba(0, 0, 0, .42) !important;
}

.card-album.card-album-modal-book .card-book-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 26px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 0 0, rgba(255, 235, 196, .16), transparent 14%),
    radial-gradient(circle at 100% 0, rgba(255, 235, 196, .16), transparent 14%),
    radial-gradient(circle at 0 100%, rgba(255, 235, 196, .16), transparent 14%),
    radial-gradient(circle at 100% 100%, rgba(255, 235, 196, .16), transparent 14%);
  box-shadow:
    inset 0 0 0 1px rgba(225, 191, 120, .28),
    inset 0 0 0 10px rgba(64, 30, 20, .38) !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  content: "" !important;
  position: absolute !important;
  inset: 24px !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  border: 1px solid rgba(208, 172, 109, .16) !important;
  opacity: .8 !important;
}

.card-album.card-album-modal-book .card-book-spread {
  position: relative !important;
}

.card-album.card-album-modal-book .card-book-page {
  position: relative !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.26), transparent 14%),
    radial-gradient(circle at 80% 80%, rgba(107, 59, 39, .08), transparent 18%),
    linear-gradient(180deg, rgba(245, 239, 224, .98), rgba(234, 224, 206, .98) 54%, rgba(227, 215, 196, .98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(139, 101, 55, .12),
    inset 0 0 22px rgba(112, 75, 44, .08) !important;
}

.card-album.card-album-modal-book .card-book-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(113, 74, 45, .045) 0, transparent 8%, transparent 92%, rgba(113, 74, 45, .045) 100%),
    repeating-linear-gradient(0deg, rgba(118, 94, 61, .022) 0 2px, transparent 2px 6px) !important;
  mix-blend-mode: multiply !important;
}

.card-album.card-album-modal-book .card-book-page::after {
  content: "✦" !important;
  position: absolute !important;
  bottom: 12px !important;
  right: 18px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: rgba(132, 84, 44, .24) !important;
  text-shadow: 0 0 10px rgba(255, 222, 160, .12) !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-page.card-book-page-left::after {
  left: 18px !important;
  right: auto !important;
}

.card-album.card-album-modal-book .card-book-gutter {
  position: relative !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(80, 45, 30, .98), rgba(43, 23, 20, 1) 46%, rgba(77, 40, 29, .98)) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 230, 185, .10),
    inset -1px 0 0 rgba(255, 230, 185, .08),
    inset 0 0 16px rgba(0,0,0,.34),
    0 0 18px rgba(0,0,0,.18) !important;
}

.card-album.card-album-modal-book .card-book-gutter::before,
.card-album.card-album-modal-book .card-book-gutter::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #f6e4b7, #7f5835 72%) !important;
  box-shadow: 0 0 0 1px rgba(48, 24, 15, .56), 0 1px 4px rgba(0,0,0,.28) !important;
}

.card-album.card-album-modal-book .card-book-gutter::before { top: 14px !important; }
.card-album.card-album-modal-book .card-book-gutter::after { bottom: 14px !important; }

.card-album.card-album-modal-book .card-book-slot::before,
.card-album.card-album-modal-book .card-book-slot-empty::before {
  inset: 6px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(86, 48, 28, .035), rgba(25, 13, 11, .02)) !important;
  border: 1px solid rgba(167, 129, 77, .20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 12px rgba(88, 55, 30, .06) !important;
}

.card-album.card-album-modal-book .card-book-slot::after,
.card-album.card-album-modal-book .card-book-slot-empty::after {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 12px !important;
  pointer-events: none !important;
  border: 1px solid rgba(178, 145, 87, .10) !important;
  opacity: .55 !important;
}

.card-album.card-album-modal-book .card-book-pagination .btn {
  background:
    linear-gradient(180deg, rgba(81, 43, 29, .92), rgba(36, 19, 17, .95)) !important;
  border-color: rgba(190, 153, 93, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 16px rgba(0,0,0,.18) !important;
}

.card-album.card-album-modal-book .card-book-pagination span {
  letter-spacing: .16em !important;
  color: rgba(245, 228, 187, .92) !important;
}

.card-album.card-album-modal-book .card-book-shell {
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 20% 16%, rgba(146, 54, 54, .18), transparent 20%),
    radial-gradient(circle at 78% 20%, rgba(110, 74, 34, .14), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(112, 31, 60, .12), transparent 28%),
    linear-gradient(180deg, rgba(48, 25, 22, 1), rgba(20, 10, 13, 1) 48%, rgba(44, 22, 21, 1)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(238, 210, 164, .16),
    inset 0 0 0 7px rgba(81, 36, 26, .96),
    inset 0 0 0 12px rgba(20, 8, 12, .72),
    inset 0 0 36px rgba(0, 0, 0, .42),
    0 28px 70px rgba(0, 0, 0, .46) !important;
}

.card-album.card-album-modal-book .card-book-shell::before {
  inset: 9px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 16px 16px, rgba(0,0,0,0) 0 15px, rgba(214,180,126,.38) 15px 16px, rgba(0,0,0,0) 16px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(0,0,0,0) 0 15px, rgba(214,180,126,.38) 15px 16px, rgba(0,0,0,0) 16px),
    radial-gradient(circle at 16px calc(100% - 16px), rgba(0,0,0,0) 0 15px, rgba(214,180,126,.38) 15px 16px, rgba(0,0,0,0) 16px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), rgba(0,0,0,0) 0 15px, rgba(214,180,126,.38) 15px 16px, rgba(0,0,0,0) 16px),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 30%, transparent 70%, rgba(255,255,255,.04)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(227, 193, 128, .28),
    inset 0 0 0 13px rgba(63, 29, 25, .48),
    inset 0 0 0 14px rgba(221, 184, 120, .08) !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  inset: 22px !important;
  border-radius: 22px !important;
  background:
    conic-gradient(from 180deg at 24px 24px, rgba(225,189,129,.18) 0 25%, transparent 25% 100%),
    conic-gradient(from 270deg at calc(100% - 24px) 24px, rgba(225,189,129,.18) 0 25%, transparent 25% 100%),
    conic-gradient(from 90deg at 24px calc(100% - 24px), rgba(225,189,129,.18) 0 25%, transparent 25% 100%),
    conic-gradient(from 0deg at calc(100% - 24px) calc(100% - 24px), rgba(225,189,129,.18) 0 25%, transparent 25% 100%) !important;
  border: 1px solid rgba(196, 160, 104, .2) !important;
  opacity: .95 !important;
}

.card-album.card-album-modal-book .card-book-spread::before,
.card-album.card-album-modal-book .card-book-spread::after {
  content: "✦" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 58px !important;
  text-align: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(220, 185, 126, .62) !important;
  text-shadow: 0 0 10px rgba(170, 80, 120, .14), 0 0 3px rgba(255, 223, 170, .22) !important;
  letter-spacing: .25em !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.card-album.card-album-modal-book .card-book-spread::before { top: 8px !important; }
.card-album.card-album-modal-book .card-book-spread::after { bottom: 8px !important; }

.card-album.card-album-modal-book .card-book-page {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 15%),
    radial-gradient(circle at 82% 84%, rgba(116, 72, 44, .08), transparent 16%),
    linear-gradient(180deg, #f0e8d8 0%, #e7dcc8 52%, #e0d2bb 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(101, 68, 39, .14),
    inset 0 0 0 8px rgba(112, 76, 43, .035),
    inset 0 0 28px rgba(99, 62, 38, .08) !important;
}

.card-album.card-album-modal-book .card-book-page::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 28px 28px, rgba(0,0,0,0) 0 18px, rgba(121,72,71,.20) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at calc(100% - 28px) 28px, rgba(0,0,0,0) 0 18px, rgba(121,72,71,.20) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at 28px calc(100% - 28px), rgba(0,0,0,0) 0 18px, rgba(121,72,71,.20) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at calc(100% - 28px) calc(100% - 28px), rgba(0,0,0,0) 0 18px, rgba(121,72,71,.20) 18px 19px, rgba(0,0,0,0) 19px),
    linear-gradient(90deg, rgba(116, 79, 54, .045) 0, transparent 8%, transparent 92%, rgba(116, 79, 54, .045) 100%),
    repeating-linear-gradient(0deg, rgba(121, 95, 69, .022) 0 2px, transparent 2px 6px) !important;
}

.card-album.card-album-modal-book .card-book-page::after {
  content: "❦" !important;
  bottom: 12px !important;
  right: 20px !important;
  font-size: 16px !important;
  color: rgba(117, 69, 57, .28) !important;
  text-shadow: none !important;
}

.card-album.card-album-modal-book .card-book-page.card-book-page-left::after {
  left: 20px !important;
  right: auto !important;
}

.card-album.card-album-modal-book .card-book-gutter {
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(174, 110, 75, .28), transparent 18%),
    radial-gradient(circle at 50% 82%, rgba(174, 110, 75, .24), transparent 16%),
    linear-gradient(180deg, rgba(70, 37, 33, 1), rgba(21, 11, 16, 1) 48%, rgba(67, 34, 31, 1)) !important;
  box-shadow:
    inset 1px 0 0 rgba(242, 210, 164, .10),
    inset -1px 0 0 rgba(242, 210, 164, .10),
    inset 0 0 0 2px rgba(95, 48, 38, .55),
    inset 0 0 18px rgba(0,0,0,.42),
    0 0 20px rgba(0,0,0,.2) !important;
}

.card-album.card-album-modal-book .card-book-gutter::before,
.card-album.card-album-modal-book .card-book-gutter::after {
  width: 10px !important;
  height: 10px !important;
  background: radial-gradient(circle at 35% 35%, #f5dfb3, #7d4d36 70%) !important;
}

.card-album.card-album-modal-book .card-book-gutter::before {
  top: 18px !important;
  box-shadow:
    0 0 0 1px rgba(41,18,17,.6),
    0 1px 4px rgba(0,0,0,.28),
    0 92px 0 -1px rgba(132,88,58,.94),
    0 184px 0 -1px rgba(132,88,58,.94),
    0 276px 0 -1px rgba(132,88,58,.94),
    0 368px 0 -1px rgba(132,88,58,.94),
    0 460px 0 -1px rgba(132,88,58,.94) !important;
}

.card-album.card-album-modal-book .card-book-gutter::after {
  bottom: 18px !important;
  box-shadow: 0 0 0 1px rgba(41,18,17,.6), 0 1px 4px rgba(0,0,0,.28) !important;
}

.card-album.card-album-modal-book .card-book-slot::before,
.card-album.card-album-modal-book .card-book-slot-empty::before {
  inset: 6px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(129, 85, 52, .045), rgba(46, 24, 22, .02)) !important;
  border: 1px solid rgba(171, 128, 76, .18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 10px rgba(90, 53, 31, .06) !important;
}

.card-album.card-album-modal-book .card-book-slot::after,
.card-album.card-album-modal-book .card-book-slot-empty::after {
  inset: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(151, 111, 67, .12) !important;
  opacity: .65 !important;
}

.card-album.card-album-modal-book .card-book-shell {
  border-radius: 36px !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(166, 67, 67, .16), transparent 18%),
    radial-gradient(circle at 88% 18%, rgba(150, 119, 60, .11), transparent 16%),
    radial-gradient(circle at 50% 100%, rgba(107, 39, 74, .10), transparent 26%),
    linear-gradient(180deg, rgba(45, 23, 23, 1), rgba(18, 10, 13, 1) 50%, rgba(39, 20, 21, 1)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(238, 209, 164, .14),
    inset 0 0 0 4px rgba(113, 62, 42, .95),
    inset 0 0 0 8px rgba(31, 15, 18, .92),
    inset 0 0 0 9px rgba(176, 135, 78, .18),
    inset 0 0 46px rgba(0, 0, 0, .44),
    0 30px 72px rgba(0, 0, 0, .48) !important;
}

.card-album.card-album-modal-book .card-book-shell::before {
  inset: 8px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 28px 28px, rgba(0,0,0,0) 0 18px, rgba(216,183,122,.58) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at calc(100% - 28px) 28px, rgba(0,0,0,0) 0 18px, rgba(216,183,122,.58) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at 28px calc(100% - 28px), rgba(0,0,0,0) 0 18px, rgba(216,183,122,.58) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at calc(100% - 28px) calc(100% - 28px), rgba(0,0,0,0) 0 18px, rgba(216,183,122,.58) 18px 19px, rgba(0,0,0,0) 19px),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 24%, transparent 74%, rgba(255,255,255,.04)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(227, 193, 128, .34),
    inset 0 0 0 12px rgba(58, 28, 25, .56),
    inset 0 0 0 13px rgba(224, 187, 123, .08) !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  inset: 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(202, 168, 107, .18) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, transparent 32px, rgba(209, 173, 112, .14) 32px 33px, transparent 33px calc(100% - 33px), rgba(209, 173, 112, .14) calc(100% - 33px) calc(100% - 32px), transparent calc(100% - 32px)),
    linear-gradient(180deg, transparent 24px, rgba(209, 173, 112, .12) 24px 25px, transparent 25px calc(100% - 25px), rgba(209, 173, 112, .12) calc(100% - 25px) calc(100% - 24px), transparent calc(100% - 24px)),
    radial-gradient(circle at 46px 46px, rgba(0,0,0,0) 0 15px, rgba(209,173,112,.28) 15px 16px, rgba(0,0,0,0) 16px),
    radial-gradient(circle at calc(100% - 46px) 46px, rgba(0,0,0,0) 0 15px, rgba(209,173,112,.28) 15px 16px, rgba(0,0,0,0) 16px),
    radial-gradient(circle at 46px calc(100% - 46px), rgba(0,0,0,0) 0 15px, rgba(209,173,112,.28) 15px 16px, rgba(0,0,0,0) 16px),
    radial-gradient(circle at calc(100% - 46px) calc(100% - 46px), rgba(0,0,0,0) 0 15px, rgba(209,173,112,.28) 15px 16px, rgba(0,0,0,0) 16px) !important;
}

.card-album.card-album-modal-book .card-book-spread {
  position: relative !important;
}

.card-album.card-album-modal-book .card-book-spread::before,
.card-album.card-album-modal-book .card-book-spread::after {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  bottom: -6px !important;
  width: 92px !important;
  pointer-events: none !important;
  z-index: 6 !important;
  background:
    radial-gradient(circle at 16px 16px, rgba(0,0,0,0) 0 18px, rgba(221,188,127,.55) 18px 19px, rgba(0,0,0,0) 19px),
    radial-gradient(circle at 16px calc(100% - 16px), rgba(0,0,0,0) 0 18px, rgba(221,188,127,.55) 18px 19px, rgba(0,0,0,0) 19px),
    linear-gradient(180deg, rgba(221,188,127,.26), rgba(221,188,127,.04) 14%, rgba(221,188,127,.04) 86%, rgba(221,188,127,.26)),
    radial-gradient(circle at 50% 24%, rgba(181, 75, 116, .16), transparent 18%),
    radial-gradient(circle at 50% 76%, rgba(181, 75, 116, .16), transparent 18%) !important;
  opacity: .92 !important;
}

.card-album.card-album-modal-book .card-book-spread::before {
  left: -6px !important;
  border-radius: 28px 0 0 28px !important;
  clip-path: polygon(0 0, 86% 0, 74% 10%, 84% 20%, 72% 32%, 84% 50%, 72% 68%, 84% 80%, 74% 90%, 86% 100%, 0 100%) !important;
}

.card-album.card-album-modal-book .card-book-spread::after {
  right: -6px !important;
  border-radius: 0 28px 28px 0 !important;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 26% 90%, 16% 80%, 28% 68%, 16% 50%, 28% 32%, 16% 20%, 26% 10%) !important;
}

.card-album.card-album-modal-book .card-book-gutter {
  background:
    radial-gradient(circle at 50% 12%, rgba(208, 171, 109, .18), transparent 12%),
    radial-gradient(circle at 50% 88%, rgba(208, 171, 109, .18), transparent 12%),
    linear-gradient(180deg, rgba(70, 37, 33, 1), rgba(21, 11, 16, 1) 48%, rgba(67, 34, 31, 1)) !important;
  box-shadow:
    inset 1px 0 0 rgba(242, 210, 164, .10),
    inset -1px 0 0 rgba(242, 210, 164, .10),
    inset 0 0 0 2px rgba(95, 48, 38, .55),
    inset 0 0 18px rgba(0,0,0,.42),
    0 0 20px rgba(0,0,0,.2) !important;
}

.card-album.card-album-modal-book .card-book-pagination .btn {
  background: linear-gradient(180deg, rgba(74, 34, 30, .94), rgba(25, 14, 17, .96)) !important;
  border-color: rgba(193, 155, 92, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.22) !important;
}

.card-album.card-album-modal-book .card-book-shell {
  background:
    radial-gradient(circle at 14% 14%, rgba(140, 42, 42, .22), transparent 18%),
    radial-gradient(circle at 86% 16%, rgba(165, 120, 57, .12), transparent 16%),
    radial-gradient(circle at 50% 102%, rgba(110, 33, 78, .15), transparent 28%),
    linear-gradient(180deg, #321c1d 0%, #171015 48%, #291719 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(236, 209, 161, .14),
    inset 0 0 0 5px rgba(99, 54, 39, .95),
    inset 0 0 0 13px rgba(23, 12, 15, .95),
    inset 0 0 0 14px rgba(183, 144, 85, .18),
    inset 0 0 62px rgba(0,0,0,.48),
    0 30px 72px rgba(0,0,0,.5) !important;
}

.card-album.card-album-modal-book .card-book-shell::before {
  inset: 8px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 28%, transparent 72%, rgba(255,255,255,.04)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 760'%3E%3Cg fill='none' stroke='%23ddb97a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.92'%3E%3Crect x='8' y='8' width='1184' height='744' rx='28'/%3E%3Crect x='28' y='28' width='1144' height='704' rx='22' opacity='.75'/%3E%3Cpath d='M52 136c18-64 66-86 124-86h98M136 52c-64 18-86 66-86 124v98'/%3E%3Cpath d='M115 115c12-30 36-47 72-47h54M115 115c-30 12-47 36-47 72v54' opacity='.85'/%3E%3Cpath d='M1148 136c-18-64-66-86-124-86h-98M1064 52c64 18 86 66 86 124v98'/%3E%3Cpath d='M1085 115c-12-30-36-47-72-47h-54M1085 115c30 12 47 36 47 72v54' opacity='.85'/%3E%3Cpath d='M52 624c18 64 66 86 124 86h98M136 708c-64-18-86-66-86-124v-98'/%3E%3Cpath d='M115 645c12 30 36 47 72 47h54M115 645c-30-12-47-36-47-72v-54' opacity='.85'/%3E%3Cpath d='M1148 624c-18 64-66 86-124 86h-98M1064 708c64-18 86-66 86-124v-98'/%3E%3Cpath d='M1085 645c-12 30-36 47-72 47h-54M1085 645c30-12 47-36 47-72v-54' opacity='.85'/%3E%3Cpath d='M485 42c32 22 54 22 115 22s83 0 115-22'/%3E%3Cpath d='M512 60l88 46 88-46' opacity='.85'/%3E%3Cpath d='M485 718c32-22 54-22 115-22s83 0 115 22'/%3E%3Cpath d='M512 700l88-46 88 46' opacity='.85'/%3E%3Cpath d='M54 378c24-18 46-30 74-30 28 0 50 12 74 30-24 18-46 30-74 30-28 0-50-12-74-30z'/%3E%3Cpath d='M1146 378c-24-18-46-30-74-30-28 0-50 12-74 30 24 18 46 30 74 30 28 0 50-12 74-30z'/%3E%3Ccircle cx='600' cy='46' r='10'/%3E%3Ccircle cx='600' cy='714' r='10'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(226,191,126,.28),
    inset 0 0 0 10px rgba(53,26,24,.46) !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  inset: 16px !important;
  border-radius: 26px !important;
  border: none !important;
  opacity: 1 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 760'%3E%3Cg fill='none' stroke='%23cfa566' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 22h900' stroke-width='1.6' opacity='.45'/%3E%3Cpath d='M150 738h900' stroke-width='1.6' opacity='.45'/%3E%3Cpath d='M22 120v520' stroke-width='1.6' opacity='.4'/%3E%3Cpath d='M1178 120v520' stroke-width='1.6' opacity='.4'/%3E%3Cpath d='M116 82c22-10 43-22 61-48 18 26 39 38 61 48-22 10-43 22-61 48-18-26-39-38-61-48z' stroke-width='2.6'/%3E%3Cpath d='M1023 82c22-10 43-22 61-48 18 26 39 38 61 48-22 10-43 22-61 48-18-26-39-38-61-48z' stroke-width='2.6'/%3E%3Cpath d='M116 678c22-10 43-22 61-48 18 26 39 38 61 48-22 10-43 22-61 48-18-26-39-38-61-48z' stroke-width='2.6'/%3E%3Cpath d='M1023 678c22-10 43-22 61-48 18 26 39 38 61 48-22 10-43 22-61 48-18-26-39-38-61-48z' stroke-width='2.6'/%3E%3Cpath d='M480 52c44-26 69-26 120 0 51-26 76-26 120 0' stroke-width='2.8'/%3E%3Cpath d='M520 84c24-12 44-24 80-24s56 12 80 24' stroke-width='1.8' opacity='.8'/%3E%3Cpath d='M480 708c44 26 69 26 120 0 51 26 76 26 120 0' stroke-width='2.8'/%3E%3Cpath d='M520 676c24 12 44 24 80 24s56-12 80-24' stroke-width='1.8' opacity='.8'/%3E%3Cpath d='M52 214c34-16 52-28 72-60 20 32 38 44 72 60-34 16-52 28-72 60-20-32-38-44-72-60z' stroke-width='2.6'/%3E%3Cpath d='M1076 214c34-16 52-28 72-60 20 32 38 44 72 60-34 16-52 28-72 60-20-32-38-44-72-60z' stroke-width='2.6'/%3E%3Cpath d='M52 546c34-16 52-28 72-60 20 32 38 44 72 60-34 16-52 28-72 60-20-32-38-44-72-60z' stroke-width='2.6'/%3E%3Cpath d='M1076 546c34-16 52-28 72-60 20 32 38 44 72 60-34 16-52 28-72 60-20-32-38-44-72-60z' stroke-width='2.6'/%3E%3Ccircle cx='600' cy='52' r='9' stroke-width='2.2'/%3E%3Ccircle cx='600' cy='708' r='9' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
}

.card-album.card-album-modal-book .card-book-spread::before,
.card-album.card-album-modal-book .card-book-spread::after {
  content: "" !important;
  position: absolute !important;
  top: 22px !important;
  bottom: 22px !important;
  width: 108px !important;
  pointer-events: none !important;
  z-index: 6 !important;
  opacity: .95 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.card-album.card-album-modal-book .card-book-spread::before {
  left: -2px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 680'%3E%3Cg fill='none' stroke='%23d8b274' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.94'%3E%3Cpath d='M15 12h53c8 0 16 4 22 10l12 12v612l-12 12c-6 6-14 10-22 10H15'/%3E%3Cpath d='M30 34c0-8 7-15 15-15h16M30 646c0 8 7 15 15 15h16' opacity='.7'/%3E%3Cpath d='M26 102c18-10 28-18 40-36 12 18 22 26 40 36-18 10-28 18-40 36-12-18-22-26-40-36z'/%3E%3Cpath d='M26 578c18-10 28-18 40-36 12 18 22 26 40 36-18 10-28 18-40 36-12-18-22-26-40-36z'/%3E%3Cpath d='M20 340c26-14 40-26 56-56 16 30 30 42 56 56-26 14-40 26-56 56-16-30-30-42-56-56z' stroke-width='3'/%3E%3Cpath d='M52 150v380' opacity='.35'/%3E%3Cpath d='M78 150v380' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-spread::after {
  right: -2px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 680'%3E%3Cg fill='none' stroke='%23d8b274' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.94'%3E%3Cpath d='M105 12H52c-8 0-16 4-22 10L18 34v612l12 12c6 6 14 10 22 10h53'/%3E%3Cpath d='M90 34c0-8-7-15-15-15H59M90 646c0 8-7 15-15 15H59' opacity='.7'/%3E%3Cpath d='M94 102c-18-10-28-18-40-36-12 18-22 26-40 36 18 10 28 18 40 36 12-18 22-26 40-36z'/%3E%3Cpath d='M94 578c-18-10-28-18-40-36-12 18-22 26-40 36 18 10 28 18 40 36 12-18 22-26 40-36z'/%3E%3Cpath d='M100 340c-26-14-40-26-56-56-16 30-30 42-56 56 26 14 40 26 56 56 16-30 30-42 56-56z' stroke-width='3'/%3E%3Cpath d='M68 150v380' opacity='.35'/%3E%3Cpath d='M42 150v380' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-shell {
  overflow: visible !important;
  background:
    radial-gradient(circle at 14% 14%, rgba(140, 42, 42, .18), transparent 18%),
    radial-gradient(circle at 86% 16%, rgba(165, 120, 57, .10), transparent 16%),
    radial-gradient(circle at 50% 102%, rgba(110, 33, 78, .10), transparent 28%),
    linear-gradient(180deg, #311d1e 0%, #171015 50%, #27181a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(236, 209, 161, .12),
    inset 0 0 0 5px rgba(101, 56, 41, .95),
    inset 0 0 0 11px rgba(24, 12, 16, .95),
    inset 0 0 0 12px rgba(186, 145, 87, .16),
    inset 0 0 52px rgba(0,0,0,.46),
    0 30px 72px rgba(0,0,0,.5) !important;
}

.card-album.card-album-modal-book .card-book-shell::before,
.card-album.card-album-modal-book .card-book-shell::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-spread,
.card-album.card-album-modal-book .card-book-page,
.card-album.card-album-modal-book .card-book-gutter {
  position: relative !important;
  z-index: 2 !important;
}

.card-album.card-album-modal-book .card-book-shell::before {
  inset: 8px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 28%, transparent 72%, rgba(255,255,255,.04)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 760'%3E%3Cg fill='none' stroke='%23ddb97a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Crect x='8' y='8' width='1184' height='744' rx='28'/%3E%3Crect x='26' y='26' width='1148' height='708' rx='22' opacity='.64'/%3E%3Cpath d='M52 136c18-64 66-86 124-86h98M136 52c-64 18-86 66-86 124v98'/%3E%3Cpath d='M1148 136c-18-64-66-86-124-86h-98M1064 52c64 18 86 66 86 124v98'/%3E%3Cpath d='M52 624c18 64 66 86 124 86h98M136 708c-64-18-86-66-86-124v-98'/%3E%3Cpath d='M1148 624c-18 64-66 86-124 86h-98M1064 708c64-18 86-66 86-124v-98'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(226,191,126,.28),
    inset 0 0 0 10px rgba(53,26,24,.46) !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  content: "" !important;
  inset: 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(202, 168, 107, .18) !important;
  background: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(208, 173, 112, .10),
    inset 0 0 0 18px rgba(0,0,0,0) !important;
}

.card-album.card-album-modal-book .card-book-spread::before,
.card-album.card-album-modal-book .card-book-spread::after {
  content: "" !important;
  position: absolute !important;
  top: 86px !important;
  bottom: 86px !important;
  width: 42px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  opacity: .92 !important;
}

.card-album.card-album-modal-book .card-book-spread::before {
  left: -30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 560'%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.96'%3E%3Cpath d='M24 4c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 522c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 214c10 28 16 38 32 54-16 16-22 26-32 54-10-28-16-38-32-54 16-16 22-26 32-54z' stroke-width='2.8'/%3E%3Cpath d='M24 110v340' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-spread::after {
  right: -30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 560'%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.96'%3E%3Cpath d='M24 4c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 522c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 214c10 28 16 38 32 54-16 16-22 26-32 54-10-28-16-38-32-54 16-16 22-26 32-54z' stroke-width='2.8'/%3E%3Cpath d='M24 110v340' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") !important;
}

@keyframes cardAlbumEmeraldPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(95, 255, 175, 0)) drop-shadow(0 0 4px rgba(68, 196, 129, .20));
    opacity: .90;
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(88, 245, 166, .40)) drop-shadow(0 0 16px rgba(34, 140, 96, .26));
    opacity: 1;
  }
}

.card-album.card-album-modal-book .card-book-spread::before,
.card-album.card-album-modal-book .card-book-spread::after {
  top: 86px !important;
  bottom: 86px !important;
  width: 46px !important;
  animation: cardAlbumEmeraldPulse 4.8s ease-in-out infinite !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

.card-album.card-album-modal-book .card-book-spread::before {
  left: -32px !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(223,255,236,.95) 0 1px, rgba(126,255,197,.92) 1px 3px, rgba(38,176,111,.95) 3px 7px, rgba(10,83,54,.96) 7px 10px, transparent 10px),
    radial-gradient(circle at 50% 50%, rgba(85,255,175,.30) 0 16px, transparent 17px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 560'%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.96'%3E%3Cpath d='M24 4c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 522c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 214c10 28 16 38 32 54-16 16-22 26-32 54-10-28-16-38-32-54 16-16 22-26 32-54z' stroke-width='2.8'/%3E%3Cpath d='M24 110v340' opacity='.45'/%3E%3C/g%3E%3Cg fill='url(%23gem)' stroke='%23e9d9a4' stroke-width='1.25'%3E%3Cpolygon points='24,250 31,278 24,306 17,278'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='gem' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d8ffe5'/%3E%3Cstop offset='.38' stop-color='%2354ef9c'/%3E%3Cstop offset='1' stop-color='%23146a42'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-spread::after {
  right: -32px !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(223,255,236,.95) 0 1px, rgba(126,255,197,.92) 1px 3px, rgba(38,176,111,.95) 3px 7px, rgba(10,83,54,.96) 7px 10px, transparent 10px),
    radial-gradient(circle at 50% 50%, rgba(85,255,175,.30) 0 16px, transparent 17px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 560'%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.96'%3E%3Cpath d='M24 4c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 522c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 214c10 28 16 38 32 54-16 16-22 26-32 54-10-28-16-38-32-54 16-16 22-26 32-54z' stroke-width='2.8'/%3E%3Cpath d='M24 110v340' opacity='.45'/%3E%3C/g%3E%3Cg fill='url(%23gem)' stroke='%23e9d9a4' stroke-width='1.25'%3E%3Cpolygon points='24,250 31,278 24,306 17,278'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='gem' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d8ffe5'/%3E%3Cstop offset='.38' stop-color='%2354ef9c'/%3E%3Cstop offset='1' stop-color='%23146a42'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  content: "" !important;
  position: absolute !important;
  top: 84px !important;
  bottom: 84px !important;
  left: -38px !important;
  right: -38px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 48px calc(100% - 0px), 48px calc(100% - 0px) !important;
  background-position: left center, right center !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 560'%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.96'%3E%3Cpath d='M24 4c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 522c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 214c10 28 16 38 32 54-16 16-22 26-32 54-10-28-16-38-32-54 16-16 22-26 32-54z' stroke-width='2.8'/%3E%3Cpath d='M24 110v340' opacity='.45'/%3E%3C/g%3E%3Cg opacity='.98'%3E%3Cpolygon points='24,246 34,280 24,314 14,280' fill='%23186e47' stroke='%23f5e4b2' stroke-width='1.55'/%3E%3Cpolygon points='24,254 31,280 24,306 17,280' fill='%2358f2a1' opacity='.95'/%3E%3Cpolygon points='24,262 28,280 24,298 20,280' fill='%23ddffef' opacity='.92'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 560'%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.96'%3E%3Cpath d='M24 4c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 522c6 18 10 24 20 34-10 10-14 16-20 34-6-18-10-24-20-34 10-10 14-16 20-34z'/%3E%3Cpath d='M24 214c10 28 16 38 32 54-16 16-22 26-32 54-10-28-16-38-32-54 16-16 22-26 32-54z' stroke-width='2.8'/%3E%3Cpath d='M24 110v340' opacity='.45'/%3E%3C/g%3E%3Cg opacity='.98'%3E%3Cpolygon points='24,246 34,280 24,314 14,280' fill='%23186e47' stroke='%23f5e4b2' stroke-width='1.55'/%3E%3Cpolygon points='24,254 31,280 24,306 17,280' fill='%2358f2a1' opacity='.95'/%3E%3Cpolygon points='24,262 28,280 24,298 20,280' fill='%23ddffef' opacity='.92'/%3E%3C/g%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 6px rgba(84, 242, 160, .20)) drop-shadow(0 0 14px rgba(33, 120, 82, .18)) !important;
  animation: cardAlbumEmeraldPulse 4.8s ease-in-out infinite !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.card-album.card-album-modal-book .card-book-spread::before,
.card-album.card-album-modal-book .card-book-spread::after {
  background: none !important;
  animation: none !important;
  filter: none !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  top: 72px !important;
  bottom: 72px !important;
  left: -40px !important;
  right: -40px !important;
  background-size: 52px calc(100% - 0px), 52px calc(100% - 0px) !important;
  background-position: left center, right center !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 620'%3E%3Cdefs%3E%3ClinearGradient id='gemOuter' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230d5a39'/%3E%3Cstop offset='.38' stop-color='%2338cf87'/%3E%3Cstop offset='.72' stop-color='%2379ffbe'/%3E%3Cstop offset='1' stop-color='%23146f46'/%3E%3C/linearGradient%3E%3ClinearGradient id='gemInner' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23effff8'/%3E%3Cstop offset='.5' stop-color='%23a2ffd1'/%3E%3Cstop offset='1' stop-color='%2338c783'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='.97'%3E%3Cpath d='M26 22c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 532c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 220c10 27 17 38 34 58-17 20-24 31-34 58-10-27-17-38-34-58 17-20 24-31 34-58z' stroke-width='2.8'/%3E%3Cpath d='M26 118v384' opacity='.44'/%3E%3C/g%3E%3Cg opacity='.99'%3E%3Cpolygon points='26,232 40,278 26,324 12,278' fill='url(%23gemOuter)' stroke='%23f5e4b2' stroke-width='1.45'/%3E%3Cpolygon points='26,242 35,278 26,314 17,278' fill='url(%23gemInner)' opacity='.98'/%3E%3Cpolygon points='26,252 31,278 26,304 21,278' fill='%23f7fff9' opacity='.9'/%3E%3Cpath d='M26 233v90M13 278h26M18 252l16 52M34 252l-16 52' stroke='%23f0fff7' stroke-width='.65' opacity='.38'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 620'%3E%3Cdefs%3E%3ClinearGradient id='gemOuter' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230d5a39'/%3E%3Cstop offset='.38' stop-color='%2338cf87'/%3E%3Cstop offset='.72' stop-color='%2379ffbe'/%3E%3Cstop offset='1' stop-color='%23146f46'/%3E%3C/linearGradient%3E%3ClinearGradient id='gemInner' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23effff8'/%3E%3Cstop offset='.5' stop-color='%23a2ffd1'/%3E%3Cstop offset='1' stop-color='%2338c783'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='.97'%3E%3Cpath d='M26 22c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 532c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 220c10 27 17 38 34 58-17 20-24 31-34 58-10-27-17-38-34-58 17-20 24-31 34-58z' stroke-width='2.8'/%3E%3Cpath d='M26 118v384' opacity='.44'/%3E%3C/g%3E%3Cg opacity='.99'%3E%3Cpolygon points='26,232 40,278 26,324 12,278' fill='url(%23gemOuter)' stroke='%23f5e4b2' stroke-width='1.45'/%3E%3Cpolygon points='26,242 35,278 26,314 17,278' fill='url(%23gemInner)' opacity='.98'/%3E%3Cpolygon points='26,252 31,278 26,304 21,278' fill='%23f7fff9' opacity='.9'/%3E%3Cpath d='M26 233v90M13 278h26M18 252l16 52M34 252l-16 52' stroke='%23f0fff7' stroke-width='.65' opacity='.38'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 620'%3E%3Cdefs%3E%3ClinearGradient id='gemOuter' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230c5838'/%3E%3Cstop offset='.34' stop-color='%2334c97f'/%3E%3Cstop offset='.7' stop-color='%2387ffd0'/%3E%3Cstop offset='1' stop-color='%23136b44'/%3E%3C/linearGradient%3E%3ClinearGradient id='gemInner' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6fffb'/%3E%3Cstop offset='.48' stop-color='%23b6ffdb'/%3E%3Cstop offset='1' stop-color='%2349d590'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='.97'%3E%3Cpath d='M26 22c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 532c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 220c10 27 17 38 34 58-17 20-24 31-34 58-10-27-17-38-34-58 17-20 24-31 34-58z' stroke-width='2.8'/%3E%3Cpath d='M26 118v384' opacity='.44'/%3E%3C/g%3E%3Cg opacity='.995'%3E%3Cpolygon points='26,234 42,278 26,322 10,278' fill='url(%23gemOuter)' stroke='%23f5e4b2' stroke-width='1.55'/%3E%3Cpolygon points='26,242 37,278 26,314 15,278' fill='url(%23gemInner)' opacity='.985'/%3E%3Cpolygon points='26,252 32,278 26,304 20,278' fill='%23fbfffd' opacity='.92'/%3E%3Cpath d='M26 236v84M12 278h28M17 250l18 56M35 250l-18 56' stroke='%23f2fff8' stroke-width='.72' opacity='.44'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 620'%3E%3Cdefs%3E%3ClinearGradient id='gemOuter' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230c5838'/%3E%3Cstop offset='.34' stop-color='%2334c97f'/%3E%3Cstop offset='.7' stop-color='%2387ffd0'/%3E%3Cstop offset='1' stop-color='%23136b44'/%3E%3C/linearGradient%3E%3ClinearGradient id='gemInner' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6fffb'/%3E%3Cstop offset='.48' stop-color='%23b6ffdb'/%3E%3Cstop offset='1' stop-color='%2349d590'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='.97'%3E%3Cpath d='M26 22c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 532c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 220c10 27 17 38 34 58-17 20-24 31-34 58-10-27-17-38-34-58 17-20 24-31 34-58z' stroke-width='2.8'/%3E%3Cpath d='M26 118v384' opacity='.44'/%3E%3C/g%3E%3Cg opacity='.995'%3E%3Cpolygon points='26,234 42,278 26,322 10,278' fill='url(%23gemOuter)' stroke='%23f5e4b2' stroke-width='1.55'/%3E%3Cpolygon points='26,242 37,278 26,314 15,278' fill='url(%23gemInner)' opacity='.985'/%3E%3Cpolygon points='26,252 32,278 26,304 20,278' fill='%23fbfffd' opacity='.92'/%3E%3Cpath d='M26 236v84M12 278h28M17 250l18 56M35 250l-18 56' stroke='%23f2fff8' stroke-width='.72' opacity='.44'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.card-album.card-album-modal-book .card-book-shell::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 620'%3E%3Cdefs%3E%3ClinearGradient id='gemOuter' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2307472d'/%3E%3Cstop offset='.28' stop-color='%2328b874'/%3E%3Cstop offset='.62' stop-color='%237dffbf'/%3E%3Cstop offset='1' stop-color='%230b5937'/%3E%3C/linearGradient%3E%3ClinearGradient id='gemInner' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f4fff9'/%3E%3Cstop offset='.42' stop-color='%23a6ffd1'/%3E%3Cstop offset='1' stop-color='%2334ca83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='.97'%3E%3Cpath d='M26 22c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 532c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 220c10 27 17 38 24 58-7 20-14 31-24 58-10-27-17-38-24-58 7-20 14-31 24-58z' stroke-width='2.8'/%3E%3Cpath d='M26 118v384' opacity='.44'/%3E%3C/g%3E%3Cg opacity='.998'%3E%3Cpolygon points='26,224 47,278 26,332 5,278' fill='url(%23gemOuter)' stroke='%23f4dda2' stroke-width='1.45'/%3E%3Cpolygon points='26,231 43,278 26,325 9,278' fill='url(%23gemInner)' opacity='.985'/%3E%3Cpolygon points='26,242 36,278 26,314 16,278' fill='%23f8fffb' opacity='.9'/%3E%3Cpath d='M26 226v104M7 278h38M12 240l28 76M40 240l-28 76' stroke='%23f3fff8' stroke-width='.72' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 620'%3E%3Cdefs%3E%3ClinearGradient id='gemOuter' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2307472d'/%3E%3Cstop offset='.28' stop-color='%2328b874'/%3E%3Cstop offset='.62' stop-color='%237dffbf'/%3E%3Cstop offset='1' stop-color='%230b5937'/%3E%3C/linearGradient%3E%3ClinearGradient id='gemInner' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f4fff9'/%3E%3Cstop offset='.42' stop-color='%23a6ffd1'/%3E%3Cstop offset='1' stop-color='%2334ca83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23d9b16f' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='.97'%3E%3Cpath d='M26 22c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 532c6 17 10 24 18 33-8 9-12 16-18 33-6-17-10-24-18-33 8-9 12-16 18-33z'/%3E%3Cpath d='M26 220c10 27 17 38 24 58-7 20-14 31-24 58-10-27-17-38-24-58 7-20 14-31 24-58z' stroke-width='2.8'/%3E%3Cpath d='M26 118v384' opacity='.44'/%3E%3C/g%3E%3Cg opacity='.998'%3E%3Cpolygon points='26,224 47,278 26,332 5,278' fill='url(%23gemOuter)' stroke='%23f4dda2' stroke-width='1.45'/%3E%3Cpolygon points='26,231 43,278 26,325 9,278' fill='url(%23gemInner)' opacity='.985'/%3E%3Cpolygon points='26,242 36,278 26,314 16,278' fill='%23f8fffb' opacity='.9'/%3E%3Cpath d='M26 226v104M7 278h38M12 240l28 76M40 240l-28 76' stroke='%23f3fff8' stroke-width='.72' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.card-inspector-card {
  --fourfun-inspector-card-width: min(320px, 62vw);
}

.card-inspector-card .fourfun-card-face,
.card-inspector-card .fourfun-card-back {
  border-radius: 18px !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-full-art,
.card-inspector-card .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-inspector-card .fourfun-card-full-art {
  z-index: 1 !important;
  overflow: hidden !important;
  clip-path: inset(0 round 18px) !important;
}

.card-inspector-card .fourfun-card-full-art img {
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-preset-frame {
  z-index: 16 !important;
  object-fit: contain !important;
}

.card-inspector-card .fourfun-card-header,
.card-inspector-card .fourfun-card-copy,
.card-inspector-card .fourfun-card-footer,
.card-inspector-card .fourfun-card-quantity,
.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 22 !important;
}

.card-inspector-card .fourfun-card-header {
  position: absolute !important;
  left: 3.5% !important;
  right: 3.5% !important;
  top: 1.55% !important;
  height: 7.15% !important;
  padding: 0 8.8% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(10, 13, 16, .20), rgba(10, 13, 16, .08)) !important;
  backdrop-filter: blur(10px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.03) !important;
}

.card-inspector-card .fourfun-card-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 1.6% !important;
  text-align: center !important;
  color: #f8f3e2 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(12px, 5.1cqw, 18px) !important;
  line-height: .94 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-inspector-card .fourfun-card-art {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 8.7% !important;
  right: 3.8% !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 24.5% !important;
  max-width: 26.5% !important;
  height: 4.45% !important;
  padding: 0 3.1% !important;
  font-size: clamp(5px, 2.2cqw, 7.2px) !important;
  line-height: 1 !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-copy {
  position: absolute !important;
  left: 3.55% !important;
  right: 3.55% !important;
  bottom: 8.35% !important;
  height: 18.25% !important;
  padding: 2.8% 8.6% 2.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(8, 10, 11, .18), rgba(8, 10, 11, .30)) !important;
  backdrop-filter: blur(12px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.03) !important;
}

.card-inspector-card .fourfun-card-copy p {
  margin: 0 !important;
  width: 100% !important;
  color: #f3efe3 !important;
  text-align: center !important;
  font-size: clamp(8px, 3.35cqw, 10.8px) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.78) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-footer {
  position: absolute !important;
  left: 3.55% !important;
  right: 3.55% !important;
  bottom: 1.45% !important;
  height: 5.55% !important;
  padding: 0 4.2% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.45fr auto !important;
  gap: 5px !important;
  align-items: center !important;
  background: linear-gradient(180deg, rgba(8, 10, 11, .14), rgba(8, 10, 11, .26)) !important;
  backdrop-filter: blur(10px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
}

.card-inspector-card .fourfun-card-footer-left,
.card-inspector-card .fourfun-card-footer-center,
.card-inspector-card .fourfun-card-footer-right {
  display: flex !important;
  align-items: center !important;
}

.card-inspector-card .fourfun-card-footer-left { justify-content: flex-start !important; }
.card-inspector-card .fourfun-card-footer-center {
  justify-content: center !important;
  min-width: 0 !important;
}
.card-inspector-card .fourfun-card-footer-right {
  justify-content: flex-end !important;
  gap: 5px !important;
}

.card-inspector-card .fourfun-card-number {
  font-size: clamp(8px, 3.45cqw, 11.5px) !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  color: #fff5dc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8) !important;
}

.card-inspector-card .fourfun-card-footer small,
.card-inspector-card .fourfun-card-footer-center small {
  font-size: clamp(6.8px, 2.8cqw, 9px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  color: #fff3e2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.78) !important;
}

.card-inspector-card .fourfun-card-edition {
  color: inherit !important;
  text-shadow: inherit !important;
}

.card-inspector-card .fourfun-card-footer b {
  color: #fff4dc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.78) !important;
}

.card-inspector-card .fourfun-card-quantity {
  position: absolute !important;
  top: 8.25% !important;
  right: 5.3% !important;
  z-index: 23 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff2cb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8) !important;
  font-size: clamp(7px, 3.1cqw, 10.2px) !important;
  font-weight: 900 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-header,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer {
  position: absolute !important;
  left: 3.3% !important;
  right: 3.3% !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-header {
  inset: 1.4% 3.35% auto 3.35% !important;
  height: 7.35% !important;
  z-index: 20 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-copy {
  left: 3.3% !important;
  right: 3.3% !important;
  bottom: 8.2% !important;
  height: 18.3% !important;
  z-index: 20 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer {
  bottom: 1.5% !important;
  height: 5.35% !important;
  z-index: 20 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-art {
  inset: 0 !important;
  z-index: 21 !important;
  overflow: visible !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 7.75% !important;
  right: 3.55% !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 22 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-full-art,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-full-art img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-preset-frame {
  z-index: 18 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary {
  display: block !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-full-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  clip-path: inset(0 round 18px) !important;
  z-index: 1 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: 16 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-header,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-quantity {
  box-sizing: border-box !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-header {
  position: absolute !important;
  top: 1.55% !important;
  left: 3.55% !important;
  right: 3.55% !important;
  height: 7.15% !important;
  padding: 0 8.8% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 22 !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-title {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 1.6% !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: .94 !important;
  transform: none !important;
  z-index: 23 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-art {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 21 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 8.7% !important;
  right: 3.8% !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 24.5% !important;
  max-width: 26.5% !important;
  height: 4.45% !important;
  padding: 0 3.1% !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 23 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-copy {
  position: absolute !important;
  left: 3.55% !important;
  right: 3.55% !important;
  bottom: 8.35% !important;
  height: 18.25% !important;
  padding: 2.8% 8.6% 2.2% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 22 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-copy p {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
  transform: none !important;
  z-index: 23 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer {
  position: absolute !important;
  left: 3.55% !important;
  right: 3.55% !important;
  bottom: 1.45% !important;
  height: 5.55% !important;
  padding: 0 4.2% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.45fr auto !important;
  gap: 5px !important;
  align-items: center !important;
  z-index: 22 !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-left,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-center,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-right {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-left { justify-content: flex-start !important; }
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-center { justify-content: center !important; }
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-right {
  justify-content: flex-end !important;
  gap: 5px !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-number,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer small,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-footer b {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 23 !important;
}

.card-inspector-card .fourfun-card-face.rarity-legendary .fourfun-card-quantity {
  position: absolute !important;
  top: 8.25% !important;
  right: 5.3% !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 23 !important;
}

.card-inspector-card .fourfun-card-face,
.card-inspector-card .fourfun-card-back {
  isolation: isolate !important;
}

.card-inspector-card .fourfun-card-full-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  clip-path: inset(0 round 18px) !important;
  z-index: 1 !important;
}

.card-inspector-card .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  z-index: 34 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

.card-inspector-card .fourfun-card-holo,
.card-inspector-card .fourfun-card-gloss,
.card-inspector-card .fourfun-card-grain,
.card-inspector-card .fourfun-card-particles {
  z-index: 8 !important;
}

.card-inspector-card .fourfun-card-header,
.card-inspector-card .fourfun-card-copy,
.card-inspector-card .fourfun-card-footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.card-inspector-card .fourfun-card-header::before,
.card-inspector-card .fourfun-card-header::after,
.card-inspector-card .fourfun-card-copy::before,
.card-inspector-card .fourfun-card-copy::after,
.card-inspector-card .fourfun-card-footer::before,
.card-inspector-card .fourfun-card-footer::after {
  display: none !important;
  content: none !important;
}

.card-inspector-card .fourfun-card-header,
.card-inspector-card .fourfun-card-copy,
.card-inspector-card .fourfun-card-footer {
  z-index: 38 !important;
}

.card-inspector-card .fourfun-card-header {
  left: 3.7% !important;
  right: 3.7% !important;
  top: 1.55% !important;
  height: 7.05% !important;
  padding: 0 11.25% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translateY(-1px) !important;
}

.card-inspector-card .fourfun-card-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 8.85% !important;
  right: 4.05% !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 24.2% !important;
  max-width: 26.2% !important;
  height: 4.25% !important;
  padding: 0 2.9% !important;
  margin: 0 !important;
  z-index: 40 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background-blend-mode: normal !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  opacity: 1 !important;
  background: linear-gradient(120deg, rgba(255,112,203,.94), rgba(255,206,86,.94), rgba(91,227,255,.96), rgba(163,114,255,.96)) !important;
  background-size: 220% 220% !important;
  color: #fff6dc !important;
  box-shadow: 0 0 16px rgba(255,152,233,.22), 0 0 18px rgba(108,228,255,.22) !important;
  animation: legendarySealSpectrum 3s linear infinite !important;
}

.card-inspector-card .fourfun-card-copy {
  left: 4.15% !important;
  right: 4.15% !important;
  bottom: 8.55% !important;
  height: 17.55% !important;
  padding: 1.8% 9.9% 3.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-copy p {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: translateY(-6%) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-footer {
  left: 4.05% !important;
  right: 4.05% !important;
  bottom: 1.55% !important;
  height: 5.1% !important;
  padding: 0 4.65% !important;
  display: grid !important;
  grid-template-columns: 1.02fr 1.38fr auto !important;
  gap: 4px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-footer-left,
.card-inspector-card .fourfun-card-footer-center,
.card-inspector-card .fourfun-card-footer-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.card-inspector-card .fourfun-card-footer-left { justify-content: center !important; }
.card-inspector-card .fourfun-card-footer-center { justify-content: center !important; }
.card-inspector-card .fourfun-card-footer-right { justify-content: flex-end !important; }

.card-inspector-card .fourfun-card-number,
.card-inspector-card .fourfun-card-footer-center small {
  width: 100% !important;
  text-align: center !important;
}

.card-inspector-card .fourfun-card-footer small,
.card-inspector-card .fourfun-card-number,
.card-inspector-card .fourfun-card-footer b {
  transform: translateY(-.5px) !important;
}

.card-inspector-card .fourfun-card-quantity {
  display: none !important;
}

.card-inspector-card {
  isolation: isolate !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template {
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-border {
  z-index: 95 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-holo,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-gloss,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-grain,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-particles {
  z-index: 15 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  z-index: 110 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::after {
  content: none !important;
  display: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header {
  position: absolute !important;
  top: 1.6% !important;
  left: 3.8% !important;
  right: 3.8% !important;
  height: 7.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11.5% !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translateY(-1px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 120 !important;
  pointer-events: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: absolute !important;
  top: 8.95% !important;
  right: 4.15% !important;
  left: auto !important;
  min-width: 23.5% !important;
  max-width: 25.5% !important;
  height: 4.15% !important;
  padding: 0 2.8% !important;
  margin: 0 !important;
  z-index: 125 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  opacity: 1 !important;
  background: linear-gradient(120deg, rgba(255,112,203,.95), rgba(255,206,86,.95), rgba(91,227,255,.97), rgba(163,114,255,.97)) !important;
  background-size: 220% 220% !important;
  animation: legendarySealSpectrum 3s linear infinite !important;
  box-shadow: 0 0 14px rgba(255,152,233,.22), 0 0 16px rgba(108,228,255,.18) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy {
  position: absolute !important;
  left: 4.25% !important;
  right: 4.25% !important;
  bottom: 8.65% !important;
  height: 17.5% !important;
  padding: 0.8% 9.8% 1.8% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy p {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: translateY(-10%) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer {
  position: absolute !important;
  left: 4.15% !important;
  right: 4.15% !important;
  bottom: 1.65% !important;
  height: 5.1% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.38fr auto !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 4.7% !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-left,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-left { justify-content: center !important; }
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center { justify-content: center !important; }
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right { justify-content: flex-end !important; }

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-number,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center small,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right small {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right b {
  margin-left: 4px !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-quantity {
  display: none !important;
}

.card-inspector-stage {
  overflow: visible !important;
}

.card-inspector-card {
  overflow: visible !important;
  isolation: isolate !important;
}

.card-inspector-card .fourfun-card-body {
  overflow: visible !important;
  isolation: isolate !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template {
  overflow: hidden !important;
  isolation: isolate !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage:not(.is-edge-overlay) {
  z-index: 2 !important;
  width: calc(var(--fourfun-inspector-card-width) + 118px) !important;
}

.card-inspector-stage > .card-rarity-fx.is-stage.is-edge-overlay {
  z-index: 34 !important;
  width: calc(var(--fourfun-inspector-card-width) + 124px) !important;
  inset: -20px !important;
  -webkit-mask: linear-gradient(90deg, #000 0 16.5%, transparent 20% 80%, #000 83.5% 100%) !important;
  mask: linear-gradient(90deg, #000 0 16.5%, transparent 20% 80%, #000 83.5% 100%) !important;
  opacity: 1 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 3 !important;
  clip-path: inset(0 round inherit) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  border-radius: 0 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-holo,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-gloss,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-grain,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-particles {
  z-index: 10 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-border {
  z-index: 54 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 56 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer {
  z-index: 58 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::after {
  content: none !important;
  display: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header {
  top: 1.55% !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-title {
  transform: translateY(-2px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art {
  z-index: 62 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 64 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy {
  z-index: 58 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy p {
  transform: translateY(-18%) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer {
  z-index: 58 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-number,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center small,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right small {
  transform: translateY(3px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-quantity {
  display: none !important;
}

.card-inspector-stage,
.card-inspector-card,
.card-inspector-card .fourfun-card-body,
.card-inspector-card .fourfun-card-face.is-inspector-template {
  contain: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-inspector-card {
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-inspector-card > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -34px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.card-inspector-card > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  opacity: .92 !important;
  z-index: 1 !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 42 !important;
  opacity: 1 !important;
  -webkit-mask: linear-gradient(90deg, #000 0 16%, transparent 22% 78%, #000 84% 100%) !important;
  mask: linear-gradient(90deg, #000 0 16%, transparent 22% 78%, #000 84% 100%) !important;
}

.card-inspector-card .fourfun-card-body {
  position: relative !important;
  z-index: 10 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template {
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  clip-path: inset(0 round 18px) !important;
  z-index: 2 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  border-radius: 0 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-holo,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-gloss,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-grain,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-particles {
  z-index: 8 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  z-index: 70 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-border {
  z-index: 72 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 74 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::after {
  content: none !important;
  display: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-title {
  transform: translateY(-2px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy p {
  transform: translateY(-10px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-number,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center small,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right small {
  transform: translateY(3px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-quantity {
  display: none !important;
}

.card-inspector-stage,
.card-inspector-card,
.card-inspector-card .fourfun-card-body,
.card-inspector-card .fourfun-card-face,
.card-inspector-card .fourfun-card-back {
  contain: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-inspector-stage {
  perspective: 1800px !important;
}

.card-inspector-card {
  position: relative !important;
  z-index: 3 !important;
}

.card-inspector-card > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -46px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.card-inspector-card .fourfun-card-body {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  transform-style: preserve-3d !important;
}

.card-inspector-card .fourfun-card-face,
.card-inspector-card .fourfun-card-back {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face {
  transform: translateZ(1px) !important;
}

.card-inspector-card .fourfun-card-back {
  transform: rotateY(180deg) translateZ(1px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template {
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-holo,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-gloss,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-grain,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-particles {
  z-index: 8 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-preset-frame,
.card-inspector-card .fourfun-card-back .fourfun-card-back-preset {
  z-index: 70 !important;
  pointer-events: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer,
.card-inspector-card .fourfun-card-back .fourfun-card-back-labels {
  z-index: 74 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 76 !important;
  opacity: 1 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy::after,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer::after {
  content: none !important;
  display: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-title {
  transform: translateY(-2px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy p {
  transform: translateY(-10px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-number,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center small,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right small {
  transform: translateY(6px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-quantity {
  display: none !important;
}

.fourfun-card-body.has-custom-accent .fourfun-card-face:not(.rarity-legendary),
.fourfun-card-body.has-custom-accent .fourfun-card-back:not(.rarity-legendary),
.fourfun-card-body.has-custom-accent .fourfun-card-header,
.fourfun-card-body.has-custom-accent .fourfun-card-copy,
.fourfun-card-body.has-custom-accent .fourfun-card-title,
.fourfun-card-body.has-custom-accent .fourfun-card-copy p,
.fourfun-card-body.has-custom-accent .fourfun-card-border i,
.fourfun-card-body.has-custom-accent .fourfun-card-back-frame i,
.fourfun-card-body.has-secondary-accent .fourfun-card-face:not(.rarity-legendary),
.fourfun-card-body.has-secondary-accent .fourfun-card-back:not(.rarity-legendary),
.fourfun-card-body.has-secondary-accent .fourfun-card-header,
.fourfun-card-body.has-secondary-accent .fourfun-card-copy,
.fourfun-card-body.has-secondary-accent .fourfun-card-title,
.fourfun-card-body.has-secondary-accent .fourfun-card-copy p,
.fourfun-card-body.has-secondary-accent .fourfun-card-border i,
.fourfun-card-body.has-secondary-accent .fourfun-card-back-frame i {
  border-color: revert !important;
  box-shadow: revert !important;
  background: revert !important;
  background-color: revert !important;
  background-image: revert !important;
  color: revert !important;
  text-shadow: revert !important;
  filter: revert !important;
}

.card-inspector-stage > .card-inspector-aura {
  display: none !important;
}

.card-inspector-card {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.card-inspector-card .fourfun-card-body {
  position: absolute !important;
  inset: 0 !important;
  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) rotateZ(var(--card-rz)) !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;
  overflow: visible !important;
}

.card-inspector-card .fourfun-card-face,
.card-inspector-card .fourfun-card-back {
  position: absolute !important;
  inset: 0 !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
}

.card-inspector-card .fourfun-card-face {
  z-index: 8 !important;
  transform: translateZ(1px) !important;
}

.card-inspector-card .fourfun-card-back {
  z-index: 7 !important;
  transform: rotateY(180deg) translateZ(1px) !important;
  background: linear-gradient(180deg, #09110c, #0d1710) !important;
}

.card-inspector-card .fourfun-card-back::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, #09110c, #0d1710) !important;
}

.card-inspector-card .fourfun-card-back .fourfun-card-back-preset {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 30 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-inspector-card .fourfun-card-back .fourfun-card-back-labels {
  z-index: 45 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art {
  z-index: 5 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-full-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-holo,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-gloss,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-grain,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-particles {
  z-index: 16 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  z-index: 90 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-border {
  z-index: 95 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-header,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-copy,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer {
  z-index: 110 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 115 !important;
  opacity: 1 !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-title {
  transform: translateY(-3px) !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-number,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-center small,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-footer-right small {
  transform: translateY(9px) !important;
}

.card-inspector-heading-seal.rarity-seal-legendary,
.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  color: #ffe39a !important;
  border-color: rgba(255, 239, 205, 0.78) !important;
  background:
    linear-gradient(90deg,
      rgba(142, 67, 103, 0.96),
      rgba(212, 156, 82, 0.96),
      rgba(87, 190, 200, 0.96),
      rgba(122, 101, 198, 0.96),
      rgba(142, 67, 103, 0.96)
    ) !important;
  background-size: 220% 100% !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 4px 10px rgba(0, 0, 0, 0.28) !important;
  opacity: 1 !important;
  animation: cardSealLegendaryHolo 2.8s linear infinite !important;
}

.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary::before,
.card-inspector-card .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary::after,
.card-inspector-heading-seal.rarity-seal-legendary::before,
.card-inspector-heading-seal.rarity-seal-legendary::after {
  color: #fff4cf !important;
  opacity: 1 !important;
}

.card-inspector-heading-seal.rarity-seal-legendary,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary {
  --seal-a: #b15c86 !important;
  --seal-b: #4d7f7f !important;
  color: #fff8ef !important;
  border: 1px solid rgba(255, 239, 205, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(90deg,
      rgba(152, 76, 112, 0.98) 0%,
      rgba(172, 96, 132, 0.98) 24%,
      rgba(103, 168, 168, 0.98) 76%,
      rgba(76, 124, 124, 0.98) 100%) !important;
  background-size: auto, 220% 100% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(255, 152, 233, .18),
    0 0 10px rgba(108, 228, 255, .16),
    0 3px 8px rgba(0,0,0,.28) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: cardSealLegendaryHolo 2.6s linear infinite !important;
}

.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary::before,
.card-inspector-card .fourfun-card-face.is-inspector-template .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal.rarity-seal-legendary::after,
.card-inspector-heading-seal.rarity-seal-legendary::before,
.card-inspector-heading-seal.rarity-seal-legendary::after {
  color: #fff4cf !important;
  opacity: 1 !important;
}

.card-inspector-card .fourfun-card-body {
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.card-inspector-card .fourfun-card-face,
.card-inspector-card .fourfun-card-back {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

.card-inspector-card .fourfun-card-face {
  transform: translateZ(var(--card-3d-half-thickness)) !important;
}

.card-inspector-card .fourfun-card-back {
  transform: rotateY(180deg) translateZ(var(--card-3d-half-thickness)) !important;
  background: transparent !important;
  box-shadow: inherit !important;
}

.card-inspector-card .fourfun-card-back::before,
.card-inspector-card .fourfun-card-back::after {
  content: none !important;
  display: none !important;
}

.card-inspector-card .fourfun-card-back .fourfun-card-back-preset {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-inspector-card .fourfun-card-back .fourfun-card-back-labels {
  z-index: 6 !important;
}

.card-inspector-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background:
    radial-gradient(circle at 34% 45%, rgba(88, 66, 28, .09), transparent 34%),
    rgba(4, 7, 5, .94) !important;
}

.card-inspector-stage {
  overflow: visible !important;
  touch-action: none !important;
  contain: layout style !important;
}

.card-inspector-card {
  position: relative !important;
  overflow: visible !important;
  perspective: 1800px !important;
  transform-style: preserve-3d !important;

  isolation: auto !important;
  contain: layout style !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-inspector-card > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -48px !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-inspector-rotator-host {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.card-inspector-rotator {
  --card-3d-thickness: 14px;
  --card-3d-half-thickness: calc(var(--card-3d-thickness) / 2);
  --card-3d-corner-cut: 12px;
  position: absolute !important;
  inset: 0 !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}

.card-inspector-faux-edge {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  overflow: hidden !important;
  opacity: 1 !important;
  filter: saturate(1.04) brightness(.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 218, .22),
    inset 0 1px 1px rgba(255, 255, 255, .18),
    inset 0 -1px 1px rgba(24, 13, 8, .64),
    0 0 5px rgba(0, 0, 0, .28) !important;
}

.card-inspector-faux-edge::before,
.card-inspector-faux-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-inspector-faux-edge::after {
  background: linear-gradient(90deg, rgba(255,255,255,.18), transparent 32%, transparent 68%, rgba(0,0,0,.24));
  mix-blend-mode: screen;
  opacity: .72;
}

.card-inspector-faux-edge.is-right,
.card-inspector-faux-edge.is-left {
  top: var(--card-3d-corner-cut) !important;
  bottom: var(--card-3d-corner-cut) !important;
  width: var(--card-3d-thickness) !important;
  background:
    linear-gradient(90deg,
      rgba(37, 21, 11, .98) 0%,
      var(--card-secondary, #ead18f) 18%,
      rgba(255, 244, 207, .94) 42%,
      var(--card-accent, #b9974b) 66%,
      rgba(45, 25, 12, .98) 100%) !important;
}

.card-inspector-faux-edge.is-right::before,
.card-inspector-faux-edge.is-left::before {
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 247, 222, .14) 0 1px,
    rgba(73, 43, 20, .05) 1px 3px,
    transparent 3px 5px
  );
}

.card-inspector-faux-edge.is-right {
  left: 100% !important;
  right: auto !important;
  transform-origin: center center !important;
  transform: translateX(-50%) rotateY(90deg) !important;
  border-radius: 0 3px 3px 0 !important;
}

.card-inspector-faux-edge.is-left {
  left: 0 !important;
  right: auto !important;
  transform-origin: center center !important;
  transform: translateX(-50%) rotateY(90deg) !important;
  border-radius: 3px 0 0 3px !important;
}

.card-inspector-faux-edge.is-top,
.card-inspector-faux-edge.is-bottom {
  left: var(--card-3d-corner-cut) !important;
  right: var(--card-3d-corner-cut) !important;
  height: var(--card-3d-thickness) !important;
  background:
    linear-gradient(180deg,
      rgba(36, 20, 10, .98) 0%,
      var(--card-secondary, #ead18f) 18%,
      rgba(255, 244, 207, .94) 42%,
      var(--card-accent, #b9974b) 66%,
      rgba(43, 24, 12, .98) 100%) !important;
}

.card-inspector-faux-edge.is-top::before,
.card-inspector-faux-edge.is-bottom::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 247, 222, .14) 0 1px,
    rgba(73, 43, 20, .05) 1px 3px,
    transparent 3px 5px
  );
}

.card-inspector-faux-edge.is-top {
  top: 0 !important;
  bottom: auto !important;
  transform-origin: center center !important;
  transform: translateY(-50%) rotateX(90deg) !important;
  border-radius: 3px 3px 0 0 !important;
}

.card-inspector-faux-edge.is-bottom {
  top: 100% !important;
  bottom: auto !important;
  transform-origin: center center !important;
  transform: translateY(-50%) rotateX(90deg) !important;
  border-radius: 0 0 3px 3px !important;
}

.card-inspector-side {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  box-shadow:
    0 18px 35px rgba(0, 0, 0, .46),
    0 0 23px rgba(255, 205, 84, .16) !important;
}

.card-inspector-front {
  --card-rarity: 203, 189, 151;
  z-index: 2 !important;
  transform: translateZ(var(--card-3d-half-thickness)) !important;
  background: #0b100d !important;
}
.card-inspector-front.rarity-common { --card-rarity: 194, 184, 159; }
.card-inspector-front.rarity-uncommon { --card-rarity: 109, 218, 149; }
.card-inspector-front.rarity-rare { --card-rarity: 104, 170, 255; }
.card-inspector-front.rarity-epic { --card-rarity: 206, 111, 255; }
.card-inspector-front.rarity-legendary { --card-rarity: 255, 205, 84; }

.card-inspector-back {
  z-index: 1 !important;
  transform: rotateY(180deg) translateZ(var(--card-3d-half-thickness)) !important;
  background: #07100b !important;
}

.card-inspector-main-image,
.card-inspector-back-image,
.card-inspector-preset {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.card-inspector-main-image {
  z-index: 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.card-inspector-back-image {
  z-index: 10 !important;
  object-fit: fill !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
}

.card-inspector-front > .fourfun-card-holo,
.card-inspector-front > .fourfun-card-gloss,
.card-inspector-front > .fourfun-card-grain,
.card-inspector-front > .fourfun-card-particles {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.card-inspector-front > .fourfun-card-holo { z-index: 4 !important; }
.card-inspector-front > .fourfun-card-grain { z-index: 5 !important; }
.card-inspector-front > .fourfun-card-gloss { z-index: 6 !important; }
.card-inspector-front > .fourfun-card-particles { z-index: 7 !important; }

.card-inspector-front.rarity-legendary > .fourfun-card-holo {
  opacity: .64 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.62), transparent 23%),
    conic-gradient(from 0deg at var(--card-shine-x) var(--card-shine-y),
      rgba(255,66,196,.30),
      rgba(255,194,68,.22),
      rgba(77,229,255,.32),
      rgba(126,102,255,.28),
      rgba(255,66,196,.30)) !important;
  background-size: 100% 100%, 170% 170% !important;
  animation: cardSealLegendaryHolo 3.4s linear infinite !important;
  filter: saturate(1.25) !important;
}

.card-inspector-preset {
  z-index: 20 !important;
  object-fit: fill !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  pointer-events: none !important;
}

.card-inspector-card-title,
.card-inspector-card-description,
.card-inspector-card-footer,
.card-inspector-unified-seal.is-on-card {
  z-index: 30 !important;
}

.card-inspector-card-title {
  position: absolute !important;
  top: 1.35% !important;
  left: 14% !important;
  right: 14% !important;
  height: 7.1% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #fff7eb !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(13px, 5.2cqw, 18px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.86) !important;
  transform: translateY(-1px) !important;
}

.card-inspector-card-description {
  position: absolute !important;
  left: 12.2% !important;
  right: 12.2% !important;
  bottom: 10.25% !important;
  height: 14.9% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 248, 236, .96) !important;
  font-size: clamp(8px, 3.55cqw, 11px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.88) !important;
}

.card-inspector-card-footer {
  position: absolute !important;
  left: 4.1% !important;
  right: 4.1% !important;
  bottom: 1.35% !important;
  height: 5.25% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.35fr 1fr auto !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 4.4% !important;
  color: #fff6e8 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.88) !important;
}

.card-inspector-card-number,
.card-inspector-card-date,
.card-inspector-card-edition,
.card-inspector-card-mark {
  display: block !important;
  margin: 0 !important;
  transform: translateY(9px) !important;
}

.card-inspector-card-number {
  justify-self: center !important;
  font-size: clamp(8px, 3.8cqw, 12px) !important;
  font-weight: 900 !important;
}
.card-inspector-card-date,
.card-inspector-card-edition {
  justify-self: center !important;
  font-size: clamp(6.5px, 2.8cqw, 9px) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.card-inspector-card-mark {
  justify-self: end !important;
  font-size: clamp(9px, 4.1cqw, 13px) !important;
}

.card-inspector-unified-seal {
  --seal-a: #d8dde0;
  --seal-b: #646a6e;
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 18px !important;
  padding: 0 9px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,239,205,.72) !important;
  border-radius: 0 !important;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%) !important;
  color: #fff8ef !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(135deg, var(--seal-a), var(--seal-b)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 8px rgba(0,0,0,.28) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
  text-indent: .10em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

.card-inspector-unified-seal::before,
.card-inspector-unified-seal::after {
  content: "✦" !important;
  flex: 0 0 auto !important;
  color: #fff4cf !important;
  font-size: 5px !important;
  opacity: 1 !important;
}

.card-inspector-unified-seal.rarity-seal-legendary {
  --seal-a: #98506f;
  --seal-b: #4f7d7d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(90deg,
      rgba(152, 76, 112, .98),
      rgba(174, 98, 132, .98),
      rgba(104, 168, 168, .98),
      rgba(76, 124, 124, .98),
      rgba(152, 76, 112, .98)) !important;
  background-size: auto, 220% 100% !important;
  animation: cardSealLegendaryHolo 2.6s linear infinite !important;
}

.card-inspector-unified-seal.is-on-card {
  position: absolute !important;
  top: 8.85% !important;
  right: 4.1% !important;
}

.card-inspector-unified-seal.is-heading {
  position: relative !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.card-inspector-copy {
  contain: layout style !important;
}

.card-rarity-fx.has-secondary-accent:not(.rarity-legendary) .card-rarity-fx-ring {
  border-color: color-mix(in srgb, var(--card-secondary) 62%, transparent) !important;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--card-accent, var(--card-secondary)) 30%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--card-secondary) 22%, transparent) !important;
}
.card-rarity-fx.has-secondary-accent:not(.rarity-legendary) .card-rarity-fx-wisp {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--card-secondary) 36%, transparent)) !important;
}

.fourfun-card-number,
.fourfun-card-footer-center small,
.fourfun-card-edition {
  position: relative !important;
  top: -2px !important;
}

.card-inspector-card-number,
.card-inspector-card-date,
.card-inspector-card-edition {
  transform: translateY(7px) !important;
}

.fourfun-card-face .fourfun-card-preset-frame {
  z-index: 18 !important;
}
.fourfun-card-face .fourfun-card-header,
.fourfun-card-face .fourfun-card-copy,
.fourfun-card-face .fourfun-card-footer,
.fourfun-card-face .fourfun-card-art > .fourfun-card-rarity-seal.reward-rarity-seal {
  position: relative !important;
  z-index: 24 !important;
}

.fourfun-card-face.rarity-common .fourfun-card-holo,
.fourfun-card-back.rarity-common .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-face.rarity-common .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-back.rarity-common .fourfun-card-holo {
  opacity: .18 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.34), transparent 18%),
    linear-gradient(118deg, transparent 28%, rgba(255,255,255,.14) 44%, rgba(216, 206, 188, .22) 50%, transparent 64%),
    linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)) !important;
  background-size: 100% 100%, 160% 160%, 100% 100% !important;
  animation: common-satin-sweep 7.2s ease-in-out infinite !important;
  filter: saturate(.9) !important;
}

.fourfun-card-face.rarity-uncommon .fourfun-card-holo,
.fourfun-card-back.rarity-uncommon .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-face.rarity-uncommon .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-back.rarity-uncommon .fourfun-card-holo {
  opacity: .24 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.28), transparent 22%),
    conic-gradient(from calc(var(--card-hue) * 1deg) at var(--card-shine-x) var(--card-shine-y),
      transparent 0 9%,
      rgba(255, 92, 211, .40) 16%,
      rgba(88, 228, 255, .42) 28%,
      rgba(255, 232, 97, .36) 40%,
      rgba(109, 242, 168, .28) 52%,
      transparent 64% 100%) !important;
  background-size: 100% 100%, 165% 165% !important;
  animation: uncommon-rainbow-foil 6.4s linear infinite !important;
  filter: saturate(1.18) !important;
}

.fourfun-card-face.rarity-rare .fourfun-card-holo,
.fourfun-card-back.rarity-rare .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-face.rarity-rare .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-back.rarity-rare .fourfun-card-holo {
  opacity: .27 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.36), transparent 20%),
    linear-gradient(120deg, transparent 20%, rgba(116, 181, 255, .08) 34%, rgba(223, 240, 255, .34) 48%, rgba(116, 181, 255, .18) 54%, transparent 68%),
    repeating-linear-gradient(132deg, rgba(116,181,255,.12) 0 2px, transparent 2px 9px) !important;
  background-size: 100% 100%, 160% 160%, 140% 140% !important;
  animation: rare-crystal-sweep 5.6s ease-in-out infinite !important;
  filter: saturate(1.08) !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-back.rarity-epic .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-body.has-custom-accent .fourfun-card-back.rarity-epic .fourfun-card-holo {
  opacity: .38 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.40), transparent 22%),
    radial-gradient(circle at 28% 30%, rgba(211, 126, 255, .16), transparent 30%),
    radial-gradient(circle at 72% 68%, rgba(133, 84, 255, .16), transparent 28%),
    linear-gradient(145deg, transparent 22%, rgba(214, 118, 255, .12) 42%, rgba(255,255,255,.22) 50%, rgba(123, 88, 255, .18) 58%, transparent 74%) !important;
  background-size: 100% 100%, 120% 120%, 120% 120%, 170% 170% !important;
  animation: epic-arcane-veil 5.8s ease-in-out infinite !important;
  filter: saturate(1.16) !important;
}

@keyframes common-satin-sweep {
  0%, 100% {
    background-position: 0% 0%, 0% 50%, 0 0;
    opacity: .14;
  }
  50% {
    background-position: 0% 0%, 100% 50%, 0 0;
    opacity: .22;
  }
}

@keyframes uncommon-rainbow-foil {
  0% { background-position: 0% 0%, 0% 50%; }
  100% { background-position: 0% 0%, 100% 50%; }
}

@keyframes rare-crystal-sweep {
  0%, 100% {
    background-position: 0% 0%, 0% 50%, 0% 0%;
    opacity: .22;
  }
  50% {
    background-position: 0% 0%, 100% 50%, 100% 0%;
    opacity: .34;
  }
}

@keyframes epic-arcane-veil {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    filter: saturate(1.1) hue-rotate(0deg);
  }
  50% {
    background-position: 0% 0%, 8% 6%, 92% 94%, 100% 50%;
    filter: saturate(1.22) hue-rotate(8deg);
  }
}

.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 9 !important;
  inset: -10px !important;
  width: calc(var(--fourfun-inspector-card-width) + 38px) !important;
  height: auto !important;
  background: transparent !important;
  -webkit-mask: linear-gradient(90deg, #000 0 11%, transparent 21% 79%, #000 89% 100%) !important;
  mask: linear-gradient(90deg, #000 0 11%, transparent 21% 79%, #000 89% 100%) !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  inset: 13% 8% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(104, 235, 165, .12), rgba(104, 235, 165, .04) 44%, transparent 70%) !important;
  filter: blur(14px) !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: 4% !important;
  border: 0 !important;
  background: transparent !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  z-index: 1 !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.rarity-uncommon:not(.is-edge-overlay) {
  z-index: 1 !important;
}

.fourfun-card-number,
.fourfun-card-footer-center small,
.fourfun-card-edition,
.card-inspector-card-number,
.card-inspector-card-date,
.card-inspector-card-edition {
  transform: translateY(-2px) !important;
}

.fourfun-card-face .fourfun-card-preset-frame {
  z-index: 80 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.fourfun-card-face .fourfun-card-header,
.fourfun-card-face .fourfun-card-art,
.fourfun-card-face .fourfun-card-copy,
.fourfun-card-face .fourfun-card-footer,
.fourfun-card-face .fourfun-card-rarity-seal.reward-rarity-seal {
  position: relative !important;
  z-index: 96 !important;
}

.fourfun-card-face.rarity-common .fourfun-card-header,
.fourfun-card-face.rarity-common .fourfun-card-copy,
.fourfun-card-face.rarity-common .fourfun-card-footer,
.fourfun-card-face.rarity-common .fourfun-card-rarity-seal.reward-rarity-seal {
  z-index: 110 !important;
}

.fourfun-card-face.rarity-common .fourfun-card-holo,
.fourfun-card-back.rarity-common .fourfun-card-holo,
.card-inspector-front.rarity-common .fourfun-card-holo,
.card-inspector-back.rarity-common .fourfun-card-holo {
  opacity: .20 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.34), transparent 18%),
    linear-gradient(118deg, transparent 26%, rgba(255,255,255,.10) 42%, rgba(238, 229, 214, .28) 50%, transparent 62%),
    linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)) !important;
  background-size: 100% 100%, 165% 165%, 100% 100% !important;
  animation: card-common-satin 7s ease-in-out infinite !important;
  filter: saturate(.95) !important;
}

.fourfun-card-face.rarity-uncommon .fourfun-card-holo,
.fourfun-card-back.rarity-uncommon .fourfun-card-holo,
.card-inspector-front.rarity-uncommon .fourfun-card-holo,
.card-inspector-back.rarity-uncommon .fourfun-card-holo {
  opacity: .26 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.26), transparent 22%),
    conic-gradient(from calc(var(--card-hue, 150) * 1deg) at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      transparent 0 9%,
      rgba(255, 92, 211, .40) 17%,
      rgba(88, 228, 255, .42) 29%,
      rgba(255, 232, 97, .36) 41%,
      rgba(109, 242, 168, .30) 53%,
      transparent 65% 100%) !important;
  background-size: 100% 100%, 165% 165% !important;
  animation: card-uncommon-rainbow 6.2s linear infinite !important;
  filter: saturate(1.18) !important;
}

.fourfun-card-face.rarity-rare .fourfun-card-holo,
.fourfun-card-back.rarity-rare .fourfun-card-holo,
.card-inspector-front.rarity-rare .fourfun-card-holo,
.card-inspector-back.rarity-rare .fourfun-card-holo {
  opacity: .28 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.30), transparent 20%),
    linear-gradient(124deg, transparent 22%, rgba(109, 181, 255, .08) 36%, rgba(220, 241, 255, .36) 49%, rgba(109, 181, 255, .16) 58%, transparent 70%),
    repeating-linear-gradient(135deg, rgba(127, 190, 255, .11) 0 2px, transparent 2px 9px) !important;
  background-size: 100% 100%, 160% 160%, 140% 140% !important;
  animation: card-rare-crystal 5.4s ease-in-out infinite !important;
  filter: saturate(1.1) !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-back.rarity-epic .fourfun-card-holo,
.card-inspector-front.rarity-epic .fourfun-card-holo,
.card-inspector-back.rarity-epic .fourfun-card-holo {
  opacity: .36 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.36), transparent 22%),
    radial-gradient(circle at 28% 30%, rgba(206, 126, 255, .18), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(123, 86, 255, .20), transparent 30%),
    linear-gradient(145deg, transparent 20%, rgba(226, 120, 255, .10) 38%, rgba(255,255,255,.20) 50%, rgba(119, 90, 255, .18) 60%, transparent 76%) !important;
  background-size: 100% 100%, 125% 125%, 125% 125%, 170% 170% !important;
  animation: card-epic-arcane 5.8s ease-in-out infinite !important;
  filter: saturate(1.18) !important;
}

@keyframes card-common-satin {
  0%, 100% {
    background-position: 0% 0%, 0% 50%, 0 0;
    opacity: .15;
  }
  50% {
    background-position: 0% 0%, 100% 50%, 0 0;
    opacity: .24;
  }
}

@keyframes card-uncommon-rainbow {
  0% { background-position: 0% 0%, 0% 50%; }
  100% { background-position: 0% 0%, 100% 50%; }
}

@keyframes card-rare-crystal {
  0%, 100% {
    background-position: 0% 0%, 0% 50%, 0% 0%;
    opacity: .22;
  }
  50% {
    background-position: 0% 0%, 100% 50%, 100% 0%;
    opacity: .34;
  }
}

@keyframes card-epic-arcane {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    filter: saturate(1.12) hue-rotate(0deg);
  }
  50% {
    background-position: 0% 0%, 8% 6%, 92% 94%, 100% 50%;
    filter: saturate(1.24) hue-rotate(8deg);
  }
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: -18px !important;
  padding: 18px !important;
  z-index: 6 !important;
  overflow: visible !important;
  background: transparent !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  inset: 10% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(104, 235, 165, .14), rgba(104, 235, 165, .05) 44%, transparent 70%) !important;
  filter: blur(14px) !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  border: 0 !important;
  background: transparent !important;
}

.fourfun-card-number,
.fourfun-card-footer-center small,
.fourfun-card-edition,
.card-inspector-card-number,
.card-inspector-card-date,
.card-inspector-card-edition {
  transform: translateY(-1px) !important;
}

.card-inspector-card,
.card-inspector-stage,
.card-book-slot,
.card-catalog-card-wrap,
.fourfun-card-shell,
.album-preset-card {
  overflow: visible !important;
}

.fourfun-card-face.rarity-uncommon .fourfun-card-holo,
.fourfun-card-back.rarity-uncommon .fourfun-card-holo,
.card-inspector-front.rarity-uncommon .fourfun-card-holo,
.card-inspector-back.rarity-uncommon .fourfun-card-holo {
  opacity: .32 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.30), transparent 16%),
    conic-gradient(from calc(var(--card-hue, 145) * 1deg) at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      rgba(255, 238, 132, .12) 0deg,
      rgba(109, 242, 168, .34) 72deg,
      rgba(94, 224, 255, .30) 148deg,
      rgba(255,255,255,.16) 186deg,
      rgba(123, 255, 197, .28) 244deg,
      rgba(255, 218, 122, .18) 320deg,
      rgba(255, 238, 132, .12) 360deg),
    linear-gradient(130deg, transparent 18%, rgba(137, 255, 194, .12) 34%, rgba(255,255,255,.22) 49%, rgba(109, 242, 168, .18) 62%, transparent 78%) !important;
  background-size: 100% 100%, 165% 165%, 175% 175% !important;
  animation: card-uncommon-rainbow 5.8s linear infinite !important;
  filter: saturate(1.26) !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-back.rarity-epic .fourfun-card-holo,
.card-inspector-front.rarity-epic .fourfun-card-holo,
.card-inspector-back.rarity-epic .fourfun-card-holo {
  opacity: .50 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.40), transparent 15%),
    conic-gradient(from calc(var(--card-hue, 284) * 1deg) at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      rgba(255,255,255,.00) 0deg,
      rgba(246, 176, 255, .22) 40deg,
      rgba(158, 118, 255, .28) 105deg,
      rgba(255,255,255,.18) 158deg,
      rgba(227, 112, 255, .26) 218deg,
      rgba(106, 74, 255, .22) 282deg,
      rgba(255,255,255,.00) 360deg),
    repeating-linear-gradient(132deg,
      rgba(247, 219, 255, .00) 0 10px,
      rgba(247, 219, 255, .10) 10px 14px,
      rgba(163, 103, 255, .00) 14px 24px),
    radial-gradient(circle at 22% 24%, rgba(214, 146, 255, .18), transparent 26%),
    radial-gradient(circle at 78% 72%, rgba(120, 88, 255, .22), transparent 28%),
    linear-gradient(145deg, transparent 14%, rgba(233, 163, 255, .14) 28%, rgba(255,255,255,.24) 50%, rgba(126, 96, 255, .20) 64%, transparent 82%) !important;
  background-size: 100% 100%, 175% 175%, 170% 170%, 130% 130%, 130% 130%, 185% 185% !important;
  animation: card-epic-prismatic 6.4s ease-in-out infinite !important;
  filter: saturate(1.28) hue-rotate(0deg) !important;
}

@keyframes card-epic-prismatic {
  0%, 100% {
    background-position: 0% 0%, 0% 50%, 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    filter: saturate(1.22) hue-rotate(0deg);
  }
  35% {
    background-position: 0% 0%, 55% 34%, 45% 0%, 4% 2%, 96% 98%, 58% 50%;
    filter: saturate(1.32) hue-rotate(8deg);
  }
  70% {
    background-position: 0% 0%, 100% 62%, 100% 0%, 8% 6%, 92% 94%, 100% 50%;
    filter: saturate(1.36) hue-rotate(14deg);
  }
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: -22px !important;
  padding: 22px !important;
  z-index: 7 !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  inset: 6% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124, 239, 172, .18), rgba(124, 239, 172, .08) 42%, transparent 68%) !important;
  filter: blur(16px) !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: 8% !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 14% 22%, rgba(160, 255, 210, .30), transparent 13%),
    radial-gradient(circle at 84% 18%, rgba(160, 255, 210, .22), transparent 12%),
    radial-gradient(circle at 12% 82%, rgba(160, 255, 210, .24), transparent 11%),
    radial-gradient(circle at 86% 78%, rgba(160, 255, 210, .20), transparent 11%) !important;
  filter: blur(10px) !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  width: 8px !important;
  height: 8px !important;
  z-index: 2 !important;
  background: radial-gradient(circle, #fff, rgba(160,255,210,.76) 58%, transparent 80%) !important;
  box-shadow: 0 0 12px rgba(160,255,210,.72), 0 0 22px rgba(96,219,154,.42) !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: 4% !important;
  top: 20% !important;
  bottom: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: 4% !important;
  top: 26% !important;
  bottom: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: 6% !important;
  bottom: 18% !important;
  top: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: 6% !important;
  bottom: 14% !important;
  top: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: 1% !important;
  top: 50% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: 1% !important;
  top: 46% !important;
}

.fourfun-card-number,
.fourfun-card-footer-center small,
.fourfun-card-edition {
  top: 0 !important;
  transform: translateY(-1px) !important;
}

.card-inspector-card-number,
.card-inspector-card-date,
.card-inspector-card-edition {
  transform: translateY(1px) !important;
}

.album-preset-card-number,
.album-preset-card-date {
  transform: translateY(2px) !important;
}

.reward-rarity-seal.rarity-seal-common,
.card-inspector-unified-seal.rarity-seal-common {
  --seal-a: #d7d1c5 !important;
  --seal-b: #69645d !important;
  --seal-text: #fffaf0 !important;
  border-color: #c9c2b5 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(135deg, #d7d1c5, #69645d) !important;
}

.reward-rarity-seal.rarity-seal-uncommon,
.card-inspector-unified-seal.rarity-seal-uncommon {
  --seal-a: #83e8ab !important;
  --seal-b: #226d45 !important;
  --seal-text: #f2fff7 !important;
  border-color: #a8f3c4 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, #83e8ab 0%, #3b9a64 52%, #226d45 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(77,218,132,.22),
    0 3px 8px rgba(0,0,0,.28) !important;
}
.reward-rarity-seal.rarity-seal-uncommon::before,
.reward-rarity-seal.rarity-seal-uncommon::after,
.card-inspector-unified-seal.rarity-seal-uncommon::before,
.card-inspector-unified-seal.rarity-seal-uncommon::after {
  color: #eafff1 !important;
}

.reward-rarity-seal.rarity-seal-rare,
.card-inspector-unified-seal.rarity-seal-rare {
  --seal-a: #78c9ff !important;
  --seal-b: #24558f !important;
  --seal-text: #eff9ff !important;
  border-color: #a9dcff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, #78c9ff 0%, #397fc0 52%, #24558f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(89,178,255,.24),
    0 3px 8px rgba(0,0,0,.28) !important;
}
.reward-rarity-seal.rarity-seal-rare::before,
.reward-rarity-seal.rarity-seal-rare::after,
.card-inspector-unified-seal.rarity-seal-rare::before,
.card-inspector-unified-seal.rarity-seal-rare::after {
  color: #eaf8ff !important;
}

.reward-rarity-seal.rarity-seal-epic,
.card-inspector-unified-seal.rarity-seal-epic {
  --seal-a: #d18cff !important;
  --seal-b: #642a9b !important;
  --seal-text: #fbf0ff !important;
  border-color: #e3b6ff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, #d18cff 0%, #9a51cf 50%, #642a9b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 11px rgba(196,111,255,.26),
    0 3px 8px rgba(0,0,0,.28) !important;
}
.reward-rarity-seal.rarity-seal-epic::before,
.reward-rarity-seal.rarity-seal-epic::after,
.card-inspector-unified-seal.rarity-seal-epic::before,
.card-inspector-unified-seal.rarity-seal-epic::after {
  color: #f6e3ff !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: -46px !important;
  padding: 0 !important;
  z-index: 12 !important;
  overflow: visible !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  inset: 2px !important;
  border: 2px solid rgba(112, 239, 164, .36) !important;
  border-radius: 34px !important;
  background: transparent !important;
  box-shadow:
    0 0 18px rgba(112,239,164,.34),
    0 0 34px rgba(69,190,124,.23),
    inset 0 0 13px rgba(155,255,201,.10) !important;
  filter: drop-shadow(0 0 10px rgba(117,240,169,.26)) !important;
  animation: uncommon-perimeter-breathe 4.8s ease-in-out infinite !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -2px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 0% 24%, rgba(134,255,188,.28), transparent 24%),
    radial-gradient(ellipse at 100% 30%, rgba(134,255,188,.25), transparent 24%),
    radial-gradient(ellipse at 0% 78%, rgba(134,255,188,.22), transparent 22%),
    radial-gradient(ellipse at 100% 74%, rgba(134,255,188,.22), transparent 22%) !important;
  filter: blur(12px) !important;
  animation: uncommon-side-mist 5.6s ease-in-out infinite !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  background: radial-gradient(circle, #fff 0 18%, #a8ffd0 38%, rgba(92,222,148,.72) 61%, transparent 78%) !important;
  box-shadow:
    0 0 11px rgba(169,255,210,.88),
    0 0 23px rgba(74,205,135,.52) !important;
  animation: uncommon-outer-spark 4.2s ease-in-out infinite !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: 1% !important;
  top: 16% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: 1% !important;
  top: 23% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: 3% !important;
  bottom: 14% !important;
  top: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: 3% !important;
  bottom: 12% !important;
  top: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: 0 !important;
  top: 48% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: 0 !important;
  top: 45% !important;
}

@keyframes uncommon-perimeter-breathe {
  0%, 100% {
    opacity: .55;
    transform: scale(.985);
  }
  50% {
    opacity: .95;
    transform: scale(1.025);
  }
}

@keyframes uncommon-side-mist {
  0%, 100% {
    opacity: .42;
    transform: scale(.96);
  }
  50% {
    opacity: .82;
    transform: scale(1.045);
  }
}

@keyframes uncommon-outer-spark {
  0%, 100% {
    opacity: .28;
    transform: scale(.68) translateY(4px);
  }
  50% {
    opacity: 1;
    transform: scale(1.18) translateY(-5px);
  }
}

.fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-back.rarity-epic .fourfun-card-holo,
.card-inspector-front.rarity-epic .fourfun-card-holo,
.card-inspector-back.rarity-epic .fourfun-card-holo {
  opacity: .54 !important;
  mix-blend-mode: screen !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.42), transparent 13%),
    repeating-radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      transparent 0 22px,
      color-mix(in srgb, var(--card-accent, #d06dff) 32%, transparent) 23px 25px,
      transparent 26px 45px),
    repeating-conic-gradient(from 0deg at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      transparent 0 11deg,
      color-mix(in srgb, var(--card-secondary, #7558ff) 22%, transparent) 12deg 15deg,
      transparent 16deg 31deg),
    radial-gradient(circle at 24% 25%, color-mix(in srgb, var(--card-accent, #d06dff) 18%, transparent), transparent 27%),
    radial-gradient(circle at 76% 73%, color-mix(in srgb, var(--card-secondary, #7558ff) 20%, transparent), transparent 29%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 130% 130%, 130% 130% !important;
  animation: epic-mandala-breathe 5.6s ease-in-out infinite !important;
  filter: saturate(1.32) !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo::before,
.fourfun-card-back.rarity-epic .fourfun-card-holo::before,
.card-inspector-front.rarity-epic .fourfun-card-holo::before,
.card-inspector-back.rarity-epic .fourfun-card-holo::before {
  content: "" !important;
  position: absolute !important;
  left: var(--card-shine-x, 50%) !important;
  top: var(--card-shine-y, 50%) !important;
  width: 82% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  background:
    repeating-conic-gradient(
      from 0deg,
      transparent 0 13deg,
      color-mix(in srgb, var(--card-accent, #d06dff) 42%, transparent) 14deg 17deg,
      transparent 18deg 31deg),
    radial-gradient(circle, transparent 0 42%, color-mix(in srgb, var(--card-secondary, #7558ff) 30%, transparent) 43% 45%, transparent 46% 57%, color-mix(in srgb, var(--card-accent, #d06dff) 24%, transparent) 58% 60%, transparent 61%) !important;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--card-accent, #d06dff) 18%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--card-secondary, #7558ff) 16%, transparent) !important;
  opacity: .68 !important;
  animation: epic-rune-wheel 9s linear infinite !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo::after,
.fourfun-card-back.rarity-epic .fourfun-card-holo::after,
.card-inspector-front.rarity-epic .fourfun-card-holo::after,
.card-inspector-back.rarity-epic .fourfun-card-holo::after {
  content: "" !important;
  position: absolute !important;
  left: var(--card-shine-x, 50%) !important;
  top: var(--card-shine-y, 50%) !important;
  width: 48% !important;
  aspect-ratio: 1 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  border: 1px solid color-mix(in srgb, var(--card-accent, #d06dff) 42%, transparent) !important;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--card-accent, #d06dff) 20%, transparent),
    inset 0 0 11px color-mix(in srgb, var(--card-secondary, #7558ff) 16%, transparent) !important;
  opacity: .55 !important;
  animation: epic-inner-glyph 5.2s ease-in-out infinite !important;
}

@keyframes epic-mandala-breathe {
  0%, 100% {
    opacity: .43;
    filter: saturate(1.20);
  }
  50% {
    opacity: .62;
    filter: saturate(1.42);
  }
}

@keyframes epic-rune-wheel {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes epic-inner-glyph {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(.90);
    opacity: .36;
  }
  50% {
    transform: translate(-50%, -50%) rotate(135deg) scale(1.08);
    opacity: .76;
  }
}

.fourfun-card-face.rarity-epic .fourfun-card-holo,
.fourfun-card-back.rarity-epic .fourfun-card-holo,
.card-inspector-front.rarity-epic .fourfun-card-holo,
.card-inspector-back.rarity-epic .fourfun-card-holo {
  opacity: .26 !important;
  mix-blend-mode: screen !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      ellipse 48% 34% at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      rgba(250, 225, 255, .32),
      rgba(214, 145, 255, .14) 36%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 42% 30% at calc(var(--card-shine-x, 50%) - 16%) calc(var(--card-shine-y, 50%) + 12%),
      rgba(157, 105, 255, .14),
      transparent 70%
    ),
    linear-gradient(
      132deg,
      transparent 24%,
      rgba(210, 135, 255, .08) 39%,
      rgba(255, 245, 255, .16) 49%,
      rgba(149, 104, 255, .10) 59%,
      transparent 75%
    ) !important;
  background-size: 100% 100%, 100% 100%, 165% 165% !important;
  animation: epic-soft-veil 7.2s ease-in-out infinite !important;
  filter: saturate(1.10) !important;
}

.fourfun-card-face.rarity-epic .fourfun-card-holo::before,
.fourfun-card-face.rarity-epic .fourfun-card-holo::after,
.fourfun-card-back.rarity-epic .fourfun-card-holo::before,
.fourfun-card-back.rarity-epic .fourfun-card-holo::after,
.card-inspector-front.rarity-epic .fourfun-card-holo::before,
.card-inspector-front.rarity-epic .fourfun-card-holo::after,
.card-inspector-back.rarity-epic .fourfun-card-holo::before,
.card-inspector-back.rarity-epic .fourfun-card-holo::after {
  content: none !important;
  display: none !important;
}

@keyframes epic-soft-veil {
  0%, 100% {
    background-position: 0 0, 0 0, 0% 50%;
    opacity: .22;
  }
  50% {
    background-position: 0 0, 0 0, 100% 50%;
    opacity: .30;
  }
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  display: none !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.rarity-uncommon:not(.is-edge-overlay) > i,
.card-inspector-card > .card-rarity-fx.is-inline.rarity-uncommon:not(.is-edge-overlay) > i,
.card-book-slot .card-rarity-fx.is-inline.rarity-uncommon:not(.is-edge-overlay) > i,
.card-catalog-card-wrap .card-rarity-fx.is-inline.rarity-uncommon:not(.is-edge-overlay) > i,
.album-preset-card > .card-rarity-fx.is-inline.rarity-uncommon:not(.is-edge-overlay) > i {
  display: none !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: -68px !important;
  z-index: 12 !important;
  overflow: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 2% 24%, rgba(126, 247, 177, .20), transparent 18%),
    radial-gradient(ellipse at 98% 31%, rgba(126, 247, 177, .18), transparent 18%),
    radial-gradient(ellipse at 4% 78%, rgba(126, 247, 177, .17), transparent 17%),
    radial-gradient(ellipse at 96% 72%, rgba(126, 247, 177, .16), transparent 17%) !important;
  filter: blur(15px) !important;
  animation: uncommon-far-mist 5.8s ease-in-out infinite !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  display: block !important;
  width: 13px !important;
  height: 21px !important;
  border-radius: 100% 0 100% 0 !important;
  background: linear-gradient(145deg, rgba(238,255,245,.98), rgba(111,235,163,.78)) !important;
  box-shadow:
    0 0 12px rgba(165,255,207,.72),
    0 0 24px rgba(78,205,137,.42) !important;
  transform: rotate(38deg) !important;
  animation: uncommon-large-leaf 5.2s ease-in-out infinite !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: 1% !important;
  top: 15% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: 1% !important;
  top: 22% !important;
  animation-delay: -.8s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: 2% !important;
  bottom: 17% !important;
  top: auto !important;
  animation-delay: -1.6s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: 2% !important;
  bottom: 14% !important;
  top: auto !important;
  animation-delay: -2.4s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -1% !important;
  top: 48% !important;
  animation-delay: -3.2s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -1% !important;
  top: 45% !important;
  animation-delay: -4s !important;
}

@keyframes uncommon-far-mist {
  0%, 100% {
    opacity: .30;
    transform: scale(.96);
  }
  50% {
    opacity: .64;
    transform: scale(1.035);
  }
}

@keyframes uncommon-large-leaf {
  0%, 100% {
    opacity: .25;
    transform: rotate(38deg) translateY(8px) scale(.78);
  }
  50% {
    opacity: .96;
    transform: rotate(60deg) translateY(-10px) scale(1.12);
  }
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: calc(100% + 136px) !important;
  height: calc(100% + 136px) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  transform: none !important;
  rotate: 38deg;
  translate: 0 8px;
  scale: .78;
  will-change: translate, rotate, scale, opacity;
  animation: uncommon-centered-leaf-drift 5.2s ease-in-out infinite !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  animation-delay: -.8s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  animation-delay: -1.6s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  animation-delay: -2.4s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  animation-delay: -3.2s !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  animation-delay: -4s !important;
}

@keyframes uncommon-centered-leaf-drift {
  0%, 100% {
    opacity: .24;
    translate: 0 10px;
    rotate: 30deg;
    scale: .76;
  }
  35% {
    opacity: .82;
    translate: 7px -4px;
    rotate: 52deg;
    scale: 1.03;
  }
  65% {
    opacity: 1;
    translate: -5px -13px;
    rotate: 68deg;
    scale: 1.14;
  }
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
  overflow: visible !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -34px !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -30px !important;
  top: 13% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -30px !important;
  top: 20% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -34px !important;
  bottom: 16% !important;
  top: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -34px !important;
  bottom: 13% !important;
  top: auto !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -38px !important;
  top: 48% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -38px !important;
  top: 44% !important;
}

.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7),
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7),
.card-book-slot .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7),
.card-catalog-card-wrap .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7),
.album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7) {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  z-index: 2 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  transform: none !important;
  transform-origin: center center !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-surface {
  position: relative !important;
  z-index: 3 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -26px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 4% 24%, rgba(126, 247, 177, .18), transparent 19%),
    radial-gradient(ellipse at 96% 30%, rgba(126, 247, 177, .16), transparent 19%),
    radial-gradient(ellipse at 5% 78%, rgba(126, 247, 177, .15), transparent 18%),
    radial-gradient(ellipse at 95% 72%, rgba(126, 247, 177, .14), transparent 18%) !important;
  filter: blur(11px) !important;
  animation: uncommon-far-mist 5.8s ease-in-out infinite !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  display: block !important;
  width: 9px !important;
  height: 14px !important;
  border-radius: 100% 0 100% 0 !important;
  background: linear-gradient(145deg, rgba(238,255,245,.98), rgba(111,235,163,.78)) !important;
  box-shadow:
    0 0 9px rgba(165,255,207,.70),
    0 0 18px rgba(78,205,137,.40) !important;
  transform: none !important;
  rotate: 38deg;
  translate: 0 6px;
  scale: .76;
  will-change: translate, rotate, scale, opacity;
  animation: uncommon-centered-leaf-drift 5.2s ease-in-out infinite !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -18px !important;
  top: 13% !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -18px !important;
  top: 20% !important;
  animation-delay: -.8s !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -20px !important;
  bottom: 16% !important;
  top: auto !important;
  animation-delay: -1.6s !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -20px !important;
  bottom: 13% !important;
  top: auto !important;
  animation-delay: -2.4s !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -23px !important;
  top: 48% !important;
  animation-delay: -3.2s !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -23px !important;
  top: 44% !important;
  animation-delay: -4s !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7) {
  display: none !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -12px !important;
  filter: blur(8px) !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  width: 7px !important;
  height: 11px !important;
  scale: .68 !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -8px !important;
  top: 16% !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -8px !important;
  top: 23% !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -9px !important;
  bottom: 18% !important;
  top: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -9px !important;
  bottom: 16% !important;
  top: auto !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -10px !important;
  top: 49% !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -10px !important;
  top: 46% !important;
}

.card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  --uncommon-fx-primary: var(--card-accent, #6feb9f);
  --uncommon-fx-secondary: var(--card-secondary, var(--card-accent, #3fae72));
}

.card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp,
.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  background:
    radial-gradient(ellipse at 4% 24%, color-mix(in srgb, var(--uncommon-fx-primary) 30%, transparent), transparent 19%),
    radial-gradient(ellipse at 96% 30%, color-mix(in srgb, var(--uncommon-fx-secondary) 28%, transparent), transparent 19%),
    radial-gradient(ellipse at 5% 78%, color-mix(in srgb, var(--uncommon-fx-secondary) 24%, transparent), transparent 18%),
    radial-gradient(ellipse at 95% 72%, color-mix(in srgb, var(--uncommon-fx-primary) 22%, transparent), transparent 18%) !important;
}

.card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i,
.card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--uncommon-fx-primary) 18%, white 82%),
      color-mix(in srgb, var(--uncommon-fx-primary) 78%, white 22%) 54%,
      color-mix(in srgb, var(--uncommon-fx-secondary) 86%, black 14%)
    ) !important;
  box-shadow:
    0 0 9px color-mix(in srgb, var(--uncommon-fx-primary) 64%, transparent),
    0 0 18px color-mix(in srgb, var(--uncommon-fx-secondary) 46%, transparent) !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.rarity-uncommon,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  --uncommon-fx-primary: var(--card-accent, #6feb9f);
  --uncommon-fx-secondary: var(--card-secondary, var(--card-accent, #3fae72));
}

.card-inspector-card > .card-rarity-fx.is-inline.rarity-uncommon .card-rarity-fx-ring,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  border-color: color-mix(in srgb, var(--uncommon-fx-secondary) 58%, rgba(255,255,255,.16)) !important;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--uncommon-fx-primary) 20%, transparent),
      color-mix(in srgb, var(--uncommon-fx-secondary) 8%, transparent) 46%,
      transparent 70%
    ) !important;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--uncommon-fx-primary) 32%, transparent),
    0 0 30px color-mix(in srgb, var(--uncommon-fx-secondary) 22%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--uncommon-fx-primary) 12%, transparent) !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.rarity-uncommon .card-rarity-fx-wisp,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  border-color: color-mix(in srgb, var(--uncommon-fx-secondary) 52%, rgba(255,255,255,.12)) !important;
  background:
    radial-gradient(ellipse at 4% 24%, color-mix(in srgb, var(--uncommon-fx-primary) 30%, transparent), transparent 19%),
    radial-gradient(ellipse at 96% 30%, color-mix(in srgb, var(--uncommon-fx-secondary) 28%, transparent), transparent 19%),
    radial-gradient(ellipse at 5% 78%, color-mix(in srgb, var(--uncommon-fx-secondary) 24%, transparent), transparent 18%),
    radial-gradient(ellipse at 95% 72%, color-mix(in srgb, var(--uncommon-fx-primary) 22%, transparent), transparent 18%) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--uncommon-fx-secondary) 20%, transparent) !important;
}

.card-inspector-card > .card-rarity-fx.is-inline.rarity-uncommon > i,
.card-inspector-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--uncommon-fx-primary) 18%, white 82%),
      color-mix(in srgb, var(--uncommon-fx-primary) 78%, white 22%) 54%,
      color-mix(in srgb, var(--uncommon-fx-secondary) 86%, black 14%)
    ) !important;
  box-shadow:
    0 0 9px color-mix(in srgb, var(--uncommon-fx-primary) 64%, transparent),
    0 0 18px color-mix(in srgb, var(--uncommon-fx-secondary) 46%, transparent) !important;
}

.card-catalog-grid {
  align-items: start !important;
  gap: 26px 18px !important;
  overflow: visible !important;
}

.card-catalog-card-wrap {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-catalog-card-wrap::before,
.card-catalog-card-wrap::after {
  content: none !important;
  display: none !important;
}

.card-catalog-preset-card {
  position: relative !important;
  display: block !important;
  width: min(232px, 100%) !important;
  min-width: 0 !important;
  aspect-ratio: 985 / 1473 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 17px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer !important;
  overflow: visible !important;
  isolation: isolate !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  perspective: 1300px !important;
  transform-style: preserve-3d !important;
}

.card-catalog-preset-card:focus-visible {
  outline: 2px solid rgba(255, 226, 139, .88) !important;
  outline-offset: 5px !important;
}

.card-catalog-preset-surface {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 17px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) rotateZ(var(--card-rz)) !important;
  transform-style: preserve-3d !important;
  transform-origin: center center !important;
  transition: transform 130ms ease-out !important;
  will-change: transform !important;
}

.card-catalog-preset-image,
.card-catalog-preset-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.card-catalog-preset-image {
  z-index: 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.card-catalog-preset-foil {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.card-catalog-preset-card.rarity-common .card-catalog-preset-foil {
  opacity: .18 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.32), transparent 18%),
    linear-gradient(118deg, transparent 28%, rgba(238,229,214,.20) 49%, transparent 64%) !important;
  background-size: 100% 100%, 165% 165% !important;
}

.card-catalog-preset-card.rarity-uncommon .card-catalog-preset-foil {
  opacity: .28 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.28), transparent 17%),
    conic-gradient(from calc(var(--card-hue) * 1deg) at var(--card-shine-x) var(--card-shine-y),
      rgba(255,238,132,.10),
      rgba(109,242,168,.32),
      rgba(94,224,255,.28),
      rgba(255,255,255,.15),
      rgba(123,255,197,.26),
      rgba(255,218,122,.15),
      rgba(255,238,132,.10)) !important;
  background-size: 100% 100%, 165% 165% !important;
  animation: card-uncommon-rainbow 5.8s linear infinite !important;
}

.card-catalog-preset-card.rarity-rare .card-catalog-preset-foil {
  opacity: .25 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.32), transparent 18%),
    linear-gradient(124deg, transparent 25%, rgba(109,181,255,.10) 38%, rgba(220,241,255,.30) 49%, rgba(109,181,255,.15) 58%, transparent 70%) !important;
  background-size: 100% 100%, 165% 165% !important;
}

.card-catalog-preset-card.rarity-epic .card-catalog-preset-foil {
  opacity: .30 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.34), transparent 17%),
    radial-gradient(circle at calc(var(--card-shine-x) - 14%) calc(var(--card-shine-y) - 10%), rgba(214,142,255,.16), transparent 27%),
    radial-gradient(circle at calc(var(--card-shine-x) + 16%) calc(var(--card-shine-y) + 12%), rgba(118,88,255,.18), transparent 29%) !important;
  background-size: 100% 100% !important;
}

.card-catalog-preset-card.rarity-legendary .card-catalog-preset-foil {
  opacity: .68 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255,255,255,.70), rgba(255,255,255,.14) 12%, transparent 24%),
    linear-gradient(120deg, rgba(255,76,199,.22), rgba(255,202,82,.18), rgba(84,232,255,.22), rgba(164,108,255,.22), rgba(255,76,199,.22)) !important;
  background-size: auto, 220% 100% !important;
  animation: cardSealLegendaryHolo 2.8s linear infinite !important;
}

.card-catalog-preset-frame {
  z-index: 20 !important;
  object-fit: fill !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-catalog-preset-title,
.card-catalog-preset-rarity,
.card-catalog-preset-description,
.card-catalog-preset-number,
.card-catalog-preset-date,
.card-catalog-preset-edition,
.card-catalog-preset-mark {
  position: absolute !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card-catalog-preset-title {
  left: 10% !important;
  right: 10% !important;
  top: 1.55% !important;
  height: 6.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff7eb !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(12px, 1.45vw, 17px) !important;
  font-weight: 700 !important;
  line-height: .96 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.88) !important;
}

.card-catalog-preset-rarity.reward-rarity-seal {
  top: 8.55% !important;
  right: 4.05% !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 23.5% !important;
  max-width: 27% !important;
  height: 4.15% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2.8% !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  font-size: clamp(5px, .55vw, 7px) !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-indent: .08em !important;
  white-space: nowrap !important;
}

.card-catalog-preset-description {
  left: 11.2% !important;
  right: 11.2% !important;
  top: 70.15% !important;
  height: 20.6% !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,248,237,.98) !important;
  font-size: clamp(7.5px, .8vw, 10.5px) !important;
  font-weight: 600 !important;
  line-height: 1.17 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.90) !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
}

.card-catalog-preset-number {
  left: 7.7% !important;
  bottom: 2.25% !important;
  color: #fff5e3 !important;
  font-size: clamp(7px, .72vw, 9.5px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.card-catalog-preset-date {
  left: 26% !important;
  width: 26% !important;
  bottom: 2.3% !important;
  overflow: hidden !important;
  color: #fff5e3 !important;
  font-size: clamp(5.5px, .55vw, 7.5px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.card-catalog-preset-edition {
  right: 10.5% !important;
  width: 29% !important;
  bottom: 2.3% !important;
  overflow: hidden !important;
  color: #fff5e3 !important;
  font-size: clamp(5.2px, .52vw, 7.2px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.card-catalog-preset-mark {
  right: 5.5% !important;
  bottom: 1.95% !important;
  color: #fff1b4 !important;
  font-size: clamp(8px, .82vw, 11px) !important;
  line-height: 1 !important;
  text-shadow: 0 0 7px rgba(255,221,125,.42), 0 1px 2px rgba(0,0,0,.85) !important;
}

.card-catalog-preset-card > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  inset: -12px !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.card-catalog-preset-card > .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -16px !important;
  z-index: 4 !important;
  overflow: visible !important;
  -webkit-mask: linear-gradient(90deg, #000 0 13%, transparent 22% 78%, #000 87% 100%) !important;
  mask: linear-gradient(90deg, #000 0 13%, transparent 22% 78%, #000 87% 100%) !important;
}

.card-catalog-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  overflow: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.card-catalog-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  display: none !important;
}

.card-catalog-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -18px !important;
}

.card-catalog-preset-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  width: 8px !important;
  height: 12px !important;
  border-radius: 100% 0 100% 0 !important;
}

.card-stock-stamp {
  z-index: 50 !important;
}

@media (max-width: 980px) {
  .card-catalog-preset-card {
    width: min(220px, 78vw) !important;
  }
}

@media (max-width: 620px) {
  .card-catalog-preset-card {
    width: min(218px, 70vw) !important;
  }
}

.card-catalog-preset-card > .card-catalog-preset-surface >
.card-inspector-unified-seal.is-catalog {
  position: absolute !important;
  top: 8.55% !important;
  right: 4.05% !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  transform: scale(.72) !important;
  transform-origin: top right !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.card-pack-full-image {
  clip-path: inset(6.236% 0 0 0) !important;
}

.card-pack-plastic-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(112deg,
      transparent 0 18%,
      rgba(255,255,255,.045) 27%,
      rgba(255,255,255,.16) 34%,
      rgba(255,255,255,.045) 41%,
      transparent 52% 100%),
    radial-gradient(ellipse at 24% 16%, rgba(255,255,255,.13), transparent 24%),
    radial-gradient(ellipse at 78% 72%, rgba(255,255,255,.055), transparent 28%) !important;
  background-size: 190% 100%, 100% 100%, 100% 100% !important;
  background-position: -120% 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: screen !important;
  opacity: .72 !important;
  pointer-events: none !important;
  -webkit-mask-image: url('/images/fullpackage.png') !important;
  mask-image: url('/images/fullpackage.png') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  animation: card-pack-plastic-soft-sweep 4.8s ease-in-out infinite !important;
}

.card-pack-plastic-overlay::before {
  content: "" !important;
  position: absolute !important;
  top: -16% !important;
  bottom: -16% !important;
  left: -48% !important;
  width: 28% !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.03) 24%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.035) 76%,
    transparent) !important;
  filter: blur(5px) !important;
  transform: skewX(-16deg) !important;
  opacity: .56 !important;
  animation: card-pack-plastic-glint 5.6s ease-in-out infinite 1.1s !important;
}

.card-pack-plastic-overlay::after {
  content: "" !important;
  position: absolute !important;
  inset: 7% 8% 6% !important;
  background:
    linear-gradient(162deg, transparent 0 42%, rgba(255,255,255,.055) 49%, transparent 56%),
    linear-gradient(24deg, transparent 0 64%, rgba(255,255,255,.04) 70%, transparent 76%) !important;
  opacity: .55 !important;
  filter: blur(.35px) !important;
}

@keyframes card-pack-plastic-soft-sweep {
  0%, 100% {
    background-position: -120% 0, 0 0, 0 0;
    opacity: .58;
  }
  50% {
    background-position: 120% 0, 0 0, 0 0;
    opacity: .78;
  }
}

@keyframes card-pack-plastic-glint {
  0%, 18% {
    left: -48%;
    opacity: 0;
  }
  34% { opacity: .46; }
  64% { opacity: .58; }
  82%, 100% {
    left: 122%;
    opacity: 0;
  }
}

.card-pack-image-stage::after {
  content: "" !important;
  position: absolute !important;
  z-index: 18 !important;
  top: calc(6.236% - 1px) !important;
  left: 4.5% !important;
  right: 4.5% !important;
  height: 2px !important;
  background: repeating-linear-gradient(90deg,
    rgba(255,239,174,.96) 0 8px,
    rgba(213,163,50,.95) 8px 10px,
    transparent 10px 16px) !important;
  box-shadow:
    0 0 4px rgba(255,211,92,.62),
    0 1px 0 rgba(49,29,4,.48) !important;
  clip-path: inset(0 0 0 var(--tear-progress)) !important;
  opacity: .92 !important;
  pointer-events: none !important;
  transition: opacity .16s linear !important;
}

.card-pack-image-wrapper.is-torn .card-pack-image-stage::after {
  opacity: 0 !important;
}

.card-pack-full-image {
  clip-path: inset(6.236% 0 0 0) !important;
}

.card-pack-top-peel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 100% !important;
  height: 6.236% !important;
  overflow: visible !important;
  transform-origin: left center !important;
  transform:
    translateX(var(--tear-shift))
    translateY(calc(var(--tear-shift) * -0.09))
    rotateZ(calc(var(--tear-rotate) * .22)) !important;
  pointer-events: none !important;
}

.card-pack-top-peel img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}

.card-pack-image-stage::after {
  z-index: 18 !important;
}

.card-pack-image-wrapper.is-torn .card-pack-top-peel {
  animation: card-pack-peel-away var(--card-pack-peel-duration, .95s) cubic-bezier(.24,.84,.25,1) forwards !important;
}

.card-pack-top-peel {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 6.236% !important;
  display: block !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

.card-pack-top-peel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background-image: url('/images/packagetop.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  clip-path: polygon(
    var(--tear-progress) 0,
    100% 0,
    100% 100%,
    calc(var(--tear-progress) + 1.5%) 100%,
    calc(var(--tear-progress) - .8%) 72%,
    calc(var(--tear-progress) + .6%) 44%,
    calc(var(--tear-progress) - .5%) 18%
  ) !important;
  -webkit-clip-path: polygon(
    var(--tear-progress) 0,
    100% 0,
    100% 100%,
    calc(var(--tear-progress) + 1.5%) 100%,
    calc(var(--tear-progress) - .8%) 72%,
    calc(var(--tear-progress) + .6%) 44%,
    calc(var(--tear-progress) - .5%) 18%
  ) !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.24)) !important;
}

.card-pack-top-peel > img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  clip-path: polygon(
    0 0,
    var(--tear-progress) 0,
    calc(var(--tear-progress) - .5%) 18%,
    calc(var(--tear-progress) + .6%) 44%,
    calc(var(--tear-progress) - .8%) 72%,
    calc(var(--tear-progress) + 1.5%) 100%,
    0 100%
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    var(--tear-progress) 0,
    calc(var(--tear-progress) - .5%) 18%,
    calc(var(--tear-progress) + .6%) 44%,
    calc(var(--tear-progress) - .8%) 72%,
    calc(var(--tear-progress) + 1.5%) 100%,
    0 100%
  ) !important;
  transform-origin: left center !important;
  transform:
    translate3d(var(--tear-peel-x), var(--tear-peel-y), 14px)
    rotateZ(var(--tear-peel-rotate))
    rotateX(var(--tear-peel-curl)) !important;
  filter: drop-shadow(7px 8px 8px rgba(0,0,0,.30)) !important;
  will-change: transform, clip-path !important;
}

.card-pack-top-peel::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 7% !important;
  bottom: 5% !important;
  left: var(--tear-progress) !important;
  width: 2px !important;
  transform: translateX(-1px) rotate(1deg) !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(255,239,184,.72) 22%,
    rgba(255,255,255,.88) 48%,
    rgba(213,162,50,.62) 78%,
    transparent) !important;
  box-shadow: 0 0 6px rgba(255,215,112,.46) !important;
  opacity: var(--tear-edge-opacity, 0) !important;
  pointer-events: none !important;
}

.card-pack-image-wrapper.is-torn .card-pack-top-peel {
  animation: none !important;
}

.card-pack-image-wrapper.is-torn .card-pack-top-peel::before {
  opacity: 0 !important;
}

.card-pack-image-wrapper.is-torn .card-pack-top-peel > img {
  animation: card-pack-top-final-upward-tear .92s cubic-bezier(.22,.82,.24,1) forwards !important;
}

.card-pack-image-wrapper.is-torn .card-pack-top-peel::after {
  opacity: 0 !important;
}

@keyframes card-pack-top-final-upward-tear {
  to {
    transform: translate3d(118%, -62px, 30px) rotateZ(13deg) rotateX(30deg) !important;
    opacity: 0;
  }
}

.card-reveal-back {
  isolation: isolate !important;
}

.card-reveal-back-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
}

.card-reveal-back > .card-reveal-back-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.card-reveal-back > .fourfun-card-holo,
.card-reveal-back > .fourfun-card-gloss,
.card-reveal-back > .fourfun-card-grain,
.card-reveal-back > .fourfun-card-particles {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.card-reveal-back > .fourfun-card-grain { z-index: 3 !important; }
.card-reveal-back > .fourfun-card-holo { z-index: 4 !important; }
.card-reveal-back > .fourfun-card-gloss { z-index: 5 !important; }
.card-reveal-back > .fourfun-card-particles { z-index: 6 !important; }

.card-reveal-back.rarity-common > .fourfun-card-holo {
  opacity: .20 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.34), transparent 18%),
    linear-gradient(118deg, transparent 26%, rgba(255,255,255,.10) 42%, rgba(238,229,214,.28) 50%, transparent 62%),
    linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)) !important;
  background-size: 100% 100%, 165% 165%, 100% 100% !important;
  animation: card-common-satin 7s ease-in-out infinite !important;
  filter: saturate(.95) !important;
}

.card-reveal-back.rarity-uncommon > .fourfun-card-holo {
  opacity: .32 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.30), transparent 16%),
    conic-gradient(from calc(var(--card-hue, 145) * 1deg) at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      rgba(255,238,132,.12) 0deg,
      color-mix(in srgb, var(--card-accent, #6df2a8) 70%, transparent) 72deg,
      rgba(94,224,255,.30) 148deg,
      rgba(255,255,255,.16) 186deg,
      color-mix(in srgb, var(--card-secondary, #7bffc5) 66%, transparent) 244deg,
      rgba(255,218,122,.18) 320deg,
      rgba(255,238,132,.12) 360deg),
    linear-gradient(130deg, transparent 18%, color-mix(in srgb, var(--card-accent, #89ffc2) 20%, transparent) 34%, rgba(255,255,255,.22) 49%, color-mix(in srgb, var(--card-secondary, #6df2a8) 22%, transparent) 62%, transparent 78%) !important;
  background-size: 100% 100%, 165% 165%, 175% 175% !important;
  animation: card-uncommon-rainbow 5.8s linear infinite !important;
  filter: saturate(1.26) !important;
}

.card-reveal-back.rarity-rare > .fourfun-card-holo {
  opacity: .28 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.30), transparent 20%),
    linear-gradient(124deg, transparent 22%, rgba(109,181,255,.08) 36%, rgba(220,241,255,.36) 49%, rgba(109,181,255,.16) 58%, transparent 70%),
    repeating-linear-gradient(135deg, rgba(127,190,255,.11) 0 2px, transparent 2px 9px) !important;
  background-size: 100% 100%, 160% 160%, 140% 140% !important;
  animation: card-rare-crystal 5.4s ease-in-out infinite !important;
  filter: saturate(1.1) !important;
}

.card-reveal-back.rarity-epic > .fourfun-card-holo {
  opacity: .26 !important;
  mix-blend-mode: screen !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 48% 34% at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(250,225,255,.32), rgba(214,145,255,.14) 36%, transparent 72%),
    radial-gradient(ellipse 42% 30% at calc(var(--card-shine-x, 50%) - 16%) calc(var(--card-shine-y, 50%) + 12%), rgba(157,105,255,.14), transparent 70%),
    linear-gradient(132deg, transparent 24%, rgba(210,135,255,.08) 39%, rgba(255,245,255,.16) 49%, rgba(149,104,255,.10) 59%, transparent 75%) !important;
  background-size: 100% 100%, 100% 100%, 165% 165% !important;
  animation: epic-soft-veil 7.2s ease-in-out infinite !important;
  filter: saturate(1.10) !important;
}

.card-reveal-back.rarity-epic > .fourfun-card-holo::before,
.card-reveal-back.rarity-epic > .fourfun-card-holo::after {
  content: none !important;
  display: none !important;
}

.card-reveal-back.rarity-legendary > .fourfun-card-holo {
  opacity: .64 !important;
  mix-blend-mode: color-dodge !important;
  background:
    radial-gradient(circle at var(--card-shine-x, 50%) var(--card-shine-y, 50%), rgba(255,255,255,.62), transparent 23%),
    conic-gradient(from 0deg at var(--card-shine-x, 50%) var(--card-shine-y, 50%),
      rgba(255,66,196,.30),
      rgba(255,194,68,.22),
      rgba(77,229,255,.32),
      rgba(126,102,255,.28),
      rgba(255,66,196,.30)) !important;
  background-size: 100% 100%, 170% 170% !important;
  animation: cardSealLegendaryHolo 3.4s linear infinite !important;
  filter: saturate(1.25) !important;
}

.card-reveal-back.rarity-common > .fourfun-card-particles { opacity: .08 !important; }
.card-reveal-back.rarity-uncommon > .fourfun-card-particles { opacity: .18 !important; }
.card-reveal-back.rarity-rare > .fourfun-card-particles { opacity: .26 !important; }
.card-reveal-back.rarity-epic > .fourfun-card-particles { opacity: .34 !important; }
.card-reveal-back.rarity-legendary > .fourfun-card-particles { opacity: .50 !important; }

.card-reveal-back {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  isolation: isolate !important;
}

.card-reveal-back::before,
.card-reveal-back::after {
  content: none !important;
  display: none !important;
}

.card-reveal-back > .card-reveal-back-overlay,
.card-reveal-back > .fourfun-card-holo,
.card-reveal-back > .fourfun-card-gloss,
.card-reveal-back > .fourfun-card-grain,
.card-reveal-back > .fourfun-card-particles {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.card-reveal-back-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: fill !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  user-select: none !important;
  pointer-events: none !important;
}

.card-reveal-back-sheen {
  position: absolute !important;
  top: -18% !important;
  bottom: -18% !important;
  left: -62% !important;
  z-index: 3 !important;
  display: block !important;
  width: 42% !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 0 28%,
    rgba(255,255,255,.025) 36%,
    rgba(255,255,255,.16) 48%,
    rgba(255,248,218,.24) 52%,
    rgba(255,255,255,.08) 58%,
    transparent 70% 100%
  ) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: translateX(0) skewX(-12deg) !important;
  transform-origin: center !important;
  mix-blend-mode: screen !important;
  filter: blur(.4px) !important;
  pointer-events: none !important;
  animation: card-reveal-back-slow-sheen 9.5s ease-in-out infinite !important;
}

@keyframes card-reveal-back-slow-sheen {
  0%, 58% {
    left: -62%;
    opacity: 0;
  }
  62% {
    left: -62%;
    opacity: .16;
  }
  72% {
    left: 28%;
    opacity: .46;
  }
  80% {
    left: 124%;
    opacity: 0;
  }
  100% {
    left: 124%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-back-sheen {
    animation: none !important;
    opacity: 0 !important;
  }
}

.card-reveal-back > .card-reveal-back-sheen {
  position: absolute !important;
  top: -22% !important;
  bottom: -22% !important;
  left: -68% !important;
  z-index: 4 !important;
  display: block !important;
  width: 48% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(
    106deg,
    transparent 0 26%,
    rgba(255,255,255,.04) 34%,
    rgba(255,255,255,.34) 43%,
    rgba(255,252,236,.72) 50%,
    rgba(255,255,255,.42) 56%,
    rgba(255,255,255,.08) 64%,
    transparent 74% 100%
  ) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) skewX(-13deg) !important;
  transform-origin: center !important;
  mix-blend-mode: screen !important;
  filter: blur(.75px) !important;
  pointer-events: none !important;
  animation: card-reveal-back-visible-sheen 8.8s cubic-bezier(.22,.72,.28,1) infinite !important;
  will-change: transform, opacity !important;
}

@keyframes card-reveal-back-visible-sheen {
  0%, 3% {
    transform: translate3d(0, 0, 0) skewX(-13deg);
    opacity: 0;
  }
  6% {
    opacity: .28;
  }
  14% {
    opacity: .82;
  }
  23% {
    transform: translate3d(430%, 0, 0) skewX(-13deg);
    opacity: .20;
  }
  27%, 100% {
    transform: translate3d(430%, 0, 0) skewX(-13deg);
    opacity: 0;
  }
}

.card-reveal-front.fourfun-card-shell {
  overflow: visible !important;
  isolation: isolate !important;
}

.card-reveal-front.fourfun-card-shell > .card-rarity-fx.is-inline {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.card-reveal-front.fourfun-card-shell > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  inset: -24px !important;
  z-index: 1 !important;
}

.card-reveal-front.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -28px !important;
  z-index: 5 !important;
  -webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88% 100%) !important;
  mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88% 100%) !important;
}

.card-reveal-front.fourfun-card-shell > .fourfun-card-body {
  z-index: 3 !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-back > .card-reveal-back-sheen {
    animation: none !important;
    opacity: 0 !important;
  }
}

.card-reveal-back > div.card-reveal-back-sheen {
  position: absolute !important;
  top: -24% !important;
  bottom: -24% !important;
  left: -58% !important;
  z-index: 12 !important;
  display: block !important;
  width: 34% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 42% !important;
  background:
    linear-gradient(
      104deg,
      transparent 0 15%,
      rgba(255,255,255,.10) 28%,
      rgba(255,255,255,.48) 43%,
      rgba(255,253,240,.88) 50%,
      rgba(255,255,255,.52) 57%,
      rgba(255,255,255,.12) 72%,
      transparent 86% 100%
    ) !important;
  box-shadow:
    0 0 22px rgba(255,255,255,.20),
    0 0 44px rgba(255,248,210,.10) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(0,0,0) skewX(-11deg) !important;
  transform-origin: center !important;
  mix-blend-mode: screen !important;
  filter: blur(1.2px) !important;
  pointer-events: none !important;
  animation: card-reveal-back-clear-sheen 10.8s cubic-bezier(.22,.72,.28,1) infinite !important;
  will-change: transform, opacity !important;
}

@keyframes card-reveal-back-clear-sheen {
  0%, 5% {
    transform: translate3d(0,0,0) skewX(-11deg);
    opacity: 0;
  }
  8% {
    opacity: .58;
  }
  14% {
    opacity: .86;
  }
  27% {
    transform: translate3d(560%,0,0) skewX(-11deg);
    opacity: .62;
  }
  34%, 100% {
    transform: translate3d(560%,0,0) skewX(-11deg);
    opacity: 0;
  }
}

.card-reveal-card-wrap.is-flipped > .card-rarity-fx.is-stage {
  position: absolute !important;
  inset: -30px !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  border-radius: 22px !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
  animation: card-reveal-live-fx-in .48s ease-out both !important;
}

.card-reveal-card-wrap.is-flipped > .card-rarity-fx.is-stage.is-edge-overlay {
  inset: -34px !important;
  z-index: 7 !important;
  overflow: visible !important;
  transform: none !important;
  -webkit-mask: linear-gradient(90deg, #000 0 15%, transparent 25% 75%, #000 85% 100%) !important;
  mask: linear-gradient(90deg, #000 0 15%, transparent 25% 75%, #000 85% 100%) !important;
}

.card-reveal-card-wrap.is-flipped > .card-rarity-fx.is-stage .card-rarity-fx-ring,
.card-reveal-card-wrap.is-flipped > .card-rarity-fx.is-stage .card-rarity-fx-wisp,
.card-reveal-card-wrap.is-flipped > .card-rarity-fx.is-stage > i {
  visibility: visible !important;
}

.card-reveal-card-wrap.is-flipped > .card-reveal-stack {
  z-index: 4 !important;
}

@keyframes card-reveal-live-fx-in {
  from {
    opacity: 0;
    scale: .90;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-back > div.card-reveal-back-sheen {
    animation: none !important;
    opacity: .18 !important;
    left: 34% !important;
  }

  .card-reveal-card-wrap.is-flipped > .card-rarity-fx.is-stage {
    animation: none !important;
  }
}

.card-reveal-card-wrap > .card-reveal-live-fx-shell {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 991 / 1473 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

.card-reveal-card-wrap > .card-reveal-live-fx-shell > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -24px !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
  pointer-events: none !important;
}

.card-reveal-card-wrap > .card-reveal-live-fx-shell > .card-rarity-fx.is-inline.is-edge-overlay {
  inset: -28px !important;
  z-index: 3 !important;
  overflow: visible !important;
  -webkit-mask: linear-gradient(90deg, #000 0 15%, transparent 24% 76%, #000 85% 100%) !important;
  mask: linear-gradient(90deg, #000 0 15%, transparent 24% 76%, #000 85% 100%) !important;
}

.card-reveal-card-wrap > .card-reveal-live-fx-shell > .card-rarity-fx.is-inline .card-rarity-fx-ring,
.card-reveal-card-wrap > .card-reveal-live-fx-shell > .card-rarity-fx.is-inline .card-rarity-fx-wisp,
.card-reveal-card-wrap > .card-reveal-live-fx-shell > .card-rarity-fx.is-inline > i {
  visibility: visible !important;
}

.card-reveal-back > div.card-reveal-back-sheen {
  position: absolute !important;
  inset: -18% auto -18% 0 !important;
  z-index: 20 !important;
  display: block !important;
  width: 46% !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 38% !important;
  background: linear-gradient(
    104deg,
    transparent 0 18%,
    rgba(255,255,255,.10) 29%,
    rgba(255,255,255,.48) 41%,
    rgba(255,255,255,.96) 50%,
    rgba(255,250,222,.64) 57%,
    rgba(255,255,255,.18) 69%,
    transparent 82% 100%
  ) !important;
  box-shadow:
    0 0 18px rgba(255,255,255,.24),
    0 0 36px rgba(255,248,214,.14) !important;
  opacity: 0 !important;
  visibility: visible !important;
  mix-blend-mode: screen !important;
  filter: blur(.65px) !important;
  transform: translate3d(-155%, 0, 0) skewX(-12deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
  animation: card-reveal-back-readable-sheen 6.4s cubic-bezier(.24,.72,.28,1) infinite !important;
}

@keyframes card-reveal-back-readable-sheen {
  0%, 5% {
    transform: translate3d(-155%, 0, 0) skewX(-12deg);
    opacity: 0;
  }
  8% {
    opacity: .42;
  }
  13% {
    opacity: .96;
  }
  29% {
    transform: translate3d(335%, 0, 0) skewX(-12deg);
    opacity: .76;
  }
  35%, 100% {
    transform: translate3d(335%, 0, 0) skewX(-12deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-back > div.card-reveal-back-sheen {
    animation: card-reveal-back-readable-sheen 9s ease-in-out infinite !important;
  }
}

.card-reveal-front.fourfun-card-shell {
  overflow: visible !important;
  isolation: isolate !important;
  contain: none !important;
}

.card-reveal-front.fourfun-card-shell > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -24px !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}

.card-reveal-front.fourfun-card-shell > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  z-index: 1 !important;
}

.card-reveal-front.fourfun-card-shell > .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 5 !important;
}

.card-reveal-front.fourfun-card-shell > .fourfun-card-body {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
}

.card-reveal-card-wrap > .card-reveal-live-fx-shell {
  display: none !important;
}

.card-reveal-back > div.card-reveal-back-sheen {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none !important;
}

.card-reveal-back > div.card-reveal-back-sheen::before {
  content: "";
  position: absolute;
  inset: -34% -58%;
  display: block;
  border-radius: 0;
  background: linear-gradient(
    112deg,
    transparent 0 36%,
    rgba(255, 240, 195, .08) 42%,
    rgba(255, 248, 218, .34) 47%,
    rgba(255, 255, 255, .72) 50%,
    rgba(255, 248, 218, .34) 53%,
    rgba(255, 240, 195, .08) 58%,
    transparent 64% 100%
  );
  opacity: 0;
  transform: translate3d(-72%, 0, 0);
  will-change: transform, opacity;
  pointer-events: none;
  animation: card-reveal-launcher-sheen 7.2s ease-in-out infinite;
}

@keyframes card-reveal-launcher-sheen {
  0%, 62% {
    transform: translate3d(-72%, 0, 0);
    opacity: 0;
  }
  67% {
    opacity: .42;
  }
  73% {
    opacity: .82;
  }
  86% {
    transform: translate3d(72%, 0, 0);
    opacity: .56;
  }
  91%, 100% {
    transform: translate3d(72%, 0, 0);
    opacity: 0;
  }
}

.card-reveal-card-wrap {
  position: relative !important;
  width: min(316px, 74vw) !important;
  aspect-ratio: 991 / 1473 !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-reveal-card-wrap > .card-reveal-stack {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 991 / 1473 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-style: preserve-3d !important;
  perspective: 1500px !important;
}

.card-reveal-card-wrap > .card-reveal-stack::before,
.card-reveal-card-wrap > .card-reveal-stack::after {
  content: none !important;
  display: none !important;
}

.card-reveal-card-wrap .card-reveal-front-plane {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  contain: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: rotateY(180deg) !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: transform var(--card-pack-flip-duration, .72s) cubic-bezier(.2,.76,.15,1) !important;
  pointer-events: none !important;
}

.card-reveal-card-wrap .card-reveal-stack.is-flipped .card-reveal-front-plane {
  transform: rotateY(0deg) !important;
}

.card-reveal-card-wrap .card-reveal-front-card.card-inspector-side {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: none !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #0b100d !important;
  transform: none !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  pointer-events: none !important;
}

.card-reveal-card-wrap .card-reveal-front-card > .card-inspector-main-image,
.card-reveal-card-wrap .card-reveal-front-card > .card-inspector-preset {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

.card-reveal-card-wrap .card-reveal-front-card > .card-inspector-main-image {
  z-index: 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.card-reveal-card-wrap .card-reveal-front-card > .card-inspector-preset {
  z-index: 20 !important;
  object-fit: fill !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-reveal-card-wrap .card-reveal-back {
  z-index: 3 !important;
}

.card-reveal-card-wrap .card-reveal-stack.is-flipped .card-reveal-back {
  z-index: 1 !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 991 / 1473 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  perspective: none !important;
  pointer-events: none !important;
  animation: card-reveal-rarity-shell-in .42s ease-out both !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-behind {
  z-index: 1 !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above {
  z-index: 6 !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -24px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  contain: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-behind > .card-rarity-fx.is-inline {
  z-index: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 1 !important;
  inset: -24px !important;
  overflow: visible !important;
  -webkit-mask: linear-gradient(90deg, #000 0 15%, transparent 24% 76%, #000 85% 100%) !important;
  mask: linear-gradient(90deg, #000 0 15%, transparent 24% 76%, #000 85% 100%) !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell > .card-rarity-fx .card-rarity-fx-ring,
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell > .card-rarity-fx .card-rarity-fx-wisp,
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell > .card-rarity-fx > i {
  visibility: visible !important;
}

@keyframes card-reveal-rarity-shell-in {
  from {
    opacity: 0;
    scale: .94;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@media (max-width: 620px) {
  .card-reveal-card-wrap {
    width: min(270px, 72vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-card-wrap > .card-reveal-rarity-fx-shell {
    animation: none !important;
  }
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay {
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
}

.card-pack-opening-main,
.card-reveal-stage {
  overflow: visible !important;
}

.card-reveal-back > div.card-reveal-back-sheen::before {
  animation-duration: 5.6s !important;
}

.card-pack-opening-main,
.card-reveal-stage,
.card-reveal-card-wrap,
.card-reveal-card-wrap > .card-reveal-stack {
  contain: none !important;
  overflow: visible !important;
  clip-path: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  display: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -12px !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: blur(8px) !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  display: block !important;
  width: 7px !important;
  height: 11px !important;
  opacity: 1 !important;
  visibility: visible !important;
  scale: .68 !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -8px !important;
  top: 16% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -8px !important;
  top: 23% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -9px !important;
  top: auto !important;
  bottom: 18% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -9px !important;
  top: auto !important;
  bottom: 16% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -10px !important;
  top: 49% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -10px !important;
  top: 46% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7) {
  display: none !important;
}

.card-pack-complete-grid {
  contain: none !important;
  overflow: visible !important;
  align-items: start !important;
}

.card-pack-complete-grid > .card-pack-result-card {
  position: relative !important;
  display: block !important;
  width: min(190px, 30vw) !important;
  height: auto !important;
  aspect-ratio: 991 / 1473 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
}

.card-pack-result-card > .card-pack-result-front.card-inspector-side {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: none !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #0b100d !important;
  transform: none !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  pointer-events: none !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -24px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  contain: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline:not(.is-edge-overlay) {
  z-index: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay {
  z-index: 5 !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-ring {
  display: none !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -12px !important;
  filter: blur(8px) !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  width: 7px !important;
  height: 11px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  scale: .68 !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -8px !important;
  top: 16% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -8px !important;
  top: 23% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -9px !important;
  top: auto !important;
  bottom: 18% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -9px !important;
  top: auto !important;
  bottom: 16% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -10px !important;
  top: 49% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -10px !important;
  top: 46% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(n+7) { display: none !important; }

.card-pack-result-quantity {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  z-index: 40 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 25px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(255, 229, 155, .48) !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 9, .84) !important;
  color: #fff1bd !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.38) !important;
  pointer-events: none !important;
}

@media (max-width: 980px) {
  .card-pack-complete-grid > .card-pack-result-card {
    width: min(160px, 38vw) !important;
  }
}

@media (max-width: 620px) {
  .card-pack-complete-grid > .card-pack-result-card {
    width: min(148px, 42vw) !important;
  }
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-title {
  font-size: 10.5px !important;
  letter-spacing: .005em !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-description {
  font-size: 6.8px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card {
  width: 51px !important;
  min-width: 51px !important;
  max-width: 51px !important;
  height: 11px !important;
  padding: 0 5px !important;
  border-width: 1px !important;
  font-size: 4.2px !important;
  letter-spacing: .075em !important;
  text-indent: .075em !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card::before,
.card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card::after {
  font-size: 3px !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-number {
  font-size: 7px !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-date,
.card-pack-result-card > .card-pack-result-front .card-inspector-card-edition {
  font-size: 5.1px !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-mark {
  font-size: 8px !important;
}

.card-pack-result-card,
.card-pack-result-card > .card-pack-result-front.card-inspector-side,
.card-pack-result-card > .card-pack-result-front > .card-inspector-main-image,
.card-pack-result-card > .card-pack-result-front > .card-inspector-preset,
.card-pack-result-card > .card-pack-result-front > .fourfun-card-holo,
.card-pack-result-card > .card-pack-result-front > .fourfun-card-gloss,
.card-pack-result-card > .card-pack-result-front > .fourfun-card-grain,
.card-pack-result-card > .card-pack-result-front > .fourfun-card-particles {
  border-radius: 0 !important;
}

.card-pack-complete-grid > .card-pack-result-card {
  z-index: 2 !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: 50% 50% !important;
  transition:
    transform 230ms cubic-bezier(.2,.72,.2,1),
    filter 230ms ease !important;
  will-change: transform !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover,
.card-pack-complete-grid > .card-pack-result-card:focus-visible {
  z-index: 50 !important;
  transform: translateZ(0) scale(1.11) !important;
  filter: brightness(1.035) !important;
}

.card-pack-complete-grid > .card-pack-result-card:active {
  transform: translateZ(0) scale(1.055) !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  --uncommon-fx-primary: var(--card-accent, #6feb9f);
  --uncommon-fx-secondary: var(--card-secondary, var(--card-accent, #3fae72));
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -22px !important;
  opacity: 1 !important;
  background:
    radial-gradient(ellipse at 4% 24%, color-mix(in srgb, var(--uncommon-fx-primary) 36%, transparent), transparent 20%),
    radial-gradient(ellipse at 96% 30%, color-mix(in srgb, var(--uncommon-fx-secondary) 34%, transparent), transparent 20%),
    radial-gradient(ellipse at 5% 78%, color-mix(in srgb, var(--uncommon-fx-secondary) 30%, transparent), transparent 19%),
    radial-gradient(ellipse at 95% 72%, color-mix(in srgb, var(--uncommon-fx-primary) 28%, transparent), transparent 19%) !important;
  filter: blur(10px) !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  width: 10px !important;
  height: 16px !important;
  scale: .86 !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--uncommon-fx-primary) 18%, white 82%),
      color-mix(in srgb, var(--uncommon-fx-primary) 80%, white 20%) 54%,
      color-mix(in srgb, var(--uncommon-fx-secondary) 88%, black 12%)
    ) !important;
  box-shadow:
    0 0 11px color-mix(in srgb, var(--uncommon-fx-primary) 72%, transparent),
    0 0 22px color-mix(in srgb, var(--uncommon-fx-secondary) 54%, transparent) !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -14px !important;
  top: 14% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -14px !important;
  top: 21% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -16px !important;
  top: auto !important;
  bottom: 16% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -16px !important;
  top: auto !important;
  bottom: 14% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -18px !important;
  top: 48% !important;
}
.card-pack-result-card > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -18px !important;
  top: 44% !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-complete-grid > .card-pack-result-card {
    transition: none !important;
  }
}

.card-pack-complete-grid > .card-pack-result-card {
  transform: scale(1) !important;
  will-change: auto !important;
  filter: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover,
.card-pack-complete-grid > .card-pack-result-card:focus-visible {
  transform: scale(1.11) !important;
  filter: none !important;
}

.card-pack-complete-grid > .card-pack-result-card:active {
  transform: scale(1.055) !important;
  filter: none !important;
}

.card-pack-complete-grid > .card-pack-result-card img,
.card-pack-complete-grid > .card-pack-result-card .card-pack-result-front {
  image-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  transform: none !important;
  will-change: auto !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  --uncommon-fx-primary: var(--card-accent, #6feb9f);
  --uncommon-fx-secondary: var(--card-secondary, var(--card-accent, #3fae72));
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon .card-rarity-fx-wisp {
  inset: -26px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background:
    radial-gradient(ellipse at 4% 24%, color-mix(in srgb, var(--uncommon-fx-primary) 38%, transparent), transparent 21%),
    radial-gradient(ellipse at 96% 30%, color-mix(in srgb, var(--uncommon-fx-secondary) 36%, transparent), transparent 21%),
    radial-gradient(ellipse at 5% 78%, color-mix(in srgb, var(--uncommon-fx-secondary) 32%, transparent), transparent 20%),
    radial-gradient(ellipse at 95% 72%, color-mix(in srgb, var(--uncommon-fx-primary) 30%, transparent), transparent 20%) !important;
  filter: blur(11px) !important;
  box-shadow: none !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i {
  display: block !important;
  width: 12px !important;
  height: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
  scale: .92 !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--uncommon-fx-primary) 18%, white 82%),
      color-mix(in srgb, var(--uncommon-fx-primary) 80%, white 20%) 54%,
      color-mix(in srgb, var(--uncommon-fx-secondary) 88%, black 12%)
    ) !important;
  box-shadow:
    0 0 13px color-mix(in srgb, var(--uncommon-fx-primary) 74%, transparent),
    0 0 25px color-mix(in srgb, var(--uncommon-fx-secondary) 56%, transparent) !important;
}

.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(1) {
  left: -17px !important;
  top: 14% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(2) {
  right: -17px !important;
  top: 21% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(3) {
  left: -19px !important;
  top: auto !important;
  bottom: 16% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(4) {
  right: -19px !important;
  top: auto !important;
  bottom: 14% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(5) {
  left: -22px !important;
  top: 48% !important;
}
.card-reveal-card-wrap > .card-reveal-rarity-fx-shell.is-above > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon > i:nth-of-type(6) {
  right: -22px !important;
  top: 44% !important;
}

.card-reveal-card-wrap .card-reveal-back,
.card-reveal-card-wrap .card-reveal-back-image {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.card-reveal-card-wrap .card-reveal-back {
  background: transparent !important;
}

.card-reveal-card-wrap {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-rz: 0deg;
  transform: none !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
}

.card-reveal-card-wrap.is-flipped {
  transform:
    perspective(1100px)
    rotateX(var(--card-rx))
    rotateY(var(--card-ry))
    rotateZ(var(--card-rz)) !important;
  transition: transform 130ms ease-out !important;
}

.card-reveal-card-wrap.is-flipped > .card-reveal-stack,
.card-reveal-card-wrap.is-flipped > .card-reveal-rarity-fx-shell {
  transform-style: preserve-3d !important;
}

.card-reveal-card-wrap:not(.is-flipped) {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-card-wrap.is-flipped {
    transform: none !important;
    transition: none !important;
  }
}

.card-reveal-card-wrap.is-flipped {
  transform:
    perspective(1100px)
    rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg))
    rotateZ(var(--card-rz, 0deg)) !important;
  transition: transform 105ms ease-out !important;
}

.card-reveal-card-wrap.is-flipped:hover {
  filter: none !important;
}

.card-pack-complete-grid > .card-pack-result-card,
.card-pack-complete-grid > .card-pack-result-card:hover,
.card-pack-complete-grid > .card-pack-result-card:focus-visible,
.card-pack-complete-grid > .card-pack-result-card:active {
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  will-change: auto !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover,
.card-pack-complete-grid > .card-pack-result-card:focus-visible {
  z-index: 50 !important;
}

.card-pack-result-card > .card-pack-result-front.card-inspector-side {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  container-type: inline-size !important;
  transition: inset 230ms cubic-bezier(.2,.72,.2,1) !important;
  will-change: auto !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover > .card-pack-result-front.card-inspector-side,
.card-pack-complete-grid > .card-pack-result-card:focus-visible > .card-pack-result-front.card-inspector-side {
  inset: -5.5% !important;
}

.card-pack-complete-grid > .card-pack-result-card:active > .card-pack-result-front.card-inspector-side {
  inset: -2.75% !important;
}

.card-pack-result-card > .card-rarity-fx.is-inline {
  transition: inset 230ms cubic-bezier(.2,.72,.2,1) !important;
  will-change: auto !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover > .card-rarity-fx.is-inline,
.card-pack-complete-grid > .card-pack-result-card:focus-visible > .card-rarity-fx.is-inline {
  inset: calc(-24px - 5.5%) !important;
}

.card-pack-complete-grid > .card-pack-result-card:active > .card-rarity-fx.is-inline {
  inset: calc(-24px - 2.75%) !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon,
.card-pack-complete-grid > .card-pack-result-card:focus-visible > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: -5.5% !important;
}

.card-pack-complete-grid > .card-pack-result-card:active > .card-rarity-fx.is-inline.is-edge-overlay.rarity-uncommon {
  inset: -2.75% !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-title {
  font-size: 5.526cqw !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-description {
  font-size: 3.579cqw !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card {
  width: 26.842cqw !important;
  min-width: 26.842cqw !important;
  max-width: 26.842cqw !important;
  height: 5.789cqw !important;
  padding-inline: 2.632cqw !important;
  font-size: 2.211cqw !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card::before,
.card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card::after {
  font-size: 1.579cqw !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-number {
  font-size: 3.684cqw !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-date,
.card-pack-result-card > .card-pack-result-front .card-inspector-card-edition {
  font-size: 2.684cqw !important;
}

.card-pack-result-card > .card-pack-result-front .card-inspector-card-mark {
  font-size: 4.211cqw !important;
}

.card-pack-result-card > .card-pack-result-quantity {
  transition: top 230ms cubic-bezier(.2,.72,.2,1), right 230ms cubic-bezier(.2,.72,.2,1) !important;
}

.card-pack-complete-grid > .card-pack-result-card:hover > .card-pack-result-quantity,
.card-pack-complete-grid > .card-pack-result-card:focus-visible > .card-pack-result-quantity {
  top: -2px !important;
  right: -2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-card-wrap.is-flipped,
  .card-pack-result-card > .card-pack-result-front.card-inspector-side,
  .card-pack-result-card > .card-rarity-fx.is-inline,
  .card-pack-result-card > .card-pack-result-quantity {
    transition: none !important;
  }
}

.card-pack-image-wrapper {
  --plastic-progress: 0%;
  --plastic-pull: 0;
}

.card-pack-image-wrapper.is-plastic-stage .card-pack-plastic-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  animation: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  isolation: isolate !important;
}

.card-pack-image-wrapper.is-plastic-stage .card-pack-plastic-overlay::before,
.card-pack-image-wrapper.is-plastic-stage .card-pack-plastic-overlay::after {
  content: none !important;
  display: none !important;
}

.card-pack-plastic-intact,
.card-pack-plastic-half {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(112deg,
      transparent 0 14%,
      rgba(255,255,255,.055) 23%,
      rgba(255,255,255,.22) 31%,
      rgba(255,255,255,.075) 38%,
      transparent 49% 100%),
    linear-gradient(24deg,
      transparent 0 42%,
      rgba(255,255,255,.045) 49%,
      rgba(255,255,255,.13) 53%,
      transparent 60% 100%),
    radial-gradient(ellipse at 22% 17%, rgba(255,255,255,.16), transparent 25%),
    radial-gradient(ellipse at 79% 73%, rgba(255,255,255,.08), transparent 29%) !important;
  background-size: 190% 100%, 145% 145%, 100% 100%, 100% 100% !important;
  background-position: -105% 0, 22% 50%, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: screen !important;
  opacity: .84 !important;
  pointer-events: none !important;
  -webkit-mask-image: url('/images/fullpackage.png') !important;
  mask-image: url('/images/fullpackage.png') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  animation: card-pack-plastic-wrap-sheen 4.2s ease-in-out infinite !important;
}

.card-pack-plastic-intact {
  z-index: 1 !important;
  clip-path: inset(var(--plastic-progress) 0 0 0) !important;
  -webkit-clip-path: inset(var(--plastic-progress) 0 0 0) !important;
}

.card-pack-plastic-half {
  z-index: 2 !important;
  transform-origin: 50% 0 !important;
  will-change: transform, clip-path, opacity !important;
}

.card-pack-plastic-half.is-left {
  clip-path: polygon(
    0 0,
    50% 0,
    49.2% calc(var(--plastic-progress) - 3.1%),
    51% calc(var(--plastic-progress) - 1.8%),
    48.3% var(--plastic-progress),
    0 var(--plastic-progress)
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    50% 0,
    49.2% calc(var(--plastic-progress) - 3.1%),
    51% calc(var(--plastic-progress) - 1.8%),
    48.3% var(--plastic-progress),
    0 var(--plastic-progress)
  ) !important;
  transform:
    translate3d(calc(var(--plastic-pull) * -.16px), calc(var(--plastic-pull) * -.035px), 8px)
    rotateZ(calc(var(--plastic-pull) * -.018deg))
    rotateY(calc(var(--plastic-pull) * -.075deg)) !important;
}

.card-pack-plastic-half.is-right {
  clip-path: polygon(
    50% 0,
    100% 0,
    100% var(--plastic-progress),
    51.7% var(--plastic-progress),
    49% calc(var(--plastic-progress) - 1.8%),
    50.8% calc(var(--plastic-progress) - 3.1%)
  ) !important;
  -webkit-clip-path: polygon(
    50% 0,
    100% 0,
    100% var(--plastic-progress),
    51.7% var(--plastic-progress),
    49% calc(var(--plastic-progress) - 1.8%),
    50.8% calc(var(--plastic-progress) - 3.1%)
  ) !important;
  transform:
    translate3d(calc(var(--plastic-pull) * .16px), calc(var(--plastic-pull) * -.035px), 8px)
    rotateZ(calc(var(--plastic-pull) * .018deg))
    rotateY(calc(var(--plastic-pull) * .075deg)) !important;
}

.card-pack-plastic-rip {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  top: 0 !important;
  width: 3px !important;
  height: var(--plastic-progress) !important;
  transform: translateX(-50%) !important;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.94) 0 5px,
    rgba(225,196,113,.72) 5px 7px,
    transparent 7px 11px) !important;
  box-shadow:
    0 0 5px rgba(255,255,255,.72),
    0 0 11px rgba(233,199,105,.42) !important;
  opacity: var(--plastic-rip-opacity, 0) !important;
  pointer-events: none !important;
}

.card-pack-plastic-rip::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border: 1px solid rgba(255,237,174,.74) !important;
  background: radial-gradient(circle at 36% 34%, #fff7d0, #ddb251 42%, rgba(97,62,10,.78) 72%) !important;
  box-shadow: 0 0 13px rgba(255,219,109,.72) !important;
}

.card-pack-plastic-drag-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 24 !important;
  display: block !important;
  cursor: ns-resize !important;
  touch-action: none !important;
  user-select: none !important;
  outline: none !important;
}

.card-pack-plastic-drag-layer:active {
  cursor: grabbing !important;
}

.card-pack-plastic-drag-layer::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 50% !important;
  top: var(--plastic-progress) !important;
  bottom: 2.5% !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  background: repeating-linear-gradient(180deg,
    rgba(255,232,155,.72) 0 6px,
    transparent 6px 12px) !important;
  box-shadow: 0 0 6px rgba(231,191,88,.28) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-drag-layer::before {
  opacity: 0 !important;
}

.card-pack-plastic-drag-hint {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: clamp(42px, var(--plastic-progress), calc(100% - 42px)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: max-content !important;
  padding: 6px 11px !important;
  transform: translate(-50%, 13px) !important;
  border: 1px solid rgba(239,207,117,.38) !important;
  border-radius: 999px !important;
  color: #f5dda0 !important;
  background: rgba(7,13,9,.78) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.card-pack-plastic-drag-hint b {
  color: #fff2b9 !important;
  font-size: 12px !important;
  animation: card-pack-plastic-hint-down 1.05s ease-in-out infinite !important;
}

.card-pack-image-wrapper.is-plastic-stage .card-pack-image-stage::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-intact {
  opacity: 0 !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half.is-left {
  animation: card-pack-plastic-left-release .78s cubic-bezier(.2,.78,.18,1) forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half.is-right {
  animation: card-pack-plastic-right-release .78s cubic-bezier(.2,.78,.18,1) forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-rip {
  animation: card-pack-plastic-rip-release .5s ease-out forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-drag-layer {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s linear !important;
}

.card-pack-image-wrapper.is-unwrapped .card-pack-plastic-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

@keyframes card-pack-plastic-wrap-sheen {
  0%, 100% {
    background-position: -105% 0, 22% 50%, 0 0, 0 0;
    opacity: .68;
  }
  48% {
    background-position: 116% 0, 75% 42%, 0 0, 0 0;
    opacity: .88;
  }
}

@keyframes card-pack-plastic-hint-down {
  0%, 100% {
    transform: translateY(-2px);
    opacity: .72;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

@keyframes card-pack-plastic-left-release {
  to {
    transform: translate3d(-74%, 8%, 42px) rotateZ(-15deg) rotateY(-28deg) scale(.96) !important;
    opacity: 0;
    filter: blur(1.2px);
  }
}

@keyframes card-pack-plastic-right-release {
  to {
    transform: translate3d(74%, 10%, 42px) rotateZ(16deg) rotateY(28deg) scale(.96) !important;
    opacity: 0;
    filter: blur(1.2px);
  }
}

@keyframes card-pack-plastic-rip-release {
  to {
    opacity: 0;
    transform: translateX(-50%) scaleY(1.04);
  }
}

.card-pack-opening.stage-opening .card-pack-image-wrapper {
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-plastic-intact,
  .card-pack-plastic-half,
  .card-pack-plastic-drag-hint b {
    animation: none !important;
  }
}

.card-pack-image-wrapper.is-plastic-stage .card-pack-plastic-overlay {
  perspective: 880px !important;
  perspective-origin: 50% 38% !important;
  transform-style: preserve-3d !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact,
.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half {
  -webkit-mask-image: url('/images/fullpackage.png'), url('/images/packagetop.png') !important;
  mask-image: url('/images/fullpackage.png'), url('/images/packagetop.png') !important;
  -webkit-mask-size: 100% 100%, 100% 6.236% !important;
  mask-size: 100% 100%, 100% 6.236% !important;
  -webkit-mask-position: center center, center top !important;
  mask-position: center center, center top !important;
  -webkit-mask-repeat: no-repeat, no-repeat !important;
  mask-repeat: no-repeat, no-repeat !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact {
  background-color: rgba(220, 239, 231, .055) !important;
  opacity: .70 !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half {
  background-color: rgba(226, 244, 237, .11) !important;
  opacity: .98 !important;
  backface-visibility: visible !important;
  transform-style: preserve-3d !important;
  filter:
    drop-shadow(0 8px 8px rgba(0, 0, 0, .24))
    drop-shadow(0 0 5px rgba(235, 255, 248, .20)) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(108deg,
      transparent 0 17px,
      rgba(255,255,255,.05) 19px,
      rgba(255,255,255,.19) 21px,
      transparent 25px 43px),
    linear-gradient(18deg,
      transparent 0 35%,
      rgba(255,255,255,.14) 44%,
      transparent 52% 100%),
    radial-gradient(ellipse at 52% 42%, rgba(255,255,255,.16), transparent 48%) !important;
  mix-blend-mode: screen !important;
  opacity: .88 !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half::after {
  content: "" !important;
  position: absolute !important;
  top: -2% !important;
  bottom: -2% !important;
  width: 30px !important;
  display: block !important;
  pointer-events: none !important;
  opacity: var(--plastic-rip-opacity, 0) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half.is-left::after {
  right: -1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(226,244,238,.07) 28%,
    rgba(255,255,255,.42) 62%,
    rgba(255,255,255,.72) 76%,
    rgba(38,55,47,.26) 100%) !important;
  box-shadow: -7px 0 12px rgba(255,255,255,.07) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half.is-right::after {
  left: -1px !important;
  background: linear-gradient(90deg,
    rgba(38,55,47,.26),
    rgba(255,255,255,.72) 24%,
    rgba(255,255,255,.42) 38%,
    rgba(226,244,238,.07) 72%,
    transparent) !important;
  box-shadow: 7px 0 12px rgba(255,255,255,.07) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half.is-left {
  transform-origin: 0% 44% !important;
  transform:
    translate3d(
      calc(var(--plastic-pull) * -.48px),
      calc(var(--plastic-pull) * .13px),
      calc(var(--plastic-pull) * .16px)
    )
    rotateZ(calc(var(--plastic-pull) * -.044deg))
    rotateY(calc(var(--plastic-pull) * -.32deg))
    skewY(calc(var(--plastic-pull) * -.010deg)) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half.is-right {
  transform-origin: 100% 44% !important;
  transform:
    translate3d(
      calc(var(--plastic-pull) * .48px),
      calc(var(--plastic-pull) * .14px),
      calc(var(--plastic-pull) * .16px)
    )
    rotateZ(calc(var(--plastic-pull) * .044deg))
    rotateY(calc(var(--plastic-pull) * .32deg))
    skewY(calc(var(--plastic-pull) * .010deg)) !important;
}

.card-pack-image-wrapper.is-plastic-stage .card-pack-plastic-rip {
  width: 4px !important;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.98) 0 6px,
    rgba(226,204,139,.84) 6px 8px,
    rgba(255,255,255,.38) 8px 10px,
    transparent 10px 14px) !important;
  box-shadow:
    0 0 7px rgba(255,255,255,.88),
    0 0 16px rgba(229,205,137,.58),
    -9px 0 15px rgba(0,0,0,.12),
    9px 0 15px rgba(0,0,0,.12) !important;
}

.card-reveal-card-wrap:not(.is-flipped):not(.is-revealing) > .card-reveal-stack {
  animation: card-reveal-back-gentle-float 4.4s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
}

@keyframes card-reveal-back-gentle-float {
  0%, 100% {
    transform: translateY(0) rotateZ(0deg);
  }
  50% {
    transform: translateY(-7px) rotateZ(.18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half,
  .card-reveal-card-wrap:not(.is-flipped):not(.is-revealing) > .card-reveal-stack {
    animation: none !important;
    transform: none !important;
  }
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact {
  background:
    linear-gradient(112deg,
      transparent 0 11%,
      rgba(255,255,255,.10) 20%,
      rgba(255,255,255,.34) 30%,
      rgba(255,255,255,.11) 39%,
      transparent 51% 100%),
    repeating-linear-gradient(104deg,
      transparent 0 21px,
      rgba(255,255,255,.035) 23px,
      rgba(255,255,255,.15) 25px,
      transparent 29px 48px),
    linear-gradient(24deg,
      transparent 0 39%,
      rgba(255,255,255,.07) 47%,
      rgba(255,255,255,.20) 52%,
      transparent 61% 100%),
    radial-gradient(ellipse at 24% 18%, rgba(255,255,255,.23), transparent 27%),
    radial-gradient(ellipse at 78% 72%, rgba(255,255,255,.14), transparent 31%),
    rgba(218, 239, 230, .12) !important;
  background-size: 190% 100%, 100% 100%, 145% 145%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: -105% 0, 0 0, 22% 50%, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  opacity: .98 !important;
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,.18))
    drop-shadow(0 0 4px rgba(245,255,250,.16)) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(111deg,
      transparent 0 29px,
      rgba(255,255,255,.04) 31px,
      rgba(255,255,255,.17) 33px,
      transparent 37px 62px),
    linear-gradient(164deg,
      transparent 0 31%,
      rgba(255,255,255,.16) 39%,
      transparent 47% 100%) !important;
  mix-blend-mode: screen !important;
  opacity: .82 !important;
}

.card-reveal-card-wrap:not(.is-flipped):not(.is-revealing) {
  animation: card-reveal-back-readable-float 3.2s ease-in-out infinite !important;
  will-change: translate !important;
}

@keyframes card-reveal-back-readable-float {
  0%, 100% {
    translate: 0 2px;
  }
  50% {
    translate: 0 -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal-card-wrap:not(.is-flipped):not(.is-revealing) {
    animation: none !important;
    translate: 0 0 !important;
    will-change: auto !important;
  }
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) {
  --plastic-film-surface:
    linear-gradient(112deg,
      transparent 0 12%,
      rgba(255,255,255,.08) 20%,
      rgba(255,255,255,.30) 29%,
      rgba(255,255,255,.10) 38%,
      transparent 49% 100%),
    repeating-linear-gradient(106deg,
      transparent 0 25px,
      rgba(255,255,255,.035) 27px,
      rgba(255,255,255,.14) 29px,
      transparent 33px 54px),
    linear-gradient(24deg,
      transparent 0 40%,
      rgba(255,255,255,.06) 48%,
      rgba(255,255,255,.18) 53%,
      transparent 61% 100%),
    radial-gradient(ellipse at 23% 18%, rgba(255,255,255,.21), transparent 27%),
    radial-gradient(ellipse at 78% 72%, rgba(255,255,255,.12), transparent 31%),
    rgba(220,239,231,.09);
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact,
.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half {
  background: var(--plastic-film-surface) !important;
  background-size: 190% 100%, 100% 100%, 145% 145%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: -18% 0, 0 0, 22% 50%, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: screen !important;
  opacity: .92 !important;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.16)) !important;
  animation: none !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact::before,
.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half::before {
  content: none !important;
  display: none !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact {
  clip-path: inset(var(--plastic-progress) 0 0 0) !important;
  -webkit-clip-path: inset(var(--plastic-progress) 0 0 0) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half.is-left {
  clip-path: polygon(
    0 0,
    50% 0,
    49.1% calc(var(--plastic-progress) - 2.4%),
    50.7% calc(var(--plastic-progress) - 1.2%),
    48.9% var(--plastic-progress),
    0 var(--plastic-progress)
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    50% 0,
    49.1% calc(var(--plastic-progress) - 2.4%),
    50.7% calc(var(--plastic-progress) - 1.2%),
    48.9% var(--plastic-progress),
    0 var(--plastic-progress)
  ) !important;
  transform-origin: 0 44% !important;
  transform:
    translate3d(calc(var(--plastic-pull) * -.28px), calc(var(--plastic-pull) * .055px), calc(var(--plastic-pull) * .10px))
    rotateZ(calc(var(--plastic-pull) * -.027deg))
    rotateY(calc(var(--plastic-pull) * -.18deg)) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half.is-right {
  clip-path: polygon(
    50% 0,
    100% 0,
    100% var(--plastic-progress),
    51.1% var(--plastic-progress),
    49.3% calc(var(--plastic-progress) - 1.2%),
    50.9% calc(var(--plastic-progress) - 2.4%)
  ) !important;
  -webkit-clip-path: polygon(
    50% 0,
    100% 0,
    100% var(--plastic-progress),
    51.1% var(--plastic-progress),
    49.3% calc(var(--plastic-progress) - 1.2%),
    50.9% calc(var(--plastic-progress) - 2.4%)
  ) !important;
  transform-origin: 100% 44% !important;
  transform:
    translate3d(calc(var(--plastic-pull) * .28px), calc(var(--plastic-pull) * .055px), calc(var(--plastic-pull) * .10px))
    rotateZ(calc(var(--plastic-pull) * .027deg))
    rotateY(calc(var(--plastic-pull) * .18deg)) !important;
}

.card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half::after {
  width: 14px !important;
  opacity: calc(var(--plastic-rip-opacity, 0) * .78) !important;
  filter: blur(.2px) !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half {
  display: block !important;
  opacity: .94 !important;
  background:
    linear-gradient(112deg,
      transparent 0 12%,
      rgba(255,255,255,.08) 20%,
      rgba(255,255,255,.30) 29%,
      rgba(255,255,255,.10) 38%,
      transparent 49% 100%),
    repeating-linear-gradient(106deg,
      transparent 0 25px,
      rgba(255,255,255,.035) 27px,
      rgba(255,255,255,.14) 29px,
      transparent 33px 54px),
    linear-gradient(24deg,
      transparent 0 40%,
      rgba(255,255,255,.06) 48%,
      rgba(255,255,255,.18) 53%,
      transparent 61% 100%),
    rgba(220,239,231,.09) !important;
  background-size: 190% 100%, 100% 100%, 145% 145%, 100% 100% !important;
  background-position: -18% 0, 0 0, 22% 50%, 0 0 !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: url('/images/fullpackage.png'), url('/images/packagetop.png') !important;
  mask-image: url('/images/fullpackage.png'), url('/images/packagetop.png') !important;
  -webkit-mask-size: 100% 100%, 100% 6.236% !important;
  mask-size: 100% 100%, 100% 6.236% !important;
  -webkit-mask-position: center center, center top !important;
  mask-position: center center, center top !important;
  -webkit-mask-repeat: no-repeat, no-repeat !important;
  mask-repeat: no-repeat, no-repeat !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
  filter: drop-shadow(0 12px 11px rgba(0,0,0,.26)) !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half.is-left {
  clip-path: polygon(0 0, 50.7% 0, 49% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 0, 50.7% 0, 49% 100%, 0 100%) !important;
  transform-origin: 0 48% !important;
  animation: card-pack-plastic-left-release-visible 1.12s cubic-bezier(.18,.72,.16,1) forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half.is-right {
  clip-path: polygon(49.3% 0, 100% 0, 100% 100%, 51% 100%) !important;
  -webkit-clip-path: polygon(49.3% 0, 100% 0, 100% 100%, 51% 100%) !important;
  transform-origin: 100% 48% !important;
  animation: card-pack-plastic-right-release-visible 1.12s cubic-bezier(.18,.72,.16,1) forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-rip {
  height: 100% !important;
  opacity: .96 !important;
  animation: card-pack-plastic-rip-finale .72s ease-out forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-overlay::after {
  content: "" !important;
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  top: 48% !important;
  display: block !important;
  width: 18px !important;
  height: 82% !important;
  transform: translate(-50%, -50%) scaleY(.08) !important;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.86) 22%, rgba(241,206,111,.82) 50%, rgba(255,255,255,.76) 78%, transparent) !important;
  filter: blur(2px) drop-shadow(0 0 12px rgba(255,224,137,.72)) !important;
  pointer-events: none !important;
  animation: card-pack-plastic-center-flash .66s ease-out forwards !important;
}

@keyframes card-pack-plastic-left-release-visible {
  0% {
    transform: translate3d(-28px, 6px, 10px) rotateZ(-2.7deg) rotateY(-18deg);
    opacity: .94;
  }
  36% {
    transform: translate3d(-54px, 16px, 28px) rotateZ(-8deg) rotateY(-31deg) scale(.99);
    opacity: .90;
  }
  100% {
    transform: translate3d(-112%, 34%, 62px) rotateZ(-24deg) rotateY(-48deg) scale(.92);
    opacity: 0;
  }
}

@keyframes card-pack-plastic-right-release-visible {
  0% {
    transform: translate3d(28px, 6px, 10px) rotateZ(2.7deg) rotateY(18deg);
    opacity: .94;
  }
  36% {
    transform: translate3d(54px, 17px, 28px) rotateZ(8deg) rotateY(31deg) scale(.99);
    opacity: .90;
  }
  100% {
    transform: translate3d(112%, 36%, 62px) rotateZ(25deg) rotateY(48deg) scale(.92);
    opacity: 0;
  }
}

@keyframes card-pack-plastic-rip-finale {
  0% {
    opacity: .96;
    filter: brightness(1);
  }
  38% {
    opacity: 1;
    filter: brightness(1.9);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

@keyframes card-pack-plastic-center-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(.08);
  }
  28% {
    opacity: .96;
    transform: translate(-50%, -50%) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(1.08);
  }
}

.card-pack-opening.stage-cards .card-reveal-stage:not(.is-complete)
.card-reveal-card-wrap:not(.is-flipped):not(.is-revealing) > .card-reveal-stack {
  position: relative !important;
  top: 0 !important;
  animation: card-reveal-back-physical-float 2.65s ease-in-out infinite !important;
}

@keyframes card-reveal-back-physical-float {
  0%, 100% { top: 2px; }
  50% { top: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half,
  .card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-rip,
  .card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-overlay::after,
  .card-pack-opening.stage-cards .card-reveal-stage:not(.is-complete)
  .card-reveal-card-wrap:not(.is-flipped):not(.is-revealing) > .card-reveal-stack {
    animation: none !important;
  }
}

.card-pack-image-wrapper .card-pack-plastic-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  perspective: 900px !important;
}

.card-pack-image-wrapper .card-pack-plastic-overlay::before,
.card-pack-image-wrapper .card-pack-plastic-overlay::after {
  content: none !important;
  display: none !important;
}

.card-pack-image-wrapper .card-pack-plastic-svg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  filter: drop-shadow(0 6px 7px rgba(0,0,0,.16)) !important;
}

.card-pack-image-wrapper .card-pack-plastic-piece {
  opacity: 1 !important;
  transform: none;
  transform-box: fill-box;
  will-change: transform, opacity;
}

.card-pack-image-wrapper .card-pack-plastic-surface {
  fill: rgba(218, 236, 229, .105) !important;
  stroke: rgba(255, 255, 255, .18) !important;
  stroke-width: .18 !important;
  vector-effect: non-scaling-stroke !important;
}

.card-pack-image-wrapper .card-pack-plastic-light,
.card-pack-image-wrapper .card-pack-plastic-creases {
  opacity: .94 !important;
  mix-blend-mode: screen !important;
}

.card-pack-image-wrapper .card-pack-plastic-live-rip {
  fill: none !important;
  stroke: rgba(255, 248, 220, .82) !important;
  stroke-width: .52 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1.15 1.55 !important;
  vector-effect: non-scaling-stroke !important;
  opacity: calc(var(--plastic-rip-opacity, 0) * .92) !important;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.82)) drop-shadow(0 0 5px rgba(231,195,99,.52)) !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-piece.is-left {
  transform-origin: 0% 48% !important;
  animation: card-pack-svg-film-release-left var(--card-pack-plastic-release-duration, 1.08s) cubic-bezier(.18,.72,.16,1) forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-piece.is-right {
  transform-origin: 100% 48% !important;
  animation: card-pack-svg-film-release-right var(--card-pack-plastic-release-duration, 1.08s) cubic-bezier(.18,.72,.16,1) forwards !important;
}

.card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-live-rip {
  animation: card-pack-svg-rip-flare var(--card-pack-rip-flare-duration, .72s) ease-out forwards !important;
}

@keyframes card-pack-svg-film-release-left {
  0%, 10% {
    transform: translate3d(0,0,0) rotate(0deg) skewY(0deg);
    opacity: 1;
  }
  42% {
    transform: translate3d(-12%,7%,22px) rotate(-7deg) skewY(-2.5deg);
    opacity: .96;
  }
  100% {
    transform: translate3d(-78%,34%,60px) rotate(-25deg) skewY(-7deg);
    opacity: 0;
  }
}

@keyframes card-pack-svg-film-release-right {
  0%, 10% {
    transform: translate3d(0,0,0) rotate(0deg) skewY(0deg);
    opacity: 1;
  }
  42% {
    transform: translate3d(12%,8%,22px) rotate(7deg) skewY(2.5deg);
    opacity: .96;
  }
  100% {
    transform: translate3d(78%,35%,60px) rotate(25deg) skewY(7deg);
    opacity: 0;
  }
}

@keyframes card-pack-svg-rip-flare {
  0% {
    opacity: .92;
    stroke-width: .52;
  }
  34% {
    opacity: 1;
    stroke-width: 1.05;
  }
  100% {
    opacity: 0;
    stroke-width: .2;
  }
}

.card-pack-image-wrapper.is-unwrapped .card-pack-plastic-overlay {
  display: none !important;
}

.card-reveal-float-shell {
  position: relative !important;
  display: block !important;
  width: min(316px, 74vw) !important;
  aspect-ratio: 991 / 1473 !important;
  overflow: visible !important;
  contain: none !important;
  transform: translateY(0);
}

.card-reveal-float-shell > .card-reveal-card-wrap {
  width: 100% !important;
  height: 100% !important;
}

.card-reveal-float-shell.is-floating {
  animation: card-reveal-back-shell-float 2.55s cubic-bezier(.42,0,.58,1) infinite !important;
}

@keyframes card-reveal-back-shell-float {
  0%, 100% { transform: translateY(7px); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 620px) {
  .card-reveal-float-shell {
    width: min(270px, 72vw) !important;
  }
}

.card-pack-opening.stage-stacking .card-pack-opening-main {
  overflow: visible !important;
}

.card-pack-stack-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: min(560px, 94vw) !important;
  min-height: min(570px, 64vh) !important;
  margin: 0 auto !important;
  padding: 14px 0 28px !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  perspective: 1300px !important;
}

.card-pack-stack-aura {
  position: absolute !important;
  left: 50% !important;
  top: 47% !important;
  z-index: 0 !important;
  width: min(460px, 86vw) !important;
  aspect-ratio: 1 !important;
  translate: -50% -50% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(232, 200, 105, .16) 0 15%, rgba(91, 196, 137, .10) 30%, transparent 67%) !important;
  filter: blur(8px) !important;
  animation: card-pack-stack-aura-breathe 2.4s ease-in-out infinite !important;
}

.card-pack-stack-aura > i {
  position: absolute !important;
  inset: 16% !important;
  border: 1px solid rgba(232, 200, 105, .16) !important;
  border-radius: 50% !important;
  animation: card-pack-stack-aura-ring 2.8s ease-out infinite !important;
}

.card-pack-stack-aura > i:nth-child(2) {
  inset: 27% !important;
  animation-delay: .82s !important;
}

.card-pack-stack-aura > span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  translate: -50% -50% !important;
  color: rgba(255, 225, 139, .72) !important;
  font-size: 1.2rem !important;
  text-shadow: 0 0 18px rgba(255, 220, 116, .72) !important;
}

.card-pack-stack-deck {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(294px, 72vw) !important;
  aspect-ratio: 991 / 1473 !important;
  overflow: visible !important;
  contain: none !important;
  transform-style: preserve-3d !important;
}

.card-pack-stack-card {
  position: absolute !important;
  inset: 0 !important;
  z-index: calc(10 + var(--stack-order, 0)) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  opacity: 0;
  transform-origin: 50% 54% !important;
  transform-style: preserve-3d !important;
  transform:
    translate3d(var(--stack-from-x, 0px), var(--stack-from-y, -110px), 80px)
    rotateZ(var(--stack-from-r, 10deg))
    rotateY(var(--stack-from-ry, -7deg))
    scale(.82) !important;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .32)) !important;
  animation: card-pack-stack-deal .76s cubic-bezier(.16,.86,.22,1.04) var(--stack-delay, 0ms) forwards !important;
  will-change: transform, opacity !important;
}

.card-pack-stack-card > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  user-select: none !important;
  pointer-events: none !important;
}

.card-pack-stack-card-sheen {
  position: absolute !important;
  inset: 1.2% !important;
  z-index: 2 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  opacity: 0;
  background:
    linear-gradient(112deg, transparent 34%, rgba(255,255,255,.07) 43%, rgba(255,249,224,.52) 49%, rgba(255,255,255,.10) 56%, transparent 65%) !important;
  background-size: 260% 100% !important;
  background-position: 130% 0 !important;
  mix-blend-mode: screen !important;
  animation: card-pack-stack-sheen 1.05s ease-out calc(var(--stack-delay, 0ms) + 360ms) 1 forwards !important;
}

.card-pack-stack-pips {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  translate: -50% 0 !important;
  pointer-events: none !important;
}

.card-pack-stack-pips > i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(247, 215, 120, .76) !important;
  box-shadow: 0 0 9px rgba(247, 215, 120, .62) !important;
  opacity: 0;
  scale: .2;
  animation: card-pack-stack-pip-in var(--card-pack-stack-pip-duration, .34s) ease-out var(--pip-delay, 0ms) forwards !important;
}

@keyframes card-pack-stack-deal {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--stack-from-x, 0px), var(--stack-from-y, -110px), 80px)
      rotateZ(var(--stack-from-r, 10deg))
      rotateY(var(--stack-from-ry, -7deg))
      scale(.82);
  }
  68% {
    opacity: 1;
    transform:
      translate3d(var(--stack-mid-x, 0px), var(--stack-mid-y, -8px), var(--stack-mid-depth, 10px))
      rotateZ(var(--stack-mid-r, 0deg))
      rotateY(0deg)
      scale(1.018);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(var(--stack-rest-x, 0px), var(--stack-rest-y, 0px), var(--stack-depth, 0px))
      rotateZ(var(--stack-rest-r, 0deg))
      rotateY(0deg)
      scale(1);
  }
}

@keyframes card-pack-stack-sheen {
  0% {
    opacity: 0;
    background-position: 130% 0;
  }
  22% { opacity: .78; }
  70% { opacity: .42; }
  100% {
    opacity: 0;
    background-position: -130% 0;
  }
}

@keyframes card-pack-stack-pip-in {
  from {
    opacity: 0;
    scale: .2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes card-pack-stack-aura-breathe {
  0%, 100% {
    opacity: .58;
    scale: .94;
  }
  50% {
    opacity: .92;
    scale: 1.04;
  }
}

@keyframes card-pack-stack-aura-ring {
  0% {
    opacity: 0;
    scale: .76;
  }
  32% { opacity: .42; }
  100% {
    opacity: 0;
    scale: 1.18;
  }
}

@media (max-width: 620px) {
  .card-pack-stack-stage {
    min-height: min(510px, 61vh) !important;
  }

  .card-pack-stack-deck {
    width: min(264px, 70vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-stack-card {
    opacity: 1 !important;
    animation-duration: .18s !important;
  }

  .card-pack-stack-card-sheen,
  .card-pack-stack-aura,
  .card-pack-stack-aura > i,
  .card-pack-stack-pips > i {
    animation: none !important;
  }
}

.card-pack-stack-card {
  opacity: 0 !important;
  transform:
    translate3d(var(--stack-from-x, 0px), var(--stack-from-y, -176px), 150px)
    rotateZ(var(--stack-from-r, 12deg))
    rotateY(var(--stack-from-ry, -9deg))
    scale(.72) !important;
  animation-name: card-pack-stack-deal-sequential !important;
  animation-duration: .9s !important;
  animation-timing-function: cubic-bezier(.12,.82,.18,1.06) !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
}

.card-pack-stack-card-sheen {
  animation-delay: .34s !important;
}

@keyframes card-pack-stack-deal-sequential {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--stack-from-x, 0px), var(--stack-from-y, -176px), 150px)
      rotateZ(var(--stack-from-r, 12deg))
      rotateY(var(--stack-from-ry, -9deg))
      scale(.72);
  }
  14% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform:
      translate3d(var(--stack-mid-x, 0px), var(--stack-mid-y, -10px), var(--stack-mid-depth, 16px))
      rotateZ(var(--stack-mid-r, 0deg))
      rotateY(0deg)
      scale(1.035);
  }
  84% {
    transform:
      translate3d(var(--stack-rest-x, 0px), calc(var(--stack-rest-y, 0px) + 4px), var(--stack-depth, 0px))
      rotateZ(var(--stack-rest-r, 0deg))
      rotateY(0deg)
      scale(.992);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(var(--stack-rest-x, 0px), var(--stack-rest-y, 0px), var(--stack-depth, 0px))
      rotateZ(var(--stack-rest-r, 0deg))
      rotateY(0deg)
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-stack-card {
    opacity: 0 !important;
    animation-name: card-pack-stack-deal-sequential !important;
    animation-duration: .48s !important;
    animation-fill-mode: both !important;
  }
}

.card-pack-opening.stage-stacking .card-pack-stack-card {
  opacity: 1 !important;
  transform: none !important;
  translate: var(--stack-from-x, 0px) var(--stack-from-y, -176px);
  rotate: var(--stack-from-r, 12deg);
  scale: .72;
  animation: card-pack-stack-deal-visible .9s cubic-bezier(.12,.82,.18,1.06) 0ms both !important;
}

@keyframes card-pack-stack-deal-visible {
  0% {
    translate: var(--stack-from-x, 0px) var(--stack-from-y, -176px);
    rotate: var(--stack-from-r, 12deg);
    scale: .72;
  }
  68% {
    translate: var(--stack-mid-x, 0px) var(--stack-mid-y, -10px);
    rotate: var(--stack-mid-r, 0deg);
    scale: 1.035;
  }
  84% {
    translate: var(--stack-rest-x, 0px) calc(var(--stack-rest-y, 0px) + 4px);
    rotate: var(--stack-rest-r, 0deg);
    scale: .992;
  }
  100% {
    translate: var(--stack-rest-x, 0px) var(--stack-rest-y, 0px);
    rotate: var(--stack-rest-r, 0deg);
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-opening.stage-stacking .card-pack-stack-card {
    opacity: 1 !important;
    transform: none !important;
    translate: var(--stack-rest-x, 0px) var(--stack-rest-y, 0px) !important;
    rotate: var(--stack-rest-r, 0deg) !important;
    scale: 1 !important;
    animation: none !important;
  }
}

.card-pack-opening.stage-stacking .card-pack-stack-card {
  opacity: 1 !important;
  transform: none !important;
  translate: var(--stack-from-x, 0px) var(--stack-from-y, -72vh);
  rotate: var(--stack-from-r, 0deg);
  scale: .76;
  animation: card-pack-stack-flight-from-screen .97s cubic-bezier(.12,.78,.17,1.04) var(--stack-delay, 70ms) both !important;
}

@keyframes card-pack-stack-flight-from-screen {
  0% {
    translate: var(--stack-from-x, 0px) var(--stack-from-y, -72vh);
    rotate: var(--stack-from-r, 0deg);
    scale: .76;
  }
  58% {
    translate: 0 -22px;
    rotate: 0deg;
    scale: 1.045;
  }
  78% {
    translate: 0 7px;
    rotate: 0deg;
    scale: .985;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}

.card-pack-opening.stage-stacking .card-pack-stack-card-sheen {
  animation-delay: .48s !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-opening.stage-stacking .card-pack-stack-card {
    translate: 0 0 !important;
    rotate: 0deg !important;
    scale: 1 !important;
    animation-duration: .42s !important;
  }
}

.card-pack-stack-flight-slot {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

.card-pack-stack-flight-card {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform-origin: 50% 54% !important;
  transform-style: preserve-3d !important;
  transition-property: transform !important;
  transition-timing-function: cubic-bezier(.12,.76,.16,1.035) !important;
  transition-delay: 0ms !important;
  transition-duration: var(--flight-duration, 1000ms) !important;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.34)) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  pointer-events: none !important;
}

.card-pack-stack-flight-card.is-entering {
  opacity: 1 !important;
}

.card-pack-stack-flight-card.is-landed {
  opacity: 1 !important;
}

.card-pack-stack-flight-card > img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  transform: none !important;
  animation: none !important;
  user-select: none !important;
  pointer-events: none !important;
}

.card-pack-stack-flight-sheen {
  position: absolute !important;
  inset: 1.2% !important;
  z-index: 2 !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none !important;
  background:
    linear-gradient(112deg, transparent 34%, rgba(255,255,255,.07) 43%, rgba(255,249,224,.52) 49%, rgba(255,255,255,.10) 56%, transparent 65%) !important;
  background-size: 260% 100% !important;
  background-position: 130% 0 !important;
  mix-blend-mode: screen !important;
  animation: card-pack-stack-flight-sheen var(--flight-sheen-duration, 720ms) ease-out var(--flight-sheen-delay, 460ms) 1 forwards !important;
}

@keyframes card-pack-stack-flight-sheen {
  0% {
    opacity: 0;
    background-position: 130% 0;
  }
  22% { opacity: .78; }
  70% { opacity: .42; }
  100% {
    opacity: 0;
    background-position: -130% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-pack-stack-flight-card {
    transition-property: transform !important;
    transition-duration: var(--flight-duration, 1000ms) !important;
    transition-timing-function: cubic-bezier(.12,.76,.16,1.035) !important;
  }
}

.card-pack-opening.stage-stacking {
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

.card-pack-opening.stage-stacking .card-pack-stack-deck {
  width: min(316px, 74vw) !important;
  aspect-ratio: 991 / 1473 !important;
}

@media (max-width: 620px) {
  .card-pack-opening.stage-stacking .card-pack-stack-deck {
    width: min(270px, 72vw) !important;
  }
}

.card-pack-opening.stage-stacking .card-pack-stack-deck {
  width: min(316px, 74vw) !important;
  min-width: min(316px, 74vw) !important;
  max-width: min(316px, 74vw) !important;
  aspect-ratio: 991 / 1473 !important;
}

@media (max-width: 620px) {
  .card-pack-opening.stage-stacking .card-pack-stack-deck {
    width: min(270px, 72vw) !important;
    min-width: min(270px, 72vw) !important;
    max-width: min(270px, 72vw) !important;
  }
}

.card-pack-opening.stage-stacking .card-pack-stack-flight-card > img {
  object-fit: fill !important;
  object-position: center center !important;
}

.card-pack-opening.stage-stacking .card-pack-stack-stage,
.card-pack-opening.stage-cards .card-reveal-stage:not(.is-complete) {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.card-pack-opening.stage-stacking {
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.card-pack-opening.stage-stacking .card-pack-stack-stage {
  opacity: 1 !important;
  filter: blur(0) brightness(1) !important;
  transition:
    opacity var(--card-pack-stack-fade-duration, 260ms) ease-out,
    filter var(--card-pack-stack-fade-duration, 260ms) ease-out !important;
  will-change: opacity, filter !important;
}

.card-pack-opening.stage-stacking .card-pack-stack-stage.is-fading {
  opacity: 0 !important;
  filter: blur(1.2px) brightness(1.06) !important;
}

.card-pack-opening.stage-cards .card-reveal-stage:not(.is-complete) {
  animation: card-pack-reveal-stage-soft-in var(--card-pack-stage-in-duration, 180ms) ease-out both !important;
}

@keyframes card-pack-reveal-stage-soft-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes card-reveal-back-shell-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.card-pack-opening-background {
  contain: strict;
  overflow: hidden !important;
}

.card-pack-opening-background::before {
  opacity: .72;
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0 10%, rgba(var(--opening-rarity), .10) 14%, transparent 20% 34%, rgba(213, 183, 96, .055) 39%, transparent 47% 64%, rgba(var(--opening-rarity), .075) 69%, transparent 77% 100%) !important;
  filter: blur(1px);
  animation-duration: 32s !important;
}

.card-pack-opening-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(var(--opening-rarity), .045) 45%, transparent 67%),
    repeating-radial-gradient(circle at 50% 48%, transparent 0 86px, rgba(219, 187, 96, .026) 87px 88px, transparent 89px 172px),
    linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 24% 76%, rgba(0, 0, 0, .34)),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .52) 100%);
  mix-blend-mode: screen, normal, normal, normal;
}

.card-opening-aurora {
  position: absolute;
  z-index: 1;
  width: min(72vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .32;
  filter: blur(52px);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
}

.card-opening-aurora.is-a {
  top: -42%;
  left: -24%;
  background: radial-gradient(circle, rgba(var(--opening-rarity), .34), rgba(82, 132, 101, .09) 38%, transparent 68%);
  animation: card-opening-aurora-a 15s ease-in-out infinite alternate;
}

.card-opening-aurora.is-b {
  right: -28%;
  bottom: -48%;
  background: radial-gradient(circle, rgba(214, 176, 73, .25), rgba(var(--opening-rarity), .12) 42%, transparent 70%);
  animation: card-opening-aurora-b 18s ease-in-out -7s infinite alternate;
}

.card-opening-orbits {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(78vmin, 760px);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .33;
  pointer-events: none;
}

.card-opening-orbits > span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--opening-rarity), .105);
  border-radius: 50%;
  box-shadow: inset 0 0 34px rgba(var(--opening-rarity), .025), 0 0 30px rgba(var(--opening-rarity), .025);
  animation: card-opening-orbit-spin 36s linear infinite;
}

.card-opening-orbits > span::before,
.card-opening-orbits > span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  aspect-ratio: 1;
  border: 1px solid rgba(248, 220, 136, .62);
  background: rgba(14, 25, 18, .82);
  box-shadow: 0 0 12px rgba(var(--opening-rarity), .48);
  transform: translateY(-50%) rotate(45deg);
}

.card-opening-orbits > span::before { left: -4px; }
.card-opening-orbits > span::after { right: -4px; }
.card-opening-orbits > span:nth-child(2) {
  inset: 12%;
  border-style: dashed;
  opacity: .72;
  animation-direction: reverse;
  animation-duration: 28s;
}
.card-opening-orbits > span:nth-child(3) {
  inset: 27%;
  opacity: .58;
  animation-duration: 22s;
}

.card-opening-ornate-frame {
  position: absolute;
  z-index: 5;
  inset: clamp(14px, 2.8vw, 42px);
  pointer-events: none;
  opacity: .78;
}

.card-opening-ornate-frame::before,
.card-opening-ornate-frame::after {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 167, 70, .18) 12%, rgba(247, 221, 145, .54) 48%, rgba(var(--opening-rarity), .34) 52%, rgba(205, 167, 70, .18) 88%, transparent);
  box-shadow: 0 0 12px rgba(var(--opening-rarity), .12);
}
.card-opening-ornate-frame::before { top: 0; }
.card-opening-ornate-frame::after { bottom: 0; }

.card-opening-corner {
  position: absolute;
  width: clamp(58px, 8vw, 112px);
  aspect-ratio: 1;
  opacity: .8;
  filter: drop-shadow(0 0 7px rgba(var(--opening-rarity), .18));
}

.card-opening-corner::before,
.card-opening-corner::after {
  content: "";
  position: absolute;
  border-color: rgba(226, 194, 103, .56);
  border-style: solid;
}

.card-opening-corner::before {
  inset: 0;
  border-width: 1px 0 0 1px;
  clip-path: polygon(0 0, 100% 0, 100% 9%, 27% 9%, 9% 27%, 9% 100%, 0 100%);
  background: linear-gradient(135deg, rgba(var(--opening-rarity), .10), transparent 52%);
}

.card-opening-corner::after {
  top: 17%;
  left: 17%;
  width: 34%;
  aspect-ratio: 1;
  border-width: 1px;
  transform: rotate(45deg);
  box-shadow: inset 0 0 12px rgba(var(--opening-rarity), .10), 0 0 10px rgba(var(--opening-rarity), .10);
}

.card-opening-corner.is-top-left {
  top: 0;
  left: 0;
}
.card-opening-corner.is-top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}
.card-opening-corner.is-bottom-right {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
.card-opening-corner.is-bottom-left {
  left: 0;
  bottom: 0;
  transform: rotate(270deg);
}

.card-opening-side-ornament {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  translate: 0 -50%;
  color: rgba(245, 216, 128, .68);
  font-family: Georgia, serif;
  font-size: 12px;
  text-shadow: 0 0 12px rgba(var(--opening-rarity), .5);
}
.card-opening-side-ornament.is-left { left: 1px; }
.card-opening-side-ornament.is-right {
  right: 1px;
  transform: rotate(180deg);
}

.card-pack-opening-background .card-opening-side-ornament > i {
  position: static !important;
  display: block !important;
  width: 1px !important;
  height: clamp(46px, 9vh, 104px) !important;
  border-radius: 0 !important;
  opacity: .72 !important;
  background: linear-gradient(180deg, transparent, rgba(232, 200, 105, .64), rgba(var(--opening-rarity), .32), transparent) !important;
  box-shadow: 0 0 8px rgba(var(--opening-rarity), .18) !important;
  animation: card-opening-ornament-breathe 4.8s ease-in-out infinite !important;
}
.card-opening-side-ornament > b {
  font-weight: 400;
  animation: card-opening-sigil-pulse 3.8s ease-in-out infinite;
}

.card-opening-crown {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  translate: -50% 0;
  color: rgba(248, 220, 137, .72);
  font-family: Georgia, serif;
  font-size: 13px;
  text-shadow: 0 0 13px rgba(var(--opening-rarity), .42);
}
.card-opening-crown.is-top { top: -7px; }
.card-opening-crown.is-bottom {
  bottom: -7px;
  transform: rotate(180deg);
}

.card-pack-opening-background .card-opening-crown > i {
  position: static !important;
  width: clamp(34px, 6vw, 88px) !important;
  height: 1px !important;
  border-radius: 0 !important;
  opacity: .72 !important;
  background: linear-gradient(90deg, transparent, rgba(236, 203, 108, .7)) !important;
  box-shadow: 0 0 8px rgba(var(--opening-rarity), .16) !important;
  animation: none !important;
}
.card-opening-crown > i:last-child { transform: scaleX(-1); }

.card-opening-particle-field,
.card-opening-floating-sigils {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.card-pack-opening-background .card-opening-particle-field > i {
  position: absolute !important;
  left: var(--particle-x) !important;
  top: var(--particle-y) !important;
  width: var(--particle-size) !important;
  height: var(--particle-size) !important;
  border-radius: 50% !important;
  opacity: 0;
  background: rgba(255, 238, 181, .92) !important;
  box-shadow:
    0 0 5px rgba(255, 231, 151, .9),
    0 0 14px rgba(var(--opening-rarity), .64),
    0 0 26px rgba(var(--opening-rarity), .22) !important;
  animation: card-opening-edge-particle var(--particle-duration) ease-in-out var(--particle-delay) infinite !important;
  will-change: transform, opacity;
}

.card-opening-particle-field > i:nth-child(3n) {
  border-radius: 1px !important;
  transform: rotate(45deg);
  background: rgba(var(--opening-rarity), .96) !important;
}
.card-opening-particle-field > i:nth-child(5n) {
  filter: blur(.55px);
}

.card-opening-floating-sigils > span {
  position: absolute;
  left: var(--sigil-x);
  top: var(--sigil-y);
  color: rgba(240, 211, 124, .36);
  font-family: Georgia, serif;
  font-size: calc(17px * var(--sigil-scale));
  text-shadow: 0 0 15px rgba(var(--opening-rarity), .38);
  transform-origin: center;
  animation: card-opening-floating-sigil 8.6s ease-in-out var(--sigil-delay) infinite;
}

.card-pack-opening-background > .card-opening-anchor-particle {
  position: absolute !important;
  z-index: 4;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgb(var(--opening-rarity)) !important;
  box-shadow: 0 0 14px rgb(var(--opening-rarity)), 0 0 30px rgba(var(--opening-rarity), .32) !important;
  animation: card-opening-dust 6s ease-in-out infinite !important;
}
.card-pack-opening-background > .card-opening-anchor-particle:nth-of-type(1) {
  left: 13%;
  top: 76%;
}
.card-pack-opening-background > .card-opening-anchor-particle:nth-of-type(2) {
  left: 82%;
  top: 23%;
  animation-delay: -1.3s !important;
}
.card-pack-opening-background > .card-opening-anchor-particle:nth-of-type(3) {
  left: 30%;
  top: 19%;
  animation-delay: -2.8s !important;
}
.card-pack-opening-background > .card-opening-anchor-particle:nth-of-type(4) {
  left: 71%;
  top: 79%;
  animation-delay: -4.2s !important;
}

.card-pack-opening.stage-unwrapping .card-opening-orbits,
.card-pack-opening.stage-opening .card-opening-orbits,
.card-pack-opening.stage-stacking .card-opening-orbits {
  opacity: .46;
}
.card-pack-opening.stage-opening .card-opening-aurora,
.card-pack-opening.stage-stacking .card-opening-aurora {
  opacity: .42;
}
.card-pack-opening.stage-cards .card-opening-ornate-frame {
  opacity: .88;
}
.card-pack-opening.stage-cards .card-opening-floating-sigils > span {
  color: rgba(var(--opening-rarity), .48);
}

@keyframes card-opening-aurora-a {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(.92);
    opacity: .23;
  }
  100% {
    transform: translate3d(15%, 13%, 0) scale(1.14);
    opacity: .42;
  }
}
@keyframes card-opening-aurora-b {
  0% {
    transform: translate3d(5%, 3%, 0) scale(.94);
    opacity: .20;
  }
  100% {
    transform: translate3d(-14%, -11%, 0) scale(1.18);
    opacity: .40;
  }
}
@keyframes card-opening-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes card-opening-edge-particle {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.45);
  }
  16% { opacity: .22; }
  48% {
    opacity: .92;
    transform: translate3d(var(--particle-drift), -24px, 0) scale(1);
  }
  76% { opacity: .28; }
  92% {
    opacity: 0;
    transform: translate3d(calc(var(--particle-drift) * -.45), -70px, 0) scale(.55);
  }
}
@keyframes card-opening-floating-sigil {
  0%, 100% {
    opacity: .14;
    transform: translate3d(0, 8px, 0) rotate(-8deg) scale(calc(var(--sigil-scale) * .92));
  }
  45% {
    opacity: .58;
    transform: translate3d(7px, -11px, 0) rotate(5deg) scale(var(--sigil-scale));
  }
  72% {
    opacity: .28;
    transform: translate3d(-4px, -20px, 0) rotate(11deg) scale(calc(var(--sigil-scale) * 1.04));
  }
}
@keyframes card-opening-ornament-breathe {
  0%, 100% {
    opacity: .38;
    filter: brightness(.8);
  }
  50% {
    opacity: .9;
    filter: brightness(1.28);
  }
}
@keyframes card-opening-sigil-pulse {
  0%, 100% {
    opacity: .48;
    transform: scale(.82) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.08) rotate(45deg);
  }
}

@media (max-width: 720px) {
  .card-opening-ornate-frame {
    inset: 10px;
    opacity: .60;
  }
  .card-opening-corner { width: 54px; }
  .card-opening-side-ornament { display: none; }
  .card-opening-crown > i { width: 28px !important; }
  .card-opening-orbits {
    width: 88vmin;
    opacity: .25;
  }
  .card-opening-particle-field > i:nth-child(n + 23) { display: none !important; }
  .card-opening-floating-sigils > span:nth-child(2),
  .card-opening-floating-sigils > span:nth-child(5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-opening-aurora,
  .card-opening-orbits > span,
  .card-opening-particle-field > i,
  .card-opening-floating-sigils > span,
  .card-opening-side-ornament > i,
  .card-opening-side-ornament > b {
    animation-duration: 18s !important;
  }
}

.selected-coffer-card-pack-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-left: 2px;
  padding: 3px 10px 3px 12px;
  overflow: hidden;
  border: 1px solid rgba(222, 190, 104, .42);
  border-radius: 999px;
  color: rgba(255, 241, 196, .92);
  background:
    linear-gradient(90deg, rgba(214,180,95,.13), rgba(255,255,255,.025) 52%, rgba(214,180,95,.08)),
    rgba(9, 18, 12, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 12px rgba(0,0,0,.17),
    0 0 14px rgba(214,180,95,.06);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .055em;
  white-space: nowrap;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.selected-coffer-card-pack-note::before {
  content: "";
  width: 5px;
  height: 8px;
  margin-right: 7px;
  border: 1px solid rgba(255,238,177,.74);
  border-radius: 1px;
  background: linear-gradient(145deg, rgba(255,247,218,.88), rgba(191,143,45,.38));
  box-shadow:
    -3px 2px 0 -1px rgba(255,225,136,.48),
    0 0 7px rgba(255,214,102,.34);
  transform: rotate(-8deg);
}
.selected-coffer-card-pack-note::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -28%;
  width: 20%;
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-24deg);
  animation: selected-card-pack-note-shine 5.6s ease-in-out infinite;
}

.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx {
  position: absolute;
  inset: -20px -27px -18px;
  z-index: 1;
  display: block;
  overflow: visible;
  isolation: isolate;
  pointer-events: none;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::before,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::after {
  content: "";
  position: absolute;
  inset: 16% 7%;
  border-radius: 999px;
  pointer-events: none;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::before {
  background: radial-gradient(ellipse at center, rgba(229,193,99,.23), rgba(88,164,119,.08) 47%, transparent 73%);
  filter: blur(8px);
  animation: card-pack-open-aura 3.1s ease-in-out infinite;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::after {
  inset: 25% 10%;
  border: 1px solid rgba(232,201,112,.18);
  box-shadow: 0 0 16px rgba(214,180,95,.12), inset 0 0 14px rgba(214,180,95,.05);
  animation: card-pack-open-ring 4.4s linear infinite;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i {
  --card-mini-rotate: 0deg;
  position: absolute;
  z-index: 2;
  display: block;
  width: 13px;
  aspect-ratio: .68;
  opacity: 0;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
  animation: card-pack-open-card-float 3.15s ease-in-out infinite;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255,230,155,.48),
    0 2px 4px rgba(0,0,0,.55),
    0 0 9px rgba(224,188,92,.28);
  filter: saturate(.9) brightness(1.05);
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(1) {
  left: 3%;
  top: 58%;
  --card-mini-rotate: -17deg;
  animation-delay: -2.72s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(2) {
  left: 13%;
  top: 12%;
  width: 11px;
  --card-mini-rotate: 12deg;
  animation-delay: -1.08s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(3) {
  left: 34%;
  top: -3%;
  width: 12px;
  --card-mini-rotate: -8deg;
  animation-delay: -2.02s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(4) {
  right: 33%;
  top: -4%;
  width: 11px;
  --card-mini-rotate: 10deg;
  animation-delay: -.46s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(5) {
  right: 12%;
  top: 13%;
  width: 12px;
  --card-mini-rotate: -13deg;
  animation-delay: -1.56s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(6) {
  right: 2%;
  top: 58%;
  --card-mini-rotate: 18deg;
  animation-delay: -2.36s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(7) {
  left: 29%;
  bottom: -4%;
  width: 11px;
  --card-mini-rotate: 8deg;
  animation-delay: -.84s;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(8) {
  right: 29%;
  bottom: -5%;
  width: 12px;
  --card-mini-rotate: -10deg;
  animation-delay: -1.82s;
}

@keyframes selected-card-pack-note-shine {
  0%, 64% {
    left: -28%;
    opacity: 0;
  }
  72% { opacity: .45; }
  86%, 100% {
    left: 116%;
    opacity: 0;
  }
}
@keyframes card-pack-open-aura {
  0%, 100% {
    opacity: .55;
    transform: scale(.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes card-pack-open-ring {
  0% {
    opacity: .3;
    transform: scale(.92) rotate(0deg);
  }
  50% {
    opacity: .62;
    transform: scale(1.05) rotate(180deg);
  }
  100% {
    opacity: .3;
    transform: scale(.92) rotate(360deg);
  }
}
@keyframes card-pack-open-card-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 9px, 0) scale(.58) rotate(calc(var(--card-mini-rotate) - 8deg));
  }
  20% { opacity: .92; }
  53% {
    opacity: 1;
    transform: translate3d(0, -7px, 0) scale(1) rotate(var(--card-mini-rotate));
  }
  82% { opacity: .5; }
  100% {
    opacity: 0;
    transform: translate3d(0, -17px, 0) scale(.72) rotate(calc(var(--card-mini-rotate) + 8deg));
  }
}

@media (max-width: 820px) {
  .selected-coffer-card-pack-note {
    min-height: 19px;
    padding: 3px 8px 3px 9px;
    font-size: 8px;
    letter-spacing: .035em;
  }
  .selected-coffer-card-pack-note::before {
    margin-right: 5px;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx {
    inset: -18px -21px -16px;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i {
    width: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .selected-coffer-card-pack-note::after {
    animation: selected-card-pack-note-shine 5.6s ease-in-out infinite !important;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::before {
    animation: card-pack-open-aura 3.1s ease-in-out infinite !important;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::after {
    animation: card-pack-open-ring 4.4s linear infinite !important;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i {
    animation: card-pack-open-card-float 3.15s ease-in-out infinite !important;
  }
}

.vault-selection .selected-coffer-label-row.has-card-pack-note {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: fit-content;
  max-width: 100%;
}
.vault-selection .selected-coffer-label-row.has-card-pack-note .eyebrow {
  flex: 0 0 auto;
}

.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx {
  z-index: auto !important;
  isolation: auto !important;
}

.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::before {
  z-index: 0 !important;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx::after {
  z-index: 1 !important;
}

.inventory-open-button-shell.is-card-pack-open > .inventory-open-custom-button {
  z-index: 2 !important;
}

.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i {
  --card-mini-duration: 7.6s;
  --card-mini-delay: 0s;
  --card-mini-x-mid: 0px;
  --card-mini-y-mid: -7px;
  --card-mini-x-end: 0px;
  --card-mini-y-end: -18px;
  z-index: 1 !important;
  animation: card-pack-open-card-weave var(--card-mini-duration) cubic-bezier(.42, 0, .22, 1) var(--card-mini-delay) infinite !important;
}

.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(1) {
  --card-mini-delay: -.95s;
  --card-mini-x-mid: 14px;
  --card-mini-y-mid: -9px;
  --card-mini-x-end: 28px;
  --card-mini-y-end: -20px;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(2) {
  --card-mini-delay: -4.75s;
  --card-mini-x-mid: 42px;
  --card-mini-y-mid: 22px;
  --card-mini-x-end: 78px;
  --card-mini-y-end: 35px;
  z-index: 4 !important;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(3) {
  --card-mini-delay: -2.85s;
  --card-mini-x-mid: 8px;
  --card-mini-y-mid: -3px;
  --card-mini-x-end: -10px;
  --card-mini-y-end: -17px;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(4) {
  --card-mini-delay: 0s;
  --card-mini-x-mid: -26px;
  --card-mini-y-mid: 26px;
  --card-mini-x-end: -52px;
  --card-mini-y-end: 39px;
  z-index: 4 !important;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(5) {
  --card-mini-delay: -6.65s;
  --card-mini-x-mid: -8px;
  --card-mini-y-mid: -5px;
  --card-mini-x-end: -18px;
  --card-mini-y-end: -16px;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(6) {
  --card-mini-delay: -5.70s;
  --card-mini-x-mid: -48px;
  --card-mini-y-mid: -4px;
  --card-mini-x-end: -86px;
  --card-mini-y-end: -19px;
  z-index: 4 !important;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(7) {
  --card-mini-delay: -1.90s;
  --card-mini-x-mid: 27px;
  --card-mini-y-mid: -27px;
  --card-mini-x-end: 56px;
  --card-mini-y-end: -43px;
  z-index: 4 !important;
}
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(8) {
  --card-mini-delay: -3.80s;
  --card-mini-x-mid: -10px;
  --card-mini-y-mid: -15px;
  --card-mini-x-end: 2px;
  --card-mini-y-end: -29px;
}

.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(2) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(4) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(6) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(7) img {
  box-shadow:
    0 0 0 1px rgba(255, 236, 174, .72),
    0 3px 6px rgba(0, 0, 0, .62),
    0 0 12px rgba(236, 199, 102, .52);
  filter: saturate(1) brightness(1.11);
}

@keyframes card-pack-open-card-weave {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.58) rotate(calc(var(--card-mini-rotate) - 9deg));
  }
  6% { opacity: .94; }
  16% {
    opacity: 1;
    transform: translate3d(calc(var(--card-mini-x-mid) * .32), calc(var(--card-mini-y-mid) * .32), 0) scale(.83) rotate(calc(var(--card-mini-rotate) - 3deg));
  }
  52% {
    opacity: 1;
    transform: translate3d(var(--card-mini-x-mid), var(--card-mini-y-mid), 0) scale(1.04) rotate(var(--card-mini-rotate));
  }
  76% {
    opacity: 1;
    transform: translate3d(calc(var(--card-mini-x-mid) * .72), calc(var(--card-mini-y-mid) * .72), 0) scale(.96) rotate(calc(var(--card-mini-rotate) + 4deg));
  }
  88% { opacity: .9; }
  95% {
    opacity: 0;
    transform: translate3d(var(--card-mini-x-end), var(--card-mini-y-end), 0) scale(.7) rotate(calc(var(--card-mini-rotate) + 10deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--card-mini-x-end), var(--card-mini-y-end), 0) scale(.62) rotate(calc(var(--card-mini-rotate) + 12deg));
  }
}

@media (max-width: 820px) {

  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(2) {
    --card-mini-x-mid: 32px;
    --card-mini-y-mid: 18px;
    --card-mini-x-end: 56px;
    --card-mini-y-end: 28px;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(4) {
    --card-mini-x-mid: -20px;
    --card-mini-y-mid: 21px;
    --card-mini-x-end: -39px;
    --card-mini-y-end: 31px;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(6) {
    --card-mini-x-mid: -36px;
    --card-mini-y-mid: -3px;
    --card-mini-x-end: -64px;
    --card-mini-y-end: -14px;
  }
  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i:nth-child(7) {
    --card-mini-x-mid: 21px;
    --card-mini-y-mid: -21px;
    --card-mini-x-end: 40px;
    --card-mini-y-end: -33px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx i {
    animation: card-pack-open-card-weave var(--card-mini-duration) cubic-bezier(.42, 0, .22, 1) var(--card-mini-delay) infinite !important;
  }
}

.box-card .purchase-action-pair.is-card-pack-buy {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx {
  position: absolute;
  inset: -13px -17px -12px;
  z-index: auto;
  display: block;
  overflow: visible;
  isolation: auto;
  pointer-events: none;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::before,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::before {
  inset: 18% 8%;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(229,193,99,.22), rgba(88,164,119,.075) 47%, transparent 73%);
  filter: blur(6px);
  animation: card-pack-open-aura 3.1s ease-in-out infinite !important;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::after {
  inset: 27% 11%;
  z-index: 1;
  border: 1px solid rgba(232,201,112,.17);
  box-shadow: 0 0 12px rgba(214,180,95,.11), inset 0 0 10px rgba(214,180,95,.045);
  animation: card-pack-open-ring 4.4s linear infinite !important;
}

.box-card .purchase-action-pair.is-card-pack-buy > .box-buy-button {
  position: relative !important;
  z-index: 2 !important;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i {
  --card-mini-duration: 7.6s;
  --card-mini-delay: 0s;
  --card-mini-rotate: 0deg;
  --card-mini-x-mid: 0px;
  --card-mini-y-mid: -5px;
  --card-mini-x-end: 0px;
  --card-mini-y-end: -13px;
  position: absolute;
  z-index: 1;
  display: block;
  width: 11px;
  aspect-ratio: .68;
  opacity: 0;
  border-radius: 1.5px;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
  animation: card-pack-open-card-weave var(--card-mini-duration) cubic-bezier(.42, 0, .22, 1) var(--card-mini-delay) infinite !important;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255,230,155,.46),
    0 2px 4px rgba(0,0,0,.54),
    0 0 7px rgba(224,188,92,.26);
  filter: saturate(.9) brightness(1.05);
  pointer-events: none;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(1) {
  left: 3%; top: 58%;
  --card-mini-rotate: -17deg;
  --card-mini-delay: -.95s;
  --card-mini-x-mid: 10px; --card-mini-y-mid: -6px;
  --card-mini-x-end: 20px; --card-mini-y-end: -14px;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(2) {
  left: 13%; top: 12%; width: 10px;
  --card-mini-rotate: 12deg;
  --card-mini-delay: -4.75s;
  --card-mini-x-mid: 29px; --card-mini-y-mid: 15px;
  --card-mini-x-end: 54px; --card-mini-y-end: 24px;
  z-index: 4;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(3) {
  left: 34%; top: -3%; width: 10.5px;
  --card-mini-rotate: -8deg;
  --card-mini-delay: -2.85s;
  --card-mini-x-mid: 6px; --card-mini-y-mid: -2px;
  --card-mini-x-end: -7px; --card-mini-y-end: -12px;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(4) {
  right: 33%; top: -4%; width: 10px;
  --card-mini-rotate: 10deg;
  --card-mini-delay: 0s;
  --card-mini-x-mid: -18px; --card-mini-y-mid: 18px;
  --card-mini-x-end: -36px; --card-mini-y-end: 27px;
  z-index: 4;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(5) {
  right: 12%; top: 13%; width: 10.5px;
  --card-mini-rotate: -13deg;
  --card-mini-delay: -6.65s;
  --card-mini-x-mid: -6px; --card-mini-y-mid: -4px;
  --card-mini-x-end: -13px; --card-mini-y-end: -11px;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(6) {
  right: 2%; top: 58%;
  --card-mini-rotate: 18deg;
  --card-mini-delay: -5.70s;
  --card-mini-x-mid: -33px; --card-mini-y-mid: -3px;
  --card-mini-x-end: -59px; --card-mini-y-end: -13px;
  z-index: 4;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(7) {
  left: 29%; bottom: -4%; width: 10px;
  --card-mini-rotate: 8deg;
  --card-mini-delay: -1.90s;
  --card-mini-x-mid: 19px; --card-mini-y-mid: -19px;
  --card-mini-x-end: 39px; --card-mini-y-end: -30px;
  z-index: 4;
}
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(8) {
  right: 29%; bottom: -5%; width: 10.5px;
  --card-mini-rotate: -10deg;
  --card-mini-delay: -3.80s;
  --card-mini-x-mid: -7px; --card-mini-y-mid: -10px;
  --card-mini-x-end: 1px; --card-mini-y-end: -20px;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(2) img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(4) img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(6) img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(7) img {
  box-shadow:
    0 0 0 1px rgba(255,236,174,.68),
    0 3px 5px rgba(0,0,0,.6),
    0 0 9px rgba(236,199,102,.46);
  filter: saturate(1) brightness(1.1);
}

@media (max-width: 700px) {
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx {
    inset: -11px -13px -10px;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i {
    width: 9.5px;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(2) {
    --card-mini-x-mid: 23px; --card-mini-y-mid: 12px;
    --card-mini-x-end: 40px; --card-mini-y-end: 20px;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(4) {
    --card-mini-x-mid: -14px; --card-mini-y-mid: 15px;
    --card-mini-x-end: -27px; --card-mini-y-end: 22px;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(6) {
    --card-mini-x-mid: -25px; --card-mini-y-mid: -2px;
    --card-mini-x-end: -45px; --card-mini-y-end: -10px;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i:nth-child(7) {
    --card-mini-x-mid: 15px; --card-mini-y-mid: -15px;
    --card-mini-x-end: 29px; --card-mini-y-end: -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::before {
    animation: card-pack-open-aura 3.1s ease-in-out infinite !important;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::after {
    animation: card-pack-open-ring 4.4s linear infinite !important;
  }
  .box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx i {
    animation: card-pack-open-card-weave var(--card-mini-duration) cubic-bezier(.42, 0, .22, 1) var(--card-mini-delay) infinite !important;
  }
}

.card-inspector.is-locked .card-inspector-main-image {
  filter: grayscale(1) brightness(.46) contrast(.96) !important;
}

.card-reveal-progress {
  width: min(820px, 94vw);
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 8px;
  padding-inline: 8px;
}

.card-reveal-progress.count-10,
.card-reveal-progress.count-15 {
  margin-inline: auto;
}

@media (max-width: 620px) {
  .card-reveal-progress {
    width: min(330px, 94vw);
    gap: 6px;
    padding-inline: 4px;
  }

  .card-reveal-progress button {
    width: 42px;
  }
}

.card-pack-opening.stage-cards.is-multi-pack.is-complete {
  justify-content: flex-start;
}

.card-pack-opening.stage-cards.is-multi-pack.is-complete .card-pack-opening-main {
  flex: 0 0 auto;
  min-height: 0;
  justify-content: flex-start;
  padding-block: max(24px, env(safe-area-inset-top)) 24px;
}

.card-pack-opening.stage-cards.is-multi-pack.is-complete .card-pack-complete-celebration {
  min-height: 0;
}

.card-inspector-stage {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

.card-inspector-stage.is-interacting {
  cursor: grabbing !important;
}

.card-inspector-rotator-host {
  transition: none !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

.card-inspector-rotator-host.is-interacting {
  transition: none !important;
}

.card-inspector-main-image,
.card-inspector-back-image,
.card-inspector-preset {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.card-inspector-backdrop {
  --inspector-rarity-base: #d8be70;
  --inspector-rarity-secondary: #fff0bd;
  --inspector-screen-fx: var(--card-accent, var(--inspector-rarity-base));
  --inspector-screen-fx-secondary: var(--card-secondary, var(--inspector-rarity-secondary));
  isolation: isolate;
}

.card-inspector-backdrop.rarity-common {
  --inspector-rarity-base: #d8be70;
  --inspector-rarity-secondary: #fff1c7;
}

.card-inspector-backdrop.rarity-uncommon {
  --inspector-rarity-base: #6feb9f;
  --inspector-rarity-secondary: #3fae72;
}

.card-inspector-backdrop.rarity-rare {
  --inspector-rarity-base: #5ea9ff;
  --inspector-rarity-secondary: #bde8ff;
}

.card-inspector-backdrop.rarity-epic {
  --inspector-rarity-base: #cc67ff;
  --inspector-rarity-secondary: #ff9df2;
}

.card-inspector-backdrop.rarity-legendary {
  --inspector-rarity-base: #ffc94b;
  --inspector-rarity-secondary: #ff4aae;
}

.card-inspector-backdrop > .card-inspector {
  position: relative;
  z-index: 4;
}

.card-inspector-backdrop > .card-inspector-close {
  z-index: 6;
}

.card-inspector-screen-fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  isolation: isolate;
}

.card-inspector-screen-fx::before,
.card-inspector-screen-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-inspector-screen-fx::before {
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--inspector-screen-fx) 18%, transparent), transparent 34%),
    radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--inspector-screen-fx-secondary) 16%, transparent), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.48) 100%);
  opacity: .9;
}

.card-inspector-screen-fx::after {
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--inspector-screen-fx) 22%, transparent);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--inspector-screen-fx) 8%, transparent),
    0 0 28px color-mix(in srgb, var(--inspector-screen-fx) 7%, transparent);
  opacity: .72;
}

.card-inspector-screen-aurora {
  position: absolute;
  top: 50%;
  width: min(42vw, 620px);
  height: min(92vh, 980px);
  border-radius: 50%;
  opacity: .34;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--inspector-screen-fx) 22%, transparent),
      color-mix(in srgb, var(--inspector-screen-fx-secondary) 9%, transparent) 42%,
      transparent 72%);
  will-change: transform, opacity;
  animation: cardInspectorScreenAurora 8.4s ease-in-out infinite;
}

.card-inspector-screen-aurora.is-left {
  left: -18vw;
  transform: translate3d(0, -50%, 0) rotate(-8deg);
}

.card-inspector-screen-aurora.is-right {
  right: -18vw;
  transform: translate3d(0, -50%, 0) rotate(8deg);
  animation-delay: -4.2s;
}

.card-inspector-screen-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82vw, 1180px);
  aspect-ratio: 1.72;
  border: 1px solid color-mix(in srgb, var(--inspector-screen-fx) 22%, transparent);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-7deg);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--inspector-screen-fx) 9%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--inspector-screen-fx-secondary) 7%, transparent);
  opacity: .62;
  will-change: transform, opacity;
  animation: cardInspectorOrbitTurn 26s linear infinite;
}

.card-inspector-screen-orbit.is-inner {
  width: min(62vw, 850px);
  aspect-ratio: 1.46;
  transform: translate3d(-50%, -50%, 0) rotate(13deg);
  opacity: .42;
  animation-duration: 20s;
  animation-direction: reverse;
}

.card-inspector-screen-orbit > i {
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--inspector-screen-fx) 76%, white 24%);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--inspector-screen-fx) 88%, transparent),
    0 0 22px color-mix(in srgb, var(--inspector-screen-fx-secondary) 54%, transparent);
}

.card-inspector-screen-orbit > i:nth-child(1) {
  left: 8%;
  top: 30%;
}
.card-inspector-screen-orbit > i:nth-child(2) {
  right: 8%;
  top: 32%;
}
.card-inspector-screen-orbit > i:nth-child(3) {
  left: 24%;
  bottom: 4%;
}
.card-inspector-screen-orbit > i:nth-child(4) {
  right: 24%;
  bottom: 4%;
}

.card-inspector-screen-frame {
  position: absolute;
  inset: clamp(18px, 3.4vw, 54px);
}

.card-inspector-screen-corner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  width: clamp(120px, 18vw, 250px);
  height: clamp(70px, 12vw, 150px);
  color: color-mix(in srgb, var(--inspector-screen-fx) 76%, white 24%);
  opacity: .82;
  text-shadow: 0 0 12px color-mix(in srgb, var(--inspector-screen-fx) 65%, transparent);
  will-change: opacity;
  animation: cardInspectorOrnamentPulse 4.8s ease-in-out infinite;
}

.card-inspector-screen-corner::before,
.card-inspector-screen-corner::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, color-mix(in srgb, var(--inspector-screen-fx) 62%, transparent), transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--inspector-screen-fx) 24%, transparent);
}

.card-inspector-screen-corner::before {
  width: 100%;
  height: 1px;
  top: 0;
}
.card-inspector-screen-corner::after {
  width: 1px;
  height: 100%;
  top: 0;
}
.card-inspector-screen-corner > i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .55;
}
.card-inspector-screen-corner > b {
  font-size: clamp(13px, 1.5vw, 22px);
  font-weight: 400;
}

.card-inspector-screen-corner.is-top-left {
  left: 0;
  top: 0;
  transform-origin: top left;
}
.card-inspector-screen-corner.is-top-left::before,
.card-inspector-screen-corner.is-top-left::after { left: 0; }
.card-inspector-screen-corner.is-top-right {
  right: 0;
  top: 0;
  transform: scaleX(-1);
  transform-origin: top right;
  animation-delay: -1.2s;
}
.card-inspector-screen-corner.is-top-right::before,
.card-inspector-screen-corner.is-top-right::after { left: 0; }
.card-inspector-screen-corner.is-bottom-left {
  left: 0;
  bottom: 0;
  transform: scaleY(-1);
  transform-origin: bottom left;
  animation-delay: -2.4s;
}
.card-inspector-screen-corner.is-bottom-left::before,
.card-inspector-screen-corner.is-bottom-left::after { left: 0; }
.card-inspector-screen-corner.is-bottom-right {
  right: 0;
  bottom: 0;
  transform: scale(-1);
  transform-origin: bottom right;
  animation-delay: -3.6s;
}
.card-inspector-screen-corner.is-bottom-right::before,
.card-inspector-screen-corner.is-bottom-right::after { left: 0; }

.card-inspector-screen-crown,
.card-inspector-screen-spine {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: color-mix(in srgb, var(--inspector-screen-fx-secondary) 72%, white 28%);
  text-shadow: 0 0 12px color-mix(in srgb, var(--inspector-screen-fx) 62%, transparent);
  opacity: .72;
}

.card-inspector-screen-crown {
  left: 50%;
  width: min(34vw, 430px);
  transform: translateX(-50%);
}
.card-inspector-screen-crown.is-top { top: -4px; }
.card-inspector-screen-crown.is-bottom {
  bottom: -4px;
  transform: translateX(-50%) scaleY(-1);
}
.card-inspector-screen-crown > i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.card-inspector-screen-crown > b {
  font-size: 18px;
  font-weight: 400;
  animation: cardInspectorCrownTurn 7s linear infinite;
}

.card-inspector-screen-spine {
  top: 50%;
  width: min(26vh, 220px);
  transform: translateY(-50%) rotate(90deg);
}
.card-inspector-screen-spine.is-left { left: calc(-1 * min(10vh, 78px)); }
.card-inspector-screen-spine.is-right {
  right: calc(-1 * min(10vh, 78px));
  transform: translateY(-50%) rotate(-90deg);
}
.card-inspector-screen-spine > i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.card-inspector-screen-spine > b {
  font-size: 15px;
  font-weight: 400;
}

.card-inspector-screen-particles,
.card-inspector-screen-sigils {
  position: absolute;
  inset: 0;
}

.card-inspector-screen-particles > i {
  position: absolute;
  left: var(--inspector-particle-x);
  top: var(--inspector-particle-y);
  width: var(--inspector-particle-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--inspector-screen-fx) 74%, white 26%);
  box-shadow:
    0 0 9px color-mix(in srgb, var(--inspector-screen-fx) 88%, transparent),
    0 0 19px color-mix(in srgb, var(--inspector-screen-fx-secondary) 52%, transparent);
  opacity: .18;
  will-change: transform, opacity;
  animation: cardInspectorParticleFloat var(--inspector-particle-duration) ease-in-out var(--inspector-particle-delay) infinite;
}

.card-inspector-screen-sigils > span {
  position: absolute;
  left: var(--inspector-sigil-x);
  top: var(--inspector-sigil-y);
  color: color-mix(in srgb, var(--inspector-screen-fx) 74%, white 26%);
  font-size: clamp(13px, 1.5vw, 22px);
  line-height: 1;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--inspector-screen-fx) 86%, transparent),
    0 0 24px color-mix(in srgb, var(--inspector-screen-fx-secondary) 42%, transparent);
  opacity: .28;
  scale: var(--inspector-sigil-scale);
  will-change: transform, opacity;
  animation: cardInspectorSigilFloat 7.2s ease-in-out var(--inspector-sigil-delay) infinite;
}

.card-inspector-screen-dust {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86vw, 1250px);
  height: min(68vh, 720px);
  transform: translate3d(-50%, -50%, 0);
  opacity: .16;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--inspector-screen-fx) 70%, white 30%) 0 1px, transparent 1.5px),
    radial-gradient(circle, color-mix(in srgb, var(--inspector-screen-fx-secondary) 66%, white 34%) 0 1px, transparent 1.5px);
  background-size: 48px 48px, 72px 72px;
  background-position: 0 0, 23px 19px;
  -webkit-mask-image: radial-gradient(ellipse, transparent 0 22%, #000 42%, transparent 82%);
  mask-image: radial-gradient(ellipse, transparent 0 22%, #000 42%, transparent 82%);
  will-change: transform, opacity;
  animation: cardInspectorDustDrift 18s linear infinite;
}

.card-inspector-screen-dust.is-b {
  opacity: .11;
  transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(.84);
  animation-duration: 24s;
  animation-direction: reverse;
}

.card-inspector-backdrop.rarity-legendary .card-inspector-screen-fx::before {
  background:
    radial-gradient(circle at 10% 44%, rgba(255,74,174,.18), transparent 32%),
    radial-gradient(circle at 90% 55%, rgba(82,231,255,.16), transparent 32%),
    radial-gradient(circle at 50% 10%, rgba(255,201,75,.12), transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.48) 100%);
}

.card-inspector-backdrop.rarity-legendary .card-inspector-screen-corner,
.card-inspector-backdrop.rarity-legendary .card-inspector-screen-crown,
.card-inspector-backdrop.rarity-legendary .card-inspector-screen-spine {
  color: #fff7ff;
  text-shadow:
    0 0 10px rgba(255,201,75,.52),
    0 0 18px rgba(255,74,174,.34),
    0 0 28px rgba(82,231,255,.22);
}

.card-inspector-backdrop.rarity-legendary .card-inspector-screen-particles > i:nth-child(3n + 1) {
  --inspector-screen-fx: #ff4aae;
}
.card-inspector-backdrop.rarity-legendary .card-inspector-screen-particles > i:nth-child(3n + 2) {
  --inspector-screen-fx: #52e7ff;
}
.card-inspector-backdrop.rarity-legendary .card-inspector-screen-particles > i:nth-child(3n) {
  --inspector-screen-fx: #ffc94b;
}

@keyframes cardInspectorScreenAurora {
  0%, 100% {
    opacity: .22;
    scale: .94;
  }
  50% {
    opacity: .46;
    scale: 1.06;
  }
}

@keyframes cardInspectorOrbitTurn {
  to { transform: translate3d(-50%, -50%, 0) rotate(353deg); }
}

@keyframes cardInspectorOrnamentPulse {
  0%, 100% { opacity: .58; }
  50% { opacity: .96; }
}

@keyframes cardInspectorCrownTurn {
  to { transform: rotate(360deg); }
}

@keyframes cardInspectorParticleFloat {
  0%, 100% {
    transform: translate3d(0, 12px, 0) scale(.62);
    opacity: .12;
  }
  48% {
    transform: translate3d(var(--inspector-particle-drift-x), var(--inspector-particle-drift-y), 0) scale(1.18);
    opacity: .88;
  }
  75% { opacity: .34; }
}

@keyframes cardInspectorSigilFloat {
  0%, 100% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    opacity: .18;
  }
  50% {
    transform: translate3d(-50%, calc(-50% - 16px), 0) rotate(90deg);
    opacity: .72;
  }
}

@keyframes cardInspectorDustDrift {
  to { transform: translate3d(-50%, calc(-50% - 28px), 0) rotate(6deg); }
}

@media (max-width: 760px) {
  .card-inspector-screen-frame { inset: 14px; }
  .card-inspector-screen-corner {
    width: 100px;
    height: 64px;
    opacity: .58;
  }
  .card-inspector-screen-corner > b { font-size: 12px; }
  .card-inspector-screen-crown { width: 46vw; }
  .card-inspector-screen-spine { display: none; }
  .card-inspector-screen-orbit { width: 118vw; }
  .card-inspector-screen-orbit.is-inner { width: 86vw; }
  .card-inspector-screen-sigils > span:nth-child(7),
  .card-inspector-screen-sigils > span:nth-child(8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-inspector-screen-fx * {
    animation-duration: 18s !important;
  }
}

.fourfun-card-quantity,
.card-pack-result-quantity,
.album-preset-card-quantity,
.fourfun-card-edition,
.card-inspector-card-edition,
.card-catalog-preset-edition {
  display: none !important;
}

.card-reveal-duplicate-note {
  position: absolute;
  left: 50%;
  bottom: -52px;
  z-index: 45;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88vw, 360px);
  padding: 10px 18px;
  border: 1px solid rgba(240, 217, 144, .48);
  border-radius: 999px;
  background: rgba(17, 24, 20, .9);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42), inset 0 0 20px rgba(240, 217, 144, .08);
  color: #f6e7b5;
  font-size: clamp(.78rem, 1.35vw, .95rem);
  font-weight: 800;
  letter-spacing: .045em;
  text-align: center;
  pointer-events: none;
  animation: cardDuplicateNoteIn .36s ease-out both;
}

.card-pack-complete-grid > .card-pack-result-card.is-duplicate {
  margin-bottom: 42px !important;
}

.card-pack-duplicate-message {
  position: absolute;
  left: 50%;
  bottom: -36px;
  z-index: 30;
  transform: translateX(-50%);
  width: calc(100% - 14px);
  padding: 6px 8px;
  border: 1px solid rgba(240, 217, 144, .34);
  border-radius: 8px;
  background: rgba(14, 20, 17, .9);
  color: #f5e5b1;
  font-size: clamp(.58rem, .75vw, .72rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .025em;
  text-align: center;
  pointer-events: none;
}

@keyframes cardDuplicateNoteIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .card-reveal-duplicate-note {
    bottom: -46px;
    padding: 8px 14px;
  }
  .card-pack-complete-grid > .card-pack-result-card.is-duplicate { margin-bottom: 38px !important; }
}

.card-catalog-preset-card.is-locked .card-catalog-preset-image {
  filter: grayscale(1) brightness(.46) !important;
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mhytic-coffer-seal-wrap {
  position: absolute !important;
  top: -2px !important;
  left: 50% !important;
  z-index: 17 !important;
  display: block !important;
  width: 112px !important;
  height: 27px !important;
  max-width: calc(100% - 28px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.mhytic-coffer-seal-outline-svg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  animation: mhytic-outline-breathe 3.3s ease-in-out infinite !important;
}
.mhytic-coffer-seal-outline-svg image {
  animation: mhytic-outline-glow-pulse 3.3s ease-in-out infinite !important;
}
.mhytic-coffer-seal {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: 112px !important;
  height: 27px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 .35px rgba(255, 241, 198, .92))
    drop-shadow(.7px 0 0 rgba(236, 189, 79, .78))
    drop-shadow(-.7px 0 0 rgba(198, 131, 28, .78))
    drop-shadow(0 .7px 0 rgba(248, 223, 140, .86))
    drop-shadow(0 -.7px 0 rgba(175, 112, 19, .74))
    drop-shadow(0 0 2.2px rgba(250, 210, 104, .34))
    drop-shadow(0 0 5.5px rgba(231, 171, 40, .18))
    drop-shadow(0 3px 5px rgba(0,0,0,.52)) !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}
.mhytic-coffer-seal-sheen {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  -webkit-mask: url('/images/mhytictag.png') center / 100% 100% no-repeat;
  mask: url('/images/mhytictag.png') center / 100% 100% no-repeat;
}
.mhytic-coffer-seal-sheen::before {
  content: "";
  position: absolute;
  top: -52%;
  left: -46%;
  width: 34%;
  height: 204%;
  background: linear-gradient(112deg,
    rgba(255,255,255,0) 0%,
    rgba(255,240,188,0) 25%,
    rgba(255,220,124,.10) 39%,
    rgba(255,249,223,.50) 50%,
    rgba(255,210,91,.18) 61%,
    rgba(255,255,255,0) 76%);
  filter: blur(.45px);
  transform: skewX(-18deg);
  animation: mhytic-seal-sheen-pass 5.4s ease-in-out infinite !important;
}
@keyframes mhytic-outline-breathe {
  0%, 100% {
    opacity: .86;
    transform: translateZ(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateZ(0) scale(1.008);
  }
}
@keyframes mhytic-outline-glow-pulse {
  0%, 100% {
    opacity: .88;
  }
  50% {
    opacity: 1;
  }
}
@keyframes mhytic-seal-sheen-pass {
  0%, 56% {
    left: -46%;
    opacity: 0;
  }
  62% {
    opacity: .42;
  }
  78% {
    left: 112%;
    opacity: .72;
  }
  86%, 100% {
    left: 112%;
    opacity: 0;
  }
}
.box-visual.has-mhytic-seal .coffer-rarity-seal {
  top: 35px !important;
}
.box-visual.is-sold-out .mhytic-coffer-seal-wrap {
  opacity: .26 !important;
}
.box-visual.is-sold-out .mhytic-coffer-seal {
  filter: grayscale(.75) brightness(.55) !important;
}
@media (max-width: 680px) {
  .mhytic-coffer-seal-wrap {
    width: 104px !important;
    height: 25px !important;
  }
  .mhytic-coffer-seal-outline-svg {
    width: 104px !important;
    height: 25px !important;
  }
  .mhytic-coffer-seal {
    width: 104px !important;
    height: 25px !important;
  }
  .box-visual.has-mhytic-seal .coffer-rarity-seal {
    top: 33px !important;
  }
}

.card-inspector-actions {
  align-items: center;
}
.card-inspector-action-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
}
.card-inspector-action-button:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.04) 34%, rgba(255,244,211,.18) 48%, rgba(255,255,255,.05) 62%, transparent 78%);
  transform: translateX(-125%);
  transition: transform .42s ease;
}
.card-inspector-action-button:not(:disabled):hover::after,
.card-inspector-action-button:not(:disabled):focus-visible::after {
  transform: translateX(125%);
}
.card-inspector-download-button {
  --action-bg: #F0D990;
  --action-text: #172018;
}
.card-inspector-download-button:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.35);
}
.card-inspector-download-error {
  margin: 8px 0 0 !important;
  color: #f0b9a8 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
@media (max-width: 720px) {
  .card-inspector-actions {
    flex-wrap: nowrap;
  }
  .card-inspector-actions .btn {
    min-width: 0;
    flex: 1 1 0;
  }
  .card-inspector-download-error {
    text-align: center !important;
  }
}

.card-album-modal-backdrop {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  place-items: start center !important;
  padding: clamp(6px, 1.8vw, 20px) !important;
  overscroll-behavior: contain;
}

.card-album-modal-stage {
  width: min(1320px, calc(100vw - clamp(12px, 3vw, 40px))) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-block: auto !important;
}

.card-album.card-album-modal-book {
  --card-album-columns: 5;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.card-album.card-album-modal-book .card-album-heading {
  min-width: 0 !important;
  padding-inline: clamp(8px, 1.5vw, 20px) !important;
}

.card-album.card-album-modal-book .card-book-shell,
.card-album.card-album-modal-book .card-book-spread,
.card-album.card-album-modal-book .card-book-page {
  min-width: 0 !important;
  max-width: 100% !important;
}

.card-album.card-album-modal-book .card-book-spread {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(10px, 1.7vw, 24px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.card-album.card-album-modal-book.is-single-page-layout .card-book-spread {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(650px, 100%) !important;
  margin-inline: auto !important;
}

.card-album.card-album-modal-book.is-single-page-layout .card-book-page {
  border-radius: clamp(14px, 2vw, 24px) !important;
}

.card-album.card-album-modal-book .card-book-page {
  display: grid !important;
  grid-template-columns: repeat(var(--card-album-columns), minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: clamp(7px, 1vw, 14px) clamp(4px, .75vw, 10px) !important;
  padding: clamp(12px, 1.65vw, 20px) clamp(7px, 1vw, 12px) !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-book-slot,
.card-album.card-album-modal-book .card-book-slot-empty {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(176px, 18vw, 202px) !important;
  min-height: 0 !important;
  max-height: 202px !important;
  padding: clamp(4px, .65vw, 8px) 2px !important;
  place-items: center !important;
  overflow: visible !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  width: min(120px, calc(100% - 4px)) !important;
  min-width: 0 !important;
  max-width: 120px !important;
  height: auto !important;
  flex: 0 1 auto !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card-surface,
.card-album.card-album-modal-book .card-book-slot .album-preset-card-frame {
  width: 100% !important;
  max-width: 100% !important;
}

.card-album.card-album-modal-book .card-book-pagination {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px clamp(14px, 4vw, 34px) !important;
  padding-inline: 8px !important;
}

@media (max-width: 959px) {
  .card-album.card-album-modal-book .card-book-shell {
    border-radius: clamp(20px, 3.4vw, 34px) !important;
  }

  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    height: clamp(168px, 21vw, 194px) !important;
  }
}

@media (max-width: 759px) {
  .card-album.card-album-modal-book .card-album-heading {
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    text-align: center !important;
  }

  .card-album.card-album-modal-book .card-album-heading > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .card-album.card-album-modal-book .card-album-tools {
    flex: 0 1 230px !important;
    justify-content: center !important;
  }

  .card-album.card-album-modal-book .card-album-tools label,
  .card-album.card-album-modal-book .card-album-tools select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    height: clamp(174px, 30vw, 202px) !important;
  }

  .card-album.card-album-modal-book .card-book-spread::before,
  .card-album.card-album-modal-book .card-book-spread::after {
    width: clamp(54px, 14vw, 88px) !important;
  }
}

@media (max-width: 519px) {
  .card-album-modal-close {
    top: 0 !important;
    right: 1px !important;
  }

  .card-album.card-album-modal-book .card-album-heading {
    padding-top: 26px !important;
    margin-bottom: 6px !important;
  }

  .card-album.card-album-modal-book .card-album-heading h3 {
    font-size: clamp(25px, 9vw, 34px) !important;
  }

  .card-album.card-album-modal-book .card-book-page {
    gap: 8px 5px !important;
    padding: 12px 8px !important;
  }

  .card-album.card-album-modal-book .card-book-slot,
  .card-album.card-album-modal-book .card-book-slot-empty {
    height: 182px !important;
  }

  .card-album.card-album-modal-book .card-book-pagination .btn {
    flex: 1 1 120px !important;
    max-width: 170px !important;
  }

  .card-album.card-album-modal-book .card-book-pagination span {
    flex: 1 1 100% !important;
    order: -1 !important;
    text-align: center !important;
  }
}

.card-inspector-stage > .card-inspector-card,
.card-inspector-stage > .card-inspector-card.fourfun-card-shell {
  isolation: auto !important;
  overflow: visible !important;
  contain: layout style !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}
.card-inspector-stage .card-inspector-rotator-host,
.card-inspector-stage .card-inspector-rotator {
  isolation: auto !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}
.card-inspector-stage .card-inspector-faux-edge {
  visibility: visible !important;
  opacity: 1 !important;
}

.card-inspector-stage > .card-inspector-screen-depth {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 7 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
  contain: none !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-inspector-screen-depth-edge {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  opacity: 0;
  will-change: width, height, opacity, transform !important;
  transition: none !important;
  border: 1px solid rgba(255, 241, 202, .78) !important;
  box-shadow:
    inset 0 0 0 1px rgba(50, 27, 12, .62),
    inset 2px 0 3px rgba(255, 250, 226, .38),
    inset -2px 0 3px rgba(34, 17, 8, .48),
    0 0 2px rgba(255, 239, 194, .64),
    0 0 6px rgba(0, 0, 0, .82),
    0 0 10px rgba(var(--card-accent-rgb, 206, 173, 92), .30) !important;
  filter: saturate(1.08) contrast(1.06) !important;
}

.card-inspector-screen-depth-edge::before,
.card-inspector-screen-depth-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-inspector-screen-depth-edge.is-side {
  min-width: 1px !important;
  min-height: 4px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(90deg,
      rgba(20, 10, 6, 1) 0%,
      rgba(96, 56, 20, .98) 8%,
      var(--card-secondary, #e6c979) 19%,
      rgba(255, 250, 226, 1) 34%,
      var(--card-accent, #b9974b) 55%,
      rgba(126, 75, 25, .98) 76%,
      rgba(18, 8, 5, 1) 100%) !important;
}

.card-inspector-screen-depth-edge.is-side::before {
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 250, 231, .22) 0 1px,
    rgba(97, 55, 22, .06) 1px 3px,
    rgba(20, 10, 6, .10) 3px 4px
  );
  opacity: .72;
}

.card-inspector-screen-depth-edge.is-side::after {
  background: linear-gradient(90deg, rgba(255,255,255,.20), transparent 30%, transparent 68%, rgba(0,0,0,.36));
}

.card-inspector-screen-depth-edge.is-side.is-reverse {
  background:
    linear-gradient(270deg,
      rgba(20, 10, 6, 1) 0%,
      rgba(96, 56, 20, .98) 8%,
      var(--card-secondary, #e6c979) 19%,
      rgba(255, 250, 226, 1) 34%,
      var(--card-accent, #b9974b) 55%,
      rgba(126, 75, 25, .98) 76%,
      rgba(18, 8, 5, 1) 100%) !important;
}

.card-inspector-screen-depth-edge.is-cap {
  min-width: 4px !important;
  min-height: 1px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg,
      rgba(30, 15, 8, .99) 0%,
      var(--card-secondary, #e6c979) 15%,
      rgba(255, 248, 221, .96) 34%,
      var(--card-accent, #b9974b) 57%,
      rgba(87, 49, 18, .96) 78%,
      rgba(24, 12, 7, .99) 100%) !important;
}

.card-inspector-screen-depth-edge.is-cap::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 250, 231, .20) 0 1px,
    rgba(97, 55, 22, .06) 1px 3px,
    rgba(20, 10, 6, .10) 3px 4px
  );
  opacity: .68;
}

.card-inspector-screen-depth-edge.is-cap::after {
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent 30%, transparent 68%, rgba(0,0,0,.38));
}

.card-inspector-screen-depth-edge.is-cap.is-reverse {
  background:
    linear-gradient(0deg,
      rgba(30, 15, 8, .99) 0%,
      var(--card-secondary, #e6c979) 15%,
      rgba(255, 248, 221, .96) 34%,
      var(--card-accent, #b9974b) 57%,
      rgba(87, 49, 18, .96) 78%,
      rgba(24, 12, 7, .99) 100%) !important;
}

.card-inspector-stage .card-inspector-faux-edge {
  display: none !important;
}

.card-inspector-stage > .card-inspector-screen-depth {
  display: none !important;
}

.card-inspector-stage > .card-inspector-card,
.card-inspector-stage > .card-inspector-card.fourfun-card-shell,
.card-inspector-stage .card-inspector-rotator-host,
.card-inspector-stage .card-inspector-rotator {
  isolation: auto !important;
  contain: none !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.card-inspector-stage .card-inspector-rotator {
  --card-prism-depth: 9px;
  --card-prism-half-depth: 4.5px;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.card-inspector-stage .card-inspector-front {
  transform: translateZ(var(--card-prism-half-depth)) !important;
}

.card-inspector-stage .card-inspector-back {
  transform: rotateY(180deg) translateZ(var(--card-prism-half-depth)) !important;
}

.card-inspector-stage .card-inspector-prism-edge {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 239, 191, .56) !important;
  background:
    linear-gradient(90deg,
      rgba(28, 14, 8, .98) 0%,
      rgba(105, 63, 25, .98) 12%,
      var(--card-accent, #b9974b) 28%,
      rgba(255, 242, 202, .98) 46%,
      var(--card-secondary, #ead18f) 64%,
      rgba(93, 51, 19, .98) 84%,
      rgba(20, 9, 6, .99) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(31, 15, 8, .62),
    inset 1px 0 1px rgba(255, 255, 255, .30),
    inset -1px 0 2px rgba(0, 0, 0, .42),
    0 0 5px rgba(0, 0, 0, .32) !important;
  filter: saturate(1.03) brightness(.94) !important;
}

.card-inspector-stage .card-inspector-prism-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 250, 225, .16) 0 1px,
      rgba(91, 52, 20, .08) 1px 2px,
      transparent 2px 4px
    ),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 34%, transparent 68%, rgba(0,0,0,.30));
  opacity: .82;
}

.card-inspector-stage .card-inspector-prism-edge.is-left,
.card-inspector-stage .card-inspector-prism-edge.is-right {
  top: 14px !important;
  bottom: 14px !important;
  width: var(--card-prism-depth) !important;
  height: auto !important;
  transform: rotateY(90deg) !important;
}

.card-inspector-stage .card-inspector-prism-edge.is-left {
  left: calc(var(--card-prism-half-depth) * -1) !important;
}

.card-inspector-stage .card-inspector-prism-edge.is-right {
  left: calc(100% - var(--card-prism-half-depth)) !important;
}

.card-inspector-stage .card-inspector-prism-edge.is-top,
.card-inspector-stage .card-inspector-prism-edge.is-bottom {
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  height: var(--card-prism-depth) !important;
  transform: rotateX(90deg) !important;
  background:
    linear-gradient(180deg,
      rgba(24, 11, 7, .99) 0%,
      rgba(104, 61, 23, .98) 14%,
      var(--card-accent, #b9974b) 30%,
      rgba(255, 243, 207, .98) 48%,
      var(--card-secondary, #ead18f) 66%,
      rgba(82, 43, 16, .98) 86%,
      rgba(18, 8, 5, .99) 100%) !important;
}

.card-inspector-stage .card-inspector-prism-edge.is-top {
  top: calc(var(--card-prism-half-depth) * -1) !important;
}

.card-inspector-stage .card-inspector-prism-edge.is-bottom {
  top: calc(100% - var(--card-prism-half-depth)) !important;
}

@media (max-width: 720px) {
  .card-inspector-stage .card-inspector-rotator {
    --card-prism-depth: 8px;
    --card-prism-half-depth: 4px;
  }
}

.card-inspector-stage > .card-inspector-screen-depth,
.card-inspector-stage .card-inspector-prism-edge,
.card-inspector-stage .card-inspector-faux-edge {
  display: none !important;
}

.card-inspector-stage > .card-inspector-prism-canvas {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  display: block !important;
  width: auto;
  height: auto;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  contain: none !important;
  isolation: auto !important;
}

.card-inspector-stage > .card-inspector-card,
.card-inspector-stage > .card-inspector-card.fourfun-card-shell {
  z-index: 4 !important;
}

.card-inspector-stage .card-inspector-depth-anchor {
  position: absolute !important;
  z-index: -1 !important;
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  margin: -.5px 0 0 -.5px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}
.card-inspector-stage .card-inspector-depth-anchor.is-tl {
  left: 0 !important;
  top: 0 !important;
}
.card-inspector-stage .card-inspector-depth-anchor.is-tr {
  left: 100% !important;
  top: 0 !important;
}
.card-inspector-stage .card-inspector-depth-anchor.is-br {
  left: 100% !important;
  top: 100% !important;
}
.card-inspector-stage .card-inspector-depth-anchor.is-bl {
  left: 0 !important;
  top: 100% !important;
}
.card-inspector-stage .card-inspector-depth-anchor.is-front {
  transform: translateZ(var(--card-prism-half-depth)) !important;
}
.card-inspector-stage .card-inspector-depth-anchor.is-back {
  transform: translateZ(calc(var(--card-prism-half-depth) * -1)) !important;
}

.card-inspector-actions .card-inspector-close-action,
.card-inspector-actions .card-inspector-close-action:hover:not(:disabled),
.card-inspector-actions .card-inspector-close-action:focus-visible,
.card-inspector-actions .card-inspector-close-action:active:not(:disabled) {
  --action-bg: #292c29;
  --action-text: var(--ivory, #f7f5ed);
  color: var(--ivory, #f7f5ed) !important;
  -webkit-text-fill-color: var(--ivory, #f7f5ed) !important;
  border-color: rgba(247, 245, 237, .16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 45%),
    linear-gradient(135deg, #30332f 0%, #252824 58%, #20231f 100%) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.72) !important;
  overflow: hidden !important;
}

.card-inspector-actions .card-inspector-close-action {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -2px 0 rgba(0,0,0,.34),
    0 5px 0 #151815,
    0 9px 18px rgba(0,0,0,.30) !important;
}

.card-inspector-actions .card-inspector-close-action:hover:not(:disabled),
.card-inspector-actions .card-inspector-close-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(247,245,237,.27) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), transparent 46%),
    linear-gradient(135deg, #393d38 0%, #2d312c 58%, #252824 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 7px 0 #151815,
    0 13px 22px rgba(0,0,0,.34) !important;
}

.card-inspector-actions .card-inspector-close-action:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.34),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 2px 0 #151815,
    0 5px 10px rgba(0,0,0,.24) !important;
}

.card-album-launch-button,
.history-launch-buttons .achievements-launch-button {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    filter .22s ease;
}

.card-album-launch-button:hover,
.card-album-launch-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 221, 129, .72);
  background:
    linear-gradient(90deg, rgba(244, 202, 96, .19), transparent 32%, rgba(236, 190, 79, .13)),
    radial-gradient(circle at 18% 0, rgba(255, 232, 161, .24), transparent 56%),
    rgba(21, 35, 24, .98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .40),
    0 9px 20px rgba(0, 0, 0, .20),
    0 0 22px rgba(231, 187, 77, .19);
}

.card-album-launch-icon {
  transition: transform .24s cubic-bezier(.2, .78, .25, 1.18), filter .22s ease;
}

.card-album-launch-card {
  transition:
    transform .28s cubic-bezier(.2, .78, .25, 1.22),
    top .28s cubic-bezier(.2, .78, .25, 1.22),
    left .28s cubic-bezier(.2, .78, .25, 1.22),
    right .28s cubic-bezier(.2, .78, .25, 1.22),
    border-color .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
  transform-origin: 50% 88%;
}

.card-album-launch-button:hover .card-album-launch-icon,
.card-album-launch-button:focus-visible .card-album-launch-icon {
  transform: perspective(90px) rotateX(0deg) translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 5px rgba(255, 220, 122, .38));
}

.card-album-launch-button:hover .card-album-launch-card,
.card-album-launch-button:focus-visible .card-album-launch-card {
  border-color: rgba(255, 232, 162, .90);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 214, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .30),
    0 0 9px rgba(242, 196, 81, .30);
}

.card-album-launch-button:hover .card-album-launch-card.is-left,
.card-album-launch-button:focus-visible .card-album-launch-card.is-left {
  left: 0;
  top: 4px;
  transform: translate(-1px, -1px) rotate(-28deg);
}

.card-album-launch-button:hover .card-album-launch-card.is-center,
.card-album-launch-button:focus-visible .card-album-launch-card.is-center {
  top: 1px;
  transform: translateX(-50%) translateY(-1px) scale(1.08);
}

.card-album-launch-button:hover .card-album-launch-card.is-right,
.card-album-launch-button:focus-visible .card-album-launch-card.is-right {
  right: 0;
  top: 4px;
  transform: translate(1px, -1px) rotate(28deg);
}

.history-launch-buttons .achievements-launch-button:hover,
.history-launch-buttons .achievements-launch-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(166, 229, 177, .58);
  color: #efffcf;
  background:
    radial-gradient(circle at 50% 50%, rgba(143, 221, 158, .16), transparent 42%),
    linear-gradient(90deg, rgba(99, 170, 115, .14), transparent 34%, rgba(218, 191, 99, .10)),
    rgba(20, 37, 27, .97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 18px rgba(115, 205, 137, .08),
    0 8px 20px rgba(0, 0, 0, .18),
    0 0 20px rgba(111, 205, 135, .16);
}

.history-launch-buttons .achievements-launch-button:hover::before,
.history-launch-buttons .achievements-launch-button:focus-visible::before {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: 118%;
  height: 180%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(.76);
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(238, 255, 207, .18) 0deg 4deg,
      transparent 4deg 16deg
    );
  animation: achievementHoverRadiance 1.55s ease-in-out infinite;
}

.history-launch-buttons .achievements-launch-button:hover::after,
.history-launch-buttons .achievements-launch-button:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(188, 241, 177, .28);
  border-radius: 7px;
  opacity: 1;
  transform: none;
  pointer-events: none;
  box-shadow:
    inset 0 0 10px rgba(134, 220, 153, .08),
    0 0 8px rgba(134, 220, 153, .10);
  animation: achievementHoverInnerRing 1.35s ease-in-out infinite;
}

.history-launch-buttons .achievements-launch-button > span:first-child,
.history-launch-buttons .achievements-launch-button > b {
  transition:
    transform .22s ease,
    color .22s ease,
    text-shadow .22s ease,
    letter-spacing .22s ease;
}

.history-launch-buttons .achievements-launch-button:hover > span:first-child,
.history-launch-buttons .achievements-launch-button:focus-visible > span:first-child {
  transform: translateX(2px);
  letter-spacing: .135em;
  color: #f3ffd7;
  text-shadow:
    0 0 8px rgba(190, 255, 177, .42),
    0 0 15px rgba(215, 188, 94, .18);
}

.history-launch-buttons .achievements-launch-button:hover > b,
.history-launch-buttons .achievements-launch-button:focus-visible > b {
  transform: scale(1.08);
  color: #fff4bf;
  text-shadow: 0 0 8px rgba(255, 222, 126, .40);
}

@keyframes achievementHoverRadiance {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.74) rotate(0deg);
    opacity: .28;
  }
  50% {
    transform: translate(-50%, -50%) scale(.92) rotate(8deg);
    opacity: .62;
  }
}

@keyframes achievementHoverInnerRing {
  0%, 100% {
    opacity: .42;
    box-shadow: inset 0 0 8px rgba(134, 220, 153, .06), 0 0 6px rgba(134, 220, 153, .08);
  }
  50% {
    opacity: .90;
    box-shadow: inset 0 0 15px rgba(157, 236, 171, .13), 0 0 12px rgba(157, 236, 171, .17);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-album-launch-button,
  .history-launch-buttons .achievements-launch-button,
  .card-album-launch-icon,
  .card-album-launch-card,
  .history-launch-buttons .achievements-launch-button > span:first-child,
  .history-launch-buttons .achievements-launch-button > b {
    transition-duration: .01ms !important;
  }

  .history-launch-buttons .achievements-launch-button:hover::before,
  .history-launch-buttons .achievements-launch-button:focus-visible::before,
  .history-launch-buttons .achievements-launch-button:hover::after,
  .history-launch-buttons .achievements-launch-button:focus-visible::after {
    animation: none !important;
  }
}

.history-launch-buttons .achievements-launch-button:hover,
.history-launch-buttons .achievements-launch-button:focus-visible {
  transform: translateY(-2px) scale(1.006) !important;
  color: var(--gold-soft) !important;
  border-color: rgba(232, 199, 112, .54) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(214, 180, 95, .17), transparent 54%),
    rgba(23, 35, 25, .94) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    inset 0 -1px 0 rgba(0, 0, 0, .34),
    0 10px 21px rgba(0, 0, 0, .20),
    0 0 15px rgba(214, 180, 95, .12) !important;
}

.history-launch-buttons .achievements-launch-button:hover::before,
.history-launch-buttons .achievements-launch-button:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  top: -70% !important;
  bottom: -70% !important;
  left: -34% !important;
  width: 19% !important;
  height: auto !important;
  opacity: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 233, 166, .12),
      rgba(255, 250, 221, .42),
      rgba(231, 194, 99, .16),
      transparent
    ) !important;
  transform: skewX(-20deg) !important;
  animation: achievementsHoverGoldSweep .82s cubic-bezier(.18, .7, .2, 1) 1 both !important;
  pointer-events: none !important;
}

.history-launch-buttons .achievements-launch-button:hover::after,
.history-launch-buttons .achievements-launch-button:focus-visible::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  opacity: 1 !important;
  transform: none !important;
  border: 1px solid rgba(236, 205, 123, .15) !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 205, .055),
    inset 0 -1px 0 rgba(0, 0, 0, .22) !important;
  animation: none !important;
  pointer-events: none !important;
}

.history-launch-buttons .achievements-launch-button:hover > span:first-child,
.history-launch-buttons .achievements-launch-button:focus-visible > span:first-child {
  transform: translateX(2px) !important;
  color: var(--gold-soft) !important;
  letter-spacing: .12em !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .50),
    0 0 8px rgba(233, 198, 105, .22) !important;
}

.history-launch-buttons .achievements-launch-button:hover > b,
.history-launch-buttons .achievements-launch-button:focus-visible > b {
  transform: translateY(-1px) scale(1.07) rotate(-1.5deg) !important;
  color: rgba(255, 255, 255, .88) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .48),
    0 0 7px rgba(230, 194, 101, .22) !important;
}

.history-launch-buttons .achievements-launch-button:active {
  transform: translateY(0) scale(.997) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .24),
    inset 0 -1px 0 rgba(255, 255, 255, .035),
    0 4px 10px rgba(0, 0, 0, .16) !important;
}

@keyframes achievementsHoverGoldSweep {
  0% {
    left: -34%;
    opacity: 0;
  }
  16% { opacity: .62; }
  72% { opacity: .28; }
  100% {
    left: 118%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-launch-buttons .achievements-launch-button:hover::before,
  .history-launch-buttons .achievements-launch-button:focus-visible::before {
    animation: none !important;
    opacity: .16 !important;
    left: 48% !important;
  }
}

.card-inspector-actions .card-inspector-close-action::before,
.card-inspector-actions .card-inspector-close-action::after {
  border-radius: inherit !important;
}

.card-inspector-copy {
  overflow: visible !important;
  contain: style !important;
}

.card-inspector-titlebar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: max-content !important;
  max-width: none !important;
  min-width: fit-content !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.card-inspector-titlebar h2 {
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}

.card-inspector-titlebar .card-inspector-unified-seal.is-heading,
.card-inspector-titlebar .card-inspector-heading-seal,
.card-inspector-titlebar .rarity-seal.is-heading {
  position: relative !important;
  margin-left: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.box-buy-button.has-long-label .box-buy-button-label,
.inventory-buy-now-button.has-long-label .inventory-open-button-label {
  font-size: clamp(8px, .66vw, 10px) !important;
  letter-spacing: .045em !important;
  white-space: nowrap !important;
}

.purchase-spend-limit {
  margin: -17px 0 1px;
  color: rgba(247,245,237,.76);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.purchase-spend-limit.is-exempt {
  color: rgba(247,245,237,.82);
}
.purchase-spend-limit + .purchase-current-owned {
  margin-top: 2px;
}

@media (max-width: 680px) {
  .purchase-spend-limit { font-size: 12px; }
}

.staff-player-mark.tester-player-image-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: middle;
  overflow: visible;
}

.staff-player-mark.tester-player-image-mark img {
  display: block;
  width: auto;
  height: 14px;
  object-fit: contain;
  pointer-events: none;
}

.staff-player-mark.tester-player-image-mark {
  order: -1 !important;
  margin-left: 0 !important;
  margin-right: 7px !important;
  flex: 0 0 auto !important;
}

.avatar-button {
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.avatar-button:hover,
.avatar-button:focus-visible {
  transform: translateY(-2px) scale(1.045);
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(247,220,143,.34), 0 0 24px rgba(223,181,86,.35), inset 0 0 15px rgba(255,247,211,.14);
  outline: none;
}

.user-area-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 18%, rgba(210,171,83,.16), transparent 34%),
    rgba(3,7,5,.88);
  backdrop-filter: blur(18px) saturate(.82);
  animation: user-area-fade .25s ease both;
}
.user-area-shell {
  position: relative;
  width: min(1120px, 96vw);
  max-height: min(860px, 92vh);
  overflow: auto;
  border: 1px solid rgba(230,199,122,.38);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(153,111,33,.16), transparent 34%),
    linear-gradient(180deg, rgba(21,31,24,.98), rgba(7,12,9,.985));
  box-shadow: 0 34px 100px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025);
}
.user-area-shell::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(232,205,135,.14);
  border-radius: 21px;
}
.user-area-close {
  position: sticky;
  top: 16px;
  float: right;
  margin: 16px 16px -54px 0;
  z-index: 8;
}
.user-area-identity {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 34px 38px 28px;
  border-bottom: 1px solid rgba(225,195,119,.18);
  background: linear-gradient(90deg, rgba(116,84,28,.12), transparent 48%, rgba(116,84,28,.08));
}
.user-area-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246,220,155,.68);
  border-radius: 50%;
  color: #fff3c7;
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: .08em;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.14), transparent 30%), linear-gradient(145deg, #5d713f, #1b2a1c 72%);
  box-shadow: 0 0 0 6px rgba(196,151,59,.08), 0 12px 26px rgba(0,0,0,.36), inset 0 0 24px rgba(255,238,173,.09);
}
.user-area-identity .eyebrow { margin: 0 0 5px; }
.user-area-identity h2 {
  margin: 0;
  color: #f3dfaa;
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 42px);
}
.user-area-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.user-area-badges span {
  padding: 4px 9px;
  border: 1px solid rgba(230,197,118,.26);
  border-radius: 999px;
  color: rgba(255,245,216,.78);
  background: rgba(214,177,87,.07);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.user-area-balance {
  min-width: 210px;
  text-align: right;
}
.user-area-balance span {
  display: block;
  color: rgba(241,232,207,.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.user-area-balance strong {
  display: block;
  margin-top: 4px;
  color: #f3d985;
  font-family: Georgia, serif;
  font-size: clamp(23px, 2.5vw, 34px);
  text-shadow: 0 0 18px rgba(231,185,77,.24);
}
.user-area-tabs {
  display: flex;
  gap: 4px;
  padding: 16px 38px 0;
}
.user-area-tabs button {
  appearance: none;
  padding: 11px 17px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(242,237,220,.55);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}
.user-area-tabs button.active {
  color: #f4d987;
  border-bottom-color: #d8ad50;
}
.user-area-overview { padding: 24px 38px 38px; }
.user-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.user-stat-grid article {
  position: relative;
  min-height: 130px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(222,190,111,.16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.16));
}
.user-stat-grid article::after {
  content: "✦";
  position: absolute;
  right: 12px;
  bottom: -16px;
  color: rgba(224,183,87,.08);
  font-size: 72px;
}
.user-stat-grid span, .user-stat-grid small {
  display: block;
  color: rgba(239,234,217,.56);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.user-stat-grid strong {
  display: block;
  margin: 12px 0 8px;
  color: #f2d784;
  font-family: Georgia, serif;
  font-size: 28px;
}
.user-stat-grid small { font-size: 9px; }
.user-area-ledger-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.user-area-ledger-grid section {
  padding: 22px;
  border: 1px solid rgba(221,190,111,.15);
  border-radius: 19px;
  background: rgba(0,0,0,.14);
}
.user-area-ledger-grid h3 {
  margin: 0 0 15px;
  color: #e9cf86;
  font-family: Georgia, serif;
}
.user-area-ledger-grid section > p {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(230,210,156,.12);
  color: rgba(243,238,222,.62);
  font-size: 12px;
}
.user-area-ledger-grid section > p:last-child { border-bottom: 0; }
.user-area-ledger-grid section > p strong {
  color: rgba(255,246,220,.9);
  text-align: right;
}
.user-area-action {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1px 10px;
  align-items: center;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(224,190,106,.14);
  border-radius: 13px;
  color: rgba(255,247,222,.88);
  text-align: left;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.user-area-action:hover {
  border-color: rgba(235,203,122,.42);
  background: rgba(216,176,78,.07);
}
.user-area-action > span {
  grid-row: 1 / span 2;
  color: #dfbc63;
  font-size: 23px;
  text-align: center;
}
.user-area-action b { font-size: 13px; }
.user-area-action small {
  color: rgba(239,234,216,.48);
  font-size: 10px;
}

.chance-simulator { padding: 24px 38px 38px; }
.chance-simulator-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}
.chance-simulator-header h3 {
  margin: 2px 0 7px;
  color: #f0d487;
  font-family: Georgia, serif;
  font-size: 28px;
}
.chance-simulator-header p:last-child {
  max-width: 690px;
  margin: 0;
  color: rgba(241,236,220,.6);
  line-height: 1.55;
}
.chance-simulator-card-exclusion {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(230,192,98,.26);
  border-radius: 999px;
  color: #e1bd68;
  background: rgba(208,159,50,.08);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.chance-simulator-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px auto;
  gap: 12px;
  align-items: end;
  margin: 20px 0;
}
.chance-simulator-controls label > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(239,232,211,.54);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.chance-simulator-controls select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(223,190,109,.22);
  border-radius: 11px;
  color: #f1ead7;
  background: #111a14;
}
.chance-simulator-run { min-height: 44px; }
.chance-simulator-pool {
  border: 1px solid rgba(224,192,111,.14);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.13);
}
.chance-simulator-coffer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(225,195,119,.12);
}
.chance-simulator-image {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}
.chance-simulator-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(222,180,78,.24));
}
.chance-simulator-coffer strong, .chance-simulator-coffer span { display: block; }
.chance-simulator-coffer strong { color: #f1dfaf; }
.chance-simulator-coffer span {
  margin-top: 4px;
  color: rgba(239,234,217,.52);
  font-size: 10px;
}
.chance-simulator-table {
  max-height: 360px;
  overflow: auto;
}
.chance-simulator-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px 110px 145px;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  color: rgba(247,241,224,.72);
  font-size: 11px;
}
.chance-simulator-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 36px;
  color: rgba(244,231,191,.54);
  background: #101813;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.chance-simulator-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chance-simulator-reward img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.chance-simulator-reward b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chance-simulator-note {
  margin: 13px 0 0;
  color: rgba(239,233,214,.46);
  font-size: 10px;
  line-height: 1.5;
}
.chance-simulator-empty {
  margin: 30px 38px 38px;
  padding: 30px;
  border: 1px dashed rgba(225,191,108,.25);
  border-radius: 17px;
  color: rgba(245,238,215,.62);
  text-align: center;
}

.purchase-dialog.is-success {
  width: min(520px, 94vw) !important;
  max-height: 94vh;
  overflow-y: auto !important;
  padding-bottom: 18px !important;
}
.purchase-dialog.is-success .purchase-dialog-visual {
  transform: scale(.78);
  margin: -22px auto -34px;
}
.purchase-dialog.is-success .purchase-spend-limit,
.purchase-dialog.is-success .purchase-current-owned { display: none; }
.purchase-receipt {
  position: relative;
  width: min(400px, 88vw);
  margin: 2px auto 16px;
  padding: 27px 28px 22px;
  color: #29251c;
  background:
    repeating-linear-gradient(0deg, rgba(91,73,42,.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fffdf3, #eee5cf);
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 0 0 1px rgba(98,73,35,.15);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transform: rotate(-.45deg);
}
.purchase-receipt::before,
.purchase-receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  background: radial-gradient(circle at 5px 0, transparent 5px, #f6eedc 5.5px) 0 0 / 10px 9px repeat-x;
}
.purchase-receipt::before {
  top: -8px;
  transform: rotate(180deg);
}
.purchase-receipt::after { bottom: -8px; }
.purchase-receipt-perforation {
  position: absolute;
  inset: 9px 12px;
  pointer-events: none;
  border: 1px dashed rgba(78,61,37,.16);
}
.purchase-receipt-brand {
  position: relative;
  z-index: 1;
  margin-bottom: 17px;
  text-align: center;
}
.purchase-receipt-brand span, .purchase-receipt-brand small { display: block; }
.purchase-receipt-brand span {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
}
.purchase-receipt-brand small {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: .22em;
}
.purchase-receipt p {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 7px 0;
  font-size: 10px;
  line-height: 1.35;
}
.purchase-receipt p strong {
  max-width: 58%;
  text-align: right;
  overflow-wrap: anywhere;
}
.purchase-receipt .is-discount { color: #3f6d43; }
.purchase-receipt-rule {
  position: relative;
  z-index: 1;
  margin: 13px 0;
  border-top: 1px dashed rgba(49,41,28,.42);
}
.purchase-receipt-total {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 0 10px;
  padding: 10px 0;
  border-top: 2px solid #29251c;
  border-bottom: 2px solid #29251c;
  font-weight: 900;
}
.purchase-receipt-total strong { font-size: 16px; }
.purchase-receipt-code {
  position: relative;
  z-index: 1;
  height: 32px;
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 16px;
  opacity: .72;
}
.purchase-receipt-code i {
  width: 3px;
  background: #252119;
}
.purchase-receipt-code i:nth-child(3n) { width: 7px; }
.purchase-receipt-code i:nth-child(4n) { width: 2px; }

.gift-compose-dialog {
  --gift-paper: #18243d;
  --gift-paper-2: #0c1220;
  --gift-ribbon: #dfe8f7;
  --gift-ink: #f5f8ff;
}
.gift-compose-dialog.gift-wrap-royal, .gift-opening-overlay.gift-wrap-royal {
  --gift-paper: #5f111b;
  --gift-paper-2: #25070c;
  --gift-ribbon: #e5b849;
  --gift-ink: #fff0bd;
}
.gift-compose-dialog.gift-wrap-moogle, .gift-opening-overlay.gift-wrap-moogle {
  --gift-paper: #f0ded0;
  --gift-paper-2: #b98086;
  --gift-ribbon: #e36f8f;
  --gift-ink: #5b2530;
}
.gift-compose-dialog.gift-wrap-crystal, .gift-opening-overlay.gift-wrap-crystal {
  --gift-paper: #34205c;
  --gift-paper-2: #16102c;
  --gift-ribbon: #9de9ff;
  --gift-ink: #ecfaff;
}
.gift-compose-dialog.gift-wrap-starlight, .gift-opening-overlay.gift-wrap-starlight {
  --gift-paper: #17233c;
  --gift-paper-2: #080d18;
  --gift-ribbon: #d9e7f8;
  --gift-ink: #f4f8ff;
}
.gift-wrap-preview { position: relative; }
.gift-wrap-paper {
  position: absolute;
  inset: 25% 22% 14%;
  z-index: 1;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--gift-paper), var(--gift-paper-2));
  box-shadow: 0 16px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  opacity: .86;
  transform: rotate(-2deg);
}
.gift-wrap-paper::before, .gift-wrap-paper::after {
  content: "";
  position: absolute;
  background: var(--gift-ribbon);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gift-ribbon) 45%, transparent);
}
.gift-wrap-paper::before {
  left: 46%;
  top: 0;
  bottom: 0;
  width: 8%;
}
.gift-wrap-paper::after {
  top: 44%;
  left: 0;
  right: 0;
  height: 10%;
}
.gift-wrap-paper i {
  position: absolute;
  top: -12px;
  width: 30px;
  height: 24px;
  border: 7px solid var(--gift-ribbon);
  border-radius: 50%;
}
.gift-wrap-paper i:first-child {
  left: calc(50% - 29px);
  transform: rotate(22deg);
}
.gift-wrap-paper i:nth-child(2) {
  right: calc(50% - 29px);
  transform: rotate(-22deg);
}
.gift-wrap-paper b {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gift-ribbon);
  transform: translate(-50%,-50%);
}
.gift-wrap-preview > img {
  position: relative;
  z-index: 2;
}
.gift-wrap-theme-picker {
  margin: 12px 0 4px;
  padding: 0;
  border: 0;
}
.gift-wrap-theme-picker legend {
  margin-bottom: 7px;
  color: rgba(241,233,207,.58);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.gift-wrap-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.gift-wrap-theme-option {
  --gift-paper: #18243d; --gift-paper-2: #0c1220; --gift-ribbon: #dfe8f7;
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 8px;
  align-items: center;
  min-height: 64px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(228,201,132,.14);
  border-radius: 12px;
  color: rgba(250,245,230,.72);
  text-align: left;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gift-paper) 72%, #111), var(--gift-paper-2));
  cursor: pointer;
}
.gift-wrap-theme-option.gift-wrap-royal {
  --gift-paper:#64141f;
  --gift-paper-2:#25070c;
  --gift-ribbon:#e5b849;
}
.gift-wrap-theme-option.gift-wrap-moogle {
  --gift-paper:#d8b9b4;
  --gift-paper-2:#905e6e;
  --gift-ribbon:#ff9bb7;
}
.gift-wrap-theme-option.gift-wrap-crystal {
  --gift-paper:#42296f;
  --gift-paper-2:#17102d;
  --gift-ribbon:#99eaff;
}
.gift-wrap-theme-option > span {
  grid-row: 1 / span 2;
  color: var(--gift-ribbon);
  font-size: 20px;
  text-align: center;
}
.gift-wrap-theme-option b { font-size: 11px; }
.gift-wrap-theme-option small {
  overflow: hidden;
  color: rgba(255,255,255,.5);
  font-size: 8px;
  line-height: 1.3;
}
.gift-wrap-theme-option.is-selected {
  border-color: var(--gift-ribbon);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gift-ribbon) 40%, transparent), 0 0 18px color-mix(in srgb, var(--gift-ribbon) 18%, transparent);
}
.gift-compose-dialog:not(.is-success) {
  max-height: 94vh;
  overflow-y: auto;
}

.gift-opening-overlay {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gift-ribbon) 14%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(3,6,5,.92), rgba(2,3,3,.97));
  backdrop-filter: blur(18px);
}
.gift-opening-close {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 8;
}
.gift-opening-atmosphere, .gift-opening-atmosphere i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gift-opening-atmosphere i {
  background: radial-gradient(circle at 50% 50%, transparent 0 38%, color-mix(in srgb, var(--gift-ribbon) 10%, transparent) 39% 39.4%, transparent 39.8%);
  animation: gift-opening-orbit 11s linear infinite;
}
.gift-opening-atmosphere i:nth-child(2) {
  transform: rotate(45deg) scale(.78);
  animation-direction: reverse;
  animation-duration: 8s;
}
.gift-opening-atmosphere i:nth-child(3) {
  transform: rotate(90deg) scale(1.28);
  opacity: .45;
  animation-duration: 15s;
}
.gift-opening-atmosphere i:nth-child(4) {
  background: repeating-radial-gradient(circle, transparent 0 65px, color-mix(in srgb, var(--gift-ribbon) 7%, transparent) 66px 67px);
  opacity: .32;
}
.gift-opening-stage {
  position: relative;
  z-index: 2;
  width: min(760px, 94vw);
  text-align: center;
}
.gift-opening-heading h2 {
  margin: 6px 0 18px;
  color: var(--gift-ink);
  font-family: Georgia, serif;
  font-size: clamp(27px, 4vw, 45px);
  text-shadow: 0 0 28px color-mix(in srgb, var(--gift-ribbon) 30%, transparent);
}
.gift-package-button {
  position: relative;
  width: 290px;
  height: 260px;
  margin: 0 auto;
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 900px;
}
.gift-package-button:disabled { cursor: default; }
.gift-package-shadow {
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 210px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.52);
  filter: blur(12px);
  transform: translateX(-50%);
}
.gift-package-box {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 190px;
  height: 152px;
  border: 2px solid color-mix(in srgb, var(--gift-ribbon) 42%, transparent);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--gift-paper), var(--gift-paper-2));
  box-shadow: 0 26px 45px rgba(0,0,0,.42), inset 0 0 0 2px rgba(255,255,255,.045), inset 0 0 34px rgba(255,255,255,.035);
  transform: translate(-50%,-50%) rotateX(3deg);
  transition: transform .5s ease, opacity .45s ease;
}
.gift-package-box::before {
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top:-24px;
  height:38px;
  border:2px solid color-mix(in srgb, var(--gift-ribbon) 45%, transparent);
  border-radius:8px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--gift-paper) 90%,#fff),var(--gift-paper-2));
  box-shadow:0 8px 16px rgba(0,0,0,.28);
  transform-origin: 16% 100%;
}
.gift-package-box > i {
  position:absolute;
  background:var(--gift-ribbon);
  box-shadow:0 0 14px color-mix(in srgb,var(--gift-ribbon) 42%,transparent);
}
.gift-package-box > i:first-child {
  left:45%;
  top:-24px;
  bottom:0;
  width:10%;
}
.gift-package-box > i:nth-child(2) {
  top:43%;
  left:0;
  right:0;
  height:11%;
}
.gift-package-box > b {
  position:absolute;
  z-index:2;
  left:50%;
  top:43%;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gift-paper-2);
  background:var(--gift-ribbon);
  transform:translate(-50%,-50%);
  box-shadow:0 0 18px color-mix(in srgb,var(--gift-ribbon) 55%,transparent);
}
.gift-package-box > em {
  position:absolute;
  inset:10px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:5px;
}
.gift-package-ribbon i {
  position:absolute;
  z-index:3;
  top:25px;
  width:72px;
  height:50px;
  border:15px solid var(--gift-ribbon);
  border-radius:50%;
  box-shadow:0 0 18px color-mix(in srgb,var(--gift-ribbon) 35%,transparent);
}
.gift-package-ribbon i:first-child {
  left:68px;
  transform:rotate(20deg);
}
.gift-package-ribbon i:last-child {
  right:68px;
  transform:rotate(-20deg);
}
.gift-package-particles i {
  position:absolute;
  left:50%;
  top:52%;
  color:var(--gift-ribbon);
  font-style:normal;
  opacity:0;
  text-shadow:0 0 10px var(--gift-ribbon);
}
.gift-opening-overlay.is-arrived .gift-package-button { animation: gift-package-float 2.4s ease-in-out infinite; }
.gift-opening-overlay.is-unwrapping .gift-package-box::before { animation: gift-lid-open .8s .15s cubic-bezier(.2,.9,.3,1) forwards; }
.gift-opening-overlay.is-unwrapping .gift-package-ribbon { animation: gift-ribbon-release .7s ease forwards; }
.gift-opening-overlay.is-unwrapping .gift-package-box { animation: gift-box-burst 1.35s .25s ease forwards; }
.gift-opening-overlay.is-unwrapping .gift-package-particles i { animation: gift-particle-burst 1.15s calc(var(--gift-particle-index) * 24ms) ease-out forwards; }
.gift-opening-overlay.is-revealed .gift-package-button { display:none; }
.gift-unwrap-action {
  margin-top: -5px;
  min-width: 180px;
}
.gift-opening-status {
  color: var(--gift-ribbon);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gift-opening-reveal { animation: gift-reveal-in .55s ease both; }
.gift-opening-coffer {
  position:relative;
  width:230px;
  height:190px;
  display:grid;
  place-items:center;
  margin:0 auto;
}
.gift-opening-coffer img {
  position:relative;
  z-index:2;
  max-width:210px;
  max-height:170px;
  object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
}
.gift-opening-coffer > span {
  position:absolute;
  z-index:3;
  right:12px;
  bottom:12px;
  min-width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid var(--gift-ribbon);
  border-radius:50%;
  color:var(--gift-ink);
  background:rgba(5,8,7,.78);
  font-weight:900;
}
.gift-opening-reveal h3 {
  margin:0;
  color:var(--gift-ink);
  font-family:Georgia,serif;
  font-size:29px;
}
.gift-opening-reveal > p {
  margin:8px 0;
  color:rgba(247,242,226,.68);
}
.gift-opening-reveal blockquote {
  max-width:560px;
  margin:15px auto;
  padding:14px 18px;
  border-left:2px solid var(--gift-ribbon);
  color:rgba(255,250,233,.82);
  background:rgba(255,255,255,.035);
  font-family:Georgia,serif;
  font-style:italic;
}
.gift-opening-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}

.coffer-open-ritual {
  position:relative;
  width:100%;
}
.ritual-nameplate {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 auto 10px;
  color:rgba(248,238,209,.58);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ritual-nameplate span {
  color:var(--box-glow);
  text-shadow:0 0 12px var(--box-glow);
}
.ritual-coffer-unit { isolation:isolate; }
.ritual-focus {
  position:absolute;
  z-index:8;
  left:50%;
  top:47%;
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.ritual-focus > span {
  position:relative;
  display:block;
}

.ritual-wax-seal {
  width:68px;
  height:68px;
  display:grid!important;
  place-items:center;
  border-radius:46% 54% 48% 52%;
  color:#f5d999;
  background:radial-gradient(circle at 35% 28%,#bb4e45,#70211e 58%,#3c1112);
  box-shadow:0 0 0 6px rgba(83,20,18,.32),0 0 30px rgba(185,61,48,.45),inset 0 0 0 3px rgba(255,210,151,.18);
  animation:ritual-wax-hover 2s ease-in-out infinite;
}
.ritual-wax-seal::before,.ritual-wax-seal::after {
  content:"";
  position:absolute;
  width:16px;
  height:13px;
  border-radius:50%;
  background:#6b1d1b;
}
.ritual-wax-seal::before {
  left:-5px;
  bottom:8px;
  transform:rotate(25deg);
}
.ritual-wax-seal::after {
  right:-4px;
  top:10px;
  transform:rotate(-18deg);
}
.ritual-wax-seal b {
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:2px solid rgba(250,220,161,.55);
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:23px;
}
.ritual-wax-seal i,.ritual-wax-seal em {
  position:absolute;
  inset:50% auto auto 50%;
  width:2px;
  height:70px;
  background:linear-gradient(transparent,#f4c57d,transparent);
  transform:translate(-50%,-50%) rotate(32deg);
  opacity:0;
}
.ritual-wax-seal em { transform:translate(-50%,-50%) rotate(-47deg); }
.ritual-style-default.intro-complete .ritual-wax-seal { animation:ritual-wax-break .75s ease forwards; }
.ritual-style-default.intro-complete .ritual-wax-seal i,.ritual-style-default.intro-complete .ritual-wax-seal em { animation:ritual-seal-crack .55s ease forwards; }

.ritual-crystal-key {
  width:70px;
  height:86px;
  display:grid!important;
  place-items:center;
  filter:drop-shadow(0 0 18px rgba(116,231,255,.72));
  animation:ritual-crystal-float 2.3s ease-in-out infinite;
}
.ritual-crystal-key::before {
  content:"";
  position:absolute;
  inset:4px 12px 20px;
  clip-path:polygon(50% 0,100% 35%,78% 100%,22% 100%,0 35%);
  background:linear-gradient(145deg,#effcff 0 22%,#67daf5 23% 50%,#7969ff 51% 76%,#e9d2ff 77%);
  box-shadow:inset 0 0 20px rgba(255,255,255,.65);
}
.ritual-crystal-key b {
  position:relative;
  z-index:2;
  color:#fff;
  font-size:31px;
  text-shadow:0 0 10px #fff,0 0 22px #7be4ff;
}
.ritual-crystal-key i,.ritual-crystal-key em {
  position:absolute;
  left:50%;
  bottom:0;
  width:8px;
  height:30px;
  background:linear-gradient(#8be7ff,#5647be);
  transform:translateX(-50%);
}
.ritual-crystal-key em {
  width:28px;
  height:7px;
  bottom:2px;
}
.ritual-style-legendary.intro-complete .ritual-crystal-key { animation:ritual-crystal-unlock 1s cubic-bezier(.2,.8,.2,1) forwards; }

.ritual-chain-lock {
  width:98px;
  height:90px;
  display:grid!important;
  place-items:center;
}
.ritual-chain-lock > i {
  position:absolute;
  width:116px;
  height:15px;
  border:4px dotted #918c80;
  border-left-style:solid;
  border-right-style:solid;
  border-radius:999px;
  background:linear-gradient(180deg,#66645e,#262823);
  box-shadow:0 3px 5px #000,0 0 12px rgba(193,187,169,.25);
}
.ritual-chain-lock > i:first-child { transform:rotate(36deg); }
.ritual-chain-lock > i:nth-child(2) { transform:rotate(-36deg); }
.ritual-chain-lock b {
  position:relative;
  z-index:2;
  width:45px;
  height:48px;
  display:grid;
  place-items:center;
  border:3px solid #b9a472;
  border-radius:10px 10px 14px 14px;
  color:#e9cb7d;
  background:linear-gradient(#403c31,#151713);
  box-shadow:0 0 20px rgba(202,164,80,.28);
}
.ritual-chain-lock em {
  position:absolute;
  width:52px;
  height:52px;
  border:2px solid rgba(220,190,119,.22);
  transform:rotate(45deg);
}
.ritual-chain-lock em:last-child {
  width:70px;
  height:70px;
  animation:ritual-chain-orbit 3s linear infinite;
}
.ritual-style-bryer.intro-complete .ritual-chain-lock > i:first-child { animation:ritual-chain-break-left .8s ease forwards; }
.ritual-style-bryer.intro-complete .ritual-chain-lock > i:nth-child(2) { animation:ritual-chain-break-right .8s ease forwards; }
.ritual-style-bryer.intro-complete .ritual-chain-lock b { animation:ritual-lock-pop .65s .2s ease forwards; }

.ritual-coin-key {
  width:88px;
  height:96px;
  display:block!important;
  animation:ritual-coin-turn 2.2s linear infinite;
  transform-style:preserve-3d;
}
.ritual-coin-key b {
  position:absolute;
  left:50%;
  top:5px;
  width:63px;
  height:63px;
  display:grid;
  place-items:center;
  border:6px double #8b5f13;
  border-radius:50%;
  color:#6c4510;
  background:radial-gradient(circle at 35% 28%,#fff0a5,#e1aa35 43%,#9d6114 74%,#f5cd5b);
  box-shadow:0 0 24px rgba(246,197,67,.7),inset 0 0 0 4px rgba(255,238,153,.32);
  font-family:Georgia,serif;
  font-size:25px;
  transform:translateX(-50%);
}
.ritual-coin-key i {
  position:absolute;
  left:50%;
  top:62px;
  width:12px;
  height:31px;
  background:linear-gradient(90deg,#8d5d16,#f1c85b,#8d5d16);
  transform:translateX(-50%);
}
.ritual-coin-key i::before,.ritual-coin-key i::after {
  content:"";
  position:absolute;
  right:-14px;
  width:18px;
  height:7px;
  background:#d3a438;
}
.ritual-coin-key i::before { top:13px; }.ritual-coin-key i::after { top:23px; width:12px; }
.ritual-coin-key em {
  position:absolute;
  inset:-6px;
  border:1px dashed rgba(244,202,85,.42);
  border-radius:50%;
}
.ritual-style-gil.intro-complete .ritual-coin-key { animation:ritual-coin-insert .9s ease forwards; }

.ritual-rune-key {
  width:94px;
  height:94px;
  display:grid!important;
  place-items:center;
  border:1px solid rgba(112,255,200,.52);
  border-radius:50%;
  color:#d8fff0;
  box-shadow:0 0 24px rgba(58,229,169,.35),inset 0 0 24px rgba(62,218,165,.12);
  animation:ritual-rune-spin 6s linear infinite;
}
.ritual-rune-key > i {
  position:absolute;
  inset:9px;
  border:1px dashed rgba(121,255,208,.5);
  border-radius:50%;
}
.ritual-rune-key > i:nth-child(2) {
  inset:20px;
  transform:rotate(45deg);
  border-radius:8px;
}
.ritual-rune-key > i:nth-child(3) {
  inset:29px;
  border-style:solid;
}
.ritual-rune-key b {
  position:relative;
  z-index:2;
  font-size:30px;
  text-shadow:0 0 12px #7affcc;
}
.ritual-rune-key em {
  position:absolute;
  color:#7dffc8;
  font-style:normal;
  text-shadow:0 0 10px #48e6a4;
}
.ritual-rune-key em:nth-of-type(1) { top:-7px; }.ritual-rune-key em:nth-of-type(2) { right:-6px; bottom:8px; }.ritual-rune-key em:nth-of-type(3) { left:-4px; bottom:9px; }
.ritual-style-minions.intro-complete .ritual-rune-key { animation:ritual-rune-collapse .9s ease forwards; }

.coffer-unlock-stage.intro-complete .ritual-focus { pointer-events:none; }

.card-binder-shell {
  position:relative !important;
  padding:22px 24px 22px 72px !important;
  overflow:visible !important;
  border:2px solid #51361f !important;
  border-radius:14px 22px 22px 14px !important;
  background:linear-gradient(145deg,#4e2c1a,#20120d 62%,#120a07) !important;
  box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 3px rgba(218,172,97,.11),inset 10px 0 22px rgba(0,0,0,.35) !important;
}
.card-binder-cover-edge {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-right:1px solid rgba(230,183,104,.2);
  color:#d9b970;
  background:linear-gradient(90deg,#2a160e,#5c341e 54%,#2d180f);
  box-shadow:inset -8px 0 16px rgba(0,0,0,.32);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-shadow:0 2px 3px #000;
}
.card-binder-cover-edge span { font-size:9px; letter-spacing:.18em; }.card-binder-cover-edge b { font-family:Georgia,serif; font-size:13px; letter-spacing:.12em; }.card-binder-cover-edge i { width:12px; height:12px; border:1px solid currentColor; transform:rotate(45deg); }
.card-binder-tabs {
  position:absolute;
  z-index:5;
  right:-34px;
  top:42px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-binder-tabs span {
  width:42px;
  height:62px;
  display:grid;
  place-items:center;
  border:1px solid rgba(85,55,22,.35);
  border-left:0;
  border-radius:0 8px 8px 0;
  color:#47331b;
  background:linear-gradient(90deg,#d6bd80,#f0dcaa);
  box-shadow:3px 4px 8px rgba(0,0,0,.24);
  font-size:7px;
  font-weight:900;
  writing-mode:vertical-rl;
}
.card-binder-tabs span:nth-child(2){background:linear-gradient(90deg,#b8c1a4,#dfe7ce)}.card-binder-tabs span:nth-child(3){background:linear-gradient(90deg,#9ebfd0,#d5edf5)}.card-binder-tabs span:nth-child(4){background:linear-gradient(90deg,#c0a0cc,#ead9ef)}.card-binder-tabs span:nth-child(5){background:linear-gradient(90deg,#d6ae63,#fae2a2)}
.card-binder-rings {
  position:absolute;
  z-index:12;
  left:50%;
  top:8%;
  bottom:8%;
  width:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  transform:translateX(-50%);
  pointer-events:none;
}
.card-binder-rings span {
  position:relative;
  width:30px;
  height:22px;
}
.card-binder-rings i,.card-binder-rings b {
  position:absolute;
  left:50%;
  top:50%;
  border:4px solid #b8b6ad;
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 0 2px #fff;
  transform:translate(-50%,-50%);
}
.card-binder-rings i { width:27px; height:16px; border-bottom-color:#5e5d59; }.card-binder-rings b { width:16px; height:9px; border-width:2px; opacity:.7; }
.card-binder-spread {
  position:relative;
  z-index:2;
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 16px 30px rgba(0,0,0,.32);
}
.card-binder-page {
  position:relative;
  background:linear-gradient(180deg,rgba(239,238,221,.93),rgba(203,208,190,.95)) !important;
  box-shadow:inset 0 0 0 1px rgba(73,78,68,.24),inset 0 0 30px rgba(255,255,255,.26) !important;
}
.card-binder-page::after {
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border:1px solid rgba(89,97,83,.18);
  border-radius:4px;
  box-shadow:inset 0 0 12px rgba(255,255,255,.34);
}
.card-binder-page-gloss {
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 22% 62%,rgba(255,255,255,.08));
  mix-blend-mode:screen;
}
.card-binder-gutter {
  width:18px !important;
  background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(255,255,255,.12) 42%,rgba(0,0,0,.3)) !important;
}
.card-binder-page .card-book-slot::before {
  display:block !important;
  content:"" !important;
  inset:5px !important;
  border:1px solid rgba(80,91,79,.2) !important;
  border-radius:8px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 48%,rgba(123,143,130,.08)) !important;
  box-shadow:inset 0 0 14px rgba(255,255,255,.23),0 2px 5px rgba(61,68,58,.12) !important;
}
.card-binder-page .card-book-slot::after {
  display:block !important;
  content:"" !important;
  position:absolute;
  z-index:5;
  left:12%;
  right:12%;
  top:7px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  box-shadow:0 1px 2px rgba(46,54,45,.15);
  pointer-events:none;
}
.card-binder-corner { position:absolute; z-index:3; left:63px; width:28px; height:28px; border-left:5px solid #c29348; opacity:.55; }.card-binder-corner.corner-top{top:12px;border-top:5px solid #c29348}.card-binder-corner.corner-bottom{bottom:12px;border-bottom:5px solid #c29348}
.card-album-heading h3 { color:#f1d697 !important; }

@keyframes user-area-fade { from { opacity:0; } to { opacity:1; } }
@keyframes gift-opening-orbit { to { transform:rotate(360deg); } }
@keyframes gift-package-float { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes gift-lid-open { to { transform:rotate(-48deg) translate(-10px,-32px); opacity:0; } }
@keyframes gift-ribbon-release { to { transform:scale(1.55) rotate(20deg); opacity:0; } }
@keyframes gift-box-burst { 70%{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.6)}100%{transform:translate(-50%,-50%) scale(.7);opacity:0;filter:brightness(2.2)} }
@keyframes gift-particle-burst { 0%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--gift-particle-index) * 18deg)) translateX(0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--gift-particle-index) * 18deg)) translateX(190px) scale(1.4)} }
@keyframes gift-reveal-in { from{opacity:0}to{opacity:1} }
@keyframes ritual-wax-hover { 50%{transform:translateY(-5px) rotate(3deg)} }
@keyframes ritual-wax-break { 45%{transform:scale(1.12);filter:brightness(1.3)}100%{transform:scale(.5) rotate(18deg);opacity:0;filter:brightness(2)} }
@keyframes ritual-seal-crack { 25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(32deg) scaleY(1.5)} }
@keyframes ritual-crystal-float { 50%{transform:translateY(-7px) rotate(3deg)} }
@keyframes ritual-crystal-unlock { 45%{transform:translateY(18px) scale(1.1);filter:drop-shadow(0 0 30px #fff)}100%{transform:translateY(55px) scale(.3);opacity:0} }
@keyframes ritual-chain-orbit { to{transform:rotate(405deg)} }
@keyframes ritual-chain-break-left { to{transform:translate(-90px,-55px) rotate(76deg);opacity:0} }
@keyframes ritual-chain-break-right { to{transform:translate(90px,-55px) rotate(-76deg);opacity:0} }
@keyframes ritual-lock-pop { to{transform:scale(1.7);opacity:0;filter:brightness(2)} }
@keyframes ritual-coin-turn { to{transform:rotateY(360deg)} }
@keyframes ritual-coin-insert { 45%{transform:rotateY(540deg) translateY(8px) scale(1.08)}100%{transform:rotateY(720deg) translateY(54px) scale(.25);opacity:0} }
@keyframes ritual-rune-spin { to{transform:rotate(360deg)} }
@keyframes ritual-rune-collapse { 55%{transform:rotate(520deg) scale(1.2);filter:brightness(1.8)}100%{transform:rotate(720deg) scale(.12);opacity:0} }

@media (max-width: 900px) {
  .user-stat-grid { grid-template-columns: repeat(2,1fr); }
  .chance-simulator-row { grid-template-columns:minmax(170px,1fr) 88px 88px 125px; }
  .card-binder-tabs { display:none; }
  .card-binder-shell { padding-right:18px !important; }
}
@media (max-width: 680px) {
  .user-area-overlay {
    padding:0;
    align-items:stretch;
  }
  .user-area-shell {
    width:100%;
    max-height:100vh;
    border-radius:0;
  }
  .user-area-identity {
    grid-template-columns:auto 1fr;
    padding:28px 22px 20px;
  }
  .user-area-avatar {
    width:58px;
    height:58px;
    font-size:21px;
  }
  .user-area-balance {
    grid-column:1 / -1;
    min-width:0;
    text-align:left;
  }
  .user-area-tabs,.user-area-overview,.chance-simulator {
    padding-left:22px;
    padding-right:22px;
  }
  .user-stat-grid,.user-area-ledger-grid { grid-template-columns:1fr; }
  .chance-simulator-header { display:block; }
  .chance-simulator-card-exclusion {
    display:inline-block;
    margin-top:12px;
  }
  .chance-simulator-controls { grid-template-columns:1fr; }
  .chance-simulator-table { overflow-x:auto; }
  .chance-simulator-row { min-width:650px; }
  .gift-wrap-theme-grid { grid-template-columns:1fr; }
  .gift-opening-overlay { padding:16px; }
  .gift-package-button {
    transform:scale(.86);
    margin:-10px auto -18px;
  }
  .gift-opening-actions {
    flex-direction:column;
    align-items:stretch;
  }
  .gift-opening-actions .btn { width:100%; }
  .card-binder-shell { padding:14px 10px 14px 48px !important; }
  .card-binder-cover-edge { width:40px; }
  .card-binder-rings { left:50%; }
  .purchase-receipt { padding:24px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gift-opening-atmosphere i,
  .gift-package-button,
  .ritual-focus > span {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}

.user-area-badges {
  min-height: 20px;
  align-items: center;
}
.user-area-badges .staff-player-mark.tester-player-image-mark {
  display: inline-flex !important;
  order: initial !important;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 14px;
  margin: 0 7px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
}
.user-area-badges .staff-player-mark.tester-player-image-mark img {
  display: block;
  width: auto;
  height: 14px;
  object-fit: contain;
}
.user-area-badges .vip-player-mark {
  display: inline-block;
  height: auto;
  margin: 0 !important;
  padding: 2px 6px;
  border: 0;
  border-radius: 10px;
  color: #172018;
  background: var(--gold-soft);
  box-shadow: none;
  font-size: 8px;
  font-weight: inherit;
  letter-spacing: .1em;
  line-height: normal;
  text-shadow: none;
}

.user-area-shell.is-vip {
  border-color: rgba(238,205,119,.56);
  background:
    radial-gradient(circle at 9% 7%, rgba(165,35,78,.22), transparent 29%),
    radial-gradient(circle at 90% 0, rgba(232,198,110,.14), transparent 32%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, #1a271e, #080d0a 52%, #211017);
  box-shadow: 0 36px 110px rgba(0,0,0,.76), 0 0 48px rgba(151,36,76,.13), inset 0 0 0 1px rgba(255,229,160,.035);
}
.user-area-shell.is-vip::before {
  border-color: rgba(238,205,119,.22);
  box-shadow: inset 0 0 26px rgba(150,35,75,.08);
}
.user-area-shell.is-vip .user-area-identity {
  border-bottom-color: rgba(238,205,119,.24);
  background:
    radial-gradient(circle at 14% 40%, rgba(174,40,82,.18), transparent 24%),
    linear-gradient(90deg, rgba(98,21,47,.22), transparent 48%, rgba(210,175,83,.08));
}
.user-area-shell.is-vip .user-area-avatar {
  border-color: rgba(247,219,143,.78);
  color: #ffe6a1;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.2), transparent 27%),
    linear-gradient(145deg, #8f264c, #32121f 50%, #142219 51%, #09100c);
  box-shadow: 0 0 0 6px rgba(149,36,76,.13), 0 0 0 7px rgba(238,205,119,.2), 0 14px 30px rgba(0,0,0,.42), inset 0 0 24px rgba(255,221,134,.1);
}
.user-area-shell.is-vip .user-area-identity h2,
.user-area-shell.is-vip .user-area-balance strong,
.user-area-shell.is-vip .user-stat-grid strong,
.user-area-shell.is-vip .user-area-ledger-grid h3 {
  color: #f3d895;
}
.user-area-shell.is-vip .user-area-tabs button.active {
  color: #f6d992;
  border-bottom-color: #c54973;
  text-shadow: 0 0 12px rgba(196,50,101,.34);
}
.user-area-shell.is-vip .user-stat-grid article,
.user-area-shell.is-vip .user-area-ledger-grid section {
  border-color: rgba(238,205,119,.18);
  background:
    radial-gradient(circle at 100% 0, rgba(160,34,76,.10), transparent 43%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.19));
}
.user-area-shell.is-vip .user-stat-grid article::after {
  color: rgba(197,54,105,.12);
}
.user-area-shell.is-vip .user-area-action {
  border-color: rgba(238,205,119,.16);
  background: linear-gradient(90deg, rgba(104,23,50,.13), rgba(255,255,255,.02));
}
.user-area-shell.is-vip .user-area-action:hover {
  border-color: rgba(239,206,121,.48);
  background: linear-gradient(90deg, rgba(145,31,69,.25), rgba(217,179,85,.07));
  box-shadow: 0 0 18px rgba(157,35,77,.1);
}
.user-area-shell.is-vip .user-area-action > span {
  color: #d65884;
  text-shadow: 0 0 12px rgba(197,57,107,.42);
}

.user-area-shell {
  width: min(1160px, 97vw);
  padding: 26px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.user-area-shell::before,
.user-area-shell::after {
  display: none;
}
.user-area-scroll {
  position: relative;
  z-index: 2;
  max-height: min(860px, 92vh);
  overflow: auto;
  border: 1px solid rgba(230,199,122,.38);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 30%),
    radial-gradient(circle at 100% 0, rgba(153,111,33,.16), transparent 34%),
    linear-gradient(180deg, rgba(21,31,24,.98), rgba(7,12,9,.985));
  box-shadow: 0 34px 100px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025);
}
.user-area-scroll::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(232,205,135,.14);
  border-radius: 27px;
}
.user-area-scroll::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border-radius: 22px;
  border: 1px solid rgba(255,235,191,.05);
  box-shadow: inset 0 0 0 1px rgba(60,43,14,.22), inset 0 0 42px rgba(214,177,87,.03);
}
.user-area-ornaments {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.user-ornament-ring {
  position: absolute;
  inset: 12px;
  border-radius: 44px;
  border: 1px solid rgba(231,198,120,.17);
  box-shadow: 0 0 0 1px rgba(73,50,16,.3), 0 0 46px rgba(208,168,76,.1);
}
.user-ornament-corner,
.user-ornament-side,
.user-ornament-crest {
  position: absolute;
  opacity: .92;
}
.user-ornament-corner {
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.24));
}
.user-ornament-corner::before,
.user-ornament-corner::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(232,203,135,.7);
  border-radius: 18px;
}
.user-ornament-corner::before {
  inset: 0;
}
.user-ornament-corner::after {
  inset: 11px;
  border-color: rgba(255,237,188,.44);
}
.user-ornament-corner.corner-tl {
  left: -10px;
  top: -10px;
  clip-path: inset(0 22px 22px 0);
}
.user-ornament-corner.corner-tr {
  right: -10px;
  top: -10px;
  clip-path: inset(0 0 22px 22px);
  transform: scaleX(-1);
}
.user-ornament-corner.corner-bl {
  left: -10px;
  bottom: -10px;
  clip-path: inset(22px 22px 0 0);
  transform: scaleY(-1);
}
.user-ornament-corner.corner-br {
  right: -10px;
  bottom: -10px;
  clip-path: inset(22px 0 0 22px);
  transform: scale(-1);
}
.user-ornament-crest {
  left: 50%;
  width: 206px;
  height: 38px;
  transform: translateX(-50%);
}
.user-ornament-crest::before,
.user-ornament-crest::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(230,198,122,.7), transparent);
}
.user-ornament-crest::before { left: 0; }
.user-ornament-crest::after { right: 0; }
.user-ornament-crest.crest-top { top: -10px; }
.user-ornament-crest.crest-bottom {
  bottom: -10px;
  transform: translateX(-50%) scaleY(-1);
}
.user-ornament-crest.crest-top,
.user-ornament-crest.crest-bottom {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,232,173,.92) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 50%, rgba(230,191,102,.4) 0 16px, transparent 17px),
    linear-gradient(90deg, transparent 0 23%, rgba(224,189,105,.95) 23% 24%, transparent 24% 76%, rgba(224,189,105,.95) 76% 77%, transparent 77% 100%);
  filter: drop-shadow(0 0 12px rgba(218,177,86,.18));
}
.user-ornament-side {
  top: 50%;
  width: 26px;
  height: 188px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent, rgba(230,198,122,.16) 18%, rgba(255,242,209,.34) 50%, rgba(230,198,122,.16) 82%, transparent),
    radial-gradient(circle at 50% 15%, rgba(255,232,171,.74) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(255,232,171,.64) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 85%, rgba(255,232,171,.74) 0 5px, transparent 6px);
  border: 1px solid rgba(228,196,119,.28);
  box-shadow: inset 0 0 14px rgba(255,247,227,.08), 0 6px 16px rgba(0,0,0,.22);
}
.user-ornament-side.side-left { left: -14px; }
.user-ornament-side.side-right { right: -14px; }
.user-area-identity {
  padding-top: 40px;
  border-bottom-color: rgba(225,195,119,.16);
  background:
    radial-gradient(circle at 11% 40%, rgba(255,231,181,.05), transparent 18%),
    linear-gradient(90deg, rgba(116,84,28,.13), transparent 48%, rgba(116,84,28,.08));
}
.user-area-balance {
  min-width: 230px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(231,196,113,.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.16));
  box-shadow: inset 0 0 22px rgba(255,244,212,.03);
}
.user-area-balance strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 4px;
}
.user-area-balance strong img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(233,189,81,.2));
  transform: translateY(1px);
}
.user-area-balance strong em {
  font-style: normal;
}
.user-stat-grid article,
.user-area-ledger-grid section {
  border-radius: 20px;
}
.user-stat-grid article {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.18)),
    radial-gradient(circle at 100% 0, rgba(214,177,87,.06), transparent 42%);
}
.user-area-ledger-grid section {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.16)),
    radial-gradient(circle at 100% 0, rgba(214,177,87,.05), transparent 42%);
}
.user-area-action {
  position: relative;
  overflow: hidden;
}
.user-area-action::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,204,123,.34), transparent);
  pointer-events: none;
}
.user-area-shell.is-vip .user-area-scroll {
  border-color: rgba(238,205,119,.56);
  background:
    radial-gradient(circle at 9% 7%, rgba(165,35,78,.22), transparent 29%),
    radial-gradient(circle at 90% 0, rgba(232,198,110,.14), transparent 32%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, #1a271e, #080d0a 52%, #211017);
  box-shadow: 0 36px 110px rgba(0,0,0,.76), 0 0 48px rgba(151,36,76,.13), inset 0 0 0 1px rgba(255,229,160,.035);
}
.user-area-shell.is-vip .user-area-scroll::before {
  border-color: rgba(238,205,119,.22);
  box-shadow: inset 0 0 26px rgba(150,35,75,.08);
}
.user-area-shell.is-vip .user-area-scroll::after {
  border-color: rgba(255,222,175,.08);
  box-shadow: inset 0 0 0 1px rgba(106,21,50,.3), inset 0 0 46px rgba(175,40,81,.06);
}
.user-area-shell.is-vip .user-ornament-ring {
  border-color: rgba(238,205,119,.22);
  box-shadow: 0 0 0 1px rgba(99,16,49,.32), 0 0 54px rgba(187,41,90,.11);
}
.user-area-shell.is-vip .user-ornament-corner::before {
  border-color: rgba(238,205,119,.78);
}
.user-area-shell.is-vip .user-ornament-corner::after {
  border-color: rgba(214,74,120,.38);
}
.user-area-shell.is-vip .user-ornament-crest.crest-top,
.user-area-shell.is-vip .user-ornament-crest.crest-bottom {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,232,173,.96) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 50%, rgba(212,74,118,.3) 0 17px, transparent 18px),
    linear-gradient(90deg, transparent 0 23%, rgba(238,205,119,.95) 23% 24%, transparent 24% 76%, rgba(238,205,119,.95) 76% 77%, transparent 77% 100%);
  filter: drop-shadow(0 0 14px rgba(203,63,111,.18));
}
.user-area-shell.is-vip .user-ornament-crest::before,
.user-area-shell.is-vip .user-ornament-crest::after {
  background: linear-gradient(90deg, transparent, rgba(238,205,119,.82), transparent);
}
.user-area-shell.is-vip .user-ornament-side {
  border-color: rgba(238,205,119,.34);
  background:
    linear-gradient(180deg, transparent, rgba(203,64,111,.18) 18%, rgba(255,241,205,.38) 50%, rgba(203,64,111,.18) 82%, transparent),
    radial-gradient(circle at 50% 15%, rgba(255,232,171,.78) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(214,74,119,.74) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 85%, rgba(255,232,171,.78) 0 5px, transparent 6px);
}
.user-area-shell.is-vip .user-area-balance {
  border-color: rgba(238,205,119,.2);
  background: linear-gradient(180deg, rgba(139,30,67,.14), rgba(0,0,0,.18));
  box-shadow: inset 0 0 28px rgba(232,198,110,.05);
}
.user-area-shell.is-vip .user-area-balance strong img {
  filter: drop-shadow(0 0 10px rgba(214,74,119,.28));
}
@media (max-width: 680px) {
  .user-area-shell {
    width: 100%;
    padding: 0;
  }
  .user-area-scroll {
    max-height: 100vh;
    border-radius: 0;
  }
  .user-area-scroll::before,
  .user-area-scroll::after,
  .user-area-ornaments {
    display: none;
  }
  .user-area-balance {
    min-width: 0;
    text-align: left;
  }
  .user-area-balance strong {
    justify-content: flex-start;
  }
}

.chance-simulator-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 13px;
  margin: 23px 0 17px;
}
.chance-simulator-coffer-card {
  --box-glow: #d6b45f;
  position: relative;
  isolation: isolate;
  min-height: 190px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 7px;
  padding: 17px 12px 13px;
  overflow: hidden;
  border: 1px solid rgba(223,191,111,.16);
  border-radius: 17px;
  color: rgba(245,238,218,.72);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--box-glow) 12%, transparent), transparent 48%),
    linear-gradient(155deg, rgba(255,255,255,.035), rgba(0,0,0,.22));
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
.chance-simulator-coffer-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--box-glow) 48%, rgba(238,205,119,.35));
  filter: brightness(1.08);
}
.chance-simulator-coffer-card.is-selected {
  transform: translateY(-5px) scale(1.025);
  border-color: color-mix(in srgb, var(--box-glow) 68%, white 12%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--box-glow) 25%, transparent), 0 18px 34px rgba(0,0,0,.32), 0 0 27px color-mix(in srgb, var(--box-glow) 22%, transparent);
}
.chance-simulator-coffer-card img {
  position: relative;
  z-index: 2;
  width: 126px;
  height: 125px;
  object-fit: contain;
  filter: drop-shadow(0 15px 16px rgba(0,0,0,.42)) drop-shadow(0 0 13px color-mix(in srgb, var(--box-glow) 25%, transparent));
  transition: transform .25s ease;
}
.chance-simulator-coffer-card.is-selected img { transform: scale(1.08); }
.chance-simulator-coffer-aura {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 43%;
  width: 150px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--box-glow) 32%, transparent), transparent 68%);
  filter: blur(12px);
  transform: translate(-50%,-50%);
}
.chance-simulator-coffer-name {
  position: relative;
  z-index: 3;
  max-width: 100%;
  overflow: hidden;
  color: #f0dfb1;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chance-simulator-vip-seal,
.chance-simulator-lock {
  position: absolute;
  z-index: 5;
  font-weight: 950;
  letter-spacing: .12em;
}
.chance-simulator-vip-seal {
  top: 9px;
  right: 9px;
  padding: 4px 7px;
  border: 1px solid rgba(246,218,139,.58);
  border-radius: 999px;
  color: #f8dd96;
  background: linear-gradient(135deg,#7c1e41,#1c1515 65%,#16231a);
  font-size: 8px;
}
.chance-simulator-lock {
  left: 50%;
  bottom: 42px;
  padding: 5px 8px;
  border: 1px solid rgba(244,210,126,.44);
  border-radius: 6px;
  color: #f5d88d;
  background: rgba(16,9,11,.88);
  font-size: 7px;
  transform: translateX(-50%) rotate(-2deg);
}
.chance-simulator-coffer-card.is-locked img {
  opacity: .36;
  filter: grayscale(.8) brightness(.7);
}
.chance-simulator-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(225,193,113,.18);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(210,170,73,.07), rgba(0,0,0,.14));
}
.chance-simulator-launch > div { min-width: 0; }
.chance-simulator-launch span,
.chance-simulator-launch strong,
.chance-simulator-launch small { display: block; }
.chance-simulator-launch span {
  color: rgba(240,231,203,.47);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}
.chance-simulator-launch strong {
  margin-top: 3px;
  overflow: hidden;
  color: #f0d792;
  font-family: Georgia, serif;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chance-simulator-launch small {
  margin-top: 4px;
  color: rgba(239,233,214,.48);
  font-size: 9px;
}
.chance-simulator-run { min-width: 205px; }
.reel-overlay.is-simulation-opening::before {
  content: "EDUCATIONAL SIMULATION · NO GIL OR REWARDS RECORDED";
  position: fixed;
  z-index: 80;
  left: 50%;
  top: 16px;
  padding: 7px 13px;
  border: 1px solid rgba(139,225,207,.4);
  border-radius: 999px;
  color: #baf0df;
  background: rgba(7,24,20,.82);
  box-shadow: 0 0 24px rgba(67,196,159,.16);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .14em;
  transform: translateX(-50%);
  pointer-events: none;
}
.reel-overlay.is-simulation-opening .result-card {
  box-shadow: 0 0 0 1px rgba(102,225,192,.13), 0 22px 48px rgba(0,0,0,.43);
}

.purchase-receipt-printer {
  position: relative;
  width: min(424px, 90vw);
  margin: 4px auto 15px;
  padding-top: 16px;
  isolation: isolate;
}
.purchase-receipt-slot-shell {
  position: relative;
  z-index: 2;
  width: calc(100% - 24px);
  height: 30px;
  margin: 0 auto -4px;
  padding: 8px 14px 0;
  border-radius: 16px 16px 8px 8px;
  border: 1px solid rgba(233,204,135,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(145deg, #2a322c, #111713 60%, #080b09);
  box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: visible;
}
.purchase-receipt-slot-shell::before,
.purchase-receipt-slot-shell::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 24px;
  height: 8px;
  border-top: 1px solid rgba(255,239,202,.1);
  border-radius: 999px;
  opacity: .72;
}
.purchase-receipt-slot-shell::before { left: 12px; }
.purchase-receipt-slot-shell::after { right: 12px; }
.purchase-receipt-slot {
  position: absolute;
  z-index: 1;
  left: 13px;
  right: 13px;
  top: 8px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #060807, #111513 58%, #060807);
  border: 1px solid rgba(0,0,0,.88);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.95), inset 0 -1px 2px rgba(255,255,255,.03), 0 2px 3px rgba(0,0,0,.28);
  overflow: hidden;
}
.purchase-receipt-slot::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(245,223,166,.18), transparent);
}
.purchase-receipt-slot i {
  display: none;
}
.purchase-receipt-feed {
  position: relative;
  z-index: 6;
  max-height: 0;
  overflow: hidden;
  margin-top: -7px;
  padding: 7px 12px 10px;
  animation: purchase-receipt-feed 2.7s .16s cubic-bezier(.2,.72,.24,1) forwards;
}
.purchase-receipt-feed::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 13px;
  z-index: 10;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 20%, transparent 20%),
    linear-gradient(180deg, #151a18, #090b0a 58%, #050706);
  border: 1px solid rgba(0,0,0,.86);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.05), inset 0 -2px 5px rgba(0,0,0,.8), 0 2px 3px rgba(0,0,0,.28);
  pointer-events: none;
}
.purchase-receipt-feed::after {
  content: "";
  position: absolute;
  left: 37px;
  right: 37px;
  top: 5px;
  height: 2px;
  z-index: 11;
  background: linear-gradient(90deg, transparent, rgba(245,223,166,.34), transparent);
  pointer-events: none;
}
.purchase-receipt-printer .purchase-receipt {
  position: relative;
  z-index: 7;
  width: 100%;
  margin: 0 auto 8px;
  opacity: .86;
  transform: translateY(-92%) rotate(-.35deg);
  animation: purchase-receipt-paper 2.7s .16s cubic-bezier(.2,.72,.24,1) forwards;
}
.purchase-dialog.is-success .purchase-success-actions {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  animation: purchase-actions-after-print .35s 2.9s ease forwards;
}
@keyframes purchase-receipt-feed { from{max-height:0}to{max-height:470px} }
@keyframes purchase-receipt-paper {
  0% {
    opacity:.68;
    transform:translateY(-92%) rotate(-.35deg);
  }
  16% { opacity:1; }
  42% { transform:translateY(-61%) rotate(.1deg); }
  70% { transform:translateY(-29%) rotate(-.22deg); }
  100% {
    opacity:1;
    transform:translateY(0) rotate(-.35deg);
  }
}
@keyframes purchase-actions-after-print {
  from {
    visibility:visible;
    pointer-events:none;
    opacity:0;
    transform:translateY(8px)
  }
  to {
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transform:none
  }
}

.gift-package-visual {
  --gift-paper: #17233c;
  --gift-paper-2: #080d18;
  --gift-ribbon: #d9e7f8;
  --gift-ink: #f4f8ff;
  position: relative;
  display: block;
  width: 190px;
  height: 170px;
  perspective: 700px;
  transform-style: preserve-3d;
}
.gift-package-visual.gift-wrap-royal {
  --gift-paper:#6f1725;
  --gift-paper-2:#25070c;
  --gift-ribbon:#e6b84b;
  --gift-ink:#fff0bd;
}
.gift-package-visual.gift-wrap-moogle {
  --gift-paper:#f0ddd0;
  --gift-paper-2:#b97f89;
  --gift-ribbon:#ed7898;
  --gift-ink:#5b2530;
}
.gift-package-visual.gift-wrap-crystal {
  --gift-paper:#432879;
  --gift-paper-2:#17102d;
  --gift-ribbon:#a8ecff;
  --gift-ink:#ecfaff;
}
.gift-package-visual.gift-wrap-starlight {
  --gift-paper:#1b2a49;
  --gift-paper-2:#070d19;
  --gift-ribbon:#dce9f8;
  --gift-ink:#f4f8ff;
}
.gift-package-visual-shadow {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 145px;
  height: 25px;
  border-radius: 50%;
  background: rgba(0,0,0,.52);
  filter: blur(9px);
  transform: translateX(-50%);
}
.gift-package-visual-box {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 130px;
  height: 92px;
  transform: translate(-50%,-50%) rotateX(-4deg) rotateY(-9deg);
  transform-style: preserve-3d;
}
.gift-package-visual-front,
.gift-package-visual-side,
.gift-package-visual-top {
  position: absolute;
  display: block;
  border: 1px solid color-mix(in srgb, var(--gift-ribbon) 34%, rgba(255,255,255,.12));
  background-color: var(--gift-paper);
  box-shadow: inset 0 0 22px rgba(255,255,255,.04);
}
.gift-package-visual-front {
  inset: 0;
  border-radius: 5px 5px 9px 9px;
  background-image:
    radial-gradient(circle at 18% 22%, color-mix(in srgb,var(--gift-ribbon) 22%,transparent) 0 1.2px, transparent 1.8px),
    linear-gradient(145deg, var(--gift-paper), var(--gift-paper-2));
  background-size: 22px 22px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -22px 28px rgba(0,0,0,.16), 0 15px 25px rgba(0,0,0,.32);
}
.gift-wrap-royal .gift-package-visual-front {
  background-image: repeating-linear-gradient(45deg, transparent 0 18px, rgba(238,190,77,.10) 18px 20px), linear-gradient(145deg,var(--gift-paper),var(--gift-paper-2));
}
.gift-wrap-moogle .gift-package-visual-front {
  background-image: radial-gradient(circle, rgba(255,255,255,.22) 0 3px, transparent 3.5px), linear-gradient(145deg,var(--gift-paper),var(--gift-paper-2));
  background-size: 25px 25px, auto;
}
.gift-wrap-crystal .gift-package-visual-front {
  background-image: linear-gradient(45deg, transparent 43%, rgba(165,235,255,.12) 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(165,235,255,.08) 44% 56%, transparent 57%), linear-gradient(145deg,var(--gift-paper),var(--gift-paper-2));
  background-size: 28px 28px,28px 28px,auto;
}
.gift-package-visual-side {
  left: 100%;
  top: 8px;
  width: 25px;
  height: 84px;
  border-radius: 0 5px 8px 0;
  background: linear-gradient(90deg, var(--gift-paper), color-mix(in srgb,var(--gift-paper-2) 85%,black));
  transform: skewY(-24deg);
  transform-origin: left top;
}
.gift-package-visual-top {
  left: 0;
  right: -1px;
  top: -22px;
  height: 31px;
  border-radius: 8px 7px 3px 3px;
  background: linear-gradient(145deg, color-mix(in srgb,var(--gift-paper) 88%,white 8%), var(--gift-paper-2));
  box-shadow: 0 8px 13px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.09);
  transform: skewX(-38deg);
  transform-origin: left bottom;
}
.gift-package-visual-band {
  position: absolute;
  z-index: 4;
  display: block;
  background: linear-gradient(90deg, color-mix(in srgb,var(--gift-ribbon) 78%,white), var(--gift-ribbon), color-mix(in srgb,var(--gift-ribbon) 72%,black));
  box-shadow: 0 0 13px color-mix(in srgb,var(--gift-ribbon) 32%,transparent);
}
.gift-package-visual-band.band-vertical {
  left: 58px;
  top: -21px;
  width: 15px;
  height: 113px;
  transform: skewX(-4deg);
}
.gift-package-visual-band.band-horizontal {
  left: 0;
  right: 0;
  top: 38px;
  height: 14px;
}
.gift-package-visual-emblem {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 45%;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--gift-ribbon) 62%,white);
  border-radius: 50%;
  color: var(--gift-paper-2);
  background: var(--gift-ribbon);
  box-shadow: 0 0 18px color-mix(in srgb,var(--gift-ribbon) 45%,transparent);
  font-size: 16px;
  font-style: normal;
  transform: translate(-50%,-50%);
}
.gift-package-visual-bow {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 26px;
  width: 108px;
  height: 58px;
  transform: translateX(-50%) rotate(-2deg);
  filter: drop-shadow(0 7px 7px rgba(0,0,0,.28));
}
.gift-package-visual-bow i {
  position: absolute;
  top: 11px;
  width: 51px;
  height: 34px;
  border: 11px solid var(--gift-ribbon);
  border-radius: 58% 42% 53% 47%;
  box-shadow: inset 0 0 9px rgba(255,255,255,.23), 0 0 12px color-mix(in srgb,var(--gift-ribbon) 25%,transparent);
}
.gift-package-visual-bow i:first-child {
  left: 4px;
  transform: rotate(18deg);
}
.gift-package-visual-bow i:nth-child(2) {
  right: 4px;
  transform: rotate(-18deg) scaleX(-1);
}
.gift-package-visual-bow b {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 23px;
  width: 28px;
  height: 25px;
  border-radius: 45%;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb,var(--gift-ribbon) 80%,white), var(--gift-ribbon) 56%, color-mix(in srgb,var(--gift-ribbon) 68%,black));
  box-shadow: 0 0 14px color-mix(in srgb,var(--gift-ribbon) 35%,transparent);
  transform: translate(-50%,-50%);
}
.gift-package-visual-spark {
  position: absolute;
  color: var(--gift-ribbon);
  font-size: 13px;
  text-shadow: 0 0 9px var(--gift-ribbon);
  animation: gift-package-spark 2.2s ease-in-out infinite;
}
.gift-package-visual-spark.spark-a {
  left: 12px;
  top: 43px;
}
.gift-package-visual-spark.spark-b {
  right: 7px;
  top: 76px;
  animation-delay: -1.1s;
}
@keyframes gift-package-spark { 0%,100%{opacity:.22;transform:scale(.72) rotate(0)}50%{opacity:1;transform:scale(1.24) rotate(36deg)} }

.gift-compose-visual {
  height: 205px !important;
  margin-bottom: 8px !important;
}
.gift-compose-product-preview {
  position: relative;
  z-index: 3;
  width: min(470px, 100%);
  height: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}
.gift-compose-coffer-preview,
.gift-compose-package-preview {
  position: relative;
  height: 190px;
  display: grid;
  place-items: center;
}
.gift-compose-coffer-preview::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 31px;
  bottom: 31px;
  width: 1px;
  background: linear-gradient(transparent, rgba(231,201,129,.22), transparent);
}
.gift-compose-coffer-preview > img {
  position: relative;
  z-index: 2;
  width: 178px !important;
  height: 150px !important;
  object-fit: contain;
  filter: drop-shadow(0 18px 23px rgba(0,0,0,.46));
}
.gift-compose-coffer-preview .gift-compose-glow {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.gift-compose-product-preview small {
  position: absolute;
  bottom: 4px;
  color: rgba(242,233,208,.42);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.gift-compose-package-preview .gift-package-visual { transform: scale(.9); }
.gift-wrap-paper { display: none !important; }

.gift-notification {
  border-color: rgba(255,172,190,.28) !important;
  background: linear-gradient(145deg,rgba(38,22,27,.96),rgba(11,17,13,.96)) !important;
}
.gift-notification-package {
  width: 58px;
  height: 58px;
  transform: scale(.37);
  transform-origin: center;
}
.gift-notification-package .gift-package-visual-box { top: 63%; }
.gift-notification-package .gift-package-visual-bow { top: 25px; }
.gift-detail-package-stage { height: 220px !important; }
.gift-detail-package { transform: scale(1.08); }

.gift-opening-package-scene {
  position: relative;
  width: 390px;
  height: 330px;
  margin: -3px auto 0;
  perspective: 1000px;
}
.gift-opening-package-light {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 280px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb,var(--gift-ribbon) 34%,transparent), transparent 66%);
  filter: blur(19px);
  transform: translate(-50%,-50%);
  opacity: .45;
}
.gift-opening-package-scene .is-opening-package {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 300px;
  height: 270px;
  transform: translate(-50%,-50%) scale(1.28);
  transform-origin: center;
  animation: gift-package-float 2.5s ease-in-out infinite;
}
.gift-opening-package-scene .gift-package-visual-box {
  width: 142px;
  height: 102px;
}
.gift-opening-package-scene .gift-package-visual-side { height: 94px; }
.gift-opening-package-scene .gift-package-visual-band.band-vertical {
  left: 63px;
  height: 123px;
}
.gift-opening-package-scene .gift-package-visual-band.band-horizontal { top: 43px; }
.gift-opening-package-scene .gift-package-visual-bow { top: 41px; }
.gift-ribbon-interaction,
.gift-lid-interaction {
  position: absolute;
  z-index: 30;
  left: 50%;
  border: 1px dashed color-mix(in srgb,var(--gift-ribbon) 56%,transparent);
  color: var(--gift-ink);
  background: rgba(4,8,7,.48);
  box-shadow: 0 0 18px color-mix(in srgb,var(--gift-ribbon) 17%,transparent);
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.gift-ribbon-interaction span,
.gift-lid-interaction span {
  position: absolute;
  left: 50%;
  top: calc(100% + 9px);
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--gift-ink);
  background: rgba(3,7,6,.82);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.gift-ribbon-interaction {
  top: 65px;
  width: 132px;
  height: 82px;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: gift-interaction-pulse 1.35s ease-in-out infinite;
}
.gift-lid-interaction {
  top: 128px;
  width: 205px;
  height: 66px;
  border-radius: 48%;
  transform: translateX(-50%) rotate(-4deg);
  animation: gift-interaction-pulse 1.35s ease-in-out infinite;
}
.gift-ribbon-interaction:disabled,
.gift-lid-interaction:disabled {
  opacity: 0;
  pointer-events: none;
}
.gift-opening-overlay.is-ribbon-removed .gift-package-visual-bow {
  animation: gift-bow-pull-away .72s cubic-bezier(.2,.8,.25,1) forwards;
}
.gift-opening-overlay.is-ribbon-removed .gift-package-visual-band {
  animation: gift-band-release .7s ease forwards;
}
.gift-opening-overlay.is-ribbon-removed .is-opening-package { animation: gift-package-ready 1.6s ease-in-out infinite; }
.gift-opening-overlay.is-opening .gift-package-visual-bow,
.gift-opening-overlay.is-opening .gift-package-visual-band { opacity: 0; }
.gift-opening-overlay.is-opening .gift-package-visual-top {
  animation: gift-real-lid-open 1.05s cubic-bezier(.16,.84,.2,1) forwards;
}
.gift-opening-overlay.is-opening .gift-package-visual-front,
.gift-opening-overlay.is-opening .gift-package-visual-side {
  animation: gift-box-settle-open 1.65s .2s ease forwards;
}
.gift-opening-overlay.is-opening .gift-package-particles i {
  animation: gift-particle-burst 1.3s calc(var(--gift-particle-index) * 22ms) ease-out forwards;
}
.gift-opening-rising-coffer {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 58%;
  width: 235px;
  height: 190px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, 40px) scale(.42);
  pointer-events: none;
}
.gift-opening-rising-coffer img {
  position: relative;
  z-index: 2;
  max-width: 215px;
  max-height: 175px;
  object-fit: contain;
  filter: drop-shadow(0 18px 27px rgba(0,0,0,.48)) drop-shadow(0 0 18px color-mix(in srgb,var(--gift-ribbon) 34%,transparent));
}
.gift-opening-rising-coffer > span {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 8px;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gift-ribbon);
  border-radius: 50%;
  color: var(--gift-ink);
  background: rgba(4,7,6,.84);
  font-weight: 900;
}
.gift-opening-overlay.is-opening .gift-opening-rising-coffer {
  animation: gift-coffer-rise 1.65s .18s cubic-bezier(.14,.83,.2,1) forwards;
}
.gift-opening-status {
  min-height: 22px;
  margin: -9px 0 0;
  color: var(--gift-ribbon);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
@keyframes gift-interaction-pulse { 50%{filter:brightness(1.45);box-shadow:0 0 28px color-mix(in srgb,var(--gift-ribbon) 32%,transparent)} }
@keyframes gift-bow-pull-away { 45%{transform:translateX(-50%) scale(1.15) rotate(8deg)}100%{transform:translate(-110px,-90px) scale(.58) rotate(-34deg);opacity:0} }
@keyframes gift-band-release { to{opacity:0;transform:scale(1.5)} }
@keyframes gift-package-ready { 0%,100%{transform:translate(-50%,-50%) scale(1.28) rotate(-1deg)}50%{transform:translate(-50%,-54%) scale(1.3) rotate(1deg)} }
@keyframes gift-real-lid-open { 0%{transform:skewX(-38deg) rotateX(0)}100%{transform:translate(-5px,-54px) skewX(-18deg) rotateX(72deg) rotateZ(-8deg);opacity:.94} }
@keyframes gift-box-settle-open { 70%{filter:brightness(1.35)}100%{opacity:.18;transform:translateY(18px) scale(.9);filter:brightness(1.8)} }
@keyframes gift-coffer-rise { 0%{opacity:0;transform:translate(-50%,48px) scale(.38)}32%{opacity:1}70%{transform:translate(-50%,-82px) scale(1.03)}100%{opacity:1;transform:translate(-50%,-104px) scale(1.1)} }

.coffer-open-ritual {
  --ritual-progress: 0;
  display: grid;
  justify-items: center;
  width: min(920px, 96vw);
  margin: 0 auto;
}
.ritual-interaction-console {
  position: relative;
  width: min(620px, 88vw);
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) minmax(185px, .75fr);
  align-items: center;
  gap: 18px;
  padding: 13px 18px 14px;
  border: 1px solid color-mix(in srgb,var(--box-glow) 30%,rgba(238,205,119,.2));
  border-radius: 24px;
  background:
    radial-gradient(circle at 28% 46%, color-mix(in srgb,var(--box-glow) 14%,transparent), transparent 37%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 11px),
    linear-gradient(145deg, rgba(24,33,27,.96), rgba(5,9,7,.98));
  box-shadow: 0 24px 46px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.025), 0 0 28px color-mix(in srgb,var(--box-glow) 8%,transparent);
}
.ritual-interaction-console::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb,var(--box-glow) 11%,transparent);
  border-radius: 18px;
}
.ritual-artifact-stage {
  position: relative;
  isolation: isolate;
  height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  perspective: 900px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--box-glow) 13%,transparent), transparent 59%),
    rgba(0,0,0,.12);
  box-shadow: inset 0 0 34px rgba(0,0,0,.24);
}
.ritual-artifact-backdrop,
.ritual-artifact-backdrop i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ritual-artifact-backdrop i:first-child {
  inset: 25px 55px;
  border: 1px solid color-mix(in srgb,var(--box-glow) 20%,transparent);
  border-radius: 50%;
  animation: ritual-console-orbit 8s linear infinite;
}
.ritual-artifact-backdrop i:nth-child(2) {
  inset: 42px 72px;
  border: 1px dashed color-mix(in srgb,var(--box-glow) 24%,transparent);
  border-radius: 50%;
  animation: ritual-console-orbit 6s linear infinite reverse;
}
.ritual-artifact-backdrop i:nth-child(3) {
  left: 50%;
  top: 50%;
  width: 168px;
  height: 1px;
  background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--box-glow) 35%,transparent),transparent);
  transform: translate(-50%,-50%);
}
.ritual-drag-control {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.ritual-drag-control:active { cursor: grabbing; }
.ritual-instruction {
  position: relative;
  z-index: 3;
  padding-right: 5px;
  text-align: left;
}
.ritual-instruction > span {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb,var(--box-glow) 35%,transparent);
  border-radius: 999px;
  color: color-mix(in srgb,var(--box-glow) 72%,white 22%);
  background: color-mix(in srgb,var(--box-glow) 7%,rgba(0,0,0,.15));
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .16em;
}
.ritual-instruction p {
  margin: 13px 0 15px;
  color: rgba(244,238,220,.65);
  font-size: 11px;
  line-height: 1.55;
}
.ritual-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
}
.ritual-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,color-mix(in srgb,var(--box-glow) 60%,#fff 8%),color-mix(in srgb,var(--box-glow) 82%,white 22%));
  box-shadow: 0 0 12px var(--box-glow);
  transition: width .08s linear;
}
.ritual-completion-flash {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.ritual-completion-flash > span {
  color: white;
  font-size: 52px;
  text-shadow: 0 0 17px white,0 0 42px var(--box-glow);
}
.ritual-completion-flash i {
  position:absolute;
  width:180px;
  height:180px;
  border:2px solid var(--box-glow);
  border-radius:50%;
}
.ritual-completion-flash i:last-child {
  width:120px;
  height:120px;
  border-style:dashed;
}
.coffer-open-ritual.is-complete .ritual-completion-flash { animation: ritual-completion-burst .72s ease both; }

.ritual-wax-envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 205px;
  height: 118px;
  border: 1px solid rgba(140,105,61,.58);
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(90,60,28,.025) 0 1px, transparent 1px 4px),
    linear-gradient(145deg,#ead8ae,#aa8958);
  box-shadow: 0 20px 30px rgba(0,0,0,.35), inset 0 0 18px rgba(72,42,14,.18), inset 0 0 0 3px rgba(255,246,213,.12);
  transform: translate(-50%,-50%) rotateX(4deg) rotateZ(-1deg);
}
.ritual-wax-envelope::before,
.ritual-wax-envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0,50% 54%,100% 0);
  background: linear-gradient(180deg,#f0deb5,#ad8c58);
  filter: drop-shadow(0 3px 2px rgba(70,41,18,.24));
}
.ritual-wax-envelope::after {
  clip-path: polygon(0 100%,50% 46%,100% 100%);
  opacity:.66;
}
.ritual-wax-envelope i,
.ritual-wax-envelope em {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 17px;
  background: linear-gradient(90deg,#5e1318,#a53335,#551016);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(92,17,21,.3);
}
.ritual-wax-envelope em {
  left:0;
  right:0;
  top:50%;
  width:auto;
  height:15px;
  transform:translateY(-50%);
}
.ritual-wax-envelope b {
  position:absolute;
  inset:8px;
  border:1px dashed rgba(85,55,24,.25);
  border-radius:2px;
}
.ritual-wax-seal-3d {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 51%;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 47% 53% 49% 51%;
  color: #f4d291;
  background:
    radial-gradient(circle at 33% 27%,#d05a4d,#8d2727 48%,#4e1116 75%),
    #6e1b20;
  box-shadow: 0 10px 18px rgba(0,0,0,.38), 0 0 0 6px rgba(73,12,16,.28), 0 0 27px rgba(190,54,48,.43), inset 0 0 0 3px rgba(255,211,148,.17), inset -10px -13px 18px rgba(43,4,9,.28);
  transform: translate(-50%,calc(-50% + var(--ritual-progress) * 100px)) rotate(calc(var(--ritual-progress) * 14deg));
  transition: transform .08s linear, opacity .25s ease, filter .25s ease;
}
.ritual-wax-seal-3d::before,
.ritual-wax-seal-3d::after {
  content:"";
  position:absolute;
  width:18px;
  height:15px;
  border-radius:50%;
  background:#751d22;
}
.ritual-wax-seal-3d::before {
  left:-6px;
  bottom:9px;
  transform:rotate(25deg);
}
.ritual-wax-seal-3d::after {
  right:-5px;
  top:11px;
  transform:rotate(-19deg);
}
.ritual-wax-seal-3d b {
  position:relative;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:2px solid rgba(250,221,161,.58);
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:26px;
  text-shadow:0 2px 4px rgba(0,0,0,.65);
}
.ritual-wax-seal-3d i,
.ritual-wax-seal-3d em,
.ritual-wax-seal-3d strong {
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:70px;
  background:linear-gradient(transparent,#f7d18c 43% 57%,transparent);
  opacity:calc(var(--ritual-progress) * 1.2);
}
.ritual-wax-seal-3d i { transform:translate(-50%,-50%) rotate(28deg); }
.ritual-wax-seal-3d em { transform:translate(-50%,-50%) rotate(-44deg); }
.ritual-wax-seal-3d strong {
  height:56px;
  transform:translate(-50%,-50%) rotate(82deg);
}
.coffer-open-ritual.is-complete .ritual-wax-seal-3d { animation: ritual-wax-physical-break .66s ease forwards; }

.ritual-crystal-artifact {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 31px;
  width: 82px;
  height: 105px;
  filter: drop-shadow(0 0 12px rgba(157,239,255,.82)) drop-shadow(0 0 28px rgba(92,115,255,.5));
  transform: translateX(-50%) translateY(calc(var(--ritual-progress) * 70px)) rotateZ(calc(var(--ritual-progress) * 8deg)) scale(calc(1 - var(--ritual-progress) * .13));
  transition: transform .08s linear, filter .2s ease;
}
.ritual-crystal-artifact::before {
  content:"";
  position:absolute;
  inset:0 10px 12px;
  clip-path:polygon(50% 0,92% 25%,100% 62%,71% 100%,29% 100%,0 62%,8% 25%);
  background:
    linear-gradient(116deg,rgba(255,255,255,.9) 0 13%,transparent 14% 34%,rgba(255,255,255,.38) 35% 42%,transparent 43%),
    linear-gradient(145deg,#effeff,#76e6ff 30%,#665eff 61%,#e9cfff 87%);
  box-shadow: inset 0 0 22px rgba(255,255,255,.72);
}
.ritual-crystal-artifact::after {
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  width:2px;
  height:68px;
  background:linear-gradient(transparent,#fff,transparent);
  box-shadow:18px 5px 0 rgba(255,255,255,.34),-18px 12px 0 rgba(255,255,255,.24);
  transform:translateX(-50%) rotate(17deg);
}
.ritual-crystal-artifact b {
  position:absolute;
  z-index:3;
  left:50%;
  top:42%;
  color:#fff;
  font-size:33px;
  text-shadow:0 0 10px white,0 0 24px #6cdfff;
  transform:translate(-50%,-50%);
}
.ritual-crystal-artifact i {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:2px;
  width:12px;
  height:28px;
  background:linear-gradient(90deg,#3c47a2,#a0f0ff,#4c3ca9);
  transform:translateX(-50%);
}
.ritual-crystal-artifact i:nth-child(2) {
  width:34px;
  height:8px;
  bottom:1px;
}
.ritual-crystal-artifact em {
  position:absolute;
  inset:-9px;
  border:1px solid rgba(162,237,255,.33);
  border-radius:50%;
  animation:ritual-crystal-halo 2.2s linear infinite;
}
.ritual-crystal-socket {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:18px;
  width:116px;
  height:48px;
  border:2px solid rgba(146,228,255,.47);
  border-radius:50%;
  background:radial-gradient(ellipse,#0a1630 0 28%,#13234d 29% 44%,#071020 45% 67%,transparent 68%);
  box-shadow:0 0 26px rgba(93,212,255,.38),inset 0 0 20px rgba(69,90,224,.42);
  transform:translateX(-50%) rotateX(64deg);
}
.ritual-crystal-socket i {
  position:absolute;
  inset:-8px;
  border:1px dashed rgba(162,231,255,.45);
  border-radius:50%;
  animation:ritual-console-orbit 3s linear infinite;
}
.ritual-crystal-socket b {
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:12px;
  border-radius:50%;
  background:#b7f5ff;
  filter:blur(7px);
  transform:translate(-50%,-50%);
  opacity:calc(.2 + var(--ritual-progress) * .8);
}
.coffer-open-ritual.is-complete .ritual-crystal-artifact { animation: ritual-crystal-seat .7s ease forwards; }

.ritual-chain-control {
  display:flex;
  align-items:center;
  justify-content:center;
}
.ritual-chain-half {
  position:absolute;
  z-index:7;
  top:50%;
  display:flex;
  align-items:center;
  gap:-2px;
  width:150px;
  transform:translateY(-50%);
  transition:transform .08s linear,opacity .25s ease;
}
.ritual-chain-half.is-left {
  right:50%;
  justify-content:flex-end;
  transform:translateY(-50%) translateX(calc(var(--ritual-progress) * -92px)) rotate(calc(var(--ritual-progress) * -12deg));
}
.ritual-chain-half.is-right {
  left:50%;
  transform:translateY(-50%) translateX(calc(var(--ritual-progress) * 92px)) rotate(calc(var(--ritual-progress) * 12deg));
}
.ritual-chain-half i {
  flex:0 0 auto;
  width:33px;
  height:22px;
  margin-inline:-4px;
  border:5px solid #777970;
  border-left-color:#c3c1b4;
  border-right-color:#363a35;
  border-radius:50%;
  box-shadow:0 4px 6px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,255,255,.2),0 0 7px rgba(194,190,173,.13);
}
.ritual-chain-half i:nth-child(even) { transform:rotate(90deg) scale(.85); }
.ritual-chain-lock-3d {
  position:absolute;
  z-index:12;
  left:50%;
  top:50%;
  width:66px;
  height:70px;
  display:grid;
  place-items:center;
  border:3px solid #b89a58;
  border-radius:11px 11px 18px 18px;
  color:#efd486;
  background:linear-gradient(145deg,#5e5847,#242721 56%,#10130f);
  box-shadow:0 14px 20px rgba(0,0,0,.46),0 0 24px rgba(210,171,80,.26),inset 0 0 0 2px rgba(255,228,159,.08),inset -10px -12px 18px rgba(0,0,0,.3);
  transform:translate(-50%,-50%) rotate(calc(var(--ritual-progress) * 8deg)) scale(calc(1 + var(--ritual-progress) * .09));
}
.ritual-chain-lock-3d::before {
  content:"";
  position:absolute;
  left:50%;
  top:-38px;
  width:44px;
  height:45px;
  border:8px solid #8e835f;
  border-bottom:0;
  border-radius:50% 50% 0 0;
  transform:translateX(-50%);
  box-shadow:inset 0 0 0 2px #33372f;
}
.ritual-chain-lock-3d b {
  font-size:22px;
  text-shadow:0 0 10px #d7b45c;
}
.ritual-chain-lock-3d i {
  position:absolute;
  left:50%;
  top:53%;
  width:9px;
  height:18px;
  border-radius:50% 50% 3px 3px;
  background:#080b08;
  transform:translate(-50%,-30%);
}
.ritual-chain-lock-3d em {
  position:absolute;
  inset:-14px;
  border:1px dashed rgba(220,188,113,.28);
  transform:rotate(45deg);
  animation:ritual-console-orbit 4s linear infinite;
}
.ritual-chain-grip {
  position:absolute;
  z-index:18;
  left:50%;
  bottom:10px;
  width:110px;
  height:22px;
  border:1px solid rgba(224,195,124,.22);
  border-radius:999px;
  background:rgba(0,0,0,.38);
  transform:translateX(-50%);
}
.ritual-chain-grip i {
  position:absolute;
  left:7px;
  right:7px;
  top:50%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#b49b60,var(--box-glow),#b49b60);
  transform:translateY(-50%);
}
.ritual-chain-grip b {
  position:absolute;
  left:calc(8px + (100% - 38px) * var(--ritual-progress));
  top:50%;
  width:30px;
  height:30px;
  border:2px solid #d5b96f;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2dd9b,#72551d);
  box-shadow:0 0 13px rgba(224,188,92,.35);
  transform:translateY(-50%);
}
.coffer-open-ritual.is-complete .ritual-chain-lock-3d { animation:ritual-lock-shatter .6s ease forwards; }

.ritual-vault-keyhole {
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:155px;
  height:155px;
  border:8px double #806327;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#080a07 0 19%,transparent 20%),
    radial-gradient(circle,#30342c 0 54%,#11150f 55% 72%,#655020 73% 77%,#171b15 78%);
  box-shadow:0 18px 25px rgba(0,0,0,.45),inset 0 0 28px rgba(0,0,0,.62),0 0 20px rgba(232,185,62,.2);
  transform:translate(-50%,-50%) rotateX(4deg);
}
.ritual-vault-keyhole::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:50px;
  border-radius:50% 50% 5px 5px;
  background:#020302;
  transform:translate(-50%,-2%);
  box-shadow:0 0 0 2px rgba(235,190,74,.18);
}
.ritual-vault-keyhole i {
  position:absolute;
  inset:16px;
  border:1px dashed rgba(237,193,73,.28);
  border-radius:50%;
}
.ritual-vault-keyhole b {
  position:absolute;
  inset:31px;
  border:1px solid rgba(237,193,73,.13);
  border-radius:50%;
}
.ritual-coin-key-3d {
  position:absolute;
  z-index:12;
  left:50%;
  top:49%;
  width:87px;
  height:121px;
  transform:translate(-50%,-50%) rotateZ(calc(var(--ritual-progress) * 360deg)) translateY(calc(var(--ritual-progress) * 5px));
  transform-origin:50% 40px;
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.42)) drop-shadow(0 0 15px rgba(245,193,54,.42));
  transition:transform .08s linear;
}
.ritual-coin-key-3d::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:76px;
  height:76px;
  border:7px double #8a5c14;
  border-radius:50%;
  background:
    radial-gradient(circle at 33% 28%,#fff1a8,#e6af38 39%,#a66516 69%,#f1ca59 73%,#7d4e11);
  box-shadow:inset 0 0 0 4px rgba(255,239,157,.32),inset -10px -10px 16px rgba(98,55,6,.3),0 0 22px rgba(246,197,67,.55);
  transform:translateX(-50%);
}
.ritual-coin-key-3d b {
  position:absolute;
  z-index:3;
  left:50%;
  top:38px;
  color:#6b430d;
  font-family:Georgia,serif;
  font-size:30px;
  text-shadow:0 1px 0 #ffe795;
  transform:translate(-50%,-50%);
}
.ritual-coin-key-3d i {
  position:absolute;
  left:50%;
  top:74px;
  width:15px;
  height:42px;
  background:linear-gradient(90deg,#81510f,#f0c555 43%,#9b691b);
  transform:translateX(-50%);
}
.ritual-coin-key-3d i::before,.ritual-coin-key-3d i::after {
  content:"";
  position:absolute;
  right:-17px;
  width:21px;
  height:9px;
  background:linear-gradient(#e8bd50,#966416);
}
.ritual-coin-key-3d i::before{top:17px}.ritual-coin-key-3d i::after{top:30px;width:14px}
.ritual-coin-key-3d em {
  position:absolute;
  inset:-8px 0 32px;
  border:1px dashed rgba(244,202,85,.44);
  border-radius:50%;
}
.ritual-coin-key-3d strong {
  position:absolute;
  left:50%;
  top:38px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff3a3;
  filter:blur(4px);
  transform:translate(-50%,-50%);
  opacity:calc(.12 + var(--ritual-progress) * .75);
}
.ritual-turn-track {
  position:absolute;
  z-index:15;
  left:50%;
  bottom:10px;
  width:170px;
  height:22px;
  border:1px solid rgba(239,194,72,.24);
  border-radius:999px;
  background:rgba(0,0,0,.35);
  transform:translateX(-50%);
}
.ritual-turn-track i {
  position:absolute;
  left:8px;
  top:50%;
  width:calc((100% - 16px) * var(--ritual-progress));
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#9b681a,#ffe27f);
  box-shadow:0 0 9px #edbd43;
  transform:translateY(-50%);
}
.coffer-open-ritual.is-complete .ritual-coin-key-3d { animation:ritual-coin-key-insert .7s ease forwards; }

.ritual-rune-console {
  position:relative;
  z-index:8;
  width:190px;
  height:170px;
}
.ritual-rune-core {
  position:absolute;
  left:50%;
  top:50%;
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  border:2px solid rgba(111,255,201,.5);
  border-radius:50%;
  color:#d7fff0;
  background:radial-gradient(circle,rgba(45,197,143,.17),rgba(4,13,10,.78) 63%);
  box-shadow:0 0 31px rgba(56,226,163,.34),inset 0 0 27px rgba(65,221,169,.13);
  transform:translate(-50%,-50%);
}
.ritual-rune-core::before,.ritual-rune-core::after {
  content:"";
  position:absolute;
  inset:11px;
  border:1px dashed rgba(120,255,208,.48);
  border-radius:50%;
  animation:ritual-console-orbit 5s linear infinite;
}
.ritual-rune-core::after {
  inset:25px;
  border-style:solid;
  border-radius:9px;
  animation-direction:reverse;
}
.ritual-rune-core b {
  position:relative;
  z-index:2;
  font-size:34px;
  text-shadow:0 0 13px #7affcc;
}
.ritual-rune-core i {
  position:absolute;
  inset:-10px;
  border:1px solid rgba(111,255,201,.18);
  border-radius:50%;
}
.ritual-rune-core em {
  position:absolute;
  left:50%;
  top:50%;
  width:31px;
  height:31px;
  border-radius:50%;
  background:#75ffc7;
  filter:blur(17px);
  transform:translate(-50%,-50%);
  opacity:calc(.1 + var(--ritual-progress) * .55);
}
.ritual-rune-button {
  position:absolute;
  z-index:12;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:2px solid rgba(111,255,201,.42);
  border-radius:50%;
  color:#a9f8d7;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.13),rgba(25,91,68,.86) 42%,#071712 75%);
  box-shadow:0 8px 13px rgba(0,0,0,.38),0 0 15px rgba(68,220,165,.2),inset 0 0 13px rgba(82,229,175,.11);
  font-size:23px;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.ritual-rune-button.rune-1 {
  left:50%;
  top:0;
  transform:translateX(-50%);
}
.ritual-rune-button.rune-2 {
  right:0;
  bottom:7px;
}
.ritual-rune-button.rune-3 {
  left:0;
  bottom:7px;
}
.ritual-rune-button.is-next { animation:ritual-rune-next 1.15s ease-in-out infinite; }
.ritual-rune-button.is-awake {
  color:#07140f;
  background:radial-gradient(circle,#e7fff5,#77ffc9 55%,#35b87f);
  box-shadow:0 0 27px rgba(99,255,197,.78);
  transform:scale(1.08);
}
.ritual-rune-button.rune-1.is-awake { transform:translateX(-50%) scale(1.08); }
.coffer-open-ritual.is-complete .ritual-rune-console { animation:ritual-rune-console-complete .72s ease forwards; }

.coffer-open-ritual .unlock-coffer-line {
  --unlock-unit-size: 220px;
  --unlock-coffer-size: 178px;
  --unlock-halo-size: 178px;
  margin-top: -13px;
}
.coffer-open-ritual .unlock-coffer-line.count-2 {
  --unlock-unit-size:190px;
  --unlock-coffer-size:152px;
  --unlock-halo-size:156px;
}
.coffer-open-ritual .unlock-coffer-line.count-3 {
  --unlock-unit-size:166px;
  --unlock-coffer-size:132px;
  --unlock-halo-size:138px;
}
.coffer-open-ritual .unlock-coffer-line.count-4 {
  --unlock-unit-size:145px;
  --unlock-coffer-size:112px;
  --unlock-halo-size:120px;
}
.coffer-open-ritual .ritual-coffer-unit { height:215px; }
.coffer-open-ritual .ritual-coffer-unit .unlock-coffer-wrap { height:185px !important; }
.coffer-open-ritual .ritual-coffer-unit .unlock-coffer-wrap > img { height:var(--unlock-coffer-size) !important; }
.coffer-open-ritual.is-complete .ritual-coffer-unit .unlock-aura { animation:unlockAuraOpen 1.3s ease forwards; }
.coffer-open-ritual.is-complete .ritual-coffer-unit img { animation:ritual-coffer-accept 1s ease both; }

@keyframes ritual-console-orbit { to{transform:rotate(360deg)} }
@keyframes ritual-completion-burst { 0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.7)} }
@keyframes ritual-wax-physical-break { 38%{filter:brightness(1.5);transform:translate(-50%,44px) rotate(8deg) scale(1.12)}100%{opacity:0;filter:brightness(2.2);transform:translate(-50%,90px) rotate(28deg) scale(.42)} }
@keyframes ritual-crystal-halo { to{transform:rotate(360deg)} }
@keyframes ritual-crystal-seat { 45%{filter:drop-shadow(0 0 28px white) drop-shadow(0 0 44px #6adfff)}100%{opacity:0;transform:translateX(-50%) translateY(94px) scale(.24);filter:brightness(2.4)} }
@keyframes ritual-lock-shatter { 45%{filter:brightness(1.8);transform:translate(-50%,-50%) rotate(10deg) scale(1.22)}100%{opacity:0;transform:translate(-50%,-50%) rotate(42deg) scale(.35)} }
@keyframes ritual-coin-key-insert { 50%{filter:brightness(1.7);transform:translate(-50%,-50%) rotateZ(540deg) scale(1.08)}100%{opacity:0;transform:translate(-50%,4px) rotateZ(720deg) scale(.25)} }
@keyframes ritual-rune-next { 50%{transform:scale(1.12);filter:brightness(1.55);box-shadow:0 0 31px rgba(99,255,197,.7)} }
@keyframes ritual-rune-console-complete { 55%{filter:brightness(1.8);transform:scale(1.12) rotate(8deg)}100%{opacity:0;transform:scale(.25) rotate(34deg)} }
@keyframes ritual-coffer-accept { 45%{transform:translateY(-8px) scale(1.05);filter:brightness(1.35) drop-shadow(0 0 26px var(--box-glow))}100%{transform:none} }

.card-album-heading {
  align-items: center !important;
  gap: 22px;
}
.card-album-rarity-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 660px;
}
.card-album-rarity-filter {
  position: relative;
  min-width: 94px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(232,209,152,.13);
  border-radius: 12px;
  background: rgba(0,0,0,.13);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-album-rarity-filter:hover {
  transform: translateY(-2px);
  filter: brightness(1.18);
  border-color: rgba(239,218,165,.32);
}
.card-album-rarity-filter .reward-rarity-seal {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  min-width: 76px !important;
  min-height: 31px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  filter: brightness(.8) saturate(.78);
  opacity: .78;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card-album-rarity-filter.is-active {
  transform: translateY(-3px) scale(1.035);
  border-color: rgba(250,230,178,.5);
  box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 22px rgba(223,190,105,.12), inset 0 0 13px rgba(255,255,255,.035);
}
.card-album-rarity-filter.is-active .reward-rarity-seal {
  filter: brightness(1.25) saturate(1.18);
  opacity: 1;
  transform: scale(1.08) !important;
  box-shadow: 0 0 18px currentColor;
}
.card-album-rarity-filter.is-all span {
  min-width: 68px;
  padding: 8px 12px;
  border: 1px solid rgba(224,195,123,.42);
  border-radius: 999px;
  color: rgba(244,225,176,.72);
  background: linear-gradient(145deg,rgba(132,93,30,.22),rgba(0,0,0,.16));
  font-family: Georgia,serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}
.card-album-rarity-filter.is-all.is-active span {
  color:#fff0bf;
  border-color:#e1bd68;
  box-shadow:0 0 17px rgba(225,189,104,.36);
  filter:brightness(1.2);
}

@media (max-width: 900px) {
  .ritual-interaction-console { width:min(650px,94vw); }
  .card-album-heading { align-items:flex-start !important; }
  .card-album-rarity-filters {
    justify-content:flex-start;
    max-width:100%;
  }
  .card-album-rarity-filter { min-width:82px; }
}
@media (max-width: 680px) {
  .chance-simulator-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chance-simulator-coffer-card {
    min-height:165px;
    padding-inline:6px;
  }
  .chance-simulator-coffer-card img {
    width:104px;
    height:105px;
  }
  .chance-simulator-launch {
    align-items:stretch;
    flex-direction:column;
  }
  .chance-simulator-run {
    width:100%;
    min-width:0;
  }
  .reel-overlay.is-simulation-opening::before {
    top:8px;
    width:min(92vw,420px);
    text-align:center;
  }
  .purchase-receipt-printer { width:min(390px,94vw); }
  .purchase-receipt-slot-shell { width:calc(100% - 32px); }
  .gift-compose-product-preview {
    grid-template-columns:1fr 1fr;
    gap:0;
    transform:scale(.9);
  }
  .gift-compose-coffer-preview > img {
    width:145px !important;
    height:130px !important;
  }
  .gift-compose-package-preview .gift-package-visual { transform:scale(.75); }
  .gift-opening-package-scene {
    width:330px;
    height:310px;
    transform:scale(.88);
    margin:-15px auto -25px;
  }
  .ritual-interaction-console {
    grid-template-columns:1fr;
    gap:7px;
    min-height:300px;
    padding:10px 12px;
  }
  .ritual-artifact-stage { height:190px; }
  .ritual-instruction {
    padding:0 6px 7px;
    text-align:center;
  }
  .ritual-instruction p { margin:7px 0 10px; }
  .coffer-open-ritual .unlock-coffer-line { margin-top:-15px; }
  .coffer-open-ritual .ritual-coffer-unit { height:175px; }
  .coffer-open-ritual .ritual-coffer-unit .unlock-coffer-wrap { height:150px !important; }
  .card-album-rarity-filters {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:6px;
  }
  .card-album-rarity-filter {
    min-width:0;
    min-height:44px;
    padding:4px;
  }
  .card-album-rarity-filter .reward-rarity-seal {
    min-width:58px !important;
    font-size:8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-receipt-feed,
  .purchase-receipt-printer .purchase-receipt,
  .purchase-dialog.is-success .purchase-success-actions,
  .gift-opening-package-scene .is-opening-package,
  .ritual-artifact-backdrop i,
  .ritual-rune-button,
  .gift-package-visual-spark {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

.user-area-badges {
  overflow: visible;
}
.user-area-badges .staff-player-mark.tester-player-image-mark {
  transform: scale(1.46);
  transform-origin: left center;
}
.user-area-badges .vip-player-mark {
  transform: scale(1.46);
  transform-origin: left center;
}
.user-area-badges .staff-player-mark.tester-player-image-mark + .vip-player-mark {
  transform: translateX(5px) scale(1.46);
}

.card-album-rarity-filters {
  display: none !important;
}
.card-binder-tabs {
  pointer-events: auto;
  gap: 8px;
}
.card-binder-tabs button {
  appearance: none;
  position: relative;
  display: block;
  width: 42px;
  height: 62px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  overflow: visible;
  transition: width .24s cubic-bezier(.2,.78,.24,1);
}
.card-binder-tabs button > span {
  position: relative;
  width: 42px;
  height: 62px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(85,55,22,.35);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  color: #47331b;
  background: linear-gradient(90deg,#d6bd80,#f0dcaa);
  box-shadow: 3px 4px 8px rgba(0,0,0,.24);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 1px 0 rgba(255,255,255,.34);
  transition: width .24s cubic-bezier(.2,.78,.24,1), filter .18s ease, box-shadow .18s ease;
}
.card-binder-tabs button.is-common > span {
  color: #403a31;
  background: linear-gradient(90deg,#aaa191 0%,#ccc3b3 48%,#e7e1d6 100%);
  border-color: rgba(86,78,65,.42);
}
.card-binder-tabs button.is-rare > span {
  color: #18375e;
  background: linear-gradient(90deg,#6e9edb 0%,#a1c7f9 48%,#d9e9ff 100%);
  border-color: rgba(63,111,171,.48);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.card-binder-tabs button.is-epic > span {
  color: #fffaff;
  background: linear-gradient(90deg,#7538ca 0%,#aa70ff 48%,#d9bcff 100%);
  border-color: rgba(141,75,226,.58);
  text-shadow: 0 1px 2px rgba(43,12,83,.7), 0 0 7px rgba(255,255,255,.24);
}
.card-binder-tabs button.is-legendary > span {
  color: #fffef8;
  border-color: rgba(255,247,255,.72);
  background:
    linear-gradient(125deg,rgba(255,255,255,.34),transparent 34%),
    linear-gradient(90deg,#ff4aae,#ffbf42,#50ddff,#a86cff,#ff4aae);
  background-size: auto, 240% 100%;
  text-shadow: 0 1px 2px rgba(42,10,55,.78), 0 0 8px rgba(255,255,255,.58);
  animation: cardAlbumLegendaryTabHolo 5.6s linear infinite;
}
.card-binder-tabs button.is-legendary > span::after {
  content: "";
  position: absolute;
  inset: -20% -70%;
  background: linear-gradient(105deg,transparent 37%,rgba(255,255,255,.52) 48%,transparent 59%);
  transform: translateX(-45%);
  animation: cardAlbumLegendaryTabSweep 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardAlbumLegendaryTabHolo {
  0% { background-position: 0 0,0% 50%; }
  50% { background-position: 0 0,100% 50%; }
  100% { background-position: 0 0,0% 50%; }
}
@keyframes cardAlbumLegendaryTabSweep {
  0%,24% {
    transform: translateX(-48%);
    opacity: 0;
  }
  42% { opacity: .84; }
  68% {
    transform: translateX(48%);
    opacity: .28;
  }
  76%,100% {
    transform: translateX(48%);
    opacity: 0;
  }
}
.card-binder-tabs button:hover > span {
  filter: brightness(1.08) saturate(1.04);
}
.card-binder-tabs button.is-active > span {
  width: 52px;
  filter: brightness(1.18) saturate(1.1);
  box-shadow:
    3px 4px 8px rgba(0,0,0,.24),
    0 0 13px rgba(246,222,163,.52),
    inset 0 0 6px rgba(255,255,255,.24);
}
.card-binder-tabs button:focus-visible {
  outline: none;
}
.card-binder-tabs button:focus-visible > span {
  outline: 2px solid rgba(255,239,191,.92);
  outline-offset: 2px;
}

.gift-package-visual.has-theme-image {
  display: grid;
  place-items: center;
  perspective: none;
  transform-style: flat;
}
.gift-package-theme-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.42));
}
.gift-compose-package-preview .gift-package-visual.has-theme-image {
  width: 205px;
  height: 185px;
}
.gift-notification-package.has-theme-image {
  width: 62px;
  height: 62px;
  transform: none;
}
.gift-notification-package .gift-package-theme-image {
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.4));
}
.gift-detail-package.has-theme-image {
  width: 245px;
  height: 215px;
  transform: none;
}
.gift-opening-full-package-scene .is-opening-package.has-theme-image {
  width: 310px;
  height: 285px;
  transform: translate(-50%,-50%);
  animation: gift-package-float 2.5s ease-in-out infinite;
}
.gift-full-package-open-control {
  top: 96px;
  width: 245px;
  height: 176px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gift-full-package-open-control span {
  top: calc(100% + 4px);
}
.gift-opening-overlay.is-opening .gift-opening-full-package-scene .is-opening-package {
  animation: gift-box-settle-open 1.65s .2s ease forwards;
}

.gift-opening-celebration {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.gift-opening-full-package-scene .is-opening-package {
  z-index: 6;
}
.gift-confetti-burst,
.gift-theme-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gift-confetti-burst {
  z-index: 2;
}
.gift-confetti-burst-classic {
  z-index: 12;
}
.gift-confetti-burst i {
  position: absolute;
  left: 50%;
  top: 58%;
  width: var(--confetti-width, 7px);
  height: var(--confetti-height, 15px);
  border-radius: 2px;
  opacity: 0;
  background: #f3cc5e;
  transform: translate(-50%,-50%) scale(.2);
  transform-origin: center;
  will-change: transform, opacity;
}
.gift-confetti-burst i:nth-child(4n) { border-radius: 999px; }
.gift-confetti-burst i:nth-child(5n) { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.gift-confetti-burst i:nth-child(6n+2) { background:#ff819f; }
.gift-confetti-burst i:nth-child(6n+3) { background:#86d9ff; }
.gift-confetti-burst i:nth-child(6n+4) { background:#a88cff; }
.gift-confetti-burst i:nth-child(6n+5) { background:#fff2bd; }
.gift-confetti-burst i:nth-child(6n+6) { background:#7de3aa; }
.gift-theme-burst {
  z-index: 15;
}
.gift-theme-burst i {
  position: absolute;
  left: 50%;
  top: 47%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  opacity: 0;
  color: var(--gift-ribbon);
  font-style: normal;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 13px color-mix(in srgb,var(--gift-ribbon) 82%,transparent);
  transform: translate(-50%,-50%) scale(.2);
  will-change: transform, opacity;
}
.gift-opening-prize-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  overflow: visible;
  pointer-events: none;
}
.gift-opening-prize-pop {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 48%;
  width: 220px;
  height: 182px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(0, 44px, 0) scale(.42) rotate(0deg);
  transform-origin: 50% 66%;
  will-change: transform, opacity;
}
.gift-opening-prize-pop img {
  position: relative;
  z-index: 2;
  max-width: 210px;
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)) drop-shadow(0 0 16px color-mix(in srgb,var(--gift-ribbon) 32%,transparent));
}
.gift-opening-prize-pop > span {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  min-width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gift-ribbon);
  border-radius: 50%;
  color: var(--gift-ink);
  background: rgba(5,8,7,.82);
  font-weight: 900;
}
.gift-opening-overlay.is-opening .gift-confetti-burst i {
  animation: gift-confetti-side-burst 4.25s var(--confetti-delay) cubic-bezier(.12,.72,.16,1) forwards;
}
.gift-opening-overlay.is-opening .gift-confetti-burst-classic i {
  animation: gift-confetti-classic-burst 3s var(--confetti-delay) cubic-bezier(.14,.74,.2,1) forwards;
}
.gift-opening-overlay.is-opening .gift-theme-burst i {
  animation: gift-theme-motif-burst 3.35s var(--theme-delay) cubic-bezier(.12,.76,.16,1) forwards;
}
.gift-opening-overlay.is-opening .gift-opening-prize-pop {
  animation: gift-prize-pop-to-final 1.85s var(--gift-prize-delay, 180ms) cubic-bezier(.16,.82,.18,1) forwards;
}
.gift-celebration-starlight .gift-theme-burst i {
  color: #f4ecff;
  text-shadow: 0 0 9px #fff, 0 0 20px #9d7bff;
}
.gift-celebration-royal .gift-theme-burst i {
  color: #ffd76a;
  text-shadow: 0 0 10px #f5a921, 0 0 20px rgba(255,204,82,.68);
}
.gift-celebration-royal .gift-theme-burst i:nth-child(4n+2) {
  border: 2px solid #ffe69a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff5bd,#d89b22 68%,#7e4e08);
  color: #6f4307;
  font-size: 0;
  box-shadow: inset 0 0 0 2px rgba(105,61,5,.32), 0 0 14px rgba(255,194,55,.72);
}
.gift-celebration-moogle .gift-theme-burst i {
  color: #ff98b8;
  text-shadow: 0 0 10px #fff, 0 0 19px rgba(255,117,165,.72);
}
.gift-celebration-moogle .gift-theme-burst i:nth-child(4n+2) {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff,#ffd7e3 55%,#ee7ea3);
  color: transparent;
  box-shadow: 0 0 13px rgba(255,164,195,.8);
}
.gift-celebration-crystal .gift-theme-burst i {
  color: #a8efff;
  text-shadow: 0 0 9px #fff, 0 0 22px #5cdcff;
}
.gift-celebration-crystal .gift-theme-burst i:nth-child(3n+1) {
  clip-path: polygon(50% 0,88% 32%,70% 100%,28% 100%,10% 32%);
  background: linear-gradient(145deg,#efffff,#7adff4 45%,#7569ee);
  color: transparent;
  box-shadow: 0 0 16px rgba(100,226,255,.78);
}
@keyframes gift-confetti-side-burst {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.14) rotate(0);
  }
  8% { opacity:1; }
  28% {
    opacity:1;
    transform:translate(-50%,-50%) translate(calc(var(--confetti-x) * .44), calc(var(--confetti-y) * .44)) scale(.92) rotate(calc(var(--confetti-turn) * .24));
  }
  52% {
    opacity:1;
    transform:translate(-50%,-50%) translate(var(--confetti-x), var(--confetti-y)) scale(1.04) rotate(calc(var(--confetti-turn) * .72));
  }
  76% {
    opacity:.98;
    transform:translate(-50%,-50%) translate(calc(var(--confetti-x) * 1.08), calc(var(--confetti-y) + var(--confetti-fall, 260px) * .34)) scale(1.02) rotate(calc(var(--confetti-turn) * 1.04));
  }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) translate(var(--confetti-end-x, var(--confetti-x)), calc(var(--confetti-y) + var(--confetti-fall, 260px))) scale(.96) rotate(calc(var(--confetti-turn) * 1.35));
  }
}
@keyframes gift-confetti-classic-burst {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.2) rotate(0);
  }
  12% { opacity:1; }
  34% {
    opacity:1;
    transform:translate(-50%,-50%) translate(calc(var(--confetti-x) * .6), calc(var(--confetti-y) * .6)) scale(.9) rotate(calc(var(--confetti-turn) * .4));
  }
  62% {
    opacity:1;
    transform:translate(-50%,-50%) translate(var(--confetti-x), var(--confetti-y)) scale(.96) rotate(calc(var(--confetti-turn) * .88));
  }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) translate(var(--confetti-end-x, var(--confetti-x)), calc(var(--confetti-y) + var(--confetti-fall, 210px))) scale(.88) rotate(calc(var(--confetti-turn) * 1.2));
  }
}
@keyframes gift-theme-motif-burst {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.12) rotate(0);
  }
  10% { opacity:1; }
  72% { opacity:1; }
  88% { opacity:.72; }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) translate(var(--theme-x),var(--theme-y)) scale(var(--theme-scale,1.28)) rotate(var(--theme-turn));
  }
}
@keyframes gift-prize-pop-to-final {
  0% {
    opacity: 0;
    z-index: 4;
    transform: translate(-50%, -50%) translate3d(0, 44px, 0) scale(.42) rotate(0deg);
  }
  22% {
    opacity: .85;
    z-index: 4;
    transform: translate(-50%, -50%) translate3d(0, 12px, 0) scale(.58) rotate(0deg);
  }
  44% {
    opacity: 1;
    z-index: 4;
    transform: translate(calc(-50% + var(--gift-prize-slot-x) * .18), calc(-50% + var(--gift-prize-slot-y) * .18 - 8px)) scale(calc(.74 + (var(--gift-prize-slot-scale) - .74) * .32)) rotate(calc(var(--gift-prize-slot-rotation) * .28));
  }
  45% {
    z-index: var(--gift-prize-depth, 18);
  }
  68% {
    opacity: 1;
    z-index: var(--gift-prize-depth, 18);
    transform: translate(calc(-50% + var(--gift-prize-slot-x) * .82), calc(-50% + var(--gift-prize-slot-y) * .82 - 14px)) scale(calc(var(--gift-prize-slot-scale) + .08)) rotate(calc(var(--gift-prize-slot-rotation) * .78));
  }
  82% {
    opacity: 1;
    z-index: var(--gift-prize-depth, 18);
    transform: translate(calc(-50% + var(--gift-prize-slot-x) * .94), calc(-50% + var(--gift-prize-slot-y) * .94 + 9px)) scale(calc(var(--gift-prize-slot-scale) - .03)) rotate(calc(var(--gift-prize-slot-rotation) * .92));
  }
  100% {
    opacity: 1;
    z-index: var(--gift-prize-depth, 18);
    transform: translate(calc(-50% + var(--gift-prize-slot-x)), calc(-50% + var(--gift-prize-slot-y))) scale(var(--gift-prize-slot-scale)) rotate(var(--gift-prize-slot-rotation));
  }
}

.starlight-gift-opening-scene {
  --gift-lid-x: 0px;
  --gift-lid-y: 0px;
  --gift-lid-rotation: 0deg;
  --gift-lid-rest-offset: -96px;
  position: relative;
  width: min(520px, 92vw);
  height: 390px;
  margin: -8px auto 0;
  overflow: visible;
  isolation: isolate;
  perspective: 1100px;
  touch-action: none;
}
.starlight-gift-box-base,
.starlight-gift-lid {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(365px, 78vw);
  height: min(365px, 78vw);
}
.starlight-gift-box-base {
  z-index: 8;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.5));
}
.starlight-gift-lid {
  z-index: 26;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform:
    translate(-50%, calc(-50% + var(--gift-lid-rest-offset)))
    translate3d(var(--gift-lid-x),var(--gift-lid-y),42px)
    rotateZ(var(--gift-lid-rotation));
  transform-origin: 50% 66%;
  will-change: transform;
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.38));
}
.starlight-gift-lid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.starlight-gift-opening-scene.is-dragging .starlight-gift-lid {
  cursor: grabbing;
  filter: brightness(1.08) drop-shadow(0 28px 26px rgba(0,0,0,.42));
}
.starlight-gift-lid[aria-disabled="true"] {
  cursor: default;
}
.gift-opening-overlay.is-opening .starlight-gift-box-base {
  animation: starlight-gift-base-celebrate 1.35s ease forwards;
}
@keyframes starlight-gift-base-celebrate {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  32% { transform:translate(-50%,-51.5%) scale(1.018); }
  58% { transform:translate(-50%,-50%) scale(.994); }
}

@media (max-width: 900px) {
  .card-binder-tabs {
    display: flex;
    right: -11px;
    transform: scale(.84);
    transform-origin: top right;
  }
}
@media (max-width: 680px) {
  .card-binder-tabs {
    display: flex;
    right: -5px;
    top: 28px;
    gap: 5px;
    transform: scale(.7);
  }
  .starlight-gift-opening-scene {
    --gift-lid-rest-offset: -78px;
    height: 330px;
    margin-top: -18px;
  }
  .starlight-gift-box-base,
  .starlight-gift-lid {
    width: min(315px, 88vw);
    height: min(315px, 88vw);
  }
  .gift-compose-package-preview .gift-package-visual.has-theme-image {
    width: 175px;
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starlight-gift-inner-light i,
  .gift-opening-overlay.is-opening .starlight-gift-box-base,
  .gift-opening-overlay.is-opening .starlight-gift-inner-light {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.user-area-shell.is-vip {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.user-ornament-corner {
  width: 82px;
  height: 82px;
  clip-path: none !important;
}
.user-ornament-corner::before,
.user-ornament-corner::after {
  border: 0;
  border-top: 2px solid rgba(232,203,135,.72);
  border-left: 2px solid rgba(232,203,135,.72);
  border-radius: 20px 0 0 0;
}
.user-ornament-corner::before {
  inset: 0;
}
.user-ornament-corner::after {
  inset: 11px;
  border-top-color: rgba(255,237,188,.44);
  border-left-color: rgba(255,237,188,.44);
  border-radius: 14px 0 0 0;
}
.user-ornament-corner.corner-tl {
  left: -10px;
  top: -10px;
  transform: none;
}
.user-ornament-corner.corner-tr {
  right: -10px;
  top: -10px;
  transform: scaleX(-1);
}
.user-ornament-corner.corner-bl {
  left: -10px;
  bottom: -10px;
  transform: scaleY(-1);
}
.user-ornament-corner.corner-br {
  right: -10px;
  bottom: -10px;
  transform: rotate(180deg);
}
.user-area-shell.is-vip .user-ornament-corner::before {
  border-top-color: rgba(238,205,119,.8);
  border-left-color: rgba(238,205,119,.8);
}
.user-area-shell.is-vip .user-ornament-corner::after {
  border-top-color: rgba(214,74,120,.42);
  border-left-color: rgba(214,74,120,.42);
}

.user-area-balance,
.user-area-shell.is-vip .user-area-balance {
  min-width: 210px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.vip-tag-art {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.vip-player-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 18px !important;
  margin-left: 7px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
}
.vip-player-mark .vip-tag-art {
  height: 18px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.24));
}

.player-name .vip-player-mark {
  margin-left: 0 !important;
  margin-right: 7px !important;
}

.user-area-badges .vip-player-mark {
  width: auto !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: scale(1.46);
  transform-origin: left center;
}
.user-area-badges .staff-player-mark.tester-player-image-mark + .vip-player-mark {
  transform: translateX(5px) scale(1.46);
}
.user-area-badges .vip-player-mark .vip-tag-art {
  width: auto;
  height: 14px;
}

.showcase-detail-source-name .showcase-source-vip {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 16px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: none;
  box-shadow: none;
}
.showcase-source-vip .vip-tag-art {
  height: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}

.chance-simulator-vip-seal {
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 25px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: none;
  box-shadow: none;
  font-size: 0;
  letter-spacing: 0;
}
.chance-simulator-vip-seal .vip-tag-art {
  height: 25px;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.32));
}

.vip-coffer-seal {
  top: 6px !important;
  left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: 31px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  animation: vipImageTagFloat 3.2s ease-in-out infinite !important;
}
.vip-coffer-seal::before,
.vip-coffer-seal::after {
  display: none !important;
  content: none !important;
}
.vip-coffer-seal .vip-tag-art {
  height: 31px;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.32)) drop-shadow(0 0 6px rgba(183,64,101,.13));
}

.carousel-access-seal.is-vip {
  top: 8px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 0;
  height: 27px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: none;
  box-shadow: none;
  font-size: 0;
  letter-spacing: 0;
}
.carousel-access-seal.is-vip .vip-tag-art {
  height: 27px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.34));
}
.carousel-access-seal.is-vip.is-locked {
  border: 0;
  color: transparent;
  background: none;
  filter: grayscale(.46) brightness(.74);
  opacity: .86;
}

.inventory-coffer-seal.is-vip,
.inventory-coffer-seal.is-vip.is-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-height: 0;
  height: 25px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  box-shadow: none;
  text-shadow: none;
  animation: vipImageTagFloat 3.2s ease-in-out infinite;
}
.inventory-coffer-seal.is-vip::before,
.inventory-coffer-seal.is-vip::after {
  display: none;
  content: none;
}
.inventory-coffer-seal.is-vip .vip-tag-art {
  width: auto;
  height: 25px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
.inventory-coffer-seal.is-vip.is-locked .vip-tag-art {
  filter: grayscale(.42) brightness(.78) drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
.inventory-coffer-seal.is-vip small {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(255,132,173,.5);
  border-radius: 999px;
  color: #ffe2ec;
  background: rgba(92,19,52,.82);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .11em;
  line-height: 1;
}

.vip-panel-footer-crest .vip-panel-footer-image {
  flex: 0 0 auto;
  width: auto;
  height: 23px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.3));
}
.vip-panel-footer-crest b {
  display: none;
}

@keyframes vipImageTagFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .vip-coffer-seal,
  .inventory-coffer-seal.is-vip {
    animation: none !important;
  }
}

.purchase-receipt-feed {
  max-height: 470px !important;
  overflow: hidden !important;
  clip-path: inset(0 0 100% 0);
  animation: purchaseReceiptSlotReveal 3.15s .12s cubic-bezier(.18,.72,.22,1) forwards !important;
  will-change: clip-path;
}
.purchase-receipt-printer .purchase-receipt {
  opacity: .72;
  transform: translateY(-94%) rotate(-.35deg);
  animation: purchaseReceiptSlotPaper 3.15s .12s cubic-bezier(.18,.72,.22,1) forwards !important;
  will-change: transform, opacity;
}
.purchase-dialog.is-success .purchase-success-actions {
  animation: purchase-actions-after-print .35s 3.38s ease forwards !important;
}
@keyframes purchaseReceiptSlotReveal {
  0% { clip-path: inset(0 0 100% 0); }
  28% { clip-path: inset(0 0 74% 0); }
  58% { clip-path: inset(0 0 42% 0); }
  82% { clip-path: inset(0 0 16% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes purchaseReceiptSlotPaper {
  0% {
    opacity:.72;
    transform:translateY(-94%) rotate(-.35deg);
  }
  14% { opacity:1; }
  34% { transform:translateY(-70%) rotate(.08deg); }
  62% { transform:translateY(-38%) rotate(-.18deg); }
  84% { transform:translateY(-14%) rotate(.04deg); }
  100% {
    opacity:1;
    transform:translateY(0) rotate(-.35deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-receipt-feed {
    animation-duration: 3.15s !important;
    animation-delay: .12s !important;
  }
  .purchase-receipt-printer .purchase-receipt {
    animation-duration: 3.15s !important;
    animation-delay: .12s !important;
  }
  .purchase-dialog.is-success .purchase-success-actions {
    animation-duration: .35s !important;
    animation-delay: 3.38s !important;
  }
}

.purchase-receipt-printer {
  padding-top: 8px !important;
}
.purchase-receipt-slot-shell,
.purchase-receipt-slot-shell::before,
.purchase-receipt-slot-shell::after,
.purchase-receipt-slot {
  display: none !important;
}
.purchase-receipt-feed {
  position: relative !important;
  z-index: 6 !important;
  margin-top: 0 !important;
  padding: 8px 12px 10px !important;
}
.purchase-receipt-feed::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  top: 0 !important;
  height: 13px !important;
  z-index: 12 !important;
  display: block !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.88) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 24%),
    linear-gradient(180deg, #171c19 0%, #090c0a 54%, #040605 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.045),
    inset 0 -3px 6px rgba(0,0,0,.84),
    0 2px 4px rgba(0,0,0,.36) !important;
  pointer-events: none !important;
}
.purchase-receipt-feed::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  top: 5px !important;
  height: 2px !important;
  z-index: 13 !important;
  display: block !important;
  background: linear-gradient(90deg, transparent, rgba(245,223,166,.3), transparent) !important;
  pointer-events: none !important;
}
.purchase-receipt-printer .purchase-receipt {
  position: relative !important;
  z-index: 8 !important;
}

@media (max-width: 680px) {
  .purchase-receipt-feed::before {
    left: 6px !important;
    right: 6px !important;
  }
  .purchase-receipt-feed::after {
    left: 17px !important;
    right: 17px !important;
  }
}

.purchase-dialog.is-success {
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

.vip-coffer-seal {
  height: 26px !important;
}
.vip-coffer-seal .vip-tag-art {
  width: auto !important;
  height: 26px !important;
}

:where(span, div):has(> .vip-tag-art) {
  position: relative;
  isolation: isolate;
}

:where(span, div):has(> .vip-tag-art)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;
  background-image: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,.04) 41%,
    rgba(255,255,255,.48) 47%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.42) 54%,
    rgba(255,255,255,.04) 60%,
    transparent 67%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 285% 100% !important;
  background-position: 165% 0;
  -webkit-mask-image: url('/images/vip.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: auto 100%;
  mask-image: url('/images/vip.png');
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: auto 100%;
  animation: vipTagWhiteSheen 7.8s ease-in-out infinite !important;
}

.vip-panel-footer-crest::after {
  -webkit-mask-position: center center !important;
  -webkit-mask-size: auto 23px !important;
  mask-position: center center !important;
  mask-size: auto 23px !important;
}

@keyframes vipTagWhiteSheen {
  0%, 65% {
    opacity: 0;
    background-position: 165% 0;
  }
  69% {
    opacity: .18;
  }
  77% {
    opacity: .9;
  }
  88% {
    opacity: .28;
    background-position: -65% 0;
  }
  92%, 100% {
    opacity: 0;
    background-position: -65% 0;
  }
}

.vip-coffer-seal {
  top: -2px !important;
  left: 50% !important;
  right: auto !important;
  z-index: 18 !important;
  width: auto !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
  animation: vipCofferHallTagFloat 3.2s ease-in-out infinite !important;
}
.vip-coffer-seal .vip-tag-art {
  width: auto !important;
  height: 26px !important;
}

.box-visual:has(> .vip-coffer-seal) > .coffer-rarity-seal {
  top: 31px !important;
}

@keyframes vipCofferHallTagFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-1px) scale(1.025);
  }
}

@media (max-width: 680px) {
  .vip-coffer-seal {
    top: -2px !important;
  }
  .box-visual:has(> .vip-coffer-seal) > .coffer-rarity-seal {
    top: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(span, div):has(> .vip-tag-art)::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

:where(span, div):has(> .vip-tag-art)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

html body .box-card .box-visual > span.vip-coffer-seal {
  position: absolute !important;
  inset: -2px auto auto 50% !important;
  z-index: 25 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
  animation: none !important;
  pointer-events: none !important;
  isolation: isolate !important;
}
html body .box-card .box-visual > span.vip-coffer-seal > .vip-tag-art {
  display: block !important;
  width: auto !important;
  height: 26px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  animation: none !important;
}
html body .box-card .box-visual:has(> span.vip-coffer-seal) > .coffer-rarity-seal {
  top: 31px !important;
}

.vip-player-mark,
.showcase-source-vip,
.chance-simulator-vip-seal,
.vip-coffer-seal,
.carousel-access-seal.is-vip,
.inventory-coffer-seal.is-vip,
.vip-panel-footer-crest {
  position: relative;
  isolation: isolate;
}

.vip-player-mark::after,
.showcase-source-vip::after,
.chance-simulator-vip-seal::after,
.vip-coffer-seal::after,
.carousel-access-seal.is-vip::after,
.inventory-coffer-seal.is-vip::after,
.vip-panel-footer-crest::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,.05) 41%,
    rgba(255,255,255,.52) 47%,
    rgba(255,255,255,.98) 50%,
    rgba(255,255,255,.48) 54%,
    rgba(255,255,255,.05) 60%,
    transparent 67%
  ) no-repeat !important;
  background-size: 300% 100% !important;
  background-position: 170% 0;
  -webkit-mask-image: url('/images/vip.png') !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: left center !important;
  -webkit-mask-size: auto 100% !important;
  mask-image: url('/images/vip.png') !important;
  mask-repeat: no-repeat !important;
  mask-position: left center !important;
  mask-size: auto 100% !important;
  animation: vipAuthoredImageSheen 8.8s ease-in-out infinite !important;
}

.inventory-coffer-seal.is-vip::after {
  -webkit-mask-size: auto 25px !important;
  mask-size: auto 25px !important;
}
.vip-panel-footer-crest::after {
  -webkit-mask-position: center center !important;
  -webkit-mask-size: auto 23px !important;
  mask-position: center center !important;
  mask-size: auto 23px !important;
}

@keyframes vipAuthoredImageSheen {
  0%, 70% {
    opacity: 0;
    background-position: 170% 0;
  }
  74% { opacity: .18; }
  81% { opacity: .95; }
  90% {
    opacity: .3;
    background-position: -70% 0;
  }
  94%, 100% {
    opacity: 0;
    background-position: -70% 0;
  }
}

@media (max-width: 680px) {
  html body .box-card .box-visual > span.vip-coffer-seal {
    inset: -2px auto auto 50% !important;
    height: 25px !important;
  }
  html body .box-card .box-visual > span.vip-coffer-seal > .vip-tag-art {
    height: 25px !important;
  }
  html body .box-card .box-visual:has(> span.vip-coffer-seal) > .coffer-rarity-seal {
    top: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vip-player-mark::after,
  .showcase-source-vip::after,
  .chance-simulator-vip-seal::after,
  .vip-coffer-seal::after,
  .carousel-access-seal.is-vip::after,
  .inventory-coffer-seal.is-vip::after,
  .vip-panel-footer-crest::after {
    animation: vipAuthoredImageSheen 8.8s ease-in-out infinite !important;
  }
}

.vip-tag-visual {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  line-height: 0;
  isolation: isolate;
}
.vip-tag-visual > .vip-tag-art {
  grid-area: 1 / 1;
}
.vip-tag-visual > .vip-tag-art-base {
  position: relative;
  z-index: 1;
}
.vip-tag-visual > .vip-tag-art-sheen {
  position: relative;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  filter: brightness(0) saturate(0) invert(1) contrast(1.15) !important;
  mix-blend-mode: screen;
  clip-path: polygon(-32% -12%, -15% -12%, 2% 112%, -15% 112%);
  animation: vipTagRealImageSweep 8.8s cubic-bezier(.24,.72,.28,1) infinite !important;
  will-change: clip-path, opacity;
}

.vip-player-mark::after,
.showcase-source-vip::after,
.chance-simulator-vip-seal::after,
.vip-coffer-seal::after,
.carousel-access-seal.is-vip::after,
.inventory-coffer-seal.is-vip::after,
.vip-panel-footer-crest::after,
:where(span, div):has(> .vip-tag-art)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.vip-panel-footer-crest .vip-panel-footer-image {
  display: inline-grid;
  height: 23px;
}
.vip-panel-footer-crest .vip-panel-footer-image > .vip-tag-art {
  width: auto;
  height: 23px;
}

@keyframes vipTagRealImageSweep {
  0%, 68% {
    opacity: 0;
    clip-path: polygon(-32% -12%, -15% -12%, 2% 112%, -15% 112%);
  }
  72% {
    opacity: .12;
  }
  77% {
    opacity: .92;
  }
  88% {
    opacity: .34;
    clip-path: polygon(103% -12%, 120% -12%, 137% 112%, 120% 112%);
  }
  92%, 100% {
    opacity: 0;
    clip-path: polygon(103% -12%, 120% -12%, 137% 112%, 120% 112%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vip-tag-visual > .vip-tag-art-sheen {
    animation: vipTagRealImageSweep 8.8s cubic-bezier(.24,.72,.28,1) infinite !important;
  }
}

.card-catalog-header > div.card-catalog-box-description {
  display: block !important;
  width: min(680px, 92%);
  margin: 0 auto 13px !important;
  color: rgba(196, 211, 202, .76) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: .018em !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.72);
  white-space: normal;
  overflow-wrap: anywhere;
}
.card-catalog-header > div.card-catalog-box-description + .card-catalog-stats {
  margin-top: 0 !important;
}
@media (max-width: 680px) {
  .card-catalog-header > div.card-catalog-box-description {
    width: min(560px, 96%);
    margin-bottom: 11px !important;
    font-size: 11px !important;
    line-height: 1.48 !important;
  }
}

.purchase-printer-shell,
.purchase-printer-top,
.purchase-printer-status {
  display: none !important;
}

.reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal),
.coffer-rarity-seal.coffer-rarity-legendary,
.carousel-rarity-seal.coffer-rarity-legendary,
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  clip-path: none !important;
  border-color: transparent !important;
  background: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.coffer-rarity-seal.coffer-rarity-legendary {
  min-width: 108px !important;
  min-height: 27px !important;
  padding: 0 !important;
}
.carousel-rarity-seal.coffer-rarity-legendary,
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary {
  min-width: 102px !important;
  min-height: 25px !important;
  padding: 0 !important;
}

.coffer-rarity-seal.coffer-rarity-legendary > i,
.carousel-rarity-seal.coffer-rarity-legendary > i,
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary > i {
  display: none !important;
}

.reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal)::before,
.coffer-rarity-seal.coffer-rarity-legendary::before,
.carousel-rarity-seal.coffer-rarity-legendary::before,
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bryer-css-v61-legendarytag, url("/images/legendarytag.png")) center / contain no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.38))
    drop-shadow(0 0 7px rgba(255,190,67,.22));
  pointer-events: none !important;
}

.reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal)::after,
.coffer-rarity-seal.coffer-rarity-legendary::after,
.carousel-rarity-seal.coffer-rarity-legendary::after,
.inventory-coffer-seal.is-rarity.coffer-rarity-legendary::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bryer-css-v61-legendarytag, url("/images/legendarytag.png")) center / contain no-repeat !important;
  opacity: 0 !important;
  transform: none !important;
  filter:
    grayscale(1)
    brightness(3.4)
    contrast(.4)
    drop-shadow(0 0 6px rgba(255,255,255,.55));
  mix-blend-mode: screen !important;
  clip-path: polygon(-32% 0, -10% 0, 5% 100%, -17% 100%) !important;
  animation: legendaryTagArtworkSheen 5.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes legendaryTagArtworkSheen {
  0%, 61% {
    opacity: 0;
    clip-path: polygon(-32% 0, -10% 0, 5% 100%, -17% 100%);
  }
  66% { opacity: .22; }
  73% { opacity: .9; }
  82% {
    opacity: .18;
    clip-path: polygon(112% 0, 134% 0, 149% 100%, 127% 100%);
  }
  84%, 100% {
    opacity: 0;
    clip-path: polygon(112% 0, 134% 0, 149% 100%, 127% 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal)::after,
  .coffer-rarity-seal.coffer-rarity-legendary::after,
  .carousel-rarity-seal.coffer-rarity-legendary::after,
  .inventory-coffer-seal.is-rarity.coffer-rarity-legendary::after {
    animation-duration: 5.8s !important;
    animation-iteration-count: infinite !important;
  }
}

html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary {
  position: absolute !important;
  inset: -4px auto auto 50% !important;
  z-index: 26 !important;
  display: block !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: calc(100% - 24px) !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
  animation: none !important;
  isolation: isolate !important;
  pointer-events: none !important;
}
html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: var(--bryer-css-v61-legendarytag, url("/images/legendarytag.png")) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.46))
    drop-shadow(0 0 7px rgba(255,190,67,.26)) !important;
  animation: legendaryHallTagPulse 3.1s ease-in-out infinite !important;
}
html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary::after {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: var(--bryer-css-v61-legendarytag, url("/images/legendarytag.png")) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
html body .box-card.is-legendary-coffer .box-visual:has(> .vip-coffer-seal) > .coffer-rarity-seal.coffer-rarity-legendary {
  top: 31px !important;
}
@keyframes legendaryHallTagPulse {
  0%, 100% {
    opacity: .94;
    transform: scale(1);
    filter:
      brightness(.98)
      drop-shadow(0 4px 6px rgba(0,0,0,.46))
      drop-shadow(0 0 7px rgba(255,190,67,.22));
  }
  50% {
    opacity: 1;
    transform: scale(1.025);
    filter:
      brightness(1.12)
      drop-shadow(0 4px 6px rgba(0,0,0,.46))
      drop-shadow(0 0 13px rgba(255,190,67,.44));
  }
}
@media (max-width: 680px) {
  html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary {
    top: -3px !important;
    width: 138px !important;
    min-width: 138px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  html body .box-card.is-legendary-coffer .box-visual:has(> .vip-coffer-seal) > .coffer-rarity-seal.coffer-rarity-legendary {
    top: 30px !important;
  }
}

html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary {
  width: 150px !important;
  min-width: 150px !important;
  height: 48px !important;
  min-height: 48px !important;
  aspect-ratio: 25 / 8 !important;
}
html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary::before,
html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary::after {
  background-size: contain !important;
}
html body .box-card.is-legendary-coffer .box-visual:has(> .vip-coffer-seal) > .coffer-rarity-seal.coffer-rarity-legendary {
  top: 31px !important;
}
@media (max-width: 680px) {
  html body .box-card.is-legendary-coffer .box-visual .coffer-rarity-seal.coffer-rarity-legendary {
    width: 138px !important;
    min-width: 138px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

.coffer-section-block .grid > .box-card > .box-visual .box-peek-trigger,
.grid > .box-card > .box-visual .box-peek-trigger {
  top: 8px !important;
}
.coffer-section-block .grid > .box-card > .box-visual .box-peek-caption,
.grid > .box-card > .box-visual .box-peek-caption {
  bottom: -1px !important;
}

.coffer-section-block .grid > .box-card > .box-body > .qty-control,
.grid > .box-card > .box-body > .qty-control {
  position: relative !important;
  top: 5px !important;
}

.reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal) {
  width: 104px !important;
  min-width: 104px !important;
  max-width: none !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  clip-path: none !important;
}
.reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal)::before,
.reward-rarity-seal.rarity-seal-legendary:not(.fourfun-card-rarity-seal):not(.card-catalog-preset-rarity):not(.album-preset-card-rarity):not(.card-inspector-unified-seal):not(.card-inspector-heading-seal)::after {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.reward-showcase-card.rarity-border-legendary .reward-showcase-frame {
  border-top-color: transparent !important;
}
.reward-showcase-card.rarity-border-legendary .reward-showcase-frame::before {
  display: none !important;
  content: none !important;
}
.reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  top: -9px !important;
  left: 50% !important;
  right: auto !important;
  width: 98px !important;
  min-width: 98px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
}

.peek-inside-grid .reward-rarity-seal.rarity-seal-legendary {
  top: 1px !important;
  right: 3px !important;
  width: 100px !important;
  min-width: 100px !important;
  height: 32px !important;
  min-height: 32px !important;
}

.reel-card .reel-card-image-anchor > .reel-card-rarity-seal.rarity-seal-legendary,
.reel-card .reel-card-rarity-seal.rarity-seal-legendary {
  top: -13px !important;
  right: 1px !important;
  width: 84px !important;
  min-width: 84px !important;
  height: 27px !important;
  min-height: 27px !important;
}

.result-card .result-rarity-stamp.rarity-seal-legendary,
.reel-overlay.is-revealed .result-card .result-rarity-stamp.rarity-seal-legendary {
  width: 106px !important;
  min-width: 106px !important;
  height: 34px !important;
  min-height: 34px !important;
}
.collection-detail-image-stage .collection-detail-rarity-stamp.rarity-seal-legendary,
.collection-detail-rarity-stamp.rarity-seal-legendary {
  width: 112px !important;
  min-width: 112px !important;
  height: 36px !important;
  min-height: 36px !important;
}

@media (max-width: 680px) {
  .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
    width: 92px !important;
    min-width: 92px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .peek-inside-grid .reward-rarity-seal.rarity-seal-legendary {
    width: 92px !important;
    min-width: 92px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}

html body .reward-showcase-card > .reward-rarity-seal.rarity-seal-legendary,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  position: absolute !important;
  inset: 3px auto auto 50% !important;
  display: block !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
  pointer-events: none !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
}

html body .reward-showcase-card.rarity-border-legendary .reward-showcase-image-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}
html body .reward-showcase-card.rarity-border-legendary > strong {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

html body .peek-inside-grid .reward-row > .reward-rarity-seal.rarity-seal-legendary,
html body .peek-inside-grid .reward-rarity-seal.rarity-seal-legendary {
  position: absolute !important;
  inset: 4px 8px auto auto !important;
  display: block !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 24 !important;
  pointer-events: none !important;
}
html body .peek-inside-grid .reward-rarity-seal.rarity-seal-legendary::before,
html body .peek-inside-grid .reward-rarity-seal.rarity-seal-legendary::after {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
}

html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap,
html body .peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap),
html body .peek-inside-grid .reward-row.peek-legendary-reward > .chance,
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text {
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 680px) {
  html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
  html body .peek-inside-grid .reward-rarity-seal.rarity-seal-legendary {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
}

html body .reward-showcase-hall .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary,
html body .reward-showcase-inventory .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  --seal-a: #f6b62d;
  --seal-b: #9a3f05;
  --seal-text: #fff6d7;
  position: absolute !important;
  inset: 3px auto auto 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 78px !important;
  max-width: none !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  overflow: visible !important;
  isolation: auto !important;
  border: 1px solid #ffd978 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 50%, 9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%) !important;
  color: var(--seal-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255,250,218,.34), transparent 37%),
    linear-gradient(135deg, #d36d09 0%, #f6b62d 48%, #9a3f05 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(83,28,0,.35),
    0 0 13px rgba(255,172,32,.34),
    0 3px 8px rgba(0,0,0,.34) !important;
  filter: none !important;
  transform: translateX(-50%) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-indent: .1em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  animation: rewardCarouselLegendarySealPulse 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 12 !important;
}
html body .reward-showcase-hall .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before,
html body .reward-showcase-hall .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after,
html body .reward-showcase-inventory .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before,
html body .reward-showcase-inventory .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  opacity: 1 !important;
  color: #fff1b4 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  font-family: Georgia, serif !important;
  font-size: 5px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  pointer-events: none !important;
}
html body .reward-showcase-hall .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before,
html body .reward-showcase-inventory .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before {
  content: "✦" !important;
}
html body .reward-showcase-hall .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after,
html body .reward-showcase-inventory .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after {
  content: "✦" !important;
}
@keyframes rewardCarouselLegendarySealPulse {
  0%, 100% { filter: brightness(.96); }
  50% { filter: brightness(1.12); }
}

@media (max-width: 680px) {
  html body .reward-showcase-hall .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary,
  html body .reward-showcase-inventory .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
    min-width: 72px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding-inline: 8px !important;
    font-size: 6.5px !important;
  }
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  position: absolute !important;
  inset: 3px auto auto 50% !important;
  z-index: 30 !important;
  display: block !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) !important;
  animation: none !important;
  pointer-events: none !important;
  isolation: isolate !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before {
  content: "✦ LEGENDARY ✦" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid #ffd978 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 50%, 8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%) !important;
  background:
    linear-gradient(180deg, rgba(255,250,218,.38), transparent 38%),
    linear-gradient(135deg, #a93d04 0%, #ee9216 33%, #ffd35e 52%, #c55b07 76%, #7b2801 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(75,22,0,.38),
    0 0 9px rgba(255,166,31,.3),
    0 2px 5px rgba(0,0,0,.38) !important;
  color: #fff5cf !important;
  -webkit-text-fill-color: #fff5cf !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-indent: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(255,220,126,.34) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  animation: rewardCarouselManualLegendaryPulse 3.4s ease-in-out infinite !important;
  pointer-events: none !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px 8px !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.48) 49%, transparent 60%) !important;
  background-size: 240% 100% !important;
  background-position: 150% 0 !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  clip-path: none !important;
  transform: none !important;
  animation: rewardCarouselManualLegendarySheen 5.8s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes rewardCarouselManualLegendaryPulse {
  0%, 100% { filter: brightness(.96); }
  50% { filter: brightness(1.1); }
}
@keyframes rewardCarouselManualLegendarySheen {
  0%, 64% {
    opacity: 0;
    background-position: 150% 0;
  }
  69% { opacity: .72; }
  78% {
    opacity: .18;
    background-position: -50% 0;
  }
  80%, 100% {
    opacity: 0;
    background-position: -50% 0;
  }
}
@media (max-width: 680px) {
  html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
  }
  html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before {
    font-size: 5.5px !important;
    padding-inline: 6px !important;
  }
}

html body .reward-showcase-card > .reward-showcase-legendary-badge {
  position: absolute !important;
  left: 50% !important;
  top: 4px !important;
  z-index: 40 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 66px !important;
  min-width: 66px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid #ffd86c !important;
  border-radius: 0 !important;
  clip-path: polygon(0 50%, 7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%) !important;
  color: #fff4c8 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 38%),
    linear-gradient(135deg, #7e2801 0%, #c95a06 24%, #f3a91e 48%, #ffd76a 58%, #b84904 80%, #6e2100 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(72,20,0,.4),
    0 0 8px rgba(255,164,24,.3),
    0 2px 4px rgba(0,0,0,.38) !important;
  transform: translateX(-50%) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 5.4px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 3px rgba(255,222,130,.32) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  animation: rewardShowcaseDedicatedLegendaryPulse 3.6s ease-in-out infinite !important;
}
html body .reward-showcase-card > .reward-showcase-legendary-badge b {
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}
html body .reward-showcase-card > .reward-showcase-legendary-badge i {
  color: #fff0a7 !important;
  font-size: 4px !important;
  font-style: normal !important;
  line-height: 1 !important;
  opacity: .9 !important;
}
html body .reward-showcase-card > .reward-showcase-legendary-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px 5px !important;
  z-index: 2 !important;
  background: linear-gradient(105deg, transparent 37%, rgba(255,255,255,.58) 49%, transparent 61%) !important;
  background-size: 240% 100% !important;
  background-position: 150% 0 !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  animation: rewardShowcaseDedicatedLegendarySheen 6.4s ease-in-out infinite !important;
  pointer-events: none !important;
}
html body .reward-showcase-card.rarity-border-legendary .reward-showcase-frame {
  border-top-color: transparent !important;
}
html body .reward-showcase-card.rarity-border-legendary .reward-showcase-frame::before {
  display: none !important;
  content: none !important;
}
@keyframes rewardShowcaseDedicatedLegendaryPulse {
  0%, 100% { filter: brightness(.96); }
  50% { filter: brightness(1.12); }
}
@keyframes rewardShowcaseDedicatedLegendarySheen {
  0%, 70% {
    opacity: 0;
    background-position: 150% 0;
  }
  74% { opacity: .75; }
  82% {
    opacity: .15;
    background-position: -50% 0;
  }
  84%, 100% {
    opacity: 0;
    background-position: -50% 0;
  }
}
@media (max-width: 680px) {
  html body .reward-showcase-card > .reward-showcase-legendary-badge {
    width: 62px !important;
    min-width: 62px !important;
    height: 14px !important;
    min-height: 14px !important;
    padding-inline: 5px !important;
    font-size: 5px !important;
  }
}

html body .peek-inside-grid .reward-row.peek-legendary-reward {
  isolation: isolate !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .peek-legendary-frame {
  position: absolute;
  inset: -5px -4px;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: var(--bryer-css-v60-legendaryframe, url("/images/legendaryframe.png")) center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 0 5px rgba(255, 183, 35, .24))
    drop-shadow(0 3px 6px rgba(0, 0, 0, .28));
  transform-origin: center;
  animation: peekLegendaryAuthoredFrameBreath 4.4s ease-in-out infinite;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward .peek-legendary-stars {
  z-index: 1 !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap,
html body .peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap),
html body .peek-inside-grid .reward-row.peek-legendary-reward > .chance,
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal,
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text,
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-stock-stamp {
  position: relative;
  z-index: 4 !important;
}
@keyframes peekLegendaryAuthoredFrameBreath {
  0%, 100% {
    opacity: .92;
    filter:
      drop-shadow(0 0 4px rgba(255, 183, 35, .20))
      drop-shadow(0 3px 6px rgba(0, 0, 0, .28));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 9px rgba(255, 201, 82, .38))
      drop-shadow(0 4px 8px rgba(0, 0, 0, .32));
  }
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .peek-legendary-frame {
    inset: -4px -3px;
  }
}

html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap {
  transform: translateX(16px) !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap) {
  transform: translateX(14px) !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .chance {
  transform: translateX(-12px) !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text {
  right: 18px !important;
  bottom: 17px !important;
  transform: none !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary::before,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary::before {
  background-image: url("/images/legendarytag2.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary::after,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary::after {
  background-image: url("/images/legendarytag2.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap {
    transform: translateX(10px) !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap) {
    transform: translateX(9px) !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .chance {
    transform: translateX(-8px) !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text {
    right: 14px !important;
    bottom: 14px !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
  html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}

html body .peek-inside-grid .reward-row.peek-legendary-reward {
  background: transparent !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .peek-legendary-stars {
  inset: 7px 11px !important;
  z-index: 1 !important;
  border-radius: 8px !important;
  background:
    linear-gradient(110deg, rgba(255, 198, 62, .13), rgba(255, 231, 158, .055) 48%, rgba(186, 103, 12, .10)),
    rgba(11, 18, 13, .92) !important;
  box-shadow:
    inset 0 0 18px rgba(255, 190, 45, .05),
    0 0 10px rgba(255, 174, 31, .045) !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap) {
  transform: translate(14px, 7px) !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text {
  position: absolute !important;
  left: auto !important;
  right: 28px !important;
  top: auto !important;
  bottom: 16px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 6 !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  top: 6px !important;
  right: 12px !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .peek-legendary-stars {
    inset: 6px 9px !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap) {
    transform: translate(9px, 5px) !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-type-text {
    right: 20px !important;
    bottom: 14px !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
  html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    top: 6px !important;
    right: 10px !important;
  }
}

html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap .reward-remaining-badge {
  right: 3px !important;
  bottom: 5px !important;
  transform: translateX(5px) !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  top: 12px !important;
  right: 21px !important;
  transform: scale(.78) !important;
  transform-origin: top right !important;
}
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary::before,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary::before,
html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary::after,
html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary::after {
  background-image: url("/images/legendarytag2.png") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-icon-wrap .reward-remaining-badge {
    right: -2px !important;
    bottom: 1px !important;
  }
  html body .peek-inside-grid .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
  html body .peek-inside-grid .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    top: 12px !important;
    right: 19px !important;
    transform: scale(.76) !important;
  }
}

html body .peek-inside-grid .reward-row .reward-icon-wrap {
  transform: translateX(16px) !important;
}
html body .peek-inside-grid .reward-row .reward-icon-wrap .reward-remaining-badge {
  right: 3px !important;
  bottom: 5px !important;
  transform: translateX(5px) !important;
}
html body .peek-inside-grid .reward-row > div:not(.reward-icon-wrap) {
  transform: translate(14px, 4px) !important;
}
html body .peek-inside-grid .reward-row > .chance {
  transform: translateX(-12px) !important;
}
html body .peek-inside-grid .reward-row > .reward-type-text {
  left: auto !important;
  top: auto !important;
  right: 20px !important;
  bottom: 16px !important;
  transform: none !important;
}
html body .peek-inside-grid .reward-row > .reward-rarity-seal,
html body .peek-inside-grid .reward-row .reward-rarity-seal {
  top: 12px !important;
  right: 14px !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row .reward-icon-wrap {
    transform: translateX(10px) !important;
  }
  html body .peek-inside-grid .reward-row .reward-icon-wrap .reward-remaining-badge {
    right: -2px !important;
    bottom: 1px !important;
    transform: translateX(5px) !important;
  }
  html body .peek-inside-grid .reward-row > div:not(.reward-icon-wrap) {
    transform: translate(9px, 3px) !important;
  }
  html body .peek-inside-grid .reward-row > .chance {
    transform: translateX(-8px) !important;
  }
  html body .peek-inside-grid .reward-row > .reward-type-text {
    right: 15px !important;
    bottom: 10px !important;
  }
  html body .peek-inside-grid .reward-row > .reward-rarity-seal,
  html body .peek-inside-grid .reward-row .reward-rarity-seal {
    top: 11px !important;
    right: 12px !important;
  }
}

html body .peek-inside-grid .reward-row:not(.peek-legendary-reward) {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 42%),
    repeating-linear-gradient(128deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(38deg, rgba(232,221,190,.012) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.028) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 68%, rgba(255,255,255,.020) 0 1px, transparent 1.4px) !important;
  background-size: auto, 19px 19px, 27px 27px, 31px 31px, 37px 37px !important;
  background-position: center !important;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat !important;
}

html body .peek-inside-grid .reward-row.peek-epic-reward {
  isolation: isolate !important;
  overflow: visible !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 0 12px rgba(185, 100, 255, .055),
    inset 0 0 24px rgba(116, 36, 190, .035) !important;
  animation: peekEpicContainedAura 4.8s ease-in-out infinite !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward::before,
html body .peek-inside-grid .reward-row.peek-epic-reward::after {
  content: none !important;
  display: none !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-inner-fx {
  position: absolute;
  inset: 14px 20px;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 7px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 52%, rgba(213, 145, 255, .13) 0, rgba(192, 112, 255, .06) 18%, transparent 38%),
    radial-gradient(circle at 78% 45%, rgba(171, 83, 255, .11) 0, rgba(151, 64, 229, .05) 16%, transparent 35%),
    linear-gradient(90deg, transparent 0%, rgba(194, 111, 255, .045) 30%, rgba(207, 137, 255, .075) 50%, rgba(194, 111, 255, .045) 70%, transparent 100%);
  transform-origin: center;
  animation: peekEpicContainedMist 5.4s ease-in-out infinite;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-frame {
  position: absolute;
  inset: -4px;
  z-index: 2;
  display: block;
  pointer-events: none;
  background: var(--bryer-css-v60-epicframe, url("/images/epicframe.png")) center / 100% 100% no-repeat;
  transform-origin: center;
  animation: peekEpicFrameBreath 4.8s ease-in-out infinite;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-legendary-stars.peek-epic-stars,
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-stars {
  inset: 13px 19px !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: 7px !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-icon-wrap,
html body .peek-inside-grid .reward-row.peek-epic-reward > div:not(.reward-icon-wrap),
html body .peek-inside-grid .reward-row.peek-epic-reward > .chance,
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal,
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-type-text,
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-stock-stamp {
  position: relative;
  z-index: 4 !important;
}

html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal,
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-type-text,
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-stock-stamp {
  position: absolute !important;
}
@keyframes peekEpicContainedAura {
  0%, 100% {
    box-shadow:
      inset 0 0 10px rgba(185, 100, 255, .045),
      inset 0 0 20px rgba(116, 36, 190, .028);
  }
  50% {
    box-shadow:
      inset 0 0 15px rgba(206, 139, 255, .075),
      inset 0 0 28px rgba(135, 49, 214, .048);
  }
}
@keyframes peekEpicContainedMist {
  0%, 100% {
    opacity: .68;
    transform: scale(.96);
  }
  50% {
    opacity: .96;
    transform: scale(1);
  }
}
@keyframes peekEpicFrameBreath {
  0%, 100% {
    opacity: .94;
    filter: brightness(.98);
  }
  50% {
    opacity: 1;
    filter: brightness(1.08);
  }
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-inner-fx {
    inset: 12px 16px;
  }
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-frame {
    inset: -3px;
  }
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-legendary-stars.peek-epic-stars,
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-stars {
    inset: 11px 15px !important;
  }
}

html body .peek-inside-grid .reward-row.peek-epic-reward {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-inner-fx {
  inset: 17px 26px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at 22% 52%, rgba(211, 139, 255, .19) 0%, rgba(178, 89, 244, .08) 24%, transparent 58%),
    radial-gradient(ellipse at 76% 46%, rgba(170, 76, 255, .16) 0%, rgba(133, 43, 213, .065) 22%, transparent 56%) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: .82 !important;
  transform: scale(.92) !important;
  animation: peekEpicContainedGlowOnly 5.4s ease-in-out infinite !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-legendary-stars.peek-epic-stars,
html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-stars {
  inset: 17px 26px !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
  position: absolute !important;
  top: 12px !important;
  right: 21px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 18 !important;
}
@keyframes peekEpicContainedGlowOnly {
  0%, 100% {
    opacity: .58;
    transform: scale(.88);
  }
  50% {
    opacity: .9;
    transform: scale(.96);
  }
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-inner-fx,
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-legendary-stars.peek-epic-stars,
  html body .peek-inside-grid .reward-row.peek-epic-reward > .peek-epic-stars {
    inset: 15px 22px !important;
  }
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
    top: 12px !important;
    right: 19px !important;
  }
}

html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
  position: absolute !important;
  isolation: isolate !important;
  overflow: visible !important;
  clip-path: none !important;
  border-color: transparent !important;
  background: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  top: 12px !important;
  right: 21px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 18 !important;
  box-shadow: none !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic::before,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/images/epictag2.png") center / contain no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.34))
    drop-shadow(0 0 6px rgba(189,106,255,.18));
  pointer-events: none !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic::after,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/images/epictag2.png") center / contain no-repeat !important;
  opacity: 0 !important;
  transform: none !important;
  filter:
    grayscale(1)
    brightness(3.1)
    contrast(.45)
    drop-shadow(0 0 6px rgba(255,255,255,.42));
  mix-blend-mode: screen !important;
  clip-path: polygon(-32% 0, -10% 0, 5% 100%, -17% 100%) !important;
  animation: peekInsideEpicTagArtworkSheen 6.2s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes peekInsideEpicTagArtworkSheen {
  0%, 62% {
    opacity: 0;
    clip-path: polygon(-32% 0, -10% 0, 5% 100%, -17% 100%);
  }
  68% { opacity: .22; }
  75% { opacity: .88; }
  84% {
    opacity: .16;
    clip-path: polygon(112% 0, 134% 0, 149% 100%, 127% 100%);
  }
  86%, 100% {
    opacity: 0;
    clip-path: polygon(112% 0, 134% 0, 149% 100%, 127% 100%);
  }
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    top: 12px !important;
    right: 19px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic::after,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic::after {
    animation-duration: 6.2s !important;
    animation-iteration-count: infinite !important;
  }
}

html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
  }
}

html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
}
html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic::before,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic::before {
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.16))
    drop-shadow(0 2px 4px rgba(0,0,0,.34))
    drop-shadow(0 0 6px rgba(189,106,255,.18)) !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
    width: 41px !important;
    min-width: 41px !important;
    max-width: 41px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
  }
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic::before,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic::before {
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.14))
      drop-shadow(0 2px 4px rgba(0,0,0,.34))
      drop-shadow(0 0 5px rgba(189,106,255,.16)) !important;
  }
}

html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
  top: 16px !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.peek-epic-reward > .reward-rarity-seal.rarity-seal-epic,
  html body .peek-inside-grid .reward-row.peek-epic-reward .reward-rarity-seal.rarity-seal-epic {
    top: 16px !important;
  }
}

html body .peek-inside-grid .reward-row.common-glow-card,
html body .peek-inside-grid .reward-row.uncommon-glow-card,
html body .peek-inside-grid .reward-row.rare-glow-card {
  isolation: isolate !important;
  border-color: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
}

html body .peek-inside-grid .reward-row.common-glow-card::before,
html body .peek-inside-grid .reward-row.uncommon-glow-card::before,
html body .peek-inside-grid .reward-row.rare-glow-card::before {
  content: "" !important;
  position: absolute;
  inset: -4px;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block !important;
}
html body .peek-inside-grid .reward-row.common-glow-card::before {
  background-image: var(--bryer-css-v60-commonframe, url("/images/commonframe.png")) !important;
}
html body .peek-inside-grid .reward-row.uncommon-glow-card::before {
  background-image: var(--bryer-css-v60-uncommonframe, url("/images/uncommonframe.png")) !important;
}
html body .peek-inside-grid .reward-row.rare-glow-card::before {
  background-image: var(--bryer-css-v60-rareframe, url("/images/rareframe.png")) !important;
}
html body .peek-inside-grid .reward-row.common-glow-card::after,
html body .peek-inside-grid .reward-row.uncommon-glow-card::after,
html body .peek-inside-grid .reward-row.rare-glow-card::after {
  content: none !important;
  display: none !important;
}

html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
  position: absolute !important;
  isolation: isolate !important;
  overflow: visible !important;
  clip-path: none !important;
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  left: auto !important;
  bottom: auto !important;
  top: 8px !important;
  right: 11px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 18 !important;
}
html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
}
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
}
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}
html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common::before,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common::before,
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon::before,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon::before,
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare::before,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
  pointer-events: none !important;
}
html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common::before,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common::before {
  background-image: url("/images/commontag2.png") !important;
}
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon::before,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon::before {
  background-image: url("/images/uncommontag2.png") !important;
}
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare::before,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare::before {
  background-image: url("/images/raretag2.png") !important;
}
html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common::after,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common::after,
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon::after,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon::after,
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare::after,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.common-glow-card::before,
  html body .peek-inside-grid .reward-row.uncommon-glow-card::before,
  html body .peek-inside-grid .reward-row.rare-glow-card::before {
    inset: -3px;
  }
  html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
  html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
    top: 7px !important;
    right: 9px !important;
  }
  html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
  }
  html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
  }
  html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
  html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
  }
}

html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
  top: 8px !important;
  right: 11px !important;
  transform: translate(-7px, 6px) !important;
  transform-origin: top right !important;
}
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
  html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
    top: 7px !important;
    right: 9px !important;
    transform: translate(-7px, 6px) !important;
    transform-origin: top right !important;
  }
  html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}

html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
  transform: translate(-10px, 6px) !important;
}
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
  html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
    transform: translate(-10px, 6px) !important;
  }
  html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
  html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
  }
}

html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
  transform: translate(-12px, 8px) !important;
}
@media (max-width: 680px) {
  html body .peek-inside-grid .reward-row.common-glow-card > .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.common-glow-card .reward-rarity-seal.rarity-seal-common,
  html body .peek-inside-grid .reward-row.uncommon-glow-card > .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.uncommon-glow-card .reward-rarity-seal.rarity-seal-uncommon,
  html body .peek-inside-grid .reward-row.rare-glow-card > .reward-rarity-seal.rarity-seal-rare,
  html body .peek-inside-grid .reward-row.rare-glow-card .reward-rarity-seal.rarity-seal-rare {
    transform: translate(-12px, 8px) !important;
  }
}

.rewards-modal.rewards-modal-wheel {
  overflow: visible !important;
}

.peek-wheel-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 640px;
  padding: 2px 0 18px;
  background: transparent !important;
}

.peek-wheel-stage.peek-inside-grid {
  position: relative;
  display: block !important;
  width: min(100%, 720px);
  height: 550px;
  margin: 0 auto;
  overflow: hidden;
  background: transparent !important;
  outline: none;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
}

.peek-wheel-stage.peek-inside-grid:focus-visible {
  outline: none;
}

.peek-wheel-stage {
  --peek-wheel-marker: #E6C365;
  --peek-wheel-marker-rgb: 230,195,101;
}

.peek-wheel-stage.peek-wheel-rarity-legendary,
.peek-wheel-stage.peek-wheel-rarity-none {
  --peek-wheel-marker: #E6C365;
  --peek-wheel-marker-rgb: 230,195,101;
}

.peek-wheel-stage.peek-wheel-rarity-epic {
  --peek-wheel-marker: #8440BC;
  --peek-wheel-marker-rgb: 132,64,188;
}

.peek-wheel-stage.peek-wheel-rarity-rare {
  --peek-wheel-marker: #4A8CCC;
  --peek-wheel-marker-rgb: 74,140,204;
}

.peek-wheel-stage.peek-wheel-rarity-uncommon {
  --peek-wheel-marker: #56B77F;
  --peek-wheel-marker-rgb: 86,183,127;
}

.peek-wheel-stage.peek-wheel-rarity-common {
  --peek-wheel-marker: #AAA49B;
  --peek-wheel-marker-rgb: 170,164,155;
}

.peek-wheel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 560px);
  transform-origin: center center;
  transition:
    transform .46s cubic-bezier(.18,.82,.2,1),
    opacity .34s ease,
    filter .34s ease;
  will-change: transform, opacity, filter;
  cursor: pointer;
}

.peek-wheel-item .reward-row {
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}

.peek-wheel-item .reward-row:hover {
  transform: none !important;
}

.peek-wheel-item.is-selected {
  z-index: 8;
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: translate(-50%, -50%) translateY(0) scale(1);
  cursor: default;
}

.peek-wheel-item.is-above.depth-1 {
  z-index: 6;
  opacity: .78;
  filter: blur(.15px) saturate(.92);
  transform: translate(-50%, -50%) translateY(-128px) scale(.86);
}

.peek-wheel-item.is-below.depth-1 {
  z-index: 6;
  opacity: .78;
  filter: blur(.15px) saturate(.92);
  transform: translate(-50%, -50%) translateY(128px) scale(.86);
}

.peek-wheel-item.is-above.depth-2 {
  z-index: 4;
  opacity: .34;
  filter: blur(1.1px) saturate(.78);
  transform: translate(-50%, -50%) translateY(-226px) scale(.69);
}

.peek-wheel-item.is-below.depth-2 {
  z-index: 4;
  opacity: .34;
  filter: blur(1.1px) saturate(.78);
  transform: translate(-50%, -50%) translateY(226px) scale(.69);
}

.peek-wheel-item.is-hidden {
  z-index: 0;
  opacity: 0;
  filter: blur(2px);
  transform: translate(-50%, -50%) scale(.56);
  pointer-events: none;
}

.peek-wheel-arrow {
  position: relative;
  z-index: 14;
  display: grid;
  place-items: center;
  width: 128px;
  height: 44px;
  padding: 0;
  border: 0;
  color: rgba(255,248,229,.98);
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  isolation: isolate;
}

.peek-wheel-arrow::before,
.peek-wheel-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(233,199,106,0), rgba(233,199,106,.85));
  box-shadow: 0 0 10px rgba(233,199,106,.2);
  pointer-events: none;
}

.peek-wheel-arrow::before {
  left: 6px;
}

.peek-wheel-arrow::after {
  right: 6px;
  transform: translateY(-50%) scaleX(-1);
}

.peek-wheel-arrow-ornament {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 58px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(227, 191, 102, .55);
  background:
    linear-gradient(180deg, rgba(255,235,182,.12), rgba(126,86,24,.14)),
    radial-gradient(circle at center, rgba(255,233,167,.08), rgba(255,233,167,0) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.18),
    0 0 12px rgba(233,199,106,.12);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  pointer-events: none;
}

.peek-wheel-arrow-ornament::before,
.peek-wheel-arrow-ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid rgba(233,199,106,.72);
  background: rgba(233,199,106,.12);
  box-shadow: 0 0 8px rgba(233,199,106,.14);
}

.peek-wheel-arrow-ornament::before { left: -12px; }
.peek-wheel-arrow-ornament::after { right: -12px; }

.peek-wheel-arrow-glyph {
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 30px;
  height: 18px;
  font-size: 0;
  color: transparent;
  line-height: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}

.peek-wheel-arrow-glyph::before,
.peek-wheel-arrow-glyph::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,249,231,.98), rgba(236,201,109,.92));
  box-shadow: 0 0 10px rgba(255,231,173,.22);
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph::before {
  left: 1px;
  transform-origin: right center;
  transform: rotate(-36deg);
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph::after {
  right: 1px;
  transform-origin: left center;
  transform: rotate(36deg);
}

.peek-wheel-arrow-down .peek-wheel-arrow-glyph::before {
  left: 1px;
  transform-origin: right center;
  transform: rotate(36deg);
}

.peek-wheel-arrow-down .peek-wheel-arrow-glyph::after {
  right: 1px;
  transform-origin: left center;
  transform: rotate(-36deg);
}

.peek-wheel-arrow:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,231,173,.28));
}

.peek-wheel-arrow:hover .peek-wheel-arrow-ornament {
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.2),
    0 0 16px rgba(233,199,106,.18);
}

.peek-wheel-arrow:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95);
}

.peek-wheel-arrow-up {
  margin-bottom: -2px;
  transform: translateY(-10px);
}

.peek-wheel-arrow-down {
  margin-top: -2px;
  transform: translateY(10px);
}

.peek-wheel-center-marker {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 74px;
  height: 1px;
  pointer-events: none;
  opacity: .44;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--peek-wheel-marker) 88%, transparent));
  box-shadow: 0 0 12px rgba(var(--peek-wheel-marker-rgb),.24);
}

.peek-wheel-center-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(var(--peek-wheel-marker-rgb),.78);
  background: rgba(var(--peek-wheel-marker-rgb),.12);
  transform: translateY(-50%) rotate(45deg);
}

.peek-wheel-center-marker-left {
  left: 16px;
}

.peek-wheel-center-marker-left::after {
  right: -4px;
}

.peek-wheel-center-marker-right {
  right: 16px;
  transform: scaleX(-1);
}

.peek-wheel-center-marker-right::after {
  right: -4px;
}

.peek-wheel-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(244,238,219,.68);
  font-size: 13px;
  text-align: center;
}

.peek-wheel-stage.wheel-direction-down.wheel-motion-0,
.peek-wheel-stage.wheel-direction-down.wheel-motion-1 {
  animation: peekWheelPhysicalDown .31s cubic-bezier(.25,.8,.25,1);
}

.peek-wheel-stage.wheel-direction-up.wheel-motion-0,
.peek-wheel-stage.wheel-direction-up.wheel-motion-1 {
  animation: peekWheelPhysicalUp .31s cubic-bezier(.25,.8,.25,1);
}

@keyframes peekWheelPhysicalDown {
  0% { transform: translateY(-3px); }
  55% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

@keyframes peekWheelPhysicalUp {
  0% { transform: translateY(3px); }
  55% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.peek-wheel-item .reward-row.peek-legendary-reward,
.peek-wheel-item .reward-row.peek-epic-reward,
.peek-wheel-item .reward-row.rare-glow-card,
.peek-wheel-item .reward-row.uncommon-glow-card,
.peek-wheel-item .reward-row.common-glow-card {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.peek-reward-inner-surface {
  display: none;
}

.peek-wheel-item .reward-row.peek-legendary-reward > .peek-reward-inner-surface,
.peek-wheel-item .reward-row.peek-epic-reward > .peek-reward-inner-surface,
.peek-wheel-item .reward-row.rare-glow-card > .peek-reward-inner-surface,
.peek-wheel-item .reward-row.uncommon-glow-card > .peek-reward-inner-surface,
.peek-wheel-item .reward-row.common-glow-card > .peek-reward-inner-surface {
  position: absolute;
  inset: 7px 9px;
  z-index: 0;
  display: block;
  border-radius: 7px;
  pointer-events: none;
  background-color: rgba(12,16,17,.76);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 42%),
    repeating-linear-gradient(128deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(38deg, rgba(232,221,190,.012) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.028) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 68%, rgba(255,255,255,.020) 0 1px, transparent 1.4px);
  background-size: auto, 19px 19px, 27px 27px, 31px 31px, 37px 37px;
  background-position: center;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

.peek-wheel-item .reward-row.peek-legendary-reward > .peek-reward-inner-surface {
  background-color: rgba(22,21,14,.78);
}

.peek-wheel-item .reward-row.peek-epic-reward > .peek-reward-inner-surface {
  background-color: rgba(18,14,24,.78);
}

.peek-wheel-item .reward-row.common-glow-card::before,
.peek-wheel-item .reward-row.uncommon-glow-card::before,
.peek-wheel-item .reward-row.rare-glow-card::before,
.peek-wheel-item .peek-legendary-frame,
.peek-wheel-item .peek-epic-frame {
  z-index: 2 !important;
}

.peek-wheel-item .reward-icon-wrap,
.peek-wheel-item .reward-row > div:not(.reward-icon-wrap),
.peek-wheel-item .chance,
.peek-wheel-item .reward-rarity-seal,
.peek-wheel-item .reward-type-text,
.peek-wheel-item .reward-stock-stamp {
  z-index: 4 !important;
}

@media (max-width: 820px) {
  .peek-wheel-shell {
    min-height: 600px;
  }
  .peek-wheel-stage.peek-inside-grid {
    width: min(100%, calc(100vw - 42px));
    height: 510px;
  }
  .peek-wheel-item {
    width: min(100%, 500px);
  }
  .peek-wheel-item.is-above.depth-1 {
    transform: translate(-50%, -50%) translateY(-116px) scale(.84);
  }
  .peek-wheel-item.is-below.depth-1 {
    transform: translate(-50%, -50%) translateY(116px) scale(.84);
  }
  .peek-wheel-item.is-above.depth-2 {
    transform: translate(-50%, -50%) translateY(-204px) scale(.66);
  }
  .peek-wheel-item.is-below.depth-2 {
    transform: translate(-50%, -50%) translateY(204px) scale(.66);
  }
  .peek-wheel-center-marker {
    width: 54px;
  }
}

@media (max-width: 680px) {
  .peek-wheel-shell {
    min-height: 560px;
  }
  .peek-wheel-stage.peek-inside-grid {
    height: 470px;
  }
  .peek-wheel-item {
    width: min(100%, 430px);
  }
  .peek-wheel-item.is-above.depth-1 {
    transform: translate(-50%, -50%) translateY(-102px) scale(.82);
  }
  .peek-wheel-item.is-below.depth-1 {
    transform: translate(-50%, -50%) translateY(102px) scale(.82);
  }
  .peek-wheel-item.is-above.depth-2 {
    transform: translate(-50%, -50%) translateY(-178px) scale(.62);
  }
  .peek-wheel-item.is-below.depth-2 {
    transform: translate(-50%, -50%) translateY(178px) scale(.62);
  }
  .peek-wheel-center-marker {
    display: none;
  }
  .peek-wheel-arrow {
    width: 112px;
    height: 38px;
  }
  .peek-wheel-arrow-glyph {
    width: 28px;
    height: 16px;
    transform: translate(-50%, -50%);
  }
  .peek-wheel-arrow-glyph::before,
  .peek-wheel-arrow-glyph::after {
    top: 7px;
    width: 14px;
    height: 3px;
  }
  .peek-wheel-arrow-ornament {
    width: 52px;
    height: 20px;
  }
  .peek-wheel-item .reward-row.peek-legendary-reward > .peek-reward-inner-surface,
  .peek-wheel-item .reward-row.peek-epic-reward > .peek-reward-inner-surface,
  .peek-wheel-item .reward-row.rare-glow-card > .peek-reward-inner-surface,
  .peek-wheel-item .reward-row.uncommon-glow-card > .peek-reward-inner-surface,
  .peek-wheel-item .reward-row.common-glow-card > .peek-reward-inner-surface {
    inset: 6px 8px;
  }
}

.peek-wheel-arrow-up {
  transform: translateY(-30px) !important;
}

.peek-wheel-arrow-down {
  transform: translateY(30px) !important;
}

.peek-wheel-arrow-up,
.peek-wheel-arrow-down {
  transform: none !important;
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph {
  top: calc(47% - 20px) !important;
}

.peek-wheel-arrow-down .peek-wheel-arrow-glyph {
  top: calc(47% + 20px) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.peek-wheel-arrow:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph,
.peek-wheel-arrow-down .peek-wheel-arrow-glyph {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.peek-wheel-arrow:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph {
  top: calc(50% + 1px) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.peek-wheel-arrow-down .peek-wheel-arrow-glyph {
  top: calc(50% - 1px) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.peek-wheel-arrow-up:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.peek-wheel-arrow-down:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.peek-wheel-arrow-up:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow-down:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow {
  width: 128px !important;
  height: 44px !important;
  transform: none !important;
}

.peek-wheel-arrow::before,
.peek-wheel-arrow::after {
  display: none !important;
  content: none !important;
}

.peek-wheel-arrow-ornament {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 46px !important;
  height: 46px !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(227, 191, 102, .62) !important;
  border-radius: 12px !important;
  clip-path: polygon(18% 0%, 82% 0%, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0% 82%, 0% 18%) !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,244,212,.22), rgba(255,244,212,0) 48%),
    linear-gradient(180deg, rgba(114,78,28,.92), rgba(64,42,14,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,233,.18),
    inset 0 0 0 1px rgba(255,224,150,.08),
    0 0 14px rgba(233,199,106,.14) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-ornament::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 9px !important;
  clip-path: polygon(18% 0%, 82% 0%, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0% 82%, 0% 18%) !important;
  border: 1px solid rgba(255,228,160,.18) !important;
  background: linear-gradient(180deg, rgba(255,239,196,.07), rgba(255,239,196,0)) !important;
}

.peek-wheel-arrow-ornament::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 58px !important;
  height: 58px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(233,199,106,.16), rgba(233,199,106,0) 68%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph,
.peek-wheel-arrow-down .peek-wheel-arrow-glyph {
  top: 50% !important;
  left: 50% !important;
  width: 28px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}

.peek-wheel-arrow-glyph::before,
.peek-wheel-arrow-glyph::after {
  top: 8px !important;
  width: 15px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,251,240,1), rgba(238,206,120,.96)) !important;
  box-shadow: 0 0 10px rgba(255,231,173,.18) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-glyph,
.peek-wheel-arrow-up:hover .peek-wheel-arrow-glyph,
.peek-wheel-arrow-down:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
  filter: drop-shadow(0 0 10px rgba(255,231,173,.24)) !important;
}

.peek-wheel-arrow:active .peek-wheel-arrow-glyph,
.peek-wheel-arrow-up:active .peek-wheel-arrow-glyph,
.peek-wheel-arrow-down:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-ornament {
  box-shadow:
    inset 0 1px 0 rgba(255,250,233,.2),
    inset 0 0 0 1px rgba(255,224,150,.1),
    0 0 16px rgba(233,199,106,.18) !important;
}

.peek-wheel-arrow-up {
  margin-bottom: -2px !important;
  transform: none !important;
}

.peek-wheel-arrow-down {
  margin-top: -2px !important;
  transform: none !important;
}

@media (max-width: 680px) {
  .peek-wheel-arrow-ornament {
    width: 42px !important;
    height: 42px !important;
  }
  .peek-wheel-arrow-up .peek-wheel-arrow-glyph,
  .peek-wheel-arrow-down .peek-wheel-arrow-glyph {
    width: 26px !important;
    height: 16px !important;
  }
  .peek-wheel-arrow-glyph::before,
  .peek-wheel-arrow-glyph::after {
    top: 7px !important;
    width: 14px !important;
  }
}

.peek-wheel-arrow {
  width: 96px !important;
  height: 54px !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
}

.peek-wheel-arrow::before,
.peek-wheel-arrow::after,
.peek-wheel-arrow-ornament::before,
.peek-wheel-arrow-ornament::after,
.peek-wheel-arrow-glyph::before,
.peek-wheel-arrow-glyph::after {
  content: none !important;
  display: none !important;
}

.peek-wheel-arrow-ornament {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 10px !important;
  clip-path: polygon(18% 0%, 82% 0%, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0% 82%, 0% 18%) !important;
  border: 1px solid rgba(233, 199, 106, .68) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,244,214,.18), rgba(255,244,214,0) 42%),
    linear-gradient(180deg, rgba(108,72,22,.96), rgba(65,42,12,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,224,.18),
    inset 0 0 0 1px rgba(255,226,150,.06),
    0 0 12px rgba(233,199,106,.14) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-ornament {
  filter: drop-shadow(0 0 10px rgba(233,199,106,.12));
}

.peek-wheel-arrow-glyph {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 18px 18px !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  z-index: 2 !important;
  filter: drop-shadow(0 0 8px rgba(255,229,160,.18));
  transition: transform .18s ease, filter .18s ease, opacity .18s ease !important;
}

.peek-wheel-arrow-up .peek-wheel-arrow-glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 12 L10 6 L16 12' fill='none' stroke='%23FFF5D8' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.peek-wheel-arrow-down .peek-wheel-arrow-glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 8 L10 14 L16 8' fill='none' stroke='%23FFF5D8' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
  filter: drop-shadow(0 0 10px rgba(255,229,160,.26));
}

.peek-wheel-arrow:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-ornament {
  box-shadow:
    inset 0 1px 0 rgba(255,248,224,.2),
    inset 0 0 0 1px rgba(255,226,150,.08),
    0 0 16px rgba(233,199,106,.18) !important;
}

.peek-wheel-arrow-up,
.peek-wheel-arrow-down {
  margin: 0 !important;
}

@media (max-width: 680px) {
  .peek-wheel-arrow {
    width: 86px !important;
    height: 48px !important;
  }
  .peek-wheel-arrow-ornament {
    width: 36px !important;
    height: 36px !important;
  }
  .peek-wheel-arrow-glyph {
    width: 16px !important;
    height: 16px !important;
    background-size: 16px 16px !important;
  }
}

.peek-wheel-arrow {
  width: 116px !important;
  height: 58px !important;
}

.peek-wheel-arrow-ornament {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 52px !important;
  height: 52px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 14px !important;
  clip-path: polygon(22% 0%, 78% 0%, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0% 78%, 0% 22%) !important;
  border: 1px solid rgba(236, 203, 118, .72) !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,248,226,.22), rgba(255,248,226,0) 32%),
    linear-gradient(180deg, rgba(142,100,31,.98) 0%, rgba(99,65,18,.98) 38%, rgba(60,38,11,.99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,236,.22),
    inset 0 -1px 0 rgba(52,29,4,.45),
    inset 0 0 0 2px rgba(255,227,149,.08),
    0 8px 16px rgba(0,0,0,.18),
    0 0 18px rgba(233,199,106,.14) !important;
  filter: drop-shadow(0 0 12px rgba(233,199,106,.14));
  pointer-events: none !important;
  overflow: visible !important;
}

.peek-wheel-arrow-ornament::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 11px !important;
  clip-path: polygon(22% 0%, 78% 0%, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0% 78%, 0% 22%) !important;
  border: 1px solid rgba(255,233,170,.24) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,245,213,.16), rgba(255,245,213,0) 36%),
    linear-gradient(180deg, rgba(102,66,19,.9), rgba(74,46,12,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,223,.16),
    inset 0 -1px 0 rgba(44,25,5,.35) !important;
}

.peek-wheel-arrow-ornament::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 92px !important;
  height: 26px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  background:
    linear-gradient(to right,
      transparent 0,
      transparent 6px,
      rgba(233,199,106,.88) 6px,
      rgba(233,199,106,.88) 18px,
      transparent 18px,
      transparent 74px,
      rgba(233,199,106,.88) 74px,
      rgba(233,199,106,.88) 86px,
      transparent 86px,
      transparent 100%),
    radial-gradient(circle at 10px 50%, rgba(255,229,155,.36) 0 2px, transparent 3px),
    radial-gradient(circle at 82px 50%, rgba(255,229,155,.36) 0 2px, transparent 3px),
    linear-gradient(to right,
      transparent 0,
      rgba(165,123,48,.9) 10px,
      rgba(207,170,87,.95) 16px,
      rgba(132,96,35,.9) 22px,
      transparent 30px,
      transparent 62px,
      rgba(132,96,35,.9) 70px,
      rgba(207,170,87,.95) 76px,
      rgba(165,123,48,.9) 82px,
      transparent 92px) !important;
  filter: drop-shadow(0 0 8px rgba(233,199,106,.12));
}

.peek-wheel-arrow-ornament {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,248,226,.18), rgba(255,248,226,0) 24%),
    radial-gradient(circle at 50% 82%, rgba(88,57,16,.3), rgba(88,57,16,0) 20%),
    linear-gradient(180deg, rgba(142,100,31,.98) 0%, rgba(99,65,18,.98) 38%, rgba(60,38,11,.99) 100%) !important;
}

.peek-wheel-arrow-glyph {
  width: 20px !important;
  height: 20px !important;
  background-size: 20px 20px !important;
  filter: drop-shadow(0 0 10px rgba(255,232,174,.24)) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-ornament {
  box-shadow:
    inset 0 1px 0 rgba(255,250,236,.24),
    inset 0 -1px 0 rgba(52,29,4,.45),
    inset 0 0 0 2px rgba(255,227,149,.1),
    0 10px 18px rgba(0,0,0,.2),
    0 0 22px rgba(233,199,106,.2) !important;
}

@media (max-width: 680px) {
  .peek-wheel-arrow {
    width: 102px !important;
    height: 52px !important;
  }
  .peek-wheel-arrow-ornament {
    width: 46px !important;
    height: 46px !important;
  }
  .peek-wheel-arrow-ornament::after {
    width: 82px !important;
    height: 24px !important;
  }
  .peek-wheel-arrow-glyph {
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
  }
}

.peek-wheel-arrow {
  position: relative !important;
  width: 156px !important;
  height: 64px !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  isolation: isolate !important;
}

.peek-wheel-arrow::before,
.peek-wheel-arrow::after {
  content: none !important;
  display: none !important;
}

.peek-wheel-arrow-ornament {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 58px !important;
  height: 48px !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
  border-radius: 50% 50% 46% 46% / 54% 54% 46% 46% !important;
  clip-path: none !important;
  border: 2px solid rgba(231, 196, 102, .9) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,249,226,.34), rgba(255,249,226,0) 28%),
    linear-gradient(180deg, #a77726 0%, #76501a 42%, #472c0c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.34),
    inset 0 -3px 5px rgba(31,17,2,.45),
    inset 0 0 0 2px rgba(255,227,150,.12),
    0 5px 12px rgba(0,0,0,.25),
    0 0 18px rgba(230,194,96,.18) !important;
  filter: drop-shadow(0 0 10px rgba(230,194,96,.1)) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.peek-wheel-arrow-ornament::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,232,164,.38) !important;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,227,151,.14) 0 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 50% 38%, rgba(255,245,213,.09), transparent 52%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(59,35,7,.45),
    0 0 0 1px rgba(255,229,153,.08) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-ornament::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 34px !important;
  height: 34px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,232,165,.14) !important;
  background: radial-gradient(circle, rgba(255,239,192,.1), rgba(255,239,192,0) 68%) !important;
  box-shadow: inset 0 0 10px rgba(255,226,145,.06) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-enamel {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 38px !important;
  height: 30px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(237,205,118,.3) !important;
  background:
    radial-gradient(circle at 42% 28%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(12,24,18,.45), transparent 58%),
    linear-gradient(180deg, #31483b 0%, #24362c 48%, #17261e 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.05),
    inset 0 -4px 7px rgba(0,0,0,.32),
    0 0 0 1px rgba(22,13,2,.28) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-crest {
  position: absolute !important;
  left: 50% !important;
  width: 24px !important;
  height: 9px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #efd18a 0%, #b77923 58%, #68400f 100%) !important;
  clip-path: polygon(0 100%, 14% 38%, 32% 72%, 50% 0, 68% 72%, 86% 38%, 100% 100%) !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.24)) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-crest.is-top {
  top: -8px !important;
}

.peek-wheel-arrow-crest.is-bottom {
  bottom: -8px !important;
  transform: translateX(-50%) rotate(180deg) !important;
}

.peek-wheel-arrow-jewel {
  position: absolute !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border: 1px solid rgba(255,226,147,.62) !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.48), transparent 25%),
    linear-gradient(135deg, #678e78, #284737 58%, #13271e) !important;
  box-shadow:
    inset 0 0 2px rgba(255,255,255,.12),
    0 0 7px rgba(95,167,125,.18) !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-jewel.is-left { left: -7px !important; }
.peek-wheel-arrow-jewel.is-right { right: -7px !important; }

.peek-wheel-arrow-filigree {
  position: absolute !important;
  top: 50% !important;
  width: 50px !important;
  height: 34px !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)) !important;
}

.peek-wheel-arrow-filigree.is-left { left: 7px !important; }
.peek-wheel-arrow-filigree.is-right {
  right: 7px !important;
  transform: translateY(-50%) scaleX(-1) !important;
}

.peek-wheel-arrow-filigree::before,
.peek-wheel-arrow-filigree::after,
.peek-wheel-arrow-filigree > i,
.peek-wheel-arrow-filigree > b {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
}

.peek-wheel-arrow-filigree::before {
  left: 2px !important;
  top: 3px !important;
  width: 43px !important;
  height: 17px !important;
  border-top: 2px solid rgba(232,197,103,.9) !important;
  border-right: 2px solid rgba(232,197,103,.68) !important;
  border-radius: 60% 48% 0 0 !important;
  transform: rotate(5deg) !important;
  box-shadow: inset 0 1px 0 rgba(255,245,213,.1) !important;
}

.peek-wheel-arrow-filigree::after {
  left: 7px !important;
  bottom: 3px !important;
  width: 38px !important;
  height: 15px !important;
  border-bottom: 2px solid rgba(183,130,40,.95) !important;
  border-right: 2px solid rgba(232,197,103,.58) !important;
  border-radius: 0 0 58% 44% !important;
  transform: rotate(-4deg) !important;
}

.peek-wheel-arrow-filigree > i {
  left: 8px !important;
  top: 8px !important;
  width: 15px !important;
  height: 8px !important;
  transform: rotate(-18deg) !important;
  border: 1px solid rgba(234,199,107,.8) !important;
  border-radius: 80% 15% 80% 15% !important;
  background: linear-gradient(135deg, rgba(242,210,128,.28), rgba(95,57,10,.22)) !important;
  box-shadow: inset 1px 0 0 rgba(255,246,216,.12) !important;
}

.peek-wheel-arrow-filigree > i::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 7px !important;
  width: 13px !important;
  height: 7px !important;
  transform: rotate(54deg) !important;
  border: 1px solid rgba(219,174,78,.7) !important;
  border-radius: 80% 15% 80% 15% !important;
  background: linear-gradient(135deg, rgba(239,203,117,.2), rgba(79,45,7,.18)) !important;
}

.peek-wheel-arrow-filigree > b {
  left: 0 !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border: 1px solid rgba(237,202,108,.78) !important;
  background: linear-gradient(135deg, #916522, #4a2c09) !important;
  box-shadow: 0 0 6px rgba(232,197,103,.12) !important;
}

.peek-wheel-arrow-glyph {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -50%) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0 8px rgba(255,237,193,.24)) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-ornament {
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.38),
    inset 0 -3px 5px rgba(31,17,2,.45),
    inset 0 0 0 2px rgba(255,227,150,.15),
    0 6px 14px rgba(0,0,0,.27),
    0 0 22px rgba(230,194,96,.24) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-filigree {
  filter: drop-shadow(0 0 5px rgba(232,197,103,.18)) !important;
}

.peek-wheel-arrow:hover .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.peek-wheel-arrow:active .peek-wheel-arrow-glyph {
  transform: translate(-50%, -50%) scale(.95) !important;
}

.peek-wheel-arrow-up,
.peek-wheel-arrow-down {
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 680px) {
  .peek-wheel-arrow {
    width: 136px !important;
    height: 58px !important;
  }
  .peek-wheel-arrow-ornament {
    width: 52px !important;
    height: 44px !important;
  }
  .peek-wheel-arrow-filigree {
    width: 43px !important;
    transform: translateY(-50%) scale(.88) !important;
  }
  .peek-wheel-arrow-filigree.is-left { left: 5px !important; }
  .peek-wheel-arrow-filigree.is-right {
    right: 5px !important;
    transform: translateY(-50%) scaleX(-1) scale(.88) !important;
  }
  .peek-wheel-arrow-glyph {
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
  }
}

.peek-wheel-arrow-enamel {
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px) !important;
  z-index: 1 !important;
}

.peek-wheel-arrow-ornament::before {
  z-index: 3 !important;
  pointer-events: none !important;
}

.peek-wheel-arrow-ornament::after {
  z-index: 2 !important;
}

.peek-wheel-arrow-enamel {
  display: none !important;
}

.peek-wheel-arrow-ornament {
  background:
    radial-gradient(circle at 42% 25%, rgba(255,255,255,.16), transparent 25%),
    radial-gradient(circle at 50% 76%, rgba(8,20,14,.42), transparent 58%),
    linear-gradient(180deg, #395648 0%, #294236 46%, #182b22 100%) !important;
}

.peek-wheel-arrow-ornament::after {
  content: none !important;
  display: none !important;
}

html body .peek-inside-grid .reward-row:not(.peek-legendary-reward) > .chance {
  position: relative !important;
  top: -4px !important;
  left: -1px !important;
}

html body .peek-inside-grid .reward-row:not(.peek-legendary-reward) > .reward-type-text {
  transform: translateX(-2px) !important;
}

html body .peek-inside-grid .reward-row:not(.peek-legendary-reward) .reward-icon-wrap > img {
  transform: translateY(-3px) !important;
}

html body .reward-showcase-card .reward-rarity-seal:not(.rarity-seal-legendary) {
  display: block !important;
  overflow: visible !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body .reward-showcase-card .reward-rarity-seal:not(.rarity-seal-legendary)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.42));
}

html body .reward-showcase-card .reward-rarity-seal:not(.rarity-seal-legendary)::after {
  content: none !important;
  display: none !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  background-image: url("/images/commontag2.png") !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  background-image: url("/images/uncommontag2.png") !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before {
  background-image: url("/images/raretag2.png") !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  background-image: url("/images/epictag2.png") !important;
}

html body .reward-showcase-card > .reward-showcase-legendary-badge {
  overflow: visible !important;
  border: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  padding: 0 !important;
}

html body .reward-showcase-card > .reward-showcase-legendary-badge b,
html body .reward-showcase-card > .reward-showcase-legendary-badge i {
  display: none !important;
}

html body .reward-showcase-card > .reward-showcase-legendary-badge::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: url("/images/legendarytag2.png") center / contain no-repeat !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.42));
}

html body .reward-showcase-card > .reward-showcase-legendary-badge::after {
  content: none !important;
  display: none !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  display: block !important;
  overflow: visible !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: url("/images/legendarytag2.png") center / contain no-repeat !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.42));
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after {
  content: none !important;
  display: none !important;
}

html body .reward-showcase-card .reward-rarity-seal:not(.rarity-seal-legendary)::before,
html body .reward-showcase-card > .reward-showcase-legendary-badge::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before {
  transform: translateY(2px) !important;
  transform-origin: center center !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  transform: translateY(2px) scale(1.08) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  transform: translateY(2px) scale(1.08) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before {
  transform: translateY(2px) scale(0.95) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  transform: translateY(2px) scale(0.95) !important;
}

html body .reward-showcase-card > .reward-showcase-legendary-badge::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before {
  transform: translateY(2px) scale(0.95) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  transform-origin: center center !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before {
  transform: translateY(4px) scale(0.95) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  transform: translateY(4px) scale(0.95) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  width: 118% !important;
  height: 118% !important;
  left: -9% !important;
  top: 0 !important;
  inset: auto !important;
  transform: translateY(4px) scale(1.18) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  width: 124% !important;
  height: 120% !important;
  left: -12% !important;
  top: 0 !important;
  inset: auto !important;
  transform: translateY(4px) scale(1.18) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-size: 90% auto !important;
  transform: translateY(4px) scale(0.92) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-size: 100% auto !important;
  transform: translateY(4px) scale(1.06) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-size: 110% auto !important;
  transform: translate(-4px, 4px) scale(1.12) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  left: 50% !important;
  right: auto !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 15px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon {
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 15px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 15px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 15px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  transform-origin: center center !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  transform: translateY(4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  transform: translate(-4px, 4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before {
  transform: translateY(4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  transform: translateY(4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  left: 50% !important;
  right: auto !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 16px !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 16px !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 16px !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 16px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.32));
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  transform: translateY(4px) !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  transform: translate(-4px, 4px) !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before {
  transform: translateY(4px) !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  transform: translateY(4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  transform: translateY(4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  transform: translate(-1px, 4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  transform: translate(-1px, 4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  transform: translate(1px, 4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  background-size: auto 94% !important;
  background-position: center center !important;
  transform: translate(-1px, 4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-uncommon::before {
  transform: translate(0px, 4px) !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  background-size: auto 94% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  background-size: auto 91% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  background-size: auto 91% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  height: 18px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  top: -1px !important;
  height: 100% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic {
  height: 16px !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  top: 0 !important;
  height: 100% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  transform: translate(-1px, 3px) !important;
  background-size: auto 91% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-rare::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-epic::before {
  transform: translateY(3px) !important;
  background-size: auto 91% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  background-size: auto 88% !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-common::before {
  background-size: auto 82% !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-type-text {
  position: absolute !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  z-index: 9 !important;
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-type-text::before,
.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-type-text::after {
  content: none !important;
  display: none !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 10 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)) !important;
  transform: none !important;
  animation: none !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image::after {
  content: none !important;
  display: none !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-common {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
}
.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-common::before {
  background-image: url("/images/commontag2.png") !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-uncommon {
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}
.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-uncommon::before {
  background-image: url("/images/uncommontag2.png") !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-rare {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-rare::before {
  background-image: url("/images/raretag2.png") !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-epic {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-epic::before {
  background-image: url("/images/epictag2.png") !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-legendary {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}
.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-legendary::before {
  background-image: url("/images/legendarytag2.png") !important;
}

@media (max-width: 680px) {
  .collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-type-text {
    left: 10px !important;
    bottom: 10px !important;
    font-size: 10px !important;
  }
  .collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image {
    top: 7px !important;
    right: 7px !important;
    transform: scale(.9) !important;
    transform-origin: top right !important;
  }
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-type-text {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image {
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-common {
  width: 114px !important;
  min-width: 114px !important;
  max-width: 114px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-uncommon {
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
  height: 37px !important;
  min-height: 37px !important;
  max-height: 37px !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-rare {
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-epic {
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-rarity-image.rarity-seal-legendary {
  width: 122px !important;
  min-width: 122px !important;
  max-width: 122px !important;
  height: 39px !important;
  min-height: 39px !important;
  max-height: 39px !important;
}

@media (max-width: 680px) {
  .collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-type-text {
    left: 50% !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
  }
  .collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image {
    top: 6px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) scale(.92) !important;
    transform-origin: top center !important;
  }
}

.collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image {
  top: 4px !important;
}

@media (max-width: 680px) {
  .collection-detail-overlay:not(.showcase-detail-overlay) .collection-detail-image-stage > .collection-detail-rarity-image {
    top: 2px !important;
  }
}

.selected-coffer-label-row {
  align-items: center !important;
}
.selected-coffer-inline-seals {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  min-width: 0;
}
.selected-coffer-label-row .selected-coffer-card-pack-note {
  margin-left: auto;
}
.selected-coffer-image-seal {
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  overflow: visible !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.selected-coffer-image-seal-legendary {
  width: 88px;
  height: 24px;
  background-image: var(--bryer-css-v61-legendarytag, url('/images/legendarytag.png'));
}
.selected-coffer-image-seal-vip {
  width: 58px;
  height: 22px;
  background-image: url('/images/vip.png');
}

.selected-coffer-inline-seals .inventory-coffer-seal.is-rarity {
  min-height: 18px;
  padding: 2px 7px;
}
.selected-coffer-inline-seals .inventory-coffer-seal.is-rarity.coffer-rarity-legendary {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  padding: 0 !important;
  width: 88px;
  min-width: 88px;
  height: 24px;
  background-image: var(--bryer-css-v61-legendarytag, url('/images/legendarytag.png')) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.selected-coffer-inline-seals .inventory-coffer-seal.is-rarity.coffer-rarity-legendary i,
.selected-coffer-inline-seals .inventory-coffer-seal.is-rarity.coffer-rarity-legendary::before,
.selected-coffer-inline-seals .inventory-coffer-seal.is-rarity.coffer-rarity-legendary::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 680px) {
  .selected-coffer-label-row {
    justify-content: center;
    gap: 6px;
  }
  .selected-coffer-inline-seals {
    margin-left: 0;
    justify-content: center;
  }
  .selected-coffer-label-row .selected-coffer-card-pack-note {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .selected-coffer-image-seal-legendary {
    width: 82px;
    height: 22px;
  }
  .selected-coffer-image-seal-vip {
    width: 54px;
    height: 20px;
  }
}

.vault-selection .selected-coffer-label-row,
.vault-selection .selected-coffer-label-row.has-card-pack-note {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
}
.vault-selection .selected-coffer-label-row:not(.has-card-pack-note) {
  flex-wrap: nowrap !important;
}
.vault-selection .selected-coffer-label-row .eyebrow {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.selected-coffer-inline-seals {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.vault-selection .selected-coffer-label-row .selected-coffer-card-pack-note {
  flex: 1 0 100% !important;
  margin-left: 0 !important;
}

html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary {
  position: absolute !important;
  inset: 3px auto auto 50% !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: url('/images/legendarytag2.png') center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 22 !important;
  overflow: visible !important;
}
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::before,
html body .reward-showcase-card .reward-rarity-seal.rarity-seal-legendary::after {
  content: none !important;
  display: none !important;
}

.selected-coffer-image-seal-common {
  width: 82px;
  height: 24px;
  background-image: url('/images/commontag2.png');
}
.selected-coffer-image-seal-uncommon {
  width: 90px;
  height: 26px;
  background-image: url('/images/uncommontag2.png');
}
.selected-coffer-image-seal-rare {
  width: 76px;
  height: 24px;
  background-image: url('/images/raretag2.png');
}
.selected-coffer-image-seal-epic {
  width: 76px;
  height: 24px;
  background-image: url('/images/epictag2.png');
}
.selected-coffer-image-seal-legendary {
  width: 88px;
  height: 24px;
  background-image: url('/images/legendarytag2.png');
}

.selected-coffer-inline-seals .inventory-coffer-seal.is-rarity {
  display: none !important;
}

@media (max-width: 680px) {
  .selected-coffer-image-seal-common {
    width: 76px;
    height: 22px;
  }
  .selected-coffer-image-seal-uncommon {
    width: 84px;
    height: 24px;
  }
  .selected-coffer-image-seal-rare,
  .selected-coffer-image-seal-epic {
    width: 70px;
    height: 22px;
  }
  .selected-coffer-image-seal-legendary {
    width: 82px;
    height: 22px;
  }
}

.selected-coffer-image-seal-common,
.selected-coffer-image-seal-uncommon,
.selected-coffer-image-seal-rare,
.selected-coffer-image-seal-epic,
.selected-coffer-image-seal-legendary {
  isolation: isolate;
}

.selected-coffer-image-seal-common {
  filter: drop-shadow(0 0 4px rgba(170, 164, 155, 0.30)) drop-shadow(0 0 8px rgba(170, 164, 155, 0.18));
}

.selected-coffer-image-seal-uncommon {
  filter: drop-shadow(0 0 4px rgba(86, 183, 127, 0.30)) drop-shadow(0 0 8px rgba(86, 183, 127, 0.18));
}

.selected-coffer-image-seal-rare {
  filter: drop-shadow(0 0 4px rgba(74, 140, 204, 0.32)) drop-shadow(0 0 8px rgba(74, 140, 204, 0.18));
}

.selected-coffer-image-seal-epic {
  filter: drop-shadow(0 0 4px rgba(132, 64, 188, 0.34)) drop-shadow(0 0 8px rgba(132, 64, 188, 0.20));
}

.selected-coffer-image-seal-legendary {
  filter: drop-shadow(0 0 4px rgba(238, 196, 94, 0.34)) drop-shadow(0 0 8px rgba(238, 196, 94, 0.20));
}

.vault-selection .selected-coffer-label-row.has-card-pack-note {
  flex-wrap: nowrap !important;
  width: 100% !important;
}
.vault-selection .selected-coffer-label-row.has-card-pack-note .selected-coffer-card-pack-note {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
@media (max-width: 680px) {
  .vault-selection .selected-coffer-label-row.has-card-pack-note {
    flex-wrap: wrap !important;
    width: fit-content !important;
  }
  .vault-selection .selected-coffer-label-row.has-card-pack-note .selected-coffer-card-pack-note {
    flex: 1 0 100% !important;
    margin-left: 0 !important;
    white-space: normal !important;
  }
}

.vault-selection .selected-coffer-label-row.has-card-pack-note {
  width: fit-content !important;
  max-width: 100% !important;
}
.vault-selection .selected-coffer-label-row.has-card-pack-note .selected-coffer-card-pack-note {
  margin-left: 8px !important;
}

.vault-selection.is-mythic-coffer {
  position: relative !important;
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.vault-selection.is-mythic-coffer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: 1 !important;
  border: 0 !important;
  transform: none !important;
  clip-path: none !important;
  background: var(--bryer-css-v60-mythicbg, url('/images/mythicbg.png')) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}
.vault-selection.is-mythic-coffer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border: 0 !important;
  clip-path: none !important;
  background: var(--bryer-css-v60-mythicpanel, url('/images/mythicpanel.png')) center / 100% 100% no-repeat !important;
}
.vault-selection.is-mythic-coffer .vault-selection-texture {
  display: none !important;
}
.vault-selection.is-mythic-coffer > div:not(.vault-selection-texture) {
  position: relative;
  z-index: 2;
}

.vault-selection.is-mythic-coffer > div:first-child {
  position: relative;
  left: 20px;
}
.vault-selection.is-mythic-coffer .open-count-picker > div {
  position: relative;
  top: -3px;
}
.vault-selection.is-mythic-coffer .open-count-picker button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
.vault-selection.is-mythic-coffer .open-count-picker > span {
  position: relative;
  top: 5px;
}
.vault-selection.is-mythic-coffer .open-count-picker small {
  position: relative;
  top: -10px;
  display: block;
}
.vault-selection.is-mythic-coffer .vault-action-group {
  position: relative;
  left: -5px;
  top: -3px;
}
.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary,
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell,
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell > .inventory-open-custom-button {
  width: 166px !important;
  min-width: 166px !important;
  max-width: 166px !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary {
  min-width: 166px !important;
  padding: 12px 18px !important;
}

.vault-selection.is-mythic-coffer > div:first-child {
  left: 50px;
}
.vault-selection.is-mythic-coffer .selected-coffer-card-pack-note {
  position: relative;
  left: -20px;
}
.vault-selection.is-mythic-coffer .open-count-picker > div {
  left: -5px;
  top: -10px;
}
.vault-selection.is-mythic-coffer .open-count-picker button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}
.vault-selection.is-mythic-coffer .open-count-picker > span {
  top: 8px;
  left: -4px;
}
.vault-selection.is-mythic-coffer .open-count-picker small {
  left: -10px;
}
.vault-selection.is-mythic-coffer .vault-action-group {
  left: -30px;
  top: -3px;
}
.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary,
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell,
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell > .inventory-open-custom-button {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary {
  min-width: 156px !important;
  padding: 11px 16px !important;
}

.vault-selection.is-mythic-coffer > div:first-child {
  left: 0 !important;
}
.vault-selection.is-mythic-coffer .selected-coffer-label-row .eyebrow,
.vault-selection.is-mythic-coffer > div:first-child > h2 {
  position: relative;
  left: 40px !important;
}
.vault-selection.is-mythic-coffer .selected-coffer-card-pack-note {
  position: relative;
  left: 20px !important;
}

.vault-selection.is-mythic-coffer .selected-coffer-info > h3 {
  transform: translateX(40px) !important;
}

.vault-selection.is-mythic-coffer .open-count-picker > span {
  display: none !important;
}
.vault-selection.is-mythic-coffer .open-count-picker > div {
  left: -25px !important;
}
.vault-selection.is-mythic-coffer .open-count-picker button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

.vault-selection.is-mythic-coffer .open-count-picker > div {
  left: -35px !important;
  top: 0 !important;
}
.vault-selection.is-mythic-coffer .open-count-picker small {
  left: -15px !important;
  top: 0 !important;
}

.vault-selection.is-mythic-coffer .open-count-picker > div {
  left: -50px !important;
  top: 3px !important;
}
.vault-selection.is-mythic-coffer .open-count-picker small {
  left: -25px !important;
}

.vault-selection.is-mythic-coffer .open-count-picker > div {
  left: -38px !important;
}
.vault-selection.is-mythic-coffer .open-count-picker button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}
.vault-selection.is-mythic-coffer .open-count-picker small {
  left: -40px !important;
  top: 1px !important;
}

.vault-selection.is-mythic-coffer .vault-action-group {
  left: -39px !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary,
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  flex-basis: 156px !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  transform: scaleX(0.8974359) !important;
  transform-origin: center center !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell > .inventory-open-custom-button {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
}

.vault-selection.is-mythic-coffer::before {
  z-index: 0 !important;
}
.vault-selection.is-mythic-coffer::after {
  z-index: 3 !important;
}
.vault-selection.is-mythic-coffer > div:not(.vault-selection-texture) {
  z-index: 4 !important;
}
.vault-selection.is-mythic-coffer .vault-action-group {
  z-index: 1 !important;
}

.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary {
  transform: scaleX(0.94871795) !important;
  transform-origin: center center !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  transform: scaleX(0.94871795) scaleY(0.89583333) !important;
  transform-origin: center center !important;
}

.vault-selection.is-mythic-coffer::after {
  content: none !important;
  display: none !important;
}
.vault-selection.is-mythic-coffer > .mythic-panel-frame-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  background: var(--bryer-css-v60-mythicpanel, url('/images/mythicpanel.png')) center / 100% 100% no-repeat !important;
}
.vault-selection.is-mythic-coffer::before {
  z-index: 0 !important;
}
.vault-selection.is-mythic-coffer > div:not(.vault-selection-texture):not(.vault-action-group) {
  position: relative !important;
  z-index: 40 !important;
}
.vault-selection.is-mythic-coffer .vault-action-group {
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate !important;
}

.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary {
  transform: scaleX(0.96794872) !important;
  transform-origin: right center !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  transform: scaleX(0.96153846) scaleY(0.89583333) !important;
  transform-origin: center center !important;
}
.vault-selection.is-mythic-coffer .inventory-open-button-shell.is-card-pack-open {
  overflow: hidden !important;
  border-radius: 8px !important;
}
.vault-selection.is-mythic-coffer .inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx {
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary {
  transform: scaleX(0.99358974) !important;
  transform-origin: right center !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  transform: scaleX(0.98076923) scaleY(0.89583333) !important;
  transform-origin: center center !important;
}

.vault-selection.is-mythic-coffer .vault-action-group > .open-secondary {
  transform: scaleX(1.00641026) !important;
  transform-origin: right center !important;
}
.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  transform: scaleX(1) scaleY(0.89583333) !important;
  transform-origin: center center !important;
}

.vault-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  left: 2px !important;
}

html body .reward-showcase-hall .reward-showcase-card > .reward-showcase-legendary-image-seal,
html body .reward-showcase-inventory .reward-showcase-card > .reward-showcase-legendary-image-seal {
  position: absolute !important;
  top: 1px !important;
  left: 50% !important;
  right: auto !important;
  z-index: 60 !important;
  display: block !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url('/images/legendarytag2.png') center / contain no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

@media (max-width: 680px) {
  html body .reward-showcase-hall .reward-showcase-card > .reward-showcase-legendary-image-seal,
  html body .reward-showcase-inventory .reward-showcase-card > .reward-showcase-legendary-image-seal {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}

.result-card.has-duplicate-choice,
.result-card.is-duplicate-declined {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.result-card.has-duplicate-choice > :not(.duplicate-reward-choice),
.result-card.is-duplicate-declined > :not(.duplicate-reward-resolution) {
  filter: grayscale(1) saturate(0) brightness(.55) !important;
  opacity: .24 !important;
  transition: filter .25s ease, opacity .25s ease;
}
.result-card.has-duplicate-choice::after {
  content: "";
  position: absolute;
  inset: 8% 5%;
  z-index: 20;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(190, 43, 50, .23), rgba(120, 18, 25, .09) 48%, transparent 74%);
  box-shadow: 0 0 28px rgba(255, 70, 78, .14), inset 0 0 24px rgba(255, 68, 76, .08);
  animation: duplicateRewardRedGlow 2.1s ease-in-out infinite;
}
.duplicate-reward-choice {
  position: absolute;
  inset: 10px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 111, 117, .45);
  border-radius: 14px;
  color: #fff4ef;
  text-align: center;
  background: linear-gradient(160deg, rgba(55, 10, 15, .9), rgba(18, 8, 10, .88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(209, 48, 57, .18);
  backdrop-filter: blur(4px);
}
.duplicate-reward-alert {
  color: #ff9ba0;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.duplicate-reward-choice strong {
  max-width: 230px;
  font-family: Georgia, serif;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.2;
}
.duplicate-reward-choice p {
  margin: 0 !important;
  color: rgba(255, 235, 231, .82) !important;
  font-size: 11px !important;
}
.duplicate-reward-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.duplicate-reward-actions .btn {
  min-width: 72px;
  min-height: 32px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 900;
}
.duplicate-reward-keep {
  color: #122017 !important;
  border-color: rgba(215, 241, 188, .7) !important;
  background: linear-gradient(145deg, #e7f0b4, #9fc67b) !important;
}
.duplicate-reward-no {
  color: #ffe7e8 !important;
  border-color: rgba(255, 111, 117, .55) !important;
  background: linear-gradient(145deg, rgba(132, 31, 39, .96), rgba(75, 16, 22, .96)) !important;
}
.duplicate-reward-resolution {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 25;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  text-transform: uppercase;
}
.duplicate-reward-resolution.is-no {
  color: #ffd5d7;
  border: 1px solid rgba(255, 97, 106, .38);
  background: rgba(83, 18, 24, .86);
}
.duplicate-reward-resolution.is-keep {
  color: #e9f7cf;
  border: 1px solid rgba(179, 218, 133, .4);
  background: rgba(34, 70, 31, .86);
}
@keyframes duplicateRewardRedGlow {
  0%, 100% {
    opacity: .72;
    transform: scale(.985);
  }
  50% {
    opacity: 1;
    transform: scale(1.012);
  }
}

.duplicate-exit-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 7, 4, .82);
  backdrop-filter: blur(8px);
}
.duplicate-exit-confirm-card {
  position: relative;
  width: min(430px, 100%);
  padding: 28px 26px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 102, 110, .42);
  border-radius: 17px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(176, 39, 47, .18), transparent 48%),
    linear-gradient(155deg, rgba(31, 22, 20, .98), rgba(13, 19, 14, .98));
  box-shadow: 0 28px 85px rgba(0,0,0,.62), 0 0 34px rgba(205, 50, 58, .13);
}
.duplicate-exit-warning-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border: 1px solid rgba(255, 116, 123, .62);
  border-radius: 50%;
  color: #ffd8d9;
  background: rgba(123, 25, 32, .65);
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(233, 66, 75, .2);
}
.duplicate-exit-confirm-card .eyebrow {
  margin-bottom: 7px;
  color: #ff9da2;
}
.duplicate-exit-confirm-card h2 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: clamp(23px, 4vw, 31px);
}
.duplicate-exit-confirm-card > p:not(.eyebrow) {
  margin: 0 auto;
  max-width: 360px;
  color: rgba(239, 232, 218, .76);
  font-size: 13px;
  line-height: 1.55;
}
.duplicate-exit-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.duplicate-exit-confirm-actions .btn {
  min-width: 132px;
}

@media (max-width: 680px) {
  .duplicate-reward-choice {
    inset: 6px;
    padding: 10px 8px;
  }
  .duplicate-reward-choice strong {
    font-size: 14px;
  }
  .duplicate-reward-actions .btn {
    min-width: 66px;
    min-height: 30px;
    padding: 6px 11px;
  }
  .duplicate-exit-confirm-actions {
    flex-direction: column;
  }
  .duplicate-exit-confirm-actions .btn {
    width: 100%;
  }
}

.result-card.has-duplicate-choice > :not(.duplicate-reward-choice) {
  filter: grayscale(1) saturate(0) brightness(.48) !important;
  opacity: .34 !important;
}
.result-card.has-duplicate-choice::after {
  inset: 22% 14% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(226, 48, 58, .23) 0%, rgba(164, 27, 36, .11) 42%, transparent 74%) !important;
  box-shadow: 0 0 30px rgba(255, 65, 75, .16) !important;
}
.duplicate-reward-choice {
  inset: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.duplicate-reward-alert,
.duplicate-reward-choice strong,
.duplicate-reward-choice p {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .92),
    0 0 12px rgba(209, 45, 55, .28) !important;
}

.result-card.has-duplicate-choice > :not(.duplicate-reward-choice):not(h3) {
  filter: grayscale(1) saturate(0) brightness(.48) !important;
  opacity: .34 !important;
}
.result-card.has-duplicate-choice > h3 {
  position: relative !important;
  z-index: 32 !important;
  filter: none !important;
  opacity: 1 !important;
  color: inherit !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(255,255,255,.08) !important;
}
.result-card.has-duplicate-choice::after {
  top: 4% !important;
  right: 12% !important;
  bottom: 58px !important;
  left: 12% !important;
}
.result-card.has-duplicate-choice .duplicate-reward-choice {
  top: 0 !important;
  right: 0 !important;
  bottom: 54px !important;
  left: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 12px 4px !important;
  justify-content: center !important;
}

@media (max-width: 680px) {
  .result-card.has-duplicate-choice::after {
    bottom: 52px !important;
  }
  .result-card.has-duplicate-choice .duplicate-reward-choice {
    bottom: 48px !important;
    padding: 6px 8px 3px !important;
  }
}

.duplicate-reward-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  background: rgba(3, 8, 5, .84);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.duplicate-reward-popup-card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(82vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(229, 100, 105, .38);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(177, 46, 53, .16), transparent 44%),
    linear-gradient(155deg, rgba(31, 41, 31, .99), rgba(13, 20, 15, .99));
  box-shadow:
    0 32px 95px rgba(0, 0, 0, .68),
    0 0 38px rgba(205, 52, 59, .12),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

.duplicate-reward-popup-header {
  padding: 24px 26px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(237, 214, 158, .12);
  background: linear-gradient(180deg, rgba(137, 38, 44, .1), transparent);
}

.duplicate-reward-popup-alert {
  display: inline-block;
  margin-bottom: 7px;
  color: #ff9fa4;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 13px rgba(229, 77, 85, .25);
}

.duplicate-reward-popup-header h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.08;
}

.duplicate-reward-popup-header p {
  max-width: 530px;
  margin: 10px auto 0;
  color: rgba(239, 232, 216, .74);
  font-size: 13px;
  line-height: 1.5;
}

.duplicate-reward-popup-list {
  display: grid;
  gap: 9px;
  max-height: min(52vh, 460px);
  padding: 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 180, 95, .38) rgba(255, 255, 255, .03);
}

.duplicate-reward-popup-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid rgba(247, 245, 237, .09);
  border-radius: 12px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .035), transparent 58%),
    rgba(8, 15, 10, .54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.duplicate-reward-popup-row.rarity-legendary {
  border-color: rgba(214, 180, 95, .3);
  box-shadow: inset 0 0 22px rgba(214, 180, 95, .055);
}

.duplicate-reward-popup-row.rarity-epic {
  border-color: rgba(132, 64, 188, .28);
}

.duplicate-reward-popup-row.rarity-rare {
  border-color: rgba(74, 140, 204, .25);
}

.duplicate-reward-popup-image {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 9px;
  background: radial-gradient(circle, rgba(255, 255, 255, .055), transparent 68%);
}

.duplicate-reward-popup-image img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.duplicate-reward-popup-copy {
  min-width: 0;
}

.duplicate-reward-popup-copy strong {
  display: block;
  overflow: hidden;
  color: #f5f0df;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duplicate-reward-popup-copy span {
  display: block;
  margin-top: 4px;
  color: rgba(226, 217, 193, .55);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.duplicate-reward-popup-quantity {
  min-width: 44px;
  padding: 6px 9px;
  border: 1px solid rgba(214, 180, 95, .23);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(214, 180, 95, .065);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.duplicate-reward-popup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.duplicate-reward-popup-actions .btn {
  min-width: 72px;
  min-height: 34px;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 900;
}

.duplicate-reward-popup-actions .btn:disabled {
  cursor: wait;
  opacity: .62;
}

.duplicate-reward-popup-footnote {
  margin: 0;
  padding: 0 22px 18px;
  color: rgba(230, 222, 204, .48);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 680px) {
  .duplicate-reward-popup-overlay {
    padding: 10px;
  }

  .duplicate-reward-popup-card {
    max-height: 90vh;
    border-radius: 15px;
  }

  .duplicate-reward-popup-header {
    padding: 19px 16px 14px;
  }

  .duplicate-reward-popup-header h2 {
    font-size: 25px;
  }

  .duplicate-reward-popup-header p {
    font-size: 12px;
  }

  .duplicate-reward-popup-list {
    gap: 8px;
    max-height: 57vh;
    padding: 12px;
  }

  .duplicate-reward-popup-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 68px;
    padding: 8px;
  }

  .duplicate-reward-popup-image {
    width: 48px;
    height: 48px;
  }

  .duplicate-reward-popup-image img {
    width: 44px;
    height: 44px;
  }

  .duplicate-reward-popup-copy strong {
    font-size: 14px;
  }

  .duplicate-reward-popup-quantity {
    min-width: 38px;
    padding: 5px 7px;
    font-size: 11px;
  }

  .duplicate-reward-popup-actions {
    grid-column: 2 / 4;
    justify-content: flex-end;
  }

  .duplicate-reward-popup-actions .btn {
    min-width: 78px;
    min-height: 32px;
  }
}

.reel-overlay.is-revealed .result-card .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-3 .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-4 .result-rarity-stamp,
.reel-overlay.is-revealed .result-grid.count-5 .result-rarity-stamp {
  top: 8px !important;
  left: 9px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}
.reel-overlay.is-revealed .result-card .result-type-text,
.reel-overlay.is-revealed .result-grid.count-3 .result-type-text,
.reel-overlay.is-revealed .result-grid.count-4 .result-type-text,
.reel-overlay.is-revealed .result-grid.count-5 .result-type-text {
  top: 8px !important;
  right: 9px !important;
  left: auto !important;
  bottom: auto !important;
  max-width: 88px !important;
  margin: 0 !important;
  text-align: right !important;
}

.result-card .duplicate-reward-resolution {
  display: none !important;
}

.reel-overlay .reel-card {
  overflow: visible !important;
}
.reel-overlay .reel-card > .reel-card-image-anchor {
  position: static !important;
  overflow: visible !important;
}
.reel-overlay .reel-card .reel-card-image-anchor > .reel-card-rarity-seal,
.reel-overlay .reel-card > .reel-card-rarity-seal {
  position: absolute !important;
  top: 3px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.reel-overlay.is-revealed .result-card .result-worth-label {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: fit-content !important;
  max-width: min(230px, 94%) !important;
  margin: 1px auto 4px !important;
  overflow: visible !important;
  color: #d9bf7a !important;
  font-family: inherit !important;
  font-size: clamp(12px, 1.15vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.62), 0 0 12px rgba(217,191,122,.14) !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}
.reel-overlay.is-revealed .result-grid.count-3 .result-card > .result-worth-label,
.reel-overlay.is-revealed .result-grid.count-4 .result-card > .result-worth-label,
.reel-overlay.is-revealed .result-grid.count-5 .result-card > .result-worth-label {
  display: block !important;
  max-width: 205px !important;
  margin: 1px auto 3px !important;
  overflow: visible !important;
  font-size: 11.5px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
}

.reel-overlay.is-revealed .reel-scene > .result-action-marker-axis > .result-action-buttons {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}
.reel-overlay.is-revealed .result-action-buttons > .continue-button {
  flex: 0 1 220px !important;
  width: 220px !important;
  min-width: 180px !important;
  max-width: min(220px, calc(50vw - 28px)) !important;
  justify-content: center !important;
}
.reel-overlay.is-revealed .result-action-buttons > .result-open-more-button,
.mobile-result-action-buttons > .mobile-result-open-more-button {
  border-color: rgba(214, 180, 95, .28) !important;
  color: rgba(247, 245, 237, .9) !important;
  background: linear-gradient(145deg, rgba(42, 58, 42, .9), rgba(18, 29, 20, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.24) !important;
}
.mobile-result-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
  pointer-events: auto;
}

@media (max-width: 820px) {
  .mobile-result-return-portal {
    padding-inline: 10px !important;
  }
  .mobile-result-return-portal > .mobile-result-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    pointer-events: auto !important;
  }
  .mobile-result-return-portal > .mobile-result-action-buttons > .mobile-result-return-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .mobile-result-return-portal > .mobile-result-action-buttons > .mobile-result-return-button:only-child {
    grid-column: 1 / -1 !important;
    width: min(250px, 100%) !important;
    justify-self: center !important;
  }
}

.reel-overlay.is-revealed .result-action-buttons > .result-open-more-button,
.mobile-result-action-buttons > .mobile-result-open-more-button {
  color: #f7f5ed !important;
  border-color: rgba(226, 255, 233, .28) !important;
  background: linear-gradient(135deg, #668f70, #345d42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(10,35,18,.28),
    0 5px 0 rgba(7,24,12,.32),
    0 10px 25px rgba(49,109,67,.22) !important;
}
.reel-overlay.is-revealed .result-action-buttons > .result-open-more-button:hover:not(:disabled),
.mobile-result-action-buttons > .mobile-result-open-more-button:hover:not(:disabled) {
  color: #ffffff !important;
  border-color: rgba(226, 255, 233, .44) !important;
  background: linear-gradient(135deg, #78a884, #416f50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(10,35,18,.24),
    0 7px 0 rgba(7,24,12,.28),
    0 14px 34px rgba(49,109,67,.3),
    0 0 22px rgba(86,156,103,.16) !important;
}

html body .reel-overlay.is-revealed .result-action-buttons > .result-open-more-button,
html body .reel-overlay.is-revealed .result-action-buttons > .result-return-button,
html body .mobile-result-action-buttons > .mobile-result-open-more-button,
html body .mobile-result-action-buttons > .result-return-button {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  min-height: 76px !important;
  height: 76px !important;
  padding: 10px 20px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: .075em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  transform: none !important;
}

html body .reel-overlay.is-revealed .result-action-buttons > .result-open-more-button,
html body .mobile-result-action-buttons > .mobile-result-open-more-button {
  color: #f7f5ed !important;
  border-color: rgba(210, 242, 218, .52) !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.075) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #73a180 0%, #527d60 72%, #426c50 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -5px 0 rgba(22, 67, 37, .34),
    0 5px 0 #31523b,
    0 9px 18px rgba(0,0,0,.28) !important;
}
html body .reel-overlay.is-revealed .result-action-buttons > .result-open-more-button:hover:not(:disabled),
html body .mobile-result-action-buttons > .mobile-result-open-more-button:hover:not(:disabled) {
  color: #fff !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.09) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #80ad8c 0%, #5c886a 72%, #497559 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -5px 0 rgba(22, 67, 37, .3),
    0 5px 0 #31523b,
    0 12px 24px rgba(0,0,0,.3) !important;
}

html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-rarity-stamp.rarity-seal-legendary {
  position: absolute !important;
  top: 8px !important;
  left: 9px !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 30 !important;
}
html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-type-text {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  max-width: 88px !important;
  margin: 0 !important;
  transform: none !important;
  text-align: right !important;
  z-index: 30 !important;
}

@media (max-width: 820px) {
  html body .mobile-result-action-buttons > .mobile-result-open-more-button,
  html body .mobile-result-action-buttons > .result-return-button {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
}

.card-inspector-card .card-inspector-card-description {
  left: 10.9% !important;
  right: 10.9% !important;
  bottom: 8.15% !important;
  height: 20.75% !important;
  font-size: clamp(8px, 3.48cqw, 11.1px) !important;
  line-height: 1.16 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-wrap: pretty !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 88px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  column-gap: 10px !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .peek-reward-inner-surface,
html body .peek-wheel-item .reward-row.peek-legendary-reward > .peek-legendary-stars,
html body .peek-wheel-item .reward-row.peek-legendary-reward > .peek-legendary-frame {
  position: absolute !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-icon-wrap {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
  transform: translateX(16px) !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap) {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: translate(14px, 4px) !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .chance {
  position: relative !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 3px 0 0 !important;
  transform: translateX(-12px) !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
html body .peek-wheel-item .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
  position: absolute !important;
  grid-column: auto !important;
  grid-row: auto !important;
  top: 12px !important;
  right: 21px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: scale(.78) !important;
  transform-origin: top right !important;
  z-index: 18 !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-type-text {
  position: absolute !important;
  grid-column: auto !important;
  grid-row: auto !important;
  top: auto !important;
  right: 20px !important;
  bottom: 16px !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 18 !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-stock-stamp {
  position: absolute !important;
  grid-column: auto !important;
  grid-row: auto !important;
  top: 50% !important;
  right: 74px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) rotate(-7deg) !important;
  z-index: 20 !important;
}

@media (max-width: 680px) {
  html body .peek-wheel-item .reward-row.peek-legendary-reward {
    grid-template-columns: 56px minmax(0, 1fr) 70px !important;
  }
  html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-icon-wrap {
    transform: translateX(10px) !important;
  }
  html body .peek-wheel-item .reward-row.peek-legendary-reward > div:not(.reward-icon-wrap) {
    transform: translate(9px, 3px) !important;
  }
  html body .peek-wheel-item .reward-row.peek-legendary-reward > .chance {
    transform: translateX(-8px) !important;
  }
  html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary,
  html body .peek-wheel-item .reward-row.peek-legendary-reward .reward-rarity-seal.rarity-seal-legendary {
    top: 12px !important;
    right: 19px !important;
    transform: scale(.76) !important;
  }
  html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-type-text {
    right: 15px !important;
    bottom: 10px !important;
  }
  html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-stock-stamp {
    right: 58px !important;
  }
}

html body .peek-wheel-item .reward-row.peek-legendary-reward {
  position: relative !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .peek-legendary-image-seal {
  position: absolute !important;
  top: 12px !important;
  right: 23px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  display: block !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/images/legendarytag2.png") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .52)) !important;
  transform: none !important;
  pointer-events: none !important;
}

html body .peek-wheel-item .reward-row.peek-legendary-reward > .reward-rarity-seal.rarity-seal-legendary {
  display: none !important;
}

@media (max-width: 680px) {
  html body .peek-wheel-item .reward-row.peek-legendary-reward > .peek-legendary-image-seal {
    top: 11px !important;
    right: 19px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
  }
}

html body .reel-overlay .reel-card.rarity-legendary {
  overflow: visible !important;
}
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor {
  position: relative !important;
  overflow: visible !important;
  transform: translateY(-3px) !important;
}
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  object-fit: contain !important;
  transform: translateY(-1px) !important;
}
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-rarity-seal.rarity-seal-legendary,
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-rarity-seal.rarity-seal-legendary {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/images/legendarytag2.png") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .52)) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
  z-index: 30 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-rarity-seal.rarity-seal-legendary::before,
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-rarity-seal.rarity-seal-legendary::after,
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-rarity-seal.rarity-seal-legendary::before,
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-rarity-seal.rarity-seal-legendary::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 820px) {
  html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor {
    transform: translateY(-2px) !important;
  }
  html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-rarity-seal.rarity-seal-legendary,
  html body .reel-overlay .reel-card.rarity-legendary > .reel-card-rarity-seal.rarity-seal-legendary {
    top: -10px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}

html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor {
  position: relative !important;
  overflow: visible !important;
  transform: translateY(-3px) !important;
}
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-legendary-seal-image {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  display: block !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.52)) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
  pointer-events: none !important;
}
html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-reward-image {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 820px) {
  html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor {
    transform: translateY(-2px) !important;
  }
  html body .reel-overlay .reel-card.rarity-legendary > .reel-card-image-anchor > .reel-card-legendary-seal-image {
    top: -10px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}

html body .reel-overlay.is-revealed .result-card.rarity-legendary {
  position: relative !important;
  overflow: visible !important;
}
html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-legendary-seal-image {
  position: absolute !important;
  top: 8px !important;
  left: 9px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  display: block !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.52)) !important;
  transform: none !important;
  pointer-events: none !important;
}
html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-type-text {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  max-width: 88px !important;
  margin: 0 !important;
  transform: none !important;
  text-align: right !important;
}
html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-icon-stage {
  transform: none !important;
}
html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-icon-stage > img {
  transform: none !important;
  object-fit: contain !important;
}
@media (max-width: 680px) {
  html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-legendary-seal-image {
    top: 7px !important;
    left: 8px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
  }
  html body .reel-overlay.is-revealed .result-card.rarity-legendary > .result-type-text {
    top: 7px !important;
    right: 8px !important;
    max-width: 80px !important;
  }
}

.card-album.card-album-modal-book .card-binder-glow-stage {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-album.card-album-modal-book .card-binder-glow-stage > .card-binder-shell {
  position: relative !important;
  z-index: 1 !important;
}

.card-album.card-album-modal-book .card-binder-ambient-glow {
  position: absolute !important;
  z-index: 0 !important;
  inset: -22px -28px -26px -26px !important;
  display: block !important;
  border-radius: 42px !important;
  pointer-events: none !important;
  opacity: .58 !important;
  background:
    radial-gradient(ellipse 31% 29% at 13% 22%, rgba(224, 181, 91, .29), transparent 72%),
    radial-gradient(ellipse 26% 34% at 88% 17%, rgba(114, 205, 145, .19), transparent 74%),
    radial-gradient(ellipse 38% 24% at 72% 91%, rgba(226, 174, 80, .22), transparent 76%),
    radial-gradient(ellipse 32% 25% at 22% 88%, rgba(81, 190, 130, .16), transparent 74%),
    radial-gradient(ellipse 70% 58% at 50% 52%, rgba(205, 164, 82, .085), transparent 78%) !important;
  filter: blur(17px) !important;
  transform: translateZ(0) scale(.985) !important;
  animation: cardAlbumAmbientGlow 6.8s ease-in-out infinite !important;
  will-change: opacity, filter, transform;
}

.card-album.card-album-modal-book .card-book-slot {
  transition: z-index 0s linear .2s !important;
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  transform: translateZ(0) translateY(0) scale(1) !important;
  transform-origin: center center !important;
  transition:
    transform .22s cubic-bezier(.2, .72, .24, 1),
    filter .22s ease !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .card-album.card-album-modal-book .card-book-slot:hover {
    z-index: 40 !important;
    transition-delay: 0s !important;
  }

  .card-album.card-album-modal-book .card-book-slot:hover .album-preset-card {
    transform: translateZ(0) translateY(-2px) scale(1.035) !important;
    filter: brightness(1.035) !important;
  }
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card:focus-visible {
  z-index: 41 !important;
  transform: translateZ(0) translateY(-2px) scale(1.035) !important;
  filter: brightness(1.04) !important;
  outline: 1px solid rgba(240, 212, 143, .62) !important;
  outline-offset: 4px !important;
}

@keyframes cardAlbumAmbientGlow {
  0%, 100% {
    opacity: .50;
    filter: blur(17px) brightness(.96);
    transform: translateZ(0) scale(.98);
  }
  50% {
    opacity: .64;
    filter: blur(19px) brightness(1.08);
    transform: translateZ(0) scale(1.012);
  }
}

@media (max-width: 680px) {
  .card-album.card-album-modal-book .card-binder-ambient-glow {
    inset: -15px -14px -18px -14px !important;
    opacity: .48 !important;
    filter: blur(13px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-album.card-album-modal-book .card-binder-ambient-glow {
    animation: none !important;
  }

  .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    transition-duration: .001ms !important;
  }
}

.card-album.card-album-modal-book .card-binder-glow-stage {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.card-album.card-album-modal-book .card-binder-glow-stage > .card-binder-shell {
  position: relative !important;
  z-index: 3 !important;
}

.card-album.card-album-modal-book .card-binder-ambient-glow {
  z-index: 1 !important;
  inset: -25px -32px -29px -31px !important;
  opacity: .88 !important;
  border-radius: 48px !important;
  background:
    radial-gradient(ellipse 24% 30% at 8% 22%, rgba(242, 198, 102, .48), transparent 73%),
    radial-gradient(ellipse 22% 28% at 91% 16%, rgba(127, 224, 164, .31), transparent 74%),
    radial-gradient(ellipse 31% 22% at 78% 96%, rgba(239, 184, 86, .38), transparent 75%),
    radial-gradient(ellipse 27% 23% at 18% 94%, rgba(92, 211, 147, .27), transparent 74%),
    radial-gradient(ellipse 54% 24% at 51% 2%, rgba(228, 184, 96, .22), transparent 79%),
    radial-gradient(ellipse 62% 22% at 48% 100%, rgba(220, 165, 74, .18), transparent 80%) !important;
  filter: blur(12px) saturate(1.18) brightness(1.08) !important;
  mix-blend-mode: screen !important;
  transform: translateZ(0) scale(.99) !important;
  animation: cardAlbumAmbientGlowVisible 6.8s ease-in-out infinite !important;
}

.card-album.card-album-modal-book .card-binder-ambient-glow::before,
.card-album.card-album-modal-book .card-binder-ambient-glow::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  mix-blend-mode: screen !important;
}

.card-album.card-album-modal-book .card-binder-ambient-glow::before {
  left: 5% !important;
  top: 10% !important;
  width: 23% !important;
  height: 26% !important;
  background: radial-gradient(ellipse at center, rgba(255, 211, 116, .32), rgba(255, 211, 116, .10) 42%, transparent 74%) !important;
  filter: blur(18px) !important;
  transform: rotate(-9deg) !important;
}

.card-album.card-album-modal-book .card-binder-ambient-glow::after {
  right: 4% !important;
  bottom: 7% !important;
  width: 29% !important;
  height: 24% !important;
  background: radial-gradient(ellipse at center, rgba(117, 220, 158, .25), rgba(232, 184, 87, .10) 44%, transparent 76%) !important;
  filter: blur(20px) !important;
  transform: rotate(8deg) !important;
}

@keyframes cardAlbumAmbientGlowVisible {
  0%, 100% {
    opacity: .76;
    filter: blur(12px) saturate(1.12) brightness(1);
    transform: translateZ(0) scale(.985);
  }
  50% {
    opacity: .94;
    filter: blur(14px) saturate(1.24) brightness(1.12);
    transform: translateZ(0) scale(1.01);
  }
}

@media (max-width: 680px) {
  .card-album.card-album-modal-book .card-binder-ambient-glow {
    inset: -16px -15px -18px -15px !important;
    opacity: .72 !important;
    filter: blur(10px) saturate(1.12) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-album.card-album-modal-book .card-binder-ambient-glow {
    animation: none !important;
    opacity: .84 !important;
  }
}

html[data-site-hidden="true"] *,
html[data-site-hidden="true"] *::before,
html[data-site-hidden="true"] *::after,
[data-performance-offscreen="true"],
[data-performance-offscreen="true"]::before,
[data-performance-offscreen="true"]::after,
[data-performance-offscreen="true"] *,
[data-performance-offscreen="true"] *::before,
[data-performance-offscreen="true"] *::after {
  animation-play-state: paused !important;
}

.app-shell > .topbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.modal-backdrop,
.help-backdrop,
.purchase-overlay,
.reel-overlay {
  will-change: opacity !important;
}

.achievements-sections-scroll {
  will-change: auto !important;
}

.box-card,
.reward-showcase-card,
.collection-card,
.history-item,
.reward-row {
  contain: layout style;
}

@media (min-width: 981px) {
  .main-layout {
    align-items: stretch !important;
  }

  .history-column {
    align-self: stretch !important;
    height: auto !important;
  }

  .history-column .history-panel,
  .history-column .history-panel-dynamic {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

.content {
  transition: opacity .19s ease, transform .19s ease !important;
}

.page-is-transitioning .content {
  filter: none !important;
  will-change: opacity, transform !important;
}

.carousel-selected-aura {
  filter: blur(16px) !important;
  will-change: transform, opacity !important;
}

@keyframes carouselAuraBreathe {
  0%, 100% {
    transform: scale(.94);
    opacity: .78;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

.carousel-orbit.orbit-two {
  width: 152px !important;
  height: 152px !important;
  will-change: transform, opacity !important;
}

@keyframes orbitPulse {
  0%, 100% { opacity: .56; }
  50% { opacity: 1; }
}

.card-album.card-album-modal-book .card-book-slot .album-preset-card {
  transform: translateY(0) scale(1) !important;
  transition: transform .22s cubic-bezier(.2, .72, .24, 1) !important;
  will-change: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .card-album.card-album-modal-book .card-book-slot:hover .album-preset-card,
  .card-album.card-album-modal-book .card-book-slot:focus-within .album-preset-card {
    transform: translateY(-2px) scale(1.035) !important;
    filter: none !important;
    will-change: transform !important;
  }
}

.card-album.card-album-modal-book .card-book-slot:not(:hover):not(:focus-within) .card-rarity-fx,
.card-album.card-album-modal-book .card-book-slot:not(:hover):not(:focus-within) .card-rarity-fx *,
.card-album.card-album-modal-book .card-book-slot:not(:hover):not(:focus-within) .card-rarity-fx::before,
.card-album.card-album-modal-book .card-book-slot:not(:hover):not(:focus-within) .card-rarity-fx::after {
  animation-play-state: paused !important;
  will-change: auto !important;
}

.card-album.card-album-modal-book .card-binder-ambient-glow {
  filter: blur(17px) saturate(1.14) brightness(1.03) !important;
  transform: scale(.985) !important;
  will-change: opacity, transform !important;
}

@keyframes cardAlbumAmbientGlow {
  0%, 100% {
    opacity: .50;
    transform: scale(.98);
  }
  50% {
    opacity: .64;
    transform: scale(1.015);
  }
}

@keyframes cardAlbumAmbientGlowVisible {
  0%, 100% {
    opacity: .76;
    transform: scale(.985);
  }
  50% {
    opacity: .94;
    transform: scale(1.012);
  }
}

.card-catalog-modal
.card-catalog-preset-card.rarity-legendary
.card-catalog-preset-foil {
  opacity: 0.70 !important;
  mix-blend-mode: screen !important;
  filter: saturate(0.92) brightness(0.94) !important;
}

.card-inspector-backdrop.rarity-legendary
.card-inspector-front.rarity-legendary
> .fourfun-card-holo {
  opacity: 0.40 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.02) brightness(0.94) !important;
}

.card-inspector-backdrop.rarity-legendary
.card-inspector-front.rarity-legendary
> .fourfun-card-gloss {
  opacity: 0.24 !important;
}

.card-inspector-backdrop.rarity-legendary
.card-inspector-front.rarity-legendary
> .fourfun-card-grain {
  opacity: 0.055 !important;
}

.card-inspector-rotator-host
> .card-inspector-attached-legendary-fx {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;

  background: transparent !important;
  box-shadow: none !important;

  transform: translateZ(-10px) !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;

  isolation: auto !important;
  contain: none !important;
}

.card-inspector-rotator-host
> .card-inspector-attached-legendary-fx
> .card-rarity-fx.is-inline {
  position: absolute !important;
  inset: -48px !important;
  z-index: 0 !important;

  overflow: visible !important;
  pointer-events: none !important;

  background-color: transparent !important;
  transform-style: preserve-3d !important;
}

.card-inspector-rotator-host
> .card-inspector-rotator {
  z-index: 2 !important;
}

.card-inspector-backdrop.rarity-legendary
.card-inspector-front.rarity-legendary
> .fourfun-card-holo {
  opacity: 0.55 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.02) brightness(0.94) !important;
}

.card-inspector-backdrop.rarity-legendary
.card-inspector-front.rarity-legendary
> .fourfun-card-gloss {
  opacity: 0.24 !important;
}

.card-inspector-backdrop.rarity-legendary
.card-inspector-front.rarity-legendary
> .fourfun-card-grain {
  opacity: 0.055 !important;
}

.card-catalog-modal
.card-catalog-preset-card.rarity-legendary
.card-catalog-preset-foil {
  opacity: 0.46 !important;
  mix-blend-mode: screen !important;
  filter: saturate(0.92) brightness(0.94) !important;
}

html body .view-page.view-vault > .open-stage::before {
  contain: paint !important;
  mix-blend-mode: normal !important;
  background: transparent url('/images/inventory-fireflies-v128.svg') center center / 100% 100% no-repeat !important;
}

html body .view-page.view-vault > .prize-gallery {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border-color: transparent !important;
  background:
    radial-gradient(ellipse at 16% 6%, rgba(95,132,79,.085), transparent 31%),
    radial-gradient(ellipse at 86% 92%, rgba(72,106,64,.07), transparent 34%),
    linear-gradient(180deg, rgba(18,31,21,.95), rgba(8,17,11,.975)) !important;
  box-shadow:
    inset 0 1px rgba(247,235,198,.035),
    inset 0 0 34px rgba(2,10,5,.25),
    0 18px 42px rgba(1,7,3,.28) !important;
}

html body .view-page.view-vault > .prize-gallery > :not(.prize-gallery-nature-frame) {
  position: relative !important;
  z-index: 2 !important;
}

html body .view-page.view-vault > .prize-gallery > .prize-gallery-nature-frame {
  position: absolute !important;
  inset: -2px !important;
  z-index: 3 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 5px 6px rgba(1,7,3,.26)) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-branch {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  border: 1px solid rgba(42,20,7,.88) !important;
  background:
    radial-gradient(ellipse 15px 5px at 20% 48%, rgba(35,16,5,.62) 0 29%, rgba(132,84,39,.28) 34% 43%, transparent 48%),
    radial-gradient(ellipse 12px 4px at 76% 53%, rgba(31,14,5,.58) 0 28%, rgba(145,91,43,.24) 34% 43%, transparent 48%),
    repeating-linear-gradient(5deg, rgba(26,11,4,.42) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #81572f 0%, #60401f 34%, #3b210f 69%, #211006 100%) !important;
  box-shadow:
    inset 0 2px 1px rgba(237,191,117,.15),
    inset 0 -3px 2px rgba(18,7,2,.58),
    0 3px 5px rgba(1,6,3,.34) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-branch.is-top,
html body .prize-gallery-nature-frame .prize-gallery-branch.is-bottom {
  left: 8px !important;
  right: 8px !important;
  height: 12px !important;
  border-radius: 48% 52% 44% 56% / 58% 42% 61% 39% !important;
  clip-path: polygon(0 38%, 4% 17%, 12% 8%, 24% 18%, 37% 9%, 51% 19%, 65% 8%, 78% 17%, 90% 9%, 97% 20%, 100% 43%, 98% 75%, 91% 91%, 78% 82%, 65% 93%, 51% 84%, 37% 94%, 24% 83%, 11% 92%, 3% 78%) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-branch.is-top {
  top: 1px !important;
  transform: rotate(.1deg) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-branch.is-bottom {
  bottom: 1px !important;
  transform: rotate(180.12deg) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-branch.is-left,
html body .prize-gallery-nature-frame .prize-gallery-branch.is-right {
  top: 8px !important;
  bottom: 8px !important;
  width: 10px !important;
  border-radius: 58% 42% 53% 47% / 44% 56% 48% 52% !important;
  background:
    radial-gradient(ellipse 4px 13px at 52% 27%, rgba(32,15,5,.65) 0 29%, rgba(132,83,39,.27) 34% 43%, transparent 48%),
    radial-gradient(ellipse 4px 12px at 45% 75%, rgba(30,13,5,.60) 0 28%, rgba(143,90,42,.23) 34% 43%, transparent 48%),
    repeating-linear-gradient(94deg, rgba(26,11,4,.42) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #81572f 0%, #60401f 34%, #3b210f 69%, #211006 100%) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-branch.is-left {
  left: 1px !important;
  transform: rotate(-.08deg) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-branch.is-right {
  right: 1px !important;
  transform: rotate(180.08deg) !important;
}

html body .prize-gallery-nature-frame .inventory-frame-twig {
  position: absolute !important;
  z-index: 5 !important;
  width: 76px !important;
  height: 45px !important;
  overflow: visible !important;
  opacity: .9 !important;
  filter: drop-shadow(0 2px 2px rgba(1,7,3,.4)) !important;
  pointer-events: none !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-shape { display: none !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig.twig-variant-a .twig-shape-a,
html body .prize-gallery-nature-frame .inventory-frame-twig.twig-variant-b .twig-shape-b,
html body .prize-gallery-nature-frame .inventory-frame-twig.twig-variant-c .twig-shape-c { display: inline !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-shadow { stroke-width: 7.2 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-main { stroke-width: 4.8 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-highlight { stroke-width: 1.05 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot-shadow { stroke-width: 3.9 !important; }
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot { stroke-width: 2.45 !important; }
html body .prize-gallery-nature-frame .prize-twig-top-left {
  left: 7px !important;
  top: -12px !important;
  transform: rotate(9deg) scale(.73) !important;
}
html body .prize-gallery-nature-frame .prize-twig-top-right {
  right: 8px !important;
  top: -12px !important;
  transform-origin: calc(100% - 2px) 50% !important;
  transform: scaleX(-1) rotate(7deg) scale(.68) !important;
}
html body .prize-gallery-nature-frame .prize-twig-bottom-left {
  left: 15% !important;
  bottom: -15px !important;
  transform: rotate(-7deg) scale(.56) !important;
}
html body .prize-gallery-nature-frame .prize-twig-bottom-right {
  right: 12% !important;
  bottom: -15px !important;
  transform-origin: calc(100% - 2px) 50% !important;
  transform: scaleX(-1) rotate(-5deg) scale(.59) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-flora {
  position: absolute !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  color: #f5f0df !important;
  font: 13px/1 Georgia, serif !important;
  text-shadow: 0 1px 1px rgba(48,24,10,.78) !important;
  filter: drop-shadow(0 2px 2px rgba(1,7,3,.38)) !important;
}
html body .prize-gallery-nature-frame .prize-gallery-flora::after {
  content: "" !important;
  position: absolute !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #d9b95e !important;
}
html body .prize-gallery-nature-frame .flora-top-left {
  left: 21px !important;
  top: 0 !important;
  transform: rotate(-12deg) scale(.78) !important;
}
html body .prize-gallery-nature-frame .flora-top-right {
  right: 23% !important;
  top: 0 !important;
  transform: rotate(9deg) scale(.58) !important;
}
html body .prize-gallery-nature-frame .flora-bottom-right {
  right: 18px !important;
  bottom: 0 !important;
  transform: rotate(16deg) scale(.74) !important;
}
html body .prize-gallery-nature-frame .flora-bottom-left {
  left: 32% !important;
  bottom: 0 !important;
  transform: rotate(-8deg) scale(.53) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-leaf {
  position: absolute !important;
  z-index: 6 !important;
  width: 11px !important;
  height: 6px !important;
  border: 1px solid rgba(34,54,26,.76) !important;
  border-radius: 100% 10% 100% 10% !important;
  background: linear-gradient(145deg, #6d8950, #3e5d2d) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.28) !important;
}
html body .prize-gallery-nature-frame .leaf-01 {
  left: 14% !important;
  top: 0 !important;
  transform: rotate(-24deg) scale(.68) !important;
}
html body .prize-gallery-nature-frame .leaf-02 {
  left: 46% !important;
  top: 3px !important;
  transform: rotate(18deg) scale(.5) !important;
}
html body .prize-gallery-nature-frame .leaf-03 {
  right: 0 !important;
  top: 26% !important;
  transform: rotate(76deg) scale(.72) !important;
}
html body .prize-gallery-nature-frame .leaf-04 {
  right: 1px !important;
  top: 70% !important;
  transform: rotate(109deg) scale(.55) !important;
}
html body .prize-gallery-nature-frame .leaf-05 {
  right: 31% !important;
  bottom: 0 !important;
  transform: rotate(158deg) scale(.66) !important;
}
html body .prize-gallery-nature-frame .leaf-06 {
  left: 48% !important;
  bottom: 2px !important;
  transform: rotate(-151deg) scale(.45) !important;
}
html body .prize-gallery-nature-frame .leaf-07 {
  left: 0 !important;
  top: 62% !important;
  transform: rotate(-78deg) scale(.73) !important;
}
html body .prize-gallery-nature-frame .leaf-08 {
  left: 1px !important;
  top: 29% !important;
  transform: rotate(-106deg) scale(.52) !important;
}

html body .prize-gallery-nature-frame .prize-gallery-petal {
  position: absolute !important;
  z-index: 8 !important;
  width: 7px !important;
  height: 4px !important;
  border-radius: 100% 18% 100% 18% !important;
  background: linear-gradient(145deg, #fffdf4, #eadfcf 72%, #c9b8a9) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.24) !important;
}
html body .prize-gallery-nature-frame .petal-01 {
  left: 7% !important;
  top: 5px !important;
  transform: rotate(31deg) scale(.62) !important;
}
html body .prize-gallery-nature-frame .petal-02 {
  left: 29% !important;
  top: 0 !important;
  transform: rotate(-17deg) scale(.44) !important;
}
html body .prize-gallery-nature-frame .petal-03 {
  right: 20% !important;
  top: 2px !important;
  transform: rotate(47deg) scale(.68) !important;
}
html body .prize-gallery-nature-frame .petal-04 {
  right: 0 !important;
  top: 49% !important;
  transform: rotate(101deg) scale(.52) !important;
}
html body .prize-gallery-nature-frame .petal-05 {
  right: 12% !important;
  bottom: 2px !important;
  transform: rotate(145deg) scale(.62) !important;
}
html body .prize-gallery-nature-frame .petal-06 {
  left: 35% !important;
  bottom: 0 !important;
  transform: rotate(-141deg) scale(.46) !important;
}
html body .prize-gallery-nature-frame .petal-07 {
  left: 0 !important;
  top: 78% !important;
  transform: rotate(-73deg) scale(.66) !important;
}
html body .prize-gallery-nature-frame .petal-08 {
  left: 2px !important;
  top: 14% !important;
  transform: rotate(-42deg) scale(.48) !important;
}

html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger,
html body .view-page.view-vault .collection-search-field {
  position: relative !important;
  border: 1px solid rgba(103,67,34,.82) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(127,84,43,.68) 9% 91%, transparent 95%) top 1px left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(58,33,15,.82) 9% 91%, transparent 95%) bottom 1px left / 100% 2px no-repeat,
    linear-gradient(180deg, #112219 0%, #09150e 100%) !important;
  box-shadow:
    inset 0 1px rgba(244,232,191,.04),
    inset 0 -3px rgba(2,10,5,.2),
    0 5px 13px rgba(1,7,3,.16) !important;
  overflow: hidden !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger::before,
html body .view-page.view-vault .collection-search-field::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 0 !important;
  border: 1px solid rgba(112,139,88,.07) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger > *,
html body .view-page.view-vault .collection-search-field > * {
  position: relative !important;
  z-index: 1 !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger:hover,
html body .view-page.view-vault .collection-filter-menu.is-open > .collection-filter-trigger,
html body .view-page.view-vault .collection-search-field:hover,
html body .view-page.view-vault .collection-search-field:focus-within {
  border-color: rgba(137,94,47,.94) !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(146,98,49,.74) 9% 91%, transparent 95%) top 1px left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(67,38,17,.86) 9% 91%, transparent 95%) bottom 1px left / 100% 2px no-repeat,
    linear-gradient(180deg, #173020 0%, #0c1c12 100%) !important;
}

html body .collection-filter-options-portal {
  border: 1px solid rgba(105,68,34,.9) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(127,84,43,.64) 9% 91%, transparent 95%) top 1px left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(58,33,15,.82) 9% 91%, transparent 95%) bottom 1px left / 100% 2px no-repeat,
    #08110c !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.74), inset 0 1px rgba(244,232,191,.04) !important;
}

html body .app-shell > .ticker-wrap {
  position: sticky !important;
  top: 74px !important;
  z-index: 999 !important;
}

html body .app-shell > .topbar::after,
html body .topbar::after {
  inset: -2px 11px -4px !important;
  border: 0 !important;
  border-radius: 46px 46px 38px 38px / 29px 29px 32px 32px !important;
  clip-path: polygon(1.1% 18%, 2.7% 7%, 8.5% 1%, 91.5% 1%, 97.3% 7%, 98.9% 18%, 99.6% 48%, 99% 77%, 97.2% 91%, 91.5% 98%, 8.5% 98%, 2.8% 91%, 1% 77%, .4% 48%) !important;
  background-color: #13281a !important;
  background-image: var(--bryer-css-v61-bgshare, url('/images/bgshare.png')) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: hidden !important;
}

html body .ticker::after {
  inset: 0 7px 0 !important;
  border-radius: 24px / 17px !important;
  clip-path: polygon(1.2% 22%, 3.4% 7%, 8% 1%, 92% 1%, 96.6% 7%, 98.8% 22%, 99.5% 51%, 98.7% 80%, 96.5% 94%, 92% 99%, 8% 99%, 3.5% 94%, 1.3% 80%, .5% 51%) !important;
  background-color: #13281a !important;
  background-image: var(--bryer-css-v61-bgshare, url('/images/bgshare.png')) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: hidden !important;
}

@media (max-width: 820px) {
  html body .app-shell > .ticker-wrap {
    top: calc(98px + env(safe-area-inset-top)) !important;
  }
  html body .app-shell > .topbar::after,
  html body .topbar::after {
    inset: -1px 4px -3px !important;
    border-radius: 25px !important;
  }
  html body .ticker::after {
    inset: 0 3px !important;
  }
  html body .prize-gallery-nature-frame .inventory-frame-twig {
    width: 68px !important;
    height: 41px !important;
  }
}

@media (max-width: 620px) {
  html body .prize-gallery-nature-frame .prize-twig-bottom-left,
  html body .prize-gallery-nature-frame .prize-twig-bottom-right {
    display: none !important;
  }
}

html body .ticker::after {
  inset: -2px 7px 0 !important;
}

html body .view-page.view-vault > .prize-gallery > .inventory-lower-suspension-layer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -86px !important;
  width: 100% !important;
  height: 92px !important;
  z-index: 2 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension {
  position: absolute !important;
  top: 0 !important;
  width: 18px !important;
  height: 100% !important;
  display: block !important;
  transform-origin: 50% 0 !important;
  pointer-events: none !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-left {
  left: 21% !important;
  animation: inventoryMainRopeWindLeft 14.6s ease-in-out infinite !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-right {
  right: 21% !important;
  animation: inventoryMainRopeWindRight 15.8s ease-in-out -5.4s infinite !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -1px !important;
  bottom: -3px !important;
  width: 7px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(132deg, rgba(244,211,145,.31) 0 2px, rgba(63,35,14,.24) 2px 4px),
    linear-gradient(90deg, #2c1709 0%, #74502a 22%, #bc8f50 48%, #68431f 73%, #251207 100%) !important;
  box-shadow:
    inset 1px 0 rgba(247,217,154,.22),
    inset -1px 0 rgba(21,9,3,.66),
    0 2px 4px rgba(1,7,3,.48) !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension > i,
html body .inventory-lower-suspension-layer > .inventory-lower-suspension > b {
  position: absolute !important;
  left: 50% !important;
  display: block !important;
  pointer-events: none !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension > i {
  top: -7px !important;
  width: 17px !important;
  height: 14px !important;
  transform: translateX(-50%) rotate(2deg) !important;
  border: 2px solid rgba(48,24,9,.92) !important;
  border-radius: 46% 54% 43% 57% !important;
  background: repeating-linear-gradient(138deg, #b1844b 0 3px, #62401d 3px 6px) !important;
  box-shadow: inset 1px 1px rgba(244,207,139,.18), 0 3px 5px rgba(1,7,3,.46) !important;
}

html body .inventory-lower-suspension-layer > .inventory-lower-suspension > b {
  bottom: -10px !important;
  width: 25px !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border: 2px solid rgba(48,23,8,.94) !important;
  border-radius: 49% 51% 44% 56% !important;
  background: repeating-linear-gradient(140deg, #ad7f45 0 3px, #563316 3px 6px) !important;
  box-shadow: inset 1px 1px rgba(243,203,132,.20), 0 3px 5px rgba(1,7,3,.50) !important;
}

html body .view-page.view-vault > .open-stage {
  isolation: auto !important;
  z-index: auto !important;
}
html body .view-page.view-vault .carousel-arrow.left {
  position: absolute !important;
  z-index: 21 !important;
}
html body .view-page.view-vault .carousel-arrow.right {
  position: absolute !important;
  z-index: 19 !important;
}

html body .view-page.view-vault > .prize-gallery {
  background-color: transparent !important;
  background-image: var(--bryer-css-v61-bg5, url('/images/bg5.png')) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-clip: padding-box !important;
}

html body .prize-gallery-nature-frame .inventory-frame-twig .twig-shadow {
  fill: none !important;
  stroke: #160904 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .82 !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-main {
  fill: none !important;
  stroke: #5b3519 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-highlight {
  fill: none !important;
  stroke: rgba(216,158,89,.42) !important;
  stroke-linecap: round !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot-shadow {
  fill: none !important;
  stroke: #160904 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .76 !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-offshoot {
  fill: none !important;
  stroke: #4d2b14 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-leaves ellipse {
  fill: #496333 !important;
  stroke: #213b1c !important;
  stroke-width: 1 !important;
}
html body .prize-gallery-nature-frame .inventory-frame-twig .twig-leaves ellipse:nth-child(even) {
  fill: #657d48 !important;
}

html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger {
  overflow: visible !important;
}
html body .view-page.view-vault .collection-control-botanical {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 76px !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  opacity: .94 !important;
}
html body .view-page.view-vault .collection-control-botanical > span {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-stem {
  height: 10px !important;
  border-top: 2px solid #69411f !important;
  border-radius: 50% !important;
  box-shadow: 0 -1px rgba(210,154,86,.16) !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-leaf {
  width: 11px !important;
  height: 6px !important;
  border: 1px solid rgba(28,49,22,.82) !important;
  border-radius: 100% 10% 100% 10% !important;
  background: linear-gradient(145deg, #738d50 0%, #405e2e 66%, #29431f 100%) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.32) !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-flower {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #d8ad49 !important;
  box-shadow:
    0 -4px 0 1px #f6f1df,
    0 4px 0 1px #eee5d4,
    -4px 0 0 1px #fffaf0,
    4px 0 0 1px #e7dcc9,
    0 1px 3px rgba(1,7,3,.45) !important;
}
html body .view-page.view-vault .collection-control-botanical .botanical-petal {
  width: 7px !important;
  height: 4px !important;
  border-radius: 100% 18% 100% 18% !important;
  background: linear-gradient(145deg, #fffdf4, #eadfcf 72%, #c9b8a9) !important;
  box-shadow: 0 1px 1px rgba(1,7,3,.24) !important;
}

html body .view-page.view-vault .collection-control-botanical.is-filter {
  top: -6px !important;
  right: 31px !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .botanical-stem {
  left: 3px !important;
  top: 12px !important;
  width: 61px !important;
  transform: rotate(-5deg) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .leaf-a {
  left: 20px !important;
  top: 5px !important;
  transform: rotate(-30deg) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .leaf-b {
  left: 39px !important;
  top: 11px !important;
  transform: rotate(31deg) scale(.88) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-filter .botanical-flower {
  right: 7px !important;
  top: 5px !important;
  transform: rotate(8deg) scale(.88) !important;
}

html body .view-page.view-vault .collection-control-botanical.is-rarity {
  right: 29px !important;
  bottom: -7px !important;
  width: 84px !important;
  height: 27px !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .botanical-stem {
  right: 4px !important;
  bottom: 9px !important;
  width: 69px !important;
  transform: rotate(7deg) scaleX(-1) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .leaf-a {
  right: 16px !important;
  bottom: 13px !important;
  transform: rotate(28deg) scale(.82) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .leaf-b {
  right: 38px !important;
  bottom: 5px !important;
  transform: rotate(-34deg) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .leaf-c {
  left: 8px !important;
  bottom: 12px !important;
  transform: rotate(42deg) scale(.72) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .botanical-flower {
  left: 22px !important;
  bottom: 6px !important;
  transform: rotate(-11deg) scale(.74) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .petal-a {
  left: 5px !important;
  top: 1px !important;
  transform: rotate(-25deg) scale(.76) !important;
}
html body .view-page.view-vault .collection-control-botanical.is-rarity .petal-b {
  left: 42px !important;
  top: 1px !important;
  transform: rotate(34deg) scale(.58) !important;
}

html body .view-page.view-vault .collection-search-field {
  overflow: hidden !important;
}
html body .view-page.view-vault .collection-search-field > span,
html body .view-page.view-vault .collection-search-field > input {
  position: relative !important;
  z-index: 2 !important;
}
html body .view-page.view-vault .collection-search-field input {
  padding-right: 54px !important;
}
html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
  position: absolute !important;
  right: -5px !important;
  top: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: 185px !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
  object-position: right center !important;
  opacity: .92 !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 1px 1px rgba(1,7,3,.48)) !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  html body .ticker::after {
    inset: -2px 3px 0 !important;
  }
  html body .view-page.view-vault > .prize-gallery > .inventory-lower-suspension-layer {
    top: -70px !important;
    height: 76px !important;
  }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-left { left: 18% !important; }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension.is-right { right: 18% !important; }
  html body .view-page.view-vault .collection-control-botanical.is-filter {
    right: 28px !important;
    transform: scale(.88) !important;
    transform-origin: right top !important;
  }
  html body .view-page.view-vault .collection-control-botanical.is-rarity {
    right: 27px !important;
    transform: scale(.86) !important;
    transform-origin: right bottom !important;
  }
  html body .view-page.view-vault .collection-search-field input {
    padding-right: 50px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 158px !important;
    max-height: 34px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .prize-gallery > .inventory-lower-suspension-layer {
    top: -58px !important;
    height: 64px !important;
  }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension::before { width: 5px !important; }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension > i {
    width: 13px !important;
    height: 11px !important;
  }
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension > b {
    width: 19px !important;
    height: 14px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 142px !important;
    max-height: 31px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .inventory-lower-suspension-layer > .inventory-lower-suspension {
    animation: none !important;
    transform: none !important;
  }
}

html body .view-page.view-vault > .inventory-rewards-bridge {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .reward-showcase-inventory {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -24px !important;
  bottom: -46px !important;
  width: 100% !important;
  height: auto !important;
  z-index: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer > .inventory-lower-suspension {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

html body .view-page.view-vault .collection-control-botanical {
  display: none !important;
}
html body .view-page.view-vault .collection-filter-menu > .collection-filter-trigger {
  overflow: hidden !important;
}

html body .view-page.view-vault .collection-search-field input {
  padding-right: 78px !important;
}
html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  top: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  opacity: .94 !important;
  transform: none !important;
  filter: drop-shadow(0 1px 1px rgba(1,7,3,.48)) !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .inventory-hero {
  z-index: auto !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .open-stage,
html body .view-page.view-vault .vault-carousel {
  isolation: auto !important;
}
html body .view-page.view-vault .inventory-character-charsit3 {
  z-index: 22 !important;
}
html body .view-page.view-vault .inventory-character-charsit2 {
  z-index: 23 !important;
}
html body .view-page.view-vault .carousel-arrow.left,
html body .view-page.view-vault .carousel-arrow.right {
  z-index: 60 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .inventory-rewards-bridge {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
  }
  html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
    top: -18px !important;
    bottom: -42px !important;
  }
  html body .view-page.view-vault .collection-search-field input {
    padding-right: 68px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 210px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
    top: -16px !important;
    bottom: -40px !important;
  }
  html body .view-page.view-vault .collection-search-field input {
    padding-right: 58px !important;
  }
  html body .view-page.view-vault .collection-search-field > .collection-search-leaf {
    width: 176px !important;
  }
}

html body .view-page.view-vault > .open-stage > .vault-carousel {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}
html body .view-page.view-vault .carousel-arrow.left {
  position: absolute !important;
  z-index: 80 !important;
  pointer-events: auto !important;
}

html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
  transform: translateY(-12px) !important;
}

html body .view-page.view-vault > .inventory-hero {
  z-index: auto !important;
  isolation: auto !important;
}
html body .view-page.view-vault .inventory-character-charsit3 {
  position: absolute !important;
  z-index: 0 !important;
  isolation: auto !important;
}
html body .view-page.view-vault .inventory-character-charsit3 > img {
  position: relative !important;
  z-index: 0 !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel {
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate !important;
}
html body .view-page.view-vault .vault-carousel > .carousel-arrow.left,
html body .view-page.view-vault .vault-carousel > .carousel-arrow.right {
  position: absolute !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

html body .view-page.view-vault > .prize-gallery::before {
  z-index: 0 !important;
}
html body .view-page.view-vault > .prize-gallery::after {
  content: "" !important;
  position: absolute !important;
  inset: 9px !important;
  z-index: 1 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(214, 186, 126, .13) !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow:
    inset 0 9px 12px rgba(3, 9, 5, .40),
    inset 9px 0 12px rgba(3, 9, 5, .30),
    inset 0 -15px 18px rgba(1, 6, 3, .52),
    inset -12px 0 16px rgba(1, 6, 3, .42),
    inset 0 1px 0 rgba(246, 225, 170, .10),
    0 0 0 1px rgba(29, 15, 6, .32) !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .prize-gallery > :not(.prize-gallery-nature-frame) {
  position: relative !important;
  z-index: 2 !important;
}
html body .view-page.view-vault > .prize-gallery > .prize-gallery-nature-frame {
  z-index: 3 !important;
}

@media (max-width: 680px) {
  html body .view-page.view-vault > .prize-gallery::after {
    inset: 7px !important;
    border-radius: 8px !important;
  }
}

html body .view-page.view-vault > .inventory-hero {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .inventory-hero > .hero-character.inventory-character-charsit3 {
  position: absolute !important;
  z-index: 0 !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .inventory-hero > .hero-character.inventory-character-charsit2 {
  position: absolute !important;
  z-index: 3 !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .open-stage {
  position: relative !important;
  z-index: 1 !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes inventoryCharsit3GentleFloat {
  0%, 100% { translate: 0 0; }
  28% { translate: 1px -3px; }
  56% { translate: -1px -7px; }
  78% { translate: 1px -3px; }
}
@keyframes inventoryCharsit2GentleFloat {
  0%, 100% { translate: 0 0; }
  32% { translate: -1px -4px; }
  62% { translate: 1px -7px; }
  82% { translate: 0 -2px; }
}
html body .view-page.view-vault > .inventory-hero > .inventory-character-charsit3 > img {
  animation: inventoryCharsit3GentleFloat 9.6s ease-in-out infinite !important;
  will-change: translate !important;
}
html body .view-page.view-vault > .inventory-hero > .inventory-character-charsit2 > img {
  animation: inventoryCharsit2GentleFloat 10.8s ease-in-out -2.4s infinite !important;
  will-change: translate !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .inventory-hero > .inventory-character-charsit3 > img,
  html body .view-page.view-vault > .inventory-hero > .inventory-character-charsit2 > img {
    animation: none !important;
    translate: 0 0 !important;
    will-change: auto !important;
  }
}

html body .view-page.view-vault > .inventory-hero,
html body .view-page.view-vault > .open-stage {
  isolation: auto !important;
}
html body .view-page.view-vault > .inventory-hero {
  z-index: auto !important;
}
html body .view-page.view-vault > .open-stage {
  z-index: auto !important;
  overflow: visible !important;
}

html body .view-page.view-vault > .inventory-hero > .hero-character.inventory-character-charsit3 {
  position: absolute !important;
  z-index: 20 !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .inventory-hero > .hero-character.inventory-character-charsit2 {
  position: absolute !important;
  z-index: 40 !important;
  isolation: auto !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-spotlights {
  z-index: 0 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface {
  z-index: 1 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-nature-frame {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > :not(.inventory-stage-spotlights):not(.inventory-stage-surface):not(.inventory-nature-frame):not(.vault-carousel) {
  position: relative !important;
  z-index: 3 !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-arrow.left,
html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-arrow.right {
  position: absolute !important;
  z-index: 100 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-spotlights {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
html body .view-page.view-vault .inventory-stage-spotlight {
  position: absolute !important;
  top: auto !important;
  bottom: -14px !important;
  display: block !important;
  width: clamp(132px, 10.5vw, 205px) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: .96 !important;
  filter: drop-shadow(0 8px 10px rgba(1, 6, 3, .42)) !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .view-page.view-vault .inventory-stage-spotlight.is-left {
  left: calc(22% + 18px) !important;
  right: auto !important;
  transform: none !important;
  transform-origin: center bottom !important;
}
html body .view-page.view-vault .inventory-stage-spotlight.is-right {
  right: calc(22% + 18px) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
  transform-origin: center bottom !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault .inventory-stage-spotlight {
    bottom: -12px !important;
    width: clamp(108px, 18vw, 150px) !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-left {
    left: calc(18% + 12px) !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-right {
    right: calc(18% + 12px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault .inventory-stage-spotlight {
    bottom: -9px !important;
    width: clamp(82px, 21vw, 112px) !important;
    opacity: .88 !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-left {
    left: calc(14% + 8px) !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-right {
    right: calc(14% + 8px) !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-spotlights {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight {
  top: auto !important;
  bottom: 5px !important;
  width: clamp(132px, 10.5vw, 205px) !important;
  transform-origin: center bottom !important;
}

html body .view-page.view-vault .inventory-stage-spotlight.is-left {
  left: max(50px, 4vw) !important;
  right: auto !important;
  transform: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight.is-right {
  right: max(50px, 4vw) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault .inventory-stage-spotlight {
    bottom: 4px !important;
    width: clamp(108px, 18vw, 150px) !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-left {
    left: 50px !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-right {
    right: 50px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault .inventory-stage-spotlight {
    bottom: 3px !important;
    width: clamp(82px, 21vw, 112px) !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-spotlights {
  z-index: 2 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface {
  z-index: 1 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame {
  z-index: 4 !important;
}

html body .view-page.view-vault > .open-stage > :not(.inventory-stage-spotlights):not(.inventory-stage-surface):not(.inventory-nature-frame):not(.vault-carousel) {
  position: relative !important;
  z-index: 5 !important;
}

html body .view-page.view-vault .inventory-stage-spotlight,
html body .view-page.view-vault .inventory-stage-spotlight-head {
  position: absolute !important;
  top: auto !important;
  bottom: 5px !important;
  display: block !important;
  width: clamp(132px, 10.5vw, 205px) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform-origin: center bottom !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-head {
  z-index: 1 !important;
  opacity: 1 !important;
  filter: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight {
  z-index: 2 !important;
  opacity: .96 !important;
  filter: drop-shadow(0 8px 10px rgba(1, 6, 3, .42)) !important;
}

html body .view-page.view-vault .inventory-stage-spotlight.is-left,
html body .view-page.view-vault .inventory-stage-spotlight-head.is-left {
  left: max(50px, 4vw) !important;
  right: auto !important;
  transform: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight.is-right,
html body .view-page.view-vault .inventory-stage-spotlight-head.is-right {
  right: max(50px, 4vw) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault .inventory-stage-spotlight,
  html body .view-page.view-vault .inventory-stage-spotlight-head {
    bottom: 4px !important;
    width: clamp(108px, 18vw, 150px) !important;
  }

  html body .view-page.view-vault .inventory-stage-spotlight.is-left,
  html body .view-page.view-vault .inventory-stage-spotlight-head.is-left {
    left: 50px !important;
  }

  html body .view-page.view-vault .inventory-stage-spotlight.is-right,
  html body .view-page.view-vault .inventory-stage-spotlight-head.is-right {
    right: 50px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault .inventory-stage-spotlight,
  html body .view-page.view-vault .inventory-stage-spotlight-head {
    bottom: 3px !important;
    width: clamp(82px, 21vw, 112px) !important;
  }
}

html body .view-page.view-vault > .open-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-surface {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html body .view-page.view-vault > .open-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  z-index: 3 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  contain: paint !important;
  mix-blend-mode: normal !important;
  background-color: transparent !important;
  background-image: url('/images/inventory-fireflies-v128.svg') !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-spotlights {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight,
html body .view-page.view-vault .inventory-stage-spotlight-head {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  display: block !important;
  width: clamp(132px, 10.5vw, 205px) !important;
  height: clamp(210px, 25vw, 360px) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform-origin: center bottom !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-head {
  z-index: 1 !important;
  background-image: url('/images/holofotehead.png') !important;
  filter: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight {
  z-index: 2 !important;
  background-image: url('/images/holofote.png') !important;
  filter: drop-shadow(0 8px 10px rgba(1, 6, 3, .42)) !important;
}

html body .view-page.view-vault .inventory-stage-spotlight.is-left,
html body .view-page.view-vault .inventory-stage-spotlight-head.is-left {
  left: max(50px, 4vw) !important;
  right: auto !important;
  transform: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight.is-right,
html body .view-page.view-vault .inventory-stage-spotlight-head.is-right {
  right: max(50px, 4vw) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame {
  position: absolute !important;
  z-index: 4 !important;
}
html body .view-page.view-vault > .open-stage > :not(.inventory-stage-spotlights):not(.inventory-stage-surface):not(.inventory-nature-frame) {
  position: relative !important;
  z-index: 5 !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel {
  position: relative !important;
  z-index: 30 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault .inventory-stage-spotlight,
  html body .view-page.view-vault .inventory-stage-spotlight-head {
    width: clamp(108px, 18vw, 150px) !important;
    height: clamp(170px, 31vw, 280px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault .inventory-stage-spotlight,
  html body .view-page.view-vault .inventory-stage-spotlight-head {
    width: clamp(82px, 21vw, 112px) !important;
    height: clamp(130px, 38vw, 220px) !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-left,
  html body .view-page.view-vault .inventory-stage-spotlight-head.is-left {
    left: 50px !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight.is-right,
  html body .view-page.view-vault .inventory-stage-spotlight-head.is-right {
    right: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage::before {
    background-image: url('/images/inventory-fireflies-v128.svg') !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-spotlights {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-pair {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  display: block !important;
  width: clamp(132px, 10.5vw, 205px) !important;
  height: clamp(210px, 25vw, 360px) !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform-origin: center bottom !important;
  isolation: isolate !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-pair.is-left {
  left: max(50px, 4vw) !important;
  right: auto !important;
  transform: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-pair.is-right {
  right: max(50px, 4vw) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-pair > img.inventory-stage-spotlight,
html body .view-page.view-vault .inventory-stage-spotlight-pair > img.inventory-stage-spotlight-head {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-pair > img.inventory-stage-spotlight-head {
  z-index: 0 !important;
  filter: none !important;
}

html body .view-page.view-vault .inventory-stage-spotlight-pair > img.inventory-stage-spotlight {
  z-index: 1 !important;
  filter: drop-shadow(0 8px 10px rgba(1, 6, 3, .42)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame {
  z-index: 4 !important;
}
html body .view-page.view-vault > .open-stage > :not(.inventory-stage-spotlights):not(.inventory-stage-surface):not(.inventory-nature-frame) {
  z-index: 5 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault .inventory-stage-spotlight-pair {
    width: clamp(108px, 18vw, 150px) !important;
    height: clamp(170px, 31vw, 280px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault .inventory-stage-spotlight-pair {
    width: clamp(82px, 21vw, 112px) !important;
    height: clamp(130px, 38vw, 220px) !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight-pair.is-left {
    left: 50px !important;
  }
  html body .view-page.view-vault .inventory-stage-spotlight-pair.is-right {
    right: 50px !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  display: block !important;
  width: clamp(190px, 14vw, 260px) !important;
  height: auto !important;
  aspect-ratio: 763 / 844 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform-origin: center bottom !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  left: max(50px, 4vw) !important;
  right: auto !important;
  transform: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right {
  right: max(50px, 4vw) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  z-index: 0 !important;
  filter: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 1 !important;
  filter: drop-shadow(0 8px 10px rgba(1, 6, 3, .42)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-nature-frame {
  z-index: 4 !important;
}
html body .view-page.view-vault > .open-stage > :not(.inventory-stage-light-fixtures):not(.inventory-stage-spotlights):not(.inventory-stage-surface):not(.inventory-nature-frame) {
  position: relative !important;
  z-index: 5 !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel {
  z-index: 30 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
    width: clamp(145px, 22vw, 205px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
    width: clamp(105px, 26vw, 150px) !important;
  }
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
    left: 50px !important;
  }
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right {
    right: 50px !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
  bottom: -5px !important;
  width: clamp(128px, 9.5vw, 178px) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  left: calc(max(50px, 4vw) - 15px) !important;
  transform: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  transform: scaleX(-1) !important;
  transform-origin: center bottom !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right {
  right: calc(max(50px, 4vw) - 15px) !important;
  transform: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-body {
  transform: none !important;
}

html body .view-page.view-vault > .inventory-rewards-bridge {
  z-index: auto !important;
  isolation: auto !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
  z-index: 0 !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .reward-showcase-inventory {
  z-index: 2 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
    width: clamp(96px, 14.8vw, 138px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
    width: clamp(70px, 17.1vw, 102px) !important;
  }
}

@property --inventory-spotlight-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #F0D990;
}

html body .view-page.view-vault {
  isolation: isolate !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
  background: transparent !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
  z-index: -2 !important;
}
html body .view-page.view-vault > .inventory-rewards-bridge > .reward-showcase-inventory {
  position: relative !important;
  z-index: 2 !important;
}

html body .view-page.view-vault > .open-stage {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-surface {
  inset: 8px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  clip-path: inset(0 round 12px) !important;
}
html body .view-page.view-vault > .open-stage::before {
  inset: 8px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures {
  inset: 0 !important;
  z-index: 3 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  clip-path: inset(8px round 12px) !important;
  isolation: isolate !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
  bottom: -5px !important;
  width: clamp(128px, 9.5vw, 178px) !important;
  aspect-ratio: 763 / 844 !important;
  overflow: visible !important;
  transform-origin: center bottom !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  left: calc(max(50px, 4vw) - 15px) !important;
  right: auto !important;
  transform: scaleX(-1) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right {
  right: calc(max(50px, 4vw) - 15px) !important;
  left: auto !important;
  transform: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 2 !important;
  filter: drop-shadow(0 8px 10px rgba(1, 6, 3, .42)) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  overflow: visible !important;
  transform-origin: 56% 31% !important;
  animation: inventorySpotlightAimSweep 9.8s ease-in-out infinite !important;
  will-change: transform !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-fixture.is-right .inventory-stage-light-aim {
  animation-delay: -4.9s !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  z-index: 4 !important;
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--inventory-spotlight-color) 50%, transparent))
    drop-shadow(0 0 13px color-mix(in srgb, var(--inventory-spotlight-color) 24%, transparent)) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim::after {
  content: "" !important;
  position: absolute !important;
  left: 35% !important;
  top: 20.5% !important;
  z-index: 5 !important;
  width: 31% !important;
  aspect-ratio: 1 !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: .86 !important;
  mix-blend-mode: screen !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--inventory-spotlight-color) 45%, white 55%) 0 7%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, white 28%) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 42%, transparent) 45%,
    transparent 72%
  ) !important;
  filter: blur(2px) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  position: absolute !important;
  right: 58% !important;
  bottom: 70.5% !important;
  z-index: 1 !important;
  display: block !important;
  width: clamp(420px, 36vw, 670px) !important;
  height: clamp(128px, 12.5vw, 228px) !important;
  transform-origin: 100% 50% !important;
  transform: rotate(13deg) !important;
  clip-path: polygon(100% 47%, 100% 53%, 0 100%, 0 0) !important;
  opacity: .58 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--inventory-spotlight-color) 62%, white 38%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, transparent) 14%,
    color-mix(in srgb, var(--inventory-spotlight-color) 38%, transparent) 44%,
    color-mix(in srgb, var(--inventory-spotlight-color) 13%, transparent) 72%,
    transparent 100%
  ) !important;
  filter: blur(8px) saturate(1.12) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::before {
  content: "" !important;
  position: absolute !important;
  inset: 28% 0 !important;
  clip-path: polygon(100% 43%, 100% 57%, 0 100%, 0 0) !important;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 52%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, transparent) 20%,
    color-mix(in srgb, var(--inventory-spotlight-color) 20%, transparent) 66%,
    transparent 100%
  ) !important;
  filter: blur(2px) !important;
  opacity: .78 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::after {
  content: "" !important;
  position: absolute !important;
  right: -18px !important;
  top: 50% !important;
  width: 56px !important;
  height: 56px !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, white 42%) 0 12%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, transparent) 38%,
    transparent 72%
  ) !important;
  filter: blur(3px) !important;
  opacity: .94 !important;
}

@keyframes inventorySpotlightAimSweep {
  0%, 100% { transform: rotate(-1.35deg) translateY(0); }
  24% { transform: rotate(-.25deg) translateY(-1px); }
  52% { transform: rotate(1.45deg) translateY(-3px); }
  76% { transform: rotate(.3deg) translateY(-1px); }
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
    width: clamp(96px, 14.8vw, 138px) !important;
  }
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
    width: clamp(300px, 42vw, 480px) !important;
    height: clamp(96px, 16vw, 170px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture {
    width: clamp(70px, 17.1vw, 102px) !important;
  }
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
    width: clamp(230px, 48vw, 340px) !important;
    height: clamp(78px, 20vw, 128px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim {
    animation: none !important;
    will-change: auto !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 5 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  opacity: .92 !important;
  mix-blend-mode: screen !important;
  -webkit-mask: url('/images/light.png?v=148') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=148') center bottom / contain no-repeat !important;
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 52%) 0 12%,
    color-mix(in srgb, var(--inventory-spotlight-color) 62%, white 38%) 22%,
    color-mix(in srgb, var(--inventory-spotlight-color) 40%, transparent) 50%,
    color-mix(in srgb, var(--inventory-spotlight-color) 18%, transparent) 72%,
    transparent 100%
  ) !important;
  filter: blur(.6px) saturate(1.12) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  z-index: 3 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  bottom: calc(70.5% - 100px) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim {
  animation-name: inventorySpotlightAimSweepV148 !important;
  animation-duration: 9.8s !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-fixture.is-right .inventory-stage-light-aim {
  animation-delay: -4.9s !important;
}
@keyframes inventorySpotlightAimSweepV148 {
  0%, 100% { transform: rotate(-1.9deg) translateY(0); }
  24% { transform: rotate(-0.45deg) translateY(-4px); }
  52% { transform: rotate(1.95deg) translateY(-8px); }
  76% { transform: rotate(0.45deg) translateY(-4px); }
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
    bottom: calc(70.5% - 90px) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
    bottom: calc(70.5% - 76px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim {
    animation: none !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  transform: scaleX(-1) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  z-index: 6 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::before,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::after,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim::after {
  z-index: 7 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  z-index: 3 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  z-index: 4 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 8 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  transform: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  transform: scaleX(-1) !important;
  transform-origin: center bottom !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::before,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::after,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim::after {
  z-index: 6 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: min(72%, 720px) !important;
  height: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image {
  position: absolute !important;
  left: 50% !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
  object-position: center top !important;
  user-select: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  top: -2px !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  top: 8px !important;
}
@media (max-width: 820px) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
    width: min(82%, 620px) !important;
  }
}
@media (max-width: 620px) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
    width: min(88%, 460px) !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  transform: none !important;
  transform-origin: center bottom !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 8 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
  width: 0 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  transform-origin: 56% 31% !important;
  animation-name: inventorySpotlightAimSweepLeftV153 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  transform: none !important;
}

@keyframes inventorySpotlightAimSweepLeftV153 {
  0%, 100% { transform: scaleX(-1) rotate(-1.9deg) translateY(0); }
  24% { transform: scaleX(-1) rotate(-0.45deg) translateY(-4px); }
  52% { transform: scaleX(-1) rotate(1.95deg) translateY(-8px); }
  76% { transform: scaleX(-1) rotate(0.45deg) translateY(-4px); }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  top: -42px !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  top: -22px !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  transform-origin: 56% 31% !important;
  animation-name: inventorySpotlightAimSweepV148 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  transform-origin: center bottom !important;
  object-position: center bottom !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  height: 100% !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam {
  left: 58% !important;
  right: auto !important;
  transform-origin: 0 50% !important;
  transform: rotate(-13deg) !important;
  clip-path: polygon(0 47%, 0 53%, 100% 100%, 100% 0) !important;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--inventory-spotlight-color) 62%, white 38%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, transparent) 14%,
    color-mix(in srgb, var(--inventory-spotlight-color) 38%, transparent) 44%,
    color-mix(in srgb, var(--inventory-spotlight-color) 13%, transparent) 72%,
    transparent 100%
  ) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam::before {
  clip-path: polygon(0 43%, 0 57%, 100% 100%, 100% 0) !important;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 52%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, transparent) 20%,
    color-mix(in srgb, var(--inventory-spotlight-color) 20%, transparent) 66%,
    transparent 100%
  ) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam::after {
  left: -18px !important;
  right: auto !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  top: -72px !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  top: -25px !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  transform: scaleX(-1) !important;
  transform-origin: center bottom !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
  z-index: 10000 !important;
  isolation: isolate !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  top: -112px !important;
  z-index: 10002 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  z-index: 10001 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  animation-name: inventorySpotlightAimSweepV148 !important;
  animation-duration: 9.8s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  animation-delay: 0s !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  transform: scaleX(-1) !important;
  transform-origin: center bottom !important;
}

html body .view-page.view-vault > .open-stage {
  overflow: visible !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
  overflow: visible !important;
  clip-path: none !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  z-index: 10002 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  z-index: 10001 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  animation: inventorySpotlightAimSweepLeftV157 9.8s ease-in-out infinite !important;
  will-change: transform !important;
}
@keyframes inventorySpotlightAimSweepLeftV157 {
  0%, 100% { transform: rotate(-1.9deg) translateY(0); }
  24% { transform: rotate(-0.45deg) translateY(-4px); }
  52% { transform: rotate(1.95deg) translateY(-8px); }
  76% { transform: rotate(0.45deg) translateY(-4px); }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
  z-index: 2147483000 !important;
  overflow: visible !important;
  clip-path: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  top: -110px !important;
  z-index: 2147483002 !important;
  overflow: visible !important;
  clip-path: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  z-index: 2147483001 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  transform-origin: 56% 31% !important;
  animation: inventorySpotlightAimIndependentV158 8.4s ease-in-out infinite !important;
  will-change: translate, rotate !important;
}
@keyframes inventorySpotlightAimIndependentV158 {
  0%, 100% {
    translate: 0 0;
    rotate: -1.8deg;
  }
  24% {
    translate: 0 -6px;
    rotate: -0.35deg;
  }
  52% {
    translate: 0 -13px;
    rotate: 2.15deg;
  }
  76% {
    translate: 0 -6px;
    rotate: 0.45deg;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-aim {
  transform-origin: 56% 31% !important;
  animation-duration: 7.8s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: rotate, translate !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  animation-name: inventorySpotlightPivotLeftV159 !important;
  animation-delay: 0s !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-aim {
  animation-name: inventorySpotlightPivotRightV159 !important;
  animation-delay: -3.9s !important;
}

@keyframes inventorySpotlightPivotLeftV159 {
  0%, 100% {
    translate: 0 0;
    rotate: -4.6deg;
  }
  25% {
    translate: 0 -1px;
    rotate: -1.1deg;
  }
  55% {
    translate: 0 -2px;
    rotate: 4.9deg;
  }
  78% {
    translate: 0 -1px;
    rotate: 0.8deg;
  }
}

@keyframes inventorySpotlightPivotRightV159 {
  0%, 100% {
    translate: 0 0;
    rotate: 4.6deg;
  }
  25% {
    translate: 0 -1px;
    rotate: 1.1deg;
  }
  55% {
    translate: 0 -2px;
    rotate: -4.9deg;
  }
  78% {
    translate: 0 -1px;
    rotate: -0.8deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim,
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-aim {
    animation: none !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-overlay {
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-beam,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-overlay {
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam {
  animation-name: inventorySpotlightBeamFlickerLeftV160 !important;
  animation-duration: 18.7s !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-overlay {
  animation-name: inventorySpotlightOverlayFlickerLeftV160 !important;
  animation-duration: 18.7s !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-beam {
  animation-name: inventorySpotlightBeamFlickerRightV160 !important;
  animation-duration: 22.9s !important;
  animation-delay: -6.2s !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-overlay {
  animation-name: inventorySpotlightOverlayFlickerRightV160 !important;
  animation-duration: 22.9s !important;
  animation-delay: -6.2s !important;
}

@keyframes inventorySpotlightBeamFlickerLeftV160 {
  0%, 62%, 65%, 82%, 86%, 100% { opacity: .74; }
  62.8% { opacity: .58; }
  63.2% { opacity: .84; }
  63.7% { opacity: .46; }
  64.2% { opacity: .82; }
  64.6% { opacity: .70; }
  82.7% { opacity: .61; }
  83.2% { opacity: .79; }
  83.8% { opacity: .52; }
  84.3% { opacity: .81; }
  84.8% { opacity: .66; }
  85.4% { opacity: .78; }
}
@keyframes inventorySpotlightOverlayFlickerLeftV160 {
  0%, 62%, 65%, 82%, 86%, 100% { opacity: .92; }
  62.8% { opacity: .68; }
  63.2% { opacity: 1; }
  63.7% { opacity: .56; }
  64.2% { opacity: .98; }
  64.6% { opacity: .87; }
  82.7% { opacity: .72; }
  83.2% { opacity: .97; }
  83.8% { opacity: .60; }
  84.3% { opacity: .99; }
  84.8% { opacity: .79; }
  85.4% { opacity: .95; }
}
@keyframes inventorySpotlightBeamFlickerRightV160 {
  0%, 34%, 37%, 71%, 74%, 100% { opacity: .74; }
  34.5% { opacity: .57; }
  35% { opacity: .83; }
  35.6% { opacity: .49; }
  36.1% { opacity: .80; }
  36.6% { opacity: .69; }
  71.6% { opacity: .60; }
  72.1% { opacity: .79; }
  72.7% { opacity: .44; }
  73.1% { opacity: .82; }
  73.5% { opacity: .64; }
}
@keyframes inventorySpotlightOverlayFlickerRightV160 {
  0%, 34%, 37%, 71%, 74%, 100% { opacity: .92; }
  34.5% { opacity: .70; }
  35% { opacity: .99; }
  35.6% { opacity: .58; }
  36.1% { opacity: .97; }
  36.6% { opacity: .86; }
  71.6% { opacity: .73; }
  72.1% { opacity: .98; }
  72.7% { opacity: .55; }
  73.1% { opacity: 1; }
  73.5% { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam,
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
    animation: none !important;
    opacity: inherit !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  animation: none !important;
  opacity: .58 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  animation: none !important;
  opacity: .92 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-random-flickering .inventory-stage-light-beam {
  animation: inventorySpotlightBeamRandomBurstV161 760ms step-end 1 both !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-random-flickering .inventory-stage-light-overlay {
  animation: inventorySpotlightOverlayRandomBurstV161 760ms step-end 1 both !important;
}

@keyframes inventorySpotlightBeamRandomBurstV161 {
  0%, 100% { opacity: .58; }
  9% { opacity: .16; }
  17% { opacity: .78; }
  26% { opacity: .08; }
  35% { opacity: .70; }
  47% { opacity: .30; }
  56% { opacity: .82; }
  68% { opacity: .12; }
  78% { opacity: .66; }
  88% { opacity: .45; }
}

@keyframes inventorySpotlightOverlayRandomBurstV161 {
  0%, 100% { opacity: .92; }
  9% { opacity: .28; }
  17% { opacity: 1; }
  26% { opacity: .12; }
  35% { opacity: .96; }
  47% { opacity: .48; }
  56% { opacity: 1; }
  68% { opacity: .20; }
  78% { opacity: .90; }
  88% { opacity: .66; }
}

html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  clip-path: none !important;
  contain: none !important;
}

html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip > .carousel-viewport {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  contain: none !important;
}

html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip > .carousel-viewport > .carousel-track {
  overflow: visible !important;
  contain: none !important;
}

html body .main-layout > .content {
  position: relative !important;
}

html body .main-layout > .content > .view-page {
  transition: opacity .34s ease !important;
}

html body .main-layout > .content.content-is-preparing > .view-page {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .main-layout > .content > .page-preparation-loading {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 2147482000 !important;
  min-height: 62vh !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 18px !important;
  padding: 26px 18px 70px !important;
  color: #cfc8b6 !important;
  text-align: center !important;
  pointer-events: none !important;
  animation: pagePreparationAppear .24s ease both !important;
}

html body .main-layout > .content > .page-preparation-loading > p {
  margin: 0 !important;
  color: #cfc8b6 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-sigil {
  width: min(300px, calc(100vw - 52px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  color: #f2d27b !important;
  letter-spacing: .24em !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  text-shadow: 0 0 14px rgba(242, 210, 123, .18) !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-sigil > i {
  height: 1px !important;
  flex: 1 1 auto !important;
  background: linear-gradient(90deg, transparent, currentColor) !important;
  transform-origin: right center !important;
  animation: pagePreparationLinePulse 1.5s ease-in-out infinite !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-sigil > i:last-child {
  background: linear-gradient(90deg, currentColor, transparent) !important;
  transform-origin: left center !important;
}

@keyframes pagePreparationAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pagePreparationLinePulse {
  0%, 100% {
    opacity: 1;
    scale: 1 1;
  }
  50% {
    opacity: .35;
    scale: .72 1;
  }
}

@media (max-width: 620px) {
  html body .main-layout > .content > .page-preparation-loading {
    min-height: 56vh !important;
  }
  html body .main-layout > .content > .page-preparation-loading > .page-preparation-sigil {
    width: min(260px, calc(100vw - 38px)) !important;
    gap: 11px !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .main-layout > .content > .page-preparation-loading,
  html body .main-layout > .content > .page-preparation-loading > .page-preparation-sigil > i {
    animation: none !important;
  }
  html body .main-layout > .content > .view-page {
    transition: none !important;
  }
}

html body .view-upgrade:has(.upgrade-page-loading)::before,
html body .view-upgrade:has(.upgrade-page-loading)::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body .view-upgrade:has(.upgrade-page-loading) .upgrade-hero-character::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body .main-layout > .content.content-is-preparing > .view-page {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  animation: none !important;
}

html body .main-layout > .content.content-is-preparing > .page-preparation-loading {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress {
  width: min(330px, calc(100vw - 54px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: -5px !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > .page-preparation-progress-track {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(235, 202, 111, .46) !important;
  border-radius: 999px !important;
  background: rgba(5, 13, 9, .72) !important;
  box-shadow:
    inset 0 1px 5px rgba(0, 0, 0, .68),
    0 0 12px rgba(226, 193, 101, .08) !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > .page-preparation-progress-track > i {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, #66d8aa 0%, #8be9be 50%, #e8d071 100%) !important;
  box-shadow:
    0 0 9px rgba(111, 229, 177, .52),
    0 0 16px rgba(232, 208, 113, .22) !important;
  transition: width .18s linear !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > .page-preparation-progress-track > i::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  translate: -100% 0 !important;
  animation: pagePreparationProgressGlint 1.25s ease-in-out infinite !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > b {
  color: #e8d58f !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-align: right !important;
  text-shadow: 0 0 10px rgba(232, 213, 143, .18) !important;
}

@keyframes pagePreparationProgressGlint {
  0%, 30% {
    translate: -100% 0;
    opacity: 0;
  }
  48% { opacity: .72; }
  70%, 100% {
    translate: 100% 0;
    opacity: 0;
  }
}

@media (max-width: 620px) {
  html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress {
    width: min(280px, calc(100vw - 40px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > .page-preparation-progress-track > i {
    transition: none !important;
  }
  html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > .page-preparation-progress-track > i::after {
    animation: none !important;
  }
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 6px !important;
}
html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > .page-preparation-progress-track {
  width: 100% !important;
  justify-self: center !important;
}
html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress > b {
  width: 100% !important;
  text-align: center !important;
  justify-self: center !important;
}

html body .main-layout > .content.content-is-preparing > .view-page,
html body .main-layout > .content.content-is-preparing > .view-page * {
  content-visibility: visible !important;
}

html body .main-layout > .content > .view-page {
  transition: none !important;
}

html body .main-layout > .content.content-is-preparing > .view-page {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .ticker {
  position: relative !important;
}

html body .ticker-label {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding-left: 46px !important;
  color: #f0cf72 !important;
  text-shadow:
    0 0 6px rgba(246, 214, 118, .20),
    0 0 12px rgba(241, 186, 58, .18),
    0 0 18px rgba(255, 215, 115, .10) !important;
  filter: drop-shadow(0 0 2px rgba(255, 215, 122, .14)) !important;
}
html body .ticker-label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 34px !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(90deg,
    rgba(255, 219, 132, 0) 0%,
    rgba(255, 219, 132, .22) 18%,
    rgba(255, 224, 145, .9) 54%,
    rgba(255, 222, 135, .35) 83%,
    rgba(255, 219, 132, 0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255, 210, 98, .35),
    0 0 10px rgba(255, 207, 88, .20) !important;
  pointer-events: none !important;
}

html body .ticker::after {
  inset: -2px 7px 2px !important;
  background-size: 100% calc(100% - 1px) !important;
}

@media (max-width: 820px) {
  html body .ticker-label {
    padding-left: 38px !important;
  }
  html body .ticker-label::before {
    width: 28px !important;
  }
  html body .ticker::after {
    inset: -1px 3px 2px !important;
  }
}

@media (max-width: 620px) {
  html body .ticker-label {
    padding-left: 30px !important;
  }
  html body .ticker-label::before {
    width: 22px !important;
  }
}

html body .ticker {
  background: transparent !important;
  box-shadow: none !important;
}

html body .ticker-label {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 44px !important;
  color: #f1cf71 !important;
  letter-spacing: .14em !important;
}
html body .ticker-label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 32px !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(90deg,
    rgba(255, 220, 140, 0) 0%,
    rgba(255, 220, 140, .18) 20%,
    rgba(255, 226, 150, .88) 55%,
    rgba(255, 221, 138, .32) 82%,
    rgba(255, 220, 140, 0) 100%) !important;
  box-shadow:
    0 0 5px rgba(255, 210, 92, .24),
    0 0 10px rgba(255, 210, 92, .14),
    0 0 16px rgba(255, 222, 139, .08) !important;
  pointer-events: none !important;
}
html body .ticker-label-star,
html body .ticker-label-text {
  position: relative !important;
  display: inline-block !important;
  color: #f1cf71 !important;
  text-shadow:
    0 0 1px rgba(255, 247, 217, .60),
    0 0 5px rgba(252, 221, 132, .28),
    0 0 11px rgba(255, 212, 106, .16),
    0 0 18px rgba(255, 224, 139, .08) !important;
}
html body .ticker-label-star {
  transform: translateY(-.5px) !important;
}

html body .ticker::after {
  inset: -2px 7px 4px !important;
  background-position: center top !important;
  background-size: 100% calc(100% - 3px) !important;
}

@media (max-width: 820px) {
  html body .ticker-label {
    padding-left: 36px !important;
    gap: 5px !important;
  }
  html body .ticker-label::before {
    width: 26px !important;
  }
  html body .ticker::after {
    inset: -1px 3px 3px !important;
    background-size: 100% calc(100% - 2px) !important;
  }
}

@media (max-width: 620px) {
  html body .ticker-label {
    padding-left: 30px !important;
    gap: 4px !important;
  }
  html body .ticker-label::before {
    width: 20px !important;
  }
}

html body .ticker-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 0 !important;
}
html body .ticker-label::before {
  content: none !important;
  display: none !important;
}
html body .ticker-label-line {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 1px !important;
  margin-right: 2px !important;
  vertical-align: middle !important;
  background: linear-gradient(90deg,
    rgba(255, 220, 140, 0) 0%,
    rgba(255, 220, 140, .18) 20%,
    rgba(255, 226, 150, .88) 55%,
    rgba(255, 221, 138, .32) 82%,
    rgba(255, 220, 140, 0) 100%) !important;
  box-shadow:
    0 0 5px rgba(255, 210, 92, .24),
    0 0 10px rgba(255, 210, 92, .14),
    0 0 16px rgba(255, 222, 139, .08) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  position: absolute !important;
  left: 50% !important;
  top: -110px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
  z-index: 2147483003 !important;
  object-fit: contain !important;
  object-position: center top !important;
  pointer-events: none !important;
  user-select: none !important;
}

@media (max-width: 820px) {
  html body .ticker-label {
    gap: 5px !important;
  }
  html body .ticker-label-line {
    width: 26px !important;
    margin-right: 1px !important;
  }
}

@media (max-width: 620px) {
  html body .ticker-label {
    gap: 4px !important;
  }
  html body .ticker-label-line {
    width: 20px !important;
    margin-right: 1px !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  z-index: 2147483003 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  transform-origin: 50% 36% !important;
  animation: inventoryDecor2SwayV176 15.5s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes inventoryDecor2SwayV176 {
  0%, 14%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  18% {
    transform: translateX(-50%) rotate(-1.2deg);
  }
  22% {
    transform: translateX(-50%) rotate(1.35deg);
  }
  27% {
    transform: translateX(-50%) rotate(-0.75deg);
  }
  31%, 58% {
    transform: translateX(-50%) rotate(0deg);
  }
  63% {
    transform: translateX(-50%) rotate(1.15deg);
  }
  68% {
    transform: translateX(-50%) rotate(-1.25deg);
  }
  73% {
    transform: translateX(-50%) rotate(0.6deg);
  }
  77% {
    transform: translateX(-50%) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
    animation: none !important;
    transform: translateX(-50%) rotate(0deg) !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -100px !important;
  transform: translateX(calc(-50% + 10px)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -80px !important;
  transform: translateX(calc(-50% + 30px)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  animation: none !important;
  transform: translateX(-50%) rotate(0deg) !important;
  will-change: auto !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  transform-origin: 50% 36% !important;
  animation: inventoryDecorPrimarySwayV178 15.5s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes inventoryDecorPrimarySwayV178 {
  0%, 14%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  18% {
    transform: translateX(-50%) rotate(-1.2deg);
  }
  22% {
    transform: translateX(-50%) rotate(1.35deg);
  }
  27% {
    transform: translateX(-50%) rotate(-0.75deg);
  }
  31%, 58% {
    transform: translateX(-50%) rotate(0deg);
  }
  63% {
    transform: translateX(-50%) rotate(1.15deg);
  }
  68% {
    transform: translateX(-50%) rotate(-1.25deg);
  }
  73% {
    transform: translateX(-50%) rotate(0.6deg);
  }
  77% {
    transform: translateX(-50%) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
    animation: none !important;
    transform: translateX(-50%) rotate(0deg) !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -50px !important;
  transform: translateX(calc(-50% + 60px)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  transform-origin: 50% 34% !important;
  animation: inventoryDecorPrimaryRotateSwayV179 13.8s ease-in-out infinite !important;
  rotate: 0deg;
  will-change: rotate !important;
}

@keyframes inventoryDecorPrimaryRotateSwayV179 {
  0%, 15%, 100% { rotate: 0deg; }
  19% { rotate: -1.55deg; }
  23% { rotate: 1.75deg; }
  27% { rotate: -0.9deg; }
  31%, 59% { rotate: 0deg; }
  64% { rotate: 1.45deg; }
  68% { rotate: -1.65deg; }
  72% { rotate: 0.8deg; }
  76% { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
    animation: none !important;
    rotate: 0deg !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -65px !important;
  transform: translateX(calc(-50% + 45px)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-primary {
  animation: none !important;
  rotate: 0deg !important;
  will-change: auto !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
  transform-origin: 50% 34% !important;
  animation: inventoryDecor2RotateSwayV180 13.8s ease-in-out infinite !important;
  rotate: 0deg;
  will-change: rotate !important;
}

@keyframes inventoryDecor2RotateSwayV180 {
  0%, 15%, 100% { rotate: 0deg; }
  19% { rotate: -1.55deg; }
  23% { rotate: 1.75deg; }
  27% { rotate: -0.9deg; }
  31%, 59% { rotate: 0deg; }
  64% { rotate: 1.45deg; }
  68% { rotate: -1.65deg; }
  72% { rotate: 0.8deg; }
  76% { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary {
    animation: none !important;
    rotate: 0deg !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-top,
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-bottom {
  top: -25px !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-top {
  clip-path: inset(0 0 50% 0) !important;
  animation: none !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
  will-change: auto !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-bottom {
  clip-path: inset(50% 0 0 0) !important;
  transform-origin: 50% 50% !important;
  animation: inventoryDecor2LowerHalfSwayV181 16.8s ease-in-out infinite !important;
  rotate: 0deg;
  translate: 0 0 !important;
  will-change: rotate !important;
}

@keyframes inventoryDecor2LowerHalfSwayV181 {
  0%, 18%, 100% { rotate: 0deg; }
  22% { rotate: -0.75deg; }
  26% { rotate: 0.9deg; }
  30% { rotate: -0.42deg; }
  34%, 66% { rotate: 0deg; }
  70% { rotate: 0.68deg; }
  74% { rotate: -0.82deg; }
  78% { rotate: 0.34deg; }
  82% { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-bottom {
    animation: none !important;
    rotate: 0deg !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -75px !important;
  transform: translateX(calc(-50% + 45px)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-top {
  animation: none !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-bottom {
  transform-origin: 50% 50% !important;
  animation: inventoryDecor2LowerHorizontalSwayV182 16.8s ease-in-out infinite !important;
  rotate: 0deg !important;
  translate: 0 0;
  will-change: translate !important;
}

@keyframes inventoryDecor2LowerHorizontalSwayV182 {
  0%, 18%, 100% { translate: 0 0; }
  22% { translate: -3px 0; }
  26% { translate: 4px 0; }
  30% { translate: -2px 0; }
  34%, 66% { translate: 0 0; }
  70% { translate: 3px 0; }
  74% { translate: -4px 0; }
  78% { translate: 2px 0; }
  82% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-bottom {
    animation: none !important;
    rotate: 0deg !important;
    translate: 0 0 !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -70px !important;
  transform: translateX(calc(-50% + 45px)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-top {
  top: -25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  clip-path: inset(0 0 50% 0) !important;
  animation: none !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-secondary-bottom-sway {
  position: absolute !important;
  left: 50% !important;
  top: -25px !important;
  z-index: 2147483001 !important;
  display: block !important;
  width: max-content !important;
  height: max-content !important;
  line-height: 0 !important;
  clip-path: inset(50% 0 0 0) !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 50% !important;
  animation: inventoryDecor2BottomWrapperSwayV183 12.6s ease-in-out -1.2s infinite !important;
  will-change: transform !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-secondary-bottom-sway > .inventory-stage-top-decor-image-secondary-bottom-layer {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  animation: none !important;
  clip-path: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

@keyframes inventoryDecor2BottomWrapperSwayV183 {
  0%, 8%, 34%, 52%, 78%, 100% {
    transform: translateX(-50%);
  }
  12% {
    transform: translateX(calc(-50% - 5px));
  }
  16% {
    transform: translateX(calc(-50% + 7px));
  }
  20% {
    transform: translateX(calc(-50% - 3px));
  }
  24% {
    transform: translateX(calc(-50% + 2px));
  }
  56% {
    transform: translateX(calc(-50% + 5px));
  }
  60% {
    transform: translateX(calc(-50% - 7px));
  }
  64% {
    transform: translateX(calc(-50% + 3px));
  }
  68% {
    transform: translateX(calc(-50% - 2px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-secondary-bottom-sway {
    animation: none !important;
    transform: translateX(-50%) !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  top: -72px !important;
  transform-origin: 50% 12% !important;
  z-index: 2147483003 !important;
  will-change: transform !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-secondary-top {
  top: -25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  clip-path: inset(0 0 50% 0) !important;
  animation: none !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-secondary-bottom-sway {
  position: absolute !important;
  left: 50% !important;
  top: -25px !important;
  width: 1325px !important;
  height: 181px !important;
  display: block !important;
  z-index: 2147483001 !important;
  line-height: 0 !important;
  background-image: url('/images/decor2.png?v=184') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 1325px 181px !important;
  clip-path: inset(50% 0 0 0) !important;
  transform: translateX(-50%) skewX(0deg) !important;
  transform-origin: 50% 50% !important;
  animation: none !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
  will-change: transform !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-secondary-bottom-sway > .inventory-stage-top-decor-image-secondary-bottom-layer {
  display: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  transform-origin: 48% 10% !important;
}

html body .main-layout > .content > .page-preparation-loading > .page-preparation-progress.is-complete > .page-preparation-progress-track > i {
  inset: -1px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 999px !important;
  transition: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint {
  position: absolute !important;
  left: 692px !important;
  top: -34px !important;
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  z-index: 2147483005 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.25) rotate(-12deg) !important;
  transform-origin: 50% 50% !important;
  will-change: opacity, transform, filter !important;
  filter: blur(.15px) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::before,
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::before {
  width: 2px !important;
  height: 15px !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,248,216,.78) 34%,
    rgba(255,255,255,1) 50%,
    rgba(246,213,128,.72) 66%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.62),
    0 0 8px rgba(247,215,132,.38) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::after {
  width: 15px !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(249,221,145,.72) 34%,
    rgba(255,255,255,1) 50%,
    rgba(255,246,207,.72) 66%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.56),
    0 0 9px rgba(245,210,119,.34) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint.is-reflecting {
  animation: inventoryDecorReflectionGlintV187 1.55s cubic-bezier(.2,.72,.22,1) 1 both !important;
}

@keyframes inventoryDecorReflectionGlintV187 {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25) rotate(-12deg);
    filter: blur(.3px);
  }
  18% {
    opacity: .35;
    transform: translate(-50%, -50%) scale(.65) rotate(-8deg);
    filter: blur(.12px);
  }
  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
    filter: blur(0);
  }
  56% {
    opacity: .88;
    transform: translate(-50%, -50%) scale(.92) rotate(7deg);
    filter: blur(0);
  }
  78% {
    opacity: .26;
    transform: translate(-50%, -50%) scale(.52) rotate(12deg);
    filter: blur(.16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint,
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint.is-reflecting {
    animation: none !important;
    opacity: 0 !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint {
  position: absolute !important;
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  z-index: 2147483646 !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) !important;
  scale: .18 !important;
  rotate: -16deg !important;
  overflow: visible !important;
  visibility: visible !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint.is-reflecting {
  animation: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::before {
  width: 3px !important;
  height: 21px !important;
  box-shadow:
    0 0 5px rgba(255,255,255,.82),
    0 0 11px rgba(255,226,151,.58),
    0 0 18px rgba(246,205,102,.34) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::after {
  width: 21px !important;
  height: 3px !important;
  box-shadow:
    0 0 5px rgba(255,255,255,.78),
    0 0 11px rgba(255,226,151,.54),
    0 0 18px rgba(246,205,102,.30) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint {
  width: 18px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  scale: 1 !important;
  rotate: 0deg !important;
  filter: none !important;
  will-change: opacity !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::before {
  width: 2px !important;
  height: 18px !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::after {
  width: 18px !important;
  height: 2px !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::before {
  background: linear-gradient(180deg,
    rgba(255, 215, 103, 0) 0%,
    rgba(255, 221, 118, .74) 30%,
    rgba(255, 239, 168, .98) 50%,
    rgba(244, 184, 54, .78) 70%,
    rgba(255, 211, 94, 0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255, 229, 145, .56),
    0 0 9px rgba(247, 190, 55, .42),
    0 0 15px rgba(222, 145, 23, .22) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint::after {
  background: linear-gradient(90deg,
    rgba(255, 211, 91, 0) 0%,
    rgba(249, 191, 54, .72) 30%,
    rgba(255, 238, 157, .98) 50%,
    rgba(247, 188, 48, .74) 70%,
    rgba(255, 211, 91, 0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255, 226, 135, .52),
    0 0 10px rgba(246, 181, 41, .40),
    0 0 16px rgba(214, 132, 15, .20) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint-clone {
  z-index: 2147483646 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-top-decor-image-tentacle {
  will-change: transform, scale !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint-clone::before {
  background: linear-gradient(180deg,
    rgba(255, 244, 206, 0) 0%,
    rgba(255, 247, 220, .78) 30%,
    rgba(255, 255, 246, 1) 50%,
    rgba(255, 228, 151, .72) 70%,
    rgba(255, 240, 197, 0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255, 255, 238, .68),
    0 0 9px rgba(255, 234, 169, .42),
    0 0 15px rgba(235, 187, 78, .20) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor > .inventory-stage-decor-reflection-glint-clone::after {
  background: linear-gradient(90deg,
    rgba(255, 244, 205, 0) 0%,
    rgba(255, 239, 190, .70) 30%,
    rgba(255, 255, 247, 1) 50%,
    rgba(255, 229, 157, .68) 70%,
    rgba(255, 244, 205, 0) 100%) !important;
  box-shadow:
    0 0 4px rgba(255, 255, 240, .66),
    0 0 10px rgba(255, 233, 166, .40),
    0 0 16px rgba(229, 174, 58, .18) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-beam {
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, .16) 4%,
    rgba(0, 0, 0, .54) 9%,
    rgba(0, 0, 0, .88) 15%,
    #000 21%,
    #000 68%,
    rgba(0, 0, 0, .72) 80%,
    rgba(0, 0, 0, .28) 91%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, .16) 4%,
    rgba(0, 0, 0, .54) 9%,
    rgba(0, 0, 0, .88) 15%,
    #000 21%,
    #000 68%,
    rgba(0, 0, 0, .72) 80%,
    rgba(0, 0, 0, .28) 91%,
    transparent 100%
  ) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  filter: blur(9.5px) saturate(1.12) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .16) 4%,
    rgba(0, 0, 0, .54) 9%,
    rgba(0, 0, 0, .88) 15%,
    #000 21%,
    #000 68%,
    rgba(0, 0, 0, .72) 80%,
    rgba(0, 0, 0, .28) 91%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .16) 4%,
    rgba(0, 0, 0, .54) 9%,
    rgba(0, 0, 0, .88) 15%,
    #000 21%,
    #000 68%,
    rgba(0, 0, 0, .72) 80%,
    rgba(0, 0, 0, .28) 91%,
    transparent 100%
  ) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  filter: blur(9.5px) saturate(1.12) !important;
}

html body .view-page.view-vault .carousel-coffer:not(.selected):hover {
  transform: scale(.72) !important;
}

html body .view-page.view-vault .carousel-coffer:not(.selected) > img {
  scale: 1 !important;
  transition: scale .34s cubic-bezier(.2,.82,.24,1), filter .34s ease !important;
  transform-origin: 50% 54% !important;
  will-change: transform, scale !important;
}
html body .view-page.view-vault .carousel-coffer:not(.selected):hover > img {
  scale: 1.11 !important;
}

html body .view-page.view-vault .carousel-coffer:not(.selected):hover > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-coffer:not(.selected):hover .carousel-hanging-rope,
html body .view-page.view-vault .carousel-coffer:not(.selected):hover .carousel-wood-slice {
  scale: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-vault .carousel-coffer:not(.selected) > img {
    transition: none !important;
  }
}

html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-coffer .carousel-hanging-rope {
  transition-property: opacity !important;
}

html body .view-page.view-vault .carousel-coffer.hanger-geometry-pending .carousel-hanging-rope {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

html body .view-page.view-vault .carousel-coffer.selected:not(.hanger-geometry-pending) .carousel-hanging-rope {
  visibility: visible !important;
  transition: opacity .12s ease !important;
}

html body .view-page.view-vault .carousel-coffer .carousel-hanging-rope {
  visibility: visible !important;
}
html body .view-page.view-vault .carousel-coffer.hanger-geometry-pending .carousel-hanging-rope {
  opacity: 1 !important;
  visibility: visible !important;
}

html body .view-page.view-vault .carousel-coffer:not(.hanger-geometry-ready) .carousel-hanging-rope {
  opacity: 0 !important;
  visibility: hidden !important;
}
html body .view-page.view-vault .carousel-coffer.hanger-geometry-ready .carousel-hanging-rope {
  visibility: visible !important;
}
html body .view-page.view-vault .carousel-coffer.hanger-geometry-ready:not(.selected) .carousel-hanging-rope {
  opacity: .86 !important;
}
html body .view-page.view-vault .carousel-coffer.hanger-geometry-ready.selected .carousel-hanging-rope {
  opacity: 1 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  width: clamp(460px, 39vw, 740px) !important;
  clip-path: polygon(100% 44.5%, 100% 55.5%, 0 100%, 0 0) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam::before {
  clip-path: polygon(100% 40.5%, 100% 59.5%, 0 100%, 0 0) !important;
}
@media (max-width: 820px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
    width: clamp(330px, 46vw, 540px) !important;
  }
}
@media (max-width: 620px) {
  html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
    width: clamp(248px, 52vw, 372px) !important;
  }
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-beam {
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  opacity: .82 !important;
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 34%, white 20%) 0 10%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, rgba(255,255,255,.14)) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 28%, transparent) 46%,
    color-mix(in srgb, var(--inventory-spotlight-color) 12%, transparent) 69%,
    transparent 100%
  ) !important;
  filter: blur(.8px) saturate(1.02) brightness(.88) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head {
  z-index: 3 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-beam {
  z-index: 7 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  z-index: 8 !important;
}

html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-coffer .carousel-hanging-rope {
  transition-property: opacity !important;
  transition-duration: .12s !important;
}

html body .view-page.view-vault .carousel-coffer .carousel-hanging-rope,
html body .view-page.view-vault .carousel-coffer.hanger-geometry-pending .carousel-hanging-rope,
html body .view-page.view-vault .carousel-coffer:not(.hanger-geometry-ready) .carousel-hanging-rope,
html body .view-page.view-vault .carousel-coffer.hanger-geometry-ready .carousel-hanging-rope {
  visibility: visible !important;
  transition: none !important;
}
html body .view-page.view-vault .carousel-coffer:not(.selected) .carousel-hanging-rope {
  opacity: .86 !important;
}
html body .view-page.view-vault .carousel-coffer.selected .carousel-hanging-rope {
  opacity: 1 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  isolation: isolate !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head {
  position: absolute !important;
  z-index: 1 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  position: absolute !important;
  z-index: 6 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  position: absolute !important;
  z-index: 7 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  z-index: 8 !important;
}

html body .view-page.view-vault .carousel-coffer {
  isolation: isolate !important;
}

html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-hanging-rope,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-slice,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-rings,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-flora,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-leaf,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-petal-ring {
  z-index: 9 !important;
}
html body .view-page.view-vault .carousel-coffer > img {
  z-index: 4 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  isolation: isolate !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  isolation: isolate !important;
  z-index: 3 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head {
  position: absolute !important;
  z-index: 1 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  position: absolute !important;
  z-index: 11 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  z-index: 12 !important;
}

html body .view-page.view-vault .carousel-coffer {
  isolation: isolate !important;
}

html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly {
  z-index: 2 !important;
}
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-slice,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-rings,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-flora,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-leaf,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-wood-petal-ring {
  z-index: 2 !important;
}

html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-hanging-rope,
html body .view-page.view-vault .carousel-coffer > .carousel-hanging-assembly .carousel-hanging-rope i {
  z-index: 7 !important;
}
html body .view-page.view-vault .carousel-coffer > img {
  z-index: 4 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  opacity: .84 !important;
  filter: blur(1.15px) saturate(1.06) brightness(1.03) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  opacity: .92 !important;
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 24%) 0 12%,
    color-mix(in srgb, var(--inventory-spotlight-color) 60%, rgba(255,255,255,.18)) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 34%, transparent) 46%,
    color-mix(in srgb, var(--inventory-spotlight-color) 14%, transparent) 69%,
    transparent 100%
  ) !important;
  filter: blur(.55px) saturate(1.04) brightness(.96) !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  opacity: .58 !important;
  filter: blur(9.5px) saturate(1.12) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  opacity: .82 !important;
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 34%, white 20%) 0 10%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, rgba(255,255,255,.14)) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 28%, transparent) 46%,
    color-mix(in srgb, var(--inventory-spotlight-color) 12%, transparent) 69%,
    transparent 100%
  ) !important;
  filter: blur(.8px) saturate(1.02) brightness(.88) !important;
}

html body .view-page.view-vault > .open-stage > .vault-carousel {
  overflow: hidden !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip {
  position: relative !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-top: 132px !important;
  margin-top: -132px !important;
  padding-bottom: 10px !important;
  clip-path: inset(0 0 0 0) !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip > .carousel-viewport {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip > .carousel-viewport > .carousel-track {
  overflow: visible !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  --inventory-spotlight-color: #ff1a1a !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim::after {
  background: #ff1a1a !important;
  box-shadow:
    0 0 14px rgba(255, 26, 26, .92),
    0 0 28px rgba(255, 26, 26, .56) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::before,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::after,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  background: #ff1a1a !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  opacity: .80 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::before {
  opacity: .88 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::after {
  opacity: 1 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  opacity: .82 !important;
  filter: blur(.6px) saturate(1) brightness(1) !important;
}

html body .view-page.view-vault > .open-stage > .vault-carousel > .carousel-horizontal-clip > .carousel-viewport {
  padding-bottom: 92px !important;
  margin-bottom: -57px !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  --inventory-spotlight-color: inherit !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--inventory-spotlight-color) 45%, white 55%) 0 7%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, white 28%) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 42%, transparent) 45%,
    transparent 72%
  ) !important;
  opacity: .86 !important;
  filter: blur(2px) !important;
  box-shadow: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--inventory-spotlight-color) 62%, white 38%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, transparent) 14%,
    color-mix(in srgb, var(--inventory-spotlight-color) 38%, transparent) 44%,
    color-mix(in srgb, var(--inventory-spotlight-color) 13%, transparent) 72%,
    transparent 100%
  ) !important;
  opacity: .58 !important;
  filter: blur(8px) saturate(1.12) !important;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::before {
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 52%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, transparent) 20%,
    color-mix(in srgb, var(--inventory-spotlight-color) 20%, transparent) 66%,
    transparent 100%
  ) !important;
  opacity: .78 !important;
  filter: blur(2px) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, white 42%) 0 12%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, transparent) 38%,
    transparent 72%
  ) !important;
  opacity: .94 !important;
  filter: blur(3px) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 52%) 0 12%,
    color-mix(in srgb, var(--inventory-spotlight-color) 62%, white 38%) 22%,
    color-mix(in srgb, var(--inventory-spotlight-color) 40%, transparent) 50%,
    color-mix(in srgb, var(--inventory-spotlight-color) 18%, transparent) 72%,
    transparent 100%
  ) !important;
  opacity: .92 !important;
  filter: blur(.6px) saturate(1.12) !important;
  mix-blend-mode: screen !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left {
  left: calc(max(50px, 4vw) - 15px) !important;
  right: auto !important;
  transform: scaleX(-1) !important;
  transform-origin: center bottom !important;
  isolation: isolate !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  transform: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim {
  inset: 0 !important;
  z-index: 3 !important;
  transform-origin: 56% 31% !important;
  animation: inventorySpotlightAimSweep 9.8s ease-in-out infinite !important;
  animation-delay: -4.9s !important;
  isolation: isolate !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-body {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  z-index: 3 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head {
  position: absolute !important;
  z-index: 4 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim::after {
  content: "" !important;
  position: absolute !important;
  left: 35% !important;
  top: 20.5% !important;
  width: 31% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--inventory-spotlight-color) 45%, white 55%) 0 7%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, white 28%) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 42%, transparent) 45%,
    transparent 72%
  ) !important;
  opacity: .86 !important;
  filter: blur(2px) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam {
  position: absolute !important;
  right: 58% !important;
  left: auto !important;
  bottom: calc(70.5% - 100px) !important;
  width: clamp(460px, 39vw, 740px) !important;
  height: clamp(128px, 12.5vw, 228px) !important;
  transform-origin: 100% 50% !important;
  transform: rotate(13deg) !important;
  clip-path: polygon(100% 44.5%, 100% 55.5%, 0 100%, 0 0) !important;
  opacity: .58 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--inventory-spotlight-color) 62%, white 38%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 72%, transparent) 14%,
    color-mix(in srgb, var(--inventory-spotlight-color) 38%, transparent) 44%,
    color-mix(in srgb, var(--inventory-spotlight-color) 13%, transparent) 72%,
    transparent 100%
  ) !important;
  filter: blur(8px) saturate(1.12) !important;
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, .14) 4%,
    rgba(0, 0, 0, .48) 9%,
    rgba(0, 0, 0, .84) 14%,
    #000 20%,
    #000 75%,
    rgba(0, 0, 0, .74) 86%,
    rgba(0, 0, 0, .28) 95%,
    transparent 100%
  ) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::before {
  content: "" !important;
  position: absolute !important;
  inset: 28% 0 !important;
  clip-path: polygon(100% 40.5%, 100% 59.5%, 0 100%, 0 0) !important;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--inventory-spotlight-color) 48%, white 52%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, transparent) 20%,
    color-mix(in srgb, var(--inventory-spotlight-color) 20%, transparent) 66%,
    transparent 100%
  ) !important;
  filter: blur(2px) !important;
  opacity: .78 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-beam::after {
  content: "" !important;
  position: absolute !important;
  right: -18px !important;
  left: auto !important;
  top: 50% !important;
  width: 56px !important;
  height: 56px !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--inventory-spotlight-color) 58%, white 42%) 0 12%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, transparent) 38%,
    transparent 72%
  ) !important;
  filter: blur(3px) !important;
  opacity: .94 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 34%, white 20%) 0 10%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, rgba(255,255,255,.14)) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 28%, transparent) 46%,
    color-mix(in srgb, var(--inventory-spotlight-color) 12%, transparent) 69%,
    transparent 100%
  ) !important;
  opacity: .82 !important;
  mix-blend-mode: screen !important;
  filter: blur(.8px) saturate(1.02) brightness(.88) !important;
  -webkit-mask: url('/images/light.png?v=148') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=148') center bottom / contain no-repeat !important;
}

html body .view-page.view-vault .carousel-coffer.selected {
  isolation: isolate !important;
}

html body .view-page.view-vault .carousel-coffer.selected > .carousel-selected-aura,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-orbit,
html body .view-page.view-vault .carousel-coffer.selected::before {
  z-index: -1 !important;
}

html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-slice,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-rings,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-flora,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-leaf,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-petal-ring {
  z-index: 1 !important;
}

html body .view-page.view-vault .carousel-coffer.selected > img {
  position: relative !important;
  z-index: 5 !important;
}
html body .view-page.view-vault .carousel-coffer.selected > .carousel-quantity-badge,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-access-seal,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-vip-only-stamp,
html body .view-page.view-vault .carousel-coffer.selected > .limited-time-decor {
  z-index: 8 !important;
}

html body .view-page.view-vault .carousel-coffer.selected {
  isolation: isolate !important;
}

html body .view-page.view-vault .carousel-coffer.selected > .carousel-selected-aura {
  z-index: 1 !important;
}
html body .view-page.view-vault .carousel-coffer.selected > .carousel-orbit,
html body .view-page.view-vault .carousel-coffer.selected::before {
  z-index: 2 !important;
}

html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-slice,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-rings,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-flora,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-leaf,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-hanging-assembly .carousel-wood-petal-ring {
  z-index: 1 !important;
}

html body .view-page.view-vault .carousel-coffer.selected > img {
  position: relative !important;
  z-index: 6 !important;
}
html body .view-page.view-vault .carousel-coffer.selected > .carousel-quantity-badge,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-access-seal,
html body .view-page.view-vault .carousel-coffer.selected > .carousel-vip-only-stamp,
html body .view-page.view-vault .carousel-coffer.selected > .limited-time-decor {
  z-index: 8 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147483400 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern {
  position: absolute !important;
  top: -4px !important;
  width: 128px !important;
  height: 250px !important;
  transform: scale(.84) !important;
  transform-origin: 50% 0 !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern.is-left {
  left: calc(31.25% - 64px + 10px) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern.is-right {
  left: calc(68.75% - 64px - 10px) !important;
  transform: scaleX(-1) scale(.84) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-swing {
  position: absolute !important;
  inset: 0 !important;
  transform-origin: 50% 0 !important;
  animation: inventoryImageLanternSwingLeftV243 5.7s ease-in-out infinite !important;
  will-change: transform !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern.is-right > .inventory-stage-lantern-swing {
  animation-name: inventoryImageLanternSwingRightV243 !important;
  animation-delay: -.85s !important;
}
@keyframes inventoryImageLanternSwingLeftV243 {
  0%, 100% { transform: rotate(-4.2deg) translateY(0); }
  20% { transform: rotate(-2.3deg) translateY(1px); }
  50% { transform: rotate(3.6deg) translateY(3px); }
  75% { transform: rotate(1.1deg) translateY(1px); }
}
@keyframes inventoryImageLanternSwingRightV243 {
  0%, 100% { transform: rotate(4.2deg) translateY(0); }
  20% { transform: rotate(2.3deg) translateY(1px); }
  50% { transform: rotate(-3.6deg) translateY(3px); }
  75% { transform: rotate(-1.1deg) translateY(1px); }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-assembly {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 104px !important;
  height: 144px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer,
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer {
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-glass {
  z-index: 1 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-mid {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  z-index: 3 !important;
  overflow: visible !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-base {
  z-index: 4 !important;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.24)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-fire {
  z-index: 1 !important;
  filter:
    drop-shadow(0 0 13px color-mix(in srgb, var(--inventory-spotlight-color) 48%, rgba(255,245,214,.46)))
    drop-shadow(0 0 24px color-mix(in srgb, var(--inventory-spotlight-color) 26%, transparent)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 50.93% !important;
  top: 67.63% !important;
  width: 54px !important;
  height: 54px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(255,251,239,.99) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, rgba(255,241,207,.99)) 18%,
    color-mix(in srgb, var(--inventory-spotlight-color) 40%, rgba(255,214,148,.94)) 42%,
    color-mix(in srgb, var(--inventory-spotlight-color) 22%, rgba(255,204,132,.48)) 65%,
    color-mix(in srgb, var(--inventory-spotlight-color) 10%, transparent) 83%,
    transparent 100%) !important;
  mix-blend-mode: screen !important;
  filter: blur(8px) !important;
  opacity: 1 !important;
  animation: inventoryLanternFirePulseV243 3.8s ease-in-out infinite !important;
}
@keyframes inventoryLanternFirePulseV243 {
  0%, 100% {
    opacity: .9;
    scale: .96;
  }
  46% {
    opacity: 1;
    scale: 1.06;
  }
  72% {
    opacity: .96;
    scale: 1;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background: var(--inventory-spotlight-color) !important;
  opacity: .88 !important;
  mix-blend-mode: color !important;
  filter: saturate(1.16) brightness(.98) !important;
  -webkit-mask: url('/images/lanternfire.png') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png') center / contain no-repeat !important;
}

@media (max-width: 1200px) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern.is-left {
    left: calc(30.2% - 60px + 10px) !important;
  }
  html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern.is-right {
    left: calc(69.8% - 60px - 10px) !important;
    transform: scaleX(-1) scale(.78) !important;
  }
  html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern:not(.is-right) {
    transform: scale(.78) !important;
  }
}
@media (max-width: 900px) {
  html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns {
    display: none !important;
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-base {
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-mid {
  z-index: 3 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-glass {
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-fire {
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  z-index: 3 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 8 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 7 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--inventory-spotlight-color) 34%, transparent))
    drop-shadow(0 5px 8px rgba(0, 0, 0, .24)) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  z-index: 5 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 6 !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .86 !important;
  background: radial-gradient(
    circle at 40% 34%,
    color-mix(in srgb, var(--inventory-spotlight-color) 92%, white 8%) 0 12%,
    var(--inventory-spotlight-color) 23%,
    color-mix(in srgb, var(--inventory-spotlight-color) 76%, transparent) 45%,
    color-mix(in srgb, var(--inventory-spotlight-color) 38%, transparent) 66%,
    transparent 100%
  ) !important;
  mix-blend-mode: normal !important;
  filter: blur(.5px) saturate(1.28) brightness(.88) !important;
  -webkit-mask: url('/images/light.png?v=148') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=148') center bottom / contain no-repeat !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  transform: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-assembly {
  isolation: isolate !important;
  contain: layout style !important;
  overflow: visible !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer,
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer {
  object-fit: contain !important;
  object-position: center !important;
  max-width: none !important;
  max-height: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-base {
  z-index: 10 !important;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.24)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  z-index: 20 !important;
  overflow: visible !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-fire {
  z-index: 1 !important;
  filter:
    drop-shadow(0 0 13px color-mix(in srgb, var(--inventory-spotlight-color) 48%, rgba(255,245,214,.46)))
    drop-shadow(0 0 24px color-mix(in srgb, var(--inventory-spotlight-color) 26%, transparent)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-mid {
  z-index: 30 !important;
  filter: brightness(1.08) contrast(1.08) drop-shadow(0 2px 3px rgba(0,0,0,.18)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-glass {
  z-index: 40 !important;
  opacity: .96 !important;
  filter: brightness(1.08) contrast(1.12) drop-shadow(0 1px 2px rgba(255,255,255,.10)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  z-index: 3 !important;
  -webkit-mask: url('/images/lanternfire.png?v=245') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png?v=245') center / contain no-repeat !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 6 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 7 !important;
  display: block !important;
  visibility: visible !important;
  opacity: .94 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--inventory-spotlight-color) !important;
  mix-blend-mode: multiply !important;
  filter: saturate(1.3) brightness(1.02) !important;
  -webkit-mask: url('/images/light.png?v=245') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=245') center bottom / contain no-repeat !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 8 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  z-index: 5 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  transform: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-assembly {
  isolation: isolate !important;
  overflow: visible !important;
  contain: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer,
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer {
  object-fit: contain !important;
  object-position: center !important;
  max-width: none !important;
  max-height: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-glass {
  z-index: 1 !important;
  filter: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-mid {
  z-index: 2 !important;
  filter: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  z-index: 3 !important;
  overflow: visible !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-base {
  z-index: 4 !important;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.24)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-fire {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 13px color-mix(in srgb, var(--inventory-spotlight-color) 48%, rgba(255,245,214,.46)))
    drop-shadow(0 0 24px color-mix(in srgb, var(--inventory-spotlight-color) 26%, transparent)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  z-index: 2 !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  z-index: 3 !important;
  -webkit-mask: url('/images/lanternfire.png?v=246') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png?v=246') center / contain no-repeat !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim {
  isolation: isolate !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-image {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-image {
  z-index: 4 !important;
  opacity: .22 !important;
  filter: brightness(.62) contrast(1.18) !important;
  mix-blend-mode: screen !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: .97 !important;
  background: color-mix(in srgb, var(--inventory-spotlight-color) 88%, #18110c 12%) !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.24) brightness(.92) !important;
  -webkit-mask: url('/images/light.png?v=246') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=246') center bottom / contain no-repeat !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  z-index: 6 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  z-index: 8 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-image,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-overlay,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-image,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-overlay {
  display: block !important;
  visibility: visible !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-image,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-overlay {
  transform: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns > .inventory-stage-lantern {
  top: -9px !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-fire {
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--inventory-spotlight-color) 70%, rgba(255,245,214,.30)))
    drop-shadow(0 0 30px color-mix(in srgb, var(--inventory-spotlight-color) 42%, transparent)) !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: 44% !important;
  height: 44% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--inventory-spotlight-color) 78%, #fff2bf 22%) 0%,
      color-mix(in srgb, var(--inventory-spotlight-color) 72%, #f2ca78 28%) 30%,
      color-mix(in srgb, var(--inventory-spotlight-color) 48%, transparent) 58%,
      transparent 100%) !important;
  opacity: .96 !important;
  filter: blur(5px) saturate(1.2) brightness(1.04) !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: color-mix(in srgb, var(--inventory-spotlight-color) 84%, #f4d28a 16%) !important;
  opacity: .92 !important;
  filter: saturate(1.18) brightness(.96) !important;
  mix-blend-mode: screen !important;
  -webkit-mask: url('/images/lanternfire.png?v=246') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png?v=246') center / contain no-repeat !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-aim {
  isolation: isolate !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-image {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  z-index: 4 !important;
  opacity: .88 !important;
  filter: brightness(.92) contrast(1.06) saturate(1.06) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: .72 !important;
  background: color-mix(in srgb, var(--inventory-spotlight-color) 84%, #15100c 16%) !important;
  filter: saturate(1.2) brightness(.92) !important;
  mix-blend-mode: multiply !important;
  -webkit-mask: url('/images/light.png?v=246') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=246') center bottom / contain no-repeat !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-head {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  z-index: 6 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-beam {
  z-index: 7 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures .inventory-stage-light-body {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 8 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-image,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-overlay,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right .inventory-stage-light-head {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-body {
  z-index: 8 !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left .inventory-stage-light-head {
  z-index: 6 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  left: 50.75% !important;
  top: 67.92% !important;
}

html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-image,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-aim > .inventory-stage-light-image {
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: .30 !important;
  mix-blend-mode: normal !important;
  filter: brightness(.82) contrast(1.12) saturate(.92) !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-overlay,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-aim > .inventory-stage-light-overlay {
  z-index: 5 !important;
  display: block !important;
  visibility: visible !important;
  opacity: .92 !important;
  background: color-mix(in srgb, var(--inventory-spotlight-color) 82%, #fff0d0 18%) !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.22) brightness(1.02) !important;
  -webkit-mask: url('/images/light.png?v=248') center bottom / contain no-repeat !important;
  mask: url('/images/light.png?v=248') center bottom / contain no-repeat !important;
}
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-left > .inventory-stage-light-aim > .inventory-stage-light-head,
html body .view-page.view-vault > .open-stage > #inventory-stage-light-fixtures > .inventory-stage-light-fixture.is-right > .inventory-stage-light-aim > .inventory-stage-light-head {
  z-index: 6 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap {
  isolation: isolate !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-layer-fire {
  opacity: .98 !important;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--inventory-spotlight-color) 72%, rgba(255, 242, 210, .28)))
    drop-shadow(0 0 15px color-mix(in srgb, var(--inventory-spotlight-color) 50%, rgba(255, 210, 140, .18)))
    drop-shadow(0 0 28px color-mix(in srgb, var(--inventory-spotlight-color) 22%, transparent)) !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 50.75% !important;
  top: 67.92% !important;
  width: 58% !important;
  height: 66% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--inventory-spotlight-color) 40%, white 60%) 0%,
      color-mix(in srgb, var(--inventory-spotlight-color) 74%, #fff0c9 26%) 12%,
      color-mix(in srgb, var(--inventory-spotlight-color) 68%, #ffc981 32%) 26%,
      color-mix(in srgb, var(--inventory-spotlight-color) 38%, rgba(255, 205, 134, .34)) 44%,
      color-mix(in srgb, var(--inventory-spotlight-color) 18%, transparent) 66%,
      transparent 100%) !important;
  opacity: .72 !important;
  filter: blur(9px) saturate(1.14) brightness(1.08) !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50.75% 67.92%,
      color-mix(in srgb, var(--inventory-spotlight-color) 34%, white 66%) 0%,
      color-mix(in srgb, var(--inventory-spotlight-color) 64%, #ffe1a0 36%) 10%,
      color-mix(in srgb, var(--inventory-spotlight-color) 52%, #f5b86f 48%) 24%,
      color-mix(in srgb, var(--inventory-spotlight-color) 22%, transparent) 42%,
      transparent 58%),
    linear-gradient(to bottom,
      transparent 0 44%,
      color-mix(in srgb, var(--inventory-spotlight-color) 22%, transparent) 57%,
      color-mix(in srgb, var(--inventory-spotlight-color) 10%, transparent) 72%,
      transparent 100%) !important;
  opacity: .74 !important;
  filter: saturate(1.08) brightness(1.03) contrast(1.02) !important;
  mix-blend-mode: screen !important;
  -webkit-mask: url('/images/lanternfire.png?v=249') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png?v=249') center / contain no-repeat !important;
  pointer-events: none !important;
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::before {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: 50.75% 67.92% !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse 11% 15% at 50.75% 67.92%,
      rgba(255, 253, 244, .96) 0%,
      color-mix(in srgb, var(--inventory-spotlight-color) 42%, #fff2cf 58%) 22%,
      color-mix(in srgb, var(--inventory-spotlight-color) 68%, #ffd08c 32%) 44%,
      transparent 76%),
    radial-gradient(ellipse 25% 31% at 50.75% 68.6%,
      color-mix(in srgb, var(--inventory-spotlight-color) 56%, rgba(255, 224, 169, .58)) 0%,
      color-mix(in srgb, var(--inventory-spotlight-color) 34%, rgba(255, 205, 142, .28)) 43%,
      color-mix(in srgb, var(--inventory-spotlight-color) 14%, transparent) 73%,
      transparent 100%),
    radial-gradient(ellipse 43% 40% at 50.75% 69.5%,
      color-mix(in srgb, var(--inventory-spotlight-color) 20%, rgba(255, 213, 154, .18)) 0%,
      color-mix(in srgb, var(--inventory-spotlight-color) 9%, transparent) 56%,
      transparent 100%) !important;
  opacity: .82 !important;
  mix-blend-mode: screen !important;
  filter: blur(3.6px) saturate(1.12) brightness(1.04) !important;
  animation: inventoryLanternDiffusePulseV250 4.1s ease-in-out infinite !important;
}

@keyframes inventoryLanternDiffusePulseV250 {
  0%, 100% {
    opacity: .72;
    scale: .98;
    filter: blur(3.8px) saturate(1.08) brightness(1.01);
  }
  45% {
    opacity: .88;
    scale: 1.025;
    filter: blur(3.4px) saturate(1.14) brightness(1.07);
  }
  72% {
    opacity: .80;
    scale: 1;
    filter: blur(3.6px) saturate(1.11) brightness(1.04);
  }
}

html body .view-page.view-vault > .open-stage > .inventory-stage-hanging-lanterns .inventory-stage-lantern-fire-wrap::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--inventory-spotlight-color) 28%, white 72%) 0%,
    color-mix(in srgb, var(--inventory-spotlight-color) 70%, #ffd58e 30%) 44%,
    color-mix(in srgb, var(--inventory-spotlight-color) 82%, #f4a95e 18%) 72%,
    color-mix(in srgb, var(--inventory-spotlight-color) 52%, transparent) 100%) !important;
  opacity: .68 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.1) brightness(1.03) contrast(1.04) !important;
  -webkit-mask: url('/images/lanternfire.png?v=250') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png?v=250') center / contain no-repeat !important;
}

html body .view-page.view-shop > .reward-showcase-hall {
  z-index: 4 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  --trunk-dark: #29180d;
  --trunk-deep: #3b2212;
  --trunk-mid: #6d3f20;
  --trunk-warm: #9b6232;
  --trunk-light: #c18a4e;
  --trunk-gold: #d6b45f;
  position: relative !important;
  z-index: 4 !important;
  isolation: isolate !important;
  overflow: visible !important;
  min-height: 214px !important;
  margin: 0 14px 30px !important;
  padding: 30px clamp(38px, 4.2vw, 72px) 24px !important;
  border: 0 !important;
  border-radius: 33px 25px 37px 29px / 46px 39px 48px 42px !important;
  background:
    radial-gradient(ellipse 17% 36% at 7% 51%, rgba(35,18,8,.72) 0 19%, transparent 23%),
    radial-gradient(ellipse 14% 28% at 92% 38%, rgba(35,18,8,.56) 0 17%, transparent 21%),
    radial-gradient(ellipse 8% 22% at 67% 74%, rgba(44,24,11,.46) 0 18%, transparent 23%),
    repeating-linear-gradient(176deg,
      transparent 0 9px,
      rgba(45,24,10,.20) 10px 12px,
      rgba(210,145,75,.09) 13px 15px,
      transparent 16px 31px),
    repeating-linear-gradient(7deg,
      transparent 0 19px,
      rgba(30,14,6,.13) 20px 23px,
      transparent 24px 47px),
    linear-gradient(96deg,
      var(--trunk-deep) 0%,
      #774522 8%,
      #9b6030 18%,
      #75431f 31%,
      #a66a35 46%,
      #6b3b1d 61%,
      #93582b 75%,
      #663819 89%,
      var(--trunk-deep) 100%) !important;
  box-shadow:
    inset 0 8px 0 rgba(226,165,92,.24),
    inset 0 -10px 0 rgba(35,17,7,.48),
    inset 0 0 0 3px rgba(45,23,10,.66),
    inset 0 0 0 6px rgba(171,105,51,.24),
    0 14px 0 rgba(31,16,8,.38),
    0 24px 38px rgba(0,0,0,.44),
    0 0 25px rgba(75,190,97,.07) !important;
  filter: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  animation: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  z-index: -2 !important;
  inset: -9px -19px -10px !important;
  border-radius: 42px 31px 46px 34px / 54px 48px 58px 49px !important;
  background:
    radial-gradient(ellipse 7% 42% at 1.5% 50%, #2a160b 0 51%, transparent 55%),
    radial-gradient(ellipse 7% 42% at 98.5% 50%, #2a160b 0 51%, transparent 55%),
    repeating-linear-gradient(174deg,
      rgba(42,21,9,.92) 0 6px,
      rgba(94,51,22,.94) 7px 15px,
      rgba(49,25,10,.96) 16px 22px,
      rgba(112,61,27,.9) 23px 30px) !important;
  box-shadow:
    inset 0 5px 4px rgba(221,143,69,.16),
    inset 0 -8px 7px rgba(11,6,3,.54),
    0 16px 30px rgba(0,0,0,.36) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  z-index: -1 !important;
  inset: 7px 10px 9px !important;
  border-radius: 28px 22px 31px 24px / 38px 33px 41px 36px !important;
  background:
    linear-gradient(100deg,
      transparent 0 4%,
      rgba(255,207,132,.08) 5% 6%,
      transparent 7% 18%,
      rgba(39,20,8,.12) 19% 21%,
      transparent 22% 39%,
      rgba(255,210,135,.07) 40% 41%,
      transparent 42% 68%,
      rgba(37,18,7,.13) 69% 71%,
      transparent 72% 94%,
      rgba(255,203,120,.06) 95% 96%,
      transparent 97%),
    repeating-linear-gradient(179deg,
      transparent 0 18px,
      rgba(255,224,167,.045) 19px 20px,
      transparent 21px 39px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,215,150,.13),
    inset 0 -3px 0 rgba(38,19,8,.24) !important;
  mix-blend-mode: soft-light !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-tools-effects {
  display: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > :not(.catalog-tools-effects):not(.catalog-trunk-decor) {
  position: relative !important;
  z-index: 4 !important;
}

html body .catalog-trunk-decor {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body .catalog-trunk-end {
  position: absolute !important;
  top: 50% !important;
  width: 58px !important;
  height: 154px !important;
  transform: translateY(-50%) !important;
  border: 5px solid rgba(48,24,10,.88) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at 53% 48%, transparent 0 16%, rgba(62,31,12,.45) 17% 19%, transparent 20% 31%, rgba(78,39,15,.40) 32% 34%, transparent 35% 48%, rgba(54,26,10,.44) 49% 52%, transparent 53%),
    radial-gradient(ellipse at center, #b6783e 0%, #8a5027 43%, #633518 70%, #3a1d0c 100%) !important;
  box-shadow:
    inset 8px 0 12px rgba(255,205,124,.12),
    inset -9px 0 14px rgba(24,11,4,.48),
    0 9px 18px rgba(0,0,0,.34) !important;
}
html body .catalog-trunk-end.is-left { left: -42px !important; }
html body .catalog-trunk-end.is-right {
  right: -42px !important;
  transform: translateY(-50%) scaleX(-1) !important;
}
html body .catalog-trunk-end > i {
  position: absolute !important;
  inset: 19px 15px !important;
  border: 2px solid rgba(66,32,12,.38) !important;
  border-radius: 50% !important;
  transform: rotate(-7deg) !important;
}

html body .catalog-trunk-knot {
  position: absolute !important;
  width: 47px !important;
  height: 26px !important;
  border-radius: 52% 48% 45% 55% / 58% 45% 55% 42% !important;
  background:
    radial-gradient(ellipse at 53% 50%, #211006 0 13%, #4a2711 15% 31%, #9a5c2c 34% 44%, #4c2710 48% 58%, transparent 61%) !important;
  opacity: .66 !important;
  filter: drop-shadow(0 2px 1px rgba(21,10,4,.46)) !important;
}
html body .catalog-trunk-knot > i {
  position: absolute !important;
  inset: 5px 10px !important;
  border: 1px solid rgba(232,174,99,.21) !important;
  border-radius: 50% !important;
}
html body .catalog-trunk-knot.knot-one {
  left: 4.5% !important;
  bottom: 18px !important;
  transform: rotate(-9deg) scale(.82) !important;
}
html body .catalog-trunk-knot.knot-two {
  left: 48% !important;
  top: 12px !important;
  transform: rotate(5deg) scale(.74) !important;
  opacity: .5 !important;
}
html body .catalog-trunk-knot.knot-three {
  right: 7% !important;
  bottom: 17px !important;
  transform: rotate(11deg) scale(.68) !important;
  opacity: .48 !important;
}

html body .catalog-trunk-vine {
  position: absolute !important;
  top: -11px !important;
  width: 122px !important;
  height: 48px !important;
  border-top: 5px solid #334e1d !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 3px 2px rgba(12,20,8,.48)) !important;
}
html body .catalog-trunk-vine.vine-left {
  left: 8% !important;
  transform: rotate(7deg) !important;
}
html body .catalog-trunk-vine.vine-right {
  right: 8% !important;
  transform: rotate(-7deg) scaleX(-1) !important;
}
html body .catalog-trunk-vine > i {
  position: absolute !important;
  width: 22px !important;
  height: 12px !important;
  border-radius: 100% 0 100% 0 !important;
  background: linear-gradient(135deg, #789334, #2f501d 70%, #1c3413) !important;
  box-shadow: inset 2px 1px rgba(220,232,130,.18) !important;
}
html body .catalog-trunk-vine > i:nth-child(1) {
  left: 16px !important;
  top: -10px !important;
  transform: rotate(-31deg) !important;
}
html body .catalog-trunk-vine > i:nth-child(2) {
  left: 53px !important;
  top: -3px !important;
  transform: rotate(22deg) scale(.86) !important;
}
html body .catalog-trunk-vine > i:nth-child(3) {
  right: 12px !important;
  top: -12px !important;
  transform: rotate(-18deg) scale(.72) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 61px !important;
  gap: 14px !important;
  padding: 0 22px !important;
  border: 2px solid rgba(38,18,7,.88) !important;
  border-radius: 18px 14px 17px 15px / 20px 16px 19px 17px !important;
  background:
    repeating-linear-gradient(177deg, rgba(255,255,255,.015) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(10,15,9,.93), rgba(20,27,17,.89) 45%, rgba(9,14,8,.93)) !important;
  box-shadow:
    inset 0 9px 13px rgba(0,0,0,.62),
    inset 0 -2px 0 rgba(196,131,66,.16),
    inset 7px 0 10px rgba(0,0,0,.24),
    0 2px 0 rgba(224,157,82,.26),
    0 5px 7px rgba(28,13,5,.32) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box::before {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  inset: -7px -8px !important;
  z-index: -1 !important;
  border-radius: 24px 19px 23px 20px / 25px 21px 24px 22px !important;
  border: 3px solid rgba(76,39,16,.75) !important;
  box-shadow:
    inset 0 2px rgba(239,178,101,.15),
    0 2px rgba(30,14,5,.48) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box > span {
  flex: 0 0 auto !important;
  color: #f2d276 !important;
  font-size: 31px !important;
  line-height: 1 !important;
  transform: rotate(-13deg) translateY(-1px) !important;
  text-shadow:
    0 2px 0 #654017,
    0 0 9px rgba(250,230,134,.35) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box input {
  min-width: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(16px, 1.25vw, 21px) !important;
  letter-spacing: .015em !important;
  color: #f4edda !important;
  caret-color: #f2d276 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.56) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box input::placeholder {
  color: rgba(229,216,184,.62) !important;
  opacity: 1 !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box:focus-within {
  border-color: rgba(222,181,95,.56) !important;
  box-shadow:
    inset 0 9px 13px rgba(0,0,0,.62),
    inset 0 -2px 0 rgba(232,184,92,.24),
    inset 7px 0 10px rgba(0,0,0,.24),
    0 2px 0 rgba(240,188,98,.34),
    0 0 18px rgba(214,180,95,.18) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
  --filter-indicator-left: 6px;
  --filter-indicator-width: 0px;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 20px !important;
  padding: 6px !important;
  gap: 4px !important;
  border: 2px solid rgba(43,21,8,.82) !important;
  border-radius: 15px 12px 14px 13px / 17px 14px 16px 15px !important;
  background:
    repeating-linear-gradient(177deg, rgba(255,222,157,.025) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(48,27,13,.88), rgba(25,14,7,.91)) !important;
  box-shadow:
    inset 0 7px 10px rgba(0,0,0,.48),
    inset 0 -2px rgba(200,130,62,.14),
    0 2px rgba(220,151,77,.20) !important;
  scrollbar-color: rgba(214,180,95,.36) rgba(24,13,6,.34) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  left: var(--filter-indicator-left) !important;
  width: var(--filter-indicator-width) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,239,185,.78) !important;
  border-radius: 9px 7px 9px 7px / 11px 8px 10px 9px !important;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.15) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.42), transparent 55%),
    linear-gradient(145deg, #f7e8b5 0%, #e6c66f 45%, var(--trunk-gold) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -4px 0 rgba(104,76,18,.22),
    0 5px 0 rgba(48,29,9,.58),
    0 9px 17px rgba(0,0,0,.28),
    0 0 14px rgba(214,180,95,.18) !important;
  transition:
    left .38s cubic-bezier(.2,.86,.25,1),
    width .38s cubic-bezier(.2,.86,.25,1) !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  min-height: 42px !important;
  padding: 9px 15px !important;
  border: 0 !important;
  border-radius: 9px 7px 9px 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: rgba(239,226,195,.76) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.72) !important;
  transition: color .22s ease, text-shadow .22s ease !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip::before {
  content: none !important;
  display: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip:hover:not(.active) {
  color: #fae686 !important;
  border: 0 !important;
  transform: none !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.72), 0 0 10px rgba(250,230,134,.24) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip.active {
  color: #25170b !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: 0 1px rgba(255,255,255,.24) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-count {
  margin: 11px 7px 0 !important;
  color: rgba(239,220,178,.76) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-style: italic !important;
  letter-spacing: .025em !important;
  text-align: right !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.72) !important;
}

@media (max-width: 900px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    min-height: 194px !important;
    margin-inline: 7px !important;
    padding: 26px 30px 21px !important;
  }
  html body .catalog-trunk-end {
    width: 45px !important;
    height: 134px !important;
  }
  html body .catalog-trunk-end.is-left { left: -32px !important; }
  html body .catalog-trunk-end.is-right { right: -32px !important; }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
    min-height: 39px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
    min-height: 53px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .reward-showcase-hall {
    margin-bottom: 14px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    min-height: 180px !important;
    margin-inline: 3px !important;
    margin-bottom: 24px !important;
    padding: 22px 18px 18px !important;
    border-radius: 24px 19px 27px 21px / 32px 27px 35px 29px !important;
  }
  html body .catalog-trunk-end {
    display: none !important;
  }
  html body .catalog-trunk-vine {
    width: 86px !important;
    opacity: .76 !important;
  }
  html body .catalog-trunk-knot.knot-two {
    display: none !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
    height: 54px !important;
    padding-inline: 15px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box > span {
    font-size: 26px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box input {
    font-size: 16px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
    min-height: 49px !important;
    margin-top: 16px !important;
    padding: 5px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips::before {
    top: 5px !important;
    bottom: 5px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
    min-height: 37px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-count {
    margin-top: 9px !important;
    font-size: 11px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  --trunk-dark: #211006 !important;
  --trunk-deep: #321a0b !important;
  --trunk-mid: #553418 !important;
  --trunk-warm: #76502b !important;
  --trunk-light: #9a6c3a !important;
  --trunk-gold: #c9a858 !important;
  box-sizing: border-box !important;
  width: min(1560px, calc(100% - 54px)) !important;
  min-height: 0 !important;
  margin: 2px auto 26px !important;
  padding: 18px clamp(24px, 3vw, 46px) 15px !important;
  border: 1px solid rgba(31,14,5,.94) !important;
  border-radius: 25px 19px 27px 21px / 30px 24px 32px 25px !important;
  background:
    /* Subtle knots and dents in the wood */
    radial-gradient(ellipse 42px 18px at 7.5% 22%, rgba(28,12,4,.88) 0 24%, rgba(115,72,34,.22) 31% 42%, transparent 48%),
    radial-gradient(ellipse 34px 15px at 67% 78%, rgba(24,10,3,.72) 0 22%, rgba(137,86,41,.18) 31% 42%, transparent 49%),
    radial-gradient(ellipse 26px 11px at 92% 28%, rgba(25,11,4,.67) 0 22%, rgba(145,91,44,.16) 31% 43%, transparent 50%),
    /* Fine highlights along the grain */
    linear-gradient(97deg, transparent 0 8%, rgba(232,183,111,.07) 8.3% 8.7%, transparent 9% 31%, rgba(221,164,93,.055) 31.4% 31.8%, transparent 32.1% 62%, rgba(236,190,116,.06) 62.3% 62.7%, transparent 63% 88%, rgba(224,169,98,.05) 88.4% 88.8%, transparent 89.1%),
    /* Darker splits in the bark */
    repeating-linear-gradient(174deg, transparent 0 11px, rgba(27,12,4,.18) 12px 13px, transparent 14px 27px),
    repeating-linear-gradient(7deg, transparent 0 29px, rgba(18,8,3,.13) 30px 32px, transparent 33px 61px),
    /* Match the Inventory frame's wood tones */
    linear-gradient(180deg, #8b6034 0%, #74502a 12%, #5e3b1c 42%, #4a2a12 72%, #2b1508 100%) !important;
  box-shadow:
    inset 0 4px 1px rgba(240,194,125,.20),
    inset 0 8px 14px rgba(176,112,55,.10),
    inset 0 -8px 8px rgba(20,8,2,.58),
    inset 7px 0 11px rgba(25,10,3,.20),
    inset -7px 0 11px rgba(25,10,3,.22),
    0 5px 0 rgba(27,12,4,.82),
    0 13px 24px rgba(0,0,0,.36),
    0 0 0 1px rgba(128,80,37,.28) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  inset: -7px -13px -8px !important;
  border-radius: 31px 23px 34px 25px / 37px 29px 40px 31px !important;
  clip-path: polygon(
    0.4% 16%, 1.2% 7%, 3.2% 2%, 8% 0.8%, 14% 1.7%, 21% 0.4%,
    29% 1.3%, 37% 0.2%, 45% 1.5%, 54% 0.4%, 63% 1.4%, 72% 0.3%,
    80% 1.6%, 89% 0.5%, 96.7% 2.2%, 99% 8%, 99.7% 18%, 99.2% 35%,
    100% 51%, 99.1% 68%, 99.6% 84%, 98.3% 93%, 95.3% 98%, 88% 99.3%,
    79% 98.2%, 70% 99.7%, 61% 98.6%, 52% 99.8%, 43% 98.5%, 34% 99.6%,
    25% 98.2%, 16% 99.4%, 7% 98%, 2.1% 94%, 0.6% 84%, 1.1% 69%,
    0.1% 52%, 0.9% 35%
  ) !important;
  background:
    radial-gradient(ellipse 30px 11px at 14% 32%, rgba(22,9,3,.84) 0 27%, transparent 47%),
    radial-gradient(ellipse 35px 12px at 83% 67%, rgba(18,7,2,.76) 0 25%, transparent 46%),
    repeating-linear-gradient(3deg, rgba(28,12,4,.88) 0 3px, rgba(71,39,17,.94) 4px 8px, rgba(41,20,8,.96) 9px 13px, rgba(93,54,25,.90) 14px 18px) !important;
  box-shadow:
    inset 0 3px 2px rgba(224,164,91,.15),
    inset 0 -6px 5px rgba(10,4,1,.62),
    0 10px 18px rgba(0,0,0,.31) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  z-index: 1 !important;
  inset: 5px 8px 7px !important;
  border: 1px solid rgba(202,145,77,.10) !important;
  border-radius: 21px 16px 23px 18px / 25px 19px 27px 21px !important;
  background:
    linear-gradient(104deg, transparent 0 5%, rgba(255,215,151,.075) 5.2% 5.5%, transparent 5.8% 18%, rgba(26,11,4,.16) 18.3% 18.8%, transparent 19.1% 39%, rgba(255,216,151,.055) 39.3% 39.6%, transparent 39.9% 61%, rgba(23,9,3,.15) 61.4% 61.9%, transparent 62.2% 81%, rgba(255,214,145,.05) 81.3% 81.7%, transparent 82%),
    repeating-linear-gradient(179deg, transparent 0 13px, rgba(248,208,143,.034) 14px 15px, transparent 16px 30px) !important;
  box-shadow:
    inset 0 2px rgba(255,215,146,.07),
    inset 0 -2px rgba(18,7,2,.24) !important;
  opacity: .96 !important;
  mix-blend-mode: soft-light !important;
}

html body .catalog-trunk-end {
  width: 34px !important;
  height: 92px !important;
  border-width: 3px !important;
  border-color: rgba(35,15,5,.92) !important;
  border-radius: 46% 54% 43% 57% / 52% 45% 55% 48% !important;
  background:
    radial-gradient(ellipse at 52% 49%, transparent 0 17%, rgba(45,21,7,.52) 18% 21%, transparent 22% 34%, rgba(58,28,10,.44) 35% 38%, transparent 39% 52%, rgba(38,17,6,.45) 53% 56%, transparent 57%),
    radial-gradient(ellipse at center, #8a5b31 0%, #69401e 45%, #42220d 72%, #211006 100%) !important;
  box-shadow:
    inset 5px 0 7px rgba(235,181,108,.11),
    inset -6px 0 9px rgba(18,7,2,.56),
    0 5px 9px rgba(0,0,0,.30) !important;
  opacity: .96 !important;
}
html body .catalog-trunk-end.is-left { left: -24px !important; }
html body .catalog-trunk-end.is-right { right: -24px !important; }
html body .catalog-trunk-end > i {
  inset: 13px 9px !important;
  border-width: 1px !important;
  border-color: rgba(45,20,7,.48) !important;
}

html body .catalog-trunk-knot {
  width: 38px !important;
  height: 18px !important;
  border: 1px solid rgba(38,17,6,.48) !important;
  border-radius: 56% 44% 51% 49% / 48% 58% 42% 52% !important;
  background:
    radial-gradient(ellipse at 51% 50%, #170903 0 12%, #3d1d0a 14% 28%, #79502a 31% 42%, #3b1b08 46% 59%, transparent 62%) !important;
  box-shadow:
    inset 0 1px rgba(222,168,96,.10),
    0 2px 2px rgba(18,7,2,.42) !important;
  opacity: .54 !important;
}
html body .catalog-trunk-knot.knot-one {
  left: 5.5% !important;
  bottom: 10px !important;
  transform: rotate(-8deg) scale(.72) !important;
}
html body .catalog-trunk-knot.knot-two {
  left: 51% !important;
  top: 8px !important;
  transform: rotate(4deg) scale(.58) !important;
  opacity: .36 !important;
}
html body .catalog-trunk-knot.knot-three {
  right: 6.5% !important;
  bottom: 9px !important;
  transform: rotate(10deg) scale(.62) !important;
  opacity: .40 !important;
}

html body .catalog-trunk-vine {
  top: -8px !important;
  width: 88px !important;
  height: 30px !important;
  border-top-width: 3px !important;
  border-top-color: #30491d !important;
  opacity: .76 !important;
}
html body .catalog-trunk-vine.vine-left { left: 10% !important; }
html body .catalog-trunk-vine.vine-right { right: 10% !important; }
html body .catalog-trunk-vine > i {
  width: 16px !important;
  height: 9px !important;
  background: linear-gradient(145deg, #718748, #3c5b2a 70%, #213b18) !important;
  border: 1px solid rgba(31,52,21,.64) !important;
  box-shadow: inset 1px 1px rgba(220,232,156,.12), 0 1px 1px rgba(11,18,7,.35) !important;
}
html body .catalog-trunk-vine > i:nth-child(1) {
  left: 11px !important;
  top: -7px !important;
}
html body .catalog-trunk-vine > i:nth-child(2) {
  left: 38px !important;
  top: -2px !important;
}
html body .catalog-trunk-vine > i:nth-child(3) {
  right: 8px !important;
  top: -8px !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
  height: 49px !important;
  gap: 11px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(29,13,5,.96) !important;
  border-radius: 13px 10px 14px 11px / 15px 12px 16px 13px !important;
  background:
    radial-gradient(ellipse at 17% 0%, rgba(93,119,73,.07), transparent 42%),
    repeating-linear-gradient(178deg, rgba(255,255,255,.012) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(15,26,17,.97), rgba(7,15,10,.98)) !important;
  box-shadow:
    inset 0 7px 10px rgba(0,0,0,.66),
    inset 0 -2px rgba(139,92,44,.11),
    inset 5px 0 8px rgba(0,0,0,.22),
    0 2px rgba(207,145,76,.18),
    0 4px 6px rgba(24,10,3,.28) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box::before {
  inset: -5px -6px !important;
  border-width: 2px !important;
  border-color: rgba(77,44,21,.82) !important;
  border-radius: 18px 14px 19px 15px / 20px 16px 21px 17px !important;
  background:
    linear-gradient(180deg, rgba(198,137,71,.12), transparent 38%, rgba(20,8,2,.18)) !important;
  box-shadow:
    inset 0 1px rgba(229,176,105,.13),
    0 2px rgba(21,8,2,.48) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box > span {
  font-size: 26px !important;
  transform: rotate(-12deg) translateY(-1px) !important;
  text-shadow: 0 2px 0 #4d2d10, 0 0 7px rgba(250,230,134,.24) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box input {
  font-size: clamp(15px, 1.05vw, 18px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
  min-height: 45px !important;
  margin-top: 11px !important;
  padding: 4px !important;
  gap: 2px !important;
  border: 1px solid rgba(31,13,4,.94) !important;
  border-radius: 11px 8px 12px 9px / 13px 10px 14px 11px !important;
  background:
    repeating-linear-gradient(176deg, transparent 0 9px, rgba(236,186,110,.018) 10px 11px, transparent 12px 21px),
    linear-gradient(180deg, rgba(50,29,13,.96), rgba(25,12,5,.98)) !important;
  box-shadow:
    inset 0 6px 8px rgba(0,0,0,.48),
    inset 0 -2px rgba(160,99,45,.10),
    0 1px rgba(213,151,79,.15) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips::before {
  top: 4px !important;
  bottom: 4px !important;
  border: 1px solid rgba(230,198,113,.72) !important;
  border-radius: 7px 5px 8px 6px / 9px 6px 9px 7px !important;
  background:
    radial-gradient(ellipse at 50% -24%, rgba(255,240,184,.28), transparent 55%),
    repeating-linear-gradient(176deg, transparent 0 8px, rgba(26,12,4,.10) 9px 10px, transparent 11px 19px),
    linear-gradient(180deg, #93602f 0%, #70431e 48%, #4c2a10 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,232,170,.34),
    inset 0 -3px rgba(25,11,3,.35),
    0 3px 0 rgba(24,10,3,.62),
    0 6px 11px rgba(0,0,0,.24),
    0 0 8px rgba(202,168,85,.14) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
  min-height: 35px !important;
  padding: 7px 13px !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
  color: rgba(232,217,184,.72) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip.active {
  color: #fae8ad !important;
  text-shadow: 0 2px 2px rgba(28,12,3,.78), 0 0 5px rgba(250,230,134,.16) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-count {
  margin: 8px 5px 0 !important;
  font-size: 11px !important;
  color: rgba(230,210,170,.68) !important;
}

@media (max-width: 900px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 28px) !important;
    min-height: 0 !important;
    padding: 16px 23px 14px !important;
  }
  html body .catalog-trunk-end {
    width: 29px !important;
    height: 82px !important;
  }
  html body .catalog-trunk-end.is-left { left: -20px !important; }
  html body .catalog-trunk-end.is-right { right: -20px !important; }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 14px) !important;
    min-height: 0 !important;
    margin-bottom: 22px !important;
    padding: 15px 15px 13px !important;
    border-radius: 20px 15px 22px 17px / 24px 18px 26px 20px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
    height: 45px !important;
    padding-inline: 13px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box > span {
    font-size: 23px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
    min-height: 42px !important;
    margin-top: 10px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 9px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-count {
    margin-top: 7px !important;
    font-size: 10px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  --trunk-dark: #190c05 !important;
  --trunk-deep: #2a160b !important;
  --trunk-mid: #4a2e18 !important;
  --trunk-warm: #6d4828 !important;
  --trunk-light: #9b7144 !important;
  box-sizing: border-box !important;
  width: min(1260px, calc(100% - 112px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto 22px !important;
  padding: 10px 18px 8px !important;
  border: 1px solid rgba(24, 10, 3, .98) !important;
  border-radius: 16px 13px 17px 12px / 18px 14px 19px 13px !important;
  clip-path: polygon(
    .45% 7%, 2.5% 2%, 9% .8%, 17% 1.6%, 25% .5%, 35% 1.4%,
    45% .4%, 56% 1.5%, 67% .5%, 78% 1.4%, 88% .6%, 96.5% 2.1%,
    99.45% 8%, 99.8% 31%, 99.35% 53%, 99.75% 76%, 98.8% 93%,
    95.5% 98.5%, 87% 99.2%, 78% 98.4%, 68% 99.5%, 58% 98.5%,
    47% 99.6%, 37% 98.5%, 27% 99.4%, 17% 98.4%, 8% 99.1%,
    2.1% 96%, .5% 89%, .15% 68%, .55% 48%, .12% 26%
  ) !important;
  background:
    /* Deeper knots and grain scars */
    radial-gradient(ellipse 74px 22px at 11% 73%, rgba(18, 7, 2, .88) 0 13%, rgba(86, 50, 24, .42) 18% 25%, transparent 31%),
    radial-gradient(ellipse 58px 18px at 62% 24%, rgba(20, 8, 2, .78) 0 12%, rgba(111, 68, 34, .28) 18% 27%, transparent 34%),
    radial-gradient(ellipse 45px 15px at 91% 67%, rgba(15, 6, 2, .84) 0 14%, rgba(91, 52, 24, .32) 20% 29%, transparent 36%),
    /* Longer splits following the grain */
    linear-gradient(101deg, transparent 0 6%, rgba(25, 9, 2, .55) 6.15% 6.45%, rgba(171, 116, 62, .11) 6.55% 6.75%, transparent 6.9% 24%, rgba(19, 7, 2, .42) 24.2% 24.48%, transparent 24.7% 43%, rgba(180, 124, 67, .09) 43.2% 43.45%, transparent 43.7% 72%, rgba(20, 7, 2, .46) 72.2% 72.55%, transparent 72.8% 91%, rgba(164, 105, 53, .09) 91.2% 91.5%, transparent 91.8%),
    /* Uneven raised wood grain */
    repeating-linear-gradient(176deg, transparent 0 8px, rgba(238, 192, 126, .045) 9px 10px, transparent 11px 19px, rgba(19, 7, 2, .12) 20px 21px, transparent 22px 34px),
    linear-gradient(180deg, #7c5734 0%, #654321 14%, #513018 43%, #3a2010 73%, #241107 100%) !important;
  background-blend-mode: multiply, multiply, multiply, normal, soft-light, normal !important;
  box-shadow:
    inset 0 3px 0 rgba(239, 195, 132, .20),
    inset 0 8px 12px rgba(185, 127, 69, .08),
    inset 0 -7px 8px rgba(10, 3, 1, .66),
    inset 5px 0 7px rgba(15, 5, 1, .24),
    inset -5px 0 7px rgba(15, 5, 1, .28),
    0 4px 0 #1a0a03,
    0 11px 20px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(143, 93, 45, .22) !important;
  overflow: visible !important;
  filter: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -4px -6px -5px !important;
  border: 0 !important;
  border-radius: 19px 15px 20px 14px / 21px 16px 22px 15px !important;
  clip-path: polygon(
    0 10%, 1.6% 3%, 8% 0, 16% 1.7%, 24% .2%, 33% 1.5%, 43% 0,
    53% 1.8%, 63% .1%, 73% 1.6%, 83% .2%, 92% 1.8%, 98.6% 5%,
    100% 17%, 99.4% 39%, 100% 62%, 99.2% 86%, 97% 97%, 90% 100%,
    80% 98.5%, 70% 100%, 60% 98.3%, 50% 100%, 40% 98.4%, 30% 100%,
    20% 98.4%, 10% 100%, 2.2% 96%, 0 86%, .7% 61%, 0 38%
  ) !important;
  background:
    radial-gradient(ellipse 36px 11px at 18% 22%, rgba(8, 2, 0, .8) 0 35%, transparent 68%),
    radial-gradient(ellipse 44px 12px at 82% 82%, rgba(8, 2, 0, .76) 0 34%, transparent 67%),
    linear-gradient(180deg, #44230e 0%, #2b1307 48%, #170803 100%) !important;
  box-shadow:
    inset 0 2px 1px rgba(206, 142, 75, .12),
    inset 0 -4px 4px rgba(5, 1, 0, .72),
    0 7px 14px rgba(0, 0, 0, .30) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 4px 7px 5px !important;
  border: 1px solid rgba(205, 153, 91, .15) !important;
  border-radius: 12px 10px 13px 9px / 13px 10px 14px 9px !important;
  background:
    linear-gradient(96deg, transparent 0 4%, rgba(16, 5, 1, .45) 4.15% 4.35%, transparent 4.6% 19%, rgba(216, 164, 98, .08) 19.1% 19.3%, transparent 19.55% 38%, rgba(14, 4, 1, .38) 38.1% 38.35%, transparent 38.6% 58%, rgba(205, 151, 86, .075) 58.15% 58.35%, transparent 58.6% 79%, rgba(12, 4, 1, .40) 79.15% 79.42%, transparent 79.7%),
    linear-gradient(180deg, rgba(255, 225, 171, .045), transparent 34%, rgba(4, 1, 0, .15) 100%) !important;
  box-shadow:
    inset 0 1px rgba(245, 204, 139, .09),
    inset 0 -2px rgba(8, 2, 0, .35) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-trunk-decor {
  display: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > :not(.catalog-tools-effects):not(.catalog-trunk-decor) {
  position: relative !important;
  z-index: 3 !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
  box-sizing: border-box !important;
  height: 40px !important;
  gap: 9px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(13, 5, 2, .98) !important;
  border-radius: 8px 7px 9px 6px / 9px 7px 10px 7px !important;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(99, 126, 83, .055), transparent 42%),
    linear-gradient(180deg, #101a12 0%, #09110c 58%, #050a07 100%) !important;
  box-shadow:
    inset 0 6px 8px rgba(0, 0, 0, .72),
    inset 0 -1px rgba(154, 105, 57, .13),
    inset 4px 0 6px rgba(0, 0, 0, .24),
    0 1px 0 rgba(215, 160, 92, .15),
    0 2px 3px rgba(14, 5, 1, .42) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box::before {
  inset: -3px -4px !important;
  border: 1px solid rgba(59, 33, 16, .92) !important;
  border-radius: 11px 9px 12px 8px / 12px 9px 13px 9px !important;
  background: linear-gradient(180deg, rgba(199, 142, 77, .08), transparent 45%, rgba(8, 2, 0, .16)) !important;
  box-shadow: inset 0 1px rgba(227, 177, 112, .09), 0 1px rgba(7, 2, 0, .55) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box > span {
  font-size: 23px !important;
  transform: rotate(-12deg) translateY(-1px) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box input {
  min-width: 0 !important;
  font-size: clamp(14px, .92vw, 16px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 35px !important;
  margin-top: 7px !important;
  padding: 3px !important;
  gap: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 7, 2, .98) !important;
  border-radius: 8px 6px 9px 6px / 9px 7px 10px 7px !important;
  background: linear-gradient(180deg, rgba(45, 25, 12, .98), rgba(20, 9, 4, .99)) !important;
  box-shadow:
    inset 0 5px 6px rgba(0, 0, 0, .48),
    inset 0 -1px rgba(171, 111, 55, .08),
    0 1px rgba(205, 148, 79, .12) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips::before {
  top: 3px !important;
  bottom: 3px !important;
  border: 1px solid rgba(225, 194, 111, .68) !important;
  border-radius: 5px 4px 6px 4px / 6px 4px 7px 5px !important;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(255, 240, 183, .26), transparent 60%),
    linear-gradient(180deg, #835729 0%, #5f3718 54%, #3c1e0b 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 231, 169, .28),
    inset 0 -2px rgba(17, 6, 1, .38),
    0 2px 0 rgba(14, 5, 1, .66),
    0 4px 7px rgba(0, 0, 0, .22) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 29px !important;
  padding: 5px 7px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  letter-spacing: .035em !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-count {
  margin: 4px 3px 0 !important;
  min-height: 11px !important;
  line-height: 1.1 !important;
  font-size: 10px !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 42px) !important;
    padding: 10px 14px 8px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips::-webkit-scrollbar {
    display: none !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding-inline: 10px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 18px) !important;
    margin-bottom: 18px !important;
    padding: 9px 11px 7px !important;
    border-radius: 13px 10px 14px 9px / 15px 11px 16px 10px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
    height: 38px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
    min-height: 34px !important;
    margin-top: 6px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chip {
    min-height: 28px !important;
    font-size: 9px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  --trunk-dark: #211006 !important;
  --trunk-deep: #3b210f !important;
  --trunk-mid: #60401f !important;
  --trunk-warm: #81572f !important;
  --trunk-light: #a77a43 !important;
  width: min(1180px, calc(100% - 120px)) !important;
  margin: 0 auto 22px !important;
  padding: 13px 24px 10px !important;
  border: 1px solid rgba(34, 16, 5, .96) !important;
  border-radius: 31px 24px 34px 27px / 25px 34px 26px 31px !important;
  clip-path: polygon(
    .7% 14%, 2.1% 6%, 5.8% 2.2%, 13% 1%, 21% 2.4%, 30% .7%,
    39% 2.1%, 49% .5%, 59% 2.2%, 69% .8%, 79% 2.3%, 88% .8%,
    95.8% 3.2%, 98.5% 8.5%, 99.3% 18%, 99.7% 38%, 99.25% 60%,
    99.7% 79%, 98.3% 91%, 95% 97%, 88% 99%, 79% 97.7%, 69% 99.3%,
    59% 97.8%, 49% 99.4%, 39% 97.9%, 29% 99.2%, 20% 97.7%, 12% 99%,
    5% 96.7%, 1.8% 91%, .55% 80%, .2% 61%, .65% 42%, .25% 25%
  ) !important;
  background:
    /* Recessed knots near the base */
    radial-gradient(ellipse 46px 17px at 7.5% 76%, rgba(24, 9, 3, .82) 0 18%, rgba(94, 58, 27, .45) 22% 34%, transparent 42%),
    radial-gradient(ellipse 38px 13px at 48% 10%, rgba(27, 11, 4, .68) 0 16%, rgba(135, 89, 43, .24) 23% 37%, transparent 45%),
    radial-gradient(ellipse 42px 15px at 92% 72%, rgba(24, 9, 3, .78) 0 17%, rgba(111, 70, 33, .36) 23% 35%, transparent 44%),
    /* Short, irregular scars and bark splits */
    linear-gradient(103deg,
      transparent 0 8%, rgba(28, 11, 3, .52) 8.15% 8.42%, rgba(206, 154, 86, .07) 8.56% 8.76%, transparent 8.9% 27%,
      rgba(26, 10, 3, .38) 27.18% 27.42%, transparent 27.6% 54%, rgba(205, 151, 82, .065) 54.15% 54.36%, transparent 54.55% 74%,
      rgba(23, 9, 3, .43) 74.18% 74.46%, transparent 74.68% 93%, rgba(204, 149, 81, .06) 93.2% 93.44%, transparent 93.7%),
    repeating-linear-gradient(176deg,
      transparent 0 7px,
      rgba(237, 191, 117, .045) 8px 9px,
      transparent 10px 17px,
      rgba(26, 11, 4, .17) 18px 20px,
      transparent 21px 31px),
    repeating-linear-gradient(8deg,
      transparent 0 23px,
      rgba(24, 9, 3, .11) 24px 26px,
      transparent 27px 49px),
    /* Reuse the Inventory frame's brown tones */
    linear-gradient(180deg,
      #8a6035 0%,
      #81572f 10%,
      #6f4926 24%,
      #60401f 48%,
      #4a2c15 70%,
      #3b210f 86%,
      #271207 100%) !important;
  background-blend-mode: multiply, multiply, multiply, normal, soft-light, soft-light, normal !important;
  box-shadow:
    inset 0 4px 1px rgba(237, 191, 117, .22),
    inset 0 9px 11px rgba(216, 158, 89, .08),
    inset 0 -9px 8px rgba(19, 7, 2, .67),
    inset 7px 0 10px rgba(25, 10, 3, .25),
    inset -7px 0 10px rgba(25, 10, 3, .28),
    0 3px 0 #2a1509,
    0 8px 0 #170803,
    0 14px 23px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(129, 87, 47, .20) !important;
  filter: drop-shadow(0 2px 1px rgba(1, 7, 3, .22)) !important;
  overflow: visible !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  inset: -7px -9px -11px !important;
  z-index: -2 !important;
  border: 1px solid rgba(25, 9, 3, .95) !important;
  border-radius: 39px 28px 42px 31px / 32px 41px 34px 38px !important;
  clip-path: polygon(
    0 19%, 1.3% 8%, 4.2% 2.8%, 11% 0, 20% 2.1%, 30% .3%, 40% 2.2%,
    50% 0, 60% 2%, 70% .2%, 80% 2.2%, 89% .4%, 96% 3.4%, 99% 11%,
    100% 25%, 99.45% 43%, 100% 63%, 99.15% 82%, 97.2% 93%, 92% 99%,
    82% 97.6%, 72% 100%, 62% 97.7%, 52% 100%, 42% 97.8%, 32% 100%,
    22% 97.7%, 12% 100%, 4% 96%, .8% 87%, 0 70%, .55% 51%
  ) !important;
  background:
    radial-gradient(ellipse 22px 8px at 18% 21%, rgba(9, 2, 0, .78) 0 35%, transparent 70%),
    radial-gradient(ellipse 28px 9px at 78% 83%, rgba(9, 2, 0, .74) 0 34%, transparent 69%),
    repeating-linear-gradient(172deg,
      rgba(33, 15, 5, .98) 0 6px,
      rgba(72, 39, 17, .96) 7px 13px,
      rgba(42, 20, 7, .98) 14px 20px,
      rgba(89, 50, 23, .93) 21px 27px),
    linear-gradient(180deg, #4d2b14 0%, #321708 58%, #180803 100%) !important;
  background-blend-mode: multiply, multiply, normal, normal !important;
  box-shadow:
    inset 0 3px 2px rgba(206, 142, 75, .13),
    inset 0 -6px 5px rgba(6, 1, 0, .76),
    0 9px 14px rgba(0, 0, 0, .28) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  inset: 4px 8px 7px !important;
  z-index: 1 !important;
  border: 1px solid rgba(211, 160, 96, .11) !important;
  border-radius: 26px 19px 29px 21px / 20px 29px 21px 26px !important;
  clip-path: polygon(0 12%, 3% 3%, 15% 0, 31% 2%, 48% 0, 66% 2%, 84% 0, 97% 4%, 100% 15%, 99% 84%, 96% 96%, 83% 100%, 65% 98%, 48% 100%, 30% 98%, 14% 100%, 3% 96%, 0 84%) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 225, 171, .105) 0%,
      rgba(223, 170, 102, .045) 10%,
      transparent 27%,
      transparent 71%,
      rgba(14, 5, 1, .18) 100%),
    linear-gradient(99deg,
      transparent 0 5%, rgba(242, 194, 124, .055) 5.2% 5.5%, transparent 5.8% 31%,
      rgba(21, 7, 2, .15) 31.2% 31.55%, transparent 31.9% 62%,
      rgba(237, 187, 113, .045) 62.2% 62.5%, transparent 62.8% 88%,
      rgba(18, 6, 2, .14) 88.2% 88.5%, transparent 88.8%) !important;
  box-shadow:
    inset 0 2px rgba(246, 209, 145, .12),
    inset 0 -3px rgba(13, 4, 1, .34) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-trunk-decor {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  clip-path: inherit !important;
  pointer-events: none !important;
}

html body .catalog-tools-tree-trunk .catalog-trunk-end {
  display: block !important;
  top: 50% !important;
  width: 34px !important;
  height: 72% !important;
  min-height: 58px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 52% 34% 43% 57% / 39% 55% 45% 61% !important;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 21%, rgba(43, 20, 7, .42) 23% 27%, transparent 29% 42%, rgba(40, 18, 6, .38) 44% 48%, transparent 50%),
    linear-gradient(90deg, #211006 0%, #3b210f 43%, #60401f 73%, rgba(129, 87, 47, .38) 100%) !important;
  box-shadow:
    inset 6px 0 7px rgba(15, 5, 1, .45),
    inset -2px 0 rgba(216, 158, 89, .10) !important;
  opacity: .82 !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-end.is-left { left: -8px !important; }
html body .catalog-tools-tree-trunk .catalog-trunk-end.is-right {
  right: -8px !important;
  transform: translateY(-50%) scaleX(-1) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-end > i {
  inset: 17% 20% !important;
  border: 1px solid rgba(171, 112, 57, .18) !important;
  border-radius: 50% !important;
  transform: rotate(-8deg) !important;
}

html body .catalog-tools-tree-trunk .catalog-trunk-knot {
  display: block !important;
  width: 34px !important;
  height: 15px !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 51% 50%, #170803 0 16%, #3b210f 19% 34%, #76502a 38% 47%, #321708 51% 61%, transparent 65%) !important;
  filter: drop-shadow(0 2px 1px rgba(14, 5, 1, .42)) !important;
  opacity: .58 !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-knot > i {
  inset: 4px 8px !important;
  border-color: rgba(222, 170, 102, .14) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-knot.knot-one {
  left: 3.1% !important;
  bottom: 8px !important;
  transform: rotate(-10deg) scale(.88) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-knot.knot-two {
  left: 52% !important;
  top: 4px !important;
  transform: rotate(5deg) scale(.66) !important;
  opacity: .34 !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-knot.knot-three {
  right: 3.6% !important;
  bottom: 8px !important;
  transform: rotate(9deg) scale(.76) !important;
  opacity: .48 !important;
}

html body .catalog-tools-tree-trunk .catalog-trunk-vine {
  display: block !important;
  top: -1px !important;
  width: 94px !important;
  height: 28px !important;
  border-top: 3px solid #4d2b14 !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 2px 1px rgba(1, 7, 3, .38)) !important;
  opacity: .82 !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-vine.vine-left {
  left: 9% !important;
  transform: rotate(4deg) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-vine.vine-right {
  right: 9% !important;
  transform: rotate(-4deg) scaleX(-1) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-vine > i {
  width: 13px !important;
  height: 7px !important;
  border: 1px solid rgba(28, 49, 22, .78) !important;
  border-radius: 100% 10% 100% 10% !important;
  background: linear-gradient(145deg, #657d48 0%, #496333 62%, #29431f 100%) !important;
  box-shadow: inset 1px 1px rgba(222, 233, 154, .12), 0 1px 1px rgba(1, 7, 3, .28) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-vine > i:nth-child(1) {
  left: 12px !important;
  top: -5px !important;
  transform: rotate(-31deg) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-vine > i:nth-child(2) {
  left: 43px !important;
  top: 0 !important;
  transform: rotate(22deg) scale(.84) !important;
}
html body .catalog-tools-tree-trunk .catalog-trunk-vine > i:nth-child(3) {
  right: 8px !important;
  top: -6px !important;
  transform: rotate(-18deg) scale(.74) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
  height: 39px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(18, 7, 2, .98) !important;
  border-radius: 11px 8px 12px 9px / 10px 13px 9px 12px !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(104, 129, 88, .055), transparent 42%),
    linear-gradient(180deg, #101a12 0%, #09110c 58%, #050a07 100%) !important;
  box-shadow:
    inset 0 7px 9px rgba(0, 0, 0, .74),
    inset 0 -1px rgba(160, 111, 61, .13),
    inset 5px 0 7px rgba(0, 0, 0, .25),
    inset -4px 0 6px rgba(0, 0, 0, .18),
    0 1px rgba(225, 172, 103, .12),
    0 3px 4px rgba(14, 5, 1, .42) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box::before {
  inset: -4px -5px !important;
  border: 1px solid rgba(68, 39, 18, .94) !important;
  border-radius: 15px 11px 16px 12px / 14px 17px 13px 16px !important;
  background:
    linear-gradient(180deg, rgba(220, 164, 96, .09), transparent 42%, rgba(9, 2, 0, .17)) !important;
  box-shadow: inset 0 1px rgba(231, 184, 116, .09), 0 1px rgba(7, 2, 0, .56) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
  min-height: 34px !important;
  margin-top: 7px !important;
  padding: 3px !important;
  border-color: rgba(20, 8, 2, .98) !important;
  border-radius: 9px 7px 10px 8px / 8px 11px 8px 10px !important;
  background:
    linear-gradient(180deg, #3b210f 0%, #2a1509 52%, #170803 100%) !important;
  box-shadow:
    inset 0 5px 6px rgba(0, 0, 0, .50),
    inset 0 -1px rgba(171, 111, 55, .08),
    0 1px rgba(205, 148, 79, .11) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips::before {
  background:
    radial-gradient(ellipse at 50% -28%, rgba(255, 234, 174, .23), transparent 59%),
    repeating-linear-gradient(176deg, transparent 0 5px, rgba(24, 9, 3, .10) 6px 7px, transparent 8px 13px),
    linear-gradient(180deg, #81572f 0%, #60401f 54%, #3b210f 100%) !important;
  border-color: rgba(225, 194, 111, .58) !important;
  box-shadow:
    inset 0 1px rgba(255, 231, 169, .25),
    inset 0 -2px rgba(17, 6, 1, .40),
    0 2px 0 rgba(14, 5, 1, .68),
    0 4px 7px rgba(0, 0, 0, .22) !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 44px) !important;
    padding: 12px 18px 9px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 18px) !important;
    padding: 11px 13px 8px !important;
    border-radius: 22px 17px 24px 19px / 20px 24px 21px 23px !important;
  }
  html body .catalog-tools-tree-trunk .catalog-trunk-vine {
    display: none !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  position: relative !important;
  isolation: isolate !important;
  width: min(1180px, calc(100% - 120px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto 22px !important;
  padding: 17px 29px 13px !important;
  border: 0 !important;
  border-radius: 28px !important;
  clip-path: none !important;
  background:
    radial-gradient(ellipse at 50% 1%, rgba(117, 243, 206, .045), transparent 48%),
    linear-gradient(180deg, rgba(22, 34, 23, .96) 0%, rgba(11, 21, 14, .98) 54%, rgba(5, 12, 8, .99) 100%) !important;
  background-blend-mode: normal !important;
  box-shadow:
    inset 0 16px 24px rgba(0, 0, 0, .57),
    inset 0 -13px 18px rgba(0, 0, 0, .68),
    inset 15px 0 18px rgba(0, 0, 0, .34),
    inset -15px 0 18px rgba(0, 0, 0, .34),
    inset 0 0 0 2px rgba(6, 10, 7, .84),
    0 12px 20px rgba(0, 0, 0, .34) !important;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .34)) !important;
  overflow: visible !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -3px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url('/images/cfpanel.png?v=255') center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 3px 1px rgba(19, 8, 2, .68))
    drop-shadow(0 10px 12px rgba(0, 0, 0, .32)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -3px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url('/images/searchbar.png?v=255') center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .26)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-trunk-decor,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-tools-effects {
  display: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > :not(.catalog-trunk-decor):not(.catalog-tools-effects) {
  position: relative !important;
  z-index: 4 !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box {
  height: 39px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(8, 15, 10, .93), rgba(4, 10, 7, .97)) !important;
  box-shadow:
    inset 0 8px 12px rgba(0, 0, 0, .70),
    inset 0 -1px rgba(216, 177, 103, .10),
    inset 6px 0 9px rgba(0, 0, 0, .26),
    inset -6px 0 9px rgba(0, 0, 0, .24),
    0 3px 5px rgba(0, 0, 0, .34) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box::before {
  content: none !important;
  display: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box:focus-within {
  border: 0 !important;
  box-shadow:
    inset 0 8px 12px rgba(0, 0, 0, .70),
    inset 0 -1px rgba(250, 230, 134, .17),
    inset 6px 0 9px rgba(0, 0, 0, .26),
    inset -6px 0 9px rgba(0, 0, 0, .24),
    0 3px 5px rgba(0, 0, 0, .34),
    0 0 12px rgba(250, 230, 134, .10) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .filter-chips {
  margin-top: 7px !important;
  border-color: rgba(9, 5, 2, .92) !important;
  background: linear-gradient(180deg, rgba(48, 29, 14, .90), rgba(20, 11, 5, .96)) !important;
  box-shadow:
    inset 0 7px 9px rgba(0, 0, 0, .52),
    inset 0 -1px rgba(199, 145, 78, .09),
    0 2px 4px rgba(0, 0, 0, .34) !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 44px) !important;
    padding: 16px 22px 12px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 18px) !important;
    padding: 13px 14px 10px !important;
    border-radius: 18px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before,
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
    inset: -2px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  width: min(1180px, calc(100% - 120px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto 22px !important;
  padding: 17px 29px 13px !important;
  border: 0 !important;
  border-radius: 28px !important;
  clip-path: none !important;
  overflow: visible !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(117, 243, 206, .045), transparent 50%),
    linear-gradient(180deg, rgba(22, 34, 23, .97) 0%, rgba(11, 21, 14, .985) 55%, rgba(5, 12, 8, .995) 100%) !important;
  box-shadow:
    inset 0 17px 24px rgba(0, 0, 0, .58),
    inset 0 -14px 19px rgba(0, 0, 0, .70),
    inset 15px 0 18px rgba(0, 0, 0, .34),
    inset -15px 0 18px rgba(0, 0, 0, .34),
    0 12px 20px rgba(0, 0, 0, .34) !important;
  filter: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 9px 12px 10px !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  border: 1px solid rgba(0, 0, 0, .58) !important;
  border-radius: 20px !important;
  clip-path: none !important;
  background: linear-gradient(180deg, rgba(4, 10, 7, .08), rgba(0, 0, 0, .19)) !important;
  box-shadow:
    inset 0 10px 15px rgba(0, 0, 0, .34),
    inset 0 -8px 12px rgba(0, 0, 0, .42),
    0 1px rgba(235, 199, 118, .055) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: inherit !important;
  clip-path: none !important;
  transform: none !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  transform-origin: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art > .catalog-panel-art-frame {
  z-index: 1 !important;
  filter:
    drop-shadow(0 3px 1px rgba(19, 8, 2, .72))
    drop-shadow(0 10px 12px rgba(0, 0, 0, .34)) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art > .catalog-panel-art-search {
  z-index: 2 !important;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .28)) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > :not(.catalog-panel-art):not(.catalog-trunk-decor):not(.catalog-tools-effects) {
  position: relative !important;
  z-index: 10 !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-trunk-decor,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-tools-effects {
  display: none !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 44px) !important;
    padding: 16px 22px 12px !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% - 18px) !important;
    padding: 13px 14px 10px !important;
    border-radius: 18px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
    inset: 6px 7px 7px !important;
    border-radius: 13px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art > img.catalog-panel-art-frame,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art > img.catalog-panel-art-search {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box {
  position: relative !important;
  z-index: 12 !important;
  border: 0 !important;
  outline: 0 !important;
  background: linear-gradient(180deg, rgba(8, 15, 10, .92), rgba(3, 9, 6, .97)) !important;
  box-shadow:
    inset 0 7px 11px rgba(0, 0, 0, .68),
    inset 0 -1px rgba(239, 204, 119, .08),
    inset 6px 0 8px rgba(0, 0, 0, .24),
    inset -6px 0 8px rgba(0, 0, 0, .24) !important;
  overflow: visible !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box::before,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box::after {
  content: none !important;
  display: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box:focus-within {
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    inset 0 7px 11px rgba(0, 0, 0, .68),
    inset 0 -1px rgba(255, 224, 143, .14),
    inset 6px 0 8px rgba(0, 0, 0, .24),
    inset -6px 0 8px rgba(0, 0, 0, .24),
    0 0 9px rgba(255, 207, 92, .08) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art {
  z-index: 20 !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art > img.catalog-panel-art-frame {
  z-index: 1 !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art > img.catalog-panel-art-search {
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns {
  position: absolute !important;
  inset: 0 !important;
  z-index: 32 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
  position: absolute !important;
  top: 50% !important;
  width: 128px !important;
  height: 250px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
  left: -84px !important;
  transform: translateY(-72px) scale(.84) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: -84px !important;
  transform: translateY(-72px) scaleX(-1) scale(.84) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-swing {
  position: absolute !important;
  inset: 0 !important;
  transform-origin: 50% 0 !important;
  animation: cofferHallLanternSwingLeftV258 5.7s ease-in-out infinite !important;
  will-change: transform !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern.is-right .coffer-hall-panel-lantern-swing {
  animation-name: cofferHallLanternSwingRightV258 !important;
  animation-delay: -.85s !important;
}
@keyframes cofferHallLanternSwingLeftV258 {
  0%, 100% { transform: rotate(-3.2deg) translateY(0); }
  22% { transform: rotate(-1.7deg) translateY(.5px); }
  50% { transform: rotate(2.8deg) translateY(1.5px); }
  76% { transform: rotate(.8deg) translateY(.5px); }
}
@keyframes cofferHallLanternSwingRightV258 {
  0%, 100% { transform: rotate(3.2deg) translateY(0); }
  22% { transform: rotate(1.7deg) translateY(.5px); }
  50% { transform: rotate(-2.8deg) translateY(1.5px); }
  76% { transform: rotate(-.8deg) translateY(.5px); }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-assembly {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 104px !important;
  height: 144px !important;
  transform: translateX(-50%) !important;
  isolation: isolate !important;
  overflow: visible !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer {
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer-glass {
  z-index: 1 !important;
  filter: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer-mid {
  z-index: 2 !important;
  filter: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap {
  z-index: 3 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer-base {
  z-index: 4 !important;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer-fire {
  z-index: 1 !important;
  opacity: .98 !important;
  filter:
    sepia(.34) saturate(1.28) brightness(1.04)
    drop-shadow(0 0 7px rgba(255, 231, 155, .78))
    drop-shadow(0 0 15px rgba(255, 190, 77, .42))
    drop-shadow(0 0 27px rgba(230, 150, 31, .18)) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background:
    radial-gradient(ellipse 11% 15% at 50.75% 67.92%,
      rgba(255, 254, 244, .98) 0%,
      rgba(255, 236, 181, .92) 22%,
      rgba(255, 194, 85, .70) 46%,
      transparent 76%),
    radial-gradient(ellipse 25% 31% at 50.75% 68.6%,
      rgba(255, 205, 109, .54) 0%,
      rgba(235, 158, 45, .27) 43%,
      rgba(210, 126, 18, .09) 73%,
      transparent 100%),
    radial-gradient(ellipse 43% 40% at 50.75% 69.5%,
      rgba(255, 190, 75, .17) 0%,
      rgba(209, 127, 23, .06) 56%,
      transparent 100%) !important;
  opacity: .84 !important;
  mix-blend-mode: screen !important;
  filter: blur(3.6px) saturate(1.12) brightness(1.04) hue-rotate(-5deg) !important;
  animation: cofferHallLanternGoldShiftV258 13s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern.is-right .coffer-hall-panel-lantern-fire-wrap::before {
  animation-delay: -5.25s !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  background: linear-gradient(to bottom,
    rgba(255, 252, 224, .98) 0%,
    rgba(255, 220, 137, .94) 42%,
    rgba(246, 174, 56, .90) 72%,
    rgba(211, 125, 18, .58) 100%) !important;
  opacity: .70 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.12) brightness(1.04) hue-rotate(-5deg) !important;
  -webkit-mask: url('/images/lanternfire.png?v=258') center / contain no-repeat !important;
  mask: url('/images/lanternfire.png?v=258') center / contain no-repeat !important;
  animation: cofferHallLanternFlameGoldShiftV258 13s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern.is-right .coffer-hall-panel-lantern-fire-wrap::after {
  animation-delay: -5.25s !important;
}

@keyframes cofferHallLanternGoldShiftV258 {
  0% {
    filter: blur(3.6px) saturate(1.06) brightness(1.02) hue-rotate(-8deg);
  }
  45% {
    filter: blur(3.6px) saturate(1.16) brightness(1.07) hue-rotate(1deg);
  }
  100% {
    filter: blur(3.6px) saturate(1.23) brightness(1.03) hue-rotate(10deg);
  }
}
@keyframes cofferHallLanternFlameGoldShiftV258 {
  0% {
    filter: saturate(1.05) brightness(1.02) hue-rotate(-8deg);
  }
  45% {
    filter: saturate(1.15) brightness(1.08) hue-rotate(1deg);
  }
  100% {
    filter: saturate(1.24) brightness(1.04) hue-rotate(10deg);
  }
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
    left: -67px !important;
    transform: translateY(-72px) scale(.72) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
    right: -67px !important;
    transform: translateY(-72px) scaleX(-1) scale(.72) !important;
  }
}

@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns {
    display: none !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art > img.catalog-panel-art-frame {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 40 !important;
  display: block !important;
  width: 100% !important;
  height: 39px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 39px !important;
  max-height: 39px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > img.catalog-search-frame {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 3 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .30)) !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > .catalog-search-field {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 4px 10px !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 13px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(8, 15, 10, .94), rgba(3, 9, 6, .98)) !important;
  box-shadow:
    inset 0 7px 11px rgba(0, 0, 0, .70),
    inset 0 -1px rgba(239, 204, 119, .09),
    inset 6px 0 8px rgba(0, 0, 0, .24),
    inset -6px 0 8px rgba(0, 0, 0, .24) !important;
  pointer-events: auto !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box:hover,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box:focus-within {
  border: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box:focus-within > .catalog-search-field {
  box-shadow:
    inset 0 7px 11px rgba(0, 0, 0, .70),
    inset 0 -1px rgba(255, 224, 143, .15),
    inset 6px 0 8px rgba(0, 0, 0, .24),
    inset -6px 0 8px rgba(0, 0, 0, .24),
    0 0 9px rgba(255, 207, 92, .08) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > .catalog-search-field > .catalog-search-icon {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5d16c !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transform: rotate(-12deg) translateY(-1px) !important;
  text-shadow: 0 0 6px rgba(245, 209, 108, .28) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > .catalog-search-field > input {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns {
  position: absolute !important;
  inset: 0 !important;
  z-index: 32 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
  position: absolute !important;
  top: 50% !important;
  width: 104px !important;
  height: 144px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
  left: 0 !important;
  right: auto !important;
  transform: translate(calc(-100% - 24px), -50%) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: 0 !important;
  left: auto !important;
  transform: translate(calc(100% + 24px), -50%) scaleX(-1) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-swing,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-assembly {
  inset: 0 !important;
  width: 104px !important;
  height: 144px !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap::after {
  -webkit-mask-image: url('/images/lanternfire.png?v=260') !important;
  mask-image: url('/images/lanternfire.png?v=260') !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
    transform: translate(calc(-100% - 12px), -50%) scale(.78) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
    transform: translate(calc(100% + 12px), -50%) scaleX(-1) scale(.78) !important;
  }
}
@media (max-width: 620px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns {
    display: none !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > span.catalog-search-field {
  transform: none !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
  text-shadow: none !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-swing {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 104px !important;
  height: 144px !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-assembly {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 104px !important;
  height: 144px !important;
  transform: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box {
  position: relative !important;
  z-index: 40 !important;
  height: 39px !important;
  min-height: 39px !important;
  max-height: 39px !important;
  overflow: visible !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > img.catalog-search-frame {
  top: 50% !important;
  left: 50% !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  transform: translate(-50%, -50%) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > span.catalog-search-field {
  position: absolute !important;
  top: -20px !important;
  right: 10px !important;
  bottom: auto !important;
  left: 10px !important;
  z-index: 2 !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 15px 0 54px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(8, 15, 10, .95), rgba(3, 9, 6, .985)) !important;
  box-shadow:
    inset 0 7px 11px rgba(0, 0, 0, .72),
    inset 0 -1px rgba(239, 204, 119, .10),
    inset 6px 0 8px rgba(0, 0, 0, .24),
    inset -6px 0 8px rgba(0, 0, 0, .24) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > .catalog-search-field > .catalog-search-icon {
  display: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box > .catalog-search-field > input {
  height: 100% !important;
  padding: 0 !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
  top: calc(50% + 28px) !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
    top: calc(50% + 22px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box {
  transform: translateY(10px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
  top: calc(50% + 78px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
  left: 10px !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: 10px !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
    top: calc(50% + 72px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
  top: calc(50% + 93px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
  left: 5px !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: 5px !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
    top: calc(50% + 87px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box {
  transform: translateY(20px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
  left: 8px !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: 2px !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap {
  --coffer-hall-lantern-burst-opacity: 1;
  opacity: var(--coffer-hall-lantern-burst-opacity) !important;
  will-change: opacity !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-layer-fire {
  opacity: 1 !important;
  filter:
    sepia(.32) saturate(1.34) brightness(1.09)
    drop-shadow(0 0 8px rgba(255, 238, 174, .86))
    drop-shadow(0 0 17px rgba(255, 193, 75, .50))
    drop-shadow(0 0 30px rgba(230, 150, 31, .22)) !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap::before {
  opacity: .91 !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-panel-lantern-fire-wrap::after {
  opacity: .76 !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
  top: calc(50% + 95px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-left {
  left: 9px !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: 4px !important;
}

@media (max-width: 1050px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern {
    top: calc(50% + 89px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns > .coffer-hall-panel-lantern.is-right {
  right: 5px !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies {
  position: absolute !important;
  top: -28px !important;
  left: -42px !important;
  z-index: 24 !important;
  display: block !important;
  width: 188px !important;
  height: 202px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  contain: layout style !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-firefly {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  margin: -2px 0 0 -2px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(255, 255, 242, 1) 0 17%,
    rgba(255, 239, 145, .98) 19% 33%,
    rgba(255, 205, 72, .76) 36% 52%,
    rgba(218, 142, 22, .20) 66%,
    transparent 78%) !important;
  box-shadow:
    0 0 4px 1px rgba(255, 246, 180, .95),
    0 0 10px 3px rgba(255, 202, 74, .62),
    0 0 19px 5px rgba(214, 132, 20, .22) !important;
  opacity: .72;
  will-change: transform, opacity, filter !important;
  animation-timing-function: cubic-bezier(.36, 0, .64, 1), ease-in-out, ease-in-out !important;
  animation-iteration-count: infinite !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-firefly::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 1.2px !important;
  height: 1.7px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fffef1, #ffd75e 58%, #a9610b) !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 2px rgba(255, 255, 236, .95) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-left .firefly-1 {
  animation-name: cofferFireflyLeftOne, cofferFireflyPulseA, cofferFireflyTwinkle !important;
  animation-duration: 10.8s, 3.7s, 6.1s !important;
  animation-delay: -6.4s, -1.2s, -4.8s !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-left .firefly-2 {
  width: 3px !important;
  height: 3px !important;
  animation-name: cofferFireflyLeftTwo, cofferFireflyPulseB, cofferFireflyTwinkle !important;
  animation-duration: 13.2s, 4.9s, 7.4s !important;
  animation-delay: -2.9s, -3.1s, -1.6s !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-left .firefly-3 {
  width: 5px !important;
  height: 5px !important;
  animation-name: cofferFireflyLeftThree, cofferFireflyPulseC, cofferFireflyTwinkle !important;
  animation-duration: 15.6s, 5.6s, 8.2s !important;
  animation-delay: -11.1s, -2.2s, -6.7s !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-1 {
  animation-name: cofferFireflyRightOne, cofferFireflyPulseB, cofferFireflyTwinkle !important;
  animation-duration: 11.7s, 4.1s, 6.8s !important;
  animation-delay: -7.2s, -2.4s, -5.1s !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-2 {
  width: 5px !important;
  height: 5px !important;
  animation-name: cofferFireflyRightTwo, cofferFireflyPulseC, cofferFireflyTwinkle !important;
  animation-duration: 14.4s, 5.2s, 8.7s !important;
  animation-delay: -4.5s, -.9s, -7.3s !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-3 {
  width: 3px !important;
  height: 3px !important;
  animation-name: cofferFireflyRightThree, cofferFireflyPulseA, cofferFireflyTwinkle !important;
  animation-duration: 9.9s, 3.5s, 5.9s !important;
  animation-delay: -1.8s, -2.8s, -3.2s !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-4 {
  animation-name: cofferFireflyRightFour, cofferFireflyPulseB, cofferFireflyTwinkle !important;
  animation-duration: 16.1s, 5.9s, 9.1s !important;
  animation-delay: -12.6s, -4.2s, -.7s !important;
}

@keyframes cofferFireflyLeftOne {
  0%, 100% { transform: translate(-54px, -31px) scale(.82); }
  20% { transform: translate(-18px, -63px) scale(1.04); }
  43% { transform: translate(42px, -34px) scale(.90); }
  67% { transform: translate(57px, 27px) scale(1.06); }
  84% { transform: translate(-13px, 47px) scale(.88); }
}
@keyframes cofferFireflyLeftTwo {
  0%, 100% { transform: translate(49px, 50px) scale(.92); }
  18% { transform: translate(64px, -3px) scale(1.08); }
  41% { transform: translate(24px, -48px) scale(.82); }
  63% { transform: translate(-43px, -43px) scale(1); }
  82% { transform: translate(-61px, 16px) scale(.86); }
}
@keyframes cofferFireflyLeftThree {
  0%, 100% { transform: translate(-66px, 25px) scale(.78); }
  22% { transform: translate(-39px, -16px) scale(1); }
  47% { transform: translate(4px, -56px) scale(.88); }
  70% { transform: translate(52px, -8px) scale(1.05); }
  87% { transform: translate(18px, 57px) scale(.83); }
}

@keyframes cofferFireflyRightOne {
  0%, 100% { transform: translate(60px, -24px) scale(.84); }
  21% { transform: translate(25px, -61px) scale(1.03); }
  45% { transform: translate(-42px, -36px) scale(.89); }
  69% { transform: translate(-58px, 25px) scale(1.08); }
  86% { transform: translate(13px, 49px) scale(.87); }
}
@keyframes cofferFireflyRightTwo {
  0%, 100% { transform: translate(-51px, 48px) scale(.79); }
  19% { transform: translate(-67px, -6px) scale(1.02); }
  42% { transform: translate(-19px, -52px) scale(.88); }
  65% { transform: translate(44px, -42px) scale(1.07); }
  83% { transform: translate(61px, 18px) scale(.91); }
}
@keyframes cofferFireflyRightThree {
  0%, 100% { transform: translate(45px, 39px) scale(.86); }
  17% { transform: translate(63px, -13px) scale(1); }
  39% { transform: translate(18px, -63px) scale(.81); }
  62% { transform: translate(-34px, -49px) scale(1.06); }
  81% { transform: translate(-65px, 8px) scale(.89); }
}
@keyframes cofferFireflyRightFour {
  0%, 100% { transform: translate(-61px, -20px) scale(.82); }
  24% { transform: translate(-28px, 39px) scale(1.06); }
  48% { transform: translate(22px, 58px) scale(.91); }
  71% { transform: translate(65px, 7px) scale(1); }
  88% { transform: translate(34px, -53px) scale(.86); }
}

@keyframes cofferFireflyPulseA {
  0%, 100% { opacity: .28; }
  18% { opacity: .95; }
  43% { opacity: .48; }
  66% { opacity: .88; }
  84% { opacity: .34; }
}
@keyframes cofferFireflyPulseB {
  0%, 100% { opacity: .68; }
  17% { opacity: .33; }
  38% { opacity: 1; }
  61% { opacity: .45; }
  82% { opacity: .87; }
}
@keyframes cofferFireflyPulseC {
  0%, 100% { opacity: .42; }
  21% { opacity: .84; }
  47% { opacity: .24; }
  72% { opacity: .96; }
  89% { opacity: .56; }
}
@keyframes cofferFireflyTwinkle {
  0%, 100% { filter: brightness(.92) saturate(.96); }
  35% { filter: brightness(1.25) saturate(1.12); }
  58% { filter: brightness(.84) saturate(.91); }
  79% { filter: brightness(1.16) saturate(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-firefly {
    animation: none !important;
    opacity: .65 !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-left .firefly-1 {
    transform: translate(-50px, -28px) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-left .firefly-2 {
    transform: translate(48px, 36px) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-left .firefly-3 {
    transform: translate(-33px, 45px) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-1 {
    transform: translate(54px, -25px) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-2 {
    transform: translate(-48px, 39px) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-3 {
    transform: translate(20px, 51px) !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .coffer-hall-lantern-fireflies-right .firefly-4 {
    transform: translate(-56px, -19px) !important;
  }
}

html body .reward-showcase .reward-showcase-divider {
  display: none !important;
}

html body .reward-showcase .reward-showcase-viewport {
  position: relative !important;
  min-height: 304px !important;
  padding: 0 0 10px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%) !important;
}

html body .reward-showcase .reward-showcase-viewport::before,
html body .reward-showcase .reward-showcase-viewport::after {
  top: 40px !important;
  bottom: 4px !important;
  width: min(54px, 5vw) !important;
}

html body .reward-showcase .reward-showcase-root-rail {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 1px !important;
  height: 58px !important;
  z-index: 8 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 5px 5px rgba(1, 7, 3, .34)) !important;
}

html body .reward-showcase .reward-showcase-root-rail::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 22px !important;
  height: 13px !important;
  border: 1px solid rgba(35, 16, 6, .90) !important;
  border-radius: 46% 54% 48% 52% / 55% 45% 59% 41% !important;
  clip-path: polygon(0 37%, 3% 18%, 9% 10%, 17% 18%, 26% 8%, 36% 17%, 47% 7%, 57% 18%, 68% 9%, 79% 18%, 90% 8%, 97% 19%, 100% 40%, 98% 73%, 91% 91%, 80% 82%, 69% 94%, 58% 84%, 47% 94%, 36% 83%, 25% 92%, 14% 83%, 5% 92%, 1% 72%) !important;
  background:
    radial-gradient(ellipse 18px 5px at 14% 53%, rgba(30, 13, 4, .67) 0 30%, rgba(151, 96, 44, .23) 35% 43%, transparent 49%),
    radial-gradient(ellipse 15px 5px at 38% 45%, rgba(32, 14, 5, .62) 0 29%, rgba(150, 91, 42, .22) 34% 44%, transparent 49%),
    radial-gradient(ellipse 17px 5px at 66% 55%, rgba(29, 12, 4, .64) 0 29%, rgba(146, 89, 40, .23) 35% 43%, transparent 49%),
    radial-gradient(ellipse 13px 4px at 87% 46%, rgba(31, 13, 4, .61) 0 29%, rgba(149, 91, 42, .22) 34% 43%, transparent 49%),
    repeating-linear-gradient(5deg, rgba(24, 10, 3, .42) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #80562f 0%, #624020 35%, #3d220f 70%, #211006 100%) !important;
  box-shadow:
    inset 0 2px 1px rgba(239, 193, 119, .17),
    inset 0 -4px 3px rgba(18, 7, 2, .58),
    0 4px 6px rgba(1, 6, 3, .30) !important;
}

html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig {
  position: absolute !important;
  top: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 24% !important;
  height: 54px !important;
  overflow: visible !important;
  opacity: .97 !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.segment-01 {
  left: -1% !important;
  transform: rotate(-1.2deg) scaleY(.92) !important;
}
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.segment-02 {
  left: 19% !important;
  transform: scaleX(-1) rotate(.8deg) scaleY(.88) !important;
}
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.segment-03 {
  left: 39% !important;
  transform: rotate(-.4deg) scaleY(.94) !important;
}
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.segment-04 {
  left: 59% !important;
  transform: scaleX(-1) rotate(1deg) scaleY(.89) !important;
}
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.segment-05 {
  left: 79% !important;
  transform: rotate(-.7deg) scaleY(.93) !important;
}

html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig .twig-shape { display: none !important; }
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.twig-variant-a .twig-shape-a,
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.twig-variant-b .twig-shape-b,
html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig.twig-variant-c .twig-shape-c { display: inline !important; }
html body .reward-showcase .reward-showcase-root-rail .twig-shadow,
html body .reward-showcase .reward-showcase-root-rail .twig-offshoot-shadow {
  fill: none !important;
  stroke: #170904 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .84 !important;
}
html body .reward-showcase .reward-showcase-root-rail .twig-shadow { stroke-width: 7.2 !important; }
html body .reward-showcase .reward-showcase-root-rail .twig-main {
  fill: none !important;
  stroke: #5b3519 !important;
  stroke-width: 4.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .reward-showcase .reward-showcase-root-rail .twig-highlight {
  fill: none !important;
  stroke: rgba(216, 158, 89, .43) !important;
  stroke-width: 1.05 !important;
  stroke-linecap: round !important;
}
html body .reward-showcase .reward-showcase-root-rail .twig-offshoot-shadow { stroke-width: 3.9 !important; }
html body .reward-showcase .reward-showcase-root-rail .twig-offshoot {
  fill: none !important;
  stroke: #4d2b14 !important;
  stroke-width: 2.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .reward-showcase .reward-showcase-root-rail .twig-leaves ellipse {
  fill: #496333 !important;
  stroke: #213b1c !important;
  stroke-width: 1 !important;
}
html body .reward-showcase .reward-showcase-root-rail .twig-leaves ellipse:nth-child(even) { fill: #6c824b !important; }

html body .reward-showcase .reward-root-flower {
  position: absolute !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 17px !important;
  height: 17px !important;
  color: #f7f1df !important;
  font: 13px/1 Georgia, serif !important;
  text-shadow: 0 1px 1px rgba(48, 24, 10, .82) !important;
  filter: drop-shadow(0 2px 2px rgba(1, 7, 3, .38)) !important;
}
html body .reward-showcase .reward-root-flower::after {
  content: "" !important;
  position: absolute !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #d9b95e !important;
}
html body .reward-showcase .reward-root-flower.flower-01 {
  left: 8%;
  top: 6px;
  transform: rotate(-12deg) scale(.78);
}
html body .reward-showcase .reward-root-flower.flower-02 {
  left: 35%;
  top: 33px;
  transform: rotate(8deg) scale(.63);
}
html body .reward-showcase .reward-root-flower.flower-03 {
  right: 31%;
  top: 5px;
  transform: rotate(13deg) scale(.72);
}
html body .reward-showcase .reward-root-flower.flower-04 {
  right: 7%;
  top: 34px;
  transform: rotate(-9deg) scale(.66);
}

html body .reward-showcase .reward-showcase-track {
  position: relative !important;
  z-index: 6 !important;
  align-items: flex-start !important;
}

html body .reward-showcase .reward-showcase-group {
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 0 9px 8px 0 !important;
}

html body .reward-showcase .reward-showcase-card {
  position: relative !important;
  isolation: isolate !important;
  flex: 0 0 166px !important;
  width: 166px !important;
  min-width: 166px !important;
  max-width: 166px !important;
  height: 292px !important;
  min-height: 292px !important;
  max-height: 292px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  contain: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transform: none !important;
  transition: filter .2s ease !important;
}

html body .reward-showcase .reward-showcase-card::before,
html body .reward-showcase .reward-showcase-card::after {
  content: none !important;
  display: none !important;
}

html body .reward-showcase .reward-showcase-card:hover,
html body .reward-showcase .reward-showcase-card:focus-visible {
  z-index: 12 !important;
  transform: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(1.055) !important;
}

html body .reward-showcase .reward-hanger-swing {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: visible !important;
  transform-origin: 50% 28px !important;
  animation: rewardHangerNaturalSway var(--reward-hanger-duration, 7s) ease-in-out var(--reward-hanger-delay, 0s) infinite !important;
  will-change: transform !important;
}

html body .reward-showcase .reward-hanger-ring {
  position: absolute !important;
  left: 50% !important;
  top: 13px !important;
  z-index: 12 !important;
  width: 34px !important;
  height: 25px !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  border: 5px solid rgba(126, 86, 46, .98) !important;
  border-top-color: #c09962 !important;
  border-right-color: #9d6d3d !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 238, 203, .28),
    0 2px 4px rgba(18, 8, 3, .48) !important;
}
html body .reward-showcase .reward-hanger-ring::before,
html body .reward-showcase .reward-hanger-ring::after {
  content: "" !important;
  position: absolute !important;
  bottom: -11px !important;
  width: 7px !important;
  height: 13px !important;
  border-radius: 45% !important;
  background: repeating-linear-gradient(135deg, #bb925e 0 2px, #70471f 2px 4px) !important;
  box-shadow: 0 2px 3px rgba(20, 9, 3, .32) !important;
}
html body .reward-showcase .reward-hanger-ring::before {
  left: 1px !important;
  transform: rotate(12deg) !important;
}
html body .reward-showcase .reward-hanger-ring::after {
  right: 1px !important;
  transform: rotate(-12deg) !important;
}
html body .reward-showcase .reward-hanger-ring > i {
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  width: 11px !important;
  height: 8px !important;
  transform: translateX(-50%) !important;
  border-radius: 48% !important;
  background: repeating-linear-gradient(140deg, #c09962 0 2px, #754a22 2px 4px) !important;
  box-shadow: 0 2px 3px rgba(18, 8, 3, .36) !important;
}

html body .reward-showcase .reward-hanger-rope {
  position: absolute !important;
  top: 31px !important;
  z-index: 2 !important;
  width: 4px !important;
  height: 230px !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(145deg, rgba(230, 203, 158, .95) 0 2px, rgba(113, 75, 39, .98) 2px 4px) !important;
  box-shadow:
    inset 1px 0 rgba(255, 244, 219, .26),
    1px 2px 3px rgba(20, 9, 3, .34) !important;
  transform-origin: 50% 0 !important;
}
html body .reward-showcase .reward-hanger-rope.is-left {
  left: 29px !important;
  transform: rotate(.5deg) !important;
}
html body .reward-showcase .reward-hanger-rope.is-right {
  right: 29px !important;
  transform: rotate(-.5deg) !important;
}
html body .reward-showcase .reward-hanger-rope > i,
html body .reward-showcase .reward-hanger-rope > b,
html body .reward-showcase .reward-hanger-rope > em {
  position: absolute !important;
  left: 50% !important;
  width: 10px !important;
  height: 8px !important;
  transform: translateX(-50%) !important;
  border-radius: 48% !important;
  background: repeating-linear-gradient(140deg, #c09861 0 2px, #6d431e 2px 4px) !important;
  box-shadow: 0 2px 3px rgba(18, 8, 3, .34) !important;
}
html body .reward-showcase .reward-hanger-rope > i { top: 30px !important; }
html body .reward-showcase .reward-hanger-rope > b { top: 102px !important; }
html body .reward-showcase .reward-hanger-rope > em { top: 207px !important; }

html body .reward-showcase .reward-hanger-plank {
  position: absolute !important;
  left: 50% !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 8px 7px rgba(12, 6, 2, .32)) !important;
}

html body .reward-showcase .reward-hanger-rarity {
  top: 54px !important;
  width: 130px !important;
  height: 43px !important;
}
html body .reward-showcase .reward-hanger-image {
  top: 108px !important;
  width: 158px !important;
  height: 111px !important;
}
html body .reward-showcase .reward-hanger-name {
  top: 230px !important;
  width: 144px !important;
  height: 52px !important;
}

html body .reward-showcase .reward-hanger-plank::before,
html body .reward-showcase .reward-hanger-plank::after {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  z-index: 7 !important;
  width: 10px !important;
  height: 11px !important;
  border-radius: 46% !important;
  background: repeating-linear-gradient(140deg, #bb925c 0 2px, #70451f 2px 4px) !important;
  box-shadow: 0 2px 3px rgba(20, 9, 3, .34) !important;
}
html body .reward-showcase .reward-hanger-plank::before {
  left: 11px !important;
  transform: rotate(-5deg) !important;
}
html body .reward-showcase .reward-hanger-plank::after {
  right: 11px !important;
  transform: rotate(5deg) !important;
}

html body .reward-showcase .reward-plank-surface {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(49, 24, 9, .94) !important;
  background:
    radial-gradient(ellipse 14px 5px at 18% 35%, rgba(34, 15, 5, .60) 0 29%, rgba(143, 91, 42, .24) 34% 43%, transparent 48%),
    radial-gradient(ellipse 12px 4px at 78% 68%, rgba(31, 14, 5, .56) 0 28%, rgba(142, 90, 42, .22) 34% 43%, transparent 48%),
    repeating-linear-gradient(4deg, rgba(28, 12, 4, .36) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(255, 232, 191, .16), transparent 25%),
    linear-gradient(180deg, var(--plank-light), var(--plank-mid) 45%, var(--plank-dark) 100%) !important;
  box-shadow:
    inset 0 3px 1px rgba(238, 190, 116, .18),
    inset 0 -7px 7px rgba(23, 9, 3, .42),
    inset 4px 0 5px rgba(255, 219, 159, .07),
    inset -4px 0 5px rgba(17, 7, 2, .22) !important;
}
html body .reward-showcase .reward-plank-surface::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px 7px !important;
  opacity: .55 !important;
  background:
    linear-gradient(103deg, transparent 0 28%, rgba(36, 15, 5, .28) 28.3% 29%, transparent 29.3% 100%),
    linear-gradient(82deg, transparent 0 68%, rgba(255, 225, 174, .10) 68.2% 69%, transparent 69.2% 100%),
    repeating-linear-gradient(176deg, transparent 0 7px, rgba(41, 18, 6, .20) 8px, transparent 9px 16px) !important;
}
html body .reward-showcase .reward-plank-surface::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-top: 1px solid rgba(255, 232, 190, .17) !important;
  border-bottom: 1px solid rgba(20, 8, 2, .44) !important;
  pointer-events: none !important;
}

html body .reward-showcase .plank-shape-1 .reward-plank-surface {
  clip-path: polygon(2% 17%, 8% 4%, 32% 1%, 53% 5%, 77% 1%, 96% 9%, 100% 45%, 96% 91%, 73% 98%, 48% 94%, 24% 99%, 3% 87%, 0 48%) !important;
  border-radius: 14px 12px 16px 11px !important;
}
html body .reward-showcase .plank-shape-2 .reward-plank-surface {
  clip-path: polygon(0 22%, 9% 3%, 31% 6%, 58% 1%, 87% 5%, 100% 22%, 97% 76%, 90% 96%, 60% 92%, 33% 99%, 8% 94%, 2% 73%) !important;
  border-radius: 10px 17px 12px 16px !important;
}
html body .reward-showcase .plank-shape-3 .reward-plank-surface {
  clip-path: polygon(4% 8%, 28% 2%, 51% 7%, 75% 0, 96% 12%, 100% 55%, 93% 93%, 70% 97%, 47% 91%, 21% 100%, 1% 81%, 0 31%) !important;
  border-radius: 17px 10px 15px 13px !important;
}
html body .reward-showcase .plank-shape-4 .reward-plank-surface {
  clip-path: polygon(1% 16%, 16% 1%, 43% 5%, 68% 1%, 94% 7%, 100% 34%, 98% 83%, 82% 98%, 55% 94%, 29% 99%, 5% 90%, 0 62%) !important;
  border-radius: 11px 15px 17px 12px !important;
}
html body .reward-showcase .plank-shape-5 .reward-plank-surface {
  clip-path: polygon(5% 4%, 27% 8%, 48% 1%, 72% 6%, 95% 2%, 100% 29%, 96% 87%, 74% 95%, 50% 90%, 25% 98%, 2% 88%, 0 31%) !important;
  border-radius: 16px 13px 10px 18px !important;
}

html body .reward-showcase .plank-tone-1 {
  --plank-light:#8a5d34;
  --plank-mid:#603a1c;
  --plank-dark:#321707;
}
html body .reward-showcase .plank-tone-2 {
  --plank-light:#76502f;
  --plank-mid:#52331d;
  --plank-dark:#2c160a;
}
html body .reward-showcase .plank-tone-3 {
  --plank-light:#91663b;
  --plank-mid:#684423;
  --plank-dark:#371b0a;
}
html body .reward-showcase .plank-tone-4 {
  --plank-light:#7c5a39;
  --plank-mid:#584025;
  --plank-dark:#30200f;
}
html body .reward-showcase .plank-tone-5 {
  --plank-light:#835532;
  --plank-mid:#5a3519;
  --plank-dark:#2f1607;
}
html body .reward-showcase .plank-tone-6 {
  --plank-light:#8c6844;
  --plank-mid:#60482e;
  --plank-dark:#352313;
}
html body .reward-showcase .plank-tone-7 {
  --plank-light:#725033;
  --plank-mid:#4d321e;
  --plank-dark:#29170c;
}
html body .reward-showcase .plank-tone-8 {
  --plank-light:#95633a;
  --plank-mid:#68401f;
  --plank-dark:#351807;
}

html body .reward-showcase .reward-plank-hardware {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
html body .reward-showcase .reward-plank-hardware::before,
html body .reward-showcase .reward-plank-hardware::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
}

html body .reward-showcase .plank-detail-1 .reward-plank-hardware::before {
  inset: 9px 11px !important;
  background:
    radial-gradient(circle at 3px 3px, #6d6b68 0 2px, #c2b79e 2.2px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 3px) 3px, #6d6b68 0 2px, #c2b79e 2.2px 3px, transparent 3.2px) !important;
}
html body .reward-showcase .plank-detail-2 .reward-plank-hardware::before {
  left: 18% !important; top: 37% !important; width: 8px !important; height: 6px !important;
  border-radius: 50% !important; background: rgba(20, 9, 3, .72) !important;
  box-shadow: inset 1px 1px rgba(130, 82, 39, .32), 72px 18px 0 -2px rgba(24, 10, 3, .55) !important;
}
html body .reward-showcase .plank-detail-3 .reward-plank-hardware::before {
  left: 24% !important; top: 28% !important; width: 50% !important; height: 2px !important;
  transform: rotate(-4deg) !important; border-radius: 999px !important;
  background: rgba(9, 7, 5, .74) !important;
  box-shadow: 0 1px rgba(213, 157, 91, .11), 17px 15px 0 -0.4px rgba(12, 8, 5, .56) !important;
}
html body .reward-showcase .plank-detail-4 .reward-plank-hardware::before {
  inset: 8px 10px !important;
  background:
    radial-gradient(circle at 3px 3px, #6b6864 0 2px, #c0b49a 2.2px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #6b6864 0 2px, #c0b49a 2.2px 3px, transparent 3.2px),
    linear-gradient(101deg, transparent 0 62%, rgba(10, 7, 4, .70) 62.2% 63%, transparent 63.3% 100%) !important;
}
html body .reward-showcase .plank-detail-5 .reward-plank-hardware::before {
  right: 19% !important; top: 18% !important; width: 6px !important; height: 6px !important;
  border-radius: 50% !important; background: rgba(19, 8, 3, .68) !important;
  box-shadow: inset 1px 1px rgba(144, 92, 46, .27), -54px 21px 0 -1px rgba(23, 10, 3, .52) !important;
}
html body .reward-showcase .plank-detail-5 .reward-plank-hardware::after {
  left: 34% !important; bottom: 24% !important; width: 35% !important; height: 2px !important;
  transform: rotate(2deg) !important; border-radius: 999px !important;
  background: rgba(10, 7, 4, .66) !important;
}

html body .reward-showcase .reward-hanger-rarity-image {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 104px !important;
  height: 35px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 2px rgba(13, 6, 2, .50)) !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .reward-showcase .reward-hanger-rarity-text {
  position: relative !important;
  z-index: 4 !important;
  color: #ddd7ce !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-shadow: 0 2px 2px rgba(18, 8, 3, .68) !important;
}

html body .reward-showcase .reward-hanger-reward-image {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 7px rgba(12, 6, 2, .52)) !important;
  transition: transform .22s ease, filter .22s ease !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .reward-showcase .reward-showcase-card:hover .reward-hanger-reward-image,
html body .reward-showcase .reward-showcase-card:focus-visible .reward-hanger-reward-image {
  transform: scale(1.055) !important;
  filter: drop-shadow(0 9px 9px rgba(12, 6, 2, .58)) !important;
}

html body .reward-showcase .reward-hanger-stars {
  position: absolute !important;
  inset: 4px !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
html body .reward-showcase .reward-hanger-stars i {
  position: absolute !important;
  color: #ffe7a3 !important;
  font-style: normal !important;
  text-shadow: 0 0 7px rgba(255, 211, 101, .55) !important;
  animation: rewardHangerStarPulse 2.8s ease-in-out infinite !important;
}
html body .reward-showcase .reward-hanger-stars i:nth-child(1) {
  left: 11px;
  top: 12px;
}
html body .reward-showcase .reward-hanger-stars i:nth-child(2) {
  right: 12px;
  top: 19px;
  animation-delay: -.8s !important;
}
html body .reward-showcase .reward-hanger-stars i:nth-child(3) {
  right: 21px;
  bottom: 12px;
  animation-delay: -1.6s !important;
}
html body .reward-showcase .reward-hanger-stars.is-epic i {
  color: #ead6ff !important;
  text-shadow: 0 0 7px rgba(174, 112, 255, .54) !important;
}

html body .reward-showcase .reward-hanger-name > strong {
  position: relative !important;
  z-index: 4 !important;
  display: -webkit-box !important;
  width: calc(100% - 22px) !important;
  max-height: 36px !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  color: #f5eadb !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px rgba(18, 8, 3, .75) !important;
}
html body .reward-showcase .reward-hanger-name > strong.rarity-common { color: #eee9e2 !important; }
html body .reward-showcase .reward-hanger-name > strong.rarity-uncommon { color: #cdecc8 !important; }
html body .reward-showcase .reward-hanger-name > strong.rarity-rare { color: #cfe4ff !important; }
html body .reward-showcase .reward-hanger-name > strong.rarity-epic { color: #e7d2ff !important; }
html body .reward-showcase .reward-hanger-name > strong.rarity-legendary { color: #ffe7a7 !important; }

html body .reward-showcase .reward-showcase-card.rarity-border-common .reward-hanger-image {
  filter: drop-shadow(0 8px 7px rgba(12,6,2,.32)) drop-shadow(0 0 8px rgba(210,210,210,.10)) !important;
}
html body .reward-showcase .reward-showcase-card.rarity-border-uncommon .reward-hanger-image {
  filter: drop-shadow(0 8px 7px rgba(12,6,2,.32)) drop-shadow(0 0 10px rgba(108,192,110,.14)) !important;
}
html body .reward-showcase .reward-showcase-card.rarity-border-rare .reward-hanger-image {
  filter: drop-shadow(0 8px 7px rgba(12,6,2,.32)) drop-shadow(0 0 11px rgba(91,157,239,.16)) !important;
}
html body .reward-showcase .reward-showcase-card.rarity-border-epic .reward-hanger-image {
  filter: drop-shadow(0 8px 7px rgba(12,6,2,.32)) drop-shadow(0 0 12px rgba(167,101,244,.17)) !important;
}
html body .reward-showcase .reward-showcase-card.rarity-border-legendary .reward-hanger-image {
  filter: drop-shadow(0 8px 7px rgba(12,6,2,.32)) drop-shadow(0 0 14px rgba(249,202,91,.20)) !important;
}

@keyframes rewardHangerNaturalSway {
  0% { transform: rotate(calc(var(--reward-hanger-rest, 0deg) - 1.1deg)) translateY(0); }
  22% { transform: rotate(calc(var(--reward-hanger-rest, 0deg) + .15deg)) translateY(1px); }
  49% { transform: rotate(calc(var(--reward-hanger-rest, 0deg) + 1.2deg)) translateY(2px); }
  76% { transform: rotate(calc(var(--reward-hanger-rest, 0deg) - .25deg)) translateY(1px); }
  100% { transform: rotate(calc(var(--reward-hanger-rest, 0deg) - 1.1deg)) translateY(0); }
}

@keyframes rewardHangerStarPulse {
  0%, 100% {
    opacity: .34;
    transform: scale(.78) rotate(0deg);
  }
  50% {
    opacity: .95;
    transform: scale(1.08) rotate(13deg);
  }
}

@media (max-width: 900px) {
  html body .reward-showcase .reward-showcase-viewport { min-height: 289px !important; }
  html body .reward-showcase .reward-showcase-card {
    flex-basis: 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    height: 278px !important;
    min-height: 278px !important;
    max-height: 278px !important;
  }
  html body .reward-showcase .reward-hanger-swing { transform-origin: 50% 27px !important; }
  html body .reward-showcase .reward-hanger-rarity { width: 122px !important; }
  html body .reward-showcase .reward-hanger-image {
    width: 148px !important;
    height: 104px !important;
  }
  html body .reward-showcase .reward-hanger-name {
    top: 223px !important;
    width: 138px !important;
    height: 48px !important;
  }
  html body .reward-showcase .reward-hanger-reward-image {
    width: 80px !important;
    height: 80px !important;
  }
  html body .reward-showcase .reward-hanger-rope.is-left { left: 26px !important; }
  html body .reward-showcase .reward-hanger-rope.is-right { right: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase .reward-hanger-swing,
  html body .reward-showcase .reward-hanger-stars i {
    animation: none !important;
  }
}

html body .reward-showcase .reward-showcase-viewport {
  min-height: 232px !important;
  padding-bottom: 4px !important;
}

html body .reward-showcase .reward-showcase-viewport::before,
html body .reward-showcase .reward-showcase-viewport::after {
  top: 31px !important;
  bottom: 2px !important;
  width: min(38px, 4vw) !important;
}

html body .reward-showcase .reward-showcase-root-rail {
  left: 18px !important;
  right: 18px !important;
  top: 0 !important;
  height: 44px !important;
  filter: drop-shadow(0 4px 4px rgba(1, 7, 3, .30)) !important;
}

html body .reward-showcase .reward-showcase-root-rail::before {
  top: 17px !important;
  height: 10px !important;
  box-shadow:
    inset 0 1px 1px rgba(239, 193, 119, .15),
    inset 0 -3px 3px rgba(18, 7, 2, .54),
    0 3px 5px rgba(1, 6, 3, .26) !important;
}

html body .reward-showcase .reward-showcase-root-rail .inventory-frame-twig {
  top: -2px !important;
  height: 42px !important;
}

html body .reward-showcase .reward-root-flower {
  width: 13px !important;
  height: 13px !important;
  font-size: 10px !important;
}
html body .reward-showcase .reward-root-flower.flower-01 { top: 3px !important; }
html body .reward-showcase .reward-root-flower.flower-02 { top: 24px !important; }
html body .reward-showcase .reward-root-flower.flower-03 { top: 3px !important; }
html body .reward-showcase .reward-root-flower.flower-04 { top: 25px !important; }

html body .reward-showcase .reward-showcase-group {
  gap: 12px !important;
  padding: 0 6px 4px 0 !important;
}

html body .reward-showcase .reward-showcase-card {
  flex: 0 0 124px !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

html body .reward-showcase .reward-hanger-swing {
  transform-origin: 50% 21px !important;
}

html body .reward-showcase .reward-hanger-ring {
  top: 9px !important;
  width: 25px !important;
  height: 18px !important;
  border-width: 4px !important;
}
html body .reward-showcase .reward-hanger-ring::before,
html body .reward-showcase .reward-hanger-ring::after {
  bottom: -8px !important;
  width: 5px !important;
  height: 9px !important;
}
html body .reward-showcase .reward-hanger-ring > i {
  bottom: -8px !important;
  width: 8px !important;
  height: 6px !important;
}

html body .reward-showcase .reward-hanger-rope {
  top: 23px !important;
  width: 3px !important;
  height: 174px !important;
  background: repeating-linear-gradient(145deg, rgba(230, 203, 158, .95) 0 1.5px, rgba(113, 75, 39, .98) 1.5px 3px) !important;
}
html body .reward-showcase .reward-hanger-rope.is-left { left: 22px !important; }
html body .reward-showcase .reward-hanger-rope.is-right { right: 22px !important; }
html body .reward-showcase .reward-hanger-rope > i,
html body .reward-showcase .reward-hanger-rope > b,
html body .reward-showcase .reward-hanger-rope > em {
  width: 8px !important;
  height: 6px !important;
}
html body .reward-showcase .reward-hanger-rope > i { top: 23px !important; }
html body .reward-showcase .reward-hanger-rope > b { top: 76px !important; }
html body .reward-showcase .reward-hanger-rope > em { top: 157px !important; }

html body .reward-showcase .reward-hanger-rarity {
  top: 40px !important;
  width: 98px !important;
  height: 32px !important;
}
html body .reward-showcase .reward-hanger-image {
  top: 80px !important;
  width: 118px !important;
  height: 83px !important;
}
html body .reward-showcase .reward-hanger-name {
  top: 171px !important;
  width: 108px !important;
  height: 39px !important;
}

html body .reward-showcase .reward-hanger-plank::before,
html body .reward-showcase .reward-hanger-plank::after {
  top: -4px !important;
  width: 8px !important;
  height: 8px !important;
}
html body .reward-showcase .reward-hanger-plank::before { left: 8px !important; }
html body .reward-showcase .reward-hanger-plank::after { right: 8px !important; }

html body .reward-showcase .reward-hanger-rarity-image {
  width: 78px !important;
  height: 26px !important;
}
html body .reward-showcase .reward-hanger-rarity-text {
  font-size: 8px !important;
  letter-spacing: .10em !important;
}

html body .reward-showcase .reward-hanger-reward-image {
  width: 64px !important;
  height: 64px !important;
  filter: drop-shadow(0 5px 5px rgba(12, 6, 2, .48)) !important;
}
html body .reward-showcase .reward-showcase-card:hover .reward-hanger-reward-image,
html body .reward-showcase .reward-showcase-card:focus-visible .reward-hanger-reward-image {
  transform: scale(1.045) !important;
  filter: drop-shadow(0 6px 6px rgba(12, 6, 2, .54)) !important;
}

html body .reward-showcase .reward-hanger-stars {
  inset: 3px !important;
}
html body .reward-showcase .reward-hanger-stars i {
  font-size: 8px !important;
}
html body .reward-showcase .reward-hanger-stars i:nth-child(1) {
  left: 8px !important;
  top: 8px !important;
}
html body .reward-showcase .reward-hanger-stars i:nth-child(2) {
  right: 8px !important;
  top: 13px !important;
}
html body .reward-showcase .reward-hanger-stars i:nth-child(3) {
  right: 14px !important;
  bottom: 8px !important;
}

html body .reward-showcase .reward-hanger-name > strong {
  width: calc(100% - 16px) !important;
  max-height: 29px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}

html body .reward-showcase .reward-plank-surface {
  box-shadow:
    inset 0 2px 1px rgba(238, 190, 116, .17),
    inset 0 -5px 5px rgba(23, 9, 3, .40),
    inset 3px 0 4px rgba(255, 219, 159, .06),
    inset -3px 0 4px rgba(17, 7, 2, .20) !important;
}

@media (max-width: 900px) {
  html body .reward-showcase .reward-showcase-viewport {
    min-height: 218px !important;
  }
  html body .reward-showcase .reward-showcase-card {
    flex-basis: 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 208px !important;
    min-height: 208px !important;
    max-height: 208px !important;
  }
  html body .reward-showcase .reward-hanger-rarity { width: 92px !important; }
  html body .reward-showcase .reward-hanger-image {
    width: 110px !important;
    height: 78px !important;
  }
  html body .reward-showcase .reward-hanger-name {
    top: 164px !important;
    width: 102px !important;
    height: 37px !important;
  }
  html body .reward-showcase .reward-hanger-reward-image {
    width: 59px !important;
    height: 59px !important;
  }
  html body .reward-showcase .reward-hanger-rope.is-left { left: 20px !important; }
  html body .reward-showcase .reward-hanger-rope.is-right { right: 20px !important; }
}

html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
  position: relative !important;
  min-height: 272px !important;
  height: 272px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

html body .reward-showcase .reward-showcase-viewport.is-static-showcase::before,
html body .reward-showcase .reward-showcase-viewport.is-static-showcase::after {
  display: none !important;
  content: none !important;
}

html body .reward-showcase .reward-showcase-top-image {
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 64px !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center top !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 5px 5px rgba(7, 4, 2, 0.34)) !important;
}

html body .reward-showcase .reward-showcase-track.is-static-track {
  position: absolute !important;
  z-index: 2 !important;
  inset: 34px 0 0 !important;
  width: 100% !important;
  height: 238px !important;
  min-width: 0 !important;
  padding: 0 5px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-around !important;
  gap: 0 !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
  overflow: visible !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
  position: relative !important;
  flex: 0 0 clamp(88px, 5.35vw, 112px) !important;
  width: clamp(88px, 5.35vw, 112px) !important;
  min-width: clamp(88px, 5.35vw, 112px) !important;
  max-width: clamp(88px, 5.35vw, 112px) !important;
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  perspective: 850px !important;
  transform: none !important;
  translate: none !important;
  filter: none !important;
  animation: none !important;
  transition: filter 180ms ease !important;
  cursor: pointer !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
  filter: brightness(1.055) !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card::before,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card::after {
  display: none !important;
  content: none !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card > * {
  position: absolute !important;
  z-index: auto !important;
}

html body .reward-showcase .reward-static-sway {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-origin: 50% 8px !important;
  animation: rewardStaticSignSway var(--static-sway-duration, 7.2s) ease-in-out var(--static-sway-delay, 0s) infinite !important;
  will-change: transform !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-flip-assembly {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 54% !important;
  transform: rotateY(0deg) !important;
  will-change: transform !important;
}

html body .reward-showcase .reward-showcase-static-card.is-flipping .reward-flip-assembly {
  animation: rewardStaticSignFlip 920ms cubic-bezier(.42, .04, .18, .98) both !important;
}

html body .reward-showcase .reward-flip-face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-flip-face-front {
  transform: rotateY(0deg) !important;
}

html body .reward-showcase .reward-flip-face-back {
  transform: rotateY(180deg) !important;
}

html body .reward-showcase .reward-rope-image {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: -2px !important;
  width: 108px !important;
  height: 222px !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center top !important;
  transform: translateX(-50%) scaleX(var(--rope-scale-x, 1)) !important;
  transform-origin: 50% 0 !important;
  filter:
    hue-rotate(var(--rope-hue, 0deg))
    saturate(var(--rope-saturation, 1))
    brightness(var(--rope-brightness, 1))
    drop-shadow(0 3px 2px rgba(11, 6, 2, 0.28)) !important;
  user-select: none !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-face-board {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  display: block !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-face-board-rarity {
  top: 49px !important;
  width: 94px !important;
  height: 34px !important;
}

html body .reward-showcase .reward-face-board-image {
  top: 87px !important;
  width: 108px !important;
  height: 94px !important;
}

html body .reward-showcase .reward-face-board-name {
  top: 185px !important;
  width: 100px !important;
  height: 38px !important;
}

html body .reward-showcase .reward-board-image {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: scaleX(var(--board-scale-x, 1)) !important;
  transform-origin: 50% 50% !important;
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(var(--board-saturation, 1))
    brightness(var(--board-brightness, 1))
    drop-shadow(0 4px 3px rgba(13, 7, 3, 0.32)) !important;
  user-select: none !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-board-content {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  transform: translateZ(1px) !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-rarity-art {
  position: relative !important;
  z-index: 4 !important;
  width: 78px !important;
  height: 27px !important;
  max-width: 84% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 2px rgba(8, 4, 2, 0.42)) !important;
}

html body .reward-showcase .reward-rarity-fallback {
  position: relative !important;
  z-index: 4 !important;
  max-width: 84% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  font-family: "BuyMore", Georgia, serif !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  color: #f8ead1 !important;
  text-shadow: 0 1px 2px rgba(12, 5, 2, .76) !important;
}

html body .reward-showcase .reward-main-art {
  position: relative !important;
  z-index: 4 !important;
  width: 66px !important;
  height: 66px !important;
  max-width: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 5px rgba(10, 5, 2, 0.46)) !important;
  transition: transform 180ms ease, filter 180ms ease !important;
}

html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
  transform: scale(1.045) !important;
  filter: drop-shadow(0 6px 6px rgba(10, 5, 2, 0.54)) !important;
}

html body .reward-showcase .reward-board-content-name > strong {
  position: relative !important;
  z-index: 4 !important;
  display: -webkit-box !important;
  width: 82px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-align: center !important;
  text-wrap: balance !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  color: #f5ead8 !important;
  text-shadow: 0 1px 2px rgba(11, 5, 2, .82) !important;
}

html body .reward-showcase .reward-board-content-name > strong.rarity-common { color: #f0ece6 !important; }
html body .reward-showcase .reward-board-content-name > strong.rarity-uncommon { color: #c8f5c5 !important; }
html body .reward-showcase .reward-board-content-name > strong.rarity-rare { color: #c8e4ff !important; }
html body .reward-showcase .reward-board-content-name > strong.rarity-epic { color: #e7d0ff !important; }
html body .reward-showcase .reward-board-content-name > strong.rarity-legendary { color: #ffe6a1 !important; }

html body .reward-showcase .reward-showcase-divider {
  display: none !important;
}

@keyframes rewardStaticSignSway {
  0%, 100% {
    transform: rotate(calc(var(--static-sway-tilt, 0deg) - .72deg)) translateY(0);
  }
  24% {
    transform: rotate(calc(var(--static-sway-tilt, 0deg) + .08deg)) translateY(.6px);
  }
  51% {
    transform: rotate(calc(var(--static-sway-tilt, 0deg) + .78deg)) translateY(1.4px);
  }
  77% {
    transform: rotate(calc(var(--static-sway-tilt, 0deg) - .12deg)) translateY(.5px);
  }
}

@keyframes rewardStaticSignFlip {
  0% { transform: rotateY(0deg) scale(1); }
  42% { transform: rotateY(84deg) scale(.975); }
  50% { transform: rotateY(90deg) scale(.97); }
  58% { transform: rotateY(96deg) scale(.975); }
  100% { transform: rotateY(180deg) scale(1); }
}

@media (max-width: 1680px) {
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(n + 16) {
    display: none !important;
  }
}

@media (max-width: 1480px) {
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(n + 14) {
    display: none !important;
  }
}

@media (max-width: 1260px) {
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(n + 12) {
    display: none !important;
  }
}

@media (max-width: 1040px) {
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(n + 10) {
    display: none !important;
  }
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
    min-height: 250px !important;
    height: 250px !important;
  }
  html body .reward-showcase .reward-showcase-top-image {
    height: 56px !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track {
    inset: 28px 0 0 !important;
    height: 222px !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(n + 8) {
    display: none !important;
  }
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
    flex-basis: 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 218px !important;
    min-height: 218px !important;
    max-height: 218px !important;
  }
  html body .reward-showcase .reward-rope-image {
    width: 96px !important;
    height: 207px !important;
  }
  html body .reward-showcase .reward-face-board-rarity {
    top: 47px !important;
    width: 84px !important;
    height: 31px !important;
  }
  html body .reward-showcase .reward-face-board-image {
    top: 82px !important;
    width: 96px !important;
    height: 86px !important;
  }
  html body .reward-showcase .reward-face-board-name {
    top: 172px !important;
    width: 90px !important;
    height: 35px !important;
  }
  html body .reward-showcase .reward-rarity-art {
    width: 70px !important;
    height: 24px !important;
  }
  html body .reward-showcase .reward-main-art {
    width: 59px !important;
    height: 59px !important;
  }
  html body .reward-showcase .reward-board-content-name > strong {
    width: 74px !important;
    font-size: 7.8px !important;
  }
}

@media (max-width: 620px) {
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(n + 6) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase .reward-static-sway {
    animation: none !important;
  }
  html body .reward-showcase .reward-showcase-static-card.is-flipping .reward-flip-assembly {
    animation-duration: 1ms !important;
  }
}

html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
  min-height: 214px !important;
  height: 214px !important;
}

html body .reward-showcase .reward-showcase-top-image {
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 58px !important;
  object-fit: fill !important;
}

html body .reward-showcase .reward-showcase-track.is-static-track {
  z-index: 2 !important;
  inset: 29px 0 0 !important;
  height: 182px !important;
  padding: 0 6px !important;
  justify-content: space-around !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
  flex: 0 0 clamp(76px, 4.55vw, 92px) !important;
  width: clamp(76px, 4.55vw, 92px) !important;
  min-width: clamp(76px, 4.55vw, 92px) !important;
  max-width: clamp(76px, 4.55vw, 92px) !important;
  height: 176px !important;
  min-height: 176px !important;
  max-height: 176px !important;
  perspective: 760px !important;
}

html body .reward-showcase .reward-static-sway,
html body .reward-showcase .reward-flip-assembly,
html body .reward-showcase .reward-flip-motion {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-flip-assembly {
  transform: none !important;
  transform-style: preserve-3d !important;
}

html body .reward-showcase .reward-flip-motion {
  transform-origin: 50% 48% !important;
  transform-style: preserve-3d !important;
  transform: scaleX(var(--assembly-scale-x, 1)) rotateY(0deg);
  will-change: transform;
}

html body .reward-showcase .reward-showcase-static-card.is-flipping .reward-flip-motion {
  animation: rewardStaticSignFlipV271 860ms cubic-bezier(.42, .04, .18, .98) both !important;
}

html body .reward-showcase .reward-rope-image {
  z-index: 2 !important;
  left: 50% !important;
  top: -1px !important;
  width: 49px !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) scaleX(var(--rope-scale-x, 1)) !important;
  transform-origin: 50% 0 !important;
  filter:
    hue-rotate(var(--rope-hue, 0deg))
    saturate(.98)
    brightness(.98)
    drop-shadow(0 2px 2px rgba(11, 6, 2, .30)) !important;
}

html body .reward-showcase .reward-board-stack {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 28px !important;
  width: 82px !important;
  height: 100px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-board-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(var(--board-saturation, 1))
    brightness(var(--board-brightness, 1))
    drop-shadow(0 3px 2px rgba(13, 7, 3, .30)) !important;
  user-select: none !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-board-layer-name { z-index: 3 !important; }
html body .reward-showcase .reward-board-layer-image { z-index: 4 !important; }
html body .reward-showcase .reward-board-layer-rarity { z-index: 5 !important; }

html body .reward-showcase .reward-board-content {
  position: absolute !important;
  z-index: 6 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  transform: none !important;
  backface-visibility: visible !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-board-content-rarity {
  top: 1px !important;
  height: 29px !important;
}

html body .reward-showcase .reward-board-content-image {
  top: 31px !important;
  height: 44px !important;
}

html body .reward-showcase .reward-board-content-name {
  top: 73px !important;
  height: 28px !important;
}

html body .reward-showcase .reward-rarity-art {
  position: relative !important;
  z-index: 7 !important;
  width: auto !important;
  height: auto !important;
  max-width: 67px !important;
  max-height: 19px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 1px 1px rgba(8, 4, 2, .45)) !important;
}

html body .reward-showcase .reward-rarity-fallback {
  position: relative !important;
  z-index: 7 !important;
  max-width: 66px !important;
  font-size: 7px !important;
  letter-spacing: .055em !important;
  transform: none !important;
}

html body .reward-showcase .reward-main-art {
  position: relative !important;
  z-index: 7 !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 56px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 4px 4px rgba(10, 5, 2, .44)) !important;
}

html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
  transform: scale(1.035) !important;
}

html body .reward-showcase .reward-board-content-name > strong {
  position: relative !important;
  z-index: 7 !important;
  display: -webkit-box !important;
  width: 68px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-align: center !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1.03 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

@keyframes rewardStaticSignFlipV271 {
  0% {
    transform: scaleX(var(--assembly-scale-x, 1)) rotateY(0deg);
  }
  47% {
    transform: scaleX(var(--assembly-scale-x, 1)) rotateY(84deg);
  }
  50% {
    transform: scaleX(var(--assembly-scale-x, 1)) rotateY(90deg);
  }
  50.01% {
    transform: scaleX(var(--assembly-scale-x, 1)) rotateY(-90deg);
  }
  53% {
    transform: scaleX(var(--assembly-scale-x, 1)) rotateY(-84deg);
  }
  100% {
    transform: scaleX(var(--assembly-scale-x, 1)) rotateY(0deg);
  }
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
    min-height: 196px !important;
    height: 196px !important;
  }
  html body .reward-showcase .reward-showcase-top-image {
    max-height: 51px !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track {
    inset: 25px 0 0 !important;
    height: 168px !important;
  }
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
  }
  html body .reward-showcase .reward-rope-image { width: 44px !important; }
  html body .reward-showcase .reward-board-stack {
    top: 25px !important;
    width: 74px !important;
    height: 90px !important;
  }
  html body .reward-showcase .reward-board-content-rarity {
    top: 1px !important;
    height: 26px !important;
  }
  html body .reward-showcase .reward-board-content-image {
    top: 28px !important;
    height: 40px !important;
  }
  html body .reward-showcase .reward-board-content-name {
    top: 66px !important;
    height: 25px !important;
  }
  html body .reward-showcase .reward-rarity-art {
    max-width: 60px !important;
    max-height: 17px !important;
  }
  html body .reward-showcase .reward-main-art {
    width: 39px !important;
    height: 39px !important;
  }
  html body .reward-showcase .reward-board-content-name > strong {
    width: 61px !important;
    font-size: 6.4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase .reward-showcase-static-card.is-flipping .reward-flip-motion {
    animation-duration: 1ms !important;
  }
}

html body .reward-showcase .reward-showcase-top-image {
  z-index: 12 !important;
  max-height: 61px !important;
}

html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
  min-height: 226px !important;
  height: 226px !important;
}

html body .reward-showcase .reward-showcase-track.is-static-track {
  z-index: 2 !important;
  inset: 35px 0 0 !important;
  height: 191px !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
  flex: 0 0 clamp(80px, 4.8vw, 97px) !important;
  width: clamp(80px, 4.8vw, 97px) !important;
  min-width: clamp(80px, 4.8vw, 97px) !important;
  max-width: clamp(80px, 4.8vw, 97px) !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
}

html body .reward-showcase .reward-rope-image {
  z-index: 1 !important;
  top: -1px !important;
  width: 52px !important;
  height: auto !important;
}

html body .reward-showcase .reward-board-stack {
  top: 31px !important;
  width: 87px !important;
  height: 106px !important;
}

html body .reward-showcase .reward-board-content-rarity {
  top: 2px !important;
  height: 30px !important;
}

html body .reward-showcase .reward-board-content-image {
  top: 29px !important;
  height: 46px !important;
}

html body .reward-showcase .reward-board-content-name {
  top: 77px !important;
  height: 29px !important;
}

html body .reward-showcase .reward-rarity-art {
  max-width: 61px !important;
  max-height: 17px !important;
}

html body .reward-showcase .reward-rarity-fallback {
  max-width: 61px !important;
  font-size: 6.7px !important;
}

html body .reward-showcase .reward-main-art {
  width: 44px !important;
  height: 44px !important;
  max-width: 56px !important;
  max-height: 44px !important;
  transform: translateY(-3px) !important;
}

html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
  transform: translateY(-3px) scale(1.035) !important;
}

html body .reward-showcase .reward-board-content-name > strong {
  width: 72px !important;
  max-height: 24px !important;
  font-size: 7.7px !important;
  line-height: 1.04 !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
    min-height: 205px !important;
    height: 205px !important;
  }
  html body .reward-showcase .reward-showcase-top-image {
    max-height: 54px !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track {
    inset: 30px 0 0 !important;
    height: 175px !important;
  }
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
    flex-basis: 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
  }
  html body .reward-showcase .reward-rope-image {
    width: 47px !important;
  }
  html body .reward-showcase .reward-board-stack {
    top: 27px !important;
    width: 78px !important;
    height: 95px !important;
  }
  html body .reward-showcase .reward-board-content-rarity {
    top: 1px !important;
    height: 27px !important;
  }
  html body .reward-showcase .reward-board-content-image {
    top: 26px !important;
    height: 42px !important;
  }
  html body .reward-showcase .reward-board-content-name {
    top: 69px !important;
    height: 26px !important;
  }
  html body .reward-showcase .reward-rarity-art {
    max-width: 55px !important;
    max-height: 15px !important;
  }
  html body .reward-showcase .reward-rarity-fallback {
    max-width: 55px !important;
    font-size: 6.2px !important;
  }
  html body .reward-showcase .reward-main-art {
    width: 39px !important;
    height: 39px !important;
    transform: translateY(-2px) !important;
  }
  html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
  html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
    transform: translateY(-2px) scale(1.035) !important;
  }
  html body .reward-showcase .reward-board-content-name > strong {
    width: 64px !important;
    font-size: 7px !important;
  }
}

html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
  min-height: 244px !important;
  height: 244px !important;
}

html body .reward-showcase .reward-showcase-top-image {
  max-height: 67px !important;
}

html body .reward-showcase .reward-showcase-track.is-static-track {
  inset: 40px 0 0 !important;
  height: 204px !important;
}

html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
  flex: 0 0 clamp(87px, 5.25vw, 106px) !important;
  width: clamp(87px, 5.25vw, 106px) !important;
  min-width: clamp(87px, 5.25vw, 106px) !important;
  max-width: clamp(87px, 5.25vw, 106px) !important;
  height: 203px !important;
  min-height: 203px !important;
  max-height: 203px !important;
}

html body .reward-showcase .reward-rope-image {
  top: 6px !important;
  width: 57px !important;
}

html body .reward-showcase .reward-board-stack {
  top: 38px !important;
  width: 95px !important;
  height: 116px !important;
}

html body .reward-showcase .reward-board-content-rarity {
  top: 2px !important;
  height: 33px !important;
}

html body .reward-showcase .reward-board-content-image {
  top: 32px !important;
  height: 51px !important;
}

html body .reward-showcase .reward-board-content-name {
  top: 84px !important;
  height: 32px !important;
}

html body .reward-showcase .reward-rarity-art {
  max-width: 65px !important;
  max-height: 18px !important;
}

html body .reward-showcase .reward-rarity-fallback {
  max-width: 65px !important;
  font-size: 7.1px !important;
}

html body .reward-showcase .reward-main-art {
  width: 47px !important;
  height: 47px !important;
  max-width: 60px !important;
  max-height: 47px !important;
  transform: translateY(-3px) !important;
}

html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
  transform: translateY(-3px) scale(1.035) !important;
}

html body .reward-showcase .reward-board-content-name > strong {
  width: 78px !important;
  max-height: 27px !important;
  font-size: 8.3px !important;
  line-height: 1.04 !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-viewport.is-static-showcase {
    min-height: 220px !important;
    height: 220px !important;
  }

  html body .reward-showcase .reward-showcase-top-image {
    max-height: 59px !important;
  }

  html body .reward-showcase .reward-showcase-track.is-static-track {
    inset: 35px 0 0 !important;
    height: 185px !important;
  }

  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:hover,
  html body .reward-showcase .reward-showcase-card.reward-showcase-static-card:focus-visible {
    flex-basis: 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
  }

  html body .reward-showcase .reward-rope-image {
    top: 5px !important;
    width: 51px !important;
  }

  html body .reward-showcase .reward-board-stack {
    top: 33px !important;
    width: 84px !important;
    height: 103px !important;
  }

  html body .reward-showcase .reward-board-content-rarity {
    top: 1px !important;
    height: 29px !important;
  }

  html body .reward-showcase .reward-board-content-image {
    top: 28px !important;
    height: 45px !important;
  }

  html body .reward-showcase .reward-board-content-name {
    top: 75px !important;
    height: 28px !important;
  }

  html body .reward-showcase .reward-rarity-art {
    max-width: 59px !important;
    max-height: 16px !important;
  }

  html body .reward-showcase .reward-rarity-fallback {
    max-width: 59px !important;
    font-size: 6.6px !important;
  }

  html body .reward-showcase .reward-main-art {
    width: 42px !important;
    height: 42px !important;
    max-width: 53px !important;
    max-height: 42px !important;
    transform: translateY(-2px) !important;
  }

  html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
  html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
    transform: translateY(-2px) scale(1.035) !important;
  }

  html body .reward-showcase .reward-board-content-name > strong {
    width: 69px !important;
    max-height: 24px !important;
    font-size: 7.5px !important;
  }
}

html body .reward-showcase .reward-board-layer-name {
  transform: scale(1.055, 1.045) !important;
  transform-origin: 50% 88% !important;
}

html body .reward-showcase .reward-board-content-name > strong {
  width: 82px !important;
  max-height: 29px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
}

html body .reward-showcase .reward-main-art {
  width: 43px !important;
  height: 43px !important;
  max-width: 55px !important;
  max-height: 43px !important;
}

html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
  transform: translateY(-3px) scale(1.035) !important;
}

html body .reward-showcase .reward-rarity-art {
  max-width: 58px !important;
  max-height: 16px !important;
}

html body .reward-showcase .reward-rarity-art[alt="legendary"],
html body .reward-showcase .reward-rarity-art[alt="uncommon"] {
  max-width: 65px !important;
  max-height: 18px !important;
}

html body .reward-showcase .reward-rarity-fallback {
  max-width: 58px !important;
  font-size: 6.7px !important;
}

html body .reward-showcase .reward-rarity-fallback.rarity-legendary,
html body .reward-showcase .reward-rarity-fallback.rarity-uncommon {
  max-width: 65px !important;
  font-size: 7.1px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-board-layer-name {
    transform: scale(1.05, 1.04) !important;
    transform-origin: 50% 88% !important;
  }

  html body .reward-showcase .reward-board-content-name > strong {
    width: 73px !important;
    max-height: 26px !important;
    font-size: 8.1px !important;
  }

  html body .reward-showcase .reward-main-art {
    width: 39px !important;
    height: 39px !important;
    max-width: 50px !important;
    max-height: 39px !important;
  }

  html body .reward-showcase .reward-showcase-static-card:hover .reward-main-art,
  html body .reward-showcase .reward-showcase-static-card:focus-visible .reward-main-art {
    transform: translateY(-2px) scale(1.035) !important;
  }

  html body .reward-showcase .reward-rarity-art {
    max-width: 52px !important;
    max-height: 14px !important;
  }

  html body .reward-showcase .reward-rarity-art[alt="legendary"],
  html body .reward-showcase .reward-rarity-art[alt="uncommon"] {
    max-width: 59px !important;
    max-height: 16px !important;
  }

  html body .reward-showcase .reward-rarity-fallback {
    max-width: 52px !important;
    font-size: 6.2px !important;
  }

  html body .reward-showcase .reward-rarity-fallback.rarity-legendary,
  html body .reward-showcase .reward-rarity-fallback.rarity-uncommon {
    max-width: 59px !important;
    font-size: 6.6px !important;
  }
}

html body .reward-showcase .reward-board-content-name > strong {
  width: 88px !important;
  max-height: 31px !important;
  font-size: 10px !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: 0.005em !important;
  text-shadow:
    0 1px 1px rgba(15, 8, 3, 0.95),
    0 0 3px rgba(15, 8, 3, 0.72) !important;
}

html body .reward-showcase .reward-board-content-rarity {
  top: -1px !important;
}

html body .reward-showcase .reward-rarity-art {
  max-width: 51px !important;
  max-height: 13px !important;
}

html body .reward-showcase .reward-rarity-art[alt="legendary"],
html body .reward-showcase .reward-rarity-art[alt="uncommon"] {
  max-width: 65px !important;
  max-height: 18px !important;
}

html body .reward-showcase .reward-rarity-fallback {
  max-width: 51px !important;
  font-size: 6px !important;
}

html body .reward-showcase .reward-rarity-fallback.rarity-legendary,
html body .reward-showcase .reward-rarity-fallback.rarity-uncommon {
  max-width: 65px !important;
  font-size: 7.1px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-board-content-name > strong {
    width: 78px !important;
    max-height: 28px !important;
    font-size: 8.9px !important;
    line-height: 1.02 !important;
  }

  html body .reward-showcase .reward-board-content-rarity {
    top: -2px !important;
  }

  html body .reward-showcase .reward-rarity-art {
    max-width: 46px !important;
    max-height: 12px !important;
  }

  html body .reward-showcase .reward-rarity-art[alt="legendary"],
  html body .reward-showcase .reward-rarity-art[alt="uncommon"] {
    max-width: 59px !important;
    max-height: 16px !important;
  }

  html body .reward-showcase .reward-rarity-fallback {
    max-width: 46px !important;
    font-size: 5.6px !important;
  }

  html body .reward-showcase .reward-rarity-fallback.rarity-legendary,
  html body .reward-showcase .reward-rarity-fallback.rarity-uncommon {
    max-width: 59px !important;
    font-size: 6.6px !important;
  }
}

html body .reward-showcase .reward-board-content-name > strong {
  position: relative !important;
  top: -4px !important;
}

html body .reward-showcase .reward-showcase-static-card {
  --manual-sign-offset-x: 0px;
  --rarity-board-tint: rgba(224, 218, 205, 0.10);
  --rarity-depth-glow: rgba(212, 205, 192, 0.16);
}

html body .reward-showcase .reward-showcase-static-card:nth-child(3)  { --manual-sign-offset-x: 5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(5)  { --manual-sign-offset-x: 4px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(6)  { --manual-sign-offset-x: 10px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(7)  { --manual-sign-offset-x: 2px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(8)  { --manual-sign-offset-x: -5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(9)  { --manual-sign-offset-x: 7px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(10) { --manual-sign-offset-x: -2px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(11) { --manual-sign-offset-x: 10px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(12) { --manual-sign-offset-x: 3px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(14) { --manual-sign-offset-x: -5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(15) { --manual-sign-offset-x: -5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(16) { --manual-sign-offset-x: -7px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(17) { --manual-sign-offset-x: -7px; }

html body .reward-showcase .reward-showcase-static-card .reward-flip-assembly {
  translate: var(--manual-sign-offset-x) 0 !important;
}

html body .reward-showcase .reward-showcase-static-card.rarity-border-common {
  --rarity-board-tint: rgba(185, 190, 194, 0.16);
  --rarity-depth-glow: rgba(210, 215, 219, 0.18);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-uncommon {
  --rarity-board-tint: rgba(70, 169, 92, 0.18);
  --rarity-depth-glow: rgba(111, 220, 127, 0.20);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-rare {
  --rarity-board-tint: rgba(55, 126, 205, 0.18);
  --rarity-depth-glow: rgba(92, 167, 244, 0.22);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-epic {
  --rarity-board-tint: rgba(130, 72, 190, 0.19);
  --rarity-depth-glow: rgba(178, 111, 239, 0.22);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-legendary {
  --rarity-board-tint: rgba(218, 166, 55, 0.20);
  --rarity-depth-glow: rgba(255, 211, 102, 0.25);
}

html body .reward-showcase .reward-board-stack {
  transform-style: preserve-3d !important;
  filter: drop-shadow(0 4px 3px rgba(15, 8, 3, 0.22));
}

html body .reward-showcase .reward-board-stack::before,
html body .reward-showcase .reward-board-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image:
    url('/images/signname.png?v=271'),
    url('/images/signimage.png?v=271'),
    url('/images/signrarity.png?v=271');
  mask-image:
    url('/images/signname.png?v=271'),
    url('/images/signimage.png?v=271'),
    url('/images/signrarity.png?v=271');
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}

html body .reward-showcase .reward-board-stack::before {
  z-index: 2;
  background: rgba(23, 12, 5, 0.78);
  opacity: 0.48;
  transform: translate3d(2px, 3px, -2px);
  filter: blur(0.45px);
}

html body .reward-showcase .reward-board-stack::after {
  z-index: 5;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, var(--rarity-board-tint), transparent 58%, var(--rarity-board-tint));
  opacity: 0.72;
  mix-blend-mode: soft-light;
  filter: drop-shadow(0 0 3px var(--rarity-depth-glow));
}

html body .reward-showcase .reward-board-layer-name {
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(var(--board-saturation, 1))
    brightness(var(--board-brightness, 1))
    drop-shadow(0 4px 2px rgba(13, 7, 3, 0.36))
    drop-shadow(0 0 3px var(--rarity-depth-glow)) !important;
}
html body .reward-showcase .reward-board-layer-image {
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(var(--board-saturation, 1))
    brightness(var(--board-brightness, 1))
    drop-shadow(0 3px 2px rgba(13, 7, 3, 0.34))
    drop-shadow(0 0 2px var(--rarity-depth-glow)) !important;
}
html body .reward-showcase .reward-board-layer-rarity {
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(var(--board-saturation, 1))
    brightness(var(--board-brightness, 1))
    drop-shadow(0 2px 2px rgba(13, 7, 3, 0.32))
    drop-shadow(0 0 2px var(--rarity-depth-glow)) !important;
}

html body .reward-showcase .reward-showcase-static-card:nth-child(1)  { --manual-sign-offset-x: 5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(2)  { --manual-sign-offset-x: 5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(3)  { --manual-sign-offset-x: 10px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(4)  { --manual-sign-offset-x: 3px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(5)  { --manual-sign-offset-x: 7px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(6)  { --manual-sign-offset-x: 13px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(7)  { --manual-sign-offset-x: 5px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(8)  { --manual-sign-offset-x: -2px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(9)  { --manual-sign-offset-x: 10px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(10) { --manual-sign-offset-x: -2px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(11) { --manual-sign-offset-x: 10px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(12) { --manual-sign-offset-x: 3px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(13) { --manual-sign-offset-x: 0px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(14) { --manual-sign-offset-x: -8px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(15) { --manual-sign-offset-x: -8px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(16) { --manual-sign-offset-x: -11px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(17) { --manual-sign-offset-x: -11px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(18) { --manual-sign-offset-x: -12px; }

html body .reward-showcase .reward-showcase-static-card.rarity-border-common {
  --rarity-board-tint: rgba(190, 199, 207, 0.48);
  --rarity-depth-glow: rgba(220, 229, 236, 0.42);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-uncommon {
  --rarity-board-tint: rgba(61, 180, 87, 0.46);
  --rarity-depth-glow: rgba(105, 235, 126, 0.46);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-rare {
  --rarity-board-tint: rgba(49, 127, 222, 0.48);
  --rarity-depth-glow: rgba(88, 176, 255, 0.48);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-epic {
  --rarity-board-tint: rgba(139, 69, 211, 0.50);
  --rarity-depth-glow: rgba(192, 113, 255, 0.50);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-legendary {
  --rarity-board-tint: rgba(230, 169, 39, 0.52);
  --rarity-depth-glow: rgba(255, 214, 89, 0.54);
}

html body .reward-showcase .reward-board-stack::after {
  z-index: 5 !important;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.20), transparent 32%),
    radial-gradient(circle at 72% 68%, var(--rarity-board-tint) 0%, transparent 56%),
    linear-gradient(128deg, var(--rarity-board-tint) 0%, transparent 42%, var(--rarity-board-tint) 100%) !important;
  opacity: 0.88 !important;
  mix-blend-mode: color !important;
  filter:
    drop-shadow(0 0 4px var(--rarity-depth-glow))
    drop-shadow(0 0 8px var(--rarity-depth-glow)) !important;
}

html body .reward-showcase .reward-board-layer-name,
html body .reward-showcase .reward-board-layer-image,
html body .reward-showcase .reward-board-layer-rarity {
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(calc(var(--board-saturation, 1) * 1.08))
    brightness(calc(var(--board-brightness, 1) * 1.02))
    drop-shadow(0 4px 2px rgba(13, 7, 3, 0.38))
    drop-shadow(0 0 4px var(--rarity-depth-glow)) !important;
}

html body .reward-showcase .reward-showcase-static-card.rarity-border-common {
  --rarity-board-tint: rgba(190, 199, 207, 0.27);
  --rarity-depth-glow: rgba(220, 229, 236, 0.24);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-uncommon {
  --rarity-board-tint: rgba(61, 180, 87, 0.29);
  --rarity-depth-glow: rgba(105, 235, 126, 0.28);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-rare {
  --rarity-board-tint: rgba(49, 127, 222, 0.30);
  --rarity-depth-glow: rgba(88, 176, 255, 0.29);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-epic {
  --rarity-board-tint: rgba(139, 69, 211, 0.31);
  --rarity-depth-glow: rgba(192, 113, 255, 0.31);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-legendary {
  --rarity-board-tint: rgba(230, 169, 39, 0.33);
  --rarity-depth-glow: rgba(255, 214, 89, 0.34);
}

html body .reward-showcase .reward-board-stack::after {
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.12), transparent 32%),
    radial-gradient(circle at 72% 68%, var(--rarity-board-tint) 0%, transparent 58%),
    linear-gradient(128deg, var(--rarity-board-tint) 0%, transparent 46%, var(--rarity-board-tint) 100%) !important;
  opacity: 0.70 !important;
  mix-blend-mode: soft-light !important;
  filter:
    drop-shadow(0 0 2px var(--rarity-depth-glow))
    drop-shadow(0 0 4px var(--rarity-depth-glow)) !important;
}

html body .reward-showcase .reward-board-layer-name,
html body .reward-showcase .reward-board-layer-image,
html body .reward-showcase .reward-board-layer-rarity {
  filter:
    hue-rotate(var(--board-hue, 0deg))
    saturate(calc(var(--board-saturation, 1) * 1.04))
    brightness(calc(var(--board-brightness, 1) * 1.01))
    drop-shadow(0 4px 2px rgba(13, 7, 3, 0.38))
    drop-shadow(0 0 2px var(--rarity-depth-glow)) !important;
}

html body .reward-showcase .reward-showcase-static-card:nth-child(15) { --manual-sign-offset-x: -11px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(16) { --manual-sign-offset-x: -15px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(17) { --manual-sign-offset-x: -16px; }
html body .reward-showcase .reward-showcase-static-card:nth-child(18) { --manual-sign-offset-x: -22px; }

html body .view-page.view-shop > .reward-showcase-hall {
  position: relative !important;
  margin-top: -24px !important;
  margin-bottom: 10px !important;
}

html body .reward-showcase {
  position: relative !important;
}

html body .reward-showcase .reward-showcase-heading {
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  z-index: 15 !important;
  width: min(320px, 78%) !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  background: var(--bryer-css-v60-availablerewards, url('/images/availablerewards.png?v=280')) center / contain no-repeat !important;
  pointer-events: none !important;
}

html body .reward-showcase .reward-showcase-heading > span,
html body .reward-showcase .reward-showcase-heading > div {
  display: none !important;
}

html body .reward-showcase .reward-showcase-static-card.rarity-border-common {
  --rarity-board-tint: rgba(190, 199, 207, 0.31);
  --rarity-depth-glow: rgba(220, 229, 236, 0.27);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-uncommon {
  --rarity-board-tint: rgba(61, 180, 87, 0.33);
  --rarity-depth-glow: rgba(105, 235, 126, 0.31);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-rare {
  --rarity-board-tint: rgba(49, 127, 222, 0.34);
  --rarity-depth-glow: rgba(88, 176, 255, 0.33);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-epic {
  --rarity-board-tint: rgba(139, 69, 211, 0.35);
  --rarity-depth-glow: rgba(192, 113, 255, 0.35);
}
html body .reward-showcase .reward-showcase-static-card.rarity-border-legendary {
  --rarity-board-tint: rgba(230, 169, 39, 0.37);
  --rarity-depth-glow: rgba(255, 214, 89, 0.38);
}

html body .reward-showcase .reward-board-stack::after {
  z-index: 4 !important;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.14), transparent 33%),
    radial-gradient(circle at 72% 68%, var(--rarity-board-tint) 0%, transparent 57%),
    linear-gradient(128deg, var(--rarity-board-tint) 0%, transparent 44%, var(--rarity-board-tint) 100%) !important;
  opacity: 0.76 !important;
  mix-blend-mode: soft-light !important;
  filter:
    drop-shadow(0 0 2px var(--rarity-depth-glow))
    drop-shadow(0 0 5px var(--rarity-depth-glow)) !important;
}

html body .reward-showcase .reward-board-content {
  z-index: 8 !important;
}

html body .reward-showcase .reward-rarity-art,
html body .reward-showcase .reward-rarity-fallback,
html body .reward-showcase .reward-main-art,
html body .reward-showcase .reward-board-content-name > strong {
  position: relative !important;
  z-index: 9 !important;
}

html body .reward-showcase .reward-board-content-name > strong {
  top: -6px !important;
  width: 90px !important;
  max-height: 33px !important;
  font-size: 10.8px !important;
  line-height: 1.02 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop > .reward-showcase-hall {
    margin-top: -14px !important;
    margin-bottom: 8px !important;
  }

  html body .reward-showcase .reward-showcase-heading {
    width: min(260px, 82%) !important;
    height: 34px !important;
    top: 8px !important;
  }

  html body .reward-showcase .reward-board-content-name > strong {
    top: -5px !important;
    width: 80px !important;
    max-height: 29px !important;
    font-size: 9.4px !important;
  }
}

html body .reward-showcase .reward-showcase-heading {
  width: min(350px, 84%) !important;
  height: 48px !important;
}

html body .view-page.view-shop .hero-character-right img {
  transform: translateY(3px) !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  margin: 14px auto 8px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-heading {
    width: min(282px, 87%) !important;
    height: 38px !important;
  }

  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }
}

html body .reward-showcase .reward-showcase-heading {
  top: 8px !important;
  width: min(382px, 88%) !important;
  height: 54px !important;
}

html body .view-page.view-shop .hero-character-right img {
  transform: translateY(8px) !important;
}

html body .view-page.view-shop .hero-character-left img {
  transform: translateY(2px) !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures {
  position: absolute !important;
  z-index: 30 !important;
  left: 50% !important;
  top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -100%) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > img {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
  z-index: 31 !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
  z-index: 32 !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-heading {
    top: 6px !important;
    width: min(306px, 90%) !important;
    height: 43px !important;
  }

  html body .view-page.view-shop .hero-character-right img {
    transform: translateY(8px) !important;
  }

  html body .view-page.view-shop .hero-character-left img {
    transform: translateY(2px) !important;
  }
}

html body .view-page.view-shop .hero-character-right img {
  transform: translateY(12px) !important;
}

html body .view-page.view-shop > .reward-showcase-hall {
  position: relative !important;
  z-index: 60 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures {
  z-index: 100 !important;
  top: 34px !important;
  transform: translate(-50%, -100%) translateZ(0) !important;
  overflow: visible !important;
}

html body .reward-showcase-hall .reward-showcase-top-image {
  z-index: 12 !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
  position: relative !important;
  z-index: 101 !important;
  opacity: 1 !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
  position: relative !important;
  z-index: 102 !important;
  opacity: 1 !important;
}

html body .reward-showcase-hall > .reward-showcase-heading {
  z-index: 110 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop .hero-character-right img {
    transform: translateY(12px) !important;
  }

  html body .reward-showcase-hall > .reward-showcase-top-creatures {
    top: 28px !important;
  }
}

html body .view-page.view-shop > .hero.hero-story {
  position: relative !important;
  z-index: 1 !important;
}

html body .view-page.view-shop > .hero.hero-story .hero-character,
html body .view-page.view-shop > .hero.hero-story .hero-character img {
  z-index: 2 !important;
}

html body .view-page.view-shop > .reward-showcase-hall {
  position: relative !important;
  z-index: 10000 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html body .reward-showcase-hall .reward-showcase-viewport,
html body .reward-showcase-hall .reward-showcase-top-image {
  z-index: 10 !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures {
  top: 69px !important;
  z-index: 20000 !important;
  transform: translate(-50%, -100%) translateZ(1px) !important;
  isolation: isolate !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
  position: relative !important;
  z-index: 20001 !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
  position: relative !important;
  z-index: 20002 !important;
}

html body .reward-showcase-hall > .reward-showcase-heading {
  z-index: 21000 !important;
}

@media (max-width: 820px) {

  html body .reward-showcase-hall > .reward-showcase-top-creatures {
    top: 63px !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures {
  top: 99px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures {
    top: 93px !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures {
  top: 109px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures {
    top: 103px !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
  transform: translate3d(0, -3px, 0) !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
  transform: translate3d(0, 30px, 0) !important;
  animation: rewardShowcaseBirdsFloatV287 7s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes rewardShowcaseBirdsFloatV287 {
  0%, 100% { transform: translate3d(0, 30px, 0); }
  20%      { transform: translate3d(3px, 26px, 0); }
  40%      { transform: translate3d(-2px, 31px, 0); }
  60%      { transform: translate3d(4px, 34px, 0); }
  80%      { transform: translate3d(-3px, 28px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
    animation: none !important;
    transform: translate3d(0, 30px, 0) !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
  top: 70px !important;
  transform: none !important;
  translate: 0 0 !important;
  animation: rewardShowcaseBirdsFloatV288 6.8s ease-in-out infinite both !important;
  animation-play-state: running !important;
  will-change: translate !important;
}

@keyframes rewardShowcaseBirdsFloatV288 {
  0%, 100% { translate: 0 0; }
  16%      { translate: 3px -4px; }
  34%      { translate: -2px -1px; }
  52%      { translate: 4px 3px; }
  70%      { translate: 1px 5px; }
  86%      { translate: -3px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-image {
    top: 70px !important;
    transform: none !important;
    translate: 0 0 !important;
    animation: rewardShowcaseBirdsFloatV288 8s ease-in-out infinite both !important;
    animation-play-state: running !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
  position: relative !important;
  z-index: 20002 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  height: max-content !important;
  top: 120px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  animation: rewardShowcaseBirdsFloatV289 5.6s ease-in-out infinite !important;
  -webkit-animation: rewardShowcaseBirdsFloatV289 5.6s ease-in-out infinite !important;
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
  will-change: transform !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float > .reward-showcase-birds-image {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

@keyframes rewardShowcaseBirdsFloatV289 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14%      { transform: translate3d(5px, -6px, 0); }
  29%      { transform: translate3d(9px, -2px, 0); }
  44%      { transform: translate3d(3px, 5px, 0); }
  59%      { transform: translate3d(-5px, 7px, 0); }
  74%      { transform: translate3d(-9px, 1px, 0); }
  88%      { transform: translate3d(-4px, -5px, 0); }
}

@-webkit-keyframes rewardShowcaseBirdsFloatV289 {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0); }
  14%      { -webkit-transform: translate3d(5px, -6px, 0); }
  29%      { -webkit-transform: translate3d(9px, -2px, 0); }
  44%      { -webkit-transform: translate3d(3px, 5px, 0); }
  59%      { -webkit-transform: translate3d(-5px, 7px, 0); }
  74%      { -webkit-transform: translate3d(-9px, 1px, 0); }
  88%      { -webkit-transform: translate3d(-4px, -5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
    animation: rewardShowcaseBirdsFloatV289 6.8s ease-in-out infinite !important;
    -webkit-animation: rewardShowcaseBirdsFloatV289 6.8s ease-in-out infinite !important;
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
  position: relative !important;
  z-index: 20002 !important;
  top: 170px !important;
  display: block !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate3d(-7px, 0, 0) !important;
  translate: none !important;
  animation-name: rewardShowcaseBirdsDriftXV290 !important;
  animation-duration: 7.8s !important;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  animation-delay: -2.1s !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
  will-change: transform !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float > .reward-showcase-birds-bob {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate3d(0, -6px, 0) !important;
  translate: none !important;
  animation-name: rewardShowcaseBirdsDriftYV290 !important;
  animation-duration: 5.6s !important;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  animation-delay: -3.4s !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
  will-change: transform !important;
  pointer-events: none !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float > .reward-showcase-birds-bob > .reward-showcase-birds-image {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

@keyframes rewardShowcaseBirdsDriftXV290 {
  from { transform: translate3d(-7px, 0, 0); }
  to   { transform: translate3d(7px, 0, 0); }
}

@keyframes rewardShowcaseBirdsDriftYV290 {
  from { transform: translate3d(0, -6px, 0); }
  to   { transform: translate3d(0, 6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
    animation-name: rewardShowcaseBirdsDriftXV290 !important;
    animation-duration: 9.2s !important;
    animation-direction: alternate !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }

  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float > .reward-showcase-birds-bob {
    animation-name: rewardShowcaseBirdsDriftYV290 !important;
    animation-duration: 6.8s !important;
    animation-direction: alternate !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
  top: 150px !important;
}

@property --reward-birds-float-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --reward-birds-float-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
  --reward-birds-float-x: -8px;
  transform: none !important;
  translate: var(--reward-birds-float-x) 0 !important;
  animation: rewardShowcaseBirdsSmoothXV291 9.4s cubic-bezier(.42, 0, .58, 1) -3.1s infinite alternate !important;
  animation-play-state: running !important;
  will-change: translate !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float > .reward-showcase-birds-bob {
  --reward-birds-float-y: -6px;
  transform: none !important;
  translate: 0 var(--reward-birds-float-y) !important;
  animation: rewardShowcaseBirdsSmoothYV291 6.2s cubic-bezier(.42, 0, .58, 1) -1.7s infinite alternate !important;
  animation-play-state: running !important;
  will-change: translate !important;
}

@keyframes rewardShowcaseBirdsSmoothXV291 {
  from { --reward-birds-float-x: -8px; }
  to   { --reward-birds-float-x: 8px; }
}

@keyframes rewardShowcaseBirdsSmoothYV291 {
  from { --reward-birds-float-y: -6px; }
  to   { --reward-birds-float-y: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float {
    animation: rewardShowcaseBirdsSmoothXV291 10.8s cubic-bezier(.42, 0, .58, 1) -3.1s infinite alternate !important;
    animation-play-state: running !important;
  }

  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-birds-float > .reward-showcase-birds-bob {
    animation: rewardShowcaseBirdsSmoothYV291 7.4s cubic-bezier(.42, 0, .58, 1) -1.7s infinite alternate !important;
    animation-play-state: running !important;
  }
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-bird-pair {
  position: relative !important;
  z-index: 20002 !important;
  top: 150px !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-bird-pair > .reward-showcase-bird-motion {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  height: max-content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  pointer-events: none !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-bird-pair > .reward-showcase-bird-motion > img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-bird-pair > .reward-showcase-bird-primary {
  z-index: 2 !important;
}

html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-bird-pair > .reward-showcase-bird-secondary {
  z-index: 3 !important;
}

@media (max-width: 820px) {
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-bird-pair {
    top: 150px !important;
    gap: 10px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > img.catalog-panel-coins-overlay {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 90 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > img.catalog-panel-coins-overlay {
  display: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 90 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer > img.catalog-panel-coins-overlay {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translateX(-50%) !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer > img.catalog-panel-coins-overlay {
    bottom: calc(100% + 5px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer > img.catalog-panel-coins-overlay {
  bottom: calc(100% - 92px) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer > img.catalog-panel-coins-overlay {
    bottom: calc(100% - 95px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  contain: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer {
  z-index: 2147483000 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  contain: none !important;
  isolation: isolate !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer > img.catalog-panel-coins-overlay {
  bottom: calc(100% - 192px) !important;
  z-index: 2147483001 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  contain: none !important;
  transform: translateX(-50%) translateZ(0) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer > img.catalog-panel-coins-overlay {
    bottom: calc(100% - 195px) !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-coins-layer,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk img.catalog-panel-coins-overlay {
  display: none !important;
}

html body > .catalog-panel-coins-portal-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  contain: none !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

html body > .catalog-panel-coins-portal-layer > img.catalog-panel-coins-portal-image {
  position: fixed !important;
  inset: auto !important;
  left: 0;
  top: 0;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translate(-50%, -100%) translateZ(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body > .catalog-panel-coins-portal-layer,
html body > .catalog-panel-coins-portal-layer > img.catalog-panel-coins-portal-image {
  display: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > #catalog-panel-coins-top-layer.catalog-panel-coins-top-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  contain: none !important;
  isolation: isolate !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > #catalog-panel-coins-top-layer.catalog-panel-coins-top-layer > img.catalog-panel-coins-top-image {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 142px !important;
  z-index: 2147483647 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: none !important;
  object-position: center !important;
  transform: translate(-50%, -100%) translateZ(1px) !important;
  transform-origin: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  contain: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk::before {
  z-index: 1 !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-panel-art.catalog-panel-art {
  z-index: 20 !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .coffer-hall-panel-lanterns {
  z-index: 32 !important;
}
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .search-box,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .filter-chips,
html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > .catalog-count {
  z-index: 40 !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > #catalog-panel-coins-top-layer.catalog-panel-coins-top-layer > img.catalog-panel-coins-top-image {
    top: 139px !important;
  }
}

html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > #catalog-panel-coins-top-layer.catalog-panel-coins-top-layer > img.catalog-panel-coins-top-image {
  top: 154px !important;
}

@media (max-width: 820px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > #catalog-panel-coins-top-layer.catalog-panel-coins-top-layer > img.catalog-panel-coins-top-image {
    top: 151px !important;
  }
}

html body .view-shop .hero-copy .eyebrow.coffer-hall-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
}

html body .view-shop .hero-copy .coffer-hall-eyebrow-line {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 1px !important;
  vertical-align: middle !important;
  background: linear-gradient(90deg,
    rgba(255, 220, 140, 0) 0%,
    rgba(255, 220, 140, .18) 20%,
    rgba(255, 226, 150, .88) 55%,
    rgba(255, 221, 138, .32) 82%,
    rgba(255, 220, 140, 0) 100%) !important;
  box-shadow:
    0 0 5px rgba(255, 210, 92, .24),
    0 0 10px rgba(255, 210, 92, .14),
    0 0 16px rgba(255, 222, 139, .08) !important;
  pointer-events: none !important;
}

html body .view-shop .hero-copy .coffer-hall-eyebrow-line.is-left {
  margin-right: 2px !important;
}

html body .view-shop .hero-copy .coffer-hall-eyebrow-line.is-right {
  margin-left: 2px !important;
  transform: scaleX(-1) !important;
}

@media (max-width: 820px) {
  html body .view-shop .hero-copy .eyebrow.coffer-hall-eyebrow {
    gap: 5px !important;
  }

  html body .view-shop .hero-copy .coffer-hall-eyebrow-line {
    width: 26px !important;
  }

  html body .view-shop .hero-copy .coffer-hall-eyebrow-line.is-left {
    margin-right: 1px !important;
  }

  html body .view-shop .hero-copy .coffer-hall-eyebrow-line.is-right {
    margin-left: 1px !important;
  }
}

@media (max-width: 620px) {
  html body .view-shop .hero-copy .eyebrow.coffer-hall-eyebrow {
    gap: 4px !important;
  }

  html body .view-shop .hero-copy .coffer-hall-eyebrow-line {
    width: 20px !important;
  }
}

html body .reward-showcase .reward-showcase-heading {
  left: calc(50% + 3px) !important;
  width: min(396px, 90%) !important;
  height: 56px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-heading {
    width: min(318px, 92%) !important;
    height: 45px !important;
  }
}

html body .reward-showcase .reward-showcase-heading {
  left: calc(50% + 6px) !important;
  top: 6px !important;
  width: min(408px, 92%) !important;
  height: 58px !important;
}

@media (max-width: 820px) {
  html body .reward-showcase .reward-showcase-heading {
    top: 4px !important;
    width: min(328px, 94%) !important;
    height: 47px !important;
  }
}

html body .view-page.view-vault .reward-showcase-inventory {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html body .reward-showcase-inventory > .reward-showcase-top-creatures {
  position: absolute !important;
  z-index: 20000 !important;
  left: 50% !important;
  top: 109px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translate(-50%, -100%) translateZ(1px) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html body .reward-showcase-inventory > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
  position: relative !important;
  z-index: 20001 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: translate3d(0, -3px, 0) !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .reward-showcase-inventory > .reward-showcase-viewport,
html body .reward-showcase-inventory .reward-showcase-top-image {
  position: relative !important;
  z-index: 10 !important;
}

html body .reward-showcase-inventory > .reward-showcase-heading {
  z-index: 21000 !important;
}

@media (max-width: 820px) {
  html body .reward-showcase-inventory > .reward-showcase-top-creatures {
    top: 103px !important;
  }
}

html body .view-page.view-vault > .prize-gallery {
  margin-top: 4px !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .prize-gallery {
    margin-top: 3px !important;
  }
}

html body .view-page.view-vault .reward-showcase-inventory {
  top: 7px !important;
}

html body .view-page.view-vault .reward-showcase-inventory {
  top: 17px !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-heading {
  overflow: visible !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 328px !important;
  max-width: min(100%, 460px) !important;
  padding: 12px 34px 10px !important;
  isolation: isolate !important;
  z-index: 2 !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before,
html body .view-page.view-vault > .prize-gallery .gallery-title-block::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before {
  z-index: -1 !important;
  width: calc(100% + 28px) !important;
  height: calc(100% + 14px) !important;
  border-radius: 13px !important;
  border: 1px solid rgba(83, 50, 21, 0.78) !important;
  clip-path: polygon(1.4% 8%, 5% 2%, 14% 4.5%, 27% 1%, 38% 3.2%, 51% 0%, 64% 4%, 75% 1.5%, 86% 4.8%, 95.4% 1.8%, 98.8% 9.2%, 97.2% 24%, 99% 38%, 97.6% 54%, 99.1% 69%, 97.3% 84%, 94.5% 97.4%, 84% 95.8%, 72.3% 99%, 60% 95.5%, 46% 98.4%, 33% 95.7%, 20.4% 97.9%, 10.2% 94.6%, 2.1% 97%, 0.5% 84%, 2.8% 69%, 1.1% 54%, 2.9% 40%, 1% 24%);
  background:
    radial-gradient(circle at 8.8% 51%, rgba(62, 41, 23, 0.96) 0 5px, rgba(198, 167, 116, 0.9) 5.4px 6.4px, rgba(41, 24, 10, 0.84) 6.8px 8.3px, transparent 8.8px),
    radial-gradient(circle at 91.2% 50.8%, rgba(62, 41, 23, 0.96) 0 5px, rgba(198, 167, 116, 0.9) 5.4px 6.4px, rgba(41, 24, 10, 0.84) 6.8px 8.3px, transparent 8.8px),
    radial-gradient(ellipse at 26% 32%, rgba(96, 64, 30, 0.34) 0 9%, transparent 10%),
    radial-gradient(ellipse at 71% 63%, rgba(79, 52, 26, 0.28) 0 8%, transparent 9%),
    radial-gradient(ellipse at 54% 49%, rgba(150, 118, 76, 0.13) 0 7%, transparent 8%),
    linear-gradient(90deg,
      rgba(111, 71, 34, 0.38) 0%,
      rgba(111, 71, 34, 0.12) 6%,
      rgba(111, 71, 34, 0.28) 11%,
      rgba(255, 232, 195, 0.06) 15%,
      rgba(113, 74, 41, 0.23) 20%,
      rgba(255, 227, 171, 0.03) 28%,
      rgba(95, 60, 33, 0.22) 36%,
      rgba(255, 227, 171, 0.05) 44%,
      rgba(96, 60, 32, 0.2) 54%,
      rgba(255, 227, 171, 0.03) 61%,
      rgba(108, 67, 34, 0.23) 70%,
      rgba(255, 227, 171, 0.04) 80%,
      rgba(106, 68, 36, 0.26) 90%,
      rgba(98, 63, 34, 0.34) 100%),
    linear-gradient(180deg,
      rgba(197, 156, 95, 0.92) 0%,
      rgba(166, 119, 65, 0.96) 18%,
      rgba(137, 88, 47, 0.98) 49%,
      rgba(120, 74, 40, 0.98) 74%,
      rgba(92, 54, 30, 0.98) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 237, 205, 0.24),
    inset 0 -2px 0 rgba(67, 39, 16, 0.45),
    inset 16px 0 18px rgba(54, 33, 15, 0.08),
    inset -16px 0 18px rgba(54, 33, 15, 0.08),
    0 7px 0 rgba(56, 32, 17, 0.52),
    0 10px 18px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(234, 205, 154, 0.06) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::after {
  z-index: -2 !important;
  width: calc(100% + 18px) !important;
  height: calc(100% + 11px) !important;
  margin-top: 7px !important;
  border-radius: 11px !important;
  clip-path: polygon(2.2% 10%, 7% 3.4%, 16% 5.5%, 33% 1.2%, 47% 4.5%, 63% 2.1%, 80% 4.4%, 93.8% 2.6%, 98.4% 11.6%, 97.2% 86%, 93.4% 97.6%, 81% 95.1%, 66% 98.5%, 49% 94.6%, 32% 98.1%, 17% 94.8%, 6% 96.8%, 1.5% 85.5%, 3.1% 53%, 0.8% 24%);
  background: linear-gradient(180deg, rgba(74, 43, 21, 0.82), rgba(47, 26, 13, 0.9)) !important;
  box-shadow:
    0 13px 18px rgba(0, 0, 0, 0.26),
    0 4px 0 rgba(34, 20, 11, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  opacity: 0.94 !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
  margin: 0 0 4px !important;
  color: #f4de9a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(50, 30, 14, 0.8),
    0 0 7px rgba(255, 224, 155, 0.18) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
  margin: 0 !important;
  color: #f7edd4 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.02 !important;
  text-shadow:
    0 1px 0 rgba(60, 34, 17, 0.9),
    0 2px 0 rgba(74, 45, 22, 0.62),
    0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .prize-gallery .gallery-title-block {
    min-width: 236px !important;
    max-width: min(100%, 320px) !important;
    padding: 11px 26px 9px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
    font-size: 22px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
  }
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block {
  padding: 13px 36px 11px !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before {
  width: calc(100% + 32px) !important;
  height: calc(100% + 16px) !important;
  border-radius: 13px !important;
  border: 1px solid rgba(74, 55, 29, 0.9) !important;
  background:
    radial-gradient(circle at 9.2% 50%, rgba(55, 38, 22, 0.98) 0 5px, rgba(232, 208, 160, 0.92) 5.4px 6.5px, rgba(84, 58, 31, 0.95) 6.9px 8.2px, transparent 8.7px),
    radial-gradient(circle at 90.8% 50%, rgba(55, 38, 22, 0.98) 0 5px, rgba(232, 208, 160, 0.92) 5.4px 6.5px, rgba(84, 58, 31, 0.95) 6.9px 8.2px, transparent 8.7px),
    radial-gradient(ellipse 28px 13px at 23% 31%, rgba(72, 53, 30, 0.32) 0 55%, transparent 57%),
    radial-gradient(ellipse 18px 8px at 23% 31%, rgba(141, 104, 58, 0.24) 0 54%, transparent 56%),
    radial-gradient(ellipse 31px 14px at 74% 64%, rgba(65, 47, 25, 0.34) 0 52%, transparent 54%),
    radial-gradient(ellipse 18px 7px at 74% 64%, rgba(136, 98, 56, 0.18) 0 52%, transparent 54%),
    radial-gradient(ellipse 15px 7px at 53% 48%, rgba(82, 59, 35, 0.16) 0 52%, transparent 54%),
    repeating-linear-gradient(100deg,
      rgba(78, 56, 31, 0.22) 0 3px,
      rgba(136, 101, 59, 0.04) 3px 10px,
      rgba(74, 55, 32, 0.2) 10px 13px,
      rgba(255, 231, 195, 0.02) 13px 21px,
      rgba(92, 68, 39, 0.17) 21px 27px,
      rgba(62, 46, 27, 0.16) 27px 33px),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.03) 0 1px,
      rgba(0,0,0,0) 1px 7px,
      rgba(0,0,0,0.025) 7px 8px,
      rgba(0,0,0,0) 8px 16px),
    linear-gradient(90deg,
      rgba(45, 67, 42, 0.12) 0%,
      rgba(0,0,0,0) 8%,
      rgba(54, 79, 49, 0.09) 22%,
      rgba(0,0,0,0) 37%,
      rgba(66, 95, 58, 0.10) 50%,
      rgba(0,0,0,0) 65%,
      rgba(45, 67, 42, 0.12) 100%),
    linear-gradient(180deg,
      rgba(191, 150, 95, 0.98) 0%,
      rgba(160, 117, 69, 0.99) 18%,
      rgba(128, 86, 51, 1) 45%,
      rgba(105, 71, 46, 1) 70%,
      rgba(79, 56, 36, 1) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(247, 224, 188, 0.22),
    inset 0 -2px 0 rgba(61, 41, 23, 0.52),
    inset 0 0 0 1px rgba(255, 234, 199, 0.03),
    inset 18px 0 22px rgba(34, 26, 16, 0.08),
    inset -18px 0 22px rgba(34, 26, 16, 0.08),
    0 7px 0 rgba(57, 37, 21, 0.56),
    0 12px 20px rgba(0, 0, 0, 0.23),
    0 0 0 1px rgba(100, 74, 41, 0.24) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::after {
  width: calc(100% + 22px) !important;
  height: calc(100% + 12px) !important;
  margin-top: 8px !important;
  background:
    linear-gradient(180deg, rgba(77, 53, 30, 0.82), rgba(51, 35, 21, 0.95)) !important;
  box-shadow:
    0 14px 20px rgba(0, 0, 0, 0.28),
    0 4px 0 rgba(36, 24, 14, 0.5),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
  margin: 0 0 3px !important;
  color: #f2cf79 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(61, 37, 16, 0.9),
    0 0 8px rgba(236, 198, 99, 0.15) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
  color: var(--gold-soft) !important;
  font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(64, 41, 18, 0.95),
    0 2px 0 rgba(57, 39, 20, 0.55),
    0 0 10px rgba(240, 207, 118, 0.12) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .prize-gallery .gallery-title-block {
    padding: 12px 28px 10px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
    font-size: 21px !important;
    letter-spacing: .045em !important;
  }
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block {
  min-width: 292px !important;
  max-width: min(100%, 404px) !important;
  padding: 10px 28px 8px !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before {
  width: calc(100% + 22px) !important;
  height: calc(100% + 11px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(84, 62, 35, 0.92) !important;
  clip-path: polygon(1.6% 10%, 6% 2.8%, 13% 5.5%, 25% 1.4%, 38% 4.2%, 51% 1%, 63% 4.8%, 76% 2.3%, 88% 5.6%, 96.8% 2.8%, 99.2% 10.5%, 97.8% 24%, 99% 38%, 97.2% 53%, 98.6% 70%, 96.3% 86%, 92.5% 97.2%, 83% 94.8%, 69% 98.4%, 54% 95.4%, 40.5% 98%, 27% 95.6%, 13.5% 97.7%, 4.4% 93.4%, 0.9% 84%, 2.7% 69%, 1.2% 54%, 2.6% 38%, 1% 23.5%) !important;
  background:
    radial-gradient(circle at 9.2% 50%, rgba(58, 40, 23, 0.98) 0 4.7px, rgba(233, 209, 161, 0.95) 5.1px 6.2px, rgba(81, 58, 31, 0.96) 6.6px 8px, transparent 8.4px),
    radial-gradient(circle at 90.8% 50%, rgba(58, 40, 23, 0.98) 0 4.7px, rgba(233, 209, 161, 0.95) 5.1px 6.2px, rgba(81, 58, 31, 0.96) 6.6px 8px, transparent 8.4px),
    radial-gradient(ellipse 24px 11px at 26% 34%, rgba(64, 45, 24, 0.38) 0 56%, transparent 58%),
    radial-gradient(ellipse 14px 6px at 26% 34%, rgba(146, 112, 65, 0.22) 0 54%, transparent 56%),
    radial-gradient(ellipse 28px 12px at 73% 61%, rgba(68, 49, 28, 0.34) 0 54%, transparent 56%),
    radial-gradient(ellipse 15px 6px at 73% 61%, rgba(151, 119, 72, 0.18) 0 54%, transparent 56%),
    linear-gradient(180deg, rgba(255, 247, 232, 0.09), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(97deg,
      rgba(69, 50, 29, 0.25) 0 3px,
      rgba(160, 125, 80, 0.07) 3px 7px,
      rgba(94, 68, 39, 0.18) 7px 10px,
      rgba(255, 231, 198, 0.035) 10px 14px,
      rgba(75, 55, 31, 0.16) 14px 21px,
      rgba(41, 31, 20, 0.07) 21px 24px,
      rgba(146, 112, 67, 0.06) 24px 30px),
    repeating-linear-gradient(84deg,
      rgba(0, 0, 0, 0.03) 0 1px,
      rgba(0,0,0,0) 1px 9px,
      rgba(255, 229, 180, 0.03) 9px 10px,
      rgba(0,0,0,0) 10px 17px),
    linear-gradient(90deg,
      rgba(49, 73, 44, 0.12) 0%,
      rgba(0,0,0,0) 12%,
      rgba(73, 105, 63, 0.08) 28%,
      rgba(0,0,0,0) 50%,
      rgba(73, 105, 63, 0.08) 72%,
      rgba(0,0,0,0) 88%,
      rgba(49, 73, 44, 0.12) 100%),
    linear-gradient(180deg,
      rgba(184, 144, 92, 0.98) 0%,
      rgba(155, 113, 68, 0.99) 18%,
      rgba(130, 90, 53, 1) 46%,
      rgba(103, 72, 46, 1) 73%,
      rgba(83, 59, 39, 1) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(250, 228, 187, 0.18),
    inset 0 -2px 0 rgba(58, 40, 25, 0.52),
    inset 0 0 0 1px rgba(255, 237, 206, 0.03),
    inset 18px 0 16px rgba(32, 24, 16, 0.06),
    inset -18px 0 16px rgba(32, 24, 16, 0.06),
    0 6px 0 rgba(61, 41, 24, 0.56),
    0 11px 18px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(119, 92, 60, 0.18) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::after {
  width: calc(100% + 14px) !important;
  height: calc(100% + 8px) !important;
  margin-top: 6px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(72, 51, 31, 0.86), rgba(48, 34, 21, 0.96)) !important;
  box-shadow:
    0 10px 16px rgba(0, 0, 0, 0.24),
    0 4px 0 rgba(34, 24, 14, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
  margin: 0 0 2px !important;
  color: #edcb74 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(66, 42, 20, 0.96),
    0 0 7px rgba(239, 200, 102, 0.11) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
  color: #f1d89c !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  line-height: .96 !important;
  text-shadow:
    0 1px 0 rgba(63, 42, 21, 0.98),
    0 2px 0 rgba(56, 38, 20, 0.56),
    0 0 10px rgba(233, 199, 105, 0.10) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .prize-gallery .gallery-title-block {
    min-width: 226px !important;
    max-width: min(100%, 312px) !important;
    padding: 10px 23px 8px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
    font-size: 20px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
    font-size: 10px !important;
  }
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block {
  width: max-content !important;
  min-width: unset !important;
  max-width: min(100%, 390px) !important;
  padding: 8px 24px 7px !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before {
  width: calc(100% + 16px) !important;
  height: calc(100% + 8px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(89, 63, 35, 0.92) !important;
  clip-path: polygon(1.5% 11%, 6% 3.5%, 14% 5.4%, 25% 2%, 38% 4.6%, 52% 1.3%, 66% 4.6%, 77.5% 2.2%, 89% 5.2%, 97% 3%, 99.1% 11.5%, 97.8% 23%, 99% 37%, 97.4% 54%, 98.8% 69.5%, 96.7% 85.4%, 92.6% 97.3%, 82.7% 94.7%, 69.3% 98.1%, 55.2% 95.4%, 42.3% 97.8%, 28.4% 95.5%, 15.5% 97.6%, 5.2% 94%, 1.2% 84%, 2.5% 69%, 1.3% 54%, 2.8% 38%, 1% 24.5%) !important;
  background:
    radial-gradient(circle at 9.2% 50%, rgba(58, 40, 23, 0.99) 0 4.3px, rgba(233, 209, 161, 0.95) 4.8px 5.9px, rgba(83, 59, 31, 0.98) 6.2px 7.6px, transparent 8px),
    radial-gradient(circle at 90.8% 50%, rgba(58, 40, 23, 0.99) 0 4.3px, rgba(233, 209, 161, 0.95) 4.8px 5.9px, rgba(83, 59, 31, 0.98) 6.2px 7.6px, transparent 8px),
    radial-gradient(ellipse 25px 10px at 24% 33%, rgba(75, 53, 28, 0.38) 0 54%, transparent 56%),
    radial-gradient(ellipse 14px 5px at 24% 33%, rgba(158, 122, 74, 0.22) 0 52%, transparent 54%),
    radial-gradient(ellipse 27px 11px at 73% 63%, rgba(72, 50, 28, 0.34) 0 54%, transparent 56%),
    radial-gradient(ellipse 15px 5px at 73% 63%, rgba(155, 118, 69, 0.18) 0 52%, transparent 54%),
    linear-gradient(180deg, rgba(255,244,219,0.12), rgba(255,244,219,0) 20%),
    repeating-linear-gradient(96deg,
      rgba(64, 46, 28, 0.24) 0 2px,
      rgba(149, 114, 71, 0.05) 2px 6px,
      rgba(94, 69, 39, 0.19) 6px 9px,
      rgba(255, 230, 190, 0.025) 9px 13px,
      rgba(77, 57, 34, 0.17) 13px 18px,
      rgba(44, 33, 22, 0.06) 18px 22px,
      rgba(152, 117, 73, 0.06) 22px 28px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.018) 0 1px,
      rgba(0,0,0,0) 1px 10px,
      rgba(0,0,0,0.028) 10px 11px,
      rgba(0,0,0,0) 11px 20px),
    linear-gradient(90deg,
      rgba(46, 71, 43, 0.11) 0%,
      rgba(0,0,0,0) 10%,
      rgba(82, 113, 71, 0.07) 24%,
      rgba(0,0,0,0) 49%,
      rgba(82, 113, 71, 0.07) 74%,
      rgba(0,0,0,0) 90%,
      rgba(46, 71, 43, 0.11) 100%),
    linear-gradient(180deg,
      rgba(180, 140, 89, 0.99) 0%,
      rgba(155, 113, 67, 1) 18%,
      rgba(129, 90, 53, 1) 44%,
      rgba(104, 72, 45, 1) 73%,
      rgba(85, 59, 38, 1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(250, 227, 184, 0.18),
    inset 0 -2px 0 rgba(57, 39, 24, 0.54),
    inset 0 0 0 1px rgba(255, 235, 203, 0.03),
    inset 12px 0 14px rgba(31, 23, 15, 0.05),
    inset -12px 0 14px rgba(31, 23, 15, 0.05),
    0 5px 0 rgba(60, 41, 24, 0.57),
    0 9px 14px rgba(0, 0, 0, 0.19),
    0 0 0 1px rgba(116, 90, 58, 0.17) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::after {
  width: calc(100% + 10px) !important;
  height: calc(100% + 5px) !important;
  margin-top: 5px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(72, 51, 31, 0.86), rgba(47, 33, 21, 0.96)) !important;
  box-shadow:
    0 8px 13px rgba(0, 0, 0, 0.22),
    0 3px 0 rgba(35, 25, 15, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow,
html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
  white-space: nowrap !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
  margin: 0 0 1px !important;
  color: #e9c66d !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-shadow:
    0 1px 0 rgba(66, 42, 20, 0.96),
    0 0 7px rgba(239, 200, 102, 0.10) !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
  color: #f0d797 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-shadow:
    0 1px 0 rgba(61, 40, 20, 0.98),
    0 2px 0 rgba(56, 38, 20, 0.52),
    0 0 9px rgba(233, 199, 105, 0.08) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .prize-gallery .gallery-title-block {
    width: auto !important;
    max-width: min(100%, 310px) !important;
    padding: 9px 18px 7px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow,
  html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
    white-space: normal !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
    font-size: 19px !important;
  }

  html body .view-page.view-vault > .prize-gallery .gallery-title-block .eyebrow {
    font-size: 10px !important;
  }
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
  font-size: 19px !important;
  letter-spacing: .06em !important;
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before {
  border-color: rgba(79, 62, 40, 0.94) !important;
  background:
    radial-gradient(circle at 9.2% 50%, rgba(58, 40, 23, 0.99) 0 4.3px, rgba(226, 205, 164, 0.92) 4.8px 5.9px, rgba(80, 59, 34, 0.98) 6.2px 7.6px, transparent 8px),
    radial-gradient(circle at 90.8% 50%, rgba(58, 40, 23, 0.99) 0 4.3px, rgba(226, 205, 164, 0.92) 4.8px 5.9px, rgba(80, 59, 34, 0.98) 6.2px 7.6px, transparent 8px),
    radial-gradient(ellipse 24px 10px at 24% 33%, rgba(71, 52, 33, 0.38) 0 54%, transparent 56%),
    radial-gradient(ellipse 13px 5px at 24% 33%, rgba(127, 102, 69, 0.18) 0 52%, transparent 54%),
    radial-gradient(ellipse 26px 11px at 73% 63%, rgba(67, 49, 31, 0.34) 0 54%, transparent 56%),
    radial-gradient(ellipse 14px 5px at 73% 63%, rgba(123, 97, 64, 0.15) 0 52%, transparent 54%),
    linear-gradient(180deg, rgba(247,238,217,0.10), rgba(247,238,217,0) 20%),
    repeating-linear-gradient(95deg,
      rgba(61, 47, 32, 0.24) 0 2px,
      rgba(117, 93, 63, 0.06) 2px 6px,
      rgba(88, 67, 44, 0.20) 6px 9px,
      rgba(214, 199, 165, 0.03) 9px 13px,
      rgba(71, 56, 38, 0.18) 13px 18px,
      rgba(44, 35, 26, 0.07) 18px 23px,
      rgba(132, 108, 77, 0.05) 23px 29px),
    repeating-linear-gradient(87deg,
      rgba(255,255,255,0.018) 0 1px,
      rgba(0,0,0,0) 1px 9px,
      rgba(0,0,0,0.03) 9px 10px,
      rgba(0,0,0,0) 10px 18px),
    linear-gradient(90deg,
      rgba(55, 72, 47, 0.13) 0%,
      rgba(0,0,0,0) 11%,
      rgba(81, 107, 67, 0.08) 26%,
      rgba(0,0,0,0) 49%,
      rgba(81, 107, 67, 0.08) 74%,
      rgba(0,0,0,0) 89%,
      rgba(55, 72, 47, 0.13) 100%),
    linear-gradient(180deg,
      rgba(168, 133, 90, 0.99) 0%,
      rgba(141, 106, 70, 1) 18%,
      rgba(116, 84, 56, 1) 45%,
      rgba(95, 71, 49, 1) 74%,
      rgba(74, 56, 39, 1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(246, 225, 186, 0.14),
    inset 0 -2px 0 rgba(53, 39, 27, 0.56),
    inset 0 0 0 1px rgba(240, 230, 204, 0.025),
    inset 12px 0 14px rgba(34, 28, 22, 0.05),
    inset -12px 0 14px rgba(34, 28, 22, 0.05),
    0 5px 0 rgba(57, 42, 29, 0.58),
    0 9px 14px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(96, 79, 58, 0.18) !important;
}

@media (max-width: 820px) {
  html body .view-page.view-vault > .prize-gallery .gallery-title-block h3 {
    font-size: 17px !important;
  }
}

html body .view-page.view-vault > .prize-gallery .gallery-title-block::before {
  border-color: rgba(69, 55, 39, 0.96) !important;
  background:
    radial-gradient(circle at 9.2% 50%, rgba(55, 39, 24, 0.99) 0 4.3px, rgba(223, 204, 166, 0.9) 4.8px 5.9px, rgba(76, 56, 33, 0.98) 6.2px 7.6px, transparent 8px),
    radial-gradient(circle at 90.8% 50%, rgba(55, 39, 24, 0.99) 0 4.3px, rgba(223, 204, 166, 0.9) 4.8px 5.9px, rgba(76, 56, 33, 0.98) 6.2px 7.6px, transparent 8px),

    /* Leaves near the upper corners */
    radial-gradient(ellipse 10px 5px at 12% 18%, rgba(96, 136, 84, 0.72) 0 58%, transparent 60%),
    radial-gradient(ellipse 10px 5px at 15% 16%, rgba(73, 110, 64, 0.76) 0 58%, transparent 60%),
    radial-gradient(ellipse 9px 4px at 17% 21%, rgba(121, 160, 103, 0.62) 0 58%, transparent 60%),
    radial-gradient(ellipse 10px 5px at 88% 18%, rgba(96, 136, 84, 0.72) 0 58%, transparent 60%),
    radial-gradient(ellipse 10px 5px at 85% 16%, rgba(73, 110, 64, 0.76) 0 58%, transparent 60%),
    radial-gradient(ellipse 9px 4px at 83% 21%, rgba(121, 160, 103, 0.62) 0 58%, transparent 60%),

    /* Faint vines and leaves near the lower edges */
    radial-gradient(ellipse 12px 5px at 22% 78%, rgba(72, 104, 61, 0.24) 0 55%, transparent 58%),
    radial-gradient(ellipse 11px 5px at 78% 79%, rgba(72, 104, 61, 0.24) 0 55%, transparent 58%),

    radial-gradient(ellipse 24px 10px at 24% 33%, rgba(61, 47, 31, 0.40) 0 54%, transparent 56%),
    radial-gradient(ellipse 13px 5px at 24% 33%, rgba(111, 93, 67, 0.16) 0 52%, transparent 54%),
    radial-gradient(ellipse 26px 11px at 73% 63%, rgba(58, 45, 29, 0.36) 0 54%, transparent 56%),
    radial-gradient(ellipse 14px 5px at 73% 63%, rgba(111, 91, 65, 0.13) 0 52%, transparent 54%),
    linear-gradient(180deg, rgba(240,231,210,0.08), rgba(240,231,210,0) 19%),
    repeating-linear-gradient(95deg,
      rgba(54, 42, 30, 0.28) 0 2px,
      rgba(101, 81, 58, 0.07) 2px 6px,
      rgba(77, 60, 42, 0.22) 6px 9px,
      rgba(196, 183, 154, 0.025) 9px 13px,
      rgba(63, 50, 37, 0.20) 13px 18px,
      rgba(36, 29, 23, 0.08) 18px 23px,
      rgba(110, 92, 68, 0.05) 23px 29px),
    repeating-linear-gradient(87deg,
      rgba(255,255,255,0.014) 0 1px,
      rgba(0,0,0,0) 1px 9px,
      rgba(0,0,0,0.035) 9px 10px,
      rgba(0,0,0,0) 10px 18px),
    linear-gradient(90deg,
      rgba(53, 78, 47, 0.12) 0%,
      rgba(0,0,0,0) 11%,
      rgba(72, 102, 62, 0.09) 26%,
      rgba(0,0,0,0) 49%,
      rgba(72, 102, 62, 0.09) 74%,
      rgba(0,0,0,0) 89%,
      rgba(53, 78, 47, 0.12) 100%),
    linear-gradient(180deg,
      rgba(143, 112, 77, 0.99) 0%,
      rgba(118, 89, 61, 1) 18%,
      rgba(95, 70, 49, 1) 45%,
      rgba(77, 58, 42, 1) 74%,
      rgba(60, 45, 34, 1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(236, 214, 176, 0.10),
    inset 0 -2px 0 rgba(43, 33, 24, 0.62),
    inset 0 0 0 1px rgba(235, 226, 202, 0.018),
    inset 12px 0 14px rgba(27, 22, 18, 0.08),
    inset -12px 0 14px rgba(27, 22, 18, 0.08),
    0 5px 0 rgba(46, 35, 26, 0.62),
    0 9px 14px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(79, 68, 54, 0.20) !important;
}

html body .topbar .nav-tabs.nav-minigame::before{
  transform:translate3d(0,0,0)!important;
}
html body .topbar .nav-tabs.nav-shop::before{
  transform:translate3d(126px,0,0)!important;
}
html body .topbar .nav-tabs.nav-open::before{
  transform:translate3d(252px,0,0)!important;
}
html body .topbar .nav-tabs.nav-upgrade::before{
  transform:translate3d(378px,0,0)!important;
}

html body .main-layout.main-layout-minigame{
  grid-template-columns:minmax(0,1fr)!important;
  max-width:1920px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html body .main-layout.main-layout-minigame > .content{
  min-width:0!important;
  width:100%!important;
}
html body .view-page.view-minigame{
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}

html body .minigame-page{
  position:relative;
  width:100%;
  min-width:0;
  padding:0 0 52px;
  isolation:isolate;
}
html body .minigame-selector-hero{
  position:relative;
  z-index:1;
  width:100%;
  min-height:680px;
  margin:-20px auto 0;
  overflow:hidden;
  isolation:isolate;
  border-radius:0 0 30px 30px;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(62,101,64,.14),transparent 36%),
    radial-gradient(ellipse at 50% 100%,rgba(5,18,10,.56),transparent 58%);
}
html body .minigame-selector-hero::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:13px;
  height:2px;
  z-index:1;
  opacity:.72;
  background:linear-gradient(90deg,transparent,rgba(190,147,68,.35) 12%,rgba(240,217,144,.72) 50%,rgba(190,147,68,.35) 88%,transparent);
  box-shadow:0 0 18px rgba(210,172,90,.18);
}
html body .minigame-selector-hero::after{
  content:"✦  ◆  ✦";
  position:absolute;
  left:50%;
  bottom:1px;
  z-index:2;
  padding:0 18px;
  color:#d9ba69;
  font-family:Georgia,serif;
  font-size:12px;
  letter-spacing:.7em;
  background:#102318;
  transform:translateX(-50%);
  text-shadow:0 0 10px rgba(235,202,118,.38);
}
html body .minigame-stars{
  position:absolute;
  top:0;
  bottom:0;
  z-index:0;
  width:50%;
  opacity:.22;
  pointer-events:none;
  background-image:image-set(url("/images/stars-800.webp") type("image/webp"),url("/images/stars.png") type("image/png"));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
}
html body .minigame-stars-left{left:0;}
html body .minigame-stars-right {
  right:0;
  transform:scaleX(-1);
}
html body .minigame-character{
  position:absolute;
  top:48px;
  bottom:13px;
  z-index:2;
  width:clamp(205px,17vw,292px);
  display:flex;
  align-items:flex-end;
  pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
html body .minigame-character-left {
  left:clamp(-16px,1.2vw,22px);
  justify-content:flex-start;
}
html body .minigame-character-right {
  right:clamp(-16px,1.2vw,22px);
  justify-content:flex-end;
}
html body .minigame-character img{
  display:block;
  width:auto;
  max-width:none;
  height:min(600px,calc(100% - 8px));
  object-fit:contain;
}
html body .minigame-character-left img{object-position:left bottom;}
html body .minigame-character-right img{object-position:right bottom;}

html body .minigame-selector-center{
  position:relative;
  z-index:4;
  width:min(860px,calc(100% - 430px));
  margin:0 auto;
  padding:34px 0 30px;
}
html body .minigame-selector-heading{
  min-height:70px;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  pointer-events:none;
}
html body .minigame-selector-heading h2{
  margin:0;
  color:#eadcae;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2vw,34px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.025em;
  text-transform:uppercase;
  text-shadow:0 2px 2px rgba(0,0,0,.7),0 0 18px rgba(214,180,95,.16);
}
html body .minigame-selector-heading p{
  margin:5px 0 0;
  color:rgba(235,231,212,.78);
  font-size:clamp(12px,.92vw,15px);
  letter-spacing:.015em;
}
html body .minigame-heading-vine{
  color:#cfb15e;
  font-family:Georgia,serif;
  font-size:35px;
  opacity:.86;
  transform:rotate(-17deg);
  text-shadow:0 0 12px rgba(222,190,103,.28);
}
html body .minigame-heading-vine.is-right{transform:scaleX(-1) rotate(-17deg);}

html body .minigame-card-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(9px,.9vw,14px);
  width:100%;
  min-width:0;
}
html body .minigame-card{
  --minigame-accent:#d9b76c;
  position:relative;
  flex:0 0 177px;
  width:177px;
  height:555px;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  border-radius:22px 22px 32px 32px;
  background:transparent;
  overflow:visible;
  isolation:isolate;
  appearance:none;
  cursor:pointer;
  transform:translate3d(0,0,0);
  transition:transform .26s cubic-bezier(.2,.8,.22,1),filter .26s ease;
}
html body .minigame-card::before{
  content:"";
  position:absolute;
  inset:22px 12px 31px;
  z-index:0;
  border-radius:18px 18px 35px 35px;
  opacity:0;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--minigame-accent) 30%,transparent),transparent 66%);
  filter:blur(13px);
  transition:opacity .25s ease;
}
html body .minigame-card:hover,
html body .minigame-card:focus-visible{
  transform:translate3d(0,-8px,0) scale(1.018);
  filter:brightness(1.08);
}
html body .minigame-card:hover::before,
html body .minigame-card:focus-visible::before,
html body .minigame-card.is-selected::before{opacity:.92;}
html body .minigame-card.is-selected{
  transform:translate3d(0,-7px,0);
  filter:brightness(1.1) saturate(1.07);
}
html body .minigame-card-surface{
  position:absolute;
  inset:29px 16px 42px;
  z-index:1;
  display:block;
  overflow:hidden;
  border-radius:17px 17px 42px 42px;
  background:
    linear-gradient(180deg,rgba(5,23,16,.70),rgba(2,12,8,.94)),
    radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--minigame-accent) 17%,transparent),transparent 42%);
  box-shadow:
    inset 0 0 0 1px rgba(230,203,133,.13),
    inset 0 0 34px rgba(0,0,0,.62),
    0 12px 24px rgba(0,0,0,.28);
}
html body .minigame-card-surface::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.22;
  background:
    linear-gradient(125deg,transparent 0 35%,rgba(255,255,255,.06) 36%,transparent 37% 100%),
    repeating-linear-gradient(0deg,rgba(237,220,171,.035) 0 1px,transparent 1px 6px);
  pointer-events:none;
}
html body .minigame-card-glow{
  position:absolute;
  left:50%;
  top:42%;
  z-index:0;
  width:115%;
  aspect-ratio:1;
  border-radius:50%;
  opacity:.42;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--minigame-accent) 24%,transparent),transparent 66%);
  filter:blur(4px);
}
html body .minigame-card-title{
  position:absolute;
  left:7px;
  right:7px;
  top:36px;
  z-index:2;
  color:#eee1ba;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.1;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.85),0 0 9px rgba(214,180,95,.14);
}
html body .minigame-card-memory .minigame-card-title{font-size:14.5px;}
html body .minigame-card-subtitle{
  position:absolute;
  left:10px;
  right:10px;
  top:66px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1px;
  color:rgba(236,232,213,.76);
  font-size:12px;
  line-height:1.2;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.82);
}
html body .minigame-card-art{
  position:absolute;
  left:50%;
  top:48%;
  z-index:2;
  display:block;
  width:132px;
  height:220px;
  transform:translate(-50%,-50%);
}
html body .minigame-card-seal{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:3;
  width:57px;
  height:57px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 44% 38%,#40523a 0 25%,#172b1e 48%,#08130d 72%);
  border:1px solid rgba(229,198,112,.34);
  box-shadow:inset 0 0 13px rgba(0,0,0,.6),0 0 14px color-mix(in srgb,var(--minigame-accent) 22%,transparent);
}
html body .minigame-card-seal::before,
html body .minigame-card-seal::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(224,192,105,.25);
  border-radius:50%;
}
html body .minigame-card-seal::after {
  inset:10px;
  border-style:dotted;
  opacity:.65;
}
html body .minigame-card-seal i{
  position:relative;
  z-index:2;
  color:#e7c662;
  font-family:Georgia,serif;
  font-size:23px;
  font-style:normal;
  text-shadow:0 0 9px rgba(240,210,113,.45);
}
html body .minigame-card-selected-label{
  position:absolute;
  left:50%;
  bottom:4px;
  z-index:4;
  color:#f4dda0;
  font-size:8px;
  font-weight:800;
  letter-spacing:.19em;
  opacity:0;
  transform:translateX(-50%);
  transition:opacity .2s ease;
}
html body .minigame-card.is-selected .minigame-card-selected-label{opacity:.85;}
html body .minigame-card-frame{
  position:absolute;
  inset:0;
  z-index:5;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.32));
}

html body .mini-playing-card{
  position:absolute;
  top:28px;
  width:61px;
  height:91px;
  display:block;
  border-radius:6px;
  box-shadow:0 8px 12px rgba(0,0,0,.38);
}
html body .mini-playing-card.is-front{
  left:13px;
  z-index:2;
  color:#151814;
  background:#e9e3d3;
  border:1px solid rgba(255,255,255,.52);
  transform:rotate(-8deg);
}
html body .mini-playing-card.is-front b {
  position:absolute;
  left:7px;
  top:6px;
  font:700 18px Georgia,serif;
}
html body .mini-playing-card.is-front em {
  position:absolute;
  left:7px;
  top:26px;
  font:normal 14px Georgia,serif;
}
html body .mini-playing-card.is-back{
  right:11px;
  z-index:3;
  display:grid;
  place-items:center;
  color:#c5a252;
  border:3px solid #b18b40;
  background:repeating-linear-gradient(45deg,#18251c 0 5px,#263a2b 5px 10px);
  transform:rotate(10deg);
}
html body .mini-playing-card.is-back b{font:24px Georgia,serif;}
html body .mini-chip-stack {
  position:absolute;
  left:25px;
  bottom:27px;
  width:82px;
  height:48px;
  z-index:5;
}
html body .mini-chip-stack i {
  position:absolute;
  width:47px;
  height:18px;
  border:4px dashed #e9dfbd;
  border-radius:50%;
  background:#34523a;
  box-shadow:inset 0 0 0 3px #12251a,0 4px 3px rgba(0,0,0,.35);
}
html body .mini-chip-stack i:nth-child(1) {
  left:0;
  top:18px;
}
html body .mini-chip-stack i:nth-child(2) {
  left:30px;
  top:24px;
  background:#78453c;
}
html body .mini-chip-stack i:nth-child(3) {
  left:42px;
  top:5px;
  background:#826c39;
}
html body .mini-roulette-wheel{
  position:absolute;left:50%;top:28px;width:120px;height:120px;border-radius:50%;transform:translateX(-50%);
  background:repeating-conic-gradient(#9f4a3d 0 11deg,#1b2a1e 11deg 22deg,#c09b4c 22deg 25deg);
  border:7px solid #6d4a24;box-shadow:inset 0 0 0 8px #1a1e18,inset 0 0 0 11px #b48a42,0 12px 14px rgba(0,0,0,.4);
}
html body .mini-roulette-wheel::before {
  content:"";
  position:absolute;
  inset:28px;
  border-radius:50%;
  background:radial-gradient(circle,#c3a25c 0 14%,#6e4d28 15% 26%,#202e23 27% 58%,#a78242 59% 64%,#17251b 65%);
}
html body .mini-roulette-wheel i {
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:7px;
  height:61px;
  background:#b88d47;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px #3e2d19;
}
html body .mini-roulette-wheel b {
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  color:#f0d481;
  font:16px Georgia,serif;
  transform:translate(-50%,-50%);
}
html body .mini-roulette-chips {
  position:absolute;
  left:18px;
  bottom:22px;
  width:96px;
  height:39px;
}
html body .mini-roulette-chips i {
  position:absolute;
  width:42px;
  height:15px;
  border-radius:50%;
  border:3px dashed #e4d7b0;
  background:#733c36;
  box-shadow:inset 0 0 0 2px #2b1714,0 3px 3px rgba(0,0,0,.35);
}
html body .mini-roulette-chips i:nth-child(2) {
  left:29px;
  top:10px;
  background:#304c36;
}
html body .mini-roulette-chips i:nth-child(3) {
  left:53px;
  top:2px;
  background:#866d37;
}
html body .mini-memory-grid {
  position:absolute;
  left:50%;
  top:27px;
  display:grid;
  grid-template-columns:repeat(2,54px);
  grid-template-rows:repeat(2,76px);
  gap:8px;
  transform:translateX(-50%);
}
html body .mini-memory-grid i {
  display:grid;
  place-items:center;
  border-radius:5px;
  border:1px solid #755e35;
  background:repeating-linear-gradient(45deg,#16251b 0 5px,#263629 5px 10px);
  box-shadow:inset 0 0 0 3px #0c160f,0 6px 8px rgba(0,0,0,.3);
  color:#ceb160;
  font:normal 0 Georgia,serif;
}
html body .mini-memory-grid i.is-open {
  background:radial-gradient(circle,#a7ebc0 0 8%,#318b67 10% 24%,#143825 25% 56%,#0a1710 57%);
  font-size:22px;
  color:#e9dc91;
  box-shadow:0 0 15px rgba(100,225,170,.26),inset 0 0 0 2px #a68a46;
}
html body .mini-coin {
  position:absolute;
  left:50%;
  top:52px;
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 38% 32%,#f6e8ac 0 5%,#d7b45d 21%,#8b642e 64%,#543716 82%);
  border:6px double #f0ce73;
  box-shadow:inset 0 0 0 8px rgba(74,45,16,.46),0 0 25px rgba(229,190,91,.28),0 12px 18px rgba(0,0,0,.36);
}
html body .mini-coin::before {
  content:"";
  position:absolute;
  inset:18px;
  border:2px dotted rgba(79,50,19,.72);
  border-radius:50%;
}
html body .mini-coin i {
  position:relative;
  z-index:2;
  color:#62431e;
  font:normal 47px Georgia,serif;
  text-shadow:0 1px #f9e4a2;
}

html body .minigame-active-stage{
  position:relative;
  z-index:3;
  width:min(1380px,calc(100% - 30px));
  margin:30px auto 0;
  padding:38px 26px 26px;
  border:1px solid rgba(190,150,73,.28);
  border-radius:22px;
  background:
    radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--gold) 8%,transparent),transparent 43%),
    linear-gradient(180deg,rgba(18,43,28,.94),rgba(7,25,15,.96));
  box-shadow:inset 0 0 0 1px rgba(240,219,155,.035),inset 0 0 80px rgba(0,0,0,.27),0 24px 54px rgba(0,0,0,.26);
}
html body .minigame-active-stage::before,
html body .minigame-active-stage::after{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  width:1px;
  opacity:.45;
  background:linear-gradient(transparent,#d0aa5e 19%,#d0aa5e 81%,transparent);
}
html body .minigame-active-stage::before{left:12px;}
html body .minigame-active-stage::after{right:12px;}
html body .minigame-stage-bridge{
  position:absolute;
  left:50%;
  top:-20px;
  z-index:4;
  width:min(620px,76%);
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  transform:translateX(-50%);
  color:#e5c36b;
  text-shadow:0 0 10px rgba(225,189,91,.26);
}
html body .minigame-stage-bridge span {
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,#987333);
}
html body .minigame-stage-bridge span:last-child{background:linear-gradient(90deg,#987333,transparent);}
html body .minigame-stage-bridge i {
  font-style:normal;
  font-size:10px;
}
html body .minigame-stage-bridge b {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font:normal 17px Georgia,serif;
  background:#153322;
  border:1px solid rgba(209,170,77,.45);
  box-shadow:0 0 18px rgba(204,166,74,.16);
}
html body .minigame-board{
  min-height:520px;
  padding:24px;
  border:1px solid rgba(216,180,95,.17);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(8,28,18,.62),rgba(4,18,11,.82));
  box-shadow:inset 0 0 48px rgba(0,0,0,.26);
}
html body .minigame-board-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:0 4px 16px;
  border-bottom:1px solid rgba(214,180,95,.15);
}
html body .minigame-kicker {
  display:block;
  margin-bottom:3px;
  color:#bf9b51;
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
}
html body .minigame-board-header h3 {
  margin:0;
  color:#eee2bc;
  font:700 clamp(28px,2.5vw,42px)/1 Georgia,"Times New Roman",serif;
  text-shadow:0 2px 2px rgba(0,0,0,.55);
}
html body .minigame-balance{text-align:right;}
html body .minigame-balance span {
  display:block;
  color:rgba(225,218,193,.55);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}
html body .minigame-balance strong {
  display:block;
  margin-top:5px;
  color:#e8cd82;
  font:700 16px Georgia,serif;
}
html body .minigame-control-strip{
  min-height:68px;
  margin-top:18px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(214,180,95,.16);
  border-radius:12px;
  background:rgba(2,14,8,.54);
}
html body .minigame-bet-preview span {
  display:block;
  color:rgba(226,218,192,.55);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}
html body .minigame-bet-preview strong {
  display:block;
  margin-top:3px;
  color:#e7d29a;
  font:700 15px Georgia,serif;
}
html body .minigame-action-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
html body .minigame-action-row button,
html body .coin-choice-preview{
  min-width:98px;
  min-height:38px;
  padding:8px 15px;
  border:1px solid rgba(190,146,67,.38);
  border-radius:7px;
  color:#dfd4b5;
  background:linear-gradient(180deg,#294735,#152c20);
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 4px 7px rgba(0,0,0,.24);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-shadow:0 1px 1px rgba(0,0,0,.65);
}
html body .minigame-action-row button.is-primary {
  color:#192016;
  background:linear-gradient(180deg,#e9d496,#b89448);
  border-color:#eadb9a;
  text-shadow:none;
}
html body .minigame-preview-notice{
  margin:14px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  color:#bd9b53;
  text-align:center;
}
html body .minigame-preview-notice > span {
  font-size:10px;
  opacity:.72;
}
html body .minigame-preview-notice p{margin:0;}
html body .minigame-preview-notice strong {
  display:block;
  color:#d4b66d;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
html body .minigame-preview-notice small {
  display:block;
  margin-top:3px;
  color:rgba(219,215,198,.48);
  font-size:10px;
  line-height:1.35;
}

html body .blackjack-table-preview{
  position:relative;
  min-height:300px;
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 220px 1fr;
  align-items:center;
  border:10px solid #3c2816;
  border-radius:48% 48% 22% 22% / 42% 42% 18% 18%;
  background:radial-gradient(ellipse at 50% 40%,#245337 0,#173d28 48%,#0c2a1b 100%);
  box-shadow:inset 0 0 0 2px #94713a,inset 0 0 0 5px #1a120a,inset 0 0 45px rgba(0,0,0,.38),0 14px 24px rgba(0,0,0,.28);
}
html body .blackjack-table-preview::after {
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(221,191,112,.27);
  border-radius:inherit;
  pointer-events:none;
}
html body .blackjack-seat {
  position:relative;
  z-index:2;
  text-align:center;
}
html body .blackjack-seat > span {
  display:block;
  margin-bottom:11px;
  color:#c8b679;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
}
html body .blackjack-hand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
html body .preview-card {
  width:59px;
  height:84px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#172018;
  background:#ece7d8;
  border:1px solid #fff7dc;
  box-shadow:0 8px 12px rgba(0,0,0,.32);
  font:700 19px Georgia,serif;
  font-style:normal;
  transform:rotate(-4deg);
}
html body .preview-card + .preview-card{transform:rotate(5deg);}
html body .preview-card.is-red{color:#8e3835;}
html body .player-seat > strong {
  display:block;
  margin-top:9px;
  color:#f0d887;
  font:700 19px Georgia,serif;
  text-shadow:0 0 10px rgba(237,209,125,.25);
}
html body .blackjack-table-mark {
  position:relative;
  z-index:2;
  text-align:center;
  color:rgba(225,207,146,.48);
}
html body .blackjack-table-mark b {
  display:block;
  font:700 18px Georgia,serif;
  letter-spacing:.15em;
}
html body .blackjack-table-mark span {
  display:block;
  margin-top:3px;
  font:700 25px Georgia,serif;
  letter-spacing:.08em;
}
html body .blackjack-table-mark small {
  display:block;
  margin-top:7px;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

html body .roulette-stage-preview {
  min-height:300px;
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(260px,390px) 1fr;
  gap:28px;
  align-items:center;
  padding:16px 24px;
  border-radius:16px;
  background:radial-gradient(circle at 19% 50%,rgba(174,95,69,.12),transparent 35%),rgba(4,20,12,.42);
}
html body .roulette-wheel-preview {
  position:relative;
  width:min(278px,100%);
  aspect-ratio:1;
  margin:auto;
  border-radius:50%;
  background:repeating-conic-gradient(#923f36 0 9deg,#17251b 9deg 18deg,#b18d45 18deg 20deg);
  border:12px solid #67421f;
  box-shadow:inset 0 0 0 8px #1b1a11,inset 0 0 0 11px #bd994d,0 20px 28px rgba(0,0,0,.35);
}
html body .roulette-pocket-ring {
  position:absolute;
  inset:34px;
  border-radius:50%;
  border:5px double #a77d3b;
  background:radial-gradient(circle,#13261a 0 48%,#6c4a26 49% 55%,#18251b 56%);
}
html body .roulette-wheel-core {
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:translate(-50%,-50%);
  color:#f0d47d;
  background:radial-gradient(circle,#b39147,#51341a 70%);
  border:3px solid #d3ad5c;
  font:25px Georgia,serif;
}
html body .roulette-wheel-core::before,.roulette-wheel-core::after {
  content:"";
  position:absolute;
  width:9px;
  height:116px;
  border-radius:5px;
  background:linear-gradient(#d1ae60,#60421e,#d1ae60);
  transform:rotate(45deg);
  z-index:-1;
}
html body .roulette-wheel-core::after{transform:rotate(-45deg);}
html body .roulette-ball-preview {
  position:absolute;
  right:31px;
  top:54px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#f7f3dc;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
html body .roulette-bet-board {
  display:grid;
  grid-template-columns:repeat(6,minmax(35px,1fr));
  gap:4px;
  align-self:stretch;
  padding:14px;
  border:1px solid rgba(211,175,91,.27);
  border-radius:10px;
  background:#0d3020;
  box-shadow:inset 0 0 35px rgba(0,0,0,.3);
}
html body .roulette-bet-board span,.roulette-bet-board b {
  display:grid;
  place-items:center;
  min-height:34px;
  border:1px solid rgba(232,220,183,.22);
  border-radius:3px;
  color:#eee5c9;
  font:700 11px Georgia,serif;
  text-shadow:0 1px 1px #000;
}
html body .roulette-bet-board span.is-red{background:#7f3a32;}
html body .roulette-bet-board span.is-dark{background:#152019;}
html body .roulette-bet-board span.is-gold{background:#856b34;}
html body .roulette-bet-board b {
  grid-column:span 3;
  color:#dec77e;
  background:#173e29;
  font-size:10px;
  letter-spacing:.08em;
}

html body .memory-board-preview {
  width:min(720px,100%);
  margin:22px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  padding:18px;
  border:1px solid rgba(211,174,89,.19);
  border-radius:14px;
  background:rgba(4,20,12,.48);
}
html body .memory-tile-preview {
  aspect-ratio:.73;
  display:grid;
  place-items:center;
  border:2px solid #6d542c;
  border-radius:8px;
  background:repeating-linear-gradient(45deg,#14281b 0 7px,#203b29 7px 14px);
  box-shadow:inset 0 0 0 3px #07150d,inset 0 0 0 4px rgba(221,188,101,.21),0 8px 12px rgba(0,0,0,.22);
}
html body .memory-tile-preview span {
  color:#9f7f3d;
  font:28px Georgia,serif;
  text-shadow:0 1px 1px rgba(0,0,0,.7);
}
html body .memory-tile-preview.is-revealed {
  background:radial-gradient(circle,#7bd0a2 0 5%,#31835d 12% 27%,#183e28 28% 65%,#0c1b12 66%);
  box-shadow:0 0 18px rgba(102,220,160,.19),inset 0 0 0 3px #0b2115,inset 0 0 0 5px #9d843e;
}
html body .memory-tile-preview.is-revealed span {
  color:#f0db86;
  text-shadow:0 0 10px rgba(245,217,126,.4);
}
html body .memory-status-preview {
  width:min(720px,100%);
  margin:12px auto 0;
  display:flex;
  justify-content:center;
  gap:34px;
  color:rgba(220,214,194,.52);
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
html body .memory-status-preview b {
  margin-left:5px;
  color:#d9be75;
}

html body .coinflip-stage-preview {
  min-height:310px;
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr minmax(210px,320px) 1fr;
  gap:22px;
  align-items:center;
  padding:24px;
  border-radius:16px;
  background:radial-gradient(circle at 50% 50%,rgba(221,183,87,.10),transparent 38%),rgba(4,19,12,.45);
}
html body .coin-choice-preview {
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(44,73,54,.8),rgba(17,42,28,.88));
}
html body .coin-choice-preview:hover {
  border-color:rgba(230,198,108,.66);
  filter:brightness(1.08);
}
html body .coin-choice-symbol {
  color:#dfc26d;
  font:38px Georgia,serif;
  text-shadow:0 0 14px rgba(224,193,104,.3);
}
html body .coin-choice-preview strong {
  margin-top:6px;
  color:#ead9a8;
  font:700 17px Georgia,serif;
  letter-spacing:.08em;
}
html body .coin-choice-preview small {
  margin-top:6px;
  color:rgba(229,223,203,.45);
  font-size:9px;
  letter-spacing:.04em;
}
html body .large-coin-preview {
  position:relative;
  width:min(245px,100%);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 37% 30%,#fff0b3 0 4%,#dfbf69 19%,#9c7436 57%,#5f3d1b 79%,#36210d 100%);
  border:10px double #e9c86f;
  box-shadow:inset 0 0 0 12px rgba(94,57,22,.38),inset 0 0 35px rgba(65,36,11,.45),0 0 35px rgba(222,182,82,.17),0 20px 28px rgba(0,0,0,.3);
}
html body .large-coin-preview::before {
  content:"";
  position:absolute;
  inset:27px;
  border:3px dotted rgba(91,58,24,.62);
  border-radius:50%;
}
html body .large-coin-preview span {
  position:relative;
  z-index:2;
  color:#68471f;
  font:72px Georgia,serif;
  text-shadow:0 2px #f2d98f;
}
html body .large-coin-preview i {
  position:absolute;
  inset:49px;
  border:1px solid rgba(79,48,18,.45);
  border-radius:50%;
}

@media(max-width:1580px){
  html body .minigame-selector-center{width:min(780px,calc(100% - 390px));}
  html body .minigame-card {
    flex-basis:160px;
    width:160px;
    height:502px;
  }
  html body .minigame-card-title {
    font-size:15px;
    top:33px;
  }
  html body .minigame-card-memory .minigame-card-title{font-size:13px;}
  html body .minigame-card-subtitle {
    top:60px;
    font-size:11px;
  }
  html body .minigame-card-art{transform:translate(-50%,-50%) scale(.9);}
  html body .minigame-selector-hero{min-height:620px;}
}
@media(min-width:821px) and (max-width:1320px){
  html body .topbar > .nav-cluster{
    transform:translate(-50%,-50%) scale(.84)!important;
    transform-origin:center!important;
  }
  html body .minigame-selector-center{width:min(690px,calc(100% - 330px));}
  html body .minigame-card {
    flex-basis:145px;
    width:145px;
    height:455px;
  }
  html body .minigame-card-title {
    font-size:13.5px;
    top:29px;
  }
  html body .minigame-card-memory .minigame-card-title{font-size:11.5px;}
  html body .minigame-card-subtitle {
    top:53px;
    font-size:9.7px;
  }
  html body .minigame-card-art {
    top:47%;
    transform:translate(-50%,-50%) scale(.78);
  }
  html body .minigame-card-seal {
    bottom:18px;
    transform:translateX(-50%) scale(.83);
  }
  html body .minigame-card-surface{inset:24px 14px 35px;}
  html body .minigame-selector-hero{min-height:570px;}
  html body .minigame-character {
    width:190px;
    opacity:.92;
  }
  html body .blackjack-table-preview{grid-template-columns:1fr 150px 1fr;}
}
@media(max-width:980px){
  html body .main-layout.main-layout-minigame {
    padding-left:12px!important;
    padding-right:12px!important;
  }
  html body .minigame-selector-hero {
    min-height:590px;
    margin-top:-12px;
    overflow:hidden;
  }
  html body .minigame-character {
    width:168px;
    opacity:.72;
  }
  html body .minigame-character-left{left:-32px;}
  html body .minigame-character-right{right:-32px;}
  html body .minigame-selector-center {
    width:calc(100% - 190px);
    padding-top:28px;
  }
  html body .minigame-card-row {
    justify-content:flex-start;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:8px 14px 16px;
    scrollbar-width:thin;
  }
  html body .minigame-card {
    flex:0 0 145px;
    width:145px;
    height:455px;
    scroll-snap-align:center;
  }
  html body .roulette-stage-preview{grid-template-columns:1fr;}
  html body .roulette-wheel-preview{width:230px;}
  html body .memory-board-preview{grid-template-columns:repeat(4,1fr);}
  html body .coinflip-stage-preview{grid-template-columns:1fr 220px 1fr;}
}
@media(max-width:820px){

  html body .topbar .nav-tabs {
    max-width:min(70vw,510px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }
  html body .topbar .nav-tabs::-webkit-scrollbar{display:none!important;}
  html body .topbar .nav-tabs::before{display:none!important;}
  html body .topbar .nav-tabs .nav-tab.active {
    background:linear-gradient(180deg,#8f5b2d,#4b2a13)!important;
    border:1px solid rgba(120,72,31,.92)!important;
    box-shadow:inset 0 1px rgba(255,226,168,.13)!important;
  }
  html body .minigame-selector-hero{min-height:590px;}
  html body .minigame-character {
    width:150px;
    opacity:.54;
  }
  html body .minigame-selector-center{width:calc(100% - 84px);}
  html body .minigame-selector-heading{margin-bottom:4px;}
  html body .minigame-card-row {
    padding-left:24px;
    padding-right:24px;
  }
  html body .minigame-active-stage {
    width:calc(100% - 8px);
    padding:32px 10px 14px;
  }
  html body .minigame-board{padding:15px;}
  html body .minigame-board-header {
    flex-direction:column;
    align-items:flex-start;
  }
  html body .minigame-balance{text-align:left;}
  html body .blackjack-table-preview {
    grid-template-columns:1fr 100px 1fr;
    min-height:270px;
    border-width:7px;
  }
  html body .blackjack-table-mark span{font-size:17px;}
  html body .preview-card {
    width:48px;
    height:70px;
    font-size:15px;
  }
  html body .memory-status-preview {
    gap:12px;
    flex-wrap:wrap;
  }
  html body .coinflip-stage-preview {
    grid-template-columns:1fr 1fr;
    padding:14px;
  }
  html body .large-coin-preview {
    grid-column:1/-1;
    grid-row:1;
    width:190px;
  }
  html body .coin-choice-preview {
    grid-row:2;
    min-height:115px;
  }
}
@media(max-width:560px){
  html body .minigame-selector-hero{min-height:545px;}
  html body .minigame-character{display:none;}
  html body .minigame-selector-center {
    width:100%;
    padding-top:22px;
  }
  html body .minigame-selector-heading h2{font-size:23px;}
  html body .minigame-heading-vine{font-size:25px;}
  html body .minigame-card {
    flex-basis:137px;
    width:137px;
    height:430px;
  }
  html body .minigame-card-title{font-size:12.7px;}
  html body .minigame-card-memory .minigame-card-title{font-size:10.8px;}
  html body .minigame-card-subtitle{font-size:9.2px;}
  html body .minigame-card-art{transform:translate(-50%,-50%) scale(.72);}
  html body .blackjack-table-preview {
    grid-template-columns:1fr 1fr;
    padding:12px 4px;
  }
  html body .blackjack-table-mark{display:none;}
  html body .roulette-bet-board{grid-template-columns:repeat(3,1fr);}
  html body .roulette-bet-board b{grid-column:span 3;}
  html body .memory-board-preview {
    grid-template-columns:repeat(3,1fr);
    padding:10px;
    gap:7px;
  }
  html body .minigame-control-strip {
    align-items:flex-start;
    flex-direction:column;
  }
  html body .minigame-action-row {
    width:100%;
    justify-content:flex-start;
  }
  html body .minigame-action-row button {
    flex:1;
    min-width:78px;
  }
  html body .coinflip-stage-preview{gap:9px;}
  html body .coin-choice-preview{padding:7px;}
}
@media(prefers-reduced-motion:reduce){
  html body .minigame-card{transition:none!important;}
}

@media (min-width: 821px) {
  html body .topbar .nav-tabs {
    --minigame-nav-width: 126px;
    display: grid !important;
    grid-template-columns: repeat(4, var(--minigame-nav-width)) !important;
    grid-auto-flow: column !important;
    gap: 8px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  html body .topbar .nav-tabs .nav-tab {
    box-sizing: border-box !important;
    width: var(--minigame-nav-width) !important;
    min-width: var(--minigame-nav-width) !important;
    max-width: var(--minigame-nav-width) !important;
  }

  html body .topbar .nav-tabs .nav-tab-minigame {
    order: 1 !important;
    grid-column: 1 !important;
  }
  html body .topbar .nav-tabs .nav-tab-shop {
    order: 2 !important;
    grid-column: 2 !important;
  }
  html body .topbar .nav-tabs .nav-tab-open {
    order: 3 !important;
    grid-column: 3 !important;
  }
  html body .topbar .nav-tabs .nav-tab-upgrade {
    order: 4 !important;
    grid-column: 4 !important;
  }

  html body .topbar .nav-tabs::before {
    left: 5px !important;
    top: 5px !important;
    bottom: 5px !important;
    width: var(--minigame-nav-width) !important;
    transform: translate3d(0, 0, 0) !important;
  }
  html body .topbar .nav-tabs.nav-minigame::before { transform: translate3d(0, 0, 0) !important; }
  html body .topbar .nav-tabs.nav-shop::before { transform: translate3d(134px, 0, 0) !important; }
  html body .topbar .nav-tabs.nav-open::before { transform: translate3d(268px, 0, 0) !important; }
  html body .topbar .nav-tabs.nav-upgrade::before { transform: translate3d(402px, 0, 0) !important; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  html body .topbar .nav-tabs { --minigame-nav-width: 112px; }
  html body .topbar .nav-tabs.nav-shop::before { transform: translate3d(120px, 0, 0) !important; }
  html body .topbar .nav-tabs.nav-open::before { transform: translate3d(240px, 0, 0) !important; }
  html body .topbar .nav-tabs.nav-upgrade::before { transform: translate3d(360px, 0, 0) !important; }
}

@media (max-width: 820px) {
  html body .topbar .nav-tabs .nav-tab-minigame { order: 1 !important; }
  html body .topbar .nav-tabs .nav-tab-shop { order: 2 !important; }
  html body .topbar .nav-tabs .nav-tab-open { order: 3 !important; }
  html body .topbar .nav-tabs .nav-tab-upgrade { order: 4 !important; }
}

html body .main-layout.main-layout-minigame {
  grid-template-columns: minmax(0, 1fr) 315px !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .minigame-card-surface {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .minigame-card-surface::before,
html body .minigame-card-glow {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body .minigame-heading-branch {
  flex: 0 0 58px;
  width: 58px;
  height: 24px;
  display: inline-block;
  color: #d4b35e;
  opacity: .96;
  filter: drop-shadow(0 0 6px rgba(225, 190, 101, .24));
}
html body .minigame-heading-branch.is-mirrored { transform: scaleX(-1); }
html body .minigame-heading-branch svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html body .minigame-heading-branch .branch-stem {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body .minigame-heading-branch .branch-stem-fine {
  stroke-width: 1.05;
  opacity: .86;
}
html body .minigame-heading-branch .branch-leaf {
  fill: currentColor;
  stroke: rgba(255, 236, 171, .45);
  stroke-width: .45;
}

html body .history-item.history-minigame .history-minigame-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(214, 180, 95, .34);
  background: radial-gradient(circle at 42% 35%, rgba(77, 104, 75, .95), rgba(20, 42, 27, .96) 58%, rgba(8, 21, 13, .98));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .42), 0 0 12px rgba(214, 180, 95, .08);
}
html body .history-item.history-minigame .history-minigame-icon span {
  color: #e5c872;
  font: 700 20px/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 0 8px rgba(230, 198, 107, .32);
}
html body .history-item.history-minigame .history-minigame-icon.is-win {
  border-color: rgba(117, 205, 143, .42);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .42), 0 0 13px rgba(93, 191, 123, .10);
}
html body .history-item.history-minigame .history-minigame-icon.is-loss {
  border-color: rgba(218, 118, 103, .38);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .42), 0 0 13px rgba(207, 91, 78, .09);
}
html body .history-minigame-win-title { color: #9ed3a8 !important; }
html body .history-minigame-loss-title { color: #e6a09a !important; }
html body .history-minigame-amount {
  margin-top: 3px !important;
  font-weight: 900 !important;
  letter-spacing: .015em;
}
html body .history-minigame-amount.is-gain { color: #a5d7ae !important; }
html body .history-minigame-amount.is-loss { color: #e5a09a !important; }

@media (min-width: 1581px) {
  html body .minigame-selector-center { width: min(860px, calc(100% - 430px)); }
  html body .minigame-card {
    flex-basis: 177px;
    width: 177px;
    height: 555px;
  }
}

@media (min-width: 1181px) and (max-width: 1580px) {
  html body .minigame-selector-center { width: min(760px, calc(100% - 330px)); }
  html body .minigame-card {
    flex-basis: 156px;
    width: 156px;
    height: 489px;
  }
  html body .minigame-character { width: 190px; }
  html body .minigame-card-title {
    top: 32px;
    font-size: 14.5px;
  }
  html body .minigame-card-memory .minigame-card-title { font-size: 12.4px; }
  html body .minigame-card-subtitle {
    top: 58px;
    font-size: 10.6px;
  }
  html body .minigame-card-art { transform: translate(-50%, -50%) scale(.84); }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body .minigame-selector-center {
    box-sizing: border-box;
    width: 100%;
    padding-left: 82px;
    padding-right: 82px;
  }
  html body .minigame-card-row { gap: 7px; }
  html body .minigame-card {
    flex-basis: 120px;
    width: 120px;
    height: 376px;
  }
  html body .minigame-character {
    width: 132px;
    opacity: .72;
  }
  html body .minigame-character-left { left: -16px; }
  html body .minigame-character-right { right: -16px; }
  html body .minigame-card-title {
    top: 24px;
    font-size: 11px;
  }
  html body .minigame-card-memory .minigame-card-title { font-size: 9.4px; }
  html body .minigame-card-subtitle {
    top: 45px;
    font-size: 8.4px;
  }
  html body .minigame-card-art {
    top: 47%;
    transform: translate(-50%, -50%) scale(.62);
  }
  html body .minigame-card-seal {
    bottom: 14px;
    transform: translateX(-50%) scale(.72);
  }
  html body .minigame-selector-hero { min-height: 505px; }
}

@media (max-width: 980px) {
  html body .minigame-selector-hero { margin-top: -12px; }
  html body .minigame-selector-center { width: calc(100% - 170px); }
}

@media (max-width: 680px) {
  html body .minigame-heading-branch {
    flex-basis: 42px;
    width: 42px;
    height: 18px;
  }
  html body .minigame-selector-heading { gap: 8px; }
}

html body .minigame-card-coinflip::before {
  content: none !important;
  display: none !important;
}
html body .minigame-card-coinflip .minigame-card-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .minigame-card-coinflip .minigame-card-title,
html body .minigame-card-coinflip .minigame-card-subtitle,
html body .minigame-card-coinflip .minigame-card-selected-label {
  z-index: 3 !important;
}
html body .minigame-card-coinflip .minigame-card-subtitle {
  top: 84px !important;
  left: 14px !important;
  right: 14px !important;
}
html body .minigame-card.is-selected .minigame-card-frame {
  filter:
    drop-shadow(0 0 2px rgba(255, 238, 170, .98))
    drop-shadow(0 0 7px rgba(242, 205, 99, .82))
    drop-shadow(0 0 16px rgba(219, 168, 52, .58))
    drop-shadow(0 10px 9px rgba(0, 0, 0, .34)) !important;
}

html body .minigame-empty-stage {
  width: min(1180px, calc(100% - 30px));
  min-height: 190px;
  margin: 24px auto 0;
  display: grid;
  place-items: center;
  text-align: center;
}
html body .minigame-empty-stage p {
  margin: 0;
  color: rgba(236, 230, 208, .82);
  font: 700 clamp(15px, 1.08vw, 18px)/1.35 Georgia, "Times New Roman", serif;
  letter-spacing: .015em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .66), 0 0 14px rgba(214, 180, 95, .08);
}

html body .minigame-active-stage.minigame-active-coinflip {
  width: min(1220px, calc(100% - 18px)) !important;
  margin-top: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .minigame-active-stage.minigame-active-coinflip::before,
html body .minigame-active-stage.minigame-active-coinflip::after,
html body .minigame-active-stage.minigame-active-coinflip > .minigame-stage-bridge {
  content: none !important;
  display: none !important;
}

html body .coinflip-game-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  isolation: isolate;
  perspective: 1400px;
}
html body .coinflip-game-panel .coinflip-panel-border {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .28));
}
html body .coinflip-game-panel .coinflip-panel-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: none;
}

html body .coinflip-game-panel .coinflip-panel-heading {
  position: absolute;
  left: 11.8%;
  top: 12.4%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
html body .coinflip-game-panel .coinflip-panel-heading > span {
  color: #e7cc82;
  font: 700 clamp(22px, 2.45vw, 42px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .055em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .68), 0 0 16px rgba(224, 185, 83, .14);
}
html body .coinflip-game-panel .coinflip-panel-heading > small {
  margin-top: clamp(5px, .65vw, 10px);
  color: rgba(231, 219, 180, .78);
  font: 600 clamp(9px, .92vw, 14px)/1.25 Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
}
html body .coinflip-game-panel .coinflip-panel-balance {
  position: absolute;
  right: 12.4%;
  top: 12.2%;
  z-index: 5;
  min-width: 24%;
  text-align: center;
  pointer-events: none;
}
html body .coinflip-game-panel .coinflip-panel-balance > span {
  display: block;
  color: rgba(225, 209, 158, .78);
  font-size: clamp(7px, .7vw, 11px);
  font-weight: 850;
  letter-spacing: .12em;
}
html body .coinflip-game-panel .coinflip-panel-balance > strong {
  display: block;
  margin-top: clamp(3px, .45vw, 7px);
  color: #e8ca72;
  font: 700 clamp(14px, 1.42vw, 24px)/1.1 Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .66);
}

html body .coinflip-game-panel .coinflip-choice-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
html body .coinflip-game-panel .coinflip-choice-button {
  position: absolute !important;
  top: 36.5%;
  width: 23.5% !important;
  height: 19.5% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  isolation: isolate;
  appearance: none;
  pointer-events: auto;
  transition: transform .2s ease, filter .2s ease;
}
html body .coinflip-game-panel .coinflip-choice-button.is-heads { left: 11.1%; }
html body .coinflip-game-panel .coinflip-choice-button.is-tails { right: 11.1%; }
html body .coinflip-game-panel .coinflip-choice-button:hover,
html body .coinflip-game-panel .coinflip-choice-button:focus-visible {
  transform: translateY(-2px) scale(1.012);
  filter: brightness(1.06);
  outline: 0;
}
html body .coinflip-game-panel .coinflip-choice-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .26));
}
html body .coinflip-game-panel .coinflip-choice-frame.is-mirrored { transform: scaleX(-1); }
html body .coinflip-game-panel .coinflip-choice-button > span {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  color: #e9ddba !important;
  font: 700 clamp(12px, 1.3vw, 22px)/1 Georgia, "Times New Roman", serif !important;
  letter-spacing: .045em !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .72) !important;
}
html body .coinflip-game-panel .coinflip-choice-button.is-selected .coinflip-choice-frame {
  filter:
    drop-shadow(0 0 3px rgba(255, 239, 175, .92))
    drop-shadow(0 0 10px rgba(235, 199, 95, .64))
    drop-shadow(0 8px 12px rgba(0, 0, 0, .26));
}
html body .coinflip-game-panel .coinflip-choice-button.is-selected > span { color: #f4dda0 !important; }

html body .coinflip-game-panel .coinflip-coin-stage {
  position: absolute !important;
  left: 50%;
  top: 25.5%;
  z-index: 4;
  width: 31%;
  aspect-ratio: 1;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: translateX(-50%);
  perspective: 1200px;
  pointer-events: none;
}
html body .coinflip-game-panel .coinflip-coin-motion {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
html body .coinflip-game-panel .coinflip-coin-rotor {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  will-change: transform;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .32));
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor:not(.is-spinning) {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor:not(.is-spinning) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
html body .coinflip-game-panel .coinflip-coin-face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  object-fit: contain !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}
html body .coinflip-game-panel .coinflip-coin-face::before,
html body .coinflip-game-panel .coinflip-coin-face::after {
  content: none !important;
  display: none !important;
}
html body .coinflip-game-panel .coinflip-coin-face-heads { transform: rotateY(0deg) translateZ(1px); }
html body .coinflip-game-panel .coinflip-coin-face-tails { transform: rotateY(180deg) translateZ(1px); }

@keyframes bryerCoinJumpV4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  16%  { transform: translate3d(-2%, -14%, 35px) scale(1.025); }
  34%  { transform: translate3d(4%, -52%, 85px) scale(1.075); }
  48%  { transform: translate3d(-3%, -66%, 110px) scale(1.09); }
  62%  { transform: translate3d(2%, -37%, 60px) scale(1.05); }
  74%  { transform: translate3d(-1%, -9%, 22px) scale(1.015); }
  80%  { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes bryerCoinRotorHeadsV4 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  15%  { transform: rotateX(410deg) rotateY(570deg) rotateZ(132deg); }
  31%  { transform: rotateX(835deg) rotateY(1130deg) rotateZ(-214deg); }
  48%  { transform: rotateX(1280deg) rotateY(1640deg) rotateZ(168deg); }
  64%  { transform: rotateX(1645deg) rotateY(1935deg) rotateZ(-92deg); }
  78%  { transform: rotateX(1870deg) rotateY(2075deg) rotateZ(42deg); }
  88%  { transform: rotateX(2020deg) rotateY(2132deg) rotateZ(-16deg); }
  95%  { transform: rotateX(2110deg) rotateY(2152deg) rotateZ(5deg); }
  100% { transform: rotateX(2160deg) rotateY(2160deg) rotateZ(0deg); }
}
@keyframes bryerCoinRotorTailsV4 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  15%  { transform: rotateX(410deg) rotateY(610deg) rotateZ(132deg); }
  31%  { transform: rotateX(835deg) rotateY(1210deg) rotateZ(-214deg); }
  48%  { transform: rotateX(1280deg) rotateY(1750deg) rotateZ(168deg); }
  64%  { transform: rotateX(1645deg) rotateY(2050deg) rotateZ(-92deg); }
  78%  { transform: rotateX(1870deg) rotateY(2210deg) rotateZ(42deg); }
  88%  { transform: rotateX(2020deg) rotateY(2290deg) rotateZ(-16deg); }
  95%  { transform: rotateX(2110deg) rotateY(2328deg) rotateZ(5deg); }
  100% { transform: rotateX(2160deg) rotateY(2340deg) rotateZ(0deg); }
}
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping {
  animation: bryerCoinJumpV4 5.6s cubic-bezier(.18, .82, .16, 1) both;
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorHeadsV4 5.6s cubic-bezier(.10, .78, .12, 1) both;
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorTailsV4 5.6s cubic-bezier(.10, .78, .12, 1) both;
}

html body .coinflip-game-panel .coinflip-result-heading {
  position: absolute;
  left: 50%;
  top: 20.2%;
  z-index: 7;
  min-height: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
html body .coinflip-game-panel .coinflip-result-heading strong {
  color: #efd995;
  font: 700 clamp(17px, 1.8vw, 30px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .72), 0 0 14px rgba(231, 196, 94, .20);
}
html body .coinflip-game-panel .coinflip-result-heading span {
  margin-top: clamp(3px, .4vw, 6px);
  font-size: clamp(9px, .9vw, 15px);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72);
}
html body .coinflip-game-panel .coinflip-result-heading span.is-win { color: #a8d9ad; }
html body .coinflip-game-panel .coinflip-result-heading span.is-loss { color: #e6a39b; }

html body .coinflip-game-panel .coinflip-controls {
  position: absolute !important;
  left: 12.4%;
  right: 12.4%;
  bottom: 11.6%;
  z-index: 6;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5% !important;
  pointer-events: auto;
}
html body .coinflip-game-panel .coinflip-bet-control {
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(5px, .7vw, 10px);
}
html body .coinflip-game-panel .coinflip-bet-label {
  flex: 0 0 auto;
  margin-right: clamp(2px, .5vw, 8px);
  color: #dec47e;
  font: 700 clamp(10px, 1vw, 17px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .08em;
}
html body .coinflip-game-panel .coinflip-bet-step {
  flex: 0 0 clamp(30px, 3.5vw, 52px);
  width: clamp(30px, 3.5vw, 52px);
  height: clamp(30px, 3.5vw, 52px);
  padding: 0;
  border: 1px solid rgba(211, 177, 89, .32);
  border-radius: 5px;
  color: #dfc574;
  background: rgba(9, 28, 18, .88);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .28);
  font: 700 clamp(16px, 1.5vw, 24px)/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
}
html body .coinflip-game-panel .coinflip-bet-step:disabled {
  opacity: .5;
  cursor: default;
}
html body .coinflip-game-panel .coinflip-bet-field {
  flex: 0 1 clamp(130px, 17vw, 245px) !important;
  min-width: 0 !important;
  height: clamp(34px, 4vw, 58px);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid rgba(211, 177, 89, .28);
  border-radius: 6px;
  background: rgba(7, 24, 15, .88);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .28);
  overflow: hidden;
}
html body .coinflip-game-panel .coinflip-bet-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  padding: 0 clamp(7px, .8vw, 12px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: #e8d49a !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 clamp(11px, 1.2vw, 19px)/1 Georgia, "Times New Roman", serif !important;
  text-align: right;
}
html body .coinflip-game-panel .coinflip-bet-field > span {
  flex: 0 0 auto;
  padding-right: clamp(8px, .9vw, 14px);
  color: rgba(232, 217, 175, .82) !important;
  font: 700 clamp(9px, .9vw, 14px)/1 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0 !important;
}
html body .coinflip-game-panel .coinflip-flip-button {
  position: relative;
  flex: 0 0 31%;
  width: 31%;
  height: clamp(52px, 6.2vw, 88px);
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  isolation: isolate;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
html body .coinflip-game-panel .coinflip-flip-button:hover:not(:disabled),
html body .coinflip-game-panel .coinflip-flip-button:focus-visible:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.06);
  outline: 0;
}
html body .coinflip-game-panel .coinflip-flip-button:disabled {
  cursor: default;
  opacity: .58;
}
html body .coinflip-game-panel .coinflip-flip-button > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .24));
}
html body .coinflip-game-panel .coinflip-flip-button > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #efe1b6;
  font: 700 clamp(13px, 1.55vw, 25px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .03em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .72);
}
html body .coinflip-game-panel .coinflip-preview-footnote {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 5.1%;
  z-index: 5;
  margin: 0;
  color: rgba(222, 211, 178, .54);
  font-size: clamp(6px, .62vw, 10px);
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

html body .history-item.history-minigame,
html body .history-minigame-gil-icon,
html body .history-minigame-glyph {
  all: unset;
}

@media (max-width: 1180px) {
  html body .minigame-card-coinflip .minigame-card-subtitle { top: 66px !important; }
  html body .coinflip-game-panel .coinflip-choice-button { top: 36%; }
  html body .coinflip-game-panel .coinflip-controls {
    left: 10%;
    right: 10%;
    bottom: 10.6%;
  }
  html body .coinflip-game-panel .coinflip-preview-footnote { bottom: 4.3%; }
}

@media (max-width: 820px) {
  html body .minigame-empty-stage { min-height: 140px; }
  html body .coinflip-game-panel .coinflip-panel-heading {
    left: 8%;
    top: 10%;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    right: 8%;
    top: 10%;
  }
  html body .coinflip-game-panel .coinflip-choice-button {
    width: 24% !important;
    height: 20% !important;
    top: 35%;
  }
  html body .coinflip-game-panel .coinflip-choice-button.is-heads { left: 7%; }
  html body .coinflip-game-panel .coinflip-choice-button.is-tails { right: 7%; }
  html body .coinflip-game-panel .coinflip-coin-stage {
    width: 34%;
    top: 24%;
  }
  html body .coinflip-game-panel .coinflip-controls {
    left: 7%;
    right: 7%;
    gap: 3% !important;
  }
  html body .coinflip-game-panel .coinflip-bet-control { gap: 4px; }
  html body .coinflip-game-panel .coinflip-bet-label { margin-right: 2px; }
  html body .coinflip-game-panel .coinflip-preview-footnote {
    left: 16%;
    right: 16%;
  }
}

@media (max-width: 560px) {
  html body .coinflip-game-panel .coinflip-panel-heading > small { display: none; }
  html body .coinflip-game-panel .coinflip-panel-balance > span { display: none; }
  html body .coinflip-game-panel .coinflip-bet-label { display: none; }
  html body .coinflip-game-panel .coinflip-bet-step {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
  html body .coinflip-game-panel .coinflip-bet-field { height: 28px; }
  html body .coinflip-game-panel .coinflip-flip-button { height: 38px; }
  html body .coinflip-game-panel .coinflip-preview-footnote { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body .coinflip-game-panel .coinflip-coin-motion.is-flipping,
  html body .coinflip-game-panel .coinflip-coin-rotor.is-spinning {
    animation-duration: .01ms !important;
  }
}

html body .minigame-card-coinflip .minigame-card-title,
html body .minigame-card-coinflip .minigame-card-subtitle,
html body .minigame-card-coinflip .minigame-card-selected-label {
  display: none !important;
}
html body .minigame-card-coinflip .minigame-card-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body .coinflip-game-panel .coinflip-panel-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .coinflip-game-panel .coinflip-panel-border { z-index: 20 !important; }
html body .coinflip-game-panel .coinflip-panel-content { z-index: 2 !important; }

html body .coinflip-game-panel .coinflip-panel-title-image {
  position: absolute !important;
  left: 10.4% !important;
  top: 9.1% !important;
  z-index: 8 !important;
  display: block !important;
  width: 27.5% !important;
  height: auto !important;
  max-height: 13.5% !important;
  object-fit: contain !important;
  object-position: left top !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.36));
}
html body .coinflip-game-panel .coinflip-panel-heading { display: none !important; }

html body .coinflip-game-panel .coinflip-panel-balance {
  right: 10.4% !important;
  top: 9.6% !important;
  z-index: 8 !important;
  min-width: 28% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
html body .coinflip-game-panel .coinflip-balance-caption {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px,.7vw,10px) !important;
  color: rgba(232,214,162,.86) !important;
  font-size: clamp(7px,.72vw,11px) !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
  white-space: nowrap !important;
}
html body .coinflip-game-panel .coinflip-balance-caption > .minigame-heading-branch {
  flex: 0 0 clamp(28px,3.5vw,52px) !important;
  width: clamp(28px,3.5vw,52px) !important;
  height: clamp(11px,1.45vw,21px) !important;
  opacity: .9 !important;
  filter: drop-shadow(0 0 4px rgba(225,190,101,.18)) !important;
}
html body .coinflip-game-panel .coinflip-panel-balance > strong {
  margin-top: clamp(4px,.55vw,8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px,.65vw,9px) !important;
  color: #e8ca72 !important;
  font: 700 clamp(14px,1.42vw,24px)/1.1 Georgia,"Times New Roman",serif !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.66) !important;
}
html body .coinflip-game-panel .coinflip-panel-balance > strong > img {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  object-fit: contain !important;
  flex: 0 0 1em !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
}

html body .coinflip-game-panel .coinflip-choice-button {
  top: 35.2% !important;
  width: 23.2% !important;
  height: 21.5% !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-choice-background {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 9% !important;
  bottom: 9% !important;
  z-index: 0 !important;
  display: block !important;
  border: 1px solid rgba(201,166,78,.22) !important;
  border-radius: clamp(7px,1vw,15px) !important;
  background:
    radial-gradient(circle at 50% 38%,rgba(64,99,61,.24),transparent 54%),
    linear-gradient(160deg,rgba(20,55,34,.96),rgba(7,30,18,.985)) !important;
  box-shadow: inset 0 0 26px rgba(1,11,6,.46),0 8px 18px rgba(0,0,0,.17) !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-frame {
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
html body .coinflip-game-panel .coinflip-choice-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  color: #e9ddba !important;
  font: 700 clamp(12px,1.3vw,22px)/1 Georgia,"Times New Roman",serif !important;
  letter-spacing: .045em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.72) !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button.is-selected .coinflip-choice-background {
  border-color: rgba(239,205,111,.50) !important;
  box-shadow: inset 0 0 26px rgba(1,11,6,.42),0 0 20px rgba(231,190,78,.14) !important;
}

html body .coinflip-game-panel .coinflip-coin-stage {
  top: 20.7% !important;
  width: 31.5% !important;
  perspective: 1500px !important;
  perspective-origin: 50% 48% !important;
}
html body .coinflip-game-panel .coinflip-coin-motion {
  width: 77% !important;
  transform-style: preserve-3d !important;
}
html body .coinflip-game-panel .coinflip-coin-rotor {
  --coin-depth: 13px;
  --coin-radius: 49%;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% 0 !important;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.30)) !important;
}
html body .coinflip-game-panel .coinflip-coin-edge {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-edge > i {
  --edge-angle: calc(var(--edge-index) * 10deg);
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10.2% !important;
  height: calc(var(--coin-depth) * 2) !important;
  margin-left: -5.1% !important;
  margin-top: calc(var(--coin-depth) * -1) !important;
  display: block !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;
  transform: rotateZ(var(--edge-angle)) translateY(calc(var(--coin-radius) * -1)) rotateX(90deg) !important;
  border-left: 1px solid rgba(255,232,151,.20) !important;
  border-right: 1px solid rgba(73,39,9,.24) !important;
  background:
    repeating-linear-gradient(90deg,rgba(255,235,165,.18) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#e5b84e 0%,#9c6c20 22%,#5e3a0e 50%,#ae7a25 76%,#f1ca68 100%) !important;
  box-shadow: inset 0 0 3px rgba(255,222,129,.14) !important;
  backface-visibility: visible !important;
}
html body .coinflip-game-panel .coinflip-coin-face {
  z-index: 3 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
html body .coinflip-game-panel .coinflip-coin-face-heads {
  transform: translateZ(var(--coin-depth)) rotateY(0deg) !important;
}
html body .coinflip-game-panel .coinflip-coin-face-tails {
  transform: rotateY(180deg) translateZ(var(--coin-depth)) !important;
}

@keyframes bryerCoinJumpV5 {
  0% {
    transform: translate3d(0,0,0) scale(1);
    animation-timing-function:cubic-bezier(.22,.60,.31,1);
  }
  9%   { transform: translate3d(-1%,-10%,18px) scale(1.015); }
  22%  { transform: translate3d(2%,-35%,58px) scale(1.045); }
  38%  { transform: translate3d(-1.5%,-61%,103px) scale(1.075); }
  47% {
    transform: translate3d(0,-68%,118px) scale(1.085);
    animation-timing-function:cubic-bezier(.40,0,.78,.42);
  }
  57%  { transform: translate3d(1.2%,-57%,91px) scale(1.065); }
  68%  { transform: translate3d(-.8%,-31%,48px) scale(1.038); }
  77%  { transform: translate3d(.4%,-7%,12px) scale(1.01); }
  81%  { transform: translate3d(0,1.2%,0) scale(.998); }
  84%  { transform: translate3d(0,-1.8%,5px) scale(1.003); }
  87%  { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes bryerCoinRotorHeadsV5 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  12%  { transform: rotateX(330deg) rotateY(460deg) rotateZ(84deg); }
  27%  { transform: rotateX(780deg) rotateY(1015deg) rotateZ(-126deg); }
  45%  { transform: rotateX(1325deg) rotateY(1610deg) rotateZ(151deg); }
  61%  { transform: rotateX(1710deg) rotateY(1985deg) rotateZ(-77deg); }
  76%  { transform: rotateX(1960deg) rotateY(2340deg) rotateZ(31deg); }
  84%  { transform: rotateX(2075deg) rotateY(2440deg) rotateZ(-13deg); }
  90%  { transform: rotateX(2130deg) rotateY(2488deg) rotateZ(5deg); }
  95%  { transform: rotateX(2152deg) rotateY(2510deg) rotateZ(-1.6deg); }
  100% { transform: rotateX(2160deg) rotateY(2520deg) rotateZ(0deg); }
}
@keyframes bryerCoinRotorTailsV5 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  12%  { transform: rotateX(330deg) rotateY(500deg) rotateZ(84deg); }
  27%  { transform: rotateX(780deg) rotateY(1095deg) rotateZ(-126deg); }
  45%  { transform: rotateX(1325deg) rotateY(1730deg) rotateZ(151deg); }
  61%  { transform: rotateX(1710deg) rotateY(2135deg) rotateZ(-77deg); }
  76%  { transform: rotateX(1960deg) rotateY(2490deg) rotateZ(31deg); }
  84%  { transform: rotateX(2075deg) rotateY(2600deg) rotateZ(-13deg); }
  90%  { transform: rotateX(2130deg) rotateY(2650deg) rotateZ(5deg); }
  95%  { transform: rotateX(2152deg) rotateY(2680deg) rotateZ(-1.6deg); }
  100% { transform: rotateX(2160deg) rotateY(2700deg) rotateZ(0deg); }
}
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping {
  animation: bryerCoinJumpV5 6.2s linear both !important;
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorHeadsV5 6.2s cubic-bezier(.12,.72,.10,1) both !important;
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorTailsV5 6.2s cubic-bezier(.12,.72,.10,1) both !important;
}

html body .coinflip-game-panel .coinflip-controls {
  left: 13.2% !important;
  right: 13.2% !important;
  bottom: 7.2% !important;
  gap: 6% !important;
}
html body .coinflip-game-panel .coinflip-bet-control { flex: 1 1 61% !important; }
html body .coinflip-game-panel .coinflip-flip-button {
  flex: 0 0 25.5% !important;
  width: 25.5% !important;
  height: clamp(44px,5.2vw,75px) !important;
}
html body .coinflip-game-panel .coinflip-flip-button > img {
  object-fit: contain !important;
}
html body .coinflip-game-panel .coinflip-flip-button > span {
  font-size: clamp(11px,1.25vw,20px) !important;
}
html body .coinflip-game-panel .coinflip-preview-footnote { bottom: 2.6% !important; }
html body .coinflip-game-panel .coinflip-result-heading { top: 17.2% !important; }

html body .main-layout > .history-column {
  position: relative !important;
  overflow: visible !important;
}
html body .main-layout > .history-column > .history-launch-stack {
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 12 !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .panel-header,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-list,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments {
  visibility: visible !important;
}

@media (max-width:1180px) {
  html body .coinflip-game-panel .coinflip-controls {
    left:10.5% !important;
    right:10.5% !important;
    bottom:6.7% !important;
  }
  html body .coinflip-game-panel .coinflip-choice-button { top:34.8% !important; }
  html body .coinflip-game-panel .coinflip-coin-stage { top:20.2% !important; }
  html body .coinflip-game-panel .coinflip-panel-title-image {
    left:8.6% !important;
    top:8.8% !important;
    width:29% !important;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    right:8.6% !important;
    top:9.1% !important;
    min-width:30% !important;
  }
}
@media (max-width:820px) {
  html body .coinflip-game-panel .coinflip-panel-title-image {
    left:7% !important;
    top:8.2% !important;
    width:31% !important;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    right:7% !important;
    top:8.6% !important;
    min-width:33% !important;
  }
  html body .coinflip-game-panel .coinflip-balance-caption { gap:4px !important; }
  html body .coinflip-game-panel .coinflip-balance-caption > .minigame-heading-branch {
    flex-basis:25px !important;
    width:25px !important;
    height:10px !important;
  }
  html body .coinflip-game-panel .coinflip-choice-button {
    width:25% !important;
    height:22% !important;
    top:34.3% !important;
  }
  html body .coinflip-game-panel .coinflip-choice-button.is-heads { left:6.5% !important; }
  html body .coinflip-game-panel .coinflip-choice-button.is-tails { right:6.5% !important; }
  html body .coinflip-game-panel .coinflip-coin-stage {
    width:35% !important;
    top:19.8% !important;
  }
  html body .coinflip-game-panel .coinflip-controls {
    left:6.5% !important;
    right:6.5% !important;
    bottom:6.1% !important;
    gap:3.5% !important;
  }
  html body .coinflip-game-panel .coinflip-flip-button {
    flex-basis:27% !important;
    width:27% !important;
    height:clamp(36px,6.6vw,54px) !important;
  }
  html body .coinflip-game-panel .coinflip-preview-footnote { bottom:1.8% !important; }
}
@media (max-width:560px) {
  html body .coinflip-game-panel .coinflip-balance-caption > .minigame-heading-branch { display:none !important; }
  html body .coinflip-game-panel .coinflip-balance-caption { font-size:6px !important; }
  html body .coinflip-game-panel .coinflip-panel-balance > strong { gap:3px !important; }
  html body .coinflip-game-panel .coinflip-controls { bottom:5.4% !important; }
  html body .coinflip-game-panel .coinflip-flip-button { height:34px !important; }
}

html body .coinflip-game-panel .coinflip-coin-edge > i {
  position: absolute !important;
  inset: 1.7% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  border: 1px solid rgba(94,55,13,.34) !important;
  border-radius: 50% !important;
  transform: translateZ(var(--edge-z)) !important;
  transform-origin: 50% 50% !important;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,235,165,.11) 0 1px,transparent 1px 3px),
    linear-gradient(135deg,#efc75f 0%,#b47b24 30%,#70420f 52%,#c28a2b 72%,#f1cc6d 100%) !important;
  box-shadow: inset 0 0 5px rgba(65,33,7,.34) !important;
  backface-visibility: visible !important;
}

html body .minigame-card-coinflip {
  --card-parallax-x: 0px;
  --card-parallax-y: 0px;
}
html body .minigame-card-coinflip .minigame-card-surface {
  overflow: hidden !important;
}
html body .minigame-card-coinflip .minigame-card-background {
  transform: translate3d(var(--card-parallax-x), var(--card-parallax-y), 0) scale(1.085) !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
  transition: transform .14s ease-out !important;
}
html body .minigame-card-coinflip .minigame-card-hover-art {
  position: absolute !important;
  left: 9% !important;
  right: auto !important;
  top: 5.2% !important;
  bottom: auto !important;
  z-index: 4 !important;
  display: block !important;
  width: 82% !important;
  height: 87.2% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
  user-select: none !important;
  will-change: transform, filter !important;
  transition: transform .38s cubic-bezier(.16,.82,.22,1), filter .32s ease !important;
}
html body .minigame-card-coinflip:hover .minigame-card-hover-art,
html body .minigame-card-coinflip:focus-visible .minigame-card-hover-art {
  z-index: 9 !important;
  transform: translate3d(0, -1.2%, 0) scale(1.105) !important;
  filter: brightness(1.055) drop-shadow(0 10px 14px rgba(0,0,0,.22)) !important;
}
html body .minigame-card-coinflip:hover .minigame-card-frame,
html body .minigame-card-coinflip:focus-visible .minigame-card-frame {
  z-index: 5 !important;
}

html body .minigame-active-stage.minigame-active-coinflip {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .minigame-active-stage.minigame-active-coinflip::before,
html body .minigame-active-stage.minigame-active-coinflip::after,
html body .minigame-active-stage.minigame-active-coinflip > .minigame-stage-bridge {
  content: none !important;
  display: none !important;
}

html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: clamp(520px, 38vw, 680px) !important;
  min-height: 520px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  perspective: 1500px !important;
  background: #07170f !important;
  box-shadow: inset 0 -28px 55px rgba(0,0,0,.23) !important;
}

html body .minigame-active-coinflip .coinflip-panel-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html body .minigame-active-coinflip .coinflip-panel-border {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center bottom !important;
  clip-path: inset(86% 0 0 0) !important;
  -webkit-clip-path: inset(86% 0 0 0) !important;
  filter: drop-shadow(0 -4px 10px rgba(219,176,73,.10)) !important;
}

html body .minigame-active-coinflip .coinflip-panel-title-image {
  left: clamp(28px, 5.2%, 76px) !important;
  top: clamp(34px, 6.5%, 50px) !important;
  width: clamp(245px, 24%, 365px) !important;
  max-height: 15% !important;
}
html body .minigame-active-coinflip .coinflip-panel-balance {
  right: clamp(28px, 5.2%, 76px) !important;
  top: clamp(34px, 6.8%, 52px) !important;
  min-width: clamp(270px, 25%, 390px) !important;
}
html body .minigame-active-coinflip .coinflip-coin-stage {
  left: 50% !important;
  top: 18.5% !important;
  width: clamp(235px, 25.5%, 365px) !important;
  transform: translateX(-50%) !important;
}
html body .minigame-active-coinflip .coinflip-choice-button {
  top: 36% !important;
  width: clamp(205px, 22.5%, 315px) !important;
  height: 24% !important;
}
html body .minigame-active-coinflip .coinflip-choice-button.is-heads {
  left: clamp(18px, 8.2%, 118px) !important;
}
html body .minigame-active-coinflip .coinflip-choice-button.is-tails {
  right: clamp(18px, 8.2%, 118px) !important;
}
html body .minigame-active-coinflip .coinflip-controls {
  left: clamp(30px, 8%, 118px) !important;
  right: clamp(30px, 8%, 118px) !important;
  bottom: 9.5% !important;
  gap: clamp(22px, 4%, 64px) !important;
}
html body .minigame-active-coinflip .coinflip-preview-footnote {
  bottom: 3.2% !important;
}
html body .minigame-active-coinflip .coinflip-result-heading {
  top: 14.3% !important;
}

@media (max-width: 1180px) {
  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    height: clamp(500px, 52vw, 620px) !important;
    min-height: 500px !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button {
    width: 23.5% !important;
    height: 23% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 5.8% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 5.8% !important; }
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: 30% !important;
    top: 19% !important;
  }
  html body .minigame-active-coinflip .coinflip-controls {
    left: 6% !important;
    right: 6% !important;
    bottom: 9% !important;
  }
}

@media (max-width: 820px) {
  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    height: clamp(470px, 76vw, 590px) !important;
    min-height: 470px !important;
  }
  html body .minigame-active-coinflip .coinflip-panel-title-image {
    left: 4% !important;
    top: 5.5% !important;
    width: 29% !important;
  }
  html body .minigame-active-coinflip .coinflip-panel-balance {
    right: 4% !important;
    top: 5.8% !important;
    min-width: 31% !important;
  }
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: 34% !important;
    top: 19.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button {
    width: 26% !important;
    height: 22.5% !important;
    top: 36.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 3.2% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 3.2% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    left: 4% !important;
    right: 4% !important;
    bottom: 8.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-preview-footnote { bottom: 2.4% !important; }
}

@media (max-width: 560px) {
  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    height: 500px !important;
    min-height: 500px !important;
  }
  html body .minigame-active-coinflip .coinflip-panel-title-image { width: 36% !important; }
  html body .minigame-active-coinflip .coinflip-panel-balance { min-width: 38% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button {
    width: 29% !important;
    height: 20% !important;
    top: 37% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 1.5% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 1.5% !important; }
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: 38% !important;
    top: 20% !important;
  }
  html body .minigame-active-coinflip .coinflip-controls {
    left: 2.5% !important;
    right: 2.5% !important;
    bottom: 7.6% !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html body .minigame-card-coinflip .minigame-card-background {
    transform: scale(1.04) !important;
  }
  html body .minigame-card-coinflip .minigame-card-hover-art {
    z-index: 4 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .minigame-card-coinflip .minigame-card-background,
  html body .minigame-card-coinflip .minigame-card-hover-art {
    transition: none !important;
  }
  html body .minigame-card-coinflip .minigame-card-background {
    transform: scale(1.04) !important;
  }
}

html body .minigame-active-coinflip .coinflip-controls {
  left: 50% !important;
  right: auto !important;
  width: min(900px, 84%) !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 1180px) {
  html body .minigame-active-coinflip .coinflip-controls { width: min(820px, 88%) !important; }
}
@media (max-width: 820px) {
  html body .minigame-active-coinflip .coinflip-controls { width: 92% !important; }
}
@media (max-width: 560px) {
  html body .minigame-active-coinflip .coinflip-controls { width: 95% !important; }
}

@media (min-width: 981px) {
  html body .main-layout.main-layout-minigame {
    grid-template-columns: minmax(0, 1fr) 315px !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: clamp(18px, 4vw, 56px) !important;
    padding-right: clamp(18px, 4vw, 56px) !important;
    overflow: visible !important;
  }
  html body .main-layout.main-layout-minigame > .content {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-coinflip {
    margin-left: calc(clamp(18px, 4vw, 56px) * -1) !important;
    width: calc(100% + clamp(18px, 4vw, 56px) + 24px) !important;
    max-width: none !important;
  }
}

@media (max-width: 980px) {
  html body .main-layout.main-layout-minigame {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-coinflip {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 680px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-coinflip {
    margin-left: -14px !important;
    width: calc(100% + 28px) !important;
  }
}

html body .minigame-card-coinflip {
  --card-hover-parallax-x: 0px;
  --card-hover-parallax-y: 0px;
}
html body .minigame-card-coinflip .minigame-card-hover-art {
  transform: translate3d(var(--card-hover-parallax-x), var(--card-hover-parallax-y), 0) scale(1) !important;
  transition: transform .24s cubic-bezier(.16,.82,.22,1), filter .32s ease !important;
}
html body .minigame-card-coinflip:hover .minigame-card-hover-art,
html body .minigame-card-coinflip:focus-visible .minigame-card-hover-art {
  z-index: 9 !important;
  transform: translate3d(var(--card-hover-parallax-x), calc(var(--card-hover-parallax-y) - 3px), 0) scale(1.105) !important;
  filter: brightness(1.055) drop-shadow(0 10px 14px rgba(0,0,0,.22)) !important;
}

html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  perspective: 1400px !important;
  background: #07170f !important;
  box-shadow: none !important;
}
html body .minigame-active-coinflip .coinflip-panel-background {
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: none !important;
  user-select: none !important;
  pointer-events: none !important;
}
html body .minigame-active-coinflip .coinflip-panel-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
}

html body .minigame-active-coinflip .coinflip-panel-border {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  z-index: 20 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: none !important;
  clip-path: inset(81.5% 0 0 0) !important;
  -webkit-clip-path: inset(81.5% 0 0 0) !important;
  filter: drop-shadow(0 -4px 10px rgba(219,176,73,.10)) !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .minigame-active-coinflip .coinflip-panel-title-image {
  left: clamp(22px, 4.2%, 72px) !important;
  top: 7.2% !important;
  width: clamp(230px, 21.5%, 350px) !important;
  height: auto !important;
  max-height: 16% !important;
  object-fit: contain !important;
}
html body .minigame-active-coinflip .coinflip-panel-balance {
  right: clamp(22px, 4.2%, 72px) !important;
  top: 7.5% !important;
  min-width: clamp(260px, 23%, 380px) !important;
}
html body .minigame-active-coinflip .coinflip-coin-stage {
  left: 50% !important;
  top: 19% !important;
  width: clamp(235px, 20%, 315px) !important;
  transform: translateX(-50%) !important;
  perspective: 900px !important;
  perspective-origin: 50% 48% !important;
}
html body .minigame-active-coinflip .coinflip-choice-button {
  top: 35% !important;
  width: clamp(190px, 16.5%, 270px) !important;
  height: 21% !important;
}
html body .minigame-active-coinflip .coinflip-choice-button.is-heads {
  left: clamp(28px, 15%, 255px) !important;
}
html body .minigame-active-coinflip .coinflip-choice-button.is-tails {
  right: clamp(28px, 15%, 255px) !important;
}
html body .minigame-active-coinflip .coinflip-controls {
  left: 50% !important;
  right: auto !important;
  bottom: 11.5% !important;
  width: min(760px, 62%) !important;
  transform: translateX(-50%) !important;
  gap: clamp(18px, 3.2%, 42px) !important;
  z-index: 12 !important;
}
html body .minigame-active-coinflip .coinflip-bet-control {
  flex: 1 1 64% !important;
  min-width: 0 !important;
}
html body .minigame-active-coinflip .coinflip-flip-button {
  flex: 0 0 27% !important;
  width: 27% !important;
  height: clamp(42px, 4vw, 64px) !important;
}
html body .minigame-active-coinflip .coinflip-preview-footnote {
  bottom: 3.8% !important;
}
html body .minigame-active-coinflip .coinflip-result-heading {
  top: 12.5% !important;
}

html body .coinflip-game-panel .coinflip-coin-motion {
  width: 82% !important;
  aspect-ratio: 1 !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}
html body .coinflip-game-panel .coinflip-coin-rotor {
  --coin-depth: 13px;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% 0 !important;
  will-change: transform !important;
  filter: drop-shadow(0 18px 17px rgba(0,0,0,.32)) !important;
}
html body .coinflip-game-panel .coinflip-coin-edge {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-edge > i {
  position: absolute !important;
  inset: 1.8% !important;
  display: block !important;
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%) !important;
  transform: translateZ(var(--edge-z)) !important;
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
  background:
    radial-gradient(circle at 38% 31%, rgba(255,224,130,.26), transparent 31%),
    linear-gradient(90deg,#6c420f 0%,#be892c 16%,#f0c65e 34%,#8a5718 53%,#dba840 72%,#6b400e 100%) !important;
  border: 1px solid rgba(81,48,10,.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,128,.09),
    inset 0 0 7px rgba(61,32,5,.22) !important;
}
html body .coinflip-game-panel .coinflip-coin-face {
  z-index: 4 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}
html body .coinflip-game-panel .coinflip-coin-face-heads {
  transform: translateZ(var(--coin-depth)) !important;
}
html body .coinflip-game-panel .coinflip-coin-face-tails {
  transform: rotateY(180deg) translateZ(var(--coin-depth)) !important;
}

@keyframes bryerCoinFlightV7 {
  0%   { transform: translate3d(0,0,0) scale(1); }
  8%   { transform: translate3d(-1.2%,-12%,22px) scale(1.012); }
  20%  { transform: translate3d(1.4%,-43%,62px) scale(1.045); }
  34%  { transform: translate3d(-.7%,-76%,112px) scale(1.075); }
  42%  { transform: translate3d(0,-87%,132px) scale(1.087); }
  50%  { transform: translate3d(.6%,-78%,112px) scale(1.073); }
  63%  { transform: translate3d(-.5%,-45%,63px) scale(1.042); }
  78%  { transform: translate3d(.25%,-12%,19px) scale(1.012); }
  88%  { transform: translate3d(0,0,0) scale(1); }
  93%  { transform: translate3d(0,-1.8%,4px) scale(1.003); }
  97%  { transform: translate3d(0,.5%,0) scale(.999); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes bryerCoinRotorHeadsV7 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  12%  { transform: rotateX(365deg) rotateY(540deg) rotateZ(68deg); }
  26%  { transform: rotateX(790deg) rotateY(1210deg) rotateZ(-104deg); }
  42%  { transform: rotateX(1260deg) rotateY(1900deg) rotateZ(116deg); }
  59%  { transform: rotateX(1695deg) rotateY(2395deg) rotateZ(-54deg); }
  70%  { transform: rotateX(1925deg) rotateY(2660deg) rotateZ(24deg); }
  82%  { transform: rotateX(2074deg) rotateY(2812deg) rotateZ(-9deg); }
  91%  { transform: rotateX(2132deg) rotateY(2862deg) rotateZ(3.2deg); }
  97%  { transform: rotateX(2155deg) rotateY(2878deg) rotateZ(-.8deg); }
  100% { transform: rotateX(2160deg) rotateY(2880deg) rotateZ(0deg); }
}
@keyframes bryerCoinRotorTailsV7 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  12%  { transform: rotateX(365deg) rotateY(565deg) rotateZ(68deg); }
  26%  { transform: rotateX(790deg) rotateY(1260deg) rotateZ(-104deg); }
  42%  { transform: rotateX(1260deg) rotateY(1990deg) rotateZ(116deg); }
  59%  { transform: rotateX(1695deg) rotateY(2515deg) rotateZ(-54deg); }
  70%  { transform: rotateX(1925deg) rotateY(2805deg) rotateZ(24deg); }
  82%  { transform: rotateX(2074deg) rotateY(2970deg) rotateZ(-9deg); }
  91%  { transform: rotateX(2132deg) rotateY(3028deg) rotateZ(3.2deg); }
  97%  { transform: rotateX(2155deg) rotateY(3055deg) rotateZ(-.8deg); }
  100% { transform: rotateX(2160deg) rotateY(3060deg) rotateZ(0deg); }
}
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping {
  animation: bryerCoinFlightV7 4.25s cubic-bezier(.23,.62,.29,1) both !important;
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorHeadsV7 7.2s cubic-bezier(.12,.72,.08,1) both !important;
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorTailsV7 7.2s cubic-bezier(.12,.72,.08,1) both !important;
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor:not(.is-spinning) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor:not(.is-spinning) {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) !important;
}

@media (max-width: 1180px) {
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: clamp(225px, 23%, 292px) !important;
    top: 19.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button {
    width: 20% !important;
    top: 35.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 9% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 9% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    width: min(700px, 76%) !important;
    bottom: 11% !important;
  }
}
@media (max-width: 820px) {
  html body .minigame-active-coinflip .coinflip-panel-title-image {
    left: 3.5% !important;
    width: 28% !important;
  }
  html body .minigame-active-coinflip .coinflip-panel-balance {
    right: 3.5% !important;
    min-width: 31% !important;
  }
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: 29% !important;
    top: 20% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button {
    width: 23% !important;
    height: 22% !important;
    top: 36% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 3.5% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 3.5% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    width: 90% !important;
    bottom: 10.5% !important;
  }
}
@media (max-width: 560px) {
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: 36% !important;
    top: 20.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button {
    width: 27% !important;
    top: 36.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 1.5% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 1.5% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    width: 94% !important;
    bottom: 9.5% !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html body .minigame-card-coinflip .minigame-card-hover-art {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .coinflip-game-panel .coinflip-coin-motion.is-flipping { animation-duration: .01ms !important; }
  html body .coinflip-game-panel .coinflip-coin-rotor.is-spinning { animation-duration: .01ms !important; }
}

@media (max-width: 980px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-coinflip {
    margin-left: -12px !important;
    width: calc(100% + 24px) !important;
  }
}

html body .minigame-active-stage.minigame-active-coinflip,
html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
  overflow: visible !important;
}

html body .minigame-active-coinflip .coinflip-panel-background {
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: none !important;
}

html body .minigame-active-coinflip .coinflip-panel-border-crop {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 18.5% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .minigame-active-coinflip .coinflip-panel-border-crop > .coinflip-panel-border {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  filter: drop-shadow(0 -3px 8px rgba(219,176,73,.10)) !important;
}
html body .minigame-active-coinflip .coinflip-panel-content {
  z-index: 3 !important;
}

html body .coinflip-game-panel .coinflip-coin-stage {
  perspective: 1250px !important;
  perspective-origin: 50% 46% !important;
  transform-style: preserve-3d !important;
}
html body .coinflip-game-panel .coinflip-coin-motion {
  width: 82% !important;
  aspect-ratio: 1 !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}
html body .coinflip-game-panel .coinflip-coin-rotor {
  --coin-depth: 18px;
  --coin-half-depth: 9px;
  --coin-radius: 48.2%;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% 0 !important;
  will-change: transform !important;
  filter: drop-shadow(0 18px 17px rgba(0,0,0,.32)) !important;
}
html body .coinflip-game-panel .coinflip-coin-edge {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-edge > i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 7.1% !important;
  height: var(--coin-depth) !important;
  margin-left: -3.55% !important;
  margin-top: calc(var(--coin-depth) / -2) !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,232,151,.17) !important;
  border-right: 1px solid rgba(70,38,9,.28) !important;
  border-radius: 1px !important;
  clip-path: none !important;
  background:
    repeating-linear-gradient(90deg,rgba(255,239,181,.20) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#f2ce6a 0%,#bd862d 22%,#69400f 50%,#aa7423 76%,#edc45d 100%) !important;
  box-shadow: inset 0 0 3px rgba(71,38,8,.34) !important;
  transform-origin: 50% 50% !important;
  transform: rotateZ(var(--edge-angle)) translateY(calc(var(--coin-radius) * -1)) rotateX(90deg) !important;
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
}
html body .coinflip-game-panel .coinflip-coin-face {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .coinflip-game-panel .coinflip-coin-face-heads {
  transform: translateZ(var(--coin-half-depth)) !important;
}
html body .coinflip-game-panel .coinflip-coin-face-tails {
  transform: rotateY(180deg) translateZ(var(--coin-half-depth)) !important;
}

@keyframes bryerCoinFlightV8 {
  0%   { transform: translate3d(0,0,0) scale(1); }
  10%  { transform: translate3d(-.5%,-18%,30px) scale(1.018); }
  24%  { transform: translate3d(.7%,-61%,86px) scale(1.058); }
  40%  { transform: translate3d(-.35%,-94%,145px) scale(1.085); }
  52%  { transform: translate3d(.3%,-82%,118px) scale(1.071); }
  67%  { transform: translate3d(-.2%,-42%,58px) scale(1.037); }
  79%  { transform: translate3d(.1%,-9%,15px) scale(1.009); }
  84%  { transform: translate3d(0,0,0) scale(1); }
  89%  { transform: translate3d(0,-2.4%,5px) scale(1.004); }
  94%  { transform: translate3d(0,.55%,0) scale(.999); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes bryerCoinRotorHeadsV8 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  12%  { transform: rotateX(760deg) rotateY(14deg) rotateZ(18deg); }
  25%  { transform: rotateX(1540deg) rotateY(-17deg) rotateZ(-23deg); }
  40%  { transform: rotateX(2340deg) rotateY(12deg) rotateZ(16deg); }
  56%  { transform: rotateX(2980deg) rotateY(-10deg) rotateZ(-12deg); }
  70%  { transform: rotateX(3340deg) rotateY(7deg) rotateZ(7deg); }
  82%  { transform: rotateX(3510deg) rotateY(-4deg) rotateZ(-3deg); }
  91%  { transform: rotateX(3570deg) rotateY(2deg) rotateZ(1.4deg); }
  97%  { transform: rotateX(3594deg) rotateY(-.6deg) rotateZ(-.35deg); }
  100% { transform: rotateX(3600deg) rotateY(0deg) rotateZ(0deg); }
}
@keyframes bryerCoinRotorTailsV8 {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  12%  { transform: rotateX(760deg) rotateY(14deg) rotateZ(18deg); }
  25%  { transform: rotateX(1540deg) rotateY(-17deg) rotateZ(-23deg); }
  40%  { transform: rotateX(2340deg) rotateY(12deg) rotateZ(16deg); }
  56%  { transform: rotateX(2980deg) rotateY(-10deg) rotateZ(-12deg); }
  70%  { transform: rotateX(3340deg) rotateY(7deg) rotateZ(7deg); }
  82%  { transform: rotateX(3510deg) rotateY(22deg) rotateZ(-3deg); }
  91%  { transform: rotateX(3570deg) rotateY(92deg) rotateZ(1.4deg); }
  97%  { transform: rotateX(3594deg) rotateY(162deg) rotateZ(-.35deg); }
  100% { transform: rotateX(3600deg) rotateY(180deg) rotateZ(0deg); }
}
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping {
  animation: bryerCoinFlightV8 4.45s cubic-bezier(.22,.61,.30,1) both !important;
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorHeadsV8 7.2s cubic-bezier(.11,.68,.08,1) both !important;
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor.is-spinning {
  animation: bryerCoinRotorTailsV8 7.2s cubic-bezier(.11,.68,.08,1) both !important;
}
html body .coinflip-game-panel.result-heads .coinflip-coin-rotor:not(.is-spinning) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
html body .coinflip-game-panel.result-tails .coinflip-coin-rotor:not(.is-spinning) {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) !important;
}

html body .coinflip-game-panel .coinflip-coin-face-plane {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-heads {
  transform: translateZ(var(--coin-half-depth)) !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-tails {
  transform: translateZ(-9px) !important;
}
html body .coinflip-game-panel .coinflip-coin-face-heads {
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-coin-face-tails {
  transform: rotateY(180deg) !important;
}

html body .minigame-active-coinflip .coinflip-panel-border-crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body .minigame-active-coinflip .coinflip-panel-border-crop > .coinflip-panel-border {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;

  clip-path: inset(16% 0 0 0) !important;
  -webkit-clip-path: inset(16% 0 0 0) !important;
  filter: drop-shadow(0 -3px 8px rgba(219,176,73,.10)) !important;
}

html body .coinflip-game-panel .coinflip-panel-fireflies {
  position: absolute !important;
  inset: 3.5% 2.5% 8% !important;
  z-index: 2 !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: .92 !important;
  background: transparent url('/images/inventory-fireflies-v128.svg') center center / 100% 100% no-repeat !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.08) saturate(.96) !important;
}
html body .coinflip-game-panel .coinflip-panel-title-image,
html body .coinflip-game-panel .coinflip-panel-balance,
html body .coinflip-game-panel .coinflip-choice-layer,
html body .coinflip-game-panel .coinflip-result-heading,
html body .coinflip-game-panel .coinflip-coin-stage,
html body .coinflip-game-panel .coinflip-controls,
html body .coinflip-game-panel .coinflip-preview-footnote {
  z-index: 5 !important;
}

@keyframes bryerCoinIdleFloatV9 {
  0%, 100% { transform: translate3d(0,0,0) rotateZ(0deg) scale(1); }
  25% { transform: translate3d(-2px,-8px,8px) rotateZ(-.45deg) scale(1.006); }
  50% { transform: translate3d(1px,-15px,13px) rotateZ(.35deg) scale(1.012); }
  75% { transform: translate3d(2px,-7px,7px) rotateZ(.5deg) scale(1.005); }
}
html body .coinflip-game-panel .coinflip-coin-motion.is-idle {
  animation: bryerCoinIdleFloatV9 4.6s ease-in-out infinite !important;
}
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping,
html body .coinflip-game-panel .coinflip-coin-motion.is-result,
html body .coinflip-game-panel .coinflip-coin-rotor {
  animation: none !important;
}

html body .coinflip-game-panel .coinflip-coin-stage {
  perspective: 920px !important;
  perspective-origin: 50% 46% !important;
  transform-style: preserve-3d !important;
}
html body .coinflip-game-panel .coinflip-coin-motion {
  transform-style: preserve-3d !important;
  will-change: transform !important;
}
html body .coinflip-game-panel .coinflip-coin-rotor {
  --coin-depth: 18px;
  --coin-half-depth: 9px;
  position: relative !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% 0 !important;
  will-change: transform !important;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.34)) !important;
}
html body .coinflip-game-panel .coinflip-coin-face-plane {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-heads {
  transform: translateZ(var(--coin-half-depth)) !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-tails {
  transform: rotateY(180deg) translateZ(var(--coin-half-depth)) !important;
}
html body .coinflip-game-panel .coinflip-coin-face {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .coinflip-game-panel .coinflip-coin-depth {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-depth > i {
  position: absolute !important;
  inset: 2.2% !important;
  display: block !important;
  border-radius: 50% !important;
  border: clamp(1px,.22vw,3px) solid rgba(184,126,34,.78) !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 2px rgba(255,232,148,.34),
    0 0 1px rgba(73,38,7,.74) !important;
  transform: translateZ(var(--coin-layer-z)) !important;
  transform-style: preserve-3d !important;
  opacity: .82 !important;
}
html body .coinflip-game-panel .coinflip-coin-edge {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-edge > i {
  --coin-radius: 47.2%;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5.2% !important;
  height: var(--coin-depth) !important;
  margin-left: -2.6% !important;
  margin-top: calc(var(--coin-depth) / -2) !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,229,140,.14) !important;
  border-right: 1px solid rgba(65,33,6,.20) !important;
  border-radius: 1px !important;
  background:
    repeating-linear-gradient(90deg,rgba(255,238,172,.22) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#efc85d 0%,#ba8127 25%,#704413 52%,#b67d24 77%,#edc65d 100%) !important;
  transform-origin: 50% 50% !important;
  transform: rotateZ(var(--edge-angle)) translateY(calc(var(--coin-radius) * -1)) rotateX(90deg) !important;
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
  opacity: .92 !important;
}

html body .minigame-active-coinflip .coinflip-controls {
  bottom: 17.5% !important;
}
@media (max-width:1180px) {
  html body .minigame-active-coinflip .coinflip-controls { bottom: 16.5% !important; }
}
@media (max-width:820px) {
  html body .minigame-active-coinflip .coinflip-controls { bottom: 15% !important; }
}

html body .coinflip-game-panel .coinflip-choice-button {
  background: transparent !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-choice-background {
  display: none !important;
}
html body .coinflip-game-panel .coinflip-choice-bg-image,
html body .coinflip-game-panel .coinflip-choice-frame {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .coinflip-game-panel .coinflip-choice-bg-image {
  z-index: 0 !important;
  transform: translate(-50%,-50%) !important;
  filter: drop-shadow(0 8px 13px rgba(0,0,0,.24)) !important;
}
html body .coinflip-game-panel .coinflip-choice-frame {
  z-index: 1 !important;
  transform: translate(-50%,-50%) !important;
}
html body .coinflip-game-panel .coinflip-choice-frame.is-mirrored {
  transform: translate(-50%,-50%) scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-copy {
  position: absolute !important;
  inset: 12% 10% 10% !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px,.65vw,10px) !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol,
html body .coinflip-game-panel .coinflip-choice-label,
html body .coinflip-game-panel .coinflip-choice-name-ornament {
  color: #e8c86f !important;
  background: linear-gradient(180deg,#fff3b8 0%,#f4cf6b 27%,#c68a25 58%,#f0ca62 82%,#9b651b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(77,42,6,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.48)) !important;
  text-shadow: none !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol {
  display: block !important;
  font: 700 clamp(23px,2.2vw,39px)/1 Georgia,"Times New Roman",serif !important;
}
html body .coinflip-game-panel .coinflip-choice-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px,.65vw,10px) !important;
}
html body .coinflip-game-panel .coinflip-choice-label {
  position: static !important;
  inset: auto !important;
  display: inline-block !important;
  font: 800 clamp(13px,1.35vw,23px)/1 Georgia,"Times New Roman",serif !important;
  letter-spacing: .055em !important;
}
html body .coinflip-game-panel .coinflip-choice-name-ornament {
  display: inline-block !important;
  font: 700 clamp(7px,.75vw,12px)/1 Georgia,"Times New Roman",serif !important;
  opacity: .88 !important;
}
html body .coinflip-game-panel .coinflip-choice-name-ornament.is-right {
  transform: scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-button.is-selected .coinflip-choice-bg-image {
  filter:
    drop-shadow(0 0 5px rgba(255,235,159,.62))
    drop-shadow(0 0 16px rgba(227,183,73,.42))
    drop-shadow(0 8px 13px rgba(0,0,0,.24)) !important;
}

html body .coinflip-game-panel .coinflip-flip-button {
  background: transparent !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-background,
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-frame {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translate(-50%,-50%) !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-background { z-index: 0 !important; }
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-frame { z-index: 1 !important; }
html body .coinflip-game-panel .coinflip-flip-button > span {
  position: relative !important;
  z-index: 2 !important;
}

html body .history-panel.history-panel-dynamic.history-panel-minigame > .history-minigame-empty-ornaments {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  top: 112px !important;
  bottom: 12px !important;
  z-index: 58 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .history-panel.history-panel-dynamic.history-panel-minigame .history-minigame-empty-leaf {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: .86 !important;
  filter: drop-shadow(0 2px 2px rgba(2,13,7,.34)) !important;
}
html body .history-panel.history-panel-dynamic.history-panel-minigame .history-minigame-empty-leaf.is-a {
  top: 27% !important;
  transform: translateY(-50%) !important;
}
html body .history-panel.history-panel-dynamic.history-panel-minigame .history-minigame-empty-leaf.is-b {
  top: 53% !important;
  transform: translateY(-50%) scaleX(-1) !important;
}
html body .history-panel.history-panel-dynamic.history-panel-minigame .history-minigame-empty-leaf.is-c {
  top: 79% !important;
  transform: translateY(-50%) !important;
}
html body .history-panel.history-panel-dynamic.history-panel-minigame .history-list > .empty.compact {
  position: relative !important;
  z-index: 62 !important;
  background: rgba(21,62,40,.56) !important;
  backdrop-filter: blur(1px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .coinflip-game-panel .coinflip-coin-motion.is-idle { animation: none !important; }
}

html body .minigame-active-coinflip .coinflip-panel-border-crop {
  overflow: visible !important;
}
html body .minigame-active-coinflip .coinflip-panel-border-crop > .coinflip-panel-border {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

html body .coinflip-game-panel .coinflip-coin-face.coinflip-coin-face-heads,
html body .coinflip-game-panel .coinflip-coin-face.coinflip-coin-face-tails {
  transform: none !important;
}

html body .minigame-active-coinflip .coinflip-panel-border-crop {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 34% !important;
  overflow: hidden !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
html body .minigame-active-coinflip .coinflip-panel-border-crop > .coinflip-panel-border {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  object-position: center bottom !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
}

html body .coinflip-game-panel .coinflip-coin-float {
  position: relative !important;
  width: 82% !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}
@keyframes bryerCoinIdleFloatV10 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1px, -5px, 0); }
  50% { transform: translate3d(1px, -12px, 0); }
  75% { transform: translate3d(0, -6px, 0); }
}
html body .coinflip-game-panel .coinflip-coin-float.is-idle {
  animation: bryerCoinIdleFloatV10 4.2s ease-in-out infinite !important;
}
html body .coinflip-game-panel .coinflip-coin-float.is-flipping,
html body .coinflip-game-panel .coinflip-coin-float.is-result {
  animation: none !important;
  transform: translate3d(0,0,0) !important;
}
html body .coinflip-game-panel .coinflip-coin-motion,
html body .coinflip-game-panel .coinflip-coin-motion.is-idle,
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping,
html body .coinflip-game-panel .coinflip-coin-motion.is-result {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  animation: none !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

html body .coinflip-game-panel .coinflip-coin-stage {
  perspective: 1050px !important;
  perspective-origin: 50% 48% !important;
  transform-style: preserve-3d !important;
}
html body .coinflip-game-panel .coinflip-coin-rotor {
  --coin-half-depth: clamp(12px, 1.05vw, 18px);
  --coin-depth: calc(var(--coin-half-depth) * 2);
  --coin-front-alpha: 1;
  --coin-back-alpha: 0;
  --coin-edge-alpha: .38;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% 0 !important;
  will-change: transform !important;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.34)) !important;
}
html body .coinflip-game-panel .coinflip-coin-face-plane {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-heads {
  transform: translateZ(var(--coin-half-depth)) !important;
  opacity: var(--coin-front-alpha) !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-tails {
  transform: rotateX(180deg) translateZ(var(--coin-half-depth)) !important;
  opacity: var(--coin-back-alpha) !important;
}
html body .coinflip-game-panel .coinflip-coin-face.coinflip-coin-face-heads,
html body .coinflip-game-panel .coinflip-coin-face.coinflip-coin-face-tails {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  opacity: 1 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
html body .coinflip-game-panel .coinflip-coin-depth {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  opacity: var(--coin-edge-alpha) !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-depth > i {
  position: absolute !important;
  inset: 2.1% !important;
  display: block !important;
  border-radius: 50% !important;
  border: clamp(1px,.20vw,3px) solid rgba(176,116,27,.74) !important;
  background: transparent !important;
  box-shadow: inset 0 0 2px rgba(255,229,139,.28), 0 0 1px rgba(62,31,5,.72) !important;
  transform: translateZ(var(--coin-layer-z)) !important;
  transform-style: preserve-3d !important;
}
html body .coinflip-game-panel .coinflip-coin-edge {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  transform-style: preserve-3d !important;
  opacity: var(--coin-edge-alpha) !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-coin-edge > i {
  --coin-radius: 47.3%;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 4.8% !important;
  height: var(--coin-depth) !important;
  margin-left: -2.4% !important;
  margin-top: calc(var(--coin-depth) / -2) !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,231,145,.18) !important;
  border-right: 1px solid rgba(63,31,5,.28) !important;
  border-radius: 1px !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,237,166,.24) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#f5d06a 0%,#b77d25 23%,#5c350b 49%,#a76f1e 75%,#f0c65d 100%) !important;
  box-shadow: inset 0 0 4px rgba(57,28,4,.32) !important;
  transform-origin: 50% 50% !important;
  transform: rotateZ(var(--edge-angle)) translateY(calc(var(--coin-radius) * -1)) rotateX(90deg) !important;
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
}

html body .minigame-active-coinflip .coinflip-controls {
  bottom: 21.5% !important;
}
@media (max-width:1180px) {
  html body .minigame-active-coinflip .coinflip-controls { bottom: 20.5% !important; }
}
@media (max-width:820px) {
  html body .minigame-active-coinflip .coinflip-controls { bottom: 18.5% !important; }
}

html body .coinflip-game-panel .coinflip-choice-copy {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 72% !important;
  height: auto !important;
  transform: translate(-50%,-47%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0px,.12vw,2px) !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol {
  margin: 0 0 -1px !important;
  line-height: .88 !important;
}
html body .coinflip-game-panel .coinflip-choice-name-row {
  gap: clamp(3px,.38vw,6px) !important;
  margin: 0 !important;
}

html body .coinflip-game-panel .coinflip-flip-button {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-frame {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  inset: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-background {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > span {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}

html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static {
  left: 0 !important;
  right: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  z-index: 3 !important;
  filter: drop-shadow(0 2px 2px rgba(2,13,7,.34)) !important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static.is-a { top: 31% !important; }
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static.is-b { top: 49% !important; }
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static.is-c { top: 68% !important; }
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static.is-d { top: 87% !important; }
html body .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer {
  z-index: 78 !important;
}
html body .history-column > .history-panel.history-panel-dynamic > .history-list > .empty.compact {
  z-index: 62 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .coinflip-game-panel .coinflip-coin-float.is-idle { animation: none !important; }
}

@keyframes bryerCoinRigidFloatV11 {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-11px); }
}
html body .coinflip-game-panel .coinflip-coin-float.is-idle {
  animation: bryerCoinRigidFloatV11 3.8s cubic-bezier(.45,0,.55,1) infinite !important;
  transform-origin: 50% 50% !important;
}
html body .coinflip-game-panel .coinflip-coin-float.is-flipping,
html body .coinflip-game-panel .coinflip-coin-float.is-result {
  animation: none !important;
  transform: translateY(0) !important;
}

html body .coinflip-game-panel .coinflip-coin-rotor {
  --coin-face-scale: 1;
  --coin-front-alpha: 1;
  --coin-back-alpha: 0;
  --coin-edge-alpha: .16;
  --coin-edge-height: 5px;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-origin: 50% 50% !important;
  transform-style: flat !important;
  filter: none !important;
  overflow: visible !important;
  will-change: transform !important;
}
html body .coinflip-game-panel .coinflip-coin-face-plane {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  pointer-events: none !important;
  will-change: opacity !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-heads {
  opacity: var(--coin-front-alpha) !important;
}
html body .coinflip-game-panel .coinflip-coin-plane-tails {
  opacity: var(--coin-back-alpha) !important;
}
html body .coinflip-game-panel .coinflip-coin-face.coinflip-coin-face-heads,
html body .coinflip-game-panel .coinflip-coin-face.coinflip-coin-face-tails {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  transform: scaleY(var(--coin-face-scale)) !important;
  transform-origin: 50% 50% !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  filter: none !important;
  will-change: transform !important;
}
html body .coinflip-game-panel .coinflip-coin-side {
  position: absolute !important;
  left: 2.1% !important;
  right: 2.1% !important;
  top: 50% !important;
  z-index: 7 !important;
  display: block !important;
  height: var(--coin-edge-height) !important;
  min-height: 4px !important;
  border-radius: 999px !important;
  opacity: var(--coin-edge-alpha) !important;
  transform: translateY(-50%) !important;
  transform-origin: 50% 50% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(90deg,rgba(255,239,173,.33) 0 2px,rgba(103,57,10,.14) 2px 4px,transparent 4px 7px),
    linear-gradient(180deg,#ffe490 0%,#c88c2d 20%,#6d3c0b 47%,#a9691b 66%,#f1c65e 86%,#8c5414 100%) !important;
  border-top: 1px solid rgba(255,236,161,.70) !important;
  border-bottom: 1px solid rgba(71,35,5,.76) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,244,190,.22),
    inset 0 -3px 4px rgba(71,34,5,.42),
    0 2px 5px rgba(0,0,0,.27) !important;
  will-change: height, opacity !important;
}
html body .coinflip-game-panel .coinflip-coin-side > i {
  position: absolute !important;
  inset: 1px 0 !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,232,150,.22) 25%,transparent 52%,rgba(67,31,4,.24) 78%,rgba(255,224,127,.10)) !important;
}

html body .coinflip-game-panel .coinflip-coin-depth,
html body .coinflip-game-panel .coinflip-coin-edge {
  display: none !important;
}

html body .coinflip-game-panel .coinflip-coin-motion,
html body .coinflip-game-panel .coinflip-coin-motion.is-idle,
html body .coinflip-game-panel .coinflip-coin-motion.is-flipping,
html body .coinflip-game-panel .coinflip-coin-motion.is-result {
  animation: none !important;
  transform-origin: 50% 50% !important;
}

html body .coinflip-game-panel .coinflip-choice-button {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-frame {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)) !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-frame.is-mirrored {
  transform: scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-bg-image {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-copy {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  transform: translateY(-1%) !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-symbol {
  margin: 0 0 1px !important;
  font-size: clamp(20px,1.7vw,31px) !important;
  line-height: .9 !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(3px,.28vw,5px) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-label {
  font-size: clamp(13px,1.22vw,21px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-name-ornament {
  font-size: clamp(6px,.62vw,10px) !important;
}
html body .coinflip-game-panel .coinflip-choice-button.is-selected .coinflip-choice-frame {
  filter:
    drop-shadow(0 0 3px rgba(255,239,175,.94))
    drop-shadow(0 0 10px rgba(235,199,95,.68))
    drop-shadow(0 8px 12px rgba(0,0,0,.25)) !important;
}

html body .coinflip-game-panel .coinflip-flip-button {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-frame {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-background {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] {
  overflow: visible !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  top: 112px !important;
  bottom: 10px !important;
  z-index: 76 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf {
  position: absolute !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  filter: drop-shadow(0 2px 2px rgba(2,13,7,.34)) !important;
  transform-origin: 50% 100% !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf.is-normal {
  transform: translateY(-100%) !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf.is-mirrored {
  transform: translateY(-100%) scaleX(-1) !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf.is-a {
  top: 34% !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf.is-b {
  top: 52% !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf.is-c {
  top: 70% !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-empty-shared-leaf-layer > .history-empty-shared-leaf.is-d {
  top: 88% !important;
}
html body .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-list > .empty.compact {
  position: relative !important;
  z-index: 82 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .coinflip-game-panel .coinflip-coin-float.is-idle {
    animation: none !important;
    transform: none !important;
  }
}

html body .coinflip-game-panel .coinflip-coin-stage {
  perspective: none !important;
  transform-style: flat !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-coin-float {
  width: 88% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
  transform-style: flat !important;
}
html body .coinflip-game-panel .coinflip-coin-webgl {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 14px 13px rgba(4,13,7,.34)) !important;
}

html body .coinflip-game-panel .coinflip-choice-button {
  width: clamp(230px, 15.7%, 288px) !important;
  height: auto !important;
  aspect-ratio: 288 / 171 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body .coinflip-game-panel .coinflip-choice-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 288 / 171 !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .coinflip-choice-frame.is-mirrored {
  transform: scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-bg-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 78.4722% !important;
  height: 68.4211% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-copy {
  position: absolute !important;
  inset: 15% 11% 12% !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol {
  margin: 0 0 1px !important;
  font-size: clamp(31px, 2.15vw, 42px) !important;
  line-height: .92 !important;
}
html body .coinflip-game-panel .coinflip-choice-name-row {
  margin: 0 !important;
  gap: clamp(7px, .6vw, 11px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-label {
  font-size: clamp(20px, 1.55vw, 29px) !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
}
html body .coinflip-game-panel .coinflip-choice-name-ornament {
  font-size: clamp(10px, .78vw, 14px) !important;
  line-height: 1 !important;
}

html body .coinflip-game-panel .coinflip-flip-button {
  height: auto !important;
  aspect-ratio: 1527 / 498 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body .coinflip-game-panel .coinflip-flip-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1527 / 498 !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .coinflip-flip-background {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  inset: auto !important;
  width: 82.5% !important;
  height: 65% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-flip-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

html body .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-leaf-divider-layer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 92 !important;
}
html body .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-leaf-divider-layer > .history-leaf-divider[data-history-static-leaf] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 1180px) {
  html body .coinflip-game-panel .coinflip-choice-button {
    width: clamp(190px, 20%, 250px) !important;
  }
}
@media (max-width: 820px) {
  html body .coinflip-game-panel .coinflip-choice-button {
    width: 24% !important;
  }
  html body .coinflip-game-panel .coinflip-choice-symbol {
    font-size: clamp(20px, 4.2vw, 32px) !important;
  }
  html body .coinflip-game-panel .coinflip-choice-label {
    font-size: clamp(13px, 3vw, 21px) !important;
  }
}

html body .minigame-active-stage.minigame-active-coinflip .coinflip-panel-background {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 1.4%, rgba(0,0,0,.78) 4.1%, #000 7.2%, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 1.4%, rgba(0,0,0,.78) 4.1%, #000 7.2%, #000 100%) !important;
}
html body .minigame-active-stage.minigame-active-coinflip .coinflip-panel-content::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 7.5% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent) !important;
}

html body .minigame-active-coinflip .coinflip-panel-title-wrap {
  position: absolute !important;
  left: 50% !important;
  top: 1.9% !important;
  width: clamp(250px, 15.5vw, 310px) !important;
  height: auto !important;
  z-index: 11 !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  transition: opacity .48s ease !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel.is-flipping .coinflip-panel-title-wrap,
html body .coinflip-game-panel.is-result .coinflip-panel-title-wrap {
  opacity: 0 !important;
}
html body .minigame-active-coinflip .coinflip-panel-title-wrap > .coinflip-panel-title-image {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.34)) !important;
}
html body .minigame-active-coinflip .coinflip-panel-title-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 35%, rgba(255,244,185,0) 42%, rgba(255,246,198,.96) 50%, rgba(255,218,116,.35) 56%, transparent 64%) !important;
  -webkit-mask: var(--bryer-css-v60-coinfliptitle, url('/images/coinfliptitle.png')) center / contain no-repeat !important;
  mask: var(--bryer-css-v60-coinfliptitle, url('/images/coinfliptitle.png')) center / contain no-repeat !important;
  transform: translateX(-145%) !important;
  opacity: 0 !important;
  animation: bryerCoinTitleShineV14 10s ease-in-out infinite !important;
  mix-blend-mode: screen !important;
}
@keyframes bryerCoinTitleShineV14 {
  0%, 4% {
    transform: translateX(-145%);
    opacity: 0;
  }
  6% { opacity: .9; }
  15% {
    transform: translateX(145%);
    opacity: .78;
  }
  18%, 100% {
    transform: translateX(145%);
    opacity: 0;
  }
}

html body .minigame-active-coinflip .coinflip-coin-stage {
  left: 50% !important;
  top: 4.5% !important;
  width: clamp(330px, 24vw, 460px) !important;
  height: clamp(330px, 24vw, 460px) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-coin-float {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-coin-webgl {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

html body .coinflip-game-panel .coinflip-coin-float.is-idle {
  animation: bryerCoinIdleFloatV10 4.2s ease-in-out infinite !important;
}

html body .minigame-active-coinflip .coinflip-controls {
  bottom: 24.5% !important;
}

html body .coinflip-game-panel .coinflip-choice-button {
  width: clamp(235px, 16%, 300px) !important;
  height: auto !important;
  aspect-ratio: 288 / 171 !important;
}
html body .coinflip-game-panel .coinflip-choice-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
html body .coinflip-game-panel .coinflip-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 4 !important;
}
html body .coinflip-game-panel .coinflip-choice-bg-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 92% !important;
  height: 84% !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  border-radius: clamp(14px, 1vw, 20px) !important;
}
html body .coinflip-game-panel .coinflip-choice-copy {
  inset: 9% 8% 10% !important;
  gap: clamp(8px, .62vw, 12px) !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol {
  margin: 0 !important;
  font-size: clamp(37px, 2.45vw, 50px) !important;
  line-height: .9 !important;
}
html body .coinflip-game-panel .coinflip-choice-name-row {
  gap: clamp(10px, .78vw, 15px) !important;
  margin: 0 !important;
}
html body .coinflip-game-panel .coinflip-choice-label {
  font-size: clamp(25px, 1.78vw, 34px) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
}
html body .coinflip-game-panel .coinflip-choice-name-ornament {
  font-size: clamp(12px, .82vw, 16px) !important;
}

html body .coinflip-game-panel .coinflip-flip-art {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .coinflip-flip-background {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 74% !important;
  height: 56% !important;
  inset: auto !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  clip-path: inset(0 round 999px) !important;
  -webkit-clip-path: inset(0 round 999px) !important;
}

html body .coinflip-game-panel .coinflip-balance-caption > .minigame-heading-branch {
  color: #f0bf45 !important;
  opacity: 1 !important;
  filter: brightness(1.12) saturate(1.22) drop-shadow(0 1px 0 rgba(255,244,176,.56)) drop-shadow(0 2px 3px rgba(93,52,6,.45)) drop-shadow(0 0 6px rgba(239,184,55,.24)) !important;
}
html body .coinflip-game-panel .coinflip-balance-caption > .minigame-heading-branch .branch-stem {
  stroke: #f4cb62 !important;
}
html body .coinflip-game-panel .coinflip-balance-caption > .minigame-heading-branch .branch-leaf {
  fill: #dca534 !important;
  stroke: rgba(255,240,158,.78) !important;
}
html body .coinflip-game-panel .coinflip-panel-balance > strong > span {
  display: inline-block !important;
  color: transparent !important;
  background: linear-gradient(180deg, #fff1a8 0%, #f2cf67 19%, #b77a19 45%, #ffe78b 61%, #d79d2d 78%, #fff0a0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 2px 3px rgba(48,25,3,.34) !important;
  filter: drop-shadow(0 1px 0 rgba(255,239,164,.22)) drop-shadow(0 2px 2px rgba(49,25,3,.42)) !important;
}

html body .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-leaf-divider-layer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: 96 !important;
}
html body .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  z-index: 3 !important;
  filter: drop-shadow(0 2px 2px rgba(2,13,7,.34)) !important;
}
html body .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static.is-normal {
  transform: translateY(-50%) !important;
}
html body .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-leaf-divider-layer > .history-leaf-divider.history-leaf-static.is-mirrored {
  transform: translateY(-50%) scaleX(-1) !important;
}

@media (max-width: 1180px) {
  html body .minigame-active-coinflip .coinflip-panel-title-wrap {
    width: clamp(210px, 21vw, 280px) !important;
    top: 2.2% !important;
  }
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: clamp(285px, 31vw, 380px) !important;
    height: clamp(285px, 31vw, 380px) !important;
    top: 6% !important;
  }
  html body .minigame-active-coinflip .coinflip-controls { bottom: 22.5% !important; }
  html body .coinflip-game-panel .coinflip-choice-button { width: clamp(190px, 21%, 250px) !important; }
  html body .coinflip-game-panel .coinflip-choice-symbol { font-size: clamp(29px, 3vw, 39px) !important; }
  html body .coinflip-game-panel .coinflip-choice-label { font-size: clamp(20px, 2.25vw, 28px) !important; }
}
@media (max-width: 820px) {
  html body .minigame-active-coinflip .coinflip-panel-title-wrap {
    width: 27% !important;
    top: 2.5% !important;
  }
  html body .minigame-active-coinflip .coinflip-coin-stage {
    width: 36% !important;
    height: auto !important;
    top: 7% !important;
  }
  html body .minigame-active-coinflip .coinflip-controls { bottom: 19% !important; }
  html body .coinflip-game-panel .coinflip-choice-button { width: 24% !important; }
  html body .coinflip-game-panel .coinflip-choice-symbol { font-size: clamp(22px, 4vw, 31px) !important; }
  html body .coinflip-game-panel .coinflip-choice-label { font-size: clamp(15px, 3vw, 22px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .minigame-active-coinflip .coinflip-panel-title-wrap::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

html body .coinflip-game-panel .coinflip-panel-title-wrap,
html body .coinflip-game-panel .coinflip-panel-balance,
html body .coinflip-game-panel .coinflip-choice-layer,
html body .coinflip-game-panel .coinflip-result-heading,
html body .coinflip-game-panel .coinflip-coin-stage,
html body .coinflip-game-panel .coinflip-controls,
html body .coinflip-game-panel .coinflip-preview-footnote,
html body .coinflip-game-panel .coinflip-panel-fireflies,
html body .coinflip-game-panel .coinflip-coin-aura {
  position: absolute !important;
}

html body .minigame-active-coinflip .coinflip-panel-title-wrap {
  left: 50% !important;
  top: 1.9% !important;
  width: clamp(220px, 13.8vw, 275px) !important;
  transform: translateX(-50%) !important;
}

html body .coinflip-game-panel .coinflip-panel-fireflies {
  inset: 3% 2.2% 7.5% !important;
  background: transparent url('/images/inventory-fireflies-v128.svg') center / 100% 100% no-repeat !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-panel-fireflies.is-a {
  opacity: .92 !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-panel-fireflies.is-b {
  opacity: .64 !important;
  transform: scaleX(-1) translateY(1.5%) !important;
  filter: brightness(1.14) !important;
}
html body .coinflip-game-panel .coinflip-panel-fireflies.is-c {
  opacity: .46 !important;
  transform: scale(1.035) translateY(-1%) !important;
  filter: brightness(1.2) !important;
}

html body .coinflip-game-panel .coinflip-coin-aura {
  left: 50% !important;
  top: 9.2% !important;
  width: clamp(350px, 27vw, 500px) !important;
  height: clamp(350px, 27vw, 500px) !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .35s ease !important;
}
html body .coinflip-game-panel .coinflip-coin-aura.is-active { opacity: 1 !important; }
html body .coinflip-game-panel .coinflip-energy-flow {
  position: absolute !important;
  left: 50% !important;
  width: 44% !important;
  height: 42% !important;
  transform: translateX(-50%) !important;
  filter: blur(18px) !important;
  opacity: .58 !important;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255,231,137,.34) 0%, rgba(255,201,74,.18) 24%, rgba(255,190,45,.055) 52%, transparent 76%),
    radial-gradient(ellipse at 32% 38%, rgba(255,239,169,.15), transparent 58%),
    radial-gradient(ellipse at 69% 49%, rgba(255,203,72,.12), transparent 62%) !important;
  animation: bryerCoinEnergyBreatheV16 3.4s ease-in-out infinite alternate !important;
}
html body .coinflip-game-panel .coinflip-energy-flow::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 32% !important;
  height: 86% !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent, rgba(255,226,127,.17), rgba(255,210,91,.36), rgba(255,237,166,.09), transparent) !important;
  filter: blur(13px) !important;
  opacity: .75 !important;
}
html body .coinflip-game-panel .coinflip-energy-flow.is-top { top: -28% !important; }
html body .coinflip-game-panel .coinflip-energy-flow.is-top::after { bottom: -54% !important; }
html body .coinflip-game-panel .coinflip-energy-flow.is-bottom {
  bottom: -28% !important;
  transform: translateX(-50%) scaleY(-1) !important;
}
html body .coinflip-game-panel .coinflip-energy-flow.is-bottom::after { bottom: -54% !important; }
@keyframes bryerCoinEnergyBreatheV16 {
  from {
    opacity: .42;
    filter: blur(19px) brightness(.94);
  }
  to {
    opacity: .68;
    filter: blur(15px) brightness(1.12);
  }
}
html body .coinflip-game-panel .coinflip-coin-halo {
  position: absolute !important;
  inset: 22% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,239,166,.24), transparent 35%),
    radial-gradient(circle at 76% 34%, rgba(255,208,82,.22), transparent 38%),
    radial-gradient(circle at 58% 78%, rgba(255,195,54,.18), transparent 43%) !important;
  filter: blur(19px) !important;
  box-shadow: 0 0 22px rgba(255,218,103,.20), 0 0 44px rgba(255,190,47,.12) !important;
  animation: bryerCoinHaloFlowV16 4.6s linear infinite !important;
}
@keyframes bryerCoinHaloFlowV16 {
  0% {
    transform: rotate(0deg) scale(.98);
    opacity: .65;
  }
  50% {
    transform: rotate(180deg) scale(1.04);
    opacity: .92;
  }
  100% {
    transform: rotate(360deg) scale(.98);
    opacity: .65;
  }
}
html body .coinflip-game-panel .coinflip-coin-aura-particle {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  margin: -2.5px 0 0 -2.5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #fff9c8 0 18%, #ffd86d 38%, rgba(255,196,51,.24) 62%, transparent 78%) !important;
  box-shadow: 0 0 7px rgba(255,215,100,.68) !important;
  opacity: 0 !important;
  animation: bryerCoinAuraParticleV16 3.2s ease-in-out infinite !important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-0 {
  transform: translate(-126px,-104px);
  animation-delay:-.1s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-1 {
  transform: translate(112px,-118px);
  animation-delay:-.7s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-2 {
  transform: translate(-92px,126px);
  animation-delay:-1.2s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-3 {
  transform: translate(128px,96px);
  animation-delay:-1.8s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-4 {
  transform: translate(-146px,-24px);
  animation-delay:-2.2s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-5 {
  transform: translate(150px,18px);
  animation-delay:-2.8s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-6 {
  transform: translate(-54px,-144px);
  animation-delay:-.45s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-7 {
  transform: translate(46px,146px);
  animation-delay:-1.05s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-8 {
  transform: translate(-112px,72px);
  animation-delay:-1.55s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-9 {
  transform: translate(103px,-66px);
  animation-delay:-2.05s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-10 {
  transform: translate(-28px,126px);
  animation-delay:-2.55s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-11 {
  transform: translate(24px,-128px);
  animation-delay:-3.0s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-12 {
  transform: translate(-138px,48px);
  animation-delay:-.9s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-13 {
  transform: translate(140px,-42px);
  animation-delay:-1.4s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-14 {
  transform: translate(-74px,-92px);
  animation-delay:-1.95s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-15 {
  transform: translate(78px,88px);
  animation-delay:-2.45s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-16 {
  transform: translate(-18px,-156px);
  animation-delay:-.25s!important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle.p-17 {
  transform: translate(20px,154px);
  animation-delay:-2.75s!important;
}
@keyframes bryerCoinAuraParticleV16 {
  0%,100% {
    opacity:0;
    filter:blur(1px);
  }
  22% { opacity:.82; }
  52% { opacity:.34; }
  76% {
    opacity:.92;
    filter:blur(0);
  }
}

html body .minigame-active-coinflip .coinflip-coin-stage {
  top: 8.2% !important;
  width: clamp(340px, 24.5vw, 465px) !important;
  height: clamp(340px, 24.5vw, 465px) !important;
  overflow: visible !important;
  z-index: 6 !important;
}
html body .coinflip-game-panel .coinflip-coin-float.is-idle {
  animation: none !important;
  transform: none !important;
}

html body .coinflip-game-panel .coinflip-coin-live-reflection {
  position: absolute !important;
  left: 50% !important;
  top: 24% !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 9 !important;
  background: radial-gradient(circle, #fff 0 12%, #fff8c8 23%, #ffd86a 43%, rgba(255,199,55,.34) 64%, transparent 78%) !important;
  box-shadow: 0 0 8px #fff2a9, 0 0 18px rgba(255,218,103,.92), 0 0 34px rgba(255,188,48,.58) !important;
}
html body .coinflip-game-panel.is-flipping .coinflip-coin-live-reflection {
  animation: bryerCoinLiveReflectionV16 1.25s ease-in-out infinite !important;
}
@keyframes bryerCoinLiveReflectionV16 {
  0% {
    opacity:0;
    transform:translate(-52px,7px) scale(.45);
  }
  24% {
    opacity:.96;
    transform:translate(-26px,-2px) scale(1.12);
  }
  49% {
    opacity:.38;
    transform:translate(3px,-7px) scale(.72);
  }
  72% {
    opacity:1;
    transform:translate(34px,-1px) scale(1.25);
  }
  100% {
    opacity:0;
    transform:translate(57px,8px) scale(.42);
  }
}

html body .minigame-active-coinflip .coinflip-choice-button {
  top: 34.8% !important;
  width: clamp(245px, 16.2%, 300px) !important;
  height: auto !important;
  aspect-ratio: 288 / 171 !important;
}
html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left: 11.4% !important; }
html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right: 11.4% !important; }
html body .coinflip-game-panel .coinflip-choice-frame {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: 4 !important;
}
html body .coinflip-game-panel .coinflip-choice-bg-image {
  left: 50% !important;
  top: 50% !important;
  inset: auto !important;
  width: 78.4722% !important;
  height: 68.4211% !important;
  object-fit: fill !important;
  transform: translate(-50%,-50%) !important;
  border-radius: 18px !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-copy {
  inset: 7% 7% 9% !important;
  gap: clamp(7px,.5vw,10px) !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol {
  font-size: clamp(43px,2.8vw,56px) !important;
  line-height: .92 !important;
  margin:0 !important;
}
html body .coinflip-game-panel .coinflip-choice-name-row { gap:clamp(11px,.75vw,16px) !important; }
html body .coinflip-game-panel .coinflip-choice-label {
  font-size: clamp(30px,2.05vw,39px) !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
}
html body .coinflip-game-panel .coinflip-choice-name-ornament { font-size:clamp(14px,.94vw,18px) !important; }

html body .minigame-active-coinflip .coinflip-controls {
  left:50% !important;
  right:auto !important;
  bottom:22.3% !important;
  width:min(650px,58%) !important;
  transform:translateX(-50%) !important;
  gap:clamp(26px,3.8%,38px) !important;
  align-items:center !important;
}
html body .minigame-active-coinflip .coinflip-bet-control {
  flex:1 1 61% !important;
  gap:8px !important;
}
html body .coinflip-game-panel .coinflip-bet-step {
  position:relative !important;
  isolation:isolate !important;
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  display:grid !important;
  place-items:center !important;
  color:#f6dea0 !important;
  font-size:26px !important;
  overflow:visible !important;
}
html body .coinflip-game-panel .coinflip-bet-step-frame {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  z-index:0 !important;
  pointer-events:none !important;
}
html body .coinflip-game-panel .coinflip-bet-step > span {
  position:relative !important;
  z-index:1 !important;
}
html body .coinflip-game-panel .coinflip-bet-field {
  position:relative !important;
  isolation:isolate !important;
  min-width:205px !important;
  height:50px !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
  padding:0 18px !important;
}
html body .coinflip-game-panel .coinflip-bet-field-frame {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  z-index:0 !important;
  pointer-events:none !important;
}
html body .coinflip-game-panel .coinflip-bet-field > input,
html body .coinflip-game-panel .coinflip-bet-field > span {
  position:relative !important;
  z-index:1 !important;
}

html body .minigame-active-coinflip .coinflip-flip-button {
  flex:0 0 29% !important;
  width:29% !important;
  height:auto !important;
  aspect-ratio:1527 / 498 !important;
  background:transparent !important;
}
html body .coinflip-game-panel .coinflip-flip-art {
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
}
html body .coinflip-game-panel .coinflip-flip-frame {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transform:none !important;
  z-index:3 !important;
}
html body .coinflip-game-panel .coinflip-flip-background {
  position:absolute !important;
  left:11% !important;
  right:11% !important;
  top:18% !important;
  bottom:18% !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  object-fit:fill !important;
  transform:none !important;
  border-radius:24px !important;
  clip-path:inset(0 round 24px) !important;
  -webkit-clip-path:inset(0 round 24px) !important;
  z-index:1 !important;
}
html body .coinflip-game-panel .coinflip-flip-label { font-size:inherit !important; }

html body .coinflip-game-panel .coinflip-panel-balance > strong > span {
  background:linear-gradient(180deg,#fff9d6 0%,#ffeaa1 25%,#f6cc66 52%,#fff1b8 72%,#e7b849 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 1px 0 rgba(255,246,194,.22)) drop-shadow(0 2px 2px rgba(49,25,3,.35)) !important;
}

html body .coinflip-game-panel .coinflip-result-heading {
  left:50% !important;
  top:2.8% !important;
  width:min(520px,52%) !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
  z-index:13 !important;
}
html body .coinflip-game-panel .coinflip-result-card {
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body .coinflip-game-panel .coinflip-result-card::before,
html body .coinflip-game-panel .coinflip-result-card::after {
  content:"❧" !important;
  position:absolute !important;
  top:50% !important;
  color:#d9ad48 !important;
  font-size:28px !important;
  text-shadow:0 0 8px rgba(255,213,100,.25) !important;
}
html body .coinflip-game-panel .coinflip-result-card::before {
  right:calc(100% + 10px) !important;
  transform:translateY(-50%);
}
html body .coinflip-game-panel .coinflip-result-card::after {
  left:calc(100% + 10px) !important;
  transform:translateY(-50%) scaleX(-1);
}
html body .coinflip-game-panel .coinflip-result-side {
  color:#f1d786 !important;
  font-size:clamp(14px,.95vw,18px) !important;
  letter-spacing:.17em !important;
}
html body .coinflip-game-panel .coinflip-result-card > strong {
  font-size:clamp(34px,2.5vw,48px) !important;
  line-height:1 !important;
  text-shadow:0 2px 0 rgba(61,31,4,.42),0 0 12px currentColor !important;
}
html body .coinflip-game-panel .coinflip-result-subtitle {
  color:rgba(248,236,194,.78) !important;
  font-size:12px !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}

@media (max-width:1180px) {
  html body .minigame-active-coinflip .coinflip-choice-button {
    top:35% !important;
    width:clamp(195px,21%,250px) !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left:7.5% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right:7.5% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    width:min(610px,78%) !important;
    bottom:21% !important;
  }
}
@media (max-width:820px) {
  html body .minigame-active-coinflip .coinflip-choice-button {
    top:35.5% !important;
    width:24% !important;
  }
  html body .minigame-active-coinflip .coinflip-choice-button.is-heads { left:4% !important; }
  html body .minigame-active-coinflip .coinflip-choice-button.is-tails { right:4% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    width:88% !important;
    bottom:18.5% !important;
    gap:18px !important;
  }
}

html body .coinflip-game-panel .coinflip-choice-button {
  aspect-ratio: 288 / 171 !important;
}
html body .coinflip-game-panel .coinflip-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  z-index: 5 !important;
}
html body .coinflip-game-panel .coinflip-choice-frame.is-mirrored {
  transform: scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-bg-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 88% !important;
  height: auto !important;
  aspect-ratio: 226 / 117 !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 18px !important;
  clip-path: inset(0 round 18px) !important;
  -webkit-clip-path: inset(0 round 18px) !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-copy {
  inset: 4% 5% 6% !important;
  gap: clamp(10px, .72vw, 14px) !important;
}
html body .coinflip-game-panel .coinflip-choice-symbol {
  font-size: clamp(54px, 3.45vw, 72px) !important;
  line-height: .9 !important;
  margin: 0 !important;
}
html body .coinflip-game-panel .coinflip-choice-name-row {
  gap: clamp(12px, .9vw, 18px) !important;
}
html body .coinflip-game-panel .coinflip-choice-label {
  font-size: clamp(38px, 2.7vw, 50px) !important;
  line-height: .96 !important;
  letter-spacing: .025em !important;
}
html body .coinflip-game-panel .coinflip-choice-name-ornament {
  font-size: clamp(17px, 1.15vw, 24px) !important;
}

html body .coinflip-game-panel .coinflip-flip-background {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 68% !important;
  height: auto !important;
  aspect-ratio: 178 / 49 !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  clip-path: inset(0 round 999px) !important;
  -webkit-clip-path: inset(0 round 999px) !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-flip-frame {
  z-index: 4 !important;
}

html body .coinflip-game-panel .coinflip-bet-step {
  background-color: rgba(11,35,21,.84) !important;
  background-image: var(--bryer-css-v60-betsbuttons, url('/images/betsbuttons.png')) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  isolation: isolate !important;
}
html body .coinflip-game-panel .coinflip-bet-step-frame {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
  filter: none !important;
}
html body .coinflip-game-panel .coinflip-bet-step > span {
  z-index: 3 !important;
}
html body .coinflip-game-panel .coinflip-bet-field {
  background-color: rgba(11,35,21,.84) !important;
  background-image: var(--bryer-css-v60-betsbuttons2, url('/images/betsbuttons2.png')) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  isolation: isolate !important;
}
html body .coinflip-game-panel .coinflip-bet-field-frame {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
  filter: none !important;
}
html body .coinflip-game-panel .coinflip-bet-field > input,
html body .coinflip-game-panel .coinflip-bet-field > span {
  z-index: 3 !important;
}

html body .coinflip-game-panel .coinflip-coin-aura {
  opacity: 0 !important;
}
html body .coinflip-game-panel .coinflip-coin-aura.is-active {
  opacity: 1 !important;
}
html body .coinflip-game-panel .coinflip-energy-flow {
  opacity: .92 !important;
  filter: blur(14px) brightness(1.24) !important;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255,241,172,.64) 0%, rgba(255,218,102,.40) 24%, rgba(255,192,42,.15) 50%, transparent 76%),
    radial-gradient(ellipse at 32% 38%, rgba(255,245,190,.28), transparent 57%),
    radial-gradient(ellipse at 69% 49%, rgba(255,215,91,.24), transparent 61%) !important;
  mix-blend-mode: screen !important;
}
html body .coinflip-game-panel .coinflip-energy-flow::after {
  background: linear-gradient(180deg, transparent, rgba(255,238,165,.34), rgba(255,211,85,.62), rgba(255,240,179,.20), transparent) !important;
  opacity: .96 !important;
  filter: blur(10px) !important;
}
html body .coinflip-game-panel .coinflip-energy-flow.is-top {
  top: -23% !important;
}
html body .coinflip-game-panel .coinflip-energy-flow.is-bottom {
  bottom: -10% !important;
}
html body .coinflip-game-panel .coinflip-coin-halo {
  box-shadow:
    0 0 24px rgba(255,232,141,.34),
    0 0 46px rgba(255,207,77,.26),
    0 0 70px rgba(255,184,36,.12) !important;
  filter: blur(14px) !important;
}
html body .coinflip-game-panel .coinflip-coin-aura-particle {
  box-shadow: 0 0 9px rgba(255,231,139,.92), 0 0 16px rgba(255,199,55,.48) !important;
}

html body .nav-cluster > .nav-help-button.nav-help-compact {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

@media (max-width:1180px) {
  html body .coinflip-game-panel .coinflip-choice-symbol { font-size: clamp(41px, 4vw, 56px) !important; }
  html body .coinflip-game-panel .coinflip-choice-label { font-size: clamp(29px, 3vw, 40px) !important; }
}
@media (max-width:820px) {
  html body .coinflip-game-panel .coinflip-choice-symbol { font-size: clamp(30px, 6vw, 43px) !important; }
  html body .coinflip-game-panel .coinflip-choice-label { font-size: clamp(21px, 4.5vw, 31px) !important; }
  html body .nav-cluster > .nav-help-button.nav-help-compact {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    font-size: 20px !important;
  }
}

html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-bg-shell {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 82% !important;
  height: 70% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-bg-shell > .coinflip-choice-bg-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 4 !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-frame.is-mirrored {
  transform: scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-copy {
  position: absolute !important;
  inset: 7% 8% 8% !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, .58vw, 12px) !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-symbol {
  font-size: clamp(48px, 3.2vw, 66px) !important;
  line-height: .9 !important;
  margin: 0 !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-name-row {
  gap: clamp(10px, .72vw, 15px) !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-label {
  font-size: clamp(32px, 2.28vw, 43px) !important;
  line-height: .95 !important;
  letter-spacing: .025em !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-name-ornament {
  font-size: clamp(14px, 1vw, 20px) !important;
}

html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-bg-shell {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 78% !important;
  height: 69% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-bg-shell > .coinflip-flip-background {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 4 !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-label {
  z-index: 5 !important;
}

html body .coinflip-game-panel button.coinflip-bet-step {
  position: relative !important;
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-betsbuttons, url('/images/betsbuttons.png')) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  overflow: visible !important;
}
html body .coinflip-game-panel button.coinflip-bet-step > img.coinflip-bet-step-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel button.coinflip-bet-step > span { z-index: 3 !important; }
html body .coinflip-game-panel label.coinflip-bet-field {
  position: relative !important;
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-betsbuttons2, url('/images/betsbuttons2.png')) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  overflow: visible !important;
}
html body .coinflip-game-panel label.coinflip-bet-field > img.coinflip-bet-field-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel label.coinflip-bet-field > input,
html body .coinflip-game-panel label.coinflip-bet-field > span { z-index: 3 !important; }

html body .coinflip-game-panel .coinflip-energy-flow {
  opacity: .82 !important;
  filter: blur(7px) saturate(1.45) brightness(1.02) !important;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(247,180,45,.72) 0%, rgba(231,145,20,.48) 20%, rgba(193,105,10,.22) 44%, rgba(255,194,48,.07) 63%, transparent 78%),
    radial-gradient(ellipse at 31% 37%, rgba(255,217,101,.34), rgba(220,137,24,.12) 36%, transparent 60%),
    radial-gradient(ellipse at 70% 48%, rgba(255,196,65,.32), rgba(208,119,13,.10) 39%, transparent 64%) !important;
}
html body .coinflip-game-panel .coinflip-energy-flow::after {
  width: 26% !important;
  background: linear-gradient(180deg, transparent 0%, rgba(237,166,40,.20) 20%, rgba(255,211,85,.58) 47%, rgba(216,125,14,.30) 66%, transparent 100%) !important;
  filter: blur(6px) saturate(1.35) !important;
  opacity: .82 !important;
}
html body .coinflip-game-panel .coinflip-coin-halo {
  filter: blur(10px) saturate(1.35) !important;
  box-shadow: 0 0 18px rgba(245,183,47,.30), 0 0 34px rgba(224,137,20,.17) !important;
}

@keyframes bryerCoinIdleFloatV18 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}
html body .coinflip-game-panel .coinflip-coin-float.is-idle {
  animation: bryerCoinIdleFloatV18 3.8s cubic-bezier(.45,0,.55,1) infinite !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
html body .coinflip-game-panel .coinflip-coin-webgl {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

html body header.topbar nav.nav-cluster > button.nav-help-button.nav-help-compact {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  inline-size: 42px !important;
  min-inline-size: 42px !important;
  max-inline-size: 42px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 820px) {
  html body header.topbar nav.nav-cluster > button.nav-help-button.nav-help-compact {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    inline-size: 38px !important;
  }
}

html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-bg-shell {
  left: 6.25% !important;
  top: 16.37% !important;
  width: 87.5% !important;
  height: 67.25% !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-bg-shell > .coinflip-choice-bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 4 !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .coinflip-choice-art > .coinflip-choice-copy {
  inset: 10% 9% 10% !important;
  gap: clamp(5px, .34vw, 7px) !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-symbol {
  font-size: clamp(34px, 2.05vw, 43px) !important;
  line-height: .92 !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-name-row {
  gap: clamp(8px, .55vw, 11px) !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-label {
  font-size: clamp(25px, 1.62vw, 33px) !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
}
html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-name-ornament {
  font-size: clamp(12px, .76vw, 16px) !important;
}

html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-bg-shell {
  left: 7.79% !important;
  top: 16.67% !important;
  width: 84.68% !important;
  height: 72.49% !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-bg-shell > .coinflip-flip-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .coinflip-flip-button > .coinflip-flip-art > .coinflip-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 4 !important;
}

html body .coinflip-game-panel button.coinflip-bet-step {
  isolation: isolate !important;
  background: radial-gradient(circle at 50% 42%, rgba(63,92,64,.97) 0%, rgba(29,54,34,.98) 54%, rgba(12,31,18,.99) 100%) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 10px rgba(190,151,74,.16), 0 3px 8px rgba(3,12,7,.28) !important;
}
html body .coinflip-game-panel button.coinflip-bet-step > img.coinflip-bet-step-frame {
  position: absolute !important;
  inset: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  object-fit: contain !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel button.coinflip-bet-step > span {
  position: relative !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel label.coinflip-bet-field {
  isolation: isolate !important;
  background: linear-gradient(180deg, rgba(50,76,52,.98) 0%, rgba(25,49,30,.99) 50%, rgba(12,30,18,.99) 100%) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 0 12px rgba(197,159,82,.12), 0 3px 9px rgba(3,12,7,.28) !important;
}
html body .coinflip-game-panel label.coinflip-bet-field > img.coinflip-bet-field-frame {
  position: absolute !important;
  inset: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  object-fit: fill !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel label.coinflip-bet-field > input,
html body .coinflip-game-panel label.coinflip-bet-field > span {
  position: relative !important;
  z-index: 3 !important;
}

html body .coinflip-game-panel .coinflip-energy-flow {
  position: absolute !important;
  left: 50% !important;
  width: 68% !important;
  height: 48% !important;
  transform: translateX(-50%) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38% !important;
  opacity: .78 !important;
  filter: blur(10px) saturate(1.35) brightness(1.02) !important;
  background:
    radial-gradient(ellipse 92% 58% at 50% 5%, rgba(236,157,34,.52) 0%, rgba(236,157,34,.34) 28%, rgba(207,116,16,.15) 55%, transparent 78%),
    radial-gradient(ellipse 42% 112% at 50% 94%, rgba(255,222,112,.58) 0%, rgba(244,181,50,.32) 35%, rgba(216,127,19,.10) 63%, transparent 82%),
    radial-gradient(ellipse 28% 92% at 38% 75%, rgba(255,233,148,.20), rgba(222,141,27,.08) 52%, transparent 76%),
    radial-gradient(ellipse 26% 88% at 64% 72%, rgba(255,210,88,.18), rgba(214,123,16,.07) 50%, transparent 78%) !important;
  animation: bryerCoinEnergyOrganicV20 3.7s ease-in-out infinite alternate !important;
}
html body .coinflip-game-panel .coinflip-energy-flow::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 11% !important;
  width: 34% !important;
  height: 88% !important;
  transform: translateX(-50%) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse 76% 100% at 50% 100%, rgba(255,233,146,.55) 0%, rgba(245,188,61,.30) 38%, rgba(213,125,18,.10) 65%, transparent 84%) !important;
  filter: blur(8px) !important;
  opacity: .86 !important;
}
html body .coinflip-game-panel .coinflip-energy-flow.is-top {
  top: -22% !important;
  transform: translateX(-50%) !important;
}
html body .coinflip-game-panel .coinflip-energy-flow.is-bottom {
  bottom: -13% !important;
  transform: translateX(-50%) scaleY(-1) !important;
}
@keyframes bryerCoinEnergyOrganicV20 {
  0% {
    opacity: .68;
    filter: blur(11px) saturate(1.28) brightness(.98);
  }
  50% {
    opacity: .84;
    filter: blur(9px) saturate(1.40) brightness(1.04);
  }
  100% {
    opacity: .74;
    filter: blur(10px) saturate(1.32) brightness(1);
  }
}

@keyframes bryerCoinIdleFloatV20 {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -7px, 0); }
  50% { transform: translate3d(0, -13px, 0); }
  75% { transform: translate3d(0, -7px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
html body .coinflip-game-panel .coinflip-coin-float.is-idle {
  animation: bryerCoinIdleFloatV20 3.65s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
}

@media (max-width:1180px) {
  html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-symbol { font-size: clamp(29px, 3.1vw, 38px) !important; }
  html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-label { font-size: clamp(21px, 2.5vw, 28px) !important; }
}
@media (max-width:820px) {
  html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-symbol { font-size: clamp(24px, 5.2vw, 32px) !important; }
  html body .coinflip-game-panel .coinflip-choice-button .coinflip-choice-label { font-size: clamp(17px, 4vw, 23px) !important; }
}

html body .coinflip-game-panel .coinflip-choice-button > .cfv21-choice-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .cfv21-choice-art > .cfv21-choice-fill {
  position: absolute !important;
  left: 6.8% !important;
  top: 16.9% !important;
  width: 86.4% !important;
  height: 66.2% !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .cfv21-choice-art > .cfv21-choice-fill > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  opacity: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .cfv21-choice-art > .cfv21-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .cfv21-choice-art > .cfv21-choice-frame.is-mirrored {
  transform: scaleX(-1) !important;
}
html body .coinflip-game-panel .coinflip-choice-button > .cfv21-choice-art > .cfv21-choice-copy {
  position: absolute !important;
  inset: 13% 10% 13% !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, .42vw, 9px) !important;
  text-align: center !important;
}
html body .coinflip-game-panel .cfv21-choice-symbol,
html body .coinflip-game-panel .cfv21-choice-label,
html body .coinflip-game-panel .cfv21-choice-ornament {
  background: linear-gradient(180deg,#fff3b4 0%,#f4d37c 28%,#b97b24 58%,#f4d37c 76%,#fff0ad 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 1px 0 rgba(74,39,8,.22), 0 0 7px rgba(236,187,83,.18) !important;
}
html body .coinflip-game-panel .cfv21-choice-symbol {
  display: block !important;
  margin: 0 !important;
  font-size: clamp(36px, 2.25vw, 46px) !important;
  line-height: .9 !important;
}
html body .coinflip-game-panel .cfv21-choice-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, .55vw, 12px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cfv21-choice-label {
  font-size: clamp(26px, 1.7vw, 34px) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  font-weight: 800 !important;
}
html body .coinflip-game-panel .cfv21-choice-ornament {
  font-size: clamp(12px, .82vw, 17px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .coinflip-choice-button.is-selected .cfv21-choice-frame {
  filter: drop-shadow(0 0 5px rgba(255,216,109,.76)) drop-shadow(0 0 12px rgba(219,163,56,.42)) !important;
}

html body .coinflip-game-panel button.coinflip-flip-button.cfv21-flip-button {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
}
html body .coinflip-game-panel button.cfv21-flip-button > .cfv21-flip-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .cfv21-flip-fill {
  position: absolute !important;
  left: 8.1% !important;
  top: 17.05% !important;
  width: 83.8% !important;
  height: 71.7% !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  z-index: 1 !important;
}
html body .coinflip-game-panel .cfv21-flip-fill > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}
html body .coinflip-game-panel .cfv21-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .cfv21-flip-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  font-size: clamp(18px, 1.14vw, 22px) !important;
  letter-spacing: .035em !important;
  pointer-events: none !important;
}

html body .coinflip-game-panel button.coinflip-bet-step.cfv21-bet-step {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .coinflip-game-panel .cfv21-bet-step-fill {
  position: absolute !important;
  inset: 5% !important;
  z-index: 0 !important;
  display: block !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(64,91,63,.99) 0%, rgba(31,57,36,.99) 48%, rgba(15,35,21,.99) 100%) !important;
  box-shadow: inset 0 0 10px rgba(235,195,104,.12), 0 2px 5px rgba(3,12,7,.24) !important;
}
html body .coinflip-game-panel .cfv21-bet-step-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cfv21-bet-step-label {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #f7e3a6 !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel label.coinflip-bet-field.cfv21-bet-field {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .coinflip-game-panel .cfv21-bet-field-fill {
  position: absolute !important;
  inset: 4% 3.5% !important;
  z-index: 0 !important;
  display: block !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(58,84,58,.99) 0%, rgba(28,53,33,.99) 50%, rgba(13,32,19,.99) 100%) !important;
  box-shadow: inset 0 0 12px rgba(232,191,98,.10), 0 2px 6px rgba(3,12,7,.24) !important;
}
html body .coinflip-game-panel .cfv21-bet-field-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel label.cfv21-bet-field > input,
html body .coinflip-game-panel label.cfv21-bet-field > span:not(.cfv21-bet-field-fill) {
  position: relative !important;
  z-index: 3 !important;
}

html body .coinflip-game-panel .cfv21-energy-panel-clip {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .32s ease !important;
}
html body .coinflip-game-panel .cfv21-energy-panel-clip.is-active {
  opacity: 1 !important;
}
html body .coinflip-game-panel .cfv21-energy-panel-clip > .coinflip-energy-flow {
  z-index: 1 !important;
}

@media (max-width: 1180px) {
  html body .coinflip-game-panel .cfv21-choice-symbol { font-size: clamp(30px, 3vw, 38px) !important; }
  html body .coinflip-game-panel .cfv21-choice-label { font-size: clamp(22px, 2.35vw, 28px) !important; }
}
@media (max-width: 820px) {
  html body .coinflip-game-panel .cfv21-choice-symbol { font-size: clamp(25px, 5vw, 32px) !important; }
  html body .coinflip-game-panel .cfv21-choice-label { font-size: clamp(18px, 3.9vw, 23px) !important; }
}

html body .coinflip-game-panel .cf22-choice {
  position: absolute !important;
  top: 34.4% !important;
  width: clamp(230px, 15.8%, 288px) !important;
  aspect-ratio: 288 / 171 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-coinbuttonbg, url('/images/coinbuttonbg.png')) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 78.4722% 68.4211% !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  z-index: 12 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .coinflip-game-panel .cf22-choice.is-heads { left: 10.5% !important; }
html body .coinflip-game-panel .cf22-choice.is-tails { right: 10.5% !important; }
html body .coinflip-game-panel .cf22-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf22-choice-frame.is-mirrored { transform: scaleX(-1) !important; }
html body .coinflip-game-panel .cf22-choice-copy {
  position: absolute !important;
  inset: 11% 9% 12% !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(7px, .48vw, 10px) !important;
  pointer-events: none !important;
  text-align: center !important;
}
html body .coinflip-game-panel .cf22-choice-symbol,
html body .coinflip-game-panel .cf22-choice-label,
html body .coinflip-game-panel .cf22-choice-ornament {
  background: linear-gradient(180deg,#fff5bf 0%,#f2d47f 28%,#b97b25 56%,#f3d27a 76%,#fff1ad 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(70,36,7,.22), 0 0 6px rgba(236,187,83,.18) !important;
}
html body .coinflip-game-panel .cf22-choice-symbol {
  display: block !important;
  margin: 0 !important;
  font-size: clamp(35px, 2.18vw, 44px) !important;
  line-height: .92 !important;
}
html body .coinflip-game-panel .cf22-choice-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, .55vw, 12px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf22-choice-label {
  font-size: clamp(25px, 1.6vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  font-weight: 800 !important;
}
html body .coinflip-game-panel .cf22-choice-ornament {
  font-size: clamp(12px, .78vw, 16px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf22-choice.is-selected .cf22-choice-frame {
  filter: drop-shadow(0 0 5px rgba(255,216,109,.80)) drop-shadow(0 0 12px rgba(219,163,56,.44)) !important;
}
html body .coinflip-game-panel .cf22-choice:hover { transform: translateY(-2px) scale(1.015) !important; }

html body .coinflip-game-panel .cf22-bet-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
html body .coinflip-game-panel .cf22-bet-step {
  position: relative !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#436044 0%,#29422e 52%,#182a1d 100%) !important;
  box-shadow: inset 0 0 10px rgba(238,199,109,.10), 0 2px 5px rgba(4,12,7,.26) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  color: #f5dfa3 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .coinflip-game-panel .cf22-bet-step-frame {
  position: absolute !important;
  inset: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf22-bet-step > span {
  position: relative !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .cf22-bet-field {
  position: relative !important;
  flex: 1 1 210px !important;
  min-width: 190px !important;
  max-width: 235px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg,#3d593f 0%,#243d2a 52%,#14271a 100%) !important;
  box-shadow: inset 0 0 12px rgba(232,191,98,.10), 0 2px 6px rgba(3,12,7,.24) !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .cf22-bet-field-frame {
  position: absolute !important;
  inset: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf22-bet-field > input {
  position: relative !important;
  z-index: 3 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f4ead0 !important;
  text-align: center !important;
}
html body .coinflip-game-panel .cf22-bet-field > span {
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  color: rgba(238,224,183,.76) !important;
}

html body .coinflip-game-panel .cf22-flip-button {
  position: relative !important;
  flex: 0 0 30% !important;
  width: 30% !important;
  max-width: 305px !important;
  min-width: 235px !important;
  aspect-ratio: 1527 / 498 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-flipcoinbutton, url('/images/flipcoinbutton.png')) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 84.7% 72.5% !important;
  box-shadow: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .coinflip-game-panel .cf22-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf22-flip-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

html body .minigame-active-coinflip .coinflip-controls {
  width: min(650px, 58%) !important;
  gap: clamp(26px, 3.8%, 38px) !important;
}

html body .coinflip-game-panel .cf22-coin-float {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  transform: translate3d(0,0,0) !important;
  will-change: transform !important;
}
@keyframes bryerCoinIdleFloatV22 {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-12px,0); }
  100% { transform: translate3d(0,0,0); }
}
html body .coinflip-game-panel .cf22-coin-float.is-idle {
  animation: bryerCoinIdleFloatV22 3.7s cubic-bezier(.45,0,.55,1) infinite !important;
}
html body .coinflip-game-panel .cf22-coin-float.is-flipping,
html body .coinflip-game-panel .cf22-coin-float.is-result {
  animation: none !important;
  transform: translate3d(0,0,0) !important;
}

html body .coinflip-game-panel .cf22-energy {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .30s ease !important;
}
html body .coinflip-game-panel .cf22-energy.is-active { opacity: 1 !important; }
html body .coinflip-game-panel .cf22-energy-flow {
  position: absolute !important;
  left: 50% !important;
  width: 58% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  filter: blur(8px) saturate(1.28) !important;
  opacity: .82 !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 100% at 50% 50%, #000 0 38%, rgba(0,0,0,.74) 58%, transparent 88%) !important;
  mask-image: radial-gradient(ellipse 72% 100% at 50% 50%, #000 0 38%, rgba(0,0,0,.74) 58%, transparent 88%) !important;
}
html body .coinflip-game-panel .cf22-energy-flow.is-top {
  top: 0 !important;
  height: 30% !important;
  background:
    radial-gradient(ellipse 46% 102% at 50% 100%, rgba(255,230,133,.54) 0%, rgba(236,165,48,.34) 30%, rgba(203,112,17,.13) 56%, transparent 82%),
    radial-gradient(ellipse 80% 46% at 50% 6%, rgba(231,143,30,.30) 0%, rgba(223,132,21,.15) 44%, transparent 78%) !important;
}
html body .coinflip-game-panel .cf22-energy-flow.is-bottom {
  bottom: 1.5% !important;
  height: 27% !important;
  background:
    radial-gradient(ellipse 46% 102% at 50% 0%, rgba(255,230,133,.54) 0%, rgba(236,165,48,.34) 30%, rgba(203,112,17,.13) 56%, transparent 82%),
    radial-gradient(ellipse 80% 46% at 50% 94%, rgba(231,143,30,.30) 0%, rgba(223,132,21,.15) 44%, transparent 78%) !important;
}

@media (max-width:1180px) {
  html body .coinflip-game-panel .cf22-choice {
    width: clamp(195px,21%,250px) !important;
    top:35% !important;
  }
  html body .coinflip-game-panel .cf22-choice.is-heads { left:7.5% !important; }
  html body .coinflip-game-panel .cf22-choice.is-tails { right:7.5% !important; }
  html body .coinflip-game-panel .cf22-flip-button { min-width:210px !important; }
  html body .coinflip-game-panel .cf22-choice-symbol { font-size:clamp(29px,3vw,38px) !important; }
  html body .coinflip-game-panel .cf22-choice-label { font-size:clamp(21px,2.35vw,28px) !important; }
}
@media (max-width:820px) {
  html body .coinflip-game-panel .cf22-choice {
    width:24% !important;
    top:35.5% !important;
  }
  html body .coinflip-game-panel .cf22-choice.is-heads { left:4% !important; }
  html body .coinflip-game-panel .cf22-choice.is-tails { right:4% !important; }
  html body .minigame-active-coinflip .coinflip-controls {
    width:88% !important;
    gap:18px !important;
  }
  html body .coinflip-game-panel .cf22-flip-button { min-width:170px !important; }
  html body .coinflip-game-panel .cf22-bet-step {
    flex-basis:42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  html body .coinflip-game-panel .cf22-bet-field {
    min-width:150px !important;
    height:46px !important;
  }
}

html body .coinflip-game-panel .cf23-choice {
  position: absolute !important;
  top: 34.4% !important;
  width: clamp(230px, 15.8%, 288px) !important;
  aspect-ratio: 288 / 171 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-coinbuttonbg, url('/images/coinbuttonbg.png')) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  z-index: 12 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .coinflip-game-panel .cf23-choice.is-heads { left: 10.5% !important; }
html body .coinflip-game-panel .cf23-choice.is-tails { right: 10.5% !important; }
html body .coinflip-game-panel .cf23-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf23-choice-frame.is-mirrored { transform: scaleX(-1) !important; }
html body .coinflip-game-panel .cf23-choice-copy {
  position: absolute !important;
  inset: 10.5% 8% 11.5% !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(7px, .48vw, 10px) !important;
  pointer-events: none !important;
  text-align: center !important;
}
html body .coinflip-game-panel .cf23-choice-symbol,
html body .coinflip-game-panel .cf23-choice-label,
html body .coinflip-game-panel .cf23-choice-ornament {
  background: linear-gradient(180deg,#fff5bf 0%,#f2d47f 28%,#b97b25 56%,#f3d27a 76%,#fff1ad 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(70,36,7,.22), 0 0 6px rgba(236,187,83,.18) !important;
}
html body .coinflip-game-panel .cf23-choice-symbol {
  display: block !important;
  margin: 0 !important;
  font-size: clamp(35px, 2.18vw, 44px) !important;
  line-height: .92 !important;
}
html body .coinflip-game-panel .cf23-choice-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, .55vw, 12px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf23-choice-label {
  font-size: clamp(25px, 1.6vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  font-weight: 800 !important;
}
html body .coinflip-game-panel .cf23-choice-ornament {
  font-size: clamp(12px, .78vw, 16px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf23-choice.is-selected .cf23-choice-frame {
  filter: drop-shadow(0 0 5px rgba(255,216,109,.80)) drop-shadow(0 0 12px rgba(219,163,56,.44)) !important;
}
html body .coinflip-game-panel .cf23-choice:hover { transform: translateY(-2px) scale(1.015) !important; }

html body .coinflip-game-panel .cf23-flip-button {
  position: relative !important;
  flex: 0 0 30% !important;
  width: 30% !important;
  max-width: 305px !important;
  min-width: 235px !important;
  aspect-ratio: 1527 / 498 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-flipcoinbutton, url('/images/flipcoinbutton.png')) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .coinflip-game-panel .cf23-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf23-flip-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  color: #f5e6b1 !important;
  -webkit-text-fill-color: #f5e6b1 !important;
  background: none !important;
  text-shadow: 0 1px 0 rgba(60,29,5,.48), 0 0 5px rgba(247,214,126,.18) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf23-flip-button:disabled { opacity: .62 !important; }

html body .coinflip-game-panel .cf23-energy {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .30s ease !important;
  overflow: visible !important;
}
html body .coinflip-game-panel .cf23-energy.is-active { opacity: 1 !important; }
html body .coinflip-game-panel .cf23-energy-flow {
  position: absolute !important;
  left: 50% !important;
  width: 68% !important;
  height: 42% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38% !important;
  opacity: .76 !important;
  filter: blur(10px) saturate(1.34) brightness(1.01) !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse 92% 58% at 50% 5%, rgba(236,157,34,.50) 0%, rgba(236,157,34,.31) 28%, rgba(207,116,16,.12) 55%, transparent 78%),
    radial-gradient(ellipse 42% 112% at 50% 94%, rgba(255,222,112,.55) 0%, rgba(244,181,50,.29) 35%, rgba(216,127,19,.08) 63%, transparent 82%),
    radial-gradient(ellipse 28% 92% at 38% 75%, rgba(255,233,148,.19), rgba(222,141,27,.07) 52%, transparent 76%),
    radial-gradient(ellipse 26% 88% at 64% 72%, rgba(255,210,88,.17), rgba(214,123,16,.06) 50%, transparent 78%) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 7%, #000 18%, #000 82%, rgba(0,0,0,.32) 94%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 7%, #000 18%, #000 82%, rgba(0,0,0,.32) 94%, transparent 100%) !important;
  animation: bryerCoinEnergyOrganicV23 3.7s ease-in-out infinite alternate !important;
}
html body .coinflip-game-panel .cf23-energy-flow::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 11% !important;
  width: 34% !important;
  height: 88% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse 76% 100% at 50% 100%, rgba(255,233,146,.51) 0%, rgba(245,188,61,.27) 38%, rgba(213,125,18,.08) 65%, transparent 84%) !important;
  filter: blur(8px) !important;
  opacity: .83 !important;
}
html body .coinflip-game-panel .cf23-energy-flow.is-top {
  top: 0 !important;
}
html body .coinflip-game-panel .cf23-energy-flow.is-bottom {
  bottom: 3.5% !important;
  transform: translateX(-50%) scaleY(-1) !important;
}
@keyframes bryerCoinEnergyOrganicV23 {
  0% {
    opacity: .67;
    filter: blur(11px) saturate(1.28) brightness(.98);
  }
  50% {
    opacity: .82;
    filter: blur(9px) saturate(1.38) brightness(1.03);
  }
  100% {
    opacity: .73;
    filter: blur(10px) saturate(1.31) brightness(1);
  }
}

@media (max-width:1180px) {
  html body .coinflip-game-panel .cf23-choice {
    width: clamp(195px,21%,250px) !important;
    top:35% !important;
  }
  html body .coinflip-game-panel .cf23-choice.is-heads { left:7.5% !important; }
  html body .coinflip-game-panel .cf23-choice.is-tails { right:7.5% !important; }
  html body .coinflip-game-panel .cf23-flip-button { min-width:210px !important; }
  html body .coinflip-game-panel .cf23-choice-symbol { font-size:clamp(29px,3vw,38px) !important; }
  html body .coinflip-game-panel .cf23-choice-label { font-size:clamp(21px,2.35vw,28px) !important; }
}
@media (max-width:820px) {
  html body .coinflip-game-panel .cf23-choice {
    width:24% !important;
    top:35.5% !important;
  }
  html body .coinflip-game-panel .cf23-choice.is-heads { left:4% !important; }
  html body .coinflip-game-panel .cf23-choice.is-tails { right:4% !important; }
  html body .coinflip-game-panel .cf23-flip-button { min-width:170px !important; }
}

html body .coinflip-game-panel .cf24-choice {
  position: absolute !important;
  top: 34.4% !important;
  width: clamp(230px, 15.8%, 288px) !important;
  aspect-ratio: 288 / 171 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  z-index: 12 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf24-choice.is-heads { left: 10.5% !important; }
html body .coinflip-game-panel .cf24-choice.is-tails { right: 10.5% !important; }
html body .coinflip-game-panel .cf24-choice-stack {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf24-choice-bg {
  position: absolute !important;
  left: 5.56% !important;
  top: 15.20% !important;
  width: 88.54% !important;
  height: 68.42% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 1 !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf24-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 2 !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf24-choice-frame.is-mirrored { transform: scaleX(-1) !important; }
html body .coinflip-game-panel .cf24-choice-copy {
  position: absolute !important;
  left: 5.56% !important;
  top: 15.20% !important;
  width: 88.54% !important;
  height: 68.42% !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(7px, .48vw, 10px) !important;
  pointer-events: none !important;
  text-align: center !important;
}
html body .coinflip-game-panel .cf24-choice-symbol,
html body .coinflip-game-panel .cf24-choice-label,
html body .coinflip-game-panel .cf24-choice-ornament {
  background: linear-gradient(180deg,#fff5bf 0%,#f2d47f 28%,#b97b25 56%,#f3d27a 76%,#fff1ad 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(70,36,7,.22), 0 0 6px rgba(236,187,83,.18) !important;
}
html body .coinflip-game-panel .cf24-choice-symbol {
  display: block !important;
  margin: 0 !important;
  font-size: clamp(35px, 2.18vw, 44px) !important;
  line-height: .92 !important;
}
html body .coinflip-game-panel .cf24-choice-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, .55vw, 12px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf24-choice-label {
  font-size: clamp(25px, 1.6vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  font-weight: 800 !important;
}
html body .coinflip-game-panel .cf24-choice-ornament {
  font-size: clamp(12px, .78vw, 16px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf24-choice.is-selected .cf24-choice-frame {
  filter: drop-shadow(0 0 5px rgba(255,216,109,.80)) drop-shadow(0 0 12px rgba(219,163,56,.44)) !important;
}
html body .coinflip-game-panel .cf24-choice:hover { transform: translateY(-2px) scale(1.015) !important; }

html body .coinflip-game-panel .cf24-flip-button {
  position: relative !important;
  flex: 0 0 30% !important;
  width: 30% !important;
  max-width: 305px !important;
  min-width: 235px !important;
  aspect-ratio: 1527 / 498 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .coinflip-game-panel .cf24-flip-stack {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf24-flip-bg {
  position: absolute !important;
  left: 7.66% !important;
  top: 16.47% !important;
  width: 84.81% !important;
  height: 72.69% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 1 !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf24-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 2 !important;
  transform: none !important;
}
html body .coinflip-game-panel .cf24-flip-label {
  position: absolute !important;
  left: 7.66% !important;
  top: 16.47% !important;
  width: 84.81% !important;
  height: 72.69% !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  color: #f5e6b1 !important;
  -webkit-text-fill-color: #f5e6b1 !important;
  background: none !important;
  text-shadow: 0 1px 0 rgba(60,29,5,.48), 0 0 5px rgba(247,214,126,.18) !important;
  font-size: clamp(17px, 1.12vw, 22px) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf24-flip-button:disabled { opacity: .62 !important; }

html body .coinflip-game-panel .cf24-energy-window {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transition: opacity .30s ease !important;
}
html body .coinflip-game-panel .cf24-energy-window.is-active { opacity: 1 !important; }
html body .coinflip-game-panel .cf24-energy-flow {
  position: absolute !important;
  left: 50% !important;
  width: 68% !important;
  height: 48% !important;
  transform: translateX(-50%) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38% !important;
  opacity: .78 !important;
  filter: blur(10px) saturate(1.35) brightness(1.02) !important;
  background:
    radial-gradient(ellipse 92% 58% at 50% 5%, rgba(236,157,34,.52) 0%, rgba(236,157,34,.34) 28%, rgba(207,116,16,.15) 55%, transparent 78%),
    radial-gradient(ellipse 42% 112% at 50% 94%, rgba(255,222,112,.58) 0%, rgba(244,181,50,.32) 35%, rgba(216,127,19,.10) 63%, transparent 82%),
    radial-gradient(ellipse 28% 92% at 38% 75%, rgba(255,233,148,.20), rgba(222,141,27,.08) 52%, transparent 76%),
    radial-gradient(ellipse 26% 88% at 64% 72%, rgba(255,210,88,.18), rgba(214,123,16,.07) 50%, transparent 78%) !important;
  animation: bryerCoinEnergyOrganicV24 3.7s ease-in-out infinite alternate !important;
}
html body .coinflip-game-panel .cf24-energy-flow::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 11% !important;
  width: 34% !important;
  height: 88% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse 76% 100% at 50% 100%, rgba(255,233,146,.55) 0%, rgba(245,188,61,.30) 38%, rgba(213,125,18,.10) 65%, transparent 84%) !important;
  filter: blur(8px) !important;
  opacity: .86 !important;
}
html body .coinflip-game-panel .cf24-energy-flow.is-top {
  top: -22% !important;
}
html body .coinflip-game-panel .cf24-energy-flow.is-bottom {
  bottom: -13% !important;
  transform: translateX(-50%) scaleY(-1) !important;
}
@keyframes bryerCoinEnergyOrganicV24 {
  0% {
    opacity: .68;
    filter: blur(11px) saturate(1.28) brightness(.98);
  }
  50% {
    opacity: .84;
    filter: blur(9px) saturate(1.40) brightness(1.04);
  }
  100% {
    opacity: .74;
    filter: blur(10px) saturate(1.32) brightness(1);
  }
}

@media (max-width:1180px) {
  html body .coinflip-game-panel .cf24-choice {
    width: clamp(195px,21%,250px) !important;
    top:35% !important;
  }
  html body .coinflip-game-panel .cf24-choice.is-heads { left:7.5% !important; }
  html body .coinflip-game-panel .cf24-choice.is-tails { right:7.5% !important; }
  html body .coinflip-game-panel .cf24-flip-button { min-width:210px !important; }
  html body .coinflip-game-panel .cf24-choice-symbol { font-size:clamp(29px,3vw,38px) !important; }
  html body .coinflip-game-panel .cf24-choice-label { font-size:clamp(21px,2.35vw,28px) !important; }
}
@media (max-width:820px) {
  html body .coinflip-game-panel .cf24-choice {
    width:24% !important;
    top:35.5% !important;
  }
  html body .coinflip-game-panel .cf24-choice.is-heads { left:4% !important; }
  html body .coinflip-game-panel .cf24-choice.is-tails { right:4% !important; }
  html body .coinflip-game-panel .cf24-flip-button { min-width:170px !important; }
}

html body .coinflip-game-panel .coinflip-choice-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-layer > .cf25-choice {
  pointer-events: auto !important;
}
html body .coinflip-game-panel .cf25-choice {
  position: absolute !important;
  top: 37.2% !important;
  width: clamp(220px, 15.4%, 275px) !important;
  aspect-ratio: 1.9 / 1 !important;
  border: 1.5px solid rgba(212, 170, 92, .72) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(81, 129, 104, .26) 0%, rgba(81, 129, 104, .12) 30%, transparent 64%),
    linear-gradient(180deg, rgba(30, 71, 55, .96) 0%, rgba(22, 57, 43, .98) 52%, rgba(15, 44, 34, .99) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 176, .12),
    inset 0 18px 24px rgba(107, 166, 132, .09),
    0 14px 24px rgba(6, 18, 12, .22) !important;
  color: #f3d88b !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html body .coinflip-game-panel .cf25-choice::before {
  content: "" !important;
  position: absolute !important;
  inset: 9px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(213, 168, 90, .48) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 237, 180, .05) !important;
}
html body .coinflip-game-panel .cf25-choice::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-right: 1.5px solid rgba(212,170,92,.72) !important;
  border-bottom: 1.5px solid rgba(212,170,92,.72) !important;
  background: linear-gradient(180deg, rgba(40,86,63,.96), rgba(17,48,35,.98)) !important;
  box-shadow: 0 0 0 1px rgba(255,239,176,.06) inset !important;
}
html body .coinflip-game-panel .cf25-choice:hover,
html body .coinflip-game-panel .cf25-choice:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(229, 192, 112, .95) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 239, 176, .16), 0 16px 28px rgba(6,18,12,.26), 0 0 18px rgba(214,175,95,.14) !important;
}
html body .coinflip-game-panel .cf25-choice.is-selected {
  border-color: rgba(247, 217, 127, .96) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 188, .22), 0 0 0 1px rgba(247, 217, 127, .18), 0 0 22px rgba(241, 205, 109, .28), 0 16px 28px rgba(6,18,12,.28) !important;
}
html body .coinflip-game-panel .cf25-choice.is-heads { left: 3.4% !important; }
html body .coinflip-game-panel .cf25-choice.is-tails { right: 3.4% !important; }
html body .coinflip-game-panel .cf25-choice-inner {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,239,189,.16), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(255,228,142,.1), transparent 16%),
    linear-gradient(180deg, rgba(80, 127, 102, .16), transparent 56%),
    radial-gradient(circle at 50% 44%, rgba(97, 162, 124, .16), transparent 58%) !important;
}
html body .coinflip-game-panel .cf25-choice-copy {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf25-choice-symbol {
  font-size: clamp(28px, 1.95vw, 38px) !important;
  line-height: 1 !important;
  color: #f6d986 !important;
  text-shadow: 0 1px 0 rgba(76, 42, 8, .34), 0 0 8px rgba(255, 220, 124, .16) !important;
}
html body .coinflip-game-panel .cf25-choice-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf25-choice-ornament {
  font-style: normal !important;
  font-size: 13px !important;
  color: rgba(244, 214, 128, .86) !important;
}
html body .coinflip-game-panel .cf25-choice-label {
  font-size: clamp(20px, 1.5vw, 29px) !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  color: #f0d58b !important;
  text-shadow: 0 1px 0 rgba(76, 42, 8, .3), 0 0 10px rgba(255, 220, 124, .12) !important;
}

html body .coinflip-game-panel .coinflip-controls {
  z-index: 9 !important;
}
html body .coinflip-game-panel .cf25-flip-button {
  position: relative !important;
  flex: 0 0 clamp(220px, 17.2%, 300px) !important;
  width: clamp(220px, 17.2%, 300px) !important;
  height: clamp(54px, 4vw, 68px) !important;
  border: 1.5px solid rgba(212,170,92,.78) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(40, 89, 61, .98) 0%, rgba(27, 68, 49, .99) 50%, rgba(18, 50, 37, .99) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,239,176,.12), inset 0 14px 18px rgba(95, 151, 118, .12), 0 14px 24px rgba(6,18,12,.22) !important;
  color: #f2d88d !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html body .coinflip-game-panel .cf25-flip-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214, 171, 94, .46) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 238, 181, .04) !important;
}
html body .coinflip-game-panel .cf25-flip-button:hover:not(:disabled),
html body .coinflip-game-panel .cf25-flip-button:focus-visible:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: rgba(229, 192, 112, .95) !important;
  box-shadow: inset 0 0 0 1px rgba(255,239,176,.18), 0 16px 28px rgba(6,18,12,.26), 0 0 18px rgba(214,175,95,.14) !important;
}
html body .coinflip-game-panel .cf25-flip-button:disabled { opacity: .72 !important; }
html body .coinflip-game-panel .cf25-flip-inner {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,237,180,.16), transparent 18%),
    radial-gradient(circle at 82% 70%, rgba(255,228,142,.1), transparent 16%),
    linear-gradient(180deg, rgba(96, 150, 118, .16), transparent 58%) !important;
}
html body .coinflip-game-panel .cf25-flip-label {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  font-size: clamp(18px, 1.25vw, 25px) !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  color: #f0d58b !important;
  text-shadow: 0 1px 0 rgba(76,42,8,.3), 0 0 10px rgba(255,220,124,.12) !important;
}

html body .coinflip-game-panel .cf25-coin-glow {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: opacity .28s ease !important;
}
html body .coinflip-game-panel .cf25-coin-glow.is-active { opacity: 1 !important; }
html body .coinflip-game-panel .cf25-coin-glow-stream {
  position: absolute !important;
  left: 50% !important;
  width: min(66%, 860px) !important;
  height: 24% !important;
  transform: translateX(-50%) !important;
  opacity: .88 !important;
  filter: blur(14px) saturate(1.08) !important;
}
html body .coinflip-game-panel .cf25-coin-glow-stream.is-top {
  top: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 223, 124, .92) 0%, rgba(255, 217, 115, .56) 20%, rgba(250, 201, 84, .22) 38%, rgba(250, 201, 84, 0) 66%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 231, 166, .30) 0%, rgba(255, 220, 126, .12) 22%, rgba(255, 220, 126, 0) 54%) !important;
  mask-image: radial-gradient(ellipse 70% 112% at 50% 0%, #000 0%, #000 44%, rgba(0,0,0,.78) 56%, rgba(0,0,0,0) 82%);
  -webkit-mask-image: radial-gradient(ellipse 70% 112% at 50% 0%, #000 0%, #000 44%, rgba(0,0,0,.78) 56%, rgba(0,0,0,0) 82%);
}
html body .coinflip-game-panel .cf25-coin-glow-stream.is-bottom {
  bottom: 8.8% !important;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 223, 124, .82) 0%, rgba(255, 214, 108, .46) 20%, rgba(250, 201, 84, .18) 38%, rgba(250, 201, 84, 0) 66%),
    radial-gradient(ellipse at 50% 42%, rgba(255, 231, 166, .22) 0%, rgba(255, 220, 126, .08) 22%, rgba(255, 220, 126, 0) 54%) !important;
  mask-image: radial-gradient(ellipse 70% 112% at 50% 100%, #000 0%, #000 44%, rgba(0,0,0,.78) 56%, rgba(0,0,0,0) 82%);
  -webkit-mask-image: radial-gradient(ellipse 70% 112% at 50% 100%, #000 0%, #000 44%, rgba(0,0,0,.78) 56%, rgba(0,0,0,0) 82%);
}
html body .coinflip-game-panel .cf25-coin-glow-halo {
  position: absolute !important;
  left: 50% !important;
  top: 32.1% !important;
  width: clamp(180px, 14.8%, 238px) !important;
  height: clamp(180px, 14.8vw, 238px) !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 228, 143, .16) 0%, rgba(255, 208, 86, .10) 42%, rgba(255, 199, 74, 0) 70%) !important;
  box-shadow: 0 0 22px rgba(255, 209, 92, .16), 0 0 44px rgba(255, 196, 74, .08) !important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,245,202,1) 0%, rgba(255,216,106,.88) 42%, rgba(255,205,72,0) 72%) !important;
  box-shadow: 0 0 8px rgba(255,215,97,.52) !important;
  animation: cf25CoinSpark 4.2s linear infinite !important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-0 {
  transform: translate(-152px,-118px);
  animation-delay:0s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-1 {
  transform: translate(146px,-92px);
  animation-delay:-.6s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-2 {
  transform: translate(-108px,108px);
  animation-delay:-1.1s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-3 {
  transform: translate(124px,128px);
  animation-delay:-1.6s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-4 {
  transform: translate(-184px,12px);
  animation-delay:-2.1s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-5 {
  transform: translate(186px,-14px);
  animation-delay:-2.5s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-6 {
  transform: translate(-58px,-154px);
  animation-delay:-3s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-7 {
  transform: translate(54px,154px);
  animation-delay:-3.4s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-8 {
  transform: translate(-126px,68px);
  animation-delay:-.8s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-9 {
  transform: translate(122px,-66px);
  animation-delay:-1.4s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-10 {
  transform: translate(-32px,126px);
  animation-delay:-2.2s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-11 {
  transform: translate(28px,-126px);
  animation-delay:-2.9s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-12 {
  transform: translate(-172px,56px);
  animation-delay:-1.8s!important;
}
html body .coinflip-game-panel .cf25-coin-glow-particle.p-13 {
  transform: translate(176px,44px);
  animation-delay:-3.6s!important;
}
@keyframes cf25CoinSpark {
  0%,100% { opacity: 0; }
  18% { opacity: .86; }
  54% { opacity: .32; }
  76% { opacity: .92; }
}

@media (max-width: 1400px) {
  html body .coinflip-game-panel .cf25-choice { width: clamp(190px, 18%, 240px) !important; }
  html body .coinflip-game-panel .cf25-flip-button {
    width: clamp(200px, 18%, 260px) !important;
    flex-basis: clamp(200px, 18%, 260px) !important;
  }
}
@media (max-width: 1120px) {
  html body .coinflip-game-panel .cf25-choice {
    width: clamp(170px, 22%, 210px) !important;
    top: 36.4% !important;
  }
  html body .coinflip-game-panel .cf25-choice-symbol { font-size: clamp(24px, 3vw, 30px) !important; }
  html body .coinflip-game-panel .cf25-choice-label { font-size: clamp(17px, 2.1vw, 24px) !important; }
  html body .coinflip-game-panel .cf25-flip-button {
    width: clamp(184px, 24%, 230px) !important;
    flex-basis: clamp(184px, 24%, 230px) !important;
  }
}

html body .coinflip-game-panel .coinflip-choice-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-layer > .cf26-choice {
  pointer-events: auto !important;
}
html body .coinflip-game-panel .cf26-choice {
  position: absolute !important;
  top: 37.9% !important;
  width: clamp(190px, 13.5%, 236px) !important;
  height: clamp(94px, 7.2vw, 126px) !important;
  border: 2px solid rgba(184, 138, 73, .85) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(34,81,61,.98) 0%, rgba(22,61,46,.99) 54%, rgba(16,47,37,.99) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,236,174,.10), inset 0 12px 20px rgba(110,160,125,.10), 0 10px 18px rgba(5,16,11,.24) !important;
  overflow: visible !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html body .coinflip-game-panel .cf26-choice.is-heads { left: 12.2% !important; }
html body .coinflip-game-panel .cf26-choice.is-tails { right: 12.2% !important; }
html body .coinflip-game-panel .cf26-choice::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(209, 167, 94, .56) !important;
}
html body .coinflip-game-panel .cf26-choice::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-right: 2px solid rgba(184, 138, 73, .85) !important;
  border-bottom: 2px solid rgba(184, 138, 73, .85) !important;
  background: linear-gradient(180deg, rgba(30,74,55,.98), rgba(16,48,36,.99)) !important;
}
html body .coinflip-game-panel .cf26-choice:hover,
html body .coinflip-game-panel .cf26-choice:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(219, 179, 102, .96) !important;
  box-shadow: inset 0 0 0 1px rgba(255,236,174,.14), 0 12px 22px rgba(5,16,11,.26), 0 0 16px rgba(222,181,100,.14) !important;
}
html body .coinflip-game-panel .cf26-choice.is-selected {
  border-color: rgba(240, 206, 120, .98) !important;
  box-shadow: inset 0 0 0 1px rgba(255,236,174,.22), 0 0 0 1px rgba(240,206,120,.20), 0 0 22px rgba(240,206,120,.22), 0 12px 22px rgba(5,16,11,.26) !important;
}
html body .coinflip-game-panel .cf26-choice-inner {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 25% 24%, rgba(255,236,180,.12), transparent 16%),
    radial-gradient(circle at 78% 74%, rgba(255,225,140,.08), transparent 18%),
    radial-gradient(circle at 50% 40%, rgba(107,170,128,.18), transparent 58%) !important;
}
html body .coinflip-game-panel .cf26-choice-copy {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf26-choice-symbol {
  font-size: clamp(26px, 1.75vw, 34px) !important;
  line-height: 1 !important;
  color: #f3d88b !important;
  text-shadow: 0 1px 0 rgba(69,39,8,.28), 0 0 8px rgba(255,219,120,.18) !important;
}
html body .coinflip-game-panel .cf26-choice-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf26-choice-ornament {
  font-style: normal !important;
  font-size: 11px !important;
  color: rgba(243, 215, 133, .82) !important;
}
html body .coinflip-game-panel .cf26-choice-label {
  font-size: clamp(18px, 1.28vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: #efd58c !important;
  text-shadow: 0 1px 0 rgba(69,39,8,.28), 0 0 8px rgba(255,219,120,.14) !important;
}

html body .coinflip-game-panel .coinflip-controls {
  width: min(520px, 62%) !important;
  bottom: 22.6% !important;
  gap: 12px !important;
  z-index: 9 !important;
}
html body .coinflip-game-panel .cf26-bet-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
}
html body .coinflip-game-panel .cf26-bet-step {
  position: relative !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(183,138,72,.82) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(33,77,57,.98), rgba(18,49,36,.99)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,237,182,.08), 0 8px 16px rgba(5,15,10,.20) !important;
  color: #f0d58b !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf26-bet-step:hover:not(:disabled),
html body .coinflip-game-panel .cf26-bet-step:focus-visible:not(:disabled) {
  border-color: rgba(218,178,101,.96) !important;
  transform: translateY(-1px) !important;
}
html body .coinflip-game-panel .cf26-bet-step:disabled { opacity: .72 !important; }
html body .coinflip-game-panel .cf26-bet-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 174px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(183,138,72,.82) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(28,68,51,.99), rgba(16,46,35,.99)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,237,182,.08), 0 8px 16px rgba(5,15,10,.18) !important;
}
html body .coinflip-game-panel .cf26-bet-field > input {
  flex: 1 1 auto !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  text-align: center !important;
  color: #f3efe1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
html body .coinflip-game-panel .cf26-bet-field > span {
  margin-left: 8px !important;
  color: #e9cb80 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html body .coinflip-game-panel .cf26-flip-button {
  position: relative !important;
  flex: 0 0 198px !important;
  width: 198px !important;
  height: 48px !important;
  border: 1.5px solid rgba(183,138,72,.86) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(35,79,58,.98), rgba(18,49,37,.99)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,237,182,.10), 0 10px 18px rgba(5,15,10,.22) !important;
  overflow: hidden !important;
  color: #efd58c !important;
}
html body .coinflip-game-panel .cf26-flip-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(209,167,94,.48) !important;
}
html body .coinflip-game-panel .cf26-flip-inner {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,236,180,.12), transparent 18%),
    radial-gradient(circle at 82% 74%, rgba(255,225,140,.08), transparent 18%),
    radial-gradient(circle at 50% 40%, rgba(107,170,128,.16), transparent 58%) !important;
}
html body .coinflip-game-panel .cf26-flip-label {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  color: #efd58c !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-shadow: 0 1px 0 rgba(69,39,8,.28), 0 0 8px rgba(255,219,120,.14) !important;
}
html body .coinflip-game-panel .cf26-flip-button:hover:not(:disabled),
html body .coinflip-game-panel .cf26-flip-button:focus-visible:not(:disabled) {
  border-color: rgba(218,178,101,.96) !important;
  transform: translateY(-1px) !important;
}
html body .coinflip-game-panel .cf26-flip-button:disabled { opacity: .72 !important; }

html body .coinflip-game-panel .cf26-coin-glow {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: opacity .28s ease !important;
}
html body .coinflip-game-panel .cf26-coin-glow.is-active { opacity: 1 !important; }
html body .coinflip-game-panel .cf26-coin-glow-stream {
  position: absolute !important;
  left: 50% !important;
  width: 54% !important;
  transform: translateX(-50%) !important;
  filter: blur(12px) !important;
  opacity: .95 !important;
}
html body .coinflip-game-panel .cf26-coin-glow-stream.is-top {
  top: -2% !important;
  height: 31% !important;
  background:
    radial-gradient(ellipse 78% 74% at 50% 8%, rgba(255, 222, 120, .62) 0%, rgba(255, 210, 96, .34) 26%, rgba(255, 202, 84, .14) 42%, rgba(255, 200, 80, 0) 66%),
    radial-gradient(ellipse 28% 74% at 50% 94%, rgba(255, 232, 166, .50) 0%, rgba(255, 221, 123, .18) 32%, rgba(255,221,123,0) 60%) !important;
}
html body .coinflip-game-panel .cf26-coin-glow-stream.is-bottom {
  bottom: 16.5% !important;
  height: 21% !important;
  background:
    radial-gradient(ellipse 78% 72% at 50% 100%, rgba(255, 221, 118, .52) 0%, rgba(255, 208, 94, .28) 28%, rgba(255, 200, 82, .12) 44%, rgba(255, 200, 82, 0) 66%),
    radial-gradient(ellipse 28% 74% at 50% 0%, rgba(255, 232, 166, .42) 0%, rgba(255, 221, 123, .16) 32%, rgba(255,221,123,0) 60%) !important;
}
html body .coinflip-game-panel .cf26-coin-glow-halo {
  position: absolute !important;
  left: 50% !important;
  top: 33.4% !important;
  width: 222px !important;
  height: 222px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,226,136,.18) 0%, rgba(255,209,89,.10) 38%, rgba(255,199,74,0) 68%) !important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,244,203,1) 0%, rgba(255,216,106,.84) 42%, rgba(255,205,72,0) 72%) !important;
  box-shadow: 0 0 7px rgba(255,215,97,.48) !important;
  animation: cf26CoinSpark 3.9s linear infinite !important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-0 {
  transform: translate(-138px,-114px);
  animation-delay:0s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-1 {
  transform: translate(134px,-102px);
  animation-delay:-.55s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-2 {
  transform: translate(-106px,96px);
  animation-delay:-1.1s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-3 {
  transform: translate(118px,108px);
  animation-delay:-1.55s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-4 {
  transform: translate(-166px,2px);
  animation-delay:-2.0s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-5 {
  transform: translate(170px,-8px);
  animation-delay:-2.45s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-6 {
  transform: translate(-56px,-144px);
  animation-delay:-2.9s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-7 {
  transform: translate(50px,142px);
  animation-delay:-3.35s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-8 {
  transform: translate(-120px,60px);
  animation-delay:-.75s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-9 {
  transform: translate(118px,-58px);
  animation-delay:-1.35s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-10 {
  transform: translate(-32px,120px);
  animation-delay:-2.1s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-11 {
  transform: translate(28px,-124px);
  animation-delay:-2.7s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-12 {
  transform: translate(-156px,44px);
  animation-delay:-1.65s!important;
}
html body .coinflip-game-panel .cf26-coin-glow-particle.p-13 {
  transform: translate(160px,40px);
  animation-delay:-3.4s!important;
}
@keyframes cf26CoinSpark {
  0%,100% { opacity: 0; }
  18% { opacity: .82; }
  52% { opacity: .28; }
  74% { opacity: .88; }
}

@media (max-width: 1400px) {
  html body .coinflip-game-panel .cf26-choice {
    width: clamp(176px, 15%, 212px) !important;
    height: clamp(88px, 7vw, 116px) !important;
  }
  html body .coinflip-game-panel .cf26-choice.is-heads { left: 10.8% !important; }
  html body .coinflip-game-panel .cf26-choice.is-tails { right: 10.8% !important; }
  html body .coinflip-game-panel .coinflip-controls { width: min(470px, 66%) !important; }
}
@media (max-width: 1120px) {
  html body .coinflip-game-panel .cf26-choice {
    width: clamp(156px, 18%, 192px) !important;
    height: clamp(82px, 7vw, 104px) !important;
    top: 37.2% !important;
  }
  html body .coinflip-game-panel .cf26-choice.is-heads { left: 8% !important; }
  html body .coinflip-game-panel .cf26-choice.is-tails { right: 8% !important; }
  html body .coinflip-game-panel .cf26-choice-symbol { font-size: clamp(22px, 2.8vw, 28px) !important; }
  html body .coinflip-game-panel .cf26-choice-label { font-size: clamp(16px, 2vw, 21px) !important; }
  html body .coinflip-game-panel .coinflip-controls {
    width: min(420px, 72%) !important;
    gap: 10px !important;
  }
  html body .coinflip-game-panel .cf26-bet-field { min-width: 152px !important; }
  html body .coinflip-game-panel .cf26-flip-button {
    width: 176px !important;
    flex-basis: 176px !important;
  }
}

html body .coinflip-game-panel .coinflip-choice-layer > .cf27-choice {
  pointer-events: auto !important;
}
html body .coinflip-game-panel .cf27-choice {
  position: absolute !important;
  top: 37.9% !important;
  width: clamp(190px, 13.5%, 236px) !important;
  height: clamp(94px, 7.2vw, 126px) !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
  transition: transform .18s ease, filter .18s ease !important;
}
html body .coinflip-game-panel .cf27-choice.is-heads { left: 12.2% !important; }
html body .coinflip-game-panel .cf27-choice.is-tails { right: 12.2% !important; }
html body .coinflip-game-panel .cf27-choice:hover,
html body .coinflip-game-panel .cf27-choice:focus-visible {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 10px 18px rgba(6,18,12,.22)) drop-shadow(0 0 10px rgba(223,186,104,.16)) !important;
}
html body .coinflip-game-panel .cf27-choice.is-selected {
  filter: drop-shadow(0 0 16px rgba(240,206,120,.34)) drop-shadow(0 10px 18px rgba(6,18,12,.22)) !important;
}
html body .coinflip-game-panel .cf27-choice-stack {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf27-choice-bg,
html body .coinflip-game-panel .cf27-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
}
html body .coinflip-game-panel .cf27-choice-bg { z-index: 1 !important; }
html body .coinflip-game-panel .cf27-choice-frame { z-index: 2 !important; }
html body .coinflip-game-panel .cf27-choice-frame.is-mirrored { transform: scaleX(-1) !important; }
html body .coinflip-game-panel .cf27-choice-copy {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .cf27-choice-symbol {
  font-size: clamp(26px, 1.75vw, 34px) !important;
  line-height: 1 !important;
  color: #f3d88b !important;
  text-shadow: 0 1px 0 rgba(69,39,8,.28), 0 0 8px rgba(255,219,120,.18) !important;
}
html body .coinflip-game-panel .cf27-choice-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf27-choice-ornament {
  font-style: normal !important;
  font-size: 11px !important;
  color: rgba(243,215,133,.82) !important;
}
html body .coinflip-game-panel .cf27-choice-label {
  font-size: clamp(18px, 1.28vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: #efd58c !important;
  text-shadow: 0 1px 0 rgba(69,39,8,.28), 0 0 8px rgba(255,219,120,.14) !important;
}

html body .coinflip-game-panel .coinflip-controls {
  width: min(520px, 62%) !important;
  bottom: 22.6% !important;
  gap: 12px !important;
  z-index: 9 !important;
}
html body .coinflip-game-panel .cf27-bet-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
}
html body .coinflip-game-panel .cf27-bet-step {
  position: relative !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(33,77,57,.98), rgba(18,49,36,.99)) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 16px rgba(5,15,10,.20) !important;
  overflow: hidden !important;
  color: #f0d58b !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf27-bet-step-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf27-bet-step > span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf27-bet-step:hover:not(:disabled),
html body .coinflip-game-panel .cf27-bet-step:focus-visible:not(:disabled) { transform: translateY(-1px) !important; }
html body .coinflip-game-panel .cf27-bet-step:disabled { opacity: .72 !important; }
html body .coinflip-game-panel .cf27-bet-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 174px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(28,68,51,.99), rgba(16,46,35,.99)) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 16px rgba(5,15,10,.18) !important;
  overflow: hidden !important;
}
html body .coinflip-game-panel .cf27-bet-field-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf27-bet-field > input,
html body .coinflip-game-panel .cf27-bet-field > span {
  position: relative !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf27-bet-field > input {
  flex: 1 1 auto !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  text-align: center !important;
  color: #f3efe1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
html body .coinflip-game-panel .cf27-bet-field > span {
  margin-left: 8px !important;
  color: #e9cb80 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body .coinflip-game-panel .cf27-flip-button {
  position: relative !important;
  flex: 0 0 198px !important;
  width: 198px !important;
  height: 48px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #efd58c !important;
}
html body .coinflip-game-panel .cf27-flip-stack {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf27-flip-bg,
html body .coinflip-game-panel .cf27-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
}
html body .coinflip-game-panel .cf27-flip-bg { z-index: 1 !important; }
html body .coinflip-game-panel .cf27-flip-frame { z-index: 2 !important; }
html body .coinflip-game-panel .cf27-flip-label {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  color: #efd58c !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-shadow: 0 1px 0 rgba(69,39,8,.28), 0 0 8px rgba(255,219,120,.14) !important;
}
html body .coinflip-game-panel .cf27-flip-button:hover:not(:disabled),
html body .coinflip-game-panel .cf27-flip-button:focus-visible:not(:disabled) {
  transform: translateY(-1px) !important;
  filter: drop-shadow(0 10px 18px rgba(6,18,12,.22)) drop-shadow(0 0 10px rgba(223,186,104,.16)) !important;
}
html body .coinflip-game-panel .cf27-flip-button:disabled { opacity: .72 !important; }

@media (max-width: 1400px) {
  html body .coinflip-game-panel .cf27-choice {
    width: clamp(176px, 15%, 212px) !important;
    height: clamp(88px, 7vw, 116px) !important;
  }
  html body .coinflip-game-panel .cf27-choice.is-heads { left: 10.8% !important; }
  html body .coinflip-game-panel .cf27-choice.is-tails { right: 10.8% !important; }
  html body .coinflip-game-panel .coinflip-controls { width: min(470px, 66%) !important; }
}
@media (max-width: 1120px) {
  html body .coinflip-game-panel .cf27-choice {
    width: clamp(156px, 18%, 192px) !important;
    height: clamp(82px, 7vw, 104px) !important;
    top: 37.2% !important;
  }
  html body .coinflip-game-panel .cf27-choice.is-heads { left: 8% !important; }
  html body .coinflip-game-panel .cf27-choice.is-tails { right: 8% !important; }
  html body .coinflip-game-panel .cf27-choice-symbol { font-size: clamp(22px, 2.8vw, 28px) !important; }
  html body .coinflip-game-panel .cf27-choice-label { font-size: clamp(16px, 2vw, 21px) !important; }
  html body .coinflip-game-panel .coinflip-controls {
    width: min(420px, 72%) !important;
    gap: 10px !important;
  }
  html body .coinflip-game-panel .cf27-bet-field { min-width: 152px !important; }
  html body .coinflip-game-panel .cf27-flip-button {
    width: 176px !important;
    flex-basis: 176px !important;
  }
}

html body .coinflip-game-panel .cf27-choice-bg,
html body .coinflip-game-panel .cf27-choice-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
html body .coinflip-game-panel .cf27-choice-frame.is-mirrored {
  transform: scaleX(-1) !important;
}

html body .coinflip-game-panel .cf27-flip-bg,
html body .coinflip-game-panel .cf27-flip-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body .coinflip-game-panel .cf27-choice,
html body .coinflip-game-panel .cf27-flip-button {
  overflow: visible !important;
}

html body .coinflip-game-panel .cf27-choice-stack,
html body .coinflip-game-panel .cf27-flip-stack {
  overflow: visible !important;
}

html body .coinflip-game-panel .cf27-choice-bg,
html body .coinflip-game-panel .cf27-choice-frame,
html body .coinflip-game-panel .cf27-flip-bg,
html body .coinflip-game-panel .cf27-flip-frame {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: translate(-50%, -50%) !important;
}

html body .coinflip-game-panel .cf27-choice-frame.is-mirrored {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}

html body .coinflip-game-panel .coinflip-choice-layer > .cf30-choice {
  pointer-events: auto !important;
}
html body .coinflip-game-panel .cf30-choice {
  position: absolute !important;
  top: 37.9% !important;
  width: clamp(190px, 13.5%, 236px) !important;
  height: clamp(94px, 7.2vw, 126px) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transition: transform .18s ease, filter .18s ease !important;
}
html body .coinflip-game-panel .cf30-choice.is-heads { left: 15.2% !important; }
html body .coinflip-game-panel .cf30-choice.is-tails { right: 15.2% !important; }
html body .coinflip-game-panel .cf30-choice-stack {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 12px 11px rgba(4, 16, 9, .34)) drop-shadow(0 3px 3px rgba(3, 10, 6, .26)) !important;
  transition: filter .2s ease !important;
}

html body .coinflip-game-panel .cf30-choice-bg,
html body .coinflip-game-panel .cf30-choice-frame {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: translate(-50%, -50%) !important;
}
html body .coinflip-game-panel .cf30-choice-bg { z-index: 1 !important; }
html body .coinflip-game-panel .cf30-choice-frame { z-index: 2 !important; }
html body .coinflip-game-panel .cf30-choice-frame.is-mirrored {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}
html body .coinflip-game-panel .cf30-choice:hover,
html body .coinflip-game-panel .cf30-choice:focus-visible {
  transform: translateY(-2px) !important;
}

html body .coinflip-game-panel .cf30-choice.is-selected .cf30-choice-frame {
  filter:
    drop-shadow(0 0 2px rgba(255, 244, 190, .78))
    drop-shadow(0 0 6px rgba(237, 196, 95, .55))
    drop-shadow(0 0 11px rgba(221, 164, 55, .28)) !important;
}
html body .coinflip-game-panel .cf30-choice.is-selected .cf30-choice-stack {
  filter: drop-shadow(0 12px 11px rgba(4,16,9,.34)) !important;
}
html body .coinflip-game-panel .cf30-choice-copy {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 3 !important;
}
html body .coinflip-game-panel .cf30-choice-symbol {
  font-size: clamp(26px, 1.75vw, 34px) !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf30-choice-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}
html body .coinflip-game-panel .cf30-choice-ornament {
  font-style: normal !important;
  font-size: 11px !important;
}
html body .coinflip-game-panel .cf30-choice-label {
  font-size: clamp(18px, 1.28vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

html body .coinflip-game-panel .coinflip-controls {
  left: 50% !important;
  right: auto !important;
  width: min(470px, 56%) !important;
  bottom: 22.6% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  z-index: 9 !important;
}
html body .coinflip-game-panel .cf30-bet-control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
html body .coinflip-game-panel .cf30-bet-step {
  position: relative !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(33,77,57,.98), rgba(18,49,36,.99)) !important;
  border-radius: 9px !important;
  box-shadow: 0 7px 14px rgba(5,15,10,.20) !important;
  overflow: hidden !important;
}
html body .coinflip-game-panel .cf30-bet-step-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf30-bet-step > span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
html body .coinflip-game-panel .cf30-bet-step:hover:not(:disabled),
html body .coinflip-game-panel .cf30-bet-step:focus-visible:not(:disabled) {
  transform: translateY(-1px) !important;
}
html body .coinflip-game-panel .cf30-bet-step:disabled { opacity: .72 !important; }
html body .coinflip-game-panel .cf30-bet-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 148px !important;
  width: 148px !important;
  min-width: 148px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(28,68,51,.99), rgba(16,46,35,.99)) !important;
  border-radius: 10px !important;
  box-shadow: 0 7px 14px rgba(5,15,10,.18) !important;
  overflow: hidden !important;
}
html body .coinflip-game-panel .cf30-bet-field-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf30-bet-field > input,
html body .coinflip-game-panel .cf30-bet-field > span {
  position: relative !important;
  z-index: 2 !important;
}
html body .coinflip-game-panel .cf30-bet-field > input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 3px !important;
  border: 0 !important;
  outline: 0 !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
html body .coinflip-game-panel .cf30-bet-field > span {
  flex: 0 0 auto !important;
  margin-left: 5px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html body .coinflip-game-panel .cf30-flip-button {
  position: relative !important;
  flex: 0 0 182px !important;
  width: 182px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease !important;
}
html body .coinflip-game-panel .cf30-flip-stack {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 9px 10px rgba(4,15,9,.26)) !important;
}
html body .coinflip-game-panel .cf30-flip-bg,
html body .coinflip-game-panel .cf30-flip-frame {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: translate(-50%, -50%) !important;
}
html body .coinflip-game-panel .cf30-flip-bg { z-index: 1 !important; }
html body .coinflip-game-panel .cf30-flip-frame { z-index: 2 !important; }
html body .coinflip-game-panel .cf30-flip-label {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf30-flip-button:hover:not(:disabled),
html body .coinflip-game-panel .cf30-flip-button:focus-visible:not(:disabled) {
  transform: translateY(-1px) !important;
}

html body .coinflip-game-panel .cf30-flip-button.is-awaiting-choice {
  opacity: .74 !important;
  filter: saturate(.82) brightness(.84) !important;
  cursor: help !important;
}
html body .coinflip-game-panel .cf30-flip-button.is-awaiting-choice:hover,
html body .coinflip-game-panel .cf30-flip-button.is-awaiting-choice:focus-visible {
  opacity: .86 !important;
  filter: saturate(.92) brightness(.92) !important;
}
html body .coinflip-game-panel .cf30-flip-button:disabled {
  opacity: .58 !important;
  cursor: default !important;
}
html body .coinflip-game-panel .cf30-flip-tooltip {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 10px) !important;
  transform: translateX(-50%) translateY(4px) !important;
  z-index: 30 !important;
  width: max-content !important;
  max-width: 220px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(215,177,96,.32) !important;
  border-radius: 7px !important;
  background: rgba(8, 24, 15, .96) !important;
  box-shadow: 0 7px 18px rgba(2,10,6,.34) !important;
  color: #f3dfaa !important;
  font: 700 12px/1.2 Georgia, "Times New Roman", serif !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .cf30-flip-button.is-awaiting-choice:hover .cf30-flip-tooltip,
html body .coinflip-game-panel .cf30-flip-button.is-awaiting-choice:focus-visible .cf30-flip-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

html body .coinflip-game-panel .cf30-choice-symbol,
html body .coinflip-game-panel .cf30-choice-label,
html body .coinflip-game-panel .cf30-choice-ornament,
html body .coinflip-game-panel .coinflip-bet-label,
html body .coinflip-game-panel .cf30-bet-step > span,
html body .coinflip-game-panel .cf30-flip-label,
html body .coinflip-game-panel .coinflip-balance-caption > span {
  background-image: linear-gradient(180deg, #fff0b7 0%, #e8bd62 26%, #fff2bd 45%, #b97d24 68%, #efd27d 100%) !important;
  background-size: 100% 160% !important;
  background-position: 50% 35% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(65,35,6,.16), 0 0 7px rgba(255,217,110,.09) !important;
}

html body .coinflip-game-panel .cf30-bet-field > input,
html body .coinflip-game-panel .cf30-bet-field > span,
html body .coinflip-game-panel .coinflip-panel-balance > strong > span {
  background-image: linear-gradient(180deg, #fffbe0 0%, #ffedb0 28%, #f4c967 57%, #fff4c6 100%) !important;
  background-size: 100% 170% !important;
  background-position: 50% 36% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(69,38,7,.12), 0 0 6px rgba(255,225,138,.08) !important;
}

html body .coinflip-game-panel .coinflip-panel-balance,
html body .coinflip-game-panel .coinflip-choice-layer,
html body .coinflip-game-panel .coinflip-controls {
  transition: opacity .38s ease, transform .38s ease, visibility .38s ease !important;
}
html body .coinflip-game-panel.is-starting .coinflip-panel-balance,
html body .coinflip-game-panel.is-starting .coinflip-choice-layer,
html body .coinflip-game-panel.is-starting .coinflip-controls,
html body .coinflip-game-panel.is-flipping .coinflip-panel-balance,
html body .coinflip-game-panel.is-flipping .coinflip-controls,
html body .coinflip-game-panel.is-result .coinflip-panel-balance,
html body .coinflip-game-panel.is-result .coinflip-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html body .coinflip-game-panel .coinflip-choice-layer.is-exiting {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .coinflip-game-panel .cf30-coin-float {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  transform: translate3d(0,0,0) !important;
  will-change: transform !important;
}
@keyframes bryerCoinIdleFloatV30 {
  0%   { transform: translate3d(0, 0px, 0); }
  12.5%{ transform: translate3d(0, -3.8px, 0); }
  25%  { transform: translate3d(0, -7px, 0); }
  37.5%{ transform: translate3d(0, -9.2px, 0); }
  50%  { transform: translate3d(0, -10px, 0); }
  62.5%{ transform: translate3d(0, -9.2px, 0); }
  75%  { transform: translate3d(0, -7px, 0); }
  87.5%{ transform: translate3d(0, -3.8px, 0); }
  100% { transform: translate3d(0, 0px, 0); }
}
html body .coinflip-game-panel .cf30-coin-float.is-idle,
html body .coinflip-game-panel .cf30-coin-float.is-starting {
  animation: bryerCoinIdleFloatV30 3.6s linear infinite !important;
}
html body .coinflip-game-panel .cf30-coin-float.is-flipping,
html body .coinflip-game-panel .cf30-coin-float.is-result {
  animation: none !important;
  transform: translate3d(0,0,0) !important;
}

@media (max-width: 1400px) {
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 13.6% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 13.6% !important; }
  html body .coinflip-game-panel .coinflip-controls {
    width: min(440px, 62%) !important;
    gap: 14px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field {
    flex-basis: 138px !important;
    width: 138px !important;
    min-width: 138px !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    flex-basis: 172px !important;
    width: 172px !important;
  }
}
@media (max-width: 1120px) {
  html body .coinflip-game-panel .cf30-choice { top: 37.4% !important; }
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 10.2% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 10.2% !important; }
  html body .coinflip-game-panel .coinflip-controls {
    width: min(405px, 72%) !important;
    gap: 10px !important;
  }
  html body .coinflip-game-panel .cf30-bet-step {
    flex-basis: 35px !important;
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field {
    flex-basis: 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    height: 38px !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    flex-basis: 160px !important;
    width: 160px !important;
    height: 42px !important;
  }
}

html body .coinflip-game-panel .cf30-choice {
  top: 37.15% !important;
}
html body .coinflip-game-panel .cf30-choice.is-heads {
  left: 17.2% !important;
}
html body .coinflip-game-panel .cf30-choice.is-tails {
  right: 17.2% !important;
}
html body .coinflip-game-panel .cf30-choice-copy {
  gap: 7px !important;
}
html body .coinflip-game-panel .cf30-choice-symbol {
  font-size: clamp(30px, 2vw, 38px) !important;
}
html body .coinflip-game-panel .cf30-choice-name-row {
  gap: 9px !important;
}
html body .coinflip-game-panel .cf30-choice-ornament {
  font-size: 12px !important;
}
html body .coinflip-game-panel .cf30-choice-label {
  font-size: clamp(20px, 1.42vw, 27px) !important;
}

html body .coinflip-game-panel .coinflip-bet-label {
  background-image: none !important;
  color: #e9c76f !important;
  -webkit-text-fill-color: #e9c76f !important;
  text-shadow:
    -1px 0 1px rgba(0,0,0,.48),
    1px 0 1px rgba(0,0,0,.48),
    0 -1px 1px rgba(0,0,0,.42),
    0 1px 1px rgba(0,0,0,.58),
    0 0 5px rgba(0,0,0,.24) !important;
}

html body .coinflip-game-panel .cf30-bet-field {
  display: grid !important;
  grid-template-columns: 76px 22px !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 4px !important;
  flex: 0 0 142px !important;
  width: 142px !important;
  min-width: 142px !important;
  padding: 0 8px !important;
}
html body .coinflip-game-panel .cf30-bet-field > input {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-self: center !important;
}
html body .coinflip-game-panel .cf30-bet-field > span {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  margin: 0 !important;
  text-align: center !important;
  justify-self: center !important;
}

html body .coinflip-game-panel .cf30-flip-button {
  flex: 0 0 164px !important;
  width: 164px !important;
  height: 40px !important;
  margin-left: 12px !important;
}
html body .coinflip-game-panel .cf30-flip-stack {
  transform: scale(.88) !important;
  transform-origin: 50% 50% !important;
}
html body .coinflip-game-panel .cf30-flip-label {
  font-size: 16.5px !important;
}

html body .coinflip-game-panel .cf30-coin-float.is-idle,
html body .coinflip-game-panel .cf30-coin-float.is-starting {
  animation: none !important;
  will-change: transform !important;
}
html body .coinflip-game-panel .cf30-coin-float.is-flipping,
html body .coinflip-game-panel .cf30-coin-float.is-result {
  animation: none !important;
}

@media (max-width: 1400px) {
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 15.4% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 15.4% !important; }
  html body .coinflip-game-panel .cf30-bet-field {
    flex-basis: 136px !important;
    width: 136px !important;
    min-width: 136px !important;
    grid-template-columns: 72px 22px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field > input {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    flex-basis: 158px !important;
    width: 158px !important;
  }
}
@media (max-width: 1120px) {
  html body .coinflip-game-panel .cf30-choice { top: 36.8% !important; }
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 11.2% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 11.2% !important; }
  html body .coinflip-game-panel .cf30-choice-symbol { font-size: clamp(25px, 3vw, 31px) !important; }
  html body .coinflip-game-panel .cf30-choice-label { font-size: clamp(18px, 2.3vw, 23px) !important; }
  html body .coinflip-game-panel .cf30-bet-field {
    flex-basis: 126px !important;
    width: 126px !important;
    min-width: 126px !important;
    grid-template-columns: 64px 20px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field > input {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field > span {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    flex-basis: 150px !important;
    width: 150px !important;
    height: 38px !important;
  }
}

html body .coinflip-game-panel .cf30-choice-symbol,
html body .coinflip-game-panel .cf30-choice-label,
html body .coinflip-game-panel .cf30-choice-ornament,
html body .coinflip-game-panel .cf30-flip-label {
  background-image: linear-gradient(180deg, #fff1ba 0%, #e3b557 24%, #fff0b7 43%, #b1701f 70%, #e6bf66 100%) !important;
  background-size: 100% 160% !important;
  background-position: 50% 34% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(66,34,6,.22), 0 0 6px rgba(255,206,92,.08) !important;
}

html body .coinflip-game-panel .cf30-choice-symbol,
html body .coinflip-game-panel .cf30-choice-label,
html body .coinflip-game-panel .cf30-choice-ornament,
html body .coinflip-game-panel .cf30-flip-label {
  background-image: linear-gradient(180deg, #ffe7a1 0%, #d49b33 24%, #fff0bf 38%, #ab6716 62%, #c98b27 82%, #f0c96f 100%) !important;
  background-size: 100% 180% !important;
  background-position: 50% 30% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(58,29,4,.32), 0 0 5px rgba(241,180,58,.10) !important;
}

html body .coinflip-game-panel .cf30-choice-symbol,
html body .coinflip-game-panel .cf30-choice-label,
html body .coinflip-game-panel .cf30-choice-ornament,
html body .coinflip-game-panel .cf30-flip-label {
  background-image: linear-gradient(
    180deg,
    #fff6cf 0%,
    #f6d77f 18%,
    #dda843 36%,
    #fff1bd 52%,
    #c88725 72%,
    #e9b955 88%,
    #fff0b0 100%
  ) !important;
  background-size: 100% 170% !important;
  background-position: 50% 32% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(86, 47, 8, .24), 0 0 4px rgba(255, 213, 108, .08) !important;
}

html body .coinflip-game-panel .cf30-choice-symbol,
html body .coinflip-game-panel .cf30-choice-label,
html body .coinflip-game-panel .cf30-choice-ornament,
html body .coinflip-game-panel .cf30-flip-label {
  background-image: linear-gradient(
    180deg,
    #fff8d7 0%,
    #ffe38f 14%,
    #f2bf46 30%,
    #fff1b8 46%,
    #d28a19 63%,
    #f0b93d 82%,
    #fff0a8 100%
  ) !important;
  background-size: 100% 165% !important;
  background-position: 50% 34% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(96, 50, 6, .24), 0 0 5px rgba(255, 203, 76, .14) !important;
  filter: saturate(1.18) brightness(1.06) !important;
}

html body .coinflip-game-panel .cf30-choice-symbol,
html body .coinflip-game-panel .cf30-choice-label,
html body .coinflip-game-panel .cf30-choice-ornament,
html body .coinflip-game-panel .cf30-flip-label {
  background-image: linear-gradient(
    180deg,
    #fff7d2 0%,
    #f8dc86 16%,
    #eab24a 32%,
    #fff0ba 48%,
    #c98320 66%,
    #ebb44a 84%,
    #fff0ac 100%
  ) !important;
  background-size: 100% 168% !important;
  background-position: 50% 33% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(90, 47, 7, .24), 0 0 4px rgba(255, 205, 80, .10) !important;
  filter: saturate(1.06) brightness(1.03) !important;
}

html body .minigame-selector-center {
  width: min(1548px, calc(100% - 40px)) !important;
}
html body .minigame-card-row {
  gap: 14px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}
html body .minigame-card {
  flex: 0 1 366px !important;
  width: min(366px, calc((100% - 42px) / 4)) !important;
  height: auto !important;
  aspect-ratio: 366 / 549 !important;
}

html body .minigame-card-frame {
  width: 100% !important;
  height: 100% !important;
}

@media (min-width: 1900px) {
  html body .minigame-selector-center {
    width: 1548px !important;
  }
  html body .minigame-card {
    flex: 0 0 366px !important;
    width: 366px !important;
    height: 549px !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 980px) {
  html body .minigame-selector-center {
    width: calc(100% - 84px) !important;
  }
  html body .minigame-card-row {
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  html body .minigame-card {
    flex: 0 0 min(366px, 72vw) !important;
    width: min(366px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 366 / 549 !important;
  }
}

@media (max-width: 680px) {
  html body .minigame-selector-center {
    width: 100% !important;
  }
  html body .minigame-card {
    flex-basis: min(366px, 76vw) !important;
    width: min(366px, 76vw) !important;
  }
}

@media (min-width: 981px) {
  html body .minigame-character-left {
    left: clamp(-112px, -5.3vw, -58px) !important;
  }
  html body .minigame-character-right {
    right: clamp(-126px, -6vw, -70px) !important;
  }
}

html body .minigame-card.is-selected .minigame-card-frame {
  filter:
    drop-shadow(0 0 1px rgba(255, 238, 170, .88))
    drop-shadow(0 0 5px rgba(242, 205, 99, .58))
    drop-shadow(0 0 12px rgba(219, 168, 52, .34))
    drop-shadow(0 9px 9px rgba(0, 0, 0, .30)) !important;
}
html body .minigame-card-coinflip .minigame-card-hover-art {
  transform: translate3d(calc(var(--card-hover-parallax-x) + 1px), calc(var(--card-hover-parallax-y) - 1px), 0) scale(1) !important;
  filter: brightness(1) drop-shadow(0 0 0 rgba(244, 214, 109, 0)) !important;
  transition:
    transform .42s cubic-bezier(.16,.82,.22,1),
    filter .34s ease,
    opacity .28s ease !important;
}
html body .minigame-card-coinflip:hover .minigame-card-hover-art,
html body .minigame-card-coinflip:focus-visible .minigame-card-hover-art {
  z-index: 9 !important;
  transform: translate3d(calc(var(--card-hover-parallax-x) + 5px), calc(var(--card-hover-parallax-y) - 6px), 0) scale(1.14) !important;
  filter:
    brightness(1.065)
    drop-shadow(0 0 6px rgba(246, 214, 106, .18))
    drop-shadow(0 0 14px rgba(246, 214, 106, .14))
    drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
}

html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel::after {
  content: "" !important;
  position: absolute !important;
  left: clamp(26px, 2.7%, 40px) !important;
  top: clamp(24px, 3.3%, 36px) !important;
  width: clamp(220px, 19vw, 300px) !important;
  height: clamp(56px, 5vw, 82px) !important;
  background-image: var(--bryer-css-v60-coinflipdesc, url('/images/coinflipdesc.png')) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left top !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  html body .minigame-card-coinflip:hover .minigame-card-hover-art,
  html body .minigame-card-coinflip:focus-visible .minigame-card-hover-art {
    transform: translate3d(calc(var(--card-hover-parallax-x) + 4px), calc(var(--card-hover-parallax-y) - 5px), 0) scale(1.125) !important;
  }
}

@media (max-width: 980px) {
  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel::after {
    left: 18px !important;
    top: 18px !important;
    width: min(41vw, 250px) !important;
    height: 58px !important;
  }
}

html body .main-layout.main-layout-minigame,
html body .main-layout.main-layout-minigame > .content,
html body .view-page.view-minigame,
html body .minigame-page-shell,
html body .minigame-selector-shell {
  overflow: visible !important;
}
html body .minigame-selector-hero {
  overflow: visible !important;
}
html body .minigame-character {
  overflow: visible !important;
}

@media (min-width: 981px) {
  html body .minigame-character-left {
    left: clamp(-84px, -4.1vw, -38px) !important;
  }
  html body .minigame-character-right {
    right: clamp(-96px, -4.7vw, -44px) !important;
  }
}

html body .minigame-card-art-slots{
  top:48.5%;
}
html body .mini-slots-window{
  position:relative;
  width:118px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  padding:10px 9px;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(17,46,31,.93),rgba(9,26,18,.98)),
    radial-gradient(circle at 50% 10%,rgba(241,205,108,.14),transparent 52%);
  border:1px solid rgba(225,189,96,.42);
  box-shadow:inset 0 0 0 2px rgba(15,8,5,.58), inset 0 0 22px rgba(0,0,0,.32), 0 10px 16px rgba(0,0,0,.24);
}
html body .mini-slots-window::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(231,205,128,.18);
  border-radius:11px;
  pointer-events:none;
}
html body .mini-slots-window i{
  aspect-ratio:.78;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#e8d083;
  background:linear-gradient(180deg,#284735,#173124);
  border:1px solid rgba(221,192,112,.26);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  font:700 18px Georgia,serif;
  font-style:normal;
  text-shadow:0 0 7px rgba(233,202,100,.18);
}
html body .mini-slots-window i.is-highlight{
  color:#fff0b5;
  background:radial-gradient(circle at 50% 35%,rgba(253,234,168,.32),rgba(49,104,75,.92) 42%,rgba(19,40,28,.98) 100%);
  box-shadow:0 0 14px rgba(232,202,101,.18), inset 0 0 0 1px rgba(255,240,190,.16);
}

html body .slots-preview{
  min-height:560px;
}
html body .slots-machine-preview{
  position:relative;
  min-height:356px;
  margin-top:18px;
  padding:22px 24px 20px;
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 24%, rgba(225,185,92,.10), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(117,208,152,.09), transparent 24%),
    linear-gradient(180deg, rgba(9,31,20,.72), rgba(4,16,10,.84));
  border:1px solid rgba(221,189,108,.14);
  box-shadow:inset 0 0 42px rgba(0,0,0,.28);
}
html body .slots-machine-crown{
  text-align:center;
  margin-bottom:18px;
}
html body .slots-machine-kicker{
  display:block;
  color:#b9964f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
}
html body .slots-machine-crown strong{
  display:block;
  margin-top:5px;
  color:#efdca0;
  font:700 clamp(28px,2.4vw,40px)/1 Georgia,serif;
  text-shadow:0 1px 2px rgba(0,0,0,.62);
}
html body .slots-machine-crown small{
  display:block;
  margin-top:7px;
  color:rgba(222,217,194,.52);
  font-size:11px;
  letter-spacing:.08em;
}
html body .slots-machine-shell{
  position:relative;
  min-height:220px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  gap:18px;
  align-items:center;
}
html body .slots-machine-side{
  position:relative;
  height:214px;
  border-radius:22px;
  background:linear-gradient(180deg,#5a3a20,#2a160e 16%,#704922 48%,#2d180f 82%,#5e3c1c);
  border:2px solid rgba(220,184,92,.52);
  box-shadow:inset 0 0 0 3px rgba(20,10,6,.56), inset 0 0 24px rgba(0,0,0,.32), 0 10px 18px rgba(0,0,0,.22);
}
html body .slots-machine-side i{
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,#f9e4a3 0,#d1a84f 48%,#6e4d25 100%);
  box-shadow:0 0 8px rgba(243,214,116,.2);
}
html body .slots-machine-side i:nth-child(1){top:28px;}
html body .slots-machine-side i:nth-child(2){top:calc(50% - 6px);}
html body .slots-machine-side i:nth-child(3){bottom:28px;}
html body .slots-machine-lever{
  position:absolute;
  right:-18px;
  top:30px;
  width:72px;
  height:148px;
  pointer-events:none;
}
html body .slots-machine-lever em{
  position:absolute;
  left:28px;
  top:24px;
  width:10px;
  height:92px;
  border-radius:999px;
  background:linear-gradient(180deg,#f2d98d,#87622f 50%,#d9b35a 100%);
  box-shadow:0 0 0 2px rgba(37,18,8,.34);
  transform:rotate(18deg);
}
html body .slots-machine-lever b{
  position:absolute;
  right:2px;
  top:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff2bd 0,#f2c95e 34%,#cc8b28 72%,#76461a 100%);
  box-shadow:0 0 0 3px rgba(70,39,15,.32), 0 8px 16px rgba(0,0,0,.28);
}
html body .slots-reels-frame{
  position:relative;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,#5d3a1d,#24130c 18%,#6b4420 47%,#2a170e 82%,#5e391a);
  border:2px solid rgba(227,194,108,.56);
  box-shadow:inset 0 0 0 4px rgba(17,8,6,.64), inset 0 0 34px rgba(0,0,0,.34), 0 18px 24px rgba(0,0,0,.24);
}
html body .slots-reels-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
html body .slot-reel-cell{
  position:relative;
  aspect-ratio:.88;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(180deg,#f1eddf,#d7d2c0 48%,#f7f1de 100%);
  border:1px solid rgba(108,75,31,.42);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.58), inset 0 -10px 16px rgba(168,153,120,.16), 0 8px 12px rgba(0,0,0,.18);
  overflow:hidden;
}
html body .slot-reel-cell::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 32%,transparent 70%,rgba(84,56,23,.08));
  pointer-events:none;
}
html body .slot-reel-cell b{
  position:relative;
  z-index:2;
  font:700 clamp(28px,2.1vw,42px) Georgia,serif;
  text-shadow:0 1px 1px rgba(0,0,0,.18), 0 0 12px rgba(255,230,149,.12);
}
html body .slot-reel-cell.tone-0 b{color:#d59f46;}
html body .slot-reel-cell.tone-1 b{color:#6cae88;}
html body .slot-reel-cell.tone-2 b{color:#bc8444;}
html body .slot-reel-cell.tone-3 b{color:#d6b65d;}
html body .slot-reel-cell.is-center-row{
  background:linear-gradient(180deg,#f7f2e3,#e9e1cb 50%,#fbf5e9 100%);
}
html body .slot-reel-cell.is-winning{
  box-shadow:0 0 18px rgba(235,203,104,.22), inset 0 0 0 2px rgba(255,247,198,.78), inset 0 -10px 18px rgba(175,155,118,.16), 0 8px 14px rgba(0,0,0,.18);
}
html body .slots-payline{
  position:absolute;
  left:18px;
  right:18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent, rgba(238,207,109,.78), transparent);
  box-shadow:0 0 12px rgba(232,205,104,.12);
  pointer-events:none;
  opacity:.55;
}
html body .slots-payline-top{top:calc(33.333% - 3px);}
html body .slots-payline-mid {
  top:calc(50% - 1px);
  opacity:.9;
}
html body .slots-payline-bottom{top:calc(66.666% + 1px);}
html body .slots-paytable-preview{
  margin-top:16px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}
html body .slots-paytable-preview span{
  min-width:138px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(212,180,97,.2);
  border-radius:999px;
  background:rgba(10,31,20,.5);
}
html body .slots-paytable-preview i{
  color:#e3c472;
  font-style:normal;
  font-weight:700;
  letter-spacing:.08em;
}
html body .slots-paytable-preview b{
  color:#ddd3b2;
  font-size:11px;
  letter-spacing:.12em;
}

@media (max-width: 980px) {
  html body .slots-machine-shell{
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:12px;
  }
  html body .slots-machine-side{height:196px;}
  html body .slots-machine-lever {
    right:-10px;
    top:20px;
    transform:scale(.88);
    transform-origin:top right;
  }
  html body .slots-reels-grid{gap:8px;}
}
@media (max-width: 820px) {
  html body .slots-machine-preview{padding:16px 14px 18px;}
  html body .slots-machine-crown strong{font-size:28px;}
  html body .slots-machine-shell{grid-template-columns:1fr;}
  html body .slots-machine-side{display:none;}
  html body .slots-machine-lever{display:none;}
  html body .slots-paytable-preview span {
    min-width:unset;
    flex:1 1 180px;
  }
}
@media (max-width: 560px) {
  html body .slots-reels-frame{padding:12px;}
  html body .slots-reels-grid{gap:6px;}
  html body .slot-reel-cell{border-radius:10px;}
  html body .slot-reel-cell b{font-size:24px;}
}

html body .minigame-card-slots {
  --card-parallax-x: 0px;
  --card-parallax-y: 0px;
}
html body .minigame-card-slots .minigame-card-surface {
  overflow: hidden !important;
}
html body .minigame-card-slots .minigame-card-background {
  transform: translate3d(var(--card-parallax-x), var(--card-parallax-y), 0) scale(1.09) !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
  transition: transform .15s ease-out !important;
}
html body .minigame-card-slots .minigame-card-hover-art {
  position: absolute !important;
  left: 8.6% !important;
  top: 5.1% !important;
  width: 82.5% !important;
  height: 87.4% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 4 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  will-change: transform, filter !important;
  transform: translate3d(calc(var(--card-hover-parallax-x) - 1px), calc(var(--card-hover-parallax-y) + 1px), 0) scale(1) !important;
  filter: brightness(1) drop-shadow(0 0 0 rgba(240, 204, 103, 0)) !important;
  transition: transform .42s cubic-bezier(.16,.82,.22,1), filter .34s ease, opacity .28s ease !important;
}
html body .minigame-card-slots:hover .minigame-card-hover-art,
html body .minigame-card-slots:focus-visible .minigame-card-hover-art {
  z-index: 9 !important;
  transform: translate3d(calc(var(--card-hover-parallax-x) - 5px), calc(var(--card-hover-parallax-y) - 6px), 0) scale(1.13) !important;
  filter: brightness(1.07) drop-shadow(0 0 6px rgba(244,210,111,.18)) drop-shadow(0 0 14px rgba(244,210,111,.14)) drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
}
html body .minigame-card-slots:hover .minigame-card-frame,
html body .minigame-card-slots:focus-visible .minigame-card-frame {
  z-index: 5 !important;
}
html body .minigame-card-slots .minigame-card-art {
  top: 44.8% !important;
  transform: translate(-50%, -50%) scale(.94) !important;
}
html body .minigame-card-slots .minigame-card-subtitle {
  top: 62px !important;
}

html body .slots-preview {
  min-height: 500px !important;
}
html body .slots-machine-preview {
  min-height: 316px !important;
  margin-top: 14px !important;
  padding: 18px 20px 16px !important;
  border-radius: 18px !important;
}
html body .slots-machine-crown {
  margin-bottom: 14px !important;
}
html body .slots-machine-crown strong {
  font-size: clamp(24px, 2.05vw, 34px) !important;
}
html body .slots-machine-crown small {
  margin-top: 5px !important;
  font-size: 10px !important;
}
html body .slots-machine-shell {
  min-height: 190px !important;
  grid-template-columns: 50px minmax(0, 1fr) 50px !important;
  gap: 14px !important;
}
html body .slots-machine-side {
  height: 190px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#6c4524,#341c11 14%,#865527 50%,#361d12 86%,#6c4423) !important;
  box-shadow: inset 0 0 0 3px rgba(24,10,6,.62), inset 0 0 28px rgba(0,0,0,.34), inset 0 12px 14px rgba(255,223,151,.08), 0 10px 18px rgba(0,0,0,.22) !important;
}
html body .slots-machine-side i {
  width: 10px !important;
  height: 10px !important;
}
html body .slots-machine-lever {
  right: -12px !important;
  top: 20px !important;
  width: 62px !important;
  height: 126px !important;
}
html body .slots-machine-lever em {
  left: 24px !important;
  top: 22px !important;
  width: 9px !important;
  height: 82px !important;
}
html body .slots-machine-lever b {
  width: 34px !important;
  height: 34px !important;
}
html body .slots-reels-frame {
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#6f4724,#29170e 17%,#795022 50%,#2b170e 83%,#69411f) !important;
  box-shadow: inset 0 0 0 4px rgba(18,8,5,.66), inset 0 0 26px rgba(0,0,0,.34), inset 0 16px 18px rgba(255,235,179,.06), 0 16px 22px rgba(0,0,0,.22) !important;
}
html body .slots-reels-grid {
  gap: 10px !important;
}
html body .slot-reel-cell {
  aspect-ratio: .9 !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 24%),
    linear-gradient(180deg,#fffef8,#e8dfca 46%,#fbf5e7 100%) !important;
  border: 1px solid rgba(118,83,35,.48) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -8px 12px rgba(168,153,120,.16),
    inset 0 0 0 2px rgba(255,255,255,.45),
    0 8px 12px rgba(0,0,0,.17),
    0 1px 0 rgba(255,244,208,.32) !important;
  transform: translateZ(0) !important;
}
html body .slot-reel-cell::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 10%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,0));
  pointer-events: none;
}
html body .slot-reel-cell b {
  font-size: clamp(24px, 1.9vw, 34px) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.16), 0 0 10px rgba(255,230,149,.1), 0 1px 0 rgba(255,249,233,.55) !important;
  transform: translateY(-1px);
}
html body .slot-reel-cell.is-winning {
  box-shadow: 0 0 16px rgba(235,203,104,.18), inset 0 2px 0 rgba(255,255,255,.82), inset 0 0 0 2px rgba(255,247,198,.74), inset 0 -8px 12px rgba(175,155,118,.15), 0 8px 14px rgba(0,0,0,.18) !important;
}
html body .slots-payline {
  left: 14px !important;
  right: 14px !important;
  height: 2px !important;
}
html body .slots-paytable-preview {
  margin-top: 13px !important;
  gap: 10px !important;
}
html body .slots-paytable-preview span {
  min-width: 126px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 8px 10px rgba(0,0,0,.14) !important;
}
html body .slots-paytable-preview b {
  font-size: 10px !important;
}
html body .slots-preview .minigame-control-strip {
  min-height: 58px !important;
  margin-top: 14px !important;
  padding: 9px 12px !important;
}

@media (max-width: 1180px) {
  html body .minigame-card-slots:hover .minigame-card-hover-art,
  html body .minigame-card-slots:focus-visible .minigame-card-hover-art {
    transform: translate3d(calc(var(--card-hover-parallax-x) - 4px), calc(var(--card-hover-parallax-y) - 5px), 0) scale(1.115) !important;
  }
}
@media (max-width: 980px) {
  html body .slots-machine-preview {
    padding: 16px 16px 15px !important;
  }
  html body .slots-machine-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 10px !important;
  }
  html body .slots-machine-side {
    height: 172px !important;
  }
  html body .slots-machine-lever {
    right: -8px !important;
    top: 18px !important;
    transform: scale(.82) !important;
    transform-origin: top right !important;
  }
  html body .slots-reels-frame { padding: 11px !important; }
  html body .slots-reels-grid { gap: 8px !important; }
}
@media (max-width: 820px) {
  html body .slots-preview {
    min-height: 470px !important;
  }
  html body .slots-machine-preview {
    min-height: 292px !important;
    padding: 14px 12px 14px !important;
  }
  html body .slots-machine-crown strong { font-size: 24px !important; }
  html body .slots-reels-frame { padding: 10px !important; }
}

html body .minigame-card-slots {
  --card-parallax-x: 0px;
  --card-parallax-y: 0px;
}
html body .minigame-card-slots .minigame-card-surface {
  overflow: hidden !important;
}
html body .minigame-card-slots .minigame-card-background {
  display: block !important;
  transform: translate3d(var(--card-parallax-x), var(--card-parallax-y), 0) scale(1.075) !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
  transition: transform .14s ease-out !important;
}
html body .minigame-card-slots .minigame-card-hover-art {
  position: absolute !important;
  left: 8.8% !important;
  top: 5.2% !important;
  width: 82.2% !important;
  height: 87.2% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 4 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  will-change: transform, filter !important;
  transform: translate3d(calc(var(--card-hover-parallax-x) - 2px), calc(var(--card-hover-parallax-y) + 1px), 0) scale(1) !important;
  filter: brightness(1) drop-shadow(0 0 0 rgba(240,204,103,0)) !important;
  transition: transform .42s cubic-bezier(.16,.82,.22,1), filter .34s ease, opacity .28s ease !important;
}
html body .minigame-card-slots:hover .minigame-card-hover-art,
html body .minigame-card-slots:focus-visible .minigame-card-hover-art {
  z-index: 9 !important;
  transform: translate3d(calc(var(--card-hover-parallax-x) - 5px), calc(var(--card-hover-parallax-y) - 6px), 0) scale(1.13) !important;
  filter:
    brightness(1.06)
    drop-shadow(0 0 6px rgba(246,214,106,.17))
    drop-shadow(0 0 14px rgba(246,214,106,.13))
    drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
}
html body .minigame-card-slots:hover .minigame-card-frame,
html body .minigame-card-slots:focus-visible .minigame-card-frame {
  z-index: 5 !important;
}
html body .minigame-card-slots .minigame-card-art {
  display: none !important;
}
html body .minigame-card-slots .minigame-card-subtitle {
  top: 62px !important;
}
html body .minigame-card-slots .minigame-card-seal {
  z-index: 8 !important;
}

html body .slots-preview {
  min-height: 760px !important;
  padding: 18px 20px 20px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(220,187,94,.08), transparent 34%),
    linear-gradient(180deg, rgba(8,29,18,.66), rgba(4,17,11,.86)) !important;
}
html body .slots-board-header {
  padding: 0 2px 14px !important;
  align-items: center !important;
}
html body .slots-board-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body .slots-board-emblem {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ead584;
  background: radial-gradient(circle at 35% 30%, #335e3d 0%, #163925 55%, #0d2317 100%);
  border: 1px solid rgba(221,188,100,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 10px rgba(0,0,0,.22);
  font: 700 20px/1 Georgia,serif;
}
html body .slots-balance-pill {
  position: relative;
  min-width: 290px !important;
  padding: 10px 52px 10px 16px !important;
  border: 1px solid rgba(221,188,100,.42) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(18,63,40,.96), rgba(8,28,18,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 16px rgba(0,0,0,.18) !important;
}
html body .slots-balance-pill span { color: rgba(239,228,192,.72) !important; }
html body .slots-balance-pill strong {
  color: #efd48a !important;
  font-size: 15px !important;
}
html body .slots-balance-pill i {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  color: #f3de95;
  background: radial-gradient(circle at 35% 30%, #436e49 0%, #1b4029 55%, #102719 100%);
  border: 1px solid rgba(228,194,104,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 8px rgba(0,0,0,.18);
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
}

html body .slots-cabinet-shell {
  position: relative;
  width: min(100%, 1110px);
  margin: 0 auto;
  padding: 14px 22px 22px;
  border-radius: 18px;
  border: 1px solid rgba(209,175,91,.26);
  background:
    radial-gradient(circle at 50% 0%, rgba(231,203,111,.06), transparent 33%),
    linear-gradient(180deg, rgba(9,26,17,.7), rgba(5,17,11,.92));
  box-shadow: inset 0 0 0 1px rgba(252,239,190,.04), inset 0 0 46px rgba(0,0,0,.26);
}
html body .slots-title-marquee {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto 14px;
  padding: 26px 30px 18px;
  text-align: center;
  border-radius: 40px 40px 22px 22px / 46px 46px 18px 18px;
  background:
    linear-gradient(180deg, #1f5a3d 0%, #133823 44%, #0d2819 100%);
  border: 2px solid rgba(224,193,110,.55);
  box-shadow:
    inset 0 0 0 4px rgba(30,14,7,.52),
    inset 0 12px 24px rgba(255,242,179,.08),
    0 14px 22px rgba(0,0,0,.22);
}
html body .slots-title-marquee::before,
html body .slots-title-marquee::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 120px;
  height: 78px;
  border: 2px solid rgba(224,193,110,.42);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 80px 0 0;
  opacity: .75;
}
html body .slots-title-marquee::before {
  left: -68px;
  transform: scaleX(-1) rotate(5deg);
}
html body .slots-title-marquee::after {
  right: -68px;
  transform: rotate(5deg);
}
html body .slots-title-kicker {
  display: block;
  color: #d8bd72;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}
html body .slots-title-marquee strong {
  display: block;
  margin-top: 4px;
  color: #f0d487;
  font: 700 clamp(44px, 4.2vw, 70px)/.96 Georgia,serif;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(86,48,8,.25), 0 5px 16px rgba(0,0,0,.28);
}
html body .slots-title-marquee small {
  display: block;
  margin-top: 7px;
  color: #e2cf96;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
html body .slots-machine-core {
  position: relative;
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
}
html body .slots-machine-wood {
  position: relative;
  height: 518px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, #6b4728 0%, #3b2417 17%, #7e5330 52%, #382216 83%, #684427 100%);
  border: 2px solid rgba(185,144,75,.45);
  box-shadow: inset 0 0 0 4px rgba(28,15,10,.6), inset 0 18px 22px rgba(255,238,185,.05), inset 0 -22px 28px rgba(0,0,0,.22), 0 16px 24px rgba(0,0,0,.24);
}
html body .slots-machine-wood::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 1px solid rgba(231,204,125,.18);
}
html body .slots-machine-wood span {
  position: absolute;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2bf 0%, #dab25a 44%, #7a5727 100%);
  box-shadow: 0 0 9px rgba(239,205,106,.18);
}
html body .slots-machine-wood span:nth-child(1){ top: 34px; }
html body .slots-machine-wood span:nth-child(2){ top: calc(50% - 6px); }
html body .slots-machine-wood span:nth-child(3){ bottom: 34px; }

html body .slots-window-assembly {
  position: relative;
  padding: 12px;
  border-radius: 38px;
  background:
    linear-gradient(180deg, #816038 0%, #3d2517 16%, #8a6438 48%, #341f14 84%, #74512d 100%);
  border: 2px solid rgba(226,194,113,.6);
  box-shadow: inset 0 0 0 4px rgba(24,11,7,.68), inset 0 16px 22px rgba(255,236,177,.06), 0 20px 26px rgba(0,0,0,.24);
}
html body .slots-window-frame {
  position: relative;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, #20130b 0%, #110b08 100%);
  box-shadow: inset 0 0 0 2px rgba(223,190,111,.34), inset 0 0 36px rgba(0,0,0,.58);
}
html body .slots-reels-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
html body .slot-reel-cell {
  position: relative;
  min-height: 146px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.76), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #f6efd9 0%, #dfd2af 50%, #f4ead0 100%);
  border: 1px solid rgba(117,79,35,.5);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.82),
    inset 0 -14px 18px rgba(176,156,113,.2),
    inset 0 0 0 2px rgba(255,248,225,.48),
    0 9px 12px rgba(0,0,0,.18);
}
html body .slot-reel-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 28%, transparent 72%, rgba(72,46,20,.08));
  pointer-events: none;
}
html body .slot-reel-cell i {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 9%;
  height: 12%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  pointer-events: none;
}
html body .slot-reel-cell b {
  position: relative;
  z-index: 2;
  font: 700 clamp(48px, 4.2vw, 74px)/1 Georgia,serif;
  text-shadow: 0 1px 0 rgba(255,247,224,.65), 0 2px 4px rgba(0,0,0,.18), 0 0 12px rgba(255,233,159,.12);
}
html body .slot-reel-cell.tone-bloom b { color: #d8bf6c; }
html body .slot-reel-cell.tone-gem b { color: #70b087; }
html body .slot-reel-cell.tone-clover b { color: #6ea55c; }
html body .slot-reel-cell.tone-star b { color: #d8b45a; }
html body .slot-reel-cell.tone-gold b { color: #c89c4b; }
html body .slot-reel-cell.tone-leaf b { color: #5f9667; }
html body .slot-reel-cell.tone-bell b { color: #d0a84c; }
html body .slot-reel-cell.tone-berry b { color: #b2594b; }
html body .slot-reel-cell.tone-coin b { color: #c7a554; }
html body .slot-reel-cell.tone-seven b { color: #b5544b; }
html body .slot-reel-cell.is-crystal b,
html body .slot-reel-cell.is-jackpot b {
  transform: translateY(-1px) scale(1.03);
}
html body .slot-reel-cell.is-jackpot {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.86),
    inset 0 -14px 18px rgba(176,156,113,.2),
    inset 0 0 0 2px rgba(255,239,191,.56),
    0 0 18px rgba(232,199,101,.16),
    0 9px 12px rgba(0,0,0,.18);
}
html body .slots-payline {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(238,207,109,.2) 12%, rgba(238,207,109,.82) 50%, rgba(238,207,109,.2) 88%, transparent 100%);
  box-shadow: 0 0 12px rgba(232,205,104,.1);
  pointer-events: none;
}
html body .slots-payline-top { top: calc(33.333% - 3px); }
html body .slots-payline-mid {
  top: calc(50% - 1px);
  opacity: .95;
}
html body .slots-payline-bottom { top: calc(66.666% + 1px); }
html body .slots-machine-lever {
  position: absolute;
  right: -28px;
  top: 54px;
  width: 102px;
  height: 330px;
  pointer-events: none;
}
html body .slots-machine-lever em {
  position: absolute;
  left: 42px;
  top: 36px;
  width: 13px;
  height: 200px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4dd8e 0%, #a47433 46%, #d8b55d 100%);
  box-shadow: 0 0 0 2px rgba(37,18,8,.34), inset 0 1px 0 rgba(255,255,255,.3);
  transform: rotate(14deg);
}
html body .slots-machine-lever b {
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c3f26d 0%, #65a043 35%, #2f5d26 72%, #13331a 100%);
  box-shadow: 0 0 0 3px rgba(70,39,15,.32), inset 0 2px 0 rgba(255,255,255,.36), 0 10px 16px rgba(0,0,0,.28);
}

html body .slots-paytable-bar {
  margin: 16px auto 0;
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
html body .slots-paytable-bar span {
  min-height: 70px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(213,181,98,.34);
  background: linear-gradient(180deg, rgba(18,67,43,.95), rgba(9,31,20,.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 12px rgba(0,0,0,.15);
}
html body .slots-paytable-bar i {
  color: #e0c36f;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .18em;
}
html body .slots-paytable-bar small {
  color: #d8bd73;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
html body .slots-paytable-bar b {
  color: #ecdfbb;
  font: 700 17px/1 Georgia,serif;
}

html body .slots-console-panel {
  width: min(100%, 980px);
  margin: 16px auto 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1.25fr 220px 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #553720 0%, #26160e 16%, #5c3b20 45%, #24140d 84%, #4f331d 100%);
  border: 2px solid rgba(215,182,101,.48);
  box-shadow: inset 0 0 0 4px rgba(27,14,9,.62), inset 0 12px 18px rgba(255,235,180,.05), 0 16px 22px rgba(0,0,0,.2);
}
html body .slots-console-left,
html body .slots-console-right {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
html body .slots-console-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(219,188,106,.34);
  background: linear-gradient(180deg, rgba(11,53,34,.94), rgba(7,30,19,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 10px rgba(0,0,0,.14);
  text-align: center;
}
html body .slots-console-stat span {
  display: block;
  color: #d7bf79;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
html body .slots-console-stat strong {
  display: block;
  margin-top: 4px;
  color: #efe0b2;
  font: 700 16px Georgia,serif;
}
html body .slots-console-adjust {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
html body .slots-console-adjust button,
html body .slots-secondary-button {
  min-height: 44px;
  border: 1px solid rgba(221,188,103,.42);
  border-radius: 999px;
  color: #ebdbab;
  background: linear-gradient(180deg, #1a5d3b 0%, #103621 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 10px rgba(0,0,0,.18);
  font: 800 14px/1 Georgia,serif;
  letter-spacing: .06em;
}
html body .slots-console-adjust button {
  flex: 1 1 0;
}
html body .slots-secondary-button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 14px;
}
html body .slots-spin-button {
  position: relative;
  width: 220px;
  height: 136px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 50%;
  color: #f7eaad;
  background:
    radial-gradient(circle at 50% 34%, #88d86b 0%, #367b39 30%, #15592d 52%, #123421 74%, #0d2016 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -14px 18px rgba(0,0,0,.22),
    0 0 0 8px rgba(80,52,28,.96),
    0 0 0 11px rgba(217,185,101,.72),
    0 0 0 16px rgba(47,26,16,.88),
    0 14px 22px rgba(0,0,0,.25);
  font: 700 28px/1 Georgia,serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.4), 0 0 12px rgba(245,231,163,.16);
}
html body .slots-spin-button::before,
html body .slots-spin-button::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}
html body .slots-spin-button::before {
  inset: 10px;
  border: 1px solid rgba(255,246,210,.24);
}
html body .slots-spin-button::after {
  bottom: -26px;
  width: 120px;
  height: 24px;
  background: linear-gradient(180deg, #0b1a13 0%, #10261a 100%);
  border: 1px solid rgba(214,180,97,.46);
  box-shadow: 0 6px 10px rgba(0,0,0,.18);
}
html body .slots-spin-button small {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: #efe0b2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
html body .slots-bottom-banner {
  margin-top: 18px;
  padding: 12px 18px;
  border-top: 1px solid rgba(214,180,95,.14);
  text-align: center;
}
html body .slots-bottom-banner strong {
  display: block;
  color: #d9bd71;
  font: 700 18px Georgia,serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body .slots-bottom-banner small {
  display: block;
  margin-top: 6px;
  color: rgba(232,225,200,.58);
  font-size: 11px;
  letter-spacing: .08em;
}

@media (max-width: 1180px) {
  html body .minigame-card-slots:hover .minigame-card-hover-art,
  html body .minigame-card-slots:focus-visible .minigame-card-hover-art {
    transform: translate3d(calc(var(--card-hover-parallax-x) - 4px), calc(var(--card-hover-parallax-y) - 5px), 0) scale(1.115) !important;
  }
  html body .slots-title-marquee strong { font-size: clamp(38px, 3.6vw, 58px) !important; }
  html body .slot-reel-cell { min-height: 128px !important; }
  html body .slot-reel-cell b { font-size: clamp(42px, 3.6vw, 62px) !important; }
  html body .slots-machine-wood { height: 470px !important; }
}
@media (max-width: 980px) {
  html body .slots-preview {
    min-height: 700px !important;
    padding: 16px !important;
  }
  html body .slots-board-header { gap: 12px !important; }
  html body .slots-balance-pill { min-width: 250px !important; }
  html body .slots-title-marquee {
    width: min(100%, 640px) !important;
    padding: 22px 20px 16px !important;
  }
  html body .slots-title-marquee::before,
  html body .slots-title-marquee::after {
    width: 86px !important;
    height: 58px !important;
    top: 26px !important;
  }
  html body .slots-machine-core { grid-template-columns: 66px minmax(0, 1fr) 66px !important; }
  html body .slots-machine-wood { height: 410px !important; }
  html body .slots-window-frame { padding: 12px !important; }
  html body .slot-reel-cell { min-height: 112px !important; }
  html body .slots-machine-lever {
    right: -20px !important;
    top: 48px !important;
    transform: scale(.82) !important;
    transform-origin: top right !important;
  }
  html body .slots-console-panel {
    grid-template-columns: 1fr 180px 1fr !important;
    gap: 10px !important;
  }
  html body .slots-spin-button {
    width: 180px !important;
    height: 118px !important;
    font-size: 24px !important;
  }
}
@media (max-width: 820px) {
  html body .slots-preview { min-height: 760px !important; }
  html body .slots-board-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html body .slots-balance-pill {
    min-width: 0 !important;
    align-self: flex-end !important;
  }
  html body .slots-machine-core {
    grid-template-columns: 1fr !important;
  }
  html body .slots-machine-wood,
  html body .slots-machine-lever {
    display: none !important;
  }
  html body .slots-paytable-bar {
    grid-template-columns: 1fr !important;
  }
  html body .slots-console-panel {
    grid-template-columns: 1fr !important;
  }
  html body .slots-console-left,
  html body .slots-console-right {
    justify-content: stretch !important;
  }
  html body .slots-spin-button {
    width: 176px !important;
    height: 114px !important;
  }
}
@media (max-width: 560px) {
  html body .slots-board-title-wrap { gap: 9px !important; }
  html body .slots-board-emblem {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }
  html body .slots-title-marquee strong { font-size: 32px !important; }
  html body .slots-title-marquee small { font-size: 10px !important; }
  html body .slot-reel-cell { min-height: 86px !important; }
  html body .slot-reel-cell b { font-size: 30px !important; }
  html body .slots-console-left,
  html body .slots-console-right { flex-direction: column !important; }
}

html body .minigame-card-slots .minigame-card-title,
html body .minigame-card-slots .minigame-card-subtitle,
html body .minigame-card-slots .minigame-card-seal,
html body .minigame-card-slots .minigame-card-art {
  display: none !important;
}

html body .slots-preview-machine {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .slots-preview-machine .minigame-board-header,
html body .slots-preview-machine .minigame-control-strip,
html body .slots-preview-machine .minigame-preview-notice {
  display: none !important;
}
html body .slots-machine-stage {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
html body .slots-machine-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

html body .slots-machine-title-overlay,
html body .slots-machine-balance-overlay,
html body .slots-paytable-overlay,
html body .slots-console-overlay,
html body .slots-bottom-banner-overlay,
html body .slots-spin-button-overlay,
html body .slots-reels-overlay {
  position: absolute;
  z-index: 2;
}

html body .slots-machine-title-overlay {
  left: 20.5%;
  top: 2.5%;
  width: 59%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
html body .slots-machine-title-overlay span {
  color: #d8be72;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}
html body .slots-machine-title-overlay strong {
  margin-top: .2em;
  color: #f1d486;
  font: 700 clamp(34px, 4.6vw, 64px)/.95 Georgia,serif;
  text-shadow: 0 1px 0 rgba(255,248,219,.18), 0 2px 0 rgba(104,61,12,.32), 0 8px 18px rgba(0,0,0,.22);
}
html body .slots-machine-title-overlay small {
  margin-top: .45em;
  color: #e7d59a;
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body .slots-machine-balance-overlay {
  right: 6.2%;
  top: 2.6%;
  width: 22.5%;
  height: 8.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
html body .slots-machine-balance-overlay span {
  color: rgba(239,229,194,.82);
  font-size: clamp(8px, .9vw, 11px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
html body .slots-machine-balance-overlay strong {
  margin-top: .18em;
  color: #f1d686;
  font: 700 clamp(14px, 1.65vw, 22px)/1.05 Georgia,serif;
  text-shadow: 0 1px 0 rgba(91,53,11,.28);
}

html body .slots-reels-overlay {
  left: 14.5%;
  top: 24.6%;
  width: 72.2%;
  height: 39.5%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-template-rows: repeat(3, minmax(0,1fr));
  gap: 1.15%;
}
html body .slots-reels-overlay .machine-reel-cell {
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.82),
    inset 0 -12px 18px rgba(149,123,72,.17),
    inset 0 0 0 1px rgba(255,247,218,.58),
    0 10px 10px rgba(0,0,0,.12) !important;
}
html body .slots-reels-overlay .machine-reel-cell b {
  font-size: clamp(38px, 4.45vw, 70px) !important;
}
html body .slots-reels-overlay .machine-reel-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(35,23,10,.07), transparent 18%, transparent 82%, rgba(35,23,10,.07));
  pointer-events: none;
}

html body .slots-paytable-overlay {
  left: 18.9%;
  top: 68.6%;
  width: 61.9%;
  height: 6.9%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.4%;
}
html body .slots-paytable-overlay span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .12em;
  text-align: center;
  padding: .2em .5em;
}
html body .slots-paytable-overlay i {
  color: #e0c36f;
  font-style: normal;
  font-size: clamp(13px, 1.3vw, 18px);
  line-height: 1;
  letter-spacing: .12em;
}
html body .slots-paytable-overlay small {
  color: #dbbe6e;
  font-size: clamp(9px, .9vw, 11px);
  font-weight: 800;
  letter-spacing: .1em;
}
html body .slots-paytable-overlay b {
  color: #f1e5bf;
  font: 700 clamp(11px, 1.18vw, 16px)/1 Georgia,serif;
}

html body .slots-console-overlay {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2.8%;
}
html body .slots-console-left-overlay {
  left: 5.7%;
  top: 81.3%;
  width: 30.1%;
  height: 10.5%;
}
html body .slots-console-right-overlay {
  right: 5.7%;
  top: 81.3%;
  width: 30.1%;
  height: 10.5%;
}
html body .slots-console-overlay .slots-console-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 7% 7% 5%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
html body .slots-console-overlay .slots-console-stat span {
  color: #d7bd73;
  font-size: clamp(9px, .95vw, 12px);
  font-weight: 800;
  letter-spacing: .12em;
}
html body .slots-console-overlay .slots-console-stat strong {
  margin-top: .32em;
  color: #eee0b4;
  font: 700 clamp(12px, 1.35vw, 18px)/1 Georgia,serif;
}
html body .slots-console-adjust {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10%;
}
html body .slots-console-adjust button,
html body .slots-console-right-overlay .slots-secondary-button {
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #eddba8;
  font: 800 clamp(18px, 1.75vw, 26px)/1 Georgia,serif;
  padding: 0 !important;
}
html body .slots-console-right-overlay .slots-secondary-button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.18vw, 17px);
  letter-spacing: .08em;
}

html body .slots-spin-button-overlay {
  left: 50%;
  top: 79.35%;
  width: 18.2%;
  height: 18.2%;
  transform: translateX(-50%);
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 34%, #8ede6d 0%, #438d42 34%, #1d6533 58%, #10331f 84%, #0b1b12 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -12px 18px rgba(0,0,0,.22),
    0 0 0 2px rgba(231,207,138,.35),
    0 10px 18px rgba(0,0,0,.26) !important;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  color: #f7eaad !important;
  font: 700 clamp(22px, 2.6vw, 38px)/1 Georgia,serif !important;
  text-shadow: 0 1px 0 rgba(88,56,16,.3), 0 0 10px rgba(245,231,163,.12);
  padding: 0 !important;
}
html body .slots-spin-button-overlay::after {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1px solid rgba(255,245,209,.2);
  pointer-events: none;
}
html body .slots-spin-button-overlay small {
  display: block;
  margin-top: .42em;
  color: #efe0b2;
  font-size: clamp(8px, .82vw, 11px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html body .slots-bottom-banner-overlay {
  left: 14.5%;
  right: 14.5%;
  bottom: 1.45%;
  text-align: center;
  pointer-events: none;
}
html body .slots-bottom-banner-overlay strong {
  display: block;
  color: #d9bd71;
  font: 700 clamp(13px, 1.4vw, 20px)/1 Georgia,serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body .slots-bottom-banner-overlay small {
  display: block;
  margin-top: .4em;
  color: rgba(232,225,200,.6);
  font-size: clamp(8px, .86vw, 11px);
  letter-spacing: .08em;
}

@media (max-width: 980px) {
  html body .slots-machine-title-overlay strong { font-size: clamp(30px, 4.25vw, 48px) !important; }
  html body .slots-machine-balance-overlay strong { font-size: clamp(12px, 1.5vw, 18px) !important; }
  html body .slots-reels-overlay .machine-reel-cell b { font-size: clamp(30px, 4vw, 54px) !important; }
  html body .slots-console-right-overlay .slots-secondary-button { font-size: clamp(10px, 1.08vw, 14px) !important; }
}
@media (max-width: 820px) {
  html body .slots-machine-stage {
    width: min(100%, 760px) !important;
  }
  html body .slots-machine-title-overlay { top: 2.7% !important; }
  html body .slots-machine-title-overlay strong { font-size: clamp(24px, 4.3vw, 38px) !important; }
  html body .slots-reels-overlay {
    top: 25.1% !important;
    height: 39% !important;
  }
  html body .slots-reels-overlay .machine-reel-cell b { font-size: clamp(24px, 3.8vw, 40px) !important; }
  html body .slots-paytable-overlay { top: 68.9% !important; }
  html body .slots-console-left-overlay,
  html body .slots-console-right-overlay { top: 81.35% !important; }
  html body .slots-spin-button-overlay {
    width: 19.5% !important;
    height: 19.5% !important;
    top: 79.3% !important;
  }
}
@media (max-width: 620px) {
  html body .slots-machine-stage {
    width: min(100%, 540px) !important;
  }
  html body .slots-machine-title-overlay {
    width: 62% !important;
    left: 19% !important;
  }
  html body .slots-machine-title-overlay span,
  html body .slots-machine-title-overlay small,
  html body .slots-machine-balance-overlay span,
  html body .slots-machine-balance-overlay strong,
  html body .slots-paytable-overlay small,
  html body .slots-paytable-overlay b,
  html body .slots-bottom-banner-overlay strong,
  html body .slots-bottom-banner-overlay small {
    transform: scale(.9);
    transform-origin: center;
  }
  html body .slots-console-overlay .slots-console-stat span { font-size: 8px !important; }
  html body .slots-console-overlay .slots-console-stat strong { font-size: 11px !important; }
  html body .slots-console-adjust button { font-size: 15px !important; }
  html body .slots-console-right-overlay .slots-secondary-button { font-size: 9px !important; }
  html body .slots-spin-button-overlay { font-size: 18px !important; }
  html body .slots-spin-button-overlay small { font-size: 7px !important; }
}

html body .slots-preview-machine {
  background: transparent !important;
}
html body .slots-preview-machine .slots-machine-stage {
  position: relative;
  width: min(100%, 1100px) !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible;
  isolation: isolate;
  background: transparent !important;
}
html body .slots-preview-machine .slots-machine-panel-bg {
  position: absolute;
  inset: 2.8% 1.2% 4.4% 1.2%;
  background: var(--bryer-css-v60-slotbg, url('/images/slotbg.png')) center/cover no-repeat;
  border-radius: 18px;
  z-index: 0;
}
html body .slots-preview-machine .slots-machine-base {
  z-index: 3 !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
html body .slots-preview-machine .slots-machine-title-overlay,
html body .slots-preview-machine .slots-machine-balance-overlay,
html body .slots-preview-machine .slots-bottom-banner-overlay {
  z-index: 4 !important;
}
html body .slots-preview-machine .slots-reels-overlay,
html body .slots-preview-machine .slots-paytable-overlay,
html body .slots-preview-machine .slots-console-overlay,
html body .slots-preview-machine .slots-spin-button-overlay {
  z-index: 1 !important;
}

html body .slots-preview-machine .slots-machine-title-overlay {
  left: 22.4% !important;
  top: 3.8% !important;
  width: 55.2% !important;
  height: 10.8% !important;
}
html body .slots-preview-machine .slots-machine-balance-overlay {
  right: 6.8% !important;
  top: 3.5% !important;
  width: 21.4% !important;
  height: 7.4% !important;
}
html body .slots-preview-machine .slots-machine-title-overlay strong {
  font-size: clamp(28px, 4.25vw, 58px) !important;
}
html body .slots-preview-machine .slots-machine-title-overlay small {
  margin-top: .38em !important;
}

html body .slots-preview-machine .slots-reels-overlay {
  left: 15.25% !important;
  top: 24.85% !important;
  width: 70.2% !important;
  height: 38.8% !important;
  gap: .95% !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
html body .slots-preview-machine .slots-reels-overlay .machine-reel-cell {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.55), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #ecdfbe 0%, #dcc796 42%, #ceb17a 58%, #ecdcb1 100%) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -10px 14px rgba(127,93,39,.18),
    inset 0 0 0 1px rgba(123,89,35,.22),
    0 8px 12px rgba(0,0,0,.1) !important;
}
html body .slots-preview-machine .slots-reels-overlay .machine-reel-cell b {
  font-size: clamp(36px, 4.15vw, 64px) !important;
}
html body .slots-preview-machine .slots-paytable-overlay {
  left: 10.4% !important;
  top: 70.15% !important;
  width: 79.2% !important;
  height: 5.6% !important;
  gap: 2.2% !important;
}
html body .slots-preview-machine .slots-paytable-overlay span {
  padding: 0 !important;
  justify-content: center;
}
html body .slots-preview-machine .slots-paytable-overlay small {
  font-size: clamp(9px, .82vw, 11px) !important;
}
html body .slots-preview-machine .slots-paytable-overlay b {
  font-size: clamp(10px, 1.02vw, 14px) !important;
}

html body .slots-preview-machine .slots-console-left-overlay {
  left: 7.5% !important;
  top: 83.15% !important;
  width: 28.4% !important;
  height: 8.15% !important;
  gap: 2.6% !important;
}
html body .slots-preview-machine .slots-console-right-overlay {
  right: 7.5% !important;
  top: 83.15% !important;
  width: 28.4% !important;
  height: 8.15% !important;
  gap: 4.6% !important;
}
html body .slots-preview-machine .slots-console-overlay .slots-console-stat {
  padding: 4.8% 6.8% 5.8% !important;
  justify-content: flex-start !important;
  position: relative;
}
html body .slots-preview-machine .slots-console-overlay .slots-console-stat span {
  font-size: clamp(9px, .88vw, 11px) !important;
}
html body .slots-preview-machine .slots-console-overlay .slots-console-stat strong {
  margin-top: .35em !important;
  font-size: clamp(12px, 1.15vw, 17px) !important;
}
html body .slots-preview-machine .slots-console-adjust {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 4%;
  margin-top: 0 !important;
  gap: 0 !important;
}
html body .slots-preview-machine .slots-icon-button {
  width: 21%;
  aspect-ratio: 1 / 1;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .slots-preview-machine .slots-icon-button.is-minus { background-image: var(--bryer-css-v60-slotminus, url('/images/slotminus.png')) !important; }
html body .slots-preview-machine .slots-icon-button.is-plus { background-image: var(--bryer-css-v60-slotplus, url('/images/slotplus.png')) !important; }

html body .slots-preview-machine .slots-secondary-button {
  flex: 1 1 0;
  min-width: 0;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: transparent !important;
}
html body .slots-preview-machine .slots-secondary-button.is-max-bet { background-image: var(--bryer-css-v60-slotmaxbet, url('/images/slotmaxbet.png')) !important; }
html body .slots-preview-machine .slots-secondary-button.is-auto-play { background-image: var(--bryer-css-v60-slotautoplay, url('/images/slotautoplay.png')) !important; }

html body .slots-preview-machine .slots-spin-button-overlay {
  left: 50% !important;
  top: 81.05% !important;
  width: 12.9% !important;
  height: 12.9% !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 52% 34%, rgba(198,255,194,.94) 0%, rgba(112,227,112,.85) 18%, rgba(42,121,65,.92) 42%, rgba(12,58,31,.95) 78%, rgba(6,30,17,.98) 100%) !important;
  overflow: hidden;
  box-shadow: inset 0 3px 7px rgba(255,255,255,.24), inset 0 -14px 22px rgba(0,0,0,.24), 0 0 26px rgba(72,201,112,.18) !important;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .1em;
  padding: 0 !important;
}
html body .slots-preview-machine .slots-spin-button-overlay::before,
html body .slots-preview-machine .slots-spin-button-overlay::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: -6%;
  pointer-events: none;
}
html body .slots-preview-machine .slots-spin-button-overlay::before {
  background:
    radial-gradient(circle at 35% 30%, rgba(214,255,221,.55), transparent 20%),
    radial-gradient(circle at 62% 63%, rgba(11,82,42,.55), transparent 25%),
    radial-gradient(circle at 52% 48%, rgba(75,194,104,.4), transparent 42%);
  mix-blend-mode: screen;
  animation: slotsEmeraldLiquid 4.8s ease-in-out infinite alternate;
}
html body .slots-preview-machine .slots-spin-button-overlay::after {
  inset: 9%;
  background:
    radial-gradient(circle at 28% 30%, rgba(255,255,255,.22), transparent 18%),
    conic-gradient(from 0deg, rgba(255,255,255,0) 0 10%, rgba(140,255,170,.18) 18%, rgba(0,0,0,0) 35%, rgba(25,122,59,.26) 53%, rgba(0,0,0,0) 70%, rgba(149,255,175,.16) 84%, rgba(0,0,0,0) 100%);
  filter: blur(1.2px);
  animation: slotsEmeraldSwirl 7s linear infinite;
}
html body .slots-preview-machine .slots-spin-button-label,
html body .slots-preview-machine .slots-spin-button-overlay small {
  position: relative;
  z-index: 2;
}
html body .slots-preview-machine .slots-spin-button-label {
  color: #f5ebb7;
  font: 700 clamp(20px, 2.15vw, 34px)/1 Georgia,serif;
  text-shadow: 0 1px 0 rgba(88,56,16,.25), 0 0 12px rgba(239,224,164,.18);
  letter-spacing: .04em;
}
html body .slots-preview-machine .slots-spin-button-overlay small {
  margin-top: .28em;
  color: #efe0b2;
  font-size: clamp(7px, .72vw, 10px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@keyframes slotsEmeraldLiquid {
  0% {
    transform: translate(-4%, -5%) scale(1);
    opacity: .9;
  }
  50% {
    transform: translate(4%, 5%) scale(1.12);
    opacity: .82;
  }
  100% {
    transform: translate(-2%, 7%) scale(1.05);
    opacity: .95;
  }
}
@keyframes slotsEmeraldSwirl {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

html body .slots-preview-machine .slots-bottom-banner-overlay {
  left: 16% !important;
  right: 16% !important;
  bottom: 1.55% !important;
}
html body .slots-preview-machine .slots-bottom-banner-overlay small {
  color: rgba(232,225,200,.7) !important;
}

@media (max-width: 820px) {
  html body .slots-preview-machine .slots-machine-stage { width: min(100%, 760px) !important; }
  html body .slots-preview-machine .slots-machine-title-overlay strong { font-size: clamp(24px, 4vw, 42px) !important; }
  html body .slots-preview-machine .slots-reels-overlay .machine-reel-cell b { font-size: clamp(24px, 3.6vw, 42px) !important; }
  html body .slots-preview-machine .slots-spin-button-label { font-size: clamp(16px, 2vw, 24px) !important; }
}
@media (max-width: 620px) {
  html body .slots-preview-machine .slots-machine-stage { width: min(100%, 540px) !important; }
  html body .slots-preview-machine .slots-machine-title-overlay strong { font-size: clamp(18px, 4vw, 30px) !important; }
  html body .slots-preview-machine .slots-console-overlay .slots-console-stat strong { font-size: 10px !important; }
  html body .slots-preview-machine .slots-machine-balance-overlay strong { font-size: 11px !important; }
}

html body .slots-preview-machine {
  background: var(--bryer-css-v60-slotbg, url('/images/slotbg.png')) center/cover no-repeat !important;
}
html body .slots-preview-machine .slots-machine-stage {
  width: min(100%, 1120px) !important;
}
html body .slots-preview-machine .slots-machine-panel-bg {
  inset: 0 !important;
  background: var(--bryer-css-v60-slotbg, url('/images/slotbg.png')) center/cover no-repeat !important;
  border-radius: 24px !important;
}
html body .slots-preview-machine .slots-machine-base {
  z-index: 4 !important;
}
html body .slots-preview-machine .slots-machine-title-overlay,
html body .slots-preview-machine .slots-machine-balance-overlay,
html body .slots-preview-machine .slots-bottom-banner-overlay {
  z-index: 6 !important;
}
html body .slots-preview-machine .slots-console-overlay,
html body .slots-preview-machine .slots-spin-button-overlay {
  z-index: 5 !important;
}
html body .slots-preview-machine .slots-reels-overlay,
html body .slots-preview-machine .slots-paytable-overlay {
  z-index: 2 !important;
}

html body .slots-preview-machine .slots-reels-overlay {
  left: 13.95% !important;
  top: 22.95% !important;
  width: 71.25% !important;
  height: 41.1% !important;
  gap: .85% !important;
}
html body .slots-preview-machine .slots-reels-overlay .machine-reel-cell {
  border-radius: 14px !important;
}
html body .slots-preview-machine .slots-reels-overlay .machine-reel-cell b {
  font-size: clamp(34px, 4vw, 62px) !important;
}

html body .slots-preview-machine .slots-paytable-overlay {
  left: 10.9% !important;
  top: 69.15% !important;
  width: 78.2% !important;
  height: 5.55% !important;
  gap: 2.05% !important;
}

html body .slots-preview-machine .slots-console-left-overlay {
  left: 7.25% !important;
  top: 84.15% !important;
  width: 29.65% !important;
  height: 8.65% !important;
  gap: 2.8% !important;
}
html body .slots-preview-machine .slots-console-left-overlay .slots-console-stat {
  padding: 4.5% 7% 6% !important;
}
html body .slots-preview-machine .slots-console-left-overlay .slots-console-stat span {
  transform: translateY(-1px);
}
html body .slots-preview-machine .slots-console-left-overlay .slots-console-stat strong {
  font-size: clamp(11px, 1.08vw, 16px) !important;
}
html body .slots-preview-machine .slots-console-left-overlay .slots-console-adjust {
  left: 8.5% !important;
  right: 8.5% !important;
  bottom: 5% !important;
}
html body .slots-preview-machine .slots-console-left-overlay .slots-icon-button {
  width: 20.5% !important;
}

html body .slots-preview-machine .slots-console-right-overlay {
  right: 7.25% !important;
  top: 84.15% !important;
  width: 29.65% !important;
  height: 8.65% !important;
  gap: 3.35% !important;
}
html body .slots-preview-machine .slots-secondary-button {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html body .slots-preview-machine .slots-spin-button-overlay {
  left: 50% !important;
  top: 77.65% !important;
  width: 15.6% !important;
  height: 15.6% !important;
}
html body .slots-preview-machine .slots-spin-button-label {
  font-size: clamp(20px, 2vw, 32px) !important;
}

html body .slots-preview-machine .slots-machine-title-overlay {
  left: 23.2% !important;
  top: 4.15% !important;
  width: 53.8% !important;
  height: 10.35% !important;
}
html body .slots-preview-machine .slots-machine-balance-overlay {
  right: 7.15% !important;
  top: 4.35% !important;
  width: 20.4% !important;
  height: 7.05% !important;
}
html body .slots-preview-machine .slots-bottom-banner-overlay {
  left: 16.4% !important;
  right: 16.4% !important;
  bottom: 1.65% !important;
}

@media (max-width: 820px) {
  html body .slots-preview-machine .slots-machine-stage { width: min(100%, 780px) !important; }
}

html body .minigame-active-stage.minigame-active-slots {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .minigame-active-stage.minigame-active-slots::before,
html body .minigame-active-stage.minigame-active-slots::after,
html body .minigame-active-stage.minigame-active-slots > .minigame-stage-bridge {
  content: none !important;
  display: none !important;
}
html body .slots-standalone-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1100;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #07170f var(--bryer-css-v60-slotbg, url('/images/slotbg.png')) center / cover no-repeat;
}
html body .slots-standalone-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}
@media (min-width: 981px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots {
    margin-left: calc(clamp(18px, 4vw, 56px) * -1) !important;
    width: calc(100% + clamp(18px, 4vw, 56px) + 24px) !important;
  }
}
@media (max-width: 980px) {
  html body .slots-standalone-shell {
    aspect-ratio: 1440 / 1120;
  }
}
@media (max-width: 680px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots {
    margin-left: -14px !important;
    width: calc(100% + 28px) !important;
  }
  html body .slots-standalone-shell {
    aspect-ratio: 1 / 1;
  }
}

html body .slots-standalone-shell {
  width: min(100%, 1600px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 1440 / 1140 !important;
}
@media (max-width: 1620px) {
  html body .slots-standalone-shell { width: min(100%, 1520px) !important; }
}
@media (max-width: 1440px) {
  html body .slots-standalone-shell { width: min(100%, 1400px) !important; }
}
@media (max-width: 1240px) {
  html body .slots-standalone-shell { width: min(100%, 1220px) !important; }
}
@media (max-width: 820px) {
  html body .slots-standalone-shell { width: 100% !important; }
}

html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots {
  position: relative !important;
  left: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  background: #07170f var(--bryer-css-v60-slotbg, url('/images/slotbg.png')) center / cover no-repeat !important;
}
html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots .slots-standalone-shell {
  width: min(100%, 1600px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}
@media (max-width: 1620px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots .slots-standalone-shell { width: min(100%, 1520px) !important; }
}
@media (max-width: 1440px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots .slots-standalone-shell { width: min(100%, 1400px) !important; }
}
@media (max-width: 1240px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots .slots-standalone-shell { width: min(100%, 1220px) !important; }
}
@media (max-width: 820px) {
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots {
    left: auto !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
  }
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots .slots-standalone-shell { width: 100% !important; }
}

.site-mobile-menu-toggle,
.site-mobile-nav-scrim,
.site-mobile-nav-drawer {
  display: none;
}

@media (max-width: 820px) {
  html,
  body,
  html body .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body .app-shell > .topbar,
  html body .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: minmax(42px, auto) !important;
    align-items: center !important;
    min-height: calc(58px + env(safe-area-inset-top)) !important;
    gap: 8px !important;
    padding: calc(7px + env(safe-area-inset-top)) 10px 7px !important;
    z-index: 2450 !important;
  }
  html body .app-shell > .topbar::after,
  html body .topbar::after {
    inset: -1px 4px -2px !important;
    border-radius: 22px !important;
    background-position: center !important;
    background-size: cover !important;
  }
  html body .topbar > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  html body .topbar .brand-mark {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
  html body .topbar .brand-mark img {
    width: 27px !important;
    height: 27px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  html body .topbar .brand-copy {
    min-width: 0 !important;
  }
  html body .topbar .brand h1 {
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .topbar .brand-tagline-row,
  html body .topbar .brand p,
  html body .topbar > .topbar-ornament,
  html body .topbar > .nav-cluster,
  html body .topbar .player-meta,
  html body .topbar .player-chip > .audio-controls {
    display: none !important;
  }
  html body .topbar > .player-chip {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .topbar .avatar.avatar-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    font-size: 10px !important;
  }

  html body .site-mobile-menu-toggle {
    appearance: none !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2452 !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 1px solid rgba(225,190,86,.54) !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg,rgba(20,47,32,.96),rgba(7,24,16,.98)) !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05) !important;
    cursor: pointer !important;
  }
  html body .site-mobile-menu-toggle > span {
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #efd373 !important;
    box-shadow: 0 0 7px rgba(224,184,62,.18) !important;
    transition: transform .22s ease, opacity .18s ease !important;
  }
  html body .site-mobile-menu-toggle.is-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  html body .site-mobile-menu-toggle.is-open > span:nth-child(2) { opacity: 0 !important; }
  html body .site-mobile-menu-toggle.is-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  html body .site-mobile-nav-scrim {
    appearance: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2400 !important;
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: rgba(1,7,4,.67) !important;
    backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }
  html body .site-mobile-nav-scrim.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html body .site-mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2425 !important;
    width: min(340px, 88vw) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: calc(78px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)) !important;
    border-left: 1px solid rgba(218,184,89,.30) !important;
    background:
      radial-gradient(circle at 70% 6%,rgba(199,161,70,.10),transparent 28%),
      linear-gradient(180deg,#10271a 0%,#07160f 54%,#040b08 100%) !important;
    box-shadow: -24px 0 55px rgba(0,0,0,.44) !important;
    transform: translate3d(104%,0,0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.78,.25,1), visibility .28s ease !important;
  }
  html body .site-mobile-nav-drawer.is-open {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html body .site-mobile-nav-profile {
    display: grid !important;
    gap: 4px !important;
    padding: 0 2px 14px !important;
    border-bottom: 1px solid rgba(221,188,96,.18) !important;
  }
  html body .site-mobile-nav-profile strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #f0dfae !important;
    font: 700 17px/1.1 Georgia,"Times New Roman",serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .site-mobile-nav-profile span {
    color: #d8b965 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  html body .site-mobile-nav-audio,
  html body .site-mobile-nav-audio .audio-controls {
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .site-mobile-nav-audio .audio-controls {
    display: grid !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  html body .site-mobile-nav-audio .audio-slider-row {
    grid-template-columns: 28px 34px minmax(0,1fr) !important;
    gap: 7px !important;
  }
  html body .site-mobile-nav-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  html body .site-mobile-nav-grid > button {
    appearance: none !important;
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 15px !important;
    border: 1px solid rgba(219,184,89,.22) !important;
    border-radius: 10px !important;
    color: #d9d2b7 !important;
    background: linear-gradient(180deg,rgba(25,54,37,.82),rgba(8,25,17,.92)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-align: left !important;
  }
  html body .site-mobile-nav-grid > button.is-active {
    color: #fff0b3 !important;
    border-color: rgba(236,203,111,.58) !important;
    background: linear-gradient(180deg,rgba(72,86,45,.86),rgba(27,52,31,.96)) !important;
    box-shadow: inset 0 0 18px rgba(231,198,101,.08), 0 0 13px rgba(217,174,66,.08) !important;
  }
  html body .site-mobile-nav-grid > button:disabled {
    opacity: .42 !important;
  }

  html body .app-shell > .ticker-wrap {
    top: calc(58px + env(safe-area-inset-top)) !important;
    padding: 6px 8px 0 !important;
  }
  html body .ticker {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 52px !important;
    width: 100% !important;
    padding: 7px 13px 8px !important;
    text-align: center !important;
  }
  html body .ticker::after {
    inset: 0 3px 3px !important;
    background-position: center !important;
    background-size: cover !important;
  }
  html body .ticker-label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body .ticker-label-line {
    width: 19px !important;
    min-width: 19px !important;
  }
  html body .ticker-label-star,
  html body .ticker-label-text { white-space: nowrap !important; }
  html body .ticker-message {
    display: block !important;
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-wrap: anywhere !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  html body .main-layout,
  html body .main-layout.main-layout-minigame {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    align-items: start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 13px 10px calc(30px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }
  html body .main-layout > .content,
  html body .main-layout > .history-column,
  html body .main-layout > .content > .view-page,
  html body .view-page,
  html body .view-shop,
  html body .view-vault,
  html body .view-upgrade,
  html body .view-minigame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .main-layout > .history-column {
    position: relative !important;
    top: auto !important;
    order: 2 !important;
  }
  html body .history-column .history-panel,
  html body .history-column > .history-panel.history-panel-dynamic {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;
  }

  html body .view-shop .hero,
  html body .view-vault .inventory-hero {
    min-height: 245px !important;
    overflow: hidden !important;
  }
  html body .view-shop .hero-character,
  html body .view-vault .inventory-hero .hero-character {
    display: none !important;
  }
  html body .view-shop .hero-copy,
  html body .view-vault .inventory-hero .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-inline: 14px !important;
    text-align: center !important;
  }
  html body .view-shop .hero-copy h2,
  html body .view-vault .inventory-hero .hero-copy h2 {
    max-width: 100% !important;
    font-size: clamp(28px, 9vw, 40px) !important;
    overflow-wrap: anywhere !important;
  }
  html body .view-shop .hero-copy p,
  html body .view-vault .inventory-hero .hero-copy p {
    max-width: 100% !important;
    margin-inline: auto !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  html body .catalog-tools,
  html body .catalog-tools.catalog-tools-tree-trunk {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
    overflow: hidden !important;
  }
  html body .catalog-tools .catalog-panel-art,
  html body .catalog-tools .coffer-hall-panel-lanterns,
  html body .catalog-tools .catalog-trunk-decor,
  html body .catalog-tools .catalog-tools-effects,
  html body .shop-catalog-ambience {
    pointer-events: none !important;
  }
  html body .catalog-tools .coffer-hall-panel-lanterns,
  html body .catalog-tools .catalog-trunk-decor {
    display: none !important;
  }
  html body .catalog-tools .search-box,
  html body .catalog-tools .catalog-search-field,
  html body .catalog-tools .filter-chips,
  html body .catalog-tools .catalog-count {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .catalog-tools .filter-chips {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    padding-bottom: 3px !important;
  }
  html body .catalog-tools .filter-chips::-webkit-scrollbar { display: none !important; }
  html body .catalog-tools .filter-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  html body .grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .grid > .box-card {
    width: 100% !important;
    max-width: 460px !important;
    margin-inline: auto !important;
  }

  html body .view-vault .open-stage,
  html body .view-vault .prize-gallery,
  html body .view-vault .vault-carousel,
  html body .view-vault .collection-toolbar,
  html body .view-vault .inventory-open-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .view-vault .open-stage {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }
  html body .view-vault .vault-action-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 9px !important;
    max-width: 100% !important;
  }
  html body .view-vault .vault-action-group > *,
  html body .view-vault .inventory-open-button-shell,
  html body .view-vault .inventory-open-button-shell .card-actions,
  html body .view-vault .inventory-open-button-shell .purchase-action-pair {
    max-width: 100% !important;
  }

  html body .view-upgrade .upgrade-page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  html body .view-upgrade .upgrade-forge,
  html body .view-upgrade .upgrade-catalogs,
  html body .view-upgrade .upgrade-history {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .view-upgrade .upgrade-forge {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }
  html body .view-upgrade .upgrade-probability-column {
    order: -1 !important;
    min-width: 0 !important;
  }
  html body .view-upgrade .upgrade-catalogs { grid-template-columns: minmax(0,1fr) !important; }
  html body .view-upgrade .upgrade-catalog-tools {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .minigame-page,
  html body .minigame-selector-hero,
  html body .minigame-selector-center,
  html body .minigame-empty-stage,
  html body .minigame-active-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .minigame-selector-hero {
    overflow: hidden !important;
    padding-inline: 0 !important;
  }
  html body .minigame-character,
  html body .minigame-stars {
    display: none !important;
  }
  html body .minigame-selector-center {
    width: 100% !important;
    padding: 0 !important;
  }
  html body .minigame-selector-heading {
    box-sizing: border-box !important;
    width: 100% !important;
    gap: 6px !important;
    padding-inline: 8px !important;
  }
  html body .minigame-selector-heading h2 { font-size: clamp(27px, 8vw, 38px) !important; }
  html body .minigame-selector-heading p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  html body .minigame-heading-branch {
    flex: 0 0 34px !important;
    width: 34px !important;
  }
  html body .minigame-card-row {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 12vw !important;
    padding: 4px 12vw 12px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body .minigame-card-row::-webkit-scrollbar { display: none !important; }
  html body .minigame-card {
    flex: 0 0 min(290px, 72vw) !important;
    width: min(290px, 72vw) !important;
    max-width: min(290px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 366 / 549 !important;
    scroll-snap-align: center !important;
    touch-action: pan-x !important;
  }
  html body .minigame-card-library { cursor: default !important; }

  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-coinflip {
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    width: 100% !important;
    height: min(700px, calc(100dvh - 108px)) !important;
    min-height: 570px !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  html body .coinflip-game-panel .coinflip-panel-background,
  html body .coinflip-game-panel .coinflip-panel-border {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  html body .coinflip-game-panel .coinflip-panel-title-wrap {
    left: 50% !important;
    top: 3.5% !important;
    width: min(72%, 290px) !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    left: 50% !important;
    right: auto !important;
    top: 13% !important;
    width: min(88%, 320px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
  html body .coinflip-game-panel .coinflip-balance-caption { justify-content: center !important; }
  html body .coinflip-game-panel .coinflip-coin-stage {
    left: 50% !important;
    top: 22% !important;
    width: min(58%, 230px) !important;
    height: 28% !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .cf30-choice {
    top: 52% !important;
    width: 40% !important;
    height: 14% !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-heads {
    left: 7% !important;
    right: auto !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-tails {
    right: 7% !important;
    left: auto !important;
  }
  html body .coinflip-game-panel .cf30-choice-symbol { font-size: clamp(24px, 7vw, 31px) !important; }
  html body .coinflip-game-panel .cf30-choice-label { font-size: clamp(16px, 5vw, 22px) !important; }
  html body .coinflip-game-panel .coinflip-controls {
    left: 6% !important;
    right: 6% !important;
    bottom: 5.2% !important;
    width: 88% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    transform: none !important;
  }
  html body .coinflip-game-panel .cf30-bet-control {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    gap: 7px !important;
  }
  html body .coinflip-game-panel .cf30-bet-step {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field {
    flex: 1 1 150px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 190px !important;
    height: 40px !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    flex: 0 0 auto !important;
    width: min(230px, 72vw) !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
  }
  html body .coinflip-game-panel .coinflip-preview-footnote {
    left: 7% !important;
    right: 7% !important;
    bottom: 1% !important;
    max-width: 86% !important;
  }

  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots,
  html body .main-layout.main-layout-minigame .minigame-active-stage.minigame-active-slots .slots-standalone-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 520px) {
  html body .topbar .brand h1 { font-size: 13px !important; }
  html body .ticker-label-line {
    width: 13px !important;
    min-width: 13px !important;
  }
  html body .ticker-label {
    font-size: 8px !important;
    gap: 3px !important;
  }
  html body .ticker-message { font-size: 9px !important; }
  html body .minigame-card-row {
    scroll-padding-inline: 9vw !important;
    padding-left: 9vw !important;
    padding-right: 9vw !important;
  }
  html body .minigame-card {
    flex-basis: 78vw !important;
    width: 78vw !important;
    max-width: 290px !important;
  }
  html body .coinflip-game-panel .cf30-choice { width: 42% !important; }
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 5% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 5% !important; }
}

.minigame-mobile-swipe-hint { display: none; }

@media (max-width: 820px) {

  html,
  body,
  html body .app-shell {
    overflow-x: clip !important;
  }
  html body .app-shell {
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
  }
  html body .app-shell > .topbar,
  html body .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .app-shell > .ticker-wrap {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 10px 0 !important;
  }
  html body .ticker {
    min-height: 38px !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html body .ticker::before,
  html body .ticker::after,
  html body .ticker-label {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  html body .ticker-message {
    width: 100% !important;
    max-width: 620px !important;
    min-height: 26px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }

  html body .site-mobile-nav-audio .audio-controls {
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
  }
  html body .site-mobile-nav-audio .audio-slider-row {
    width: 100% !important;
    grid-template-columns: 26px 40px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 20px !important;
  }
  html body .site-mobile-nav-audio .audio-icon-button.sound-toggle,
  html body .site-mobile-nav-audio .audio-icon-button.sound-toggle:hover {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
  }
  html body .site-mobile-nav-audio .audio-slider-label { font-size: 9px !important; }
  html body .site-mobile-nav-audio .audio-volume-slider {
    width: 100% !important;
    min-width: 0 !important;
    height: 18px !important;
  }
  html body .site-mobile-nav-audio .audio-volume-slider::-webkit-slider-runnable-track { height: 5px !important; }
  html body .site-mobile-nav-audio .audio-volume-slider::-webkit-slider-thumb {
    width: 12px !important;
    height: 12px !important;
    margin-top: -3.5px !important;
  }
  html body .site-mobile-nav-audio .audio-volume-slider::-moz-range-track,
  html body .site-mobile-nav-audio .audio-volume-slider::-moz-range-progress { height: 5px !important; }
  html body .site-mobile-nav-audio .audio-volume-slider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
  }
  html body .site-mobile-nav-grid > button.site-mobile-nav-venue {
    color: #fff0bd !important;
    border-color: rgba(222, 160, 76, .58) !important;
    background:
      radial-gradient(circle at 22% 0, rgba(255, 218, 136, .12), transparent 52%),
      linear-gradient(180deg, rgba(113, 68, 31, .94), rgba(55, 31, 15, .98)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -2px rgba(31,13,4,.35), 0 5px 13px rgba(0,0,0,.18) !important;
  }

  html body .history-column > .history-launch-stack,
  html body .history-launch-stack {
    display: none !important;
  }

  html body .view-shop .hero-title-stage,
  html body .view-shop .hero-rotating-title {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    overflow: visible !important;
    text-align: center !important;
  }
  html body .view-shop .hero-rotating-title {
    font-size: clamp(27px, 8.2vw, 38px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    width: calc(100% + 20px) !important;
    max-width: none !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .search-box,
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-search-field,
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk .catalog-search-field > input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk > #catalog-panel-coins-top-layer.catalog-panel-coins-top-layer > img.catalog-panel-coins-top-image {
    top: 157px !important;
  }

  html body .view-page.view-shop > .reward-showcase-hall {
    margin-top: -34px !important;
  }
  html body .view-page.view-vault .reward-showcase-inventory {
    top: -3px !important;
  }
  html body .reward-showcase .reward-showcase-heading {
    top: -6px !important;
  }
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-mascots-image,
  html body .reward-showcase-inventory > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
    transform: translate3d(0, -13px, 0) !important;
  }

  html body .reel-overlay,
  html body .reel-overlay.limited-time-reel {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: max(10px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  html body .reel-overlay .reel-scene,
  html body .reel-overlay .reel-scene.limited-time-scene {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    left: auto !important;
    right: auto !important;
    width: min(520px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: none !important;
    margin: auto !important;
    padding: 10px 0 18px !important;
    transform: none !important;
    transform-origin: center top !important;
  }
  html body .reel-overlay .reel-title,
  html body .reel-overlay .reel-stack,
  html body .reel-overlay .result-grid,
  html body .reel-overlay .continue-button,
  html body .reel-overlay .result-action-marker-axis {
    left: auto !important;
    right: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform-origin: center !important;
  }
  html body .reel-overlay .reel-line {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  html body .view-upgrade .upgrade-hero-character,
  html body .view-upgrade .upgrade-hero-character img,
  html body .view-upgrade img[src*="charupgrade.png"],
  html body .view-upgrade img[src*="charupgrade2.png"],
  html body .view-upgrade .upgrade-viewport-side-decor,
  html body .view-upgrade .upgrade-page-garden,
  html body .view-upgrade .upgrade-forge-branch,
  html body .view-upgrade .upgrade-forge-root {
    display: none !important;
  }
  html body .view-upgrade .upgrade-page {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .view-upgrade .upgrade-page * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .view-upgrade .upgrade-hero {
    min-height: 190px !important;
    overflow: hidden !important;
  }
  html body .view-upgrade .upgrade-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 14px !important;
    text-align: center !important;
  }
  html body .view-upgrade .upgrade-hero-copy h2 {
    max-width: 100% !important;
    font-size: clamp(29px, 8.7vw, 38px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
  }
  html body .view-upgrade .upgrade-forge {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    padding: 12px 9px 15px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column {
    order: 1 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column {
    order: 2 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    order: 3 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
  html body .view-upgrade .upgrade-forge > .upgrade-target-column,
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  html body .view-upgrade .upgrade-probability-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 6px 6px 10px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage,
  html body .view-upgrade .upgrade-chance-stage,
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial {
    width: 164px !important;
    height: 164px !important;
    min-width: 164px !important;
    min-height: 164px !important;
    max-width: 164px !important;
    max-height: 164px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button {
    width: min(290px, 100%) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  html body .view-upgrade .upgrade-probability-column > p {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }
  html body .view-upgrade .upgrade-offer-stage,
  html body .view-upgrade .upgrade-target-stage {
    width: 100% !important;
    min-height: 310px !important;
    height: auto !important;
    padding: 11px 9px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
  html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack {
    width: 100% !important;
    min-height: 210px !important;
    max-height: 310px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  html body .view-upgrade .upgrade-selection-tile,
  html body .view-upgrade .upgrade-reward-card,
  html body .view-upgrade .upgrade-item-tile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .view-upgrade .upgrade-gil-entry-row {
    width: 100% !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
  }
  html body .view-upgrade .upgrade-gil-stepper {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
  }
  html body .view-upgrade .upgrade-gil-current-value {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .view-upgrade .upgrade-target-trunk {
    width: min(74%, 250px) !important;
    height: 48% !important;
    bottom: -8px !important;
  }
  html body .view-upgrade .upgrade-catalogs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  html body .view-upgrade .upgrade-catalog-panel,
  html body .view-upgrade .upgrade-catalog-header,
  html body .view-upgrade .upgrade-catalog-tools,
  html body .view-upgrade .upgrade-reward-grid,
  html body .view-upgrade .upgrade-history {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .view-upgrade .upgrade-catalog-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }
  html body .view-upgrade .upgrade-catalog-tools > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .minigame-mobile-swipe-hint {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin: 1px auto 4px !important;
    padding: 5px 12px !important;
    border: 1px solid rgba(222, 188, 91, .20) !important;
    border-radius: 999px !important;
    color: rgba(239, 214, 142, .9) !important;
    background: rgba(8, 24, 16, .58) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.16) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    pointer-events: none !important;
  }
  html body .minigame-mobile-swipe-hint > span {
    color: #f2d77e !important;
    font-size: 19px !important;
    line-height: .7 !important;
    animation: minigameMobileSwipeCue 1.45s ease-in-out infinite !important;
  }
  html body .minigame-mobile-swipe-hint > span:last-child { animation-delay: -.72s !important; }
  @keyframes minigameMobileSwipeCue {
    0%, 100% {
      opacity: .42;
      transform: translateX(0);
    }
    50% {
      opacity: 1;
      transform: translateX(3px);
    }
  }
  html body .minigame-card-row {
    background:
      linear-gradient(90deg, rgba(239,210,119,.09), transparent 7%, transparent 93%, rgba(239,210,119,.09)) !important;
  }

  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel::after {
    display: none !important;
    content: none !important;
  }
  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    height: min(720px, calc(100dvh - 92px)) !important;
    min-height: 600px !important;
    background: #07170f !important;
  }
  html body .coinflip-game-panel .coinflip-panel-border-crop,
  html body .coinflip-game-panel .coinflip-panel-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  html body .coinflip-game-panel .coinflip-panel-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  html body .coinflip-game-panel .coinflip-panel-border {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
  }
  html body .coinflip-game-panel .coinflip-panel-title-wrap {
    top: 2.6% !important;
    width: min(64%, 250px) !important;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    top: 11.5% !important;
    width: min(90%, 330px) !important;
  }
  html body .coinflip-game-panel .coinflip-coin-stage {
    top: 21% !important;
    width: min(54%, 210px) !important;
    height: 28% !important;
  }
  html body .coinflip-game-panel .cf30-choice {
    top: 51.5% !important;
    width: 34% !important;
    height: 10.5% !important;
    min-height: 64px !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-heads {
    left: 9% !important;
    right: auto !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-tails {
    right: 9% !important;
    left: auto !important;
  }
  html body .coinflip-game-panel .cf30-choice-symbol { font-size: clamp(20px, 5.5vw, 26px) !important; }
  html body .coinflip-game-panel .cf30-choice-label { font-size: clamp(14px, 4.1vw, 18px) !important; }
  html body .coinflip-game-panel .cf30-choice-ornament { transform: scale(.78) !important; }
  html body .coinflip-game-panel .coinflip-controls {
    left: 5% !important;
    right: 5% !important;
    bottom: 4% !important;
    width: 90% !important;
    gap: 12px !important;
  }
  html body .coinflip-game-panel .cf30-bet-control {
    width: min(100%, 300px) !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    width: min(205px, 61vw) !important;
    height: 48px !important;
  }
}

@media (max-width: 520px) {
  html body .ticker-message { font-size: 10px !important; }
  html body .site-mobile-nav-drawer { width: min(330px, 90vw) !important; }
  html body .coinflip-game-panel .cf30-choice {
    width: 33% !important;
    min-height: 60px !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 10% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 10% !important; }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  html body iframe.slots3d-game-iframe {
    height: 100dvh !important;
  }

  html body .ticker-label,
  html body .ticker-label *,
  html body .ticker-label-text,
  html body .ticker-label-line,
  html body .ticker-label-star,
  html body .app-shell > .ticker-wrap .ticker-label,
  html body .app-shell > .ticker-wrap .ticker-label *,
  html body .app-shell > .ticker-wrap .ticker-label-text,
  html body .app-shell > .ticker-wrap .ticker-label-line,
  html body .app-shell > .ticker-wrap .ticker-label-star {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  html body .app-shell > .ticker-wrap .ticker::before,
  html body .app-shell > .ticker-wrap .ticker::after {
    display: none !important;
    content: none !important;
  }

  html body .site-mobile-nav-audio,
  html body .site-mobile-nav-audio .audio-controls {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
  }
  html body .site-mobile-nav-audio .audio-controls {
    display: grid !important;
    padding: 9px 9px 10px !important;
  }
  html body .site-mobile-nav-audio .audio-slider-row {
    display: grid !important;
    grid-template-columns: 23px 34px minmax(145px, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 7px !important;
  }
  html body .site-mobile-nav-audio .audio-slider-label {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  html body .site-mobile-nav-audio input.audio-volume-slider {
    display: block !important;
    width: 100% !important;
    min-width: 145px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  html body .site-mobile-nav-grid > button.site-mobile-nav-album {
    color: #d9f0ee !important;
    border-color: rgba(100, 184, 184, .48) !important;
    background: linear-gradient(180deg, rgba(27, 67, 69, .94), rgba(10, 32, 34, .98)) !important;
  }
  html body .site-mobile-nav-grid > button.site-mobile-nav-achievements {
    color: #eee1ff !important;
    border-color: rgba(171, 127, 205, .48) !important;
    background: linear-gradient(180deg, rgba(63, 43, 76, .94), rgba(30, 20, 39, .98)) !important;
  }
  html body .site-mobile-nav-grid > button.site-mobile-nav-coffee {
    color: #ffe1e5 !important;
    border-color: rgba(201, 120, 135, .48) !important;
    background: linear-gradient(180deg, rgba(76, 39, 48, .94), rgba(38, 20, 25, .98)) !important;
  }

  html body .view-shop .hero-copy,
  html body .view-vault .inventory-hero .hero-copy,
  html body .view-upgrade .upgrade-hero-copy {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: center !important;
  }
  html body .view-shop .hero-copy .eyebrow,
  html body .view-shop .hero-copy h2,
  html body .view-shop .hero-copy > p:last-child,
  html body .view-vault .inventory-hero .hero-copy .eyebrow,
  html body .view-vault .inventory-hero .hero-copy h2,
  html body .view-vault .inventory-hero .hero-copy > p:last-child,
  html body .view-upgrade .upgrade-hero-copy .eyebrow,
  html body .view-upgrade .upgrade-hero-copy h2,
  html body .view-upgrade .upgrade-hero-copy > p:last-child {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html body .minigame-selector-heading > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  html body .minigame-selector-heading > div > h2,
  html body .minigame-selector-heading > div > p {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body .reward-showcase .reward-showcase-heading {
    top: -18px !important;
  }
  html body .reward-showcase-hall > .reward-showcase-top-creatures > .reward-showcase-mascots-image,
  html body .reward-showcase-inventory > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
    transform: translate3d(0, -25px, 0) !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track {
    top: 5px !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    inset: 5px 0 auto 0 !important;
  }

  html body .reel-overlay.is-intro .coffer-unlock-stage {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .reel-overlay.is-intro .unlock-coffer-line.count-1 {
    --unlock-unit-size: min(250px, 76vw) !important;
    --unlock-coffer-size: min(220px, 66vw) !important;
    --unlock-halo-size: min(214px, 64vw) !important;
    --unlock-key-size: min(176px, 52vw) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  html body .reel-overlay.is-intro .unlock-coffer-line.count-1 > .unlock-coffer-unit {
    flex: 0 0 var(--unlock-unit-size) !important;
    width: var(--unlock-unit-size) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  html body .reel-overlay.is-intro .unlock-coffer-line.count-1 .unlock-coffer-wrap {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .view-upgrade .upgrade-forge {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 314px !important;
    min-height: 314px !important;
    max-height: 314px !important;
    gap: 4px !important;
    padding: 8px 5px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background-size: cover, cover, cover !important;
    background-position: center center, center center, center center !important;
  }
  html body .view-upgrade .upgrade-forge::before {
    background-size: cover !important;
    background-position: center center !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    position: relative !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column {
    order: 1 !important;
    grid-column: 1 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column {
    order: 2 !important;
    grid-column: 2 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    order: 3 !important;
    grid-column: 3 !important;
  }

  html body .view-upgrade .upgrade-offer-column,
  html body .view-upgrade .upgrade-target-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 3px 2px 4px !important;
  }
  html body .view-upgrade .upgrade-offer-title,
  html body .view-upgrade .upgrade-target-title {
    flex: 0 0 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  html body .view-upgrade .upgrade-offer-title > span,
  html body .view-upgrade .upgrade-target-title > span {
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
  }
  html body .view-upgrade .upgrade-offer-title::before,
  html body .view-upgrade .upgrade-offer-title::after,
  html body .view-upgrade .upgrade-target-title::before,
  html body .view-upgrade .upgrade-target-title::after,
  html body .view-upgrade .upgrade-panel-ornaments,
  html body .view-upgrade .upgrade-stage-side-rail {
    display: none !important;
  }
  html body .view-upgrade .upgrade-offer-stage,
  html body .view-upgrade .upgrade-target-stage {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
  html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack {
    width: 100% !important;
    min-width: 0 !important;
    height: 154px !important;
    min-height: 0 !important;
    max-height: 154px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 68px !important;
    gap: 3px !important;
  }
  html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack.is-target {
    display: grid !important;
    place-items: center !important;
  }
  html body .view-upgrade .upgrade-selection-tile,
  html body .view-upgrade .upgrade-offer-stage .upgrade-selection-tile,
  html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 3px !important;
    border-radius: 7px !important;
  }
  html body .view-upgrade .upgrade-selection-tile .upgrade-item-art {
    max-width: 38px !important;
    max-height: 38px !important;
  }
  html body .view-upgrade .upgrade-selection-tile :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count) {
    font-size: 6px !important;
    line-height: 1.05 !important;
  }
  html body .view-upgrade .upgrade-offer-drop-hint,
  html body .view-upgrade .upgrade-empty-selection {
    font-size: 8px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  html body .view-upgrade .upgrade-offer-slot-layer { opacity: .48 !important; }

  html body .view-upgrade .upgrade-gil-offer {
    display: grid !important;
    gap: 3px !important;
    margin-top: 3px !important;
  }
  html body .view-upgrade .upgrade-gil-field-label {
    font-size: 6.5px !important;
    letter-spacing: .03em !important;
    line-height: 1.05 !important;
  }
  html body .view-upgrade .upgrade-gil-entry-row {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    grid-template-rows: 24px 22px !important;
    width: 100% !important;
    min-height: 46px !important;
    gap: 2px 3px !important;
    padding: 2px 3px !important;
    border-radius: 7px !important;
  }
  html body .view-upgrade .upgrade-gil-entry-icon,
  html body .view-upgrade .upgrade-gil-entry-icon > img {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
  }
  html body .view-upgrade .upgrade-gil-entry-input {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 8px !important;
  }
  html body .view-upgrade .upgrade-gil-stepper {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    gap: 2px !important;
  }
  html body .view-upgrade .upgrade-gil-step-button {
    width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
  }
  html body .view-upgrade .upgrade-gil-current-value {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 6.5px !important;
    text-overflow: ellipsis !important;
  }

  html body .view-upgrade .upgrade-probability-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 14px 1px 8px !important;
    overflow: visible !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage,
  html body .view-upgrade .upgrade-chance-stage {
    flex: 0 0 auto !important;
    width: 180px !important;
    height: 180px !important;
    min-width: 180px !important;
    min-height: 180px !important;
    max-width: 180px !important;
    max-height: 180px !important;
    margin: -38px -44px -39px !important;
    transform: scale(.50) !important;
    transform-origin: center center !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px !important;
    min-height: 180px !important;
    max-width: 180px !important;
    max-height: 180px !important;
  }
  html body .view-upgrade .upgrade-chance-dial > strong { font-size: 30px !important; }
  html body .view-upgrade .upgrade-chance-dial > small { font-size: 10px !important; }
  html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button {
    flex: 0 0 auto !important;
    width: 86px !important;
    min-width: 0 !important;
    max-width: 86px !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 auto !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
  }
  html body .view-upgrade .upgrade-probability-column > p {
    position: relative !important;
    inset: auto !important;
    width: 88px !important;
    max-width: 88px !important;
    max-height: 54px !important;
    margin: 0 auto !important;
    padding: 0 1px !important;
    overflow: hidden !important;
    font-size: 6.5px !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }
  html body .view-upgrade .upgrade-target-trunk {
    left: 50% !important;
    right: auto !important;
    bottom: -6px !important;
    width: 90% !important;
    height: 46% !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
  }

  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    position: relative !important;
    width: 100% !important;
    height: clamp(620px, 160vw, 720px) !important;
    min-height: 620px !important;
    max-height: 720px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #07170f !important;
  }
  html body .coinflip-game-panel .coinflip-panel-background {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  html body .coinflip-game-panel .coinflip-panel-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  html body .coinflip-game-panel .coinflip-panel-border-crop {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 34% !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  html body .coinflip-game-panel .coinflip-panel-border-crop > .coinflip-panel-border {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: initial !important;
    object-position: center bottom !important;
    transform: none !important;
  }
  html body .coinflip-game-panel .coinflip-panel-title-wrap {
    left: 50% !important;
    right: auto !important;
    top: 2.8% !important;
    width: min(62%, 235px) !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    left: 50% !important;
    right: auto !important;
    top: 11.5% !important;
    width: min(88%, 320px) !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .coinflip-coin-stage {
    left: 50% !important;
    right: auto !important;
    top: 20% !important;
    width: min(54%, 205px) !important;
    height: 29% !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .cf30-choice {
    top: 51.5% !important;
    width: 31% !important;
    height: 70px !important;
    min-width: 0 !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: visible !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-heads {
    left: 10% !important;
    right: auto !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-tails {
    left: auto !important;
    right: 10% !important;
  }
  html body .coinflip-game-panel .cf30-choice-stack {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }
  html body .coinflip-game-panel .cf30-choice-bg,
  html body .coinflip-game-panel .cf30-choice-frame {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  html body .coinflip-game-panel .cf30-choice-frame.is-mirrored {
    transform: scaleX(-1) !important;
  }
  html body .coinflip-game-panel .cf30-choice-copy {
    inset: 7px 4px !important;
    gap: 2px !important;
  }
  html body .coinflip-game-panel .cf30-choice-symbol { font-size: clamp(18px, 5vw, 23px) !important; }
  html body .coinflip-game-panel .cf30-choice-label { font-size: clamp(13px, 3.7vw, 17px) !important; }
  html body .coinflip-game-panel .cf30-choice-ornament {
    font-size: 8px !important;
    transform: none !important;
  }
  html body .coinflip-game-panel .cf30-choice-name-row { gap: 4px !important; }

  html body .coinflip-game-panel .coinflip-controls {
    left: 7% !important;
    right: 7% !important;
    bottom: 4.2% !important;
    width: 86% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    transform: none !important;
  }
  html body .coinflip-game-panel .cf30-bet-control {
    width: min(100%, 286px) !important;
    max-width: 286px !important;
    gap: 6px !important;
  }
  html body .coinflip-game-panel .cf30-bet-step {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  html body .coinflip-game-panel .cf30-bet-field {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 174px !important;
    height: 38px !important;
  }
  html body .coinflip-game-panel .cf30-flip-button {
    flex: 0 0 auto !important;
    width: min(190px, 56vw) !important;
    min-width: 0 !important;
    height: 46px !important;
    overflow: visible !important;
  }
  html body .coinflip-game-panel .cf30-flip-stack {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body .coinflip-game-panel .cf30-flip-bg,
  html body .coinflip-game-panel .cf30-flip-frame {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

@media (max-width: 420px) {
  html body .site-mobile-nav-audio .audio-slider-row {
    grid-template-columns: 22px 31px minmax(128px, 1fr) !important;
    gap: 6px !important;
  }
  html body .site-mobile-nav-audio input.audio-volume-slider { min-width: 128px !important; }
  html body .view-upgrade .upgrade-forge {
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr) !important;
    height: 304px !important;
    min-height: 304px !important;
    max-height: 304px !important;
    gap: 3px !important;
    padding-inline: 4px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button {
    width: 80px !important;
    max-width: 80px !important;
  }
  html body .view-upgrade .upgrade-probability-column > p {
    width: 82px !important;
    max-width: 82px !important;
  }
  html body .coinflip-game-panel .cf30-choice { width: 30% !important; }
  html body .coinflip-game-panel .cf30-choice.is-heads { left: 11% !important; }
  html body .coinflip-game-panel .cf30-choice.is-tails { right: 11% !important; }
}

@media (max-width: 820px) {

  html body .app-shell > .ticker-wrap {
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 3px 10px 0 !important;
  }
  html body .app-shell > .ticker-wrap .ticker {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    margin: 0 auto !important;
    padding: 5px 10px 6px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }
  html body .app-shell > .ticker-wrap .ticker-message {
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    text-align: center !important;
    text-indent: 0 !important;
  }

  html body .main-layout,
  html body .main-layout.main-layout-minigame {
    padding-top: 4px !important;
  }
  html body .view-shop .hero,
  html body .view-vault .inventory-hero,
  html body .view-upgrade .upgrade-hero {
    min-height: 205px !important;
    height: 205px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  html body .view-shop .hero-copy,
  html body .view-vault .inventory-hero .hero-copy,
  html body .view-upgrade .upgrade-hero-copy {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 14px !important;
    text-align: center !important;
  }
  html body .view-shop .hero-copy .coffer-hall-eyebrow,
  html body .view-shop .hero-copy .hero-title-stage,
  html body .view-shop .hero-copy .hero-rotating-title,
  html body .view-shop .hero-copy > p:last-child,
  html body .view-vault .inventory-hero .hero-copy .inventory-eyebrow,
  html body .view-vault .inventory-hero .hero-copy h2,
  html body .view-vault .inventory-hero .hero-copy > p:last-child,
  html body .view-upgrade .upgrade-hero-copy .eyebrow,
  html body .view-upgrade .upgrade-hero-copy h2,
  html body .view-upgrade .upgrade-hero-copy > p:last-child {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html body .minigame-selector-hero {
    margin-top: -6px !important;
  }
  html body .minigame-selector-heading,
  html body .minigame-selector-heading > div,
  html body .minigame-selector-heading h2,
  html body .minigame-selector-heading p {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body .site-mobile-nav-grid > button {
    position: relative !important;
    overflow: hidden !important;
  }
  html body .site-mobile-nav-grid > button.is-active {
    padding-left: 18px !important;
    color: #fff4c7 !important;
    border-color: rgba(250, 218, 116, .88) !important;
    border-left: 4px solid #f3d46d !important;
    background:
      linear-gradient(90deg, rgba(238, 198, 84, .16), transparent 42%),
      linear-gradient(180deg, rgba(69, 91, 49, .98), rgba(22, 48, 29, .99)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 238, 173, .08),
      inset 0 0 24px rgba(238, 198, 84, .10),
      0 0 16px rgba(223, 183, 66, .13) !important;
  }
  html body .site-mobile-nav-grid > button.is-active::after {
    content: "CURRENT" !important;
    margin-left: auto !important;
    padding-left: 10px !important;
    color: #f6d978 !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-shadow: 0 0 8px rgba(239, 202, 99, .24) !important;
  }

  html body .reward-showcase-inventory > .reward-showcase-top-creatures > .reward-showcase-mascots-image {
    transform: translate3d(0, -22px, 0) !important;
  }

  html body .view-upgrade .upgrade-forge {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 14px !important;
    margin: 12px 0 18px !important;
    padding: 14px 10px 18px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background-color: #17281d !important;
    background-image:
      linear-gradient(rgba(23,40,29,.08), rgba(23,40,29,.08)),
      var(--bryer-css-v61-upgradebg, url('/images/upgradebg.png')),
      linear-gradient(180deg,#20382a 0%,#17291d 45%,#0d1710 72%,#050706 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: center top, center top, center center !important;
    background-size: 100% auto, 100% auto, 100% 100% !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
  }
  html body .view-upgrade .upgrade-forge::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    grid-column: 1 !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column {
    order: 1 !important;
    grid-row: 1 !important;
    padding: 4px 3px 0 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column {
    order: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 2px 8px 3px !important;
    overflow: visible !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    order: 3 !important;
    grid-row: 3 !important;
    padding: 0 3px 4px !important;
  }
  html body .view-upgrade .upgrade-offer-title,
  html body .view-upgrade .upgrade-target-title {
    display: grid !important;
    grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr) !important;
    min-height: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 0 7px !important;
    padding: 0 0 7px !important;
    overflow: visible !important;
  }
  html body .view-upgrade .upgrade-offer-title::before,
  html body .view-upgrade .upgrade-offer-title::after,
  html body .view-upgrade .upgrade-target-title::before,
  html body .view-upgrade .upgrade-target-title::after {
    display: flex !important;
  }
  html body .view-upgrade .upgrade-offer-title > span,
  html body .view-upgrade .upgrade-target-title > span {
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
  }
  html body .view-upgrade .upgrade-offer-stage,
  html body .view-upgrade .upgrade-target-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 258px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack,
  html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 176px !important;
    max-height: 230px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(72px, auto) !important;
    gap: 5px !important;
  }
  html body .view-upgrade .upgrade-target-stage > .upgrade-selection-stack.is-target {
    display: grid !important;
    place-items: center !important;
  }
  html body .view-upgrade .upgrade-selection-tile,
  html body .view-upgrade .upgrade-offer-stage .upgrade-selection-tile,
  html body .view-upgrade .upgrade-target-stage .upgrade-selection-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 5px !important;
  }
  html body .view-upgrade .upgrade-selection-tile .upgrade-item-art {
    max-width: 48px !important;
    max-height: 48px !important;
  }
  html body .view-upgrade .upgrade-selection-tile :is(.upgrade-item-rarity,.upgrade-item-name,.upgrade-item-value,.upgrade-selection-count) {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  html body .view-upgrade .upgrade-offer-drop-hint,
  html body .view-upgrade .upgrade-empty-selection {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  html body .view-upgrade .upgrade-gil-offer {
    display: grid !important;
    gap: 6px !important;
    margin-top: 7px !important;
    padding: 7px 6px !important;
  }
  html body .view-upgrade .upgrade-gil-field-label {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  html body .view-upgrade .upgrade-gil-entry-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    grid-template-rows: 30px 25px !important;
    width: 100% !important;
    min-height: 57px !important;
    gap: 3px 5px !important;
    padding: 4px 5px !important;
  }
  html body .view-upgrade .upgrade-gil-entry-icon,
  html body .view-upgrade .upgrade-gil-entry-icon > img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }
  html body .view-upgrade .upgrade-gil-entry-input {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    font-size: 10px !important;
  }
  html body .view-upgrade .upgrade-gil-stepper {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    gap: 4px !important;
  }
  html body .view-upgrade .upgrade-gil-step-button {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
  html body .view-upgrade .upgrade-gil-current-value {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
    font-size: 8px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage,
  html body .view-upgrade .upgrade-chance-stage {
    flex: 0 0 176px !important;
    width: 176px !important;
    height: 176px !important;
    min-width: 176px !important;
    min-height: 176px !important;
    max-width: 176px !important;
    max-height: 176px !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: center center !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial {
    width: 176px !important;
    height: 176px !important;
    min-width: 176px !important;
    min-height: 176px !important;
    max-width: 176px !important;
    max-height: 176px !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body .view-upgrade .upgrade-chance-dial > strong {
    font-size: 34px !important;
  }
  html body .view-upgrade .upgrade-chance-dial > small {
    font-size: 9px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button {
    order: 2 !important;
    width: min(248px, 78vw) !important;
    max-width: 248px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
  html body .view-upgrade .upgrade-probability-column > p {
    order: 3 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 310px !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 5px !important;
    overflow: visible !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  html body .view-upgrade .upgrade-target-trunk {
    left: 50% !important;
    right: auto !important;
    bottom: -7px !important;
    width: min(76%, 270px) !important;
    height: 48% !important;
    max-width: 270px !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
  }

  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    position: relative !important;
    width: 100% !important;
    height: clamp(640px, 166vw, 735px) !important;
    min-height: 640px !important;
    max-height: 735px !important;
    overflow: hidden !important;
    background: #07170f !important;
  }
  html body .coinflip-game-panel .coinflip-panel-background {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: center center !important;
    transform: none !important;
  }
  html body .coinflip-game-panel .coinflip-panel-title-wrap {
    left: 50% !important;
    right: auto !important;
    top: 1.4% !important;
    width: min(50%, 190px) !important;
    max-width: 190px !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .coinflip-panel-title-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  html body .coinflip-game-panel .coinflip-panel-balance {
    left: 50% !important;
    right: auto !important;
    top: 15.5% !important;
    width: min(88%, 320px) !important;
    max-width: 320px !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .coinflip-coin-stage {
    left: 50% !important;
    right: auto !important;
    top: 24% !important;
    width: min(52%, 195px) !important;
    height: 27% !important;
    transform: translateX(-50%) !important;
  }
  html body .coinflip-game-panel .cf30-choice {
    top: 53.5% !important;
    width: 30% !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-heads {
    left: 12% !important;
    right: auto !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-tails {
    left: auto !important;
    right: 12% !important;
  }
  html body .coinflip-game-panel .coinflip-controls {
    left: 7% !important;
    right: 7% !important;
    bottom: 4.2% !important;
    width: 86% !important;
    gap: 10px !important;
  }

  html body .minigame-mobile-desktop-only-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483200 !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    padding: 20px !important;
    background: rgba(2, 7, 5, .84) !important;
    backdrop-filter: blur(8px) !important;
  }
  html body .minigame-mobile-desktop-only-dialog {
    position: relative !important;
    box-sizing: border-box !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    padding: 28px 22px 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(229, 197, 105, .48) !important;
    border-radius: 18px !important;
    color: #e8e0c8 !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(215, 180, 82, .12), transparent 35%),
      linear-gradient(180deg, rgba(18, 43, 29, .98), rgba(6, 19, 13, .99)) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.05) !important;
    text-align: center !important;
  }
  html body .minigame-mobile-desktop-only-symbol {
    display: block !important;
    margin: 0 auto 5px !important;
    color: #efd379 !important;
    font-size: 25px !important;
    text-shadow: 0 0 16px rgba(239, 211, 121, .25) !important;
  }
  html body .minigame-mobile-desktop-only-kicker {
    margin: 0 0 5px !important;
    color: #d5b966 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .22em !important;
  }
  html body .minigame-mobile-desktop-only-dialog h3 {
    margin: 0 0 10px !important;
    color: #fff0bd !important;
    font: 700 25px/1.05 Georgia, "Times New Roman", serif !important;
  }
  html body .minigame-mobile-desktop-only-dialog > p:not(.minigame-mobile-desktop-only-kicker) {
    margin: 0 auto 18px !important;
    color: rgba(239, 234, 216, .72) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  html body .minigame-mobile-desktop-only-dialog > button {
    appearance: none !important;
    width: min(210px, 100%) !important;
    min-height: 43px !important;
    border: 1px solid rgba(241, 210, 115, .60) !important;
    border-radius: 10px !important;
    color: #fff0b7 !important;
    background: linear-gradient(180deg, rgba(78, 91, 45, .94), rgba(26, 52, 31, .98)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.22) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
  }
}

@media (max-width: 420px) {
  html body .view-upgrade .upgrade-forge {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 12px !important;
    padding: 12px 8px 16px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button {
    width: min(238px, 78vw) !important;
    max-width: 238px !important;
    min-height: 43px !important;
    height: 43px !important;
  }
  html body .view-upgrade .upgrade-probability-column > p {
    width: 100% !important;
    max-width: 292px !important;
  }
  html body .coinflip-game-panel .cf30-choice {
    width: 29% !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-heads {
    left: 13% !important;
  }
  html body .coinflip-game-panel .cf30-choice.is-tails {
    right: 13% !important;
  }
}

@media (max-width: 820px) {

  html body .view-page.view-shop > .reward-showcase-hall {
    top: auto !important;
    margin-top: 32px !important;
  }
  html body .view-page.view-vault > .open-stage {
    margin-top: 34px !important;
  }
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
    transform: translateX(-50%) translateY(58px) !important;
  }

  html body .minigame-active-stage.minigame-active-coinflip .coinflip-game-panel {
    background-color: #07170f !important;
    overflow: hidden !important;
  }
  html body .coinflip-game-panel .coinflip-panel-background {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 104% !important;
    min-height: 104% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
  }

  html body .view-upgrade .upgrade-forge {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 14px 0 20px !important;
    padding: 15px 10px 18px !important;
    overflow: hidden !important;
    background-color: #15271b !important;
    background-image: var(--bryer-css-v61-upgradebg, url('/images/upgradebg.png')) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }
  html body .view-upgrade .upgrade-forge::before {
    display: none !important;
    content: none !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column,
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column,
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-offer-column {
    grid-row: 1 !important;
    order: 1 !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-probability-column {
    grid-row: 2 !important;
    order: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    place-items: center !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 8px 0 5px !important;
    overflow: visible !important;
    text-align: center !important;
  }
  html body .view-upgrade .upgrade-forge > .upgrade-target-column {
    grid-row: 3 !important;
    order: 3 !important;
  }

  html body .view-upgrade .upgrade-offer-stage {
    position: relative !important;
    min-height: 270px !important;
    padding: 28px 8px 10px !important;
    overflow: hidden !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-drop-hint {
    top: 5px !important;
    left: 8px !important;
    right: 8px !important;
    height: auto !important;
    min-height: 15px !important;
    line-height: 15px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer {
    position: absolute !important;
    top: 30px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, clamp(72px, 22vw, 90px)) !important;
    grid-auto-rows: clamp(72px, 22vw, 90px) !important;
    column-gap: 5px !important;
    row-gap: 6px !important;
    opacity: .78 !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer > .upgrade-offer-slot {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(72px, 22vw, 90px) !important;
    min-height: 0 !important;
    max-height: 90px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bryer-css-v61-upgrade-offer-slot-placeholder, url('/images/upgrade-offer-slot-placeholder.png')) center / contain no-repeat !important;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.28)) !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted {
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, clamp(72px, 22vw, 90px)) !important;
    grid-auto-rows: clamp(72px, 22vw, 90px) !important;
    align-content: start !important;
    column-gap: 5px !important;
    row-gap: 6px !important;
    width: 100% !important;
    height: clamp(150px, 45vw, 186px) !important;
    min-height: clamp(150px, 45vw, 186px) !important;
    max-height: clamp(150px, 45vw, 186px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(72px, 22vw, 90px) !important;
    min-height: 0 !important;
    max-height: 90px !important;
    margin: 0 !important;
    padding: 3px 3px 4px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > img.upgrade-item-art,
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-art {
    align-self: center !important;
    justify-self: center !important;
    width: clamp(34px, 10.5vw, 44px) !important;
    min-width: 0 !important;
    max-width: 44px !important;
    height: clamp(34px, 10.5vw, 44px) !important;
    min-height: 0 !important;
    max-height: 44px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-rarity {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-name {
    margin: 1px 0 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 6.5px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted > .upgrade-selection-tile > .upgrade-item-value {
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 6px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-gil-offer {
    margin-top: 8px !important;
  }

  html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage,
  html body .view-upgrade .upgrade-chance-stage {
    position: relative !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit,
  html body .view-upgrade .upgrade-chance-stage > .upgrade-inline-dial-fragments {
    display: none !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-chance-dial {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  html body .view-upgrade .upgrade-chance-dial > .upgrade-center-motion {
    left: 50% !important;
    top: 50% !important;
    width: 184px !important;
    height: 184px !important;
    translate: -50% -50% !important;
    transform: none !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-attempt-button {
    position: relative !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: center !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: min(250px, 78vw) !important;
    min-width: 0 !important;
    max-width: 250px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 2px auto 0 !important;
    transform: none !important;
  }
  html body .view-upgrade .upgrade-probability-column > p {
    position: relative !important;
    grid-row: 3 !important;
    align-self: start !important;
    justify-self: center !important;
    inset: auto !important;
    width: min(310px, 94%) !important;
    max-width: 310px !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  html body .card-album.card-album-modal-book .card-binder-rings {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-surface {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-image,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-frame,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-mythic-art-layer > .album-preset-card-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    object-fit: contain !important;
    backface-visibility: visible !important;
    content-visibility: visible !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot > :is(.mythic-card-vortex,.mythic-card-diagonal-orbit,.mythic-card-sparkles),
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card > .card-rarity-fx,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-foil,
  html body .card-album.card-album-modal-book .card-book-slot .card-mythic-panorama-sweep-image,
  html body .card-album.card-album-modal-book .card-book-slot .card-mythic-art-sweep-image {
    display: none !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot,
  html body .card-album.card-album-modal-book .card-book-slot-empty {
    height: clamp(164px, 47vw, 190px) !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: min(104px, calc(100% - 4px)) !important;
    min-width: 0 !important;
    max-width: 104px !important;
    height: auto !important;
  }

  html body .achievement-section .achievements-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html body .achievement-section .achievement-card {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    height: auto !important;
    padding: 10px !important;
    overflow: visible !important;
    text-align: left !important;
  }
  html body .achievement-section .achievement-icon-stage {
    grid-column: 1 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  html body .achievement-section .achievement-icon-stage img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
  }
  html body .achievement-section .achievement-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }
  html body .achievement-section .achievement-copy h3 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 3px !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body .achievement-section .achievement-copy p {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    overflow: visible !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
  html body .achievement-section .achievement-copy small {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  html body .achievement-section .achievement-progress {
    width: 100% !important;
    margin: 5px 0 5px !important;
  }
  html body .achievement-section .achievement-state {
    display: none !important;
  }
}

@media (max-width: 420px) {
  html body .view-page.view-vault > .open-stage {
    margin-top: 36px !important;
  }
  html body .view-upgrade .upgrade-offer-stage > .upgrade-offer-slot-layer,
  html body .view-upgrade .upgrade-offer-stage > .upgrade-selection-stack.upgrade-selection-grid.is-offer-slotted {
    column-gap: 4px !important;
    row-gap: 5px !important;
  }
  html body .view-upgrade .upgrade-probability-column > .upgrade-chance-stage,
  html body .view-upgrade .upgrade-chance-stage {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
  }
}

@media (max-width: 820px) {

  html body .view-page.view-vault > .open-stage {
    margin-top: 58px !important;
  }
  html body .view-page.view-vault > .open-stage > .inventory-stage-top-decor {
    transform: translateX(-50%) !important;
  }

  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit {
    display: block !important;
    visibility: visible !important;
    left: 50% !important;
    top: 50% !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    margin: 0 !important;
    scale: 1 !important;
    transform-origin: 50% 50% !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-a > i::before {
    width: 183px !important;
    height: 69px !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-back > i::before,
  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-front > i::before {
    width: 189px !important;
    height: 73px !important;
  }
  html body .view-upgrade .upgrade-chance-stage > .upgrade-live-atom-orbit.is-c-front {
    clip-path: circle(68px at 50% 50%) !important;
  }

  html body .coinflip-game-panel .coinflip-panel-background {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 118% !important;
    min-height: 118% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: translateX(-50%) !important;
    transform-origin: center top !important;
  }

  html body .view-vault .vault-selection.is-card-pack-selection {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 194, 139, .27) !important;
    border-radius: 13px !important;
    background: linear-gradient(118deg, rgba(19, 37, 31, .90), rgba(46, 42, 28, .72) 48%, rgba(20, 38, 32, .90)) !important;
    box-shadow: inset 0 0 36px color-mix(in srgb, var(--accent) 5%, transparent) !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    display: block !important;
    opacity: .48 !important;
    border: 0 !important;
    clip-path: none !important;
    transform: none !important;
    pointer-events: none !important;
    background-image:
      linear-gradient(30deg, transparent 47%, rgba(226,211,165,.095) 48% 49%, transparent 50%),
      linear-gradient(-30deg, transparent 47%, rgba(154,207,181,.06) 48% 49%, transparent 50%),
      radial-gradient(ellipse at 50% 125%, transparent 0 48%, rgba(231,203,124,.12) 49% 50%, transparent 51%),
      radial-gradient(circle at 8px 8px, rgba(255,240,190,.10) 0 1px, transparent 1.5px) !important;
    background-size: 54px 31px, 54px 31px, 210px 82px, 24px 24px !important;
    box-shadow: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection::after {
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    z-index: -1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px solid rgba(244, 220, 151, .13) !important;
    background: none !important;
    clip-path: polygon(0 13px, 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px)) !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection > .mythic-panel-frame-overlay {
    display: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection > .vault-selection-texture {
    display: block !important;
    z-index: -1 !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection > div:not(.vault-selection-texture) {
    position: relative !important;
    z-index: 2 !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection .selected-coffer-label-row .eyebrow,
  html body .view-vault .vault-selection.is-card-pack-selection .selected-coffer-card-pack-note,
  html body .view-vault .vault-selection.is-card-pack-selection .open-count-picker > div,
  html body .view-vault .vault-selection.is-card-pack-selection .open-count-picker small,
  html body .view-vault .vault-selection.is-card-pack-selection .vault-action-group,
  html body .view-vault .vault-selection.is-card-pack-selection .vault-action-group > .inventory-open-button-shell {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection .selected-coffer-info > h3 {
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection .open-count-picker > span {
    display: block !important;
    position: static !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection .vault-action-group {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection .vault-action-group > .open-secondary,
  html body .view-vault .vault-selection.is-card-pack-selection .vault-action-group > .inventory-open-button-shell {
    flex: 0 1 180px !important;
    flex-basis: 180px !important;
    width: min(180px, 100%) !important;
    min-width: 150px !important;
    max-width: 180px !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection .vault-action-group > .inventory-open-button-shell > .inventory-open-custom-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 981px) and (max-width: 2559px),
       (min-width: 981px) and (max-height: 1439px) {

  html body .minigame-card-row {
    gap: 12px !important;
  }
  html body .minigame-card {
    flex: 0 1 300px !important;
    width: min(300px, calc((100% - 36px) / 4)) !important;
    height: auto !important;
    aspect-ratio: 366 / 549 !important;
  }
  html body .minigame-card-frame {
    width: 100% !important;
    height: 100% !important;
  }

  html body .minigame-character img {
    width: auto !important;
    height: min(478px, 25.8vw, calc(100% - 38px)) !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}

html body .login-screen > .login-audio-controls.history-column{
  position:relative!important;
  z-index:3!important;
  width:min(330px,86vw)!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  margin:24px 0 0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}

html body .login-audio-controls.history-column > .history-launch-stack{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:7px!important;
  background:transparent!important;
}

html body .login-audio-controls.history-column > .history-launch-stack::before,
html body .login-audio-controls.history-column > .history-launch-stack::after{
  top:-48px!important;
  height:calc(48px + 100% - 8px)!important;
  display:block!important;
  content:""!important;
}
html body .login-audio-controls.history-column > .history-launch-stack::before{
  left:14px!important;
}
html body .login-audio-controls.history-column > .history-launch-stack::after{
  right:14px!important;
}

html body .login-audio-controls .login-audio-plank-visual{
  pointer-events:none!important;
  cursor:default!important;
}

html body .login-audio-controls .login-audio-plank-controls{
  position:absolute!important;
  inset:0!important;
  z-index:7!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 34px!important;
  display:grid!important;
  grid-template-columns:20px 36px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  color:#f5ddb0!important;
}
html body .login-audio-controls .login-audio-plank-controls.is-muted{
  opacity:.66!important;
  filter:saturate(.65)!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-slider-label{
  color:#f5ddb0!important;
  font-size:9.5px!important;
  font-weight:950!important;
  letter-spacing:.105em!important;
  text-shadow:0 1px 0 rgba(69,35,12,.98),0 2px 2px rgba(30,14,5,.76)!important;
  opacity:1!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-icon-button.sound-toggle,
html body .login-audio-controls .login-audio-plank-controls .audio-icon-button.sound-toggle:hover{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  color:#f5ddb0!important;
  border-color:rgba(73,39,14,.94)!important;
  background:rgba(73,39,14,.72)!important;
  box-shadow:inset 0 1px rgba(255,224,160,.12),0 1px 2px rgba(30,14,5,.58)!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-icon-button.sound-toggle > span{
  font-size:11px!important;
  text-shadow:0 1px 0 rgba(69,35,12,.98)!important;
}
html body .login-audio-controls .login-audio-plank-controls .audio-volume-slider{
  width:100%!important;
  height:14px!important;
}

@media(max-width:1100px){
  html body .login-audio-controls.history-column > .history-launch-stack::before,
  html body .login-audio-controls.history-column > .history-launch-stack::after{
    display:block!important;
    content:""!important;
  }
}
@media(max-width:680px){
  html body .login-screen > .login-audio-controls.history-column{
    width:min(300px,88vw)!important;
    margin-top:20px!important;
  }
  html body .login-audio-controls .login-audio-plank-controls{
    padding:0 30px!important;
    grid-template-columns:19px 32px minmax(0,1fr)!important;
    gap:6px!important;
  }
}

html body .login-screen > .login-card{
  z-index:3!important;
}
html body .login-screen > .login-audio-controls.history-column{
  z-index:2!important;
}
html body .login-audio-controls.history-column > .history-launch-stack{
  isolation:isolate!important;
}
html body .login-audio-controls.history-column > .history-launch-stack::before,
html body .login-audio-controls.history-column > .history-launch-stack::after{
  z-index:-1!important;
}
html body .login-audio-controls.history-column > .history-launch-stack > .history-launch-row{
  z-index:2!important;
}
html body .login-audio-controls .login-audio-plank-visual{
  z-index:2!important;
}
html body .login-audio-controls .login-audio-plank-controls{
  z-index:7!important;
}

html body .login-audio-controls .audio-volume-slider{
  height:14px!important;
}
html body .login-audio-controls .audio-volume-slider::-webkit-slider-runnable-track{
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(84,51,21,.98),rgba(106,65,28,.98))!important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(82,52,24,.26)!important;
}
html body .login-audio-controls .audio-volume-slider::-moz-range-track{
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(84,51,21,.98),rgba(106,65,28,.98))!important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(82,52,24,.26)!important;
}
html body .login-audio-controls .audio-volume-slider::-moz-range-progress{
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(171,112,45,.98),rgba(217,157,65,.98))!important;
  box-shadow:0 0 5px rgba(225,170,78,.18)!important;
}
html body .login-audio-controls .audio-volume-slider::-webkit-slider-thumb{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:14px!important;
  height:14px!important;
  margin-top:-5px!important;
  border-radius:50%!important;
  border:1px solid rgba(117,73,23,.94)!important;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,247,215,.95),
      rgba(248,219,128,.98) 40%,
      rgba(187,127,47,.99) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 2px 6px rgba(0,0,0,.26),
    0 0 9px rgba(247,214,122,.18)!important;
}
html body .login-audio-controls .audio-volume-slider::-moz-range-thumb{
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  border:1px solid rgba(117,73,23,.94)!important;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,247,215,.95),
      rgba(248,219,128,.98) 40%,
      rgba(187,127,47,.99) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 2px 6px rgba(0,0,0,.26),
    0 0 9px rgba(247,214,122,.18)!important;
}

html body .login-audio-controls.history-column > .history-launch-stack > .history-launch-row > button.login-audio-plank-visual{
  filter:
    saturate(.72)
    brightness(.84)
    sepia(.10)
    contrast(1.03)
    drop-shadow(0 6px 4px rgba(18,8,3,.18))!important;
}

html body .inventory-open-button-shell .inventory-open-button-label{
  white-space:nowrap!important;
}

html body .login-screen > .login-access-stack{
  position:relative!important;
  z-index:3!important;
  width:min(480px,96vw)!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
html body .login-screen > .login-access-stack > .login-card{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  flex:0 0 auto!important;
}
html body .login-screen > .login-access-stack > .login-audio-controls.history-column{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  align-self:center!important;
  order:2!important;
  z-index:2!important;
  width:min(330px,86vw)!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  flex:0 0 auto!important;
  margin:24px 0 0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
  transform:none!important;
  translate:none!important;
}
html body .login-screen > .login-access-stack > .login-audio-controls.history-column > .history-launch-stack{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:680px){
  html body .login-screen > .login-access-stack{
    width:min(480px,96vw)!important;
  }
  html body .login-screen > .login-access-stack > .login-audio-controls.history-column{
    width:min(300px,88vw)!important;
    margin-top:20px!important;
  }
}

html body .staff-venue-access-switch{
  width:170px!important;
  flex:0 0 170px!important;
}
html body .staff-venue-access-switch>button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  padding:0 8px!important;
  overflow:visible!important;
  text-indent:0!important;
  font-size:0!important;
}
html body .staff-venue-access-switch>button::before{
  content:none!important;
  display:none!important;
}
html body .staff-venue-access-switch>button::after{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  color:inherit!important;
  font:950 10px/1.05 Arial,sans-serif!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
  text-indent:0!important;
  opacity:1!important;
  visibility:visible!important;
}
html body .staff-venue-access-switch>button:first-child::after{
  content:"OPEN"!important;
}
html body .staff-venue-access-switch>button:last-child::after{
  content:"CLOSED"!important;
}
html body .staff-venue-access-switch .staff-venue-access-label{
  display:none!important;
}

@media (max-width: 820px) {
  html body .site-mobile-nav-drawer {
    width: min(312px, 82vw) !important;
  }
  html body .site-mobile-nav-grid > .site-mobile-nav-divider {
    display: block !important;
    width: calc(100% - 8px) !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 5px 4px 6px !important;
    border: 0 !important;
    background: linear-gradient(90deg, transparent 0%, rgba(221,188,96,.38) 18%, rgba(221,188,96,.20) 82%, transparent 100%) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.28) !important;
    pointer-events: none !important;
  }
  html body .site-mobile-nav-grid > .site-mobile-nav-divider-utility {
    margin-top: 7px !important;
  }
}
@media (max-width: 520px) {
  html body .site-mobile-nav-drawer {
    width: min(300px, 80vw) !important;
  }
}

@media (max-width: 820px) {
  html body .site-mobile-nav-drawer {
    width: min(280px, 74vw) !important;
  }
  html body .site-mobile-nav-profile {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 10px !important;
  }
  html body .site-mobile-nav-profile-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  html body .site-mobile-nav-profile-copy strong,
  html body .site-mobile-nav-profile-copy span {
    min-width: 0 !important;
  }
  html body .site-mobile-nav-profile-button {
    appearance: none !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    align-self: center !important;
    justify-self: end !important;
  }
}
@media (max-width: 520px) {
  html body .site-mobile-nav-drawer {
    width: min(270px, 72vw) !important;
  }
}

@media (max-width: 820px) {
  html body .topbar .site-top-profile-button {
    transition: opacity .16s ease, visibility .16s ease !important;
  }
  html body .topbar .site-top-profile-button.is-hidden-while-mobile-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.first-purchase-gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 9, 6, .34);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  backdrop-filter: blur(10px) saturate(.9);
  animation: firstPurchaseGiftOverlayIn .24s ease both;
}
.first-purchase-gift-dialog {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(430px, 92vw);
  padding: 28px 28px 24px;
  text-align: center;
  border: 1px solid rgba(240,217,144,.52);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 14%, rgba(167, 213, 164, .16), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(240, 217, 144, .15), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(19, 57, 34, .40), transparent 45%),
    linear-gradient(155deg, rgba(40, 74, 52, .985) 0%, rgba(26, 61, 40, .985) 38%, rgba(16, 41, 28, .99) 67%, rgba(10, 24, 17, .99) 100%);
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 42px rgba(214,180,95,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation: firstPurchaseGiftDialogIn .38s cubic-bezier(.18,1,.3,1) both;
}
.first-purchase-gift-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .48;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.05) 46%, transparent 58%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 24%);
}
.first-purchase-gift-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(45deg, rgba(15,32,20,.28) 0 3px, transparent 3px 14px),
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.12) 0 1px, transparent 1px 100%);
  mix-blend-mode: soft-light;
}
.first-purchase-gift-dialog .eyebrow {
  margin-bottom: 8px;
  color: #f0d990;
}
.first-purchase-gift-dialog h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(26px, 4vw, 34px);
  color: #fff6d8;
  text-shadow: 0 2px 18px rgba(214,180,95,.18);
}
.first-purchase-gift-image {
  position: relative;
  width: 180px;
  height: 150px;
  margin: 14px auto 8px;
  display: grid;
  place-items: center;
}
.first-purchase-gift-image > span {
  position: absolute;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,217,144,.3), rgba(103,148,120,.1) 48%, transparent 72%);
  filter: blur(7px);
  animation: firstPurchaseGiftGlow 2.4s ease-in-out infinite;
}
.first-purchase-gift-image img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 168px;
  max-height: 142px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.34)) drop-shadow(0 0 16px rgba(214,180,95,.15));
  animation: firstPurchaseGiftFloat 2.8s ease-in-out infinite;
}
.first-purchase-gift-copy {
  width: min(340px, 100%);
  margin: 8px auto 20px;
  color: #d8e2d6;
  font-size: 14px;
  line-height: 1.55;
}
.first-purchase-gift-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.first-purchase-gift-actions .btn {
  min-width: 128px;
}
.first-purchase-gift-actions .btn.primary {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: none !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.first-purchase-gift-actions .btn.primary:hover:not(:disabled),
.first-purchase-gift-actions .btn.primary:active:not(:disabled) {
  transform: none !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.first-purchase-gift-actions .btn.primary::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 10px 25px rgba(232,196,103,.18);
  transform-origin: 50% 50%;
  animation: firstPurchaseGiftCtaPulse 3.4s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.first-purchase-gift-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.first-purchase-gift-sparkles i {
  position: absolute;
  left: var(--gift-x, 50%);
  top: var(--gift-y, 50%);
  display: block;
  font-style: normal;
  font-size: 18px;
  scale: var(--gift-scale, 1);
  line-height: 1;
  opacity: 0;
  text-shadow: 0 0 10px rgba(255,255,255,.18), 0 0 16px rgba(214,180,95,.16);
  transform: translate(-50%, -50%) scale(.68) rotate(var(--gift-rotate, 0deg));
  animation: firstPurchaseGiftPresentBlink var(--gift-duration, 6s) var(--gift-delay, 0s) ease-in-out infinite;
}
.first-purchase-gift-sparkles i.is-gold { filter: saturate(1.08) brightness(1.08); }
.first-purchase-gift-sparkles i.is-jade { filter: hue-rotate(-28deg) saturate(1.2) brightness(1.04); }
.first-purchase-gift-sparkles i.is-mint { filter: hue-rotate(24deg) saturate(1.16) brightness(1.06); }
.first-purchase-gift-sparkles i.is-emerald { filter: hue-rotate(-8deg) saturate(1.28) brightness(1.02); }
@keyframes firstPurchaseGiftOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes firstPurchaseGiftDialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes firstPurchaseGiftFloat {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-5px) rotate(.6deg); }
}
@keyframes firstPurchaseGiftGlow {
  0%, 100% {
    opacity: .68;
    transform: scale(.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes firstPurchaseGiftPresentBlink {
  0%, 10%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.66) rotate(var(--gift-rotate, 0deg));
  }
  22% {
    opacity: .28;
    transform: translate(-50%, -50%) scale(.82) rotate(var(--gift-rotate, 0deg));
  }
  38%, 60% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1) rotate(var(--gift-rotate, 0deg));
  }
  78% {
    opacity: .22;
    transform: translate(-50%, -50%) scale(.88) rotate(var(--gift-rotate, 0deg));
  }
}
@keyframes firstPurchaseGiftCtaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(232,196,103,.18);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 13px 31px rgba(232,196,103,.28), 0 0 18px rgba(232,196,103,.12);
  }
}
@media (max-width: 520px) {
  .first-purchase-gift-dialog { padding: 24px 18px 20px; }
  .first-purchase-gift-image {
    width: 160px;
    height: 136px;
  }
  .first-purchase-gift-image img {
    max-width: 150px;
    max-height: 128px;
  }
  .first-purchase-gift-actions { width: 100%; }
  .first-purchase-gift-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-purchase-gift-dialog,
  .first-purchase-gift-overlay,
  .first-purchase-gift-image img,
  .first-purchase-gift-image > span,
  .first-purchase-gift-sparkles i,
  .first-purchase-gift-actions .btn.primary { animation: none !important; }
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -4px !important;
  z-index: 16 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  background: url('/images/ui/history/history-branch-frame-v35.svg') center/100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 2px rgba(20,10,4,.72)) drop-shadow(0 10px 9px rgba(1,8,4,.43)) !important;
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art {
  position: absolute !important;
  top: -3px !important;
  left: 9px !important;
  right: 9px !important;
  height: 82px !important;
  z-index: 18 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: visible !important;
  background:
    repeating-linear-gradient(176deg, rgba(255,220,152,.045) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #8e6337 0%, #714621 27%, #4f2a12 57%, #2d1709 100%) !important;
  clip-path: polygon(0 8%, 7% 3%, 18% 9%, 29% 5%, 40% 12%, 50% 7%, 61% 13%, 72% 6%, 84% 11%, 94% 4%, 100% 9%, 100% 70%, 94% 77%, 84% 69%, 73% 82%, 62% 72%, 51% 84%, 40% 74%, 30% 86%, 19% 75%, 8% 82%, 0 72%) !important;
  box-shadow: inset 0 4px rgba(255,220,154,.13), inset 0 -9px rgba(30,13,4,.38) !important;
  filter: drop-shadow(0 5px 3px rgba(16,7,2,.38)) !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art::before,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: none !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art::before {
  top: 4px !important;
  height: 34px !important;
  background:
    repeating-linear-gradient(178deg, rgba(255,234,183,.05) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #aa7a47, #805329 58%, #633b1b) !important;
  clip-path: polygon(0 18%, 9% 4%, 21% 17%, 34% 7%, 48% 19%, 61% 8%, 75% 18%, 88% 5%, 100% 16%, 100% 66%, 89% 78%, 76% 65%, 63% 82%, 49% 68%, 35% 81%, 21% 67%, 9% 79%, 0 68%) !important;
  opacity: .94 !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art::after {
  top: 34px !important;
  height: 35px !important;
  background: linear-gradient(180deg, rgba(93,55,25,.96), rgba(55,29,12,.98)) !important;
  clip-path: polygon(0 7%, 10% 17%, 22% 6%, 35% 19%, 49% 5%, 62% 18%, 76% 4%, 89% 16%, 100% 6%, 100% 77%, 91% 91%, 78% 80%, 65% 96%, 52% 82%, 39% 97%, 25% 81%, 12% 94%, 0 79%) !important;
  box-shadow: inset 0 -8px rgba(23,10,3,.28) !important;
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-nature-ornaments,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-leaf-divider-layer {
  visibility: visible !important;
  opacity: 1 !important;
}

html body .view-vault .vault-selection > .inventory-purchase-picker.open-count-picker {
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}
html body .view-vault .vault-selection.is-mythic-coffer > .inventory-purchase-picker.open-count-picker > .inventory-purchase-control {
  grid-template-columns: 32px 48px 32px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}
html body .view-vault .vault-selection.is-mythic-coffer > .inventory-purchase-picker.open-count-picker > .inventory-purchase-control > button {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
}
html body .view-vault .vault-selection.is-mythic-coffer > .inventory-purchase-picker.open-count-picker > .inventory-purchase-control > input {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding-inline: 3px !important;
}

.first-purchase-gift-actions .first-purchase-gift-open-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  color: #182119 !important;
  border-color: rgba(255,255,255,.25) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, #f4e2a7, #d4af54) !important;
  box-shadow: 0 10px 25px rgba(214,180,95,.20) !important;
  transform-origin: 50% 50% !important;
  animation: firstPurchaseGiftOpenFacePulse 3.4s ease-in-out infinite !important;
  will-change: transform, box-shadow !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-button > span {
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
  color: #182119 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}
.first-purchase-gift-actions .first-purchase-gift-open-button:hover:not(:disabled),
.first-purchase-gift-actions .first-purchase-gift-open-button:active:not(:disabled) {
  color: #101711 !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-button:hover:not(:disabled)::before {
  background: linear-gradient(135deg, #fff1bc, #e1bf67) !important;
}
@keyframes firstPurchaseGiftOpenFacePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(214,180,95,.20);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 14px 32px rgba(214,180,95,.32), 0 0 18px rgba(214,180,95,.16);
  }
}

@media (max-width: 680px) {
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic::before {
    inset: -3px !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art {
    left: 7px !important;
    right: 7px !important;
    height: 72px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-purchase-gift-actions .first-purchase-gift-open-button::before { animation: none !important; }
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame {
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  right: -4px !important;
  height: 58px !important;
  z-index: 18 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 3px 2px rgba(20,10,4,.72)) drop-shadow(0 8px 7px rgba(1,8,4,.34)) !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  transform-origin: 50% 0 !important;
  transform: scaleY(4.6) !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art {
  display: none !important;
  content: none !important;
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header {
  margin: 21px 15px 8px !important;
  flex-basis: 66px !important;
  min-height: 66px !important;
  height: 66px !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header > .history-panel-title-plank {
  transform: translateY(22px) !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list {
  margin: 0 12px 11px !important;
  padding-top: 15px !important;
}

.first-purchase-gift-actions .first-purchase-gift-open-button,
.first-purchase-gift-actions .first-purchase-gift-open-button:hover:not(:disabled),
.first-purchase-gift-actions .first-purchase-gift-open-button:active:not(:disabled) {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  opacity: 1 !important;
  color: #182119 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: linear-gradient(135deg, #f4e2a7, #d4af54) !important;
  box-shadow: 0 10px 25px rgba(214,180,95,.20) !important;
  filter: none !important;
  transform: none !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-button:hover:not(:disabled) {
  color: #101711 !important;
  background: linear-gradient(135deg, #fff1bc, #e1bf67) !important;
  box-shadow: 0 13px 30px rgba(214,180,95,.28), 0 0 18px rgba(214,180,95,.13) !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-button::before,
.first-purchase-gift-actions .first-purchase-gift-open-button::after {
  content: none !important;
  display: none !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-pulse {
  position: absolute !important;
  inset: -1px !important;
  z-index: 1 !important;
  display: block !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255,244,197,.72), rgba(218,181,87,.68)) !important;
  box-shadow: 0 7px 18px rgba(214,180,95,.15) !important;
  opacity: .42 !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
  will-change: transform, opacity, box-shadow !important;
  animation: firstPurchaseGiftOpenPulseV135 3.4s ease-in-out infinite !important;
}
.first-purchase-gift-actions .first-purchase-gift-open-label {
  position: relative !important;
  z-index: 3 !important;
  display: inline-block !important;
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}
@keyframes firstPurchaseGiftOpenPulseV135 {
  0%, 100% {
    transform: scale(1);
    opacity: .30;
    box-shadow: 0 7px 18px rgba(214,180,95,.13);
  }
  50% {
    transform: scale(1.055);
    opacity: .58;
    box-shadow: 0 12px 28px rgba(214,180,95,.26), 0 0 16px rgba(240,217,144,.18);
  }
}

@media (max-width: 680px) {
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame {
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    height: 52px !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header {
    margin: 17px 11px 6px !important;
    flex-basis: 61px !important;
    min-height: 61px !important;
    height: 61px !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header > .history-panel-title-plank {
    transform: translateY(18px) !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list {
    margin: 0 10px 9px !important;
    padding-top: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-purchase-gift-actions .first-purchase-gift-open-pulse { animation: none !important; }
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-fixed-top-frame,
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-top-cap-art {
  display: none !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top {
  position: absolute !important;
  top: -2px !important;
  left: 6px !important;
  right: 6px !important;
  height: 62px !important;
  z-index: 18 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 4px 3px rgba(20,10,4,.66)) drop-shadow(0 9px 8px rgba(1,8,4,.32)) !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header {
  margin: 21px 15px 8px !important;
  flex-basis: 66px !important;
  min-height: 66px !important;
  height: 66px !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header > .history-panel-title-plank {
  transform: translateY(22px) !important;
}
html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list {
  margin: 0 12px 11px !important;
  padding-top: 15px !important;
}

.first-purchase-gift-actions button.first-purchase-gift-open-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  min-width: 128px !important;
  min-height: 38px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  color: #182119 !important;
  background: linear-gradient(135deg, #f4e2a7, #d4af54) !important;
  box-shadow: 0 10px 25px rgba(214,180,95,.20) !important;
  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  filter: none !important;
  transform: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.first-purchase-gift-actions button.first-purchase-gift-open-button:hover:not(:disabled) {
  color: #101711 !important;
  background: linear-gradient(135deg, #fff1bc, #e1bf67) !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: 0 14px 34px rgba(214,180,95,.30), 0 0 22px rgba(214,180,95,.14) !important;
  filter: none !important;
  transform: none !important;
}
.first-purchase-gift-actions button.first-purchase-gift-open-button:active:not(:disabled) {
  transform: none !important;
  filter: brightness(.98) !important;
}
.first-purchase-gift-actions button.first-purchase-gift-open-button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
.first-purchase-gift-actions button.first-purchase-gift-open-button > .first-purchase-gift-open-face {
  position: absolute !important;
  inset: -1px !important;
  z-index: 1 !important;
  display: block !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(255,241,188,.82), rgba(225,191,103,.74)) !important;
  box-shadow: 0 8px 20px rgba(214,180,95,.16) !important;
  opacity: .72 !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
  will-change: transform, opacity, box-shadow !important;
  animation: firstPurchaseGiftOpenPulseV136 3.2s ease-in-out infinite !important;
}
.first-purchase-gift-actions button.first-purchase-gift-open-button > .first-purchase-gift-open-label {
  position: relative !important;
  z-index: 3 !important;
  display: inline-block !important;
  color: #182119 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}
@keyframes firstPurchaseGiftOpenPulseV136 {
  0%, 100% {
    transform: scale(1);
    opacity: .58;
    box-shadow: 0 8px 20px rgba(214,180,95,.16);
  }
  50% {
    transform: scale(1.055);
    opacity: .92;
    box-shadow: 0 13px 30px rgba(214,180,95,.30), 0 0 18px rgba(240,217,144,.18);
  }
}

@media (max-width: 680px) {
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top {
    top: -1px !important;
    left: 5px !important;
    right: 5px !important;
    height: 56px !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header {
    margin: 17px 11px 6px !important;
    flex-basis: 61px !important;
    min-height: 61px !important;
    height: 61px !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .panel-header > .history-panel-title-plank {
    transform: translateY(18px) !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list {
    margin: 0 10px 9px !important;
    padding-top: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-purchase-gift-actions button.first-purchase-gift-open-button > .first-purchase-gift-open-face {
    animation: none !important;
  }
}

@media (min-width: 1181px) {
  html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection > .inventory-purchase-picker.open-count-picker {
    box-sizing: border-box !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    align-self: center !important;
    justify-self: center !important;
    align-content: center !important;
    justify-items: center !important;
  }

  html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection > .inventory-purchase-picker.open-count-picker > .inventory-purchase-control {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 32px 48px 32px !important;
    gap: 0 !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
  }

  html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection > .inventory-purchase-picker.open-count-picker > .inventory-purchase-control > button,
  html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection > .inventory-purchase-picker.open-count-picker > .inventory-purchase-control > input {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
  }

  html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection > .inventory-purchase-picker.open-count-picker > small {
    margin: 0 !important;
    line-height: 13px !important;
    white-space: nowrap !important;
  }
}

.first-purchase-gift-actions button.first-purchase-gift-open-button > .first-purchase-gift-open-face {
  scale: .955;
  animation: firstPurchaseGiftOpenScaleV138 3.15s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
  will-change: scale !important;
}
@keyframes firstPurchaseGiftOpenScaleV138 {
  0%, 100% { scale: .955; }
  50% { scale: 1.075; }
}

html body .modal-backdrop,
html body .purchase-overlay,
html body .first-purchase-gift-overlay,
html body .gift-compose-overlay,
html body .gift-detail-overlay,
html body .achievements-overlay,
html body .collection-detail-overlay,
html body .user-area-overlay,
html body .duplicate-reward-popup-overlay,
html body .duplicate-exit-confirm-overlay,
html body .custom-coffer-opening .custom-coffer-win-popup-backdrop,
html body .card-inspector-backdrop,
html body .card-catalog-backdrop,
html body .card-album-modal-backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(2, 7, 5, .78) !important;
  background-image: none !important;
}

html body .reel-overlay,
html body .reel-overlay.is-revealed,
html body .reel-overlay.limited-time-reel.is-revealed,
html body .custom-coffer-opening.reel-overlay,
html body .gift-opening-overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(2, 7, 5, .78) !important;
  background-image: none !important;
}

html body .view-vault .vault-selection > .inventory-purchase-slot-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .view-vault .vault-selection > .inventory-purchase-slot-placeholder * {
  pointer-events: none !important;
}

.purchase-popup-quantity {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(230px, 100%);
  margin: 2px auto 15px;
}
.purchase-popup-quantity > span {
  color: rgba(241,221,157,.88);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.purchase-popup-quantity-control {
  display: grid;
  grid-template-columns: 38px 72px 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(214,180,95,.30);
  border-radius: 10px;
  background: rgb(11,20,14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18);
}
.purchase-popup-quantity-control button,
.purchase-popup-quantity-control input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  margin: 0;
  border: 0;
  color: #f6edcf;
  background: rgb(11,20,14);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}
.purchase-popup-quantity-control button {
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.purchase-popup-quantity-control button:hover:not(:disabled) {
  color: #172018;
  background: #efd783;
}
.purchase-popup-quantity-control button:disabled {
  opacity: .3;
  cursor: default;
}
.purchase-popup-quantity-control input {
  min-width: 0;
  padding: 0 4px;
  border-inline: 1px solid rgba(214,180,95,.18);
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.purchase-popup-quantity-control input::-webkit-inner-spin-button,
.purchase-popup-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.purchase-popup-quantity > small {
  color: #f0d990;
  font-size: 12px;
  font-weight: 900;
}
.purchase-popup-quantity-warning {
  width: min(330px, 100%);
  margin: -5px auto 12px;
  color: #ffb0a8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.first-purchase-gift-actions button.first-purchase-gift-open-button {
  scale: 1;
  transform-origin: 50% 50% !important;
  will-change: scale !important;
  animation: firstPurchaseGiftActualButtonPulseV139 3.25s ease-in-out infinite !important;
}
.first-purchase-gift-actions button.first-purchase-gift-open-button > .first-purchase-gift-open-face {
  scale: 1 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}
@keyframes firstPurchaseGiftActualButtonPulseV139 {
  0%, 100% { scale: 1; }
  50% { scale: 1.055; }
}

@media (prefers-reduced-motion: reduce) {
  .first-purchase-gift-actions button.first-purchase-gift-open-button {
    animation: firstPurchaseGiftActualButtonPulseV139 3.25s ease-in-out infinite !important;
  }
  .first-purchase-gift-actions button.first-purchase-gift-open-button > .first-purchase-gift-open-face {
    animation: none !important;
  }
}

html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection > .mythic-panel-frame-overlay {
  background: var(--bryer-css-v60-mythicpanel2, url('/images/mythicpanel2.png')) center / 100% 100% no-repeat !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-unowned-selection .vault-action-group > .inventory-open-button-shell {
  position: relative !important;
  top: 3px !important;
}

html body .view-vault .vault-selection:not(.is-card-pack-selection) > .inventory-purchase-slot-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .user-area-action.user-area-logout,
html body .user-area-shell.is-vip .user-area-action.user-area-logout {
  border-color: rgba(224, 77, 77, .72) !important;
}
html body .user-area-action.user-area-logout > span,
html body .user-area-shell.is-vip .user-area-action.user-area-logout > span {
  color: #ef6666 !important;
}
html body .user-area-action.user-area-logout:hover,
html body .user-area-shell.is-vip .user-area-action.user-area-logout:hover {
  border-color: rgba(255, 105, 105, .92) !important;
}

html body .box-card:has(> .card-pack-support-symbol:hover),
html body .box-card:has(> .card-pack-support-symbol:focus-visible),
html body .box-card:has(> .card-pack-support-symbol:focus-within) {
  overflow: visible !important;
  z-index: 2147481000 !important;
}
html body .box-card > .card-pack-support-symbol {
  z-index: 2147482000 !important;
}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip {
  z-index: 2147483000 !important;
}

html body .view-shop .coffer-section-block:has(.card-pack-support-symbol:hover),
html body .view-shop .coffer-section-block:has(.card-pack-support-symbol:focus-visible),
html body .view-shop .coffer-section-block:has(.card-pack-support-symbol:focus-within) {
  z-index: 2147480000 !important;
  overflow: visible !important;
}
html body .view-shop .coffer-section-block .grid:has(.card-pack-support-symbol:hover),
html body .view-shop .coffer-section-block .grid:has(.card-pack-support-symbol:focus-visible),
html body .view-shop .coffer-section-block .grid:has(.card-pack-support-symbol:focus-within) {
  z-index: 2147480500 !important;
  overflow: visible !important;
}
html body .view-shop .coffer-sections:has(.card-pack-support-symbol:hover),
html body .view-shop .coffer-sections:has(.card-pack-support-symbol:focus-visible),
html body .view-shop .coffer-sections:has(.card-pack-support-symbol:focus-within) {
  z-index: 2147479000 !important;
  overflow: visible !important;
}

.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards:disabled,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #2d2345 !important;
  border-color: rgba(251, 231, 255, .92) !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.36) 0 9%, rgba(255,255,255,0) 9% 20%, rgba(255,255,255,.22) 20% 24%, rgba(255,255,255,0) 24% 100%),
    linear-gradient(145deg, rgba(255,255,255,.20) 0 14%, rgba(255,255,255,0) 14% 100%),
    linear-gradient(90deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,.18) 34%, rgba(255,255,255,0) 49%, rgba(255,255,255,.18) 63%, rgba(255,255,255,0) 82%, rgba(255,255,255,.22) 100%),
    linear-gradient(118deg, #fff3d9 0%, #ffb0eb 14%, #8de6ff 31%, #a2ffc7 48%, #d8a1ff 66%, #ff95d4 82%, #fff0a2 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -2px 0 rgba(255,255,255,.35),
    inset 0 -8px 0 rgba(74, 34, 98, .24),
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 7px 0 rgba(73, 34, 93, .44),
    0 14px 28px rgba(184, 102, 255, .27),
    0 0 18px rgba(133, 244, 255, .16) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.84),
    0 0 10px rgba(255,255,255,.44),
    0 0 12px rgba(111, 68, 171, .12) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards:hover:not(:disabled),
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards:hover:not(:disabled) {
  color: #251a3f !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.44) 0 10%, rgba(255,255,255,0) 10% 21%, rgba(255,255,255,.24) 21% 25%, rgba(255,255,255,0) 25% 100%),
    linear-gradient(145deg, rgba(255,255,255,.26) 0 14%, rgba(255,255,255,0) 14% 100%),
    linear-gradient(90deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,.22) 34%, rgba(255,255,255,0) 49%, rgba(255,255,255,.22) 63%, rgba(255,255,255,0) 82%, rgba(255,255,255,.25) 100%),
    linear-gradient(118deg, #fff7e8 0%, #ffbbea 15%, #9bf0ff 31%, #b6ffd1 47%, #e0b2ff 65%, #ff9fdb 83%, #fff7b7 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(255,255,255,.38),
    inset 0 -8px 0 rgba(74, 34, 98, .24),
    inset 0 0 0 1px rgba(255,255,255,.40),
    0 7px 0 rgba(73, 34, 93, .44),
    0 16px 30px rgba(196, 110, 255, .30),
    0 0 24px rgba(133, 244, 255, .20) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards::before,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  background:
    radial-gradient(circle at 14% 26%, rgba(255,255,255,.45) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 58%, rgba(255,255,255,.34) 0 1px, transparent 1.8px),
    linear-gradient(180deg, rgba(255,255,255,.33), rgba(255,255,255,0) 42%, rgba(255,255,255,.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 -1px 0 rgba(90, 54, 136, .18) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards::after,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 9px !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0 1px, rgba(90, 45, 123, .88) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(42, 19, 60, .84) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-cards .box-buy-button-label,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards .inventory-open-button-label {
  position: relative !important;
  z-index: 5 !important;
  color: #2d2345 !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}
.cards-buy-ornament {
  position: absolute;
  inset: -1px 0 8px 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.20)) drop-shadow(0 0 12px rgba(155, 245, 255, .12));
}
.cards-buy-ornament * { vector-effect: non-scaling-stroke; }
.cards-buy-shell {
  fill: rgba(255,255,255,.11);
  stroke: rgba(255,255,255,.78);
  stroke-width: 1.25;
}
.cards-buy-core {
  fill: none;
  stroke: rgba(255,255,255,.48);
  stroke-width: .9;
}
.cards-buy-inner-glass {
  fill: rgba(255,255,255,.08);
  stroke: rgba(126, 255, 243, .34);
  stroke-width: .8;
}
.cards-buy-ribbon {
  fill: none;
  stroke: rgba(99, 45, 123, .16);
  stroke-width: 1.15;
  stroke-linecap: round;
}
.cards-buy-ribbon.is-secondary {
  stroke: rgba(57, 112, 145, .14);
  stroke-width: .95;
}
.cards-buy-wing {
  fill: none;
  stroke: rgba(255,255,255,.82);
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.cards-buy-center-spade path:first-child,
.cards-buy-crown path:first-child,
.cards-buy-side-gem path:first-child,
.cards-buy-corner-jewels path {
  fill: rgba(255,255,255,.20);
  stroke: rgba(255,255,255,.84);
  stroke-width: 1.05;
}
.cards-buy-center-spade path:nth-child(2) {
  fill: rgba(155, 245, 255, .22);
  stroke: rgba(255,255,255,.80);
  stroke-width: .95;
}
.cards-buy-center-spade path:nth-child(3),
.cards-buy-center-spade path:nth-child(4),
.cards-buy-crown path:nth-child(2),
.cards-buy-side-gem path:nth-child(2) {
  fill: rgba(255, 153, 225, .74);
  stroke: rgba(255,255,255,.84);
  stroke-width: .88;
}
.custom-buy-fx.custom-buy-fx-cards {
  inset: -13px -17px -11px;
  opacity: .98;
  filter: saturate(1.08);
}
.custom-buy-fx.custom-buy-fx-cards::before {
  content: "";
  position: absolute;
  inset: 8px 12px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(167, 244, 255, .28), rgba(255,255,255,0) 68%);
  filter: blur(10px);
  animation: buyAuroraPulse 4.3s ease-in-out infinite;
}
.custom-buy-fx.custom-buy-fx-cards::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 14% 64%, rgba(255, 163, 230, .28), transparent 20%),
    radial-gradient(circle at 34% 10%, rgba(151, 246, 255, .24), transparent 18%),
    radial-gradient(circle at 66% -2%, rgba(255, 225, 145, .22), transparent 17%),
    radial-gradient(circle at 88% 50%, rgba(155, 255, 196, .20), transparent 16%),
    radial-gradient(circle at 48% 100%, rgba(221, 171, 255, .22), transparent 18%);
  filter: blur(8px);
  animation: buyAuroraDrift 6.4s linear infinite;
}
.custom-buy-fx.custom-buy-fx-cards i {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255, 155, 231, .88) 34%, rgba(140, 244, 255, .90) 66%, rgba(255,255,255,.98));
  box-shadow: 0 0 12px rgba(145, 241, 255, .46), 0 0 8px rgba(255, 143, 220, .38);
  animation: cardsGemDrift 3.7s ease-in-out infinite;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(1) {
  left: 4%;
  top: 46%;
  width: 13px;
  height: 13px;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(2) {
  left: 13%;
  top: 7%;
  width: 10px;
  height: 10px;
  animation-delay: -.4s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(3) {
  left: 29%;
  top: -2%;
  width: 12px;
  height: 12px;
  animation-delay: -.86s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(4) {
  left: 49%;
  top: -6%;
  width: 14px;
  height: 14px;
  animation-delay: -1.1s;
  transform: translateX(-50%) rotate(45deg);
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(5) {
  right: 29%;
  top: -2%;
  width: 12px;
  height: 12px;
  animation-delay: -1.46s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(6) {
  right: 13%;
  top: 7%;
  width: 10px;
  height: 10px;
  animation-delay: -1.92s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(7) {
  right: 4%;
  top: 46%;
  width: 13px;
  height: 13px;
  animation-delay: -2.24s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(8) {
  left: 27%;
  bottom: -5%;
  width: 11px;
  height: 11px;
  animation-delay: -2.66s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(9) {
  right: 27%;
  bottom: -5%;
  width: 11px;
  height: 11px;
  animation-delay: -2.98s;
}
.custom-buy-fx.custom-buy-fx-cards i:nth-child(10) {
  left: 50%;
  bottom: -8%;
  width: 13px;
  height: 13px;
  animation-delay: -3.28s;
  transform: translateX(-50%) rotate(45deg);
}
.cards-buy-stage {
  position: absolute;
  inset: -18px -22px -15px;
  width: calc(100% + 44px);
  height: calc(100% + 36px);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 12px rgba(255, 160, 226, .20)) drop-shadow(0 0 14px rgba(133, 242, 255, .14));
}
.cards-buy-stage .cards-stage-outer {
  fill: rgba(255, 255, 255, .15);
  stroke: rgba(255, 255, 255, .90);
  stroke-width: 2.2;
}
.cards-buy-stage .cards-stage-inner {
  fill: rgba(255, 255, 255, .10);
  stroke: rgba(145, 244, 255, .74);
  stroke-width: 1.25;
}
.cards-buy-stage .cards-stage-arch,
.cards-buy-stage .cards-stage-tail,
.cards-buy-stage .cards-stage-thread {
  fill: rgba(255,255,255,.14);
  stroke: rgba(255,255,255,.88);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cards-buy-stage .cards-stage-gem path:first-child,
.cards-buy-stage .cards-stage-side-jewel path:first-child,
.cards-buy-stage .cards-stage-star {
  fill: rgba(255,255,255,.20);
  stroke: rgba(255,255,255,.88);
  stroke-width: 1.1;
}
.cards-buy-stage .cards-stage-gem path:nth-child(2),
.cards-buy-stage .cards-stage-side-jewel path:nth-child(2) {
  fill: rgba(255, 154, 228, .76);
  stroke: rgba(255,255,255,.88);
  stroke-width: .9;
}
.purchase-style-cards .cards-buy-ornament,
.purchase-style-cards .cards-buy-stage,
.inventory-open-button-shell .cards-buy-ornament,
.inventory-open-button-shell .cards-buy-stage {
  display: block !important;
}
.purchase-style-cards .custom-buy-fx.custom-buy-fx-cards,
.inventory-open-button-shell > .custom-buy-fx.custom-buy-fx-cards {
  display: block !important;
}
.box-card.is-sold-out .purchase-style-cards .cards-buy-ornament,
.box-card.is-sold-out .purchase-style-cards .cards-buy-stage,
.box-card.is-sold-out .purchase-style-cards .custom-buy-fx.custom-buy-fx-cards {
  opacity: .32 !important;
  filter: grayscale(.18) saturate(.75) !important;
}
@keyframes cardsGemDrift {
  0%, 100% {
    transform: translateY(0) rotate(45deg) scale(.88);
    opacity: .58;
  }
  50% {
    transform: translateY(-4px) rotate(45deg) scale(1);
    opacity: 1;
  }
}
@keyframes buyAuroraPulse {
  0%, 100% {
    opacity: .42;
    transform: scale(.94);
  }
  50% {
    opacity: .8;
    transform: scale(1.04);
  }
}
@keyframes buyAuroraDrift {
  0% {
    transform: translateX(-1.5%) translateY(0);
    opacity: .6;
  }
  50% {
    transform: translateX(1.5%) translateY(-2%);
    opacity: 1;
  }
  100% {
    transform: translateX(-1.5%) translateY(0);
    opacity: .6;
  }
}
@media (max-width: 700px) {
  .custom-buy-fx.custom-buy-fx-cards { inset: -11px -12px -10px !important; }
  .custom-buy-fx.custom-buy-fx-cards i {
    width: 10px !important;
    height: 10px !important;
  }
  .cards-buy-stage {
    inset: -14px -18px -13px !important;
    width: calc(100% + 36px) !important;
  }
}

@font-face {
  font-family: "HoloJacketBold";
  src: url("/fonts/holojacketbold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: "BuyMore";
  src: url("/fonts/Buy%20More.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

.box-card .card-actions .purchase-action-pair.purchase-style-cards {
  min-height: 0 !important;
  margin-top: 17px !important;
  margin-bottom: 15px !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-cards > .box-buy-button {
  position: relative !important;
  z-index: 3 !important;
}

.box-card .card-actions .purchase-action-pair.purchase-style-cards > .box-buy-button.buy-style-cards .box-buy-button-label,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards .inventory-open-button-label {
  font-family: "HoloJacketBold", Georgia, serif !important;
  font-weight: 900 !important;
}

@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-cards {
    margin-top: 15px !important;
    margin-bottom: 13px !important;
  }
}

.login-card .login-title-gold {
  display: inline-block;
  color: #f3d58b;
  background-image:
    linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%);
  background-size: 100% 100%, 220% 100%;
  background-position: center center, 18% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,248,214,.18), 0 2px 12px rgba(95,64,9,.35), 0 0 1px rgba(255,232,154,.22);
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35));
}

.box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards .box-buy-button-label {
  position: relative !important;
  top: -2px !important;
  font-family: "HoloJacketBold", Georgia, serif !important;
  font-size: 32px !important;
  line-height: .92 !important;
  letter-spacing: .045em !important;
  transform: scale(1.10) !important;
  transform-origin: center !important;
}
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards .inventory-open-button-label {
  font-family: "HoloJacketBold", Georgia, serif !important;
  font-size: 22px !important;
  line-height: .94 !important;
  letter-spacing: .04em !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards.has-long-label .box-buy-button-label {
  font-size: 18px !important;
  transform: translateY(1px) scale(1.02) !important;
  letter-spacing: .02em !important;
}
@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards .box-buy-button-label {
    top: -2px !important;
    font-size: 24px !important;
    transform: scale(1.06) !important;
  }
  .inventory-open-button-shell > .inventory-open-custom-button.buy-style-cards .inventory-open-button-label {
    font-size: 19px !important;
  }
  .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards.has-long-label .box-buy-button-label {
    font-size: 16px !important;
    transform: translateY(1px) !important;
  }
}

.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx.is-legendary-back i img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx.is-legendary-back i:nth-child(2) img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx.is-legendary-back i:nth-child(4) img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx.is-legendary-back i:nth-child(6) img,
.box-card .purchase-action-pair.is-card-pack-buy > .card-pack-open-fx.is-legendary-back i:nth-child(7) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx.is-legendary-back i img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx.is-legendary-back i:nth-child(2) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx.is-legendary-back i:nth-child(4) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx.is-legendary-back i:nth-child(6) img,
.inventory-open-button-shell.is-card-pack-open > .card-pack-open-fx.is-legendary-back i:nth-child(7) img {
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  background: transparent !important;
  filter: none !important;
}

.box-card .card-actions .purchase-action-pair.purchase-style-blackjack {
  min-height: 0 !important;
  margin-top: 17px !important;
  margin-bottom: 15px !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.box-card .card-actions .purchase-action-pair.purchase-style-blackjack > .box-buy-button {
  position: relative !important;
  z-index: 3 !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack:focus-visible,
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack:disabled,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-blackjack {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #ffd34e !important;
  border-color: rgba(255, 218, 106, 1) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,.10) 32%, rgba(255,255,255,0) 48%, rgba(255,255,255,.12) 64%, rgba(255,255,255,0) 82%, rgba(255,255,255,.22) 100%),
    linear-gradient(180deg, rgba(255,235,166,.52) 0 18%, rgba(255,255,255,0) 18% 100%),
    linear-gradient(180deg, #ffe78f 0%, #ffcf45 11%, #7f0b10 12%, #a80f15 50%, #67060a 80%, #330205 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.98),
    inset 0 -2px 0 rgba(255, 212, 86, .72),
    inset 0 -10px 0 rgba(44, 2, 5, .40),
    inset 0 0 0 1px rgba(255,226,133,.30),
    0 7px 0 rgba(48, 3, 5, .72),
    0 15px 30px rgba(70, 4, 8, .44),
    0 0 24px rgba(255, 197, 70, .30) !important;
  text-shadow:
    0 1px 0 rgba(98, 39, 0, .92),
    0 0 16px rgba(255, 210, 90, .42) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack:hover:not(:disabled),
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-blackjack:hover:not(:disabled) {
  background:
    linear-gradient(90deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,.18) 32%, rgba(255,255,255,0) 48%, rgba(255,255,255,.16) 64%, rgba(255,255,255,0) 82%, rgba(255,255,255,.28) 100%),
    linear-gradient(180deg, rgba(255,241,191,.56) 0 18%, rgba(255,255,255,0) 18% 100%),
    linear-gradient(180deg, #ffefaa 0%, #ffd755 11%, #901017 12%, #bb171d 50%, #73070c 80%, #3b0206 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(255, 220, 96, .78),
    inset 0 -10px 0 rgba(56, 2, 6, .38),
    inset 0 0 0 1px rgba(255,238,177,.34),
    0 7px 0 rgba(58, 4, 6, .74),
    0 18px 32px rgba(88, 6, 10, .48),
    0 0 26px rgba(255, 200, 75, .34) !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack::before,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-blackjack::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 218, 106, .96) !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,.24) 0 1px, transparent 1.8px),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%, rgba(255,255,255,.09) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,245,218,.22), inset 0 -1px 0 rgba(95, 17, 20, .22) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack::after,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-blackjack::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 9px !important;
  border-radius: 0 0 8px 8px !important;
  background: linear-gradient(180deg, rgba(255, 218, 106, .52) 0 1px, rgba(66, 4, 9, .94) 1px 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 238, 204, .32), inset 0 -1px 0 rgba(42, 5, 7, .84) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.box-card .card-actions .purchase-action-pair > button.btn.primary.box-buy-button.buy-style-blackjack .box-buy-button-label,
.inventory-open-button-shell > .inventory-open-custom-button.buy-style-blackjack .inventory-open-button-label {
  position: relative !important;
  z-index: 5 !important;
  color: #efc66d !important;
  -webkit-text-fill-color: #efc66d !important;
  font-weight: 900 !important;
  font-family: "BuyMore", Georgia, serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(96, 38, 0, .88), 0 0 10px rgba(255, 205, 102, .22) !important;
}

.blackjack-buy-ornament {
  position: absolute;
  inset: -1px 0 8px 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(255, 228, 186, .18)) drop-shadow(0 0 12px rgba(192, 18, 28, .16));
}
.blackjack-buy-ornament * { vector-effect: non-scaling-stroke; }
.blackjack-buy-shell {
  fill: rgba(94, 9, 14, .22);
  stroke: rgba(255, 240, 214, .84);
  stroke-width: 1.2;
}
.blackjack-buy-gold-frame {
  fill: none;
  stroke: rgba(245, 196, 100, .92);
  stroke-width: 1.3;
}
.blackjack-buy-inner-ivory {
  fill: rgba(255, 248, 232, .08);
  stroke: rgba(255, 239, 211, .44);
  stroke-width: .9;
}
.blackjack-buy-bottom-lip {
  fill: rgba(83, 7, 10, .40);
  stroke: rgba(247, 200, 111, .60);
  stroke-width: .7;
}
.blackjack-buy-table-stripe {
  fill: none;
  stroke: rgba(255, 230, 184, .16);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.blackjack-buy-table-stripe.is-two {
  stroke: rgba(255,255,255,.14);
  stroke-width: .9;
}
.blackjack-buy-filigree {
  fill: none;
  stroke: rgba(255, 236, 205, .84);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blackjack-buy-top-chip circle:first-child,
.blackjack-buy-bottom-chip circle:first-child,
.blackjack-buy-side-chip circle:first-child {
  fill: rgba(171, 20, 25, .98);
  stroke: rgba(255, 243, 218, .90);
  stroke-width: 1.05;
}
.blackjack-buy-top-chip .inner,
.blackjack-buy-bottom-chip .inner,
.blackjack-buy-side-chip .inner {
  fill: rgba(122, 8, 13, .95);
  stroke: rgba(247, 203, 110, .95);
  stroke-width: 1.05;
}
.blackjack-buy-top-chip path,
.blackjack-buy-bottom-chip path {
  fill: none;
  stroke: rgba(255, 243, 216, .92);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.blackjack-buy-side-chip text {
  fill: rgba(255, 247, 235, .96);
  font-size: 23px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
}
.blackjack-buy-dice-hand rect {
  fill: rgba(255,255,255,.985);
  stroke: rgba(165, 16, 22, .92);
  stroke-width: 1.15;
}
.blackjack-buy-dice-hand .blackjack-die circle {
  fill: rgba(14, 8, 9, 1);
  filter: drop-shadow(0 0 .35px rgba(0,0,0,.26));
}
.blackjack-buy-dice-hand .blackjack-die-front circle {
  fill: rgba(18, 9, 10, 1);
}
.blackjack-buy-diamond-crest path:first-child,
.blackjack-buy-stars path {
  fill: rgba(255, 248, 233, .18);
  stroke: rgba(255, 241, 214, .86);
  stroke-width: 1.05;
}
.blackjack-buy-diamond-crest path:nth-child(2) {
  fill: rgba(202, 20, 29, .80);
  stroke: rgba(255, 244, 220, .90);
  stroke-width: .85;
}
.blackjack-buy-diamond-crest path:nth-child(3) {
  fill: none;
  stroke: rgba(247, 200, 109, .82);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.blackjack-buy-stage {
  position: absolute;
  inset: -18px -24px -15px;
  width: calc(100% + 48px);
  height: calc(100% + 36px);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 12px rgba(194, 18, 24, .18)) drop-shadow(0 0 14px rgba(255, 194, 92, .14));
}
.blackjack-buy-stage .blackjack-stage-side {
  fill: rgba(123, 10, 15, .20);
  stroke: rgba(255, 243, 213, .88);
  stroke-width: 2.1;
}
.blackjack-buy-stage .blackjack-stage-side-inner {
  fill: rgba(255, 251, 240, .10);
  stroke: rgba(245, 197, 102, .76);
  stroke-width: 1.25;
}
.blackjack-buy-stage .blackjack-stage-band,
.blackjack-buy-stage .blackjack-stage-thread {
  fill: rgba(255,255,255,.12);
  stroke: rgba(255, 241, 212, .86);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.blackjack-buy-stage .blackjack-stage-top-chip circle:first-child,
.blackjack-buy-stage .blackjack-stage-left-chip circle:first-child,
.blackjack-buy-stage .blackjack-stage-right-chip circle:first-child {
  fill: rgba(183, 21, 26, .96);
  stroke: rgba(255, 244, 217, .92);
  stroke-width: 1.15;
}
.blackjack-buy-stage .blackjack-stage-top-chip .inner,
.blackjack-buy-stage .blackjack-stage-left-chip .inner,
.blackjack-buy-stage .blackjack-stage-right-chip .inner {
  fill: rgba(119, 8, 12, .94);
  stroke: rgba(247, 203, 112, .95);
  stroke-width: 1.1;
}
.blackjack-buy-stage .blackjack-stage-top-chip path {
  fill: none;
  stroke: rgba(255, 244, 219, .95);
  stroke-width: 1.45;
  stroke-linecap: round;
}
.blackjack-buy-stage .blackjack-stage-left-chip text,
.blackjack-buy-stage .blackjack-stage-right-chip text,
.blackjack-buy-stage .blackjack-stage-cards text {
  fill: rgba(255, 250, 241, .96);
  font-size: 24px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
}
.blackjack-buy-stage .blackjack-stage-cards rect {
  fill: rgba(255,255,255,.97);
  stroke: rgba(197, 22, 28, .90);
  stroke-width: 1.05;
}
.blackjack-buy-stage .blackjack-stage-cards text {
  fill: rgba(122, 10, 15, .92);
  font-size: 15px;
}
.blackjack-buy-stage .blackjack-stage-stars path {
  fill: rgba(255, 249, 235, .18);
  stroke: rgba(255, 240, 212, .86);
  stroke-width: 1.05;
}

.custom-buy-fx.custom-buy-fx-blackjack {
  inset: -13px -17px -11px;
  opacity: .98;
}
.custom-buy-fx.custom-buy-fx-blackjack::before {
  content: "";
  position: absolute;
  inset: 8px 12px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255, 193, 76, .26), rgba(255,255,255,0) 66%);
  filter: blur(10px);
  animation: blackjackHaloPulse 4.2s ease-in-out infinite;
}
.custom-buy-fx.custom-buy-fx-blackjack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 62%, rgba(255, 81, 86, .30), transparent 18%),
    radial-gradient(circle at 34% 10%, rgba(255, 232, 176, .22), transparent 16%),
    radial-gradient(circle at 70% -2%, rgba(255,255,255,.16), transparent 14%),
    radial-gradient(circle at 88% 48%, rgba(255, 204, 120, .20), transparent 16%),
    radial-gradient(circle at 48% 100%, rgba(183, 20, 27, .22), transparent 16%);
  filter: blur(8px);
  animation: blackjackAuraDrift 6s linear infinite;
}
.custom-buy-fx.custom-buy-fx-blackjack i {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at center, rgba(255, 247, 222, .98) 0 12%, rgba(255, 247, 222, 0) 13%),
    radial-gradient(circle at center, rgba(94, 7, 10, .98) 0 28%, rgba(94, 7, 10, 0) 29%),
    radial-gradient(circle at center, rgba(255, 246, 216, .98) 0 58%, rgba(255, 246, 216, 0) 59%),
    repeating-conic-gradient(from 0deg, #ffe7a0 0 10deg, #bb1619 10deg 20deg, #ffe7a0 20deg 30deg, #bb1619 30deg 40deg, #ffe7a0 40deg 50deg, #bb1619 50deg 60deg, #ffe7a0 60deg 70deg, #bb1619 70deg 80deg, #ffe7a0 80deg 90deg, #bb1619 90deg 100deg, #ffe7a0 100deg 110deg, #bb1619 110deg 120deg, #ffe7a0 120deg 130deg, #bb1619 130deg 140deg, #ffe7a0 140deg 150deg, #bb1619 150deg 160deg, #ffe7a0 160deg 170deg, #bb1619 170deg 180deg, #ffe7a0 180deg 190deg, #bb1619 190deg 200deg, #ffe7a0 200deg 210deg, #bb1619 210deg 220deg, #ffe7a0 220deg 230deg, #bb1619 230deg 240deg, #ffe7a0 240deg 250deg, #bb1619 250deg 260deg, #ffe7a0 260deg 270deg, #bb1619 270deg 280deg, #ffe7a0 280deg 290deg, #bb1619 290deg 300deg, #ffe7a0 300deg 310deg, #bb1619 310deg 320deg, #ffe7a0 320deg 330deg, #bb1619 330deg 340deg, #ffe7a0 340deg 350deg, #bb1619 350deg 360deg);
  border: 1.2px solid rgba(255, 223, 120, .98);
  box-shadow: 0 0 12px rgba(255, 183, 66, .36), 0 0 8px rgba(185, 20, 25, .30);
  animation: blackjackChipBob 3.4s ease-in-out infinite;
}
.custom-buy-fx.custom-buy-fx-blackjack i::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50% !important;
  border: 1.1px solid rgba(255, 244, 216, .70);
  box-shadow: inset 0 0 0 1px rgba(171, 21, 25, .28);
}
.custom-buy-fx.custom-buy-fx-blackjack i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(255, 246, 228, .94);
  box-shadow: 0 0 0 1px rgba(124, 8, 12, .52);
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(1) {
  left: 4%;
  top: 48%;
  width: 16px;
  height: 16px;
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(2) {
  left: 12%;
  top: 8%;
  width: 13px;
  height: 13px;
  animation-delay: -.4s;
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(3) {
  left: 31%;
  top: -2%;
  width: 14px;
  height: 14px;
  animation-delay: -.8s;
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(4) {
  left: 50%;
  top: -6%;
  width: 15px;
  height: 15px;
  animation-delay: -1.2s;
  transform: translateX(-50%);
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(5) {
  right: 31%;
  top: -2%;
  width: 14px;
  height: 14px;
  animation-delay: -1.6s;
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(6) {
  right: 12%;
  top: 8%;
  width: 13px;
  height: 13px;
  animation-delay: -2s;
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(7) {
  right: 4%;
  top: 48%;
  width: 16px;
  height: 16px;
  animation-delay: -2.4s;
}
.custom-buy-fx.custom-buy-fx-blackjack i:nth-child(8) {
  left: 50%;
  bottom: -7%;
  width: 15px;
  height: 15px;
  animation-delay: -2.8s;
  transform: translateX(-50%);
}

.purchase-style-blackjack .blackjack-buy-ornament,
.purchase-style-blackjack .blackjack-buy-stage,
.inventory-open-button-shell .blackjack-buy-ornament,
.inventory-open-button-shell .blackjack-buy-stage {
  display: block !important;
}
.purchase-style-blackjack .custom-buy-fx.custom-buy-fx-blackjack,
.inventory-open-button-shell > .custom-buy-fx.custom-buy-fx-blackjack {
  display: block !important;
}
.box-card.is-sold-out .purchase-style-blackjack .blackjack-buy-ornament,
.box-card.is-sold-out .purchase-style-blackjack .blackjack-buy-stage,
.box-card.is-sold-out .purchase-style-blackjack .custom-buy-fx.custom-buy-fx-blackjack {
  opacity: .32 !important;
  filter: grayscale(.16) saturate(.76) !important;
}
@keyframes blackjackChipBob {
  0%, 100% {
    transform: translateY(0) scale(.9);
    opacity: .6;
  }
  50% {
    transform: translateY(-4px) scale(1);
    opacity: 1;
  }
}
@keyframes blackjackHaloPulse {
  0%, 100% {
    opacity: .44;
    transform: scale(.95);
  }
  50% {
    opacity: .84;
    transform: scale(1.04);
  }
}
@keyframes blackjackAuraDrift {
  0% {
    transform: translateX(-1.5%) translateY(0);
    opacity: .6;
  }
  50% {
    transform: translateX(1.5%) translateY(-2%);
    opacity: 1;
  }
  100% {
    transform: translateX(-1.5%) translateY(0);
    opacity: .6;
  }
}
@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-blackjack {
    margin-top: 15px !important;
    margin-bottom: 13px !important;
  }
  .custom-buy-fx.custom-buy-fx-blackjack { inset: -11px -12px -10px !important; }
  .custom-buy-fx.custom-buy-fx-blackjack i {
    width: 11px !important;
    height: 11px !important;
  }
  .blackjack-buy-stage {
    inset: -14px -18px -13px !important;
    width: calc(100% + 36px) !important;
  }
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-mythic-coffer::before {
  background: var(--bryer-css-v60-cardslegendary2, url('/images/cardslegendary2.png')) center / 100% 100% no-repeat !important;
}
html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-mythic-coffer > .mythic-panel-frame-overlay {
  background: var(--bryer-css-v60-cardslegendary, url('/images/cardslegendary.png')) center / 100% 100% no-repeat !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-unowned-selection.is-mythic-coffer > .mythic-panel-frame-overlay {
  background: var(--bryer-css-v60-cardslegendary3, url('/images/cardslegendary3.png')) center / 100% 100% no-repeat !important;
}

html body .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
@media (max-width: 700px) {
  html body .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

html body .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
@media (max-width: 700px) {
  html body .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack {
  width: 206px !important;
  min-width: 206px !important;
  max-width: 206px !important;
  margin: 2px auto 8px !important;
}
.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack .purchase-action-pair.purchase-style-blackjack {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack .peek-close-button.buy-style-blackjack {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  padding: 7px 15px !important;
}
.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack .blackjack-buy-stage,
.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack .custom-buy-fx-blackjack {
  display: none !important;
}
.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack .blackjack-buy-ornament {
  inset: 0 3px 5px 3px !important;
  width: calc(100% - 6px) !important;
  height: calc(100% - 5px) !important;
  filter: drop-shadow(0 0 5px rgba(255, 218, 125, .16)) !important;
}
.rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack .peek-close-button .box-buy-button-label {
  font-size: 16px !important;
  letter-spacing: .055em !important;
}
@media (max-width: 640px) {
  .rewards-modal-footer .peek-close-button-shell.peek-close-style-blackjack {
    width: min(194px, calc(100vw - 76px)) !important;
    min-width: 0 !important;
  }
}

.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact,
.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half,
.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half {
  -webkit-mask-image: var(--bryer-css-v60-fullpackagelegendary, url('/images/fullpackagelegendary.png')), url('/images/packagetoplegendary.png') !important;
  mask-image: var(--bryer-css-v60-fullpackagelegendary, url('/images/fullpackagelegendary.png')), url('/images/packagetoplegendary.png') !important;
}

html body .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
@media (max-width: 700px) {
  html body .box-card .card-actions .purchase-action-pair.purchase-style-cards > button.btn.primary.box-buy-button.buy-style-cards {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

.card-pack-opening.is-legendary-pool .card-pack-top-peel::before {
  background-image: url('/images/packagetoplegendary.png') !important;
}
.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-intact,
.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-stage:not(.is-plastic-finishing) .card-pack-plastic-half,
.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-finishing .card-pack-plastic-half,
.card-pack-opening.is-legendary-pool .card-pack-image-wrapper.is-plastic-stage .card-pack-plastic-creases {
  -webkit-mask-image: var(--bryer-css-v60-fullpackagelegendary, url('/images/fullpackagelegendary.png')), url('/images/packagetoplegendary.png') !important;
  mask-image: var(--bryer-css-v60-fullpackagelegendary, url('/images/fullpackagelegendary.png')), url('/images/packagetoplegendary.png') !important;
  -webkit-mask-size: 100% 100%, 100% 6.236% !important;
  mask-size: 100% 100%, 100% 6.236% !important;
  -webkit-mask-position: center center, center top !important;
  mask-position: center center, center top !important;
  -webkit-mask-repeat: no-repeat, no-repeat !important;
  mask-repeat: no-repeat, no-repeat !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
}

html body .box-card .card-actions .purchase-action-pair.purchase-style-blackjack
> button.btn.primary.box-buy-button.buy-style-blackjack .box-buy-button-label {
  font-size: 14px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .28) !important;
}

@media (max-width: 700px) {
  html body .box-card .card-actions .purchase-action-pair.purchase-style-blackjack
  > button.btn.primary.box-buy-button.buy-style-blackjack .box-buy-button-label {
    font-size: 13px !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .28) !important;
  }
}

.view-shop .coffer-section-card-packs::before {
  background:
    radial-gradient(ellipse 30% 33% at 16% 36%, rgba(255, 130, 218, .065), transparent 73%),
    radial-gradient(ellipse 35% 35% at 52% 64%, rgba(139, 224, 255, .052), transparent 75%),
    radial-gradient(ellipse 29% 31% at 88% 35%, rgba(190, 151, 255, .052), transparent 74%);
  animation-delay: -1.9s;
}
.view-shop .card-packs-heading {
  color: #eadcff;
}
.view-shop .card-packs-heading::after {
  animation-delay: -1.1s;
}
.view-shop .card-packs-heading .coffer-section-icon {
  color: #f4eaff;
  animation-delay: -.8s;
}
.view-shop .coffer-section-card-packs .grid::before,
.view-shop .coffer-section-card-packs .grid::after {
  color: rgba(189, 165, 255, .54);
}

.view-shop .coffer-section-card-packs::before {
  background:
    radial-gradient(ellipse 31% 33% at 16% 36%, rgba(255, 201, 142, .060), transparent 73%),
    radial-gradient(ellipse 35% 35% at 52% 64%, rgba(134, 235, 255, .056), transparent 75%),
    radial-gradient(ellipse 29% 31% at 88% 35%, rgba(255, 170, 225, .052), transparent 74%);
}
.view-shop .card-packs-heading {
  color: #f0e4bf;
}
.view-shop .card-packs-heading::after {
  animation-delay: -1.1s;
  opacity: .74 !important;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon {
  position: relative;
  width: 44px;
  height: 32px;
  flex: 0 0 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff6df;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, rgba(41, 89, 80, .96), rgba(19, 44, 52, .96) 42%, rgba(78, 41, 92, .88) 100%);
  border: 1px solid rgba(240, 216, 161, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255, 188, 130, .10),
    0 6px 16px rgba(0,0,0,.22),
    0 0 16px rgba(255, 214, 143, .12);
  text-shadow: none !important;
  animation: cardPacksIconFloat 3.8s ease-in-out infinite;
  overflow: visible;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 233, 182, .28);
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.28), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 56%);
  pointer-events: none;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  opacity: .16;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  pointer-events: none;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon > i {
  position: relative;
  z-index: 1;
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  color: #ffe4a7;
  text-shadow:
    0 0 8px rgba(255, 230, 169, .42),
    0 0 14px rgba(114, 233, 255, .18);
  animation: cardPacksSparkle 2.6s ease-in-out infinite;
}
.view-shop .coffer-section-card-packs .grid::before,
.view-shop .coffer-section-card-packs .grid::after {
  color: rgba(234, 203, 141, .48);
}

@keyframes cardPacksIconFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-1px) scale(1.04);
    filter: brightness(1.08);
  }
}
@keyframes cardPacksSparkle {
  0%, 100% {
    transform: scale(.96) rotate(0deg);
    opacity: .86;
  }
  50% {
    transform: scale(1.10) rotate(8deg);
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon {
    width: 38px;
    height: 28px;
    flex-basis: 38px;
    border-radius: 7px;
  }
  .view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon::before {
    inset: 3px;
    border-radius: 5px;
  }
  .view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon > i {
    font-size: 11px;
  }
}

.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon {
  width: 31px !important;
  height: 42px !important;
  flex: 0 0 31px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid rgba(240, 216, 161, .82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 14px rgba(0,0,0,.20),
    0 0 12px rgba(255, 214, 143, .10) !important;
  overflow: visible !important;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon::before {
  inset: 4px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 233, 182, .28) !important;
  background: none !important;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon::after {
  left: 50% !important;
  right: auto !important;
  top: 5px !important;
  bottom: 5px !important;
  width: 1px !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  opacity: .08 !important;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) !important;
}
.view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon > i {
  font-size: 12px !important;
}

@media (max-width: 700px) {
  .view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon {
    width: 27px !important;
    height: 36px !important;
    flex-basis: 27px !important;
    border-radius: 7px !important;
  }
  .view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon::before {
    inset: 3px !important;
    border-radius: 4px !important;
  }
  .view-shop .card-packs-heading .coffer-section-icon.card-packs-section-icon > i {
    font-size: 10px !important;
  }
}

.legendary-edition-coffer-seal-wrap {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  z-index: 18 !important;
  display: block !important;
  width: 118px !important;
  height: 30px !important;
  max-width: calc(100% - 20px) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.legendary-edition-coffer-seal,
.legendary-edition-coffer-seal-holo,
.legendary-edition-coffer-seal-glow {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
}
.legendary-edition-coffer-seal-glow {
  inset: -10px -16px -14px -16px !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255,244,193,.95) 0%, rgba(255,226,140,.7) 22%, rgba(255,178,92,.36) 42%, rgba(255,106,188,.26) 60%, rgba(129,208,255,.18) 76%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(168,255,248,.24) 0%, rgba(176,136,255,.18) 48%, rgba(255,255,255,0) 100%) !important;
  filter: blur(8px) saturate(1.12) !important;
  opacity: .92 !important;
  animation: legendary-edition-seal-glow 4.8s ease-in-out infinite !important;
}
.legendary-edition-coffer-seal-holo {
  z-index: 3 !important;
  overflow: hidden !important;
  -webkit-mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat;
  mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat;
}
.legendary-edition-coffer-seal-holo::before,
.legendary-edition-coffer-seal-holo::after {
  content: "";
  position: absolute;
  inset: -26% -12%;
  pointer-events: none;
}
.legendary-edition-coffer-seal-holo::before {
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 24%,
      rgba(255,255,255,.16) 34%,
      rgba(255,245,215,.56) 44%,
      rgba(255,255,255,.18) 54%,
      rgba(255,255,255,0) 64%,
      rgba(255,255,255,0) 100%);
  transform: translateX(-132%) skewX(-18deg);
  animation: legendary-edition-seal-sheen 5.6s ease-in-out infinite !important;
}
.legendary-edition-coffer-seal-holo::after {
  background:
    linear-gradient(120deg,
      rgba(255,162,214,0) 0%,
      rgba(255,162,214,.16) 22%,
      rgba(164,231,255,.34) 42%,
      rgba(255,255,255,.2) 50%,
      rgba(211,170,255,.32) 60%,
      rgba(255,245,190,.14) 76%,
      rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  filter: blur(.35px) saturate(1.14);
  animation: legendary-edition-seal-film 7.4s ease-in-out infinite !important;
}
.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  width: 118px !important;
  height: 30px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.9))
    drop-shadow(0 0 5px rgba(255,231,155,.32))
    drop-shadow(0 3px 6px rgba(0,0,0,.45)) !important;
}
.box-visual.has-legendary-edition-seal .coffer-rarity-seal {
  top: 56px !important;
}
.box-visual.is-sold-out .legendary-edition-coffer-seal-wrap {
  opacity: .28 !important;
}
.box-visual.is-sold-out .legendary-edition-coffer-seal,
.box-visual.is-sold-out .legendary-edition-coffer-seal-holo,
.box-visual.is-sold-out .legendary-edition-coffer-seal-glow {
  filter: grayscale(.72) brightness(.7) !important;
}
@keyframes legendary-edition-seal-sheen {
  0%, 58% {
    transform: translateX(-132%) skewX(-18deg);
    opacity: 0;
  }
  64% { opacity: .44; }
  80% {
    transform: translateX(132%) skewX(-18deg);
    opacity: .82;
  }
  88%, 100% {
    transform: translateX(132%) skewX(-18deg);
    opacity: 0;
  }
}
@keyframes legendary-edition-seal-film {
  0%, 100% {
    opacity: .52;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: .84;
    transform: translate3d(3%, -2%, 0) scale(1.03);
  }
}
@keyframes legendary-edition-seal-glow {
  0%, 100% {
    opacity: .82;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}
@media (max-width: 680px) {
  .legendary-edition-coffer-seal-wrap {
    width: 110px !important;
    height: 28px !important;
  }
  .legendary-edition-coffer-seal {
    width: 110px !important;
    height: 28px !important;
  }
  .box-visual.has-legendary-edition-seal .coffer-rarity-seal {
    top: 54px !important;
  }
}

.vault-selection.is-legendary-edition-coffer {
  overflow: visible !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal {
  position: absolute !important;
  top: 18px !important;
  left: 50% !important;
  z-index: 9 !important;
  width: 162px !important;
  max-width: calc(100% - 48px) !important;
  height: 40px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > img,
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-holo,
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  inset: -14px -18px -18px -18px !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at center, rgba(255,243,184,.9) 0%, rgba(255,205,118,.56) 26%, rgba(255,128,188,.26) 58%, rgba(125,220,255,.18) 76%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse at center, rgba(168,255,248,.24) 0%, rgba(176,136,255,.16) 56%, rgba(255,255,255,0) 100%) !important;
  filter: blur(10px) !important;
  opacity: .95 !important;
  animation: legendary-edition-seal-glow 4.8s ease-in-out infinite !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-holo {
  z-index: 2 !important;
  overflow: hidden !important;
  -webkit-mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat;
  mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-holo::before,
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-holo::after {
  content: "";
  position: absolute;
  inset: -22% -10%;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-holo::before {
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,.18) 34%, rgba(255,247,221,.58) 44%, rgba(255,255,255,.18) 54%, rgba(255,255,255,0) 64%, rgba(255,255,255,0) 100%);
  transform: translateX(-132%) skewX(-18deg);
  animation: legendary-edition-seal-sheen 5.6s ease-in-out infinite !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-holo::after {
  background: linear-gradient(120deg, rgba(255,162,214,0) 0%, rgba(255,162,214,.16) 22%, rgba(164,231,255,.34) 42%, rgba(255,255,255,.18) 50%, rgba(211,170,255,.30) 60%, rgba(255,245,190,.12) 76%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  animation: legendary-edition-seal-film 7.4s ease-in-out infinite !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > img {
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.92)) drop-shadow(0 0 8px rgba(255,228,152,.28)) drop-shadow(0 3px 10px rgba(0,0,0,.35)) !important;
}
@media (max-width: 760px) {
  .vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal {
    width: 142px !important;
    height: 36px !important;
    top: 16px !important;
  }
}

.legendary-edition-coffer-seal-wrap {
  width: 176px !important;
  height: 44px !important;
  max-width: calc(100% - 8px) !important;
}
.legendary-edition-coffer-seal {
  width: 176px !important;
  height: 44px !important;
}
.legendary-edition-coffer-seal-glow {
  inset: -15px -22px -18px -22px !important;
  filter: blur(10px) saturate(1.12) !important;
}

@media (max-width: 680px) {
  .legendary-edition-coffer-seal-wrap {
    width: 150px !important;
    height: 38px !important;
    max-width: calc(100% - 10px) !important;
  }
  .legendary-edition-coffer-seal {
    width: 150px !important;
    height: 38px !important;
  }
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal {
  width: 218px !important;
  height: 54px !important;
}
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  inset: -18px -26px -22px -26px !important;
  filter: blur(12px) !important;
}

@media (max-width: 760px) {
  .vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal {
    width: 180px !important;
    height: 45px !important;
  }
}

.legendary-edition-coffer-seal-glow {
  inset: -5px -8px -7px -8px !important;
  filter: blur(5px) saturate(1.08) !important;
  opacity: .76 !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  inset: -7px -10px -9px -10px !important;
  filter: blur(6px) !important;
  opacity: .80 !important;
}

.legendary-edition-coffer-seal-glow,
.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.88))
    drop-shadow(0 0 2px rgba(255,233,171,.30))
    drop-shadow(-1px 0 3px rgba(255,103,194,.26))
    drop-shadow(1px 0 3px rgba(92,233,255,.24))
    drop-shadow(0 1px 3px rgba(211,170,255,.20))
    drop-shadow(0 3px 6px rgba(0,0,0,.45)) !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > img {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.90))
    drop-shadow(0 0 2px rgba(255,233,171,.28))
    drop-shadow(-1px 0 3px rgba(255,103,194,.24))
    drop-shadow(1px 0 3px rgba(92,233,255,.22))
    drop-shadow(0 1px 3px rgba(211,170,255,.18))
    drop-shadow(0 3px 8px rgba(0,0,0,.38)) !important;
}

.legendary-edition-coffer-seal {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.84))
    drop-shadow(0 3px 6px rgba(0,0,0,.42)) !important;
}

.legendary-edition-coffer-seal-glow {
  display: block !important;
  inset: 5px 18px 6px 18px !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 34% 52%, rgba(255, 111, 198, .34) 0%, rgba(255, 111, 198, .13) 40%, transparent 72%),
    radial-gradient(ellipse at 66% 50%, rgba(88, 230, 255, .34) 0%, rgba(88, 230, 255, .13) 40%, transparent 72%),
    radial-gradient(ellipse at 50% 54%, rgba(204, 163, 255, .28) 0%, rgba(204, 163, 255, .10) 43%, transparent 74%) !important;
  filter: blur(3px) saturate(1.08) !important;
  opacity: .78 !important;
  animation: legendary-edition-soft-aura 4.8s ease-in-out infinite !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > img {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.86))
    drop-shadow(0 3px 8px rgba(0,0,0,.36)) !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  display: block !important;
  inset: 7px 24px 8px 24px !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 34% 52%, rgba(255, 111, 198, .31) 0%, rgba(255, 111, 198, .11) 40%, transparent 72%),
    radial-gradient(ellipse at 66% 50%, rgba(88, 230, 255, .31) 0%, rgba(88, 230, 255, .11) 40%, transparent 72%),
    radial-gradient(ellipse at 50% 54%, rgba(204, 163, 255, .25) 0%, rgba(204, 163, 255, .09) 43%, transparent 74%) !important;
  filter: blur(4px) saturate(1.06) !important;
  opacity: .74 !important;
  animation: legendary-edition-soft-aura 4.8s ease-in-out infinite !important;
}

@keyframes legendary-edition-soft-aura {
  0%, 100% {
    opacity: .68;
    transform: scale(.98);
  }
  50% {
    opacity: .82;
    transform: scale(1.015);
  }
}

.legendary-edition-coffer-seal-glow {
  display: block !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 56% !important;
  height: 34% !important;
  transform: translate(-50%, -42%) !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 111, 198, .34) 0%, rgba(255, 111, 198, .14) 34%, transparent 72%),
    radial-gradient(ellipse at 70% 50%, rgba(88, 230, 255, .34) 0%, rgba(88, 230, 255, .14) 34%, transparent 72%),
    radial-gradient(ellipse at 50% 50%, rgba(204, 163, 255, .22) 0%, rgba(204, 163, 255, .08) 40%, transparent 76%) !important;
  filter: blur(5px) saturate(1.04) !important;
  opacity: .62 !important;
  animation: legendary-edition-soft-aura-compact 4.8s ease-in-out infinite !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal > .legendary-edition-panel-seal-glow {
  display: block !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 58% !important;
  height: 36% !important;
  transform: translate(-50%, -42%) !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 111, 198, .30) 0%, rgba(255, 111, 198, .12) 34%, transparent 72%),
    radial-gradient(ellipse at 70% 50%, rgba(88, 230, 255, .30) 0%, rgba(88, 230, 255, .12) 34%, transparent 72%),
    radial-gradient(ellipse at 50% 50%, rgba(204, 163, 255, .20) 0%, rgba(204, 163, 255, .07) 40%, transparent 76%) !important;
  filter: blur(6px) saturate(1.03) !important;
  opacity: .58 !important;
  animation: legendary-edition-soft-aura-compact 4.8s ease-in-out infinite !important;
}

@keyframes legendary-edition-soft-aura-compact {
  0%, 100% {
    opacity: .54;
    transform: translate(-50%, -42%) scale(.98);
  }
  50% {
    opacity: .66;
    transform: translate(-50%, -42%) scale(1.02);
  }
}

.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  z-index: 4 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.90))
    drop-shadow(0 2px 5px rgba(0,0,0,.34)) !important;
}

.legendary-edition-coffer-seal-holo {
  z-index: 5 !important;
  opacity: .92 !important;
  mix-blend-mode: screen !important;
}
.legendary-edition-coffer-seal-holo::before {
  background:
    linear-gradient(108deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,.10) 34%,
      rgba(255,248,228,.44) 42%,
      rgba(255,255,255,.10) 50%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,0) 100%) !important;
  opacity: .95 !important;
  transform: translateX(-135%) skewX(-18deg) !important;
  animation: legendary-edition-seal-sheen 4.9s ease-in-out infinite !important;
}
.legendary-edition-coffer-seal-holo::after {
  background:
    linear-gradient(122deg,
      rgba(255, 118, 207, 0) 0%,
      rgba(255, 118, 207, .13) 18%,
      rgba(123, 228, 255, .28) 40%,
      rgba(255,255,255,.14) 50%,
      rgba(212, 171, 255, .26) 60%,
      rgba(255, 214, 245, .10) 72%,
      rgba(255,255,255,0) 100%) !important;
  opacity: .84 !important;
  mix-blend-mode: screen !important;
  filter: blur(.25px) saturate(1.08) !important;
  animation: legendary-edition-seal-film 6.6s ease-in-out infinite !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal {
  display: none !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection::before {
  background: var(--bryer-css-v60-cardslegendary2, url('/images/cardslegendary2.png')) center / 100% 100% no-repeat !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection > .mythic-panel-frame-overlay {
  display: block !important;
  background: var(--bryer-css-v60-cardslegendary, url('/images/cardslegendary.png')) center / 100% 100% no-repeat !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-unowned-selection > .mythic-panel-frame-overlay {
  display: block !important;
  background: var(--bryer-css-v60-cardslegendary3, url('/images/cardslegendary3.png')) center / 100% 100% no-repeat !important;
}

.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.88))
    drop-shadow(0 2px 4px rgba(0,0,0,.28)) !important;
}

.legendary-edition-coffer-seal-holo {
  z-index: 5 !important;
  opacity: .96 !important;
  mix-blend-mode: screen !important;
}
.legendary-edition-coffer-seal-holo::before {
  background:
    linear-gradient(108deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.12) 36%,
      rgba(255,247,224,.52) 44%,
      rgba(255,255,255,.12) 52%,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,0) 100%) !important;
  opacity: .96 !important;
  transform: translateX(-135%) skewX(-18deg) !important;
  animation: legendary-edition-seal-sheen 4.6s ease-in-out infinite !important;
}
.legendary-edition-coffer-seal-holo::after {
  background:
    linear-gradient(122deg,
      rgba(255, 118, 207, 0) 0%,
      rgba(255, 118, 207, .15) 18%,
      rgba(123, 228, 255, .30) 40%,
      rgba(255,255,255,.14) 50%,
      rgba(212, 171, 255, .28) 60%,
      rgba(255, 214, 245, .10) 72%,
      rgba(255,255,255,0) 100%) !important;
  opacity: .84 !important;
  mix-blend-mode: screen !important;
  filter: blur(.2px) saturate(1.06) !important;
  animation: legendary-edition-seal-film 6.2s ease-in-out infinite !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal {
  display: none !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-panel-frame-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  background: var(--bryer-css-v60-cardslegendary, url('/images/cardslegendary.png')) center / 100% 100% no-repeat !important;
}

.vault-selection.is-legendary-edition-coffer.is-unowned-selection > .legendary-panel-frame-overlay {
  background: var(--bryer-css-v60-cardslegendary3, url('/images/cardslegendary3.png')) center / 100% 100% no-repeat !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer::before {
  opacity: 1 !important;
  background: var(--bryer-css-v60-cardslegendary2, url('/images/cardslegendary2.png')) center / 100% 100% no-repeat !important;
  background-size: 100% 100% !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer::after {
  content: none !important;
  display: none !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer > .vault-selection-texture {
  display: none !important;
}
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer > div:not(.legendary-panel-frame-overlay):not(.vault-action-group):not(.legendary-edition-panel-seal) {
  position: relative !important;
  z-index: 40 !important;
}
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .vault-action-group {
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate !important;
}

.vault-selection.is-legendary-edition-coffer .vault-action-group > .open-secondary {
  transform: scaleX(0.96794872) !important;
  transform-origin: right center !important;
}
.vault-selection.is-legendary-edition-coffer .vault-action-group > .inventory-open-button-shell {
  transform: scaleX(0.96153846) scaleY(0.89583333) !important;
  transform-origin: center center !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .selected-coffer-inline-seals .selected-coffer-image-seal-legendary {
  display: none !important;
}

html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .selected-coffer-label-row .eyebrow,
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .selected-coffer-card-pack-note,
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .open-count-picker > div,
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .open-count-picker small,
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .vault-action-group,
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .vault-action-group > .inventory-open-button-shell {
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.88))
    drop-shadow(0 2px 4px rgba(0,0,0,.26)) !important;
}

.legendary-edition-coffer-seal-holo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: none !important;
  mix-blend-mode: screen !important;
  -webkit-mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
  mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
}
.legendary-edition-coffer-seal-holo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(108deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,.10) 42%,
      rgba(255,247,224,.50) 48%,
      rgba(255,255,255,.10) 54%,
      rgba(255,255,255,0) 62%,
      rgba(255,255,255,0) 100%) !important;
  opacity: .96 !important;
  transform: translateX(-115%) skewX(-18deg) !important;
  animation: legendary-edition-seal-sheen-tight-v184 4.8s ease-in-out infinite !important;
}
.legendary-edition-coffer-seal-holo::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
@keyframes legendary-edition-seal-sheen-tight-v184 {
  0%, 56% {
    transform: translateX(-115%) skewX(-18deg);
    opacity: 0;
  }
  62% { opacity: .54; }
  80% {
    transform: translateX(115%) skewX(-18deg);
    opacity: .96;
  }
  88%, 100% {
    transform: translateX(115%) skewX(-18deg);
    opacity: 0;
  }
}

.vault-selection.is-legendary-edition-coffer > .legendary-panel-frame-overlay {
  display: none !important;
}

.vault-selection.is-card-pack-selection.is-legendary-edition-coffer.is-mythic-coffer::before {
  background: var(--bryer-css-v60-cardslegendary2, url('/images/cardslegendary2.png')) center / 100% 100% no-repeat !important;
  opacity: 1 !important;
}

.vault-selection.is-card-pack-selection.is-legendary-edition-coffer.is-mythic-coffer > .mythic-panel-frame-overlay {
  display: block !important;
  background: var(--bryer-css-v60-cardslegendary, url('/images/cardslegendary.png')) center / 100% 100% no-repeat !important;
}

.vault-selection.is-card-pack-selection.is-legendary-edition-coffer.is-unowned-selection.is-mythic-coffer > .mythic-panel-frame-overlay {
  background: var(--bryer-css-v60-cardslegendary3, url('/images/cardslegendary3.png')) center / 100% 100% no-repeat !important;
}

.vault-selection.is-legendary-edition-coffer > .legendary-edition-panel-seal,
html body .view-vault .vault-selection.is-card-pack-selection.is-legendary-edition-coffer .selected-coffer-inline-seals .selected-coffer-image-seal-legendary {
  display: none !important;
}

.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}
.legendary-edition-coffer-seal {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.88))
    drop-shadow(0 2px 4px rgba(0,0,0,.26)) !important;
}
.legendary-edition-coffer-seal-holo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background: none !important;
  mix-blend-mode: screen !important;
  -webkit-mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
  mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
}
.legendary-edition-coffer-seal-holo::before,
.legendary-edition-coffer-seal-holo::after {
  content: "" !important;
  position: absolute !important;
  inset: -12% -8% !important;
  pointer-events: none !important;
}
.legendary-edition-coffer-seal-holo::before {
  background:
    linear-gradient(112deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.10) 40%,
      rgba(255,244,220,.58) 46%,
      rgba(255,255,255,.12) 52%,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,0) 100%) !important;
  transform: translateX(-122%) skewX(-18deg) !important;
  animation: legendary-edition-holo-sheen-v185 4.6s ease-in-out infinite !important;
  opacity: .96 !important;
}
.legendary-edition-coffer-seal-holo::after {
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,136,214,.10) 14%,
      rgba(123,228,255,.22) 30%,
      rgba(255,255,255,.08) 40%,
      rgba(215,171,255,.24) 52%,
      rgba(110,255,231,.18) 66%,
      rgba(255,213,244,.10) 78%,
      rgba(255,255,255,0) 100%) !important;
  background-size: 190% 100% !important;
  transform: translateX(-28%) !important;
  animation: legendary-edition-holo-film-v185 6.8s linear infinite !important;
  opacity: .88 !important;
  filter: saturate(1.08) hue-rotate(0deg) !important;
}
@keyframes legendary-edition-holo-sheen-v185 {
  0%, 56% {
    transform: translateX(-122%) skewX(-18deg);
    opacity: 0;
  }
  62% { opacity: .48; }
  80% {
    transform: translateX(122%) skewX(-18deg);
    opacity: .96;
  }
  88%, 100% {
    transform: translateX(122%) skewX(-18deg);
    opacity: 0;
  }
}
@keyframes legendary-edition-holo-film-v185 {
  0% {
    background-position: 0% 0%;
    filter: saturate(1.05) hue-rotate(0deg);
  }
  50% {
    background-position: 100% 0%;
    filter: saturate(1.12) hue-rotate(22deg);
  }
  100% {
    background-position: 0% 0%;
    filter: saturate(1.05) hue-rotate(44deg);
  }
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-mythic-coffer::before {
  background: var(--bryer-css-v60-cardslegendary2, url('/images/cardslegendary2.png')) center / 100% 100% no-repeat !important;
}
html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-mythic-coffer > .mythic-panel-frame-overlay {
  background: var(--bryer-css-v60-cardslegendary, url('/images/cardslegendary.png')) center / 100% 100% no-repeat !important;
}
html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-unowned-selection.is-mythic-coffer > .mythic-panel-frame-overlay {
  background: var(--bryer-css-v60-cardslegendary3, url('/images/cardslegendary3.png')) center / 100% 100% no-repeat !important;
}
html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-mythic-coffer .selected-coffer-inline-seals .selected-coffer-image-seal-legendary {
  display: none !important;
}

.legendary-edition-coffer-seal-holo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
  -webkit-mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
  mask: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 36%,
      rgba(255,247,230,.16) 43%,
      rgba(255,255,255,.52) 48%,
      rgba(255,232,184,.24) 53%,
      rgba(255,255,255,0) 59%,
      rgba(255,255,255,0) 100%),
    linear-gradient(115deg,
      rgba(255,150,222,0) 0%,
      rgba(255,150,222,.10) 18%,
      rgba(133,230,255,.20) 34%,
      rgba(255,255,255,.10) 46%,
      rgba(218,171,255,.20) 58%,
      rgba(125,255,237,.16) 72%,
      rgba(255,150,222,0) 100%) !important;
  background-size: 230% 100%, 180% 100% !important;
  background-position: -160% 0, 0% 0 !important;
  animation: legendary-edition-seal-holo-sweep-v186 4.8s ease-in-out infinite, legendary-edition-seal-holo-film-v186 7.6s linear infinite !important;
  will-change: background-position, filter, opacity !important;
}
.legendary-edition-coffer-seal-holo::before,
.legendary-edition-coffer-seal-holo::after {
  content: none !important;
  display: none !important;
}
@keyframes legendary-edition-seal-holo-sweep-v186 {
  0%, 54% {
    background-position: -160% 0, 0% 0;
    opacity: 0;
  }
  60% { opacity: .66; }
  78% {
    background-position: 150% 0, 0% 0;
    opacity: 1;
  }
  88%, 100% {
    background-position: 150% 0, 0% 0;
    opacity: 0;
  }
}
@keyframes legendary-edition-seal-holo-film-v186 {
  0% {
    background-position: -160% 0, 0% 0;
    filter: hue-rotate(0deg) saturate(1.05);
  }
  50% {
    background-position: -160% 0, 100% 0;
    filter: hue-rotate(18deg) saturate(1.12);
  }
  100% {
    background-position: -160% 0, 0% 0;
    filter: hue-rotate(36deg) saturate(1.05);
  }
}

html body .view-vault .vault-selection.is-card-pack-selection.is-card-pack-legendary-selection.is-mythic-coffer .vault-action-group > .inventory-open-button-shell {
  position: relative !important;
  top: 2px !important;
}

.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.24)) !important;
}

.legendary-edition-coffer-seal-holo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;

  -webkit-mask-image: url('/images/legendaryedition.png') !important;
  mask-image: url('/images/legendaryedition.png') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-position: center center !important;
  mask-position: center center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

.legendary-edition-coffer-seal-holo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;

  background: linear-gradient(116deg,
    transparent 27%,
    rgba(255,255,255,.025) 36%,
    rgba(255,78,186,.10) 41%,
    rgba(165,111,255,.20) 45%,
    rgba(77,226,255,.24) 49%,
    rgba(255,238,125,.30) 53%,
    rgba(255,255,255,.16) 57%,
    rgba(255,78,186,.10) 61%,
    transparent 67%) !important;

  mix-blend-mode: screen !important;
  filter: blur(.15px) !important;
  will-change: transform, opacity !important;
  transform: translate3d(-100%,0,0) !important;
  opacity: 0 !important;
  animation: legendary-edition-reflection-v187 7.6s linear infinite !important;
}

.legendary-edition-coffer-seal-holo::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
}

@keyframes legendary-edition-reflection-v187 {
  0%, 12% {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  18% { opacity: .20; }
  25% { opacity: .72; }
  32% { opacity: 1; }
  68% {
    opacity: 1;
    transform: translate3d(100%,0,0);
  }
  76% { opacity: .46; }
  84%, 100% {
    opacity: 0;
    transform: translate3d(100%,0,0);
  }
}

.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.24)) !important;
}

.legendary-edition-coffer-seal-holo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;

  -webkit-mask-image: url('/images/legendaryedition.png') !important;
  mask-image: url('/images/legendaryedition.png') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  background-image: linear-gradient(116deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 80, 188, .18) 44%,
    rgba(160, 118, 255, .34) 47%,
    rgba(76, 229, 255, .42) 49.5%,
    rgba(255, 246, 214, .78) 52%,
    rgba(255,255,255,.58) 53.5%,
    rgba(255, 108, 207, .24) 56%,
    transparent 61%,
    transparent 100%) !important;
  background-size: 300% 100% !important;
  background-position: 145% 0 !important;
  background-repeat: no-repeat !important;

  mix-blend-mode: screen !important;
  filter: saturate(1.12) !important;
  opacity: 0 !important;
  animation: legendary-edition-direct-reflection-v188 7.6s linear infinite !important;
  will-change: background-position, opacity !important;
}

.legendary-edition-coffer-seal-holo::before,
.legendary-edition-coffer-seal-holo::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

@keyframes legendary-edition-direct-reflection-v188 {
  0%, 12% {
    opacity: 0;
    background-position: 145% 0;
  }
  18% { opacity: .32; }
  26% { opacity: .86; }
  32% { opacity: 1; }
  68% {
    opacity: 1;
    background-position: -145% 0;
  }
  76% { opacity: .48; }
  84%, 100% {
    opacity: 0;
    background-position: -145% 0;
  }
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .custom-buy-fx,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .legendary-buy-stage,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .bryer-buy-stage,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .gil-buy-stage,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .minions-buy-stage,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .cards-buy-stage,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .blackjack-buy-stage,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > .card-pack-open-fx {
  opacity: .45 !important;
  filter: grayscale(.28) saturate(.58) brightness(.72) !important;
  animation-play-state: paused !important;
  z-index: 1 !important;
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button {
  position: relative !important;
  z-index: 3 !important;
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .legendary-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .bryer-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .gil-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .minions-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .cards-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .blackjack-buy-ornament {
  opacity: .58 !important;
  filter: grayscale(.20) saturate(.66) brightness(.78) !important;
}

.legendary-edition-coffer-seal-holo {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}
.legendary-edition-coffer-seal-glow {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.24)) !important;
}

.legendary-edition-coffer-seal-reflection {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  pointer-events: none !important;
  background: url('/images/legendaryedition.png') center / 100% 100% no-repeat !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  filter: brightness(2.05) contrast(1.05) saturate(1.75) hue-rotate(0deg) !important;
  clip-path: polygon(-34% 0%, -14% 0%, 8% 100%, -12% 100%) !important;
  will-change: clip-path, opacity, filter !important;
  animation: legendary-edition-reflection-sweep-v189 6.9s ease-in-out infinite !important;
}

@keyframes legendary-edition-reflection-sweep-v189 {
  0%, 18% {
    opacity: 0;
    clip-path: polygon(-34% 0%, -14% 0%, 8% 100%, -12% 100%);
    filter: brightness(2.05) contrast(1.05) saturate(1.75) hue-rotate(0deg);
  }
  24% {
    opacity: .40;
  }
  34% {
    opacity: .95;
    filter: brightness(2.18) contrast(1.04) saturate(1.95) hue-rotate(20deg);
  }
  52% {
    opacity: 1;
    clip-path: polygon(42% 0%, 59% 0%, 79% 100%, 62% 100%);
    filter: brightness(2.25) contrast(1.03) saturate(2.05) hue-rotate(48deg);
  }
  70% {
    opacity: .96;
    clip-path: polygon(93% 0%, 113% 0%, 135% 100%, 115% 100%);
    filter: brightness(2.12) contrast(1.04) saturate(1.90) hue-rotate(78deg);
  }
  78%, 100% {
    opacity: 0;
    clip-path: polygon(118% 0%, 138% 0%, 160% 100%, 140% 100%);
    filter: brightness(2.05) contrast(1.05) saturate(1.75) hue-rotate(96deg);
  }
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed {
  isolation: isolate !important;
  opacity: .50 !important;
  filter: grayscale(.24) saturate(.64) brightness(.78) !important;
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > :not(button) {
  position: absolute !important;
  z-index: -1 !important;
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button:disabled {
  position: relative !important;
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate !important;
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .legendary-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .bryer-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .gil-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .minions-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .cards-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .blackjack-buy-ornament {
  z-index: -1 !important;
  opacity: .84 !important;
}

.box-card .card-actions .purchase-action-pair.is-more-gil-needed > button.btn.primary.box-buy-button .box-buy-button-label {
  position: relative !important;
  z-index: 5 !important;
}

.legendary-edition-coffer-seal-glow,
.legendary-edition-coffer-seal-holo {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.24)) !important;
}

.legendary-edition-coffer-seal-reflection {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  z-index: 9 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;

  filter:
    brightness(2.35)
    contrast(1.08)
    saturate(2.15)
    hue-rotate(0deg) !important;

  clip-path: polygon(-28% 0%, -10% 0%, 10% 100%, -8% 100%) !important;
  will-change: clip-path, opacity, filter !important;
  animation: legendary-edition-real-img-reflection-v190 5.2s ease-in-out infinite !important;
}

@keyframes legendary-edition-real-img-reflection-v190 {
  0%, 8% {
    opacity: 0;
    clip-path: polygon(-28% 0%, -10% 0%, 10% 100%, -8% 100%);
    filter: brightness(2.30) contrast(1.08) saturate(2.10) hue-rotate(0deg);
  }
  14% {
    opacity: .48;
  }
  24% {
    opacity: .95;
    clip-path: polygon(8% 0%, 25% 0%, 45% 100%, 28% 100%);
    filter: brightness(2.42) contrast(1.06) saturate(2.30) hue-rotate(18deg);
  }
  42% {
    opacity: 1;
    clip-path: polygon(40% 0%, 57% 0%, 77% 100%, 60% 100%);
    filter: brightness(2.55) contrast(1.04) saturate(2.40) hue-rotate(44deg);
  }
  60% {
    opacity: .98;
    clip-path: polygon(74% 0%, 91% 0%, 111% 100%, 94% 100%);
    filter: brightness(2.44) contrast(1.05) saturate(2.28) hue-rotate(72deg);
  }
  72% {
    opacity: .55;
    clip-path: polygon(98% 0%, 116% 0%, 136% 100%, 118% 100%);
  }
  80%, 100% {
    opacity: 0;
    clip-path: polygon(118% 0%, 136% 0%, 156% 100%, 138% 100%);
    filter: brightness(2.30) contrast(1.08) saturate(2.10) hue-rotate(92deg);
  }
}

.legendary-edition-coffer-seal-glow,
.legendary-edition-coffer-seal-holo,
.legendary-edition-coffer-seal-reflection {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.legendary-edition-coffer-seal {
  position: relative !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.24)) !important;
}

.legendary-edition-coffer-seal-reflection-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: saturate(1.08) brightness(1.18) !important;
}

.legendary-edition-coffer-seal-reflection-band {
  pointer-events: none !important;
}

.legendary-edition-coffer-seal-reflection-svg {
  overflow: hidden !important;
  clip-path: inset(0) !important;
  filter: none !important;
}

.box-card .card-actions .purchase-action-pair.is-buy-limit-reached {
  isolation: isolate !important;
  opacity: .50 !important;
  filter: grayscale(.24) saturate(.64) brightness(.78) !important;
}

.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > :not(button) {
  position: absolute !important;
  z-index: -1 !important;
}

.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button,
.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button:disabled {
  position: relative !important;
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate !important;
}

.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .legendary-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .bryer-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .gil-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .minions-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .cards-buy-ornament,
.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .blackjack-buy-ornament {
  z-index: -1 !important;
  opacity: .84 !important;
}

.box-card .card-actions .purchase-action-pair.is-buy-limit-reached > button.btn.primary.box-buy-button .box-buy-button-label {
  position: relative !important;
  z-index: 5 !important;
}

.buy-limit-reached-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(4, 8, 7, .82) !important;
  backdrop-filter: none !important;
  animation: buyLimitReachedOverlayIn .22s ease-out both !important;
}

.buy-limit-reached-popup-dialog {
  position: relative !important;
  width: min(620px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 36px) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  padding: 30px 34px 28px !important;
  border: 1px solid rgba(225, 205, 145, .31) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(116, 179, 150, .12), transparent 42%),
    linear-gradient(150deg, rgba(18, 31, 27, .985), rgba(11, 20, 18, .99)) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
  text-align: center !important;
  animation: buyLimitReachedDialogIn .28s cubic-bezier(.2,.78,.2,1) both !important;
}

.buy-limit-reached-popup-dialog h2 {
  margin: 0 0 18px !important;
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #f2dfab !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.42) !important;
}

.buy-limit-reached-popup-dialog h2 > span {
  display: block !important;
}

.buy-limit-reached-popup-image {
  display: block !important;
  width: min(330px, 72%) !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
  margin: 4px auto 18px !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.30)) !important;
}

.buy-limit-reached-popup-dialog p {
  max-width: 520px !important;
  margin: 0 auto 24px !important;
  color: rgba(238, 239, 231, .88) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  text-wrap: balance !important;
}

.buy-limit-reached-popup-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.buy-limit-reached-popup-actions > button {
  min-width: 150px !important;
}

.buy-limit-reached-popup-actions > button.primary {
  min-width: 178px !important;
}

@keyframes buyLimitReachedOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes buyLimitReachedDialogIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 600px) {
  .buy-limit-reached-popup-overlay {
    padding: 14px !important;
  }

  .buy-limit-reached-popup-dialog {
    width: min(100%, 460px) !important;
    padding: 24px 18px 22px !important;
    border-radius: 15px !important;
  }

  .buy-limit-reached-popup-dialog h2 {
    font-size: 25px !important;
    margin-bottom: 14px !important;
  }

  .buy-limit-reached-popup-image {
    width: min(300px, 84%) !important;
    max-height: 205px !important;
    margin-bottom: 15px !important;
  }

  .buy-limit-reached-popup-dialog p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }

  .buy-limit-reached-popup-actions {
    gap: 9px !important;
  }

  .buy-limit-reached-popup-actions > button,
  .buy-limit-reached-popup-actions > button.primary {
    min-width: 0 !important;
    flex: 1 1 145px !important;
  }
}

.buy-limit-reached-popup-dialog {
  isolation: isolate !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(103, 171, 139, .30) 0%, rgba(103, 171, 139, 0) 38%),
    radial-gradient(circle at 88% 18%, rgba(39, 117, 88, .30) 0%, rgba(39, 117, 88, 0) 36%),
    radial-gradient(circle at 52% 112%, rgba(73, 141, 108, .28) 0%, rgba(73, 141, 108, 0) 48%),
    linear-gradient(138deg, #1c382f 0%, #102820 30%, #17382d 58%, #0b1f19 100%) !important;
  background-size: 160% 160%, 170% 170%, 165% 165%, 155% 155% !important;
  background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50% !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 46px rgba(50, 128, 95, .12),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 18px 44px rgba(135, 194, 165, .035) !important;
  animation:
    buyLimitReachedDialogIn .28s cubic-bezier(.2,.78,.2,1) both,
    buyLimitReachedGradientDrift 14s ease-in-out .28s infinite alternate !important;
}

.buy-limit-reached-popup-dialog::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: .30 !important;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.026) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.060) 0 1px, transparent 1px 9px),
    radial-gradient(circle, rgba(236, 255, 245, .10) 0 .65px, transparent .8px) !important;
  background-size: auto, auto, 7px 7px !important;
  mix-blend-mode: soft-light !important;
}

.buy-limit-reached-popup-dialog::after {
  content: "" !important;
  position: absolute !important;
  left: -24% !important;
  top: -38% !important;
  width: 150% !important;
  height: 92% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  opacity: .46 !important;
  background:
    radial-gradient(circle at 24% 44%, rgba(138, 213, 174, .16) 0%, rgba(138, 213, 174, 0) 28%),
    radial-gradient(circle at 72% 38%, rgba(71, 154, 116, .15) 0%, rgba(71, 154, 116, 0) 30%) !important;
  filter: blur(14px) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  animation: buyLimitReachedAmbientLight 9s ease-in-out infinite alternate !important;
}

.buy-limit-reached-popup-dialog > * {
  position: relative !important;
  z-index: 1 !important;
}

.buy-limit-reached-popup-image {
  animation: buyLimitReachedImageFloat 5.8s ease-in-out infinite !important;
}

@keyframes buyLimitReachedGradientDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%;
  }
  50% {
    background-position: 18% 12%, 82% 14%, 56% 88%, 50% 44%;
  }
  100% {
    background-position: 32% 18%, 68% 26%, 44% 78%, 100% 50%;
  }
}

@keyframes buyLimitReachedAmbientLight {
  from {
    opacity: .34;
    transform: translate3d(-2.5%, -1%, 0) scale(.98);
  }
  to {
    opacity: .54;
    transform: translate3d(5%, 6%, 0) scale(1.07);
  }
}

@keyframes buyLimitReachedImageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .buy-limit-reached-popup-dialog {
    animation: buyLimitReachedDialogIn .28s cubic-bezier(.2,.78,.2,1) both !important;
  }

  .buy-limit-reached-popup-dialog::after,
  .buy-limit-reached-popup-image {
    animation: none !important;
  }
}

.buy-limit-reached-popup-dialog {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(62, 121, 95, .24) 0%, rgba(62, 121, 95, 0) 38%),
    radial-gradient(circle at 88% 18%, rgba(26, 85, 62, .24) 0%, rgba(26, 85, 62, 0) 36%),
    radial-gradient(circle at 52% 112%, rgba(38, 92, 68, .22) 0%, rgba(38, 92, 68, 0) 48%),
    linear-gradient(138deg, #10251d 0%, #091a14 30%, #0d241b 58%, #06120e 100%) !important;
}

.buy-limit-reached-popup-image-mobile,
.buy-limit-reached-popup-copy-mobile,
.buy-limit-reached-popup-action-mobile {
  display: none !important;
}

@media (max-width: 600px) {
  .buy-limit-reached-popup-image-desktop,
  .buy-limit-reached-popup-copy-desktop,
  .buy-limit-reached-popup-action-desktop {
    display: none !important;
  }

  .buy-limit-reached-popup-image-mobile {
    display: block !important;
  }

  .buy-limit-reached-popup-copy-mobile {
    display: block !important;
  }

  .buy-limit-reached-popup-action-mobile {
    display: inline !important;
  }
}

@media (max-width: 820px) {
  html body .site-mobile-nav-spend-limit {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 3px 5px !important;
    margin-top: 2px !important;
    color: rgba(235, 230, 211, .62) !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
  html body .site-mobile-nav-spend-limit > small {
    color: rgba(235, 230, 211, .62) !important;
    font: 800 9px/1.15 Arial, sans-serif !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
  }
  html body .site-mobile-nav-spend-limit > b {
    min-width: 0 !important;
    color: #d8b965 !important;
    font: 850 9px/1.15 Arial, sans-serif !important;
    text-shadow: 0 0 9px rgba(214, 180, 95, .13) !important;
    white-space: nowrap !important;
  }
  html body .site-mobile-nav-spend-limit.is-reached > b {
    color: #f2c878 !important;
    text-shadow: 0 0 10px rgba(242, 174, 86, .22) !important;
  }
}

.mobile-entry-notice-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20120 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  background: rgba(2, 7, 5, .84) !important;
  backdrop-filter: blur(4px) !important;
  animation: mobileEntryNoticeOverlayIn .22s ease-out both !important;
}

.mobile-entry-notice-dialog {
  position: relative !important;
  isolation: isolate !important;
  width: min(100%, 440px) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 28px 24px 24px !important;
  border: 1px solid rgba(226, 196, 107, .32) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(84, 145, 111, .23), transparent 45%),
    radial-gradient(circle at 104% 76%, rgba(40, 91, 68, .22), transparent 40%),
    linear-gradient(145deg, #10261d 0%, #0a1a14 48%, #06110d 100%) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 32px rgba(67, 132, 96, .08) !important;
  text-align: center !important;
  animation: mobileEntryNoticeDialogIn .28s cubic-bezier(.2,.78,.2,1) both !important;
}

.mobile-entry-notice-dialog::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: .20 !important;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.024) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.055) 0 1px, transparent 1px 10px) !important;
  mix-blend-mode: soft-light !important;
}

.mobile-entry-notice-dialog > * {
  position: relative !important;
  z-index: 1 !important;
}

.mobile-entry-notice-dialog h2 {
  margin: 0 0 17px !important;
  color: #f1dda4 !important;
  font-size: clamp(25px, 7.1vw, 31px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.42) !important;
  text-wrap: balance !important;
}

.mobile-entry-notice-dialog p {
  max-width: 370px !important;
  margin: 0 auto 22px !important;
  color: rgba(239, 240, 232, .88) !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.mobile-entry-notice-button {
  min-width: 155px !important;
  margin: 0 auto !important;
}

@keyframes mobileEntryNoticeOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobileEntryNoticeDialogIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 390px) {
  .mobile-entry-notice-overlay {
    padding: 12px !important;
  }
  .mobile-entry-notice-dialog {
    padding: 24px 18px 21px !important;
    border-radius: 15px !important;
  }
  .mobile-entry-notice-dialog h2 {
    margin-bottom: 14px !important;
    font-size: 25px !important;
  }
  .mobile-entry-notice-dialog p {
    margin-bottom: 19px !important;
    font-size: 13.5px !important;
    line-height: 1.52 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-entry-notice-overlay,
  .mobile-entry-notice-dialog {
    animation: none !important;
  }
}

html body .deposit-limit-inline > span,
html body .site-mobile-nav-spend-limit > small {
  color: #F2F2F2 !important;
}

@media (min-width: 821px) {
  html body .app-shell > .ticker-wrap {
    top: 86px !important;
  }
}

html body .card-album.card-album-modal-book .card-book-spread.turn-next {
  animation: cardAlbumSpreadNextLite .18s ease-out both !important;
}
html body .card-album.card-album-modal-book .card-book-spread.turn-prev {
  animation: cardAlbumSpreadPrevLite .18s ease-out both !important;
}
@keyframes cardAlbumSpreadNextLite {
  from {
    opacity: .72;
    transform: translate3d(7px,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
@keyframes cardAlbumSpreadPrevLite {
  from {
    opacity: .72;
    transform: translate3d(-7px,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

.card-binder-tabs button.is-uncommon > span {
  color: #153d24 !important;
  background: linear-gradient(90deg,#72b887 0%,#a8d9ad 48%,#d9efd8 100%) !important;
  border-color: rgba(55,123,73,.52) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.46) !important;
}

.card-album.card-album-modal-book .card-book-slot-rarity > .reward-rarity-seal,
.card-album.card-album-modal-book .card-book-slot-rarity > .reward-rarity-seal::before,
.card-album.card-album-modal-book .card-book-slot-rarity > .reward-rarity-seal::after {
  animation: none !important;
}

html[data-site-scrolling="true"] .view-page,
html[data-site-scrolling="true"] .view-page::before,
html[data-site-scrolling="true"] .view-page::after,
html[data-site-scrolling="true"] .view-page *,
html[data-site-scrolling="true"] .view-page *::before,
html[data-site-scrolling="true"] .view-page *::after {
  animation-play-state: paused !important;
}

html[data-site-overlay-open="true"] .view-page,
html[data-site-overlay-open="true"] .view-page::before,
html[data-site-overlay-open="true"] .view-page::after,
html[data-site-overlay-open="true"] .view-page *,
html[data-site-overlay-open="true"] .view-page *::before,
html[data-site-overlay-open="true"] .view-page *::after {
  animation-play-state: paused !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal {
  position: absolute !important;
  top: 8.85% !important;
  right: 4.1% !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  width: 344px !important;
  min-width: 344px !important;
  max-width: 344px !important;
  height: 72px !important;
  padding: 0 28px !important;
  gap: 12px !important;
  border-width: 4px !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-indent: .08em !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: 0 4px 1px rgba(0,0,0,.82) !important;
  transform-origin: 100% 0% !important;
  transform: translateZ(calc(var(--card-prism-half-depth) + .3px)) scale(.25) !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
  pointer-events: none !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal::before,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal::after {
  font-size: 20px !important;
  line-height: 1 !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-common,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-legendary {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.20),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 12px 32px rgba(0,0,0,.28) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-uncommon {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.24),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 0 40px rgba(77,218,132,.22),
    0 12px 32px rgba(0,0,0,.28) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-rare {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.24),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 0 40px rgba(89,178,255,.24),
    0 12px 32px rgba(0,0,0,.28) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-epic {
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.24),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 0 44px rgba(196,111,255,.26),
    0 12px 32px rgba(0,0,0,.28) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-legendary {
  animation: cardInspectorHqSealLegendaryHolo 2.6s linear infinite !important;
}

@keyframes cardInspectorHqSealLegendaryHolo {
  0% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 32px rgba(255,113,199,.18), 0 0 40px rgba(77,229,255,.18);
  }
  50% {
    background-position: 0 0, 100% 50%;
    box-shadow: 0 0 40px rgba(255,194,68,.20), 0 0 56px rgba(166,108,255,.20);
  }
  100% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 32px rgba(255,113,199,.18), 0 0 40px rgba(77,229,255,.18);
  }
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-rare,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-epic {
  font-size: 39px !important;
  letter-spacing: .075em !important;
  text-indent: .075em !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal {
  font-weight: 700 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
  -webkit-text-stroke: .55px currentColor !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 0 1px currentColor,
    0 4px 2.5px rgba(0,0,0,.74) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal::before,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal::after {
  font-weight: 700 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
  -webkit-text-stroke: .4px currentColor !important;
  paint-order: stroke fill !important;
  text-shadow: 0 0 .8px currentColor !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 7px !important;
  gap: 3px !important;
  border-width: 1px !important;
  box-sizing: border-box !important;

  font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif !important;
  font-size: 8.5px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
  letter-spacing: .08em !important;
  text-indent: .08em !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-stroke: 0 transparent !important;
  paint-order: normal !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.78) !important;

  transform: translateZ(calc(var(--card-prism-half-depth) + .3px)) !important;
  transform-origin: 100% 0% !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal::before,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal::after {
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif !important;
  font-size: 5px !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-stroke: 0 transparent !important;
  paint-order: normal !important;
  text-shadow: 0 1px .5px rgba(0,0,0,.55) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-rare,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-epic {
  font-size: 11.25px !important;
  letter-spacing: .06em !important;
  text-indent: .06em !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-legendary {
  clip-path: polygon(0 50%, 2.5px 0, calc(100% - 2.5px) 0, 100% 50%, calc(100% - 2.5px) 100%, 2.5px 100%) !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-epic {
  clip-path: polygon(2.25px 0, calc(100% - 2.25px) 0, 100% 50%, calc(100% - 2.25px) 100%, 2.25px 100%, 0 50%) !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-rare {
  clip-path: polygon(0 0, calc(100% - 1.75px) 0, 100% 50%, calc(100% - 1.75px) 100%, 0 100%, 1.5px 50%) !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-uncommon {
  border-radius: 2.5px .5px 2.5px .5px !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-common {
  clip-path: polygon(1.25px 0, 100% 0, calc(100% - 1.25px) 100%, 0 100%) !important;
}

.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-common,
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-legendary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 8px rgba(0,0,0,.28) !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-uncommon {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(77,218,132,.22),
    0 3px 8px rgba(0,0,0,.28) !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-rare {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(89,178,255,.24),
    0 3px 8px rgba(0,0,0,.28) !important;
}
.card-inspector-stage .card-inspector-rotator > .card-inspector-hq-seal.rarity-seal-epic {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 11px rgba(196,111,255,.26),
    0 3px 8px rgba(0,0,0,.28) !important;
}

@keyframes cardInspectorHqSealLegendaryHolo {
  0% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 8px rgba(255,113,199,.18), 0 0 10px rgba(77,229,255,.18);
  }
  50% {
    background-position: 0 0, 100% 50%;
    box-shadow: 0 0 10px rgba(255,194,68,.20), 0 0 14px rgba(166,108,255,.20);
  }
  100% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 8px rgba(255,113,199,.18), 0 0 10px rgba(77,229,255,.18);
  }
}

html body .card-catalog-featured-mythic {
  position: fixed !important;
  top: 50% !important;
  right: calc(50% + 566px) !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(232px, max(78px, calc((100vw - 1120px) / 2 - 18px))) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body .card-catalog-featured-card-wrap {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card {
  width: 100% !important;
  max-width: 232px !important;
}

html body .card-catalog-preset-card.is-preview-only {
  cursor: default !important;
}

html body .card-catalog-featured-gold-text {
  display: inline-block !important;
  width: min(250px, calc(100% + 72px)) !important;
  margin: 0 !important;
  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255,248,214,.18), 0 2px 12px rgba(95,64,9,.35), 0 0 1px rgba(255,232,154,.22) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35)) !important;
}

html body .card-catalog-featured-title {
  font-size: clamp(11px, 1vw, 17px) !important;
  letter-spacing: .012em !important;
}

html body .card-catalog-featured-subtitle {
  font-size: clamp(11px, 1.05vw, 18px) !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mythic-art-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body .card-catalog-preset-card.rarity-mythic .card-mythic-panorama-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform-origin: 50% 52% !important;
  transform-style: preserve-3d !important;
  animation: mythicPanoramaFloat 5.8s ease-in-out infinite !important;
  will-change: transform !important;
}

html body .card-catalog-preset-card.rarity-mythic .card-mythic-panorama-image,
html body .card-catalog-preset-card.rarity-mythic .card-mythic-panorama-sweep-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
}

html body .card-catalog-preset-card.rarity-mythic .card-mythic-panorama-image {
  z-index: 1 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1.6px 1.2px rgba(4,18,9,.34)) drop-shadow(0 -.8px .65px rgba(255,248,218,.18)) saturate(1.045) contrast(1.025) !important;
  transform: translateZ(10px) scale(1.002) !important;
  backface-visibility: visible !important;
}

html body .card-catalog-preset-card.rarity-mythic .card-mythic-panorama-sweep-image {
  z-index: 2 !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  filter: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 14%, #000 36%, #000 64%, rgba(0,0,0,.18) 86%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 14%, #000 36%, #000 64%, rgba(0,0,0,.18) 86%, transparent 100%) !important;
  -webkit-mask-size: 100% 22% !important;
  mask-size: 100% 22% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: 0 148%;
  mask-position: 0 148%;
  animation: mythicArtworkImageSweep 5.15s linear infinite !important;
  animation-play-state: running !important;
  will-change: opacity, filter, -webkit-mask-position, mask-position !important;
}

html body .card-catalog-preset-card.rarity-mythic .card-mythic-art-sweep-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: hidden !important;
  clip-path: inset(.15% round 4.8%) !important;
  -webkit-clip-path: inset(.15% round 4.8%) !important;
  opacity: 0;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 14%, #000 36%, #000 64%, rgba(0,0,0,.18) 86%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 14%, #000 36%, #000 64%, rgba(0,0,0,.18) 86%, transparent 100%) !important;
  -webkit-mask-size: 100% 31% !important;
  mask-size: 100% 31% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: 0 148%;
  mask-position: 0 148%;
  animation: mythicArtworkImageSweep 5.15s linear infinite !important;
  animation-play-state: running !important;
  will-change: opacity, filter, -webkit-mask-position, mask-position !important;
}

html body .card-catalog-preset-card.rarity-mythic .mythic-card-sparkles.is-catalog-internal {
  z-index: 12 !important;
  overflow: hidden !important;
  font-size: 7px !important;
}
html body .card-catalog-preset-card.rarity-mythic .mythic-card-sparkles.is-catalog-internal > i:nth-child(1) {
  left: 18% !important;
  top: 22% !important;
}
html body .card-catalog-preset-card.rarity-mythic .mythic-card-sparkles.is-catalog-internal > i:nth-child(2) {
  left: 79% !important;
  top: 18% !important;
}
html body .card-catalog-preset-card.rarity-mythic .mythic-card-sparkles.is-catalog-internal > i:nth-child(3) {
  left: 31% !important;
  top: 57% !important;
}
html body .card-catalog-preset-card.rarity-mythic .mythic-card-sparkles.is-catalog-internal > i:nth-child(4) {
  left: 72% !important;
  top: 66% !important;
}
html body .card-catalog-preset-card.rarity-mythic .mythic-card-sparkles.is-catalog-internal > i:nth-child(5) {
  left: 49% !important;
  top: 82% !important;
}

@media (max-width: 1500px) {
  html body .card-catalog-featured-mythic {
    gap: 8px !important;
  }
  html body .card-catalog-featured-gold-text {
    width: min(205px, calc(100% + 78px)) !important;
  }
  html body .card-catalog-featured-title,
  html body .card-catalog-featured-subtitle {
    font-size: clamp(9px, .9vw, 13px) !important;
  }
}

@media (max-width: 1080px) {
  html body .card-catalog-featured-mythic {
    right: auto !important;
    left: 6px !important;
    width: 70px !important;
    gap: 6px !important;
  }
  html body .card-catalog-featured-gold-text {
    width: 92px !important;
    font-size: 9px !important;
  }
  html body .card-catalog-featured-subtitle {
    letter-spacing: .025em !important;
  }
}

html body .card-catalog-featured-mythic {
  right: calc(50% + 570px) !important;
  z-index: 40 !important;
  gap: 14px !important;
  width: min(252px, max(90px, calc((100vw - 1120px) / 2 - 4px))) !important;
}

html body .card-catalog-featured-card-wrap {
  overflow: visible !important;
  z-index: 2 !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card {
  width: 100% !important;
  max-width: 252px !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.is-preview-only::before {
  content: "" !important;
  position: absolute !important;
  inset: -18px -24px !important;
  z-index: 80 !important;
  display: block !important;
  background: transparent !important;
  pointer-events: auto !important;
}

html body .card-catalog-featured-gold-text {
  width: min(278px, calc(100% + 78px)) !important;
}

html body .card-catalog-featured-title {
  font-size: clamp(12px, 1.08vw, 19px) !important;
}

html body .card-catalog-featured-subtitle {
  font-size: clamp(12px, 1.12vw, 20px) !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-catalog-preset-mythic-art-layer > .card-catalog-preset-image {
  transform: translate3d(var(--catalog-parallax-art-x, 0px), var(--catalog-parallax-art-y, 0px), 0) scale(1.018) !important;
  transition: transform 105ms ease-out !important;
  will-change: transform !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-image {
  transform: translate3d(var(--catalog-parallax-x, 0px), var(--catalog-parallax-y, 0px), 10px) scale(1.018) !important;
  transition: transform 105ms ease-out !important;
  will-change: transform !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-sweep-image {
  transform: translate3d(var(--catalog-parallax-x, 0px), var(--catalog-parallax-y, 0px), 12px) scale(1.018) !important;
  transition: transform 105ms ease-out !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-art-sweep-image {
  transform: translate3d(var(--catalog-parallax-art-x, 0px), var(--catalog-parallax-art-y, 0px), 4px) scale(1.018) !important;
  transition: transform 105ms ease-out !important;
}

@media (max-width: 1500px) {
  html body .card-catalog-featured-mythic {
    gap: 10px !important;
    width: min(252px, max(88px, calc((100vw - 1120px) / 2 - 4px))) !important;
  }
  html body .card-catalog-featured-gold-text {
    width: min(226px, calc(100% + 82px)) !important;
  }
  html body .card-catalog-featured-title,
  html body .card-catalog-featured-subtitle {
    font-size: clamp(10px, 1vw, 15px) !important;
  }
}

@media (max-width: 1080px) {
  html body .card-catalog-featured-mythic {
    right: auto !important;
    left: 4px !important;
    width: 78px !important;
    gap: 6px !important;
  }
  html body .card-catalog-featured-gold-text {
    width: 100px !important;
    font-size: 9.5px !important;
  }
}

html body .card-catalog-featured-mythic .card-catalog-preview-interaction {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: none !important;
  isolation: isolate !important;
}

html body .card-catalog-featured-mythic .card-catalog-preview-interaction::before {
  content: "" !important;
  position: absolute !important;
  inset: -28px -38px !important;
  z-index: 90 !important;
  display: block !important;
  background: transparent !important;
  pointer-events: auto !important;
  cursor: default !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.is-preview-only {
  width: 100% !important;
  max-width: 286px !important;
  pointer-events: none !important;
}
html body .card-catalog-featured-mythic .card-catalog-preset-card.is-preview-only::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 1501px) {
  html body .card-catalog-featured-mythic {
    right: calc(50% + 602px) !important;
    width: 286px !important;
    gap: 16px !important;
  }
  html body .card-catalog-featured-gold-text {
    width: 326px !important;
  }
  html body .card-catalog-featured-title {
    font-size: 21px !important;
    line-height: 1.08 !important;
  }
  html body .card-catalog-featured-subtitle {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body .card-catalog-featured-mythic {
    transform: translate(-14px, -50%) !important;
    gap: 12px !important;
  }
  html body .card-catalog-featured-title {
    font-size: clamp(14px, 1.18vw, 18px) !important;
  }
  html body .card-catalog-featured-subtitle {
    font-size: clamp(15px, 1.22vw, 19px) !important;
  }
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.is-preview-only .card-catalog-preset-surface {
  transition: transform 28ms linear !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-catalog-preset-mythic-art-layer > .card-catalog-preset-image,
html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-image,
html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-sweep-image,
html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-art-sweep-image {
  transition: transform 32ms linear !important;
}

@media (min-width: 1501px) {
  html body .card-catalog-featured-title {
    font-size: 23px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body .card-catalog-featured-title {
    font-size: clamp(15px, 1.28vw, 20px) !important;
  }
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-catalog-preset-mythic-art-layer > .card-catalog-preset-image,
html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-art-parallax-x, 0px), var(--mythic-art-parallax-y, 0px), 0) scale(1.01) !important;
  transform-origin: 50% 50% !important;
  transition: transform 30ms linear !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-layer {
  transform-style: flat !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: mythicPanoramaFloatV16Inspector 5.7s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-image,
html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
.card-mythic-panorama-sweep-image {
  transform: none !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

@media (min-width: 1501px) {
  html body .card-catalog-featured-title {
    font-size: 25px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body .card-catalog-featured-title {
    font-size: clamp(16px, 1.36vw, 21px) !important;
  }
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
img.card-mythic-rarity-seal.card-inspector-unified-seal.is-catalog {
  transform: scale(.80) !important;
  transform-origin: top right !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  color: #fff2b2 !important;
  -webkit-text-fill-color: #fff2b2 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.98),
    1px 0 1px rgba(4,7,4,.86),
    -1px 0 1px rgba(4,7,4,.86),
    0 -1px 1px rgba(4,7,4,.74),
    0 0 4px rgba(255,255,239,.78),
    0 0 8px rgba(250,230,134,.55),
    0 0 13px rgba(117,243,206,.18) !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  color: #FAE686 !important;
  -webkit-text-fill-color: #FAE686 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.96),
    1px 0 1px rgba(4,7,4,.82),
    -1px 0 1px rgba(4,7,4,.82),
    0 -1px 1px rgba(4,7,4,.70),
    0 0 3px rgba(255,253,222,.72),
    0 0 7px rgba(250,230,134,.48),
    0 0 11px rgba(117,243,206,.16) !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.90),
    0 0 4px rgba(255,255,255,.90),
    0 0 9px rgba(250,230,134,.75),
    0 0 14px rgba(117,243,206,.30) !important;
}

html body .card-catalog-featured-card-wrap > .mythic-card-vortex.is-featured-external {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  contain: none !important;
  isolation: isolate !important;
  transform: none !important;
  z-index: 5 !important;
  font-size: 14px !important;
}

html body .card-catalog-featured-card-wrap > .mythic-card-diagonal-orbit.is-featured-diagonal {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  contain: none !important;
  isolation: isolate !important;
  font-size: 13px !important;
  transform: rotateZ(-29deg) scaleY(.72) !important;
}
html body .card-catalog-featured-card-wrap > .mythic-card-diagonal-orbit.is-featured-diagonal.is-back {
  z-index: 1 !important;
}
html body .card-catalog-featured-card-wrap > .mythic-card-diagonal-orbit.is-featured-diagonal.is-front {
  z-index: 8 !important;
}

html body .card-catalog-featured-card-wrap > .mythic-card-sparkles.is-featured-external-stars {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 9 !important;
  font-size: 14px !important;
}

html body .card-catalog-featured-card-wrap > .card-catalog-preview-interaction {
  z-index: 6 !important;
}

html body .card-catalog-featured-mythic .card-catalog-preset-card.rarity-mythic
img.card-mythic-rarity-seal.card-inspector-unified-seal.is-catalog {
  transform: scale(1.12) !important;
  transform-origin: top right !important;
}

html body .minigame-card-slots.is-coming-soon,
html body .minigame-card-slots.is-coming-soon:hover,
html body .minigame-card-slots.is-coming-soon:focus,
html body .minigame-card-slots.is-coming-soon:focus-visible {
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html body .minigame-card-slots.is-coming-soon::before,
html body .minigame-card-slots.is-coming-soon:hover::before,
html body .minigame-card-slots.is-coming-soon:focus-visible::before {
  opacity: 0 !important;
}

html body .minigame-card-slots.is-coming-soon .minigame-card-background,
html body .minigame-card-slots.is-coming-soon:hover .minigame-card-background,
html body .minigame-card-slots.is-coming-soon:focus-visible .minigame-card-background {
  transform: scale(1.075) !important;
  filter: grayscale(1) saturate(0) brightness(.67) blur(1.15px) !important;
  transition: none !important;
  will-change: auto !important;
}

html body .minigame-card-slots.is-coming-soon .minigame-card-hover-art,
html body .minigame-card-slots.is-coming-soon:hover .minigame-card-hover-art,
html body .minigame-card-slots.is-coming-soon:focus-visible .minigame-card-hover-art {
  z-index: 4 !important;
  opacity: .88 !important;
  transform: translate3d(-2px, 1px, 0) scale(1) !important;
  filter: grayscale(1) saturate(0) brightness(.64) blur(1.15px) !important;
  transition: none !important;
  will-change: auto !important;
}

html body .minigame-card-slots.is-coming-soon .minigame-card-frame,
html body .minigame-card-slots.is-coming-soon:hover .minigame-card-frame,
html body .minigame-card-slots.is-coming-soon:focus-visible .minigame-card-frame {
  z-index: 5 !important;
  transform: none !important;
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.32)) !important;
  transition: none !important;
}

html body .minigame-card-slots.is-coming-soon .minigame-card-selected-label {
  display: none !important;
}

html body .minigame-card-slots.is-coming-soon .minigame-card-coming-soon {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 10px !important;
  color: #ff3c3c !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(25px, 1.95vw, 33px) !important;
  font-weight: 900 !important;
  line-height: .86 !important;
  letter-spacing: .075em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: pre-line !important;
  pointer-events: none !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 4px 8px rgba(0,0,0,.78),
    0 0 5px rgba(255,32,32,.95),
    0 0 11px rgba(255,20,20,.85),
    0 0 22px rgba(220,0,0,.58) !important;
}

@media (max-width: 820px) {
  html body .minigame-card-slots.is-coming-soon .minigame-card-coming-soon {
    font-size: clamp(23px, 7.4vw, 31px) !important;
  }
}

.open-stage .card-pack-skip-options {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  margin: -2px auto 18px !important;
  transform: none !important;
  translate: none !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}
.open-stage .card-pack-skip-options > .skip-to-roulette-option {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}
.open-stage .card-pack-skip-options > .skip-to-roulette-option:hover {
  transform: translateY(-1px) !important;
}
@media (max-width: 900px) {
  .open-stage .card-pack-skip-options { gap: 9px !important; }
}
@media (max-width: 680px) {
  .open-stage .card-pack-skip-options {
    gap: 6px !important;
    width: min(96vw, 430px) !important;
    margin: 0 auto 16px !important;
  }
  .open-stage .card-pack-skip-options > .skip-to-roulette-option {
    min-width: 0 !important;
    padding: 6px 9px 6px 7px !important;
    font-size: 10.5px !important;
    gap: 6px !important;
  }
  .open-stage .card-pack-skip-options > .skip-to-roulette-option .skip-checkbox {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }
}

html body .view-upgrade .upgrade-attempt-button > .upgrade-attempt-hold-label {
  position: absolute !important;
  left: 50% !important;
  bottom: 3px !important;
  z-index: 7 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  color: currentColor !important;
  opacity: .82 !important;
  font: inherit !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
@media (max-width: 680px) {
  html body .view-upgrade .upgrade-attempt-button > .upgrade-attempt-hold-label {
    bottom: 2px !important;
    font-size: 7.5px !important;
  }
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.view-shop .venues-heading .coffer-section-icon.venues-section-icon {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(106, 218, 170, .55) !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(205, 255, 225, .18), transparent 35%),
    linear-gradient(145deg, rgba(20, 78, 55, .82), rgba(7, 35, 25, .92)) !important;
  color: #8ce0b5 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 18px rgba(0,0,0,.18),
    0 0 0 3px rgba(74, 170, 126, .08),
    0 0 18px rgba(76, 190, 135, .20) !important;
}
.view-shop .venues-heading .coffer-section-icon.venues-section-icon > i {
  display: block !important;
  font-style: normal !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px currentColor !important;
}

.view-shop .coffer-section-pair-card-venue {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}
.view-shop .coffer-section-pair-card-venue > .coffer-section-block {
  min-width: 0 !important;
  padding-inline: 0 !important;
}
.view-shop .coffer-section-pair-card-venue > .coffer-section-block .grid {
  width: 100% !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  .view-shop .coffer-section-pair-card-venue {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .view-shop .coffer-section-pair-card-venue > .coffer-section-block {
    width: 100% !important;
  }
  .view-shop .coffer-section-pair-card-venue > .coffer-section-block .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px) {
  .view-shop .coffer-section-pair-card-venue > .coffer-section-block .grid {
    grid-template-columns: 1fr !important;
  }
}

html body .main-layout > .history-column > .history-panel.history-panel-dynamic:not([data-history-mode="minigame"]) > .history-list {
  min-height: 1103px !important;
  overflow-y: auto !important;
}

.view-shop .coffer-section-pair-card-venue {
  grid-auto-flow: column !important;
  justify-content: stretch !important;
}

.view-shop .coffer-section-block .grid::after {
  content: none !important;
  display: none !important;
}
.view-shop .coffer-section-pair-card-venue > .coffer-section-venues > .grid::before {
  content: none !important;
  display: none !important;
}

.view-shop .coffer-section-pair-card-venue > .coffer-section-venues {
  margin-top: 0 !important;
}
.view-shop .coffer-section-pair-card-venue > .coffer-section-venues > .grid {
  transform: none !important;
}

.view-shop .box-card.buy-style-default-layout > .box-body > .card-actions {
  margin-top: 26px !important;
}

.view-shop .box-card.buy-style-default-layout .purchase-action-pair > button.btn.primary.box-buy-button {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 700px) {
  .view-shop .box-card.buy-style-default-layout .purchase-action-pair > button.btn.primary.box-buy-button {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.history-launch-row .reviews-launch-button {
  position: relative;
  overflow: hidden;
}
.reviews-launch-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.reviews-launch-star {
  font-style: normal;
  color: #f6d36c;
  text-shadow: 0 0 10px rgba(255, 219, 119, .44), 0 0 18px rgba(255, 235, 168, .28);
  animation: reviewsLaunchSpark 2.4s ease-in-out infinite;
}
.reviews-launch-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0%, rgba(255, 239, 189, .04) 34%, rgba(255, 244, 206, .28) 50%, rgba(255, 239, 189, .05) 66%, transparent 100%);
  transform: translateX(-140%);
  transition: transform .72s ease;
  pointer-events: none;
}
.reviews-launch-button:hover::after,
.reviews-launch-button:focus-visible::after {
  transform: translateX(140%);
}
@keyframes reviewsLaunchSpark {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15) rotate(10deg);
    filter: brightness(1.18);
  }
}

.reviews-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 8, 6, .80);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: hideoutReviewsBackdropIn .78s cubic-bezier(.22,.72,.22,1) both;
}
.reviews-panel {
  position: relative;
  width: min(95vw, 1360px);
  aspect-ratio: 1400 / 1024;
  max-height: calc(100vh - 30px);
  background: var(--bryer-css-v60-reviewbg, url('/images/reviewbg.png')) center / 100% 100% no-repeat;
  color: #f6e8b0;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .42));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: hideoutReviewsPanelIn .82s cubic-bezier(.18,.78,.20,1) both;
}
.reviews-panel-inner {
  position: absolute;
  inset: 19% 8.4% 7.2% 8.3%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4.25%;
}
.reviews-close-button {
  position: absolute;
  top: 3.2%;
  right: 3.2%;
  width: min(5.8vw, 78px);
  min-width: 58px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .22s ease, filter .22s ease;
}
.reviews-close-button:hover,
.reviews-close-button:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.08);
}
.reviews-close-button img,
.reviews-submit-button img,
.review-avatar-choice img,
.review-slot-avatar {
  display: block;
  width: 100%;
  height: auto;
}
.reviews-gallery {
  min-height: 0;
}
.reviews-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 18px;
  align-content: start;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}
.reviews-gallery-grid::-webkit-scrollbar {
  width: 9px;
}
.reviews-gallery-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(214, 183, 91, .42);
}
.review-slot-card {
  min-height: 0;
  aspect-ratio: 1 / 1.03;
  background: var(--bryer-css-v60-reviewslots, url('/images/reviewslots.png')) center / 100% 100% no-repeat;
  padding: 7% 10% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.review-slot-avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46%;
  min-height: 34%;
  margin-top: 1%;
}
.review-slot-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 4%;
  color: rgba(188, 189, 155, .52);
  font-size: clamp(20px, 1.7vw, 28px);
  letter-spacing: .04em;
}
.review-slot-stars .is-active {
  color: #ffcb45;
  text-shadow: 0 0 8px rgba(255, 218, 86, .46), 0 0 18px rgba(255, 198, 69, .26);
}
.review-slot-copy {
  margin: 6% 0 0;
  color: #f7efd1;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.18;
  text-wrap: balance;
}
.reviews-compose {
  display: grid;
  grid-template-columns: minmax(240px, .92fr) minmax(0, 1.18fr) minmax(210px, .58fr);
  gap: 24px;
  align-items: end;
}
.reviews-avatar-picker-block {
  align-self: stretch;
}
.reviews-compose-eyebrow,
.reviews-compose-heading {
  margin: 0 0 10px;
  color: #f7ebbd;
  font-weight: 700;
  font-size: clamp(17px, 1.25vw, 24px);
  text-shadow: 0 1px 0 rgba(31, 20, 4, .65);
}
.reviews-avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.review-avatar-choice {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.review-avatar-choice:hover,
.review-avatar-choice:focus-visible,
.review-avatar-choice.is-selected {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 0 12px rgba(255, 227, 122, .34));
}
.reviews-compose-main {
  display: grid;
  gap: 12px;
}
.reviews-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.reviews-interactive-stars {
  display: inline-flex;
  gap: 6px;
}
.reviews-interactive-stars button {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: clamp(28px, 2vw, 36px);
  line-height: 1;
  color: rgba(189, 192, 164, .5);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, text-shadow .18s ease;
}
.reviews-interactive-stars button:hover,
.reviews-interactive-stars button:focus-visible,
.reviews-interactive-stars button.is-active {
  color: #ffcb45;
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(255, 219, 95, .42), 0 0 18px rgba(255, 196, 58, .26);
}
.reviews-textarea-shell {
  position: relative;
  min-height: 122px;
  padding: 20px 18px 34px;
  background: var(--bryer-css-v60-writereview, url('/images/writereview.png')) center / 100% 100% no-repeat;
}
.reviews-textarea-shell textarea {
  width: 100%;
  min-height: 68px;
  border: 0;
  background: transparent;
  color: #f7f0d0;
  font: inherit;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.35;
  resize: none;
  outline: none;
}
.reviews-textarea-shell textarea::placeholder {
  color: rgba(243, 235, 207, .56);
}
.reviews-character-count {
  position: absolute;
  right: 16px;
  bottom: 12px;
  color: rgba(243, 235, 207, .72);
  font-size: 15px;
}
.reviews-submit-button {
  align-self: end;
  width: 100%;
  max-width: 274px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  justify-self: end;
  transition: transform .18s ease, filter .18s ease;
}
.reviews-submit-button:hover,
.reviews-submit-button:focus-visible {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.06);
}
@media (max-width: 1200px) {
  .reviews-panel-inner {
    inset: 18.5% 7.4% 6.6% 7.3%;
  }
  .reviews-compose {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .reviews-submit-button {
    justify-self: start;
    max-width: 280px;
  }
}
@media (max-width: 920px) {
  .reviews-panel {
    width: min(98vw, 820px);
    max-height: 96vh;
    aspect-ratio: auto;
    min-height: 92vh;
    background-size: 100% 100%;
  }
  .reviews-panel-inner {
    inset: 16% 6.2% 5.2% 6.2%;
    gap: 14px;
  }
  .reviews-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reviews-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .reviews-rating-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .reviews-close-button {
    top: 2.4%;
    right: 2.8%;
  }
}
@media (max-width: 640px) {
  .reviews-overlay {
    padding: 8px;
  }
  .reviews-panel {
    width: 100%;
    min-height: 96vh;
  }
  .reviews-panel-inner {
    inset: 13.5% 4.6% 4.6% 4.6%;
  }
  .reviews-gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .review-slot-card {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .reviews-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .reviews-submit-button {
    max-width: 240px;
  }
}

.history-launch-row .reviews-launch-button {
  margin-top: -2px;
}
.reviews-launch-copy {
  gap: 8px;
}
.reviews-launch-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.34em;
  height: 1.34em;
  border-radius: 999px;
  font-style: normal;
  font-size: .96em;
  color: #dff6de;
  background:
    radial-gradient(circle at 50% 48%, rgba(177, 255, 212, .32) 0%, rgba(101, 184, 150, .18) 40%, rgba(18, 52, 40, .22) 72%, rgba(8, 16, 12, 0) 100%),
    linear-gradient(180deg, rgba(34, 74, 56, .95), rgba(13, 33, 24, .96));
  border: 1px solid rgba(148, 211, 170, .34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 176, .1),
    0 0 0 1px rgba(0, 0, 0, .18),
    0 0 14px rgba(121, 214, 166, .22);
  text-shadow: 0 0 8px rgba(217, 255, 228, .38);
  animation: reviewsLaunchSpark 2.4s ease-in-out infinite;
}
.reviews-overlay {
  overscroll-behavior: contain;
}
.reviews-panel {
  width: min(95vw, 1320px);
}
.reviews-panel-inner {
  inset: 19.1% 8.55% 7.45% 8.45%;
  grid-template-rows: minmax(0, .9fr) auto;
  gap: 3.2%;
}
.reviews-close-button {
  top: 4.1%;
  right: 4.35%;
  width: min(5.3vw, 72px);
}
.reviews-gallery {
  min-height: 0;
  display: flex;
  justify-content: center;
}
.reviews-gallery-grid {
  width: min(100%, 1040px);
  gap: 14px 16px;
  max-height: 100%;
  padding-right: 6px;
  margin: 0 auto;
}
.review-slot-card {
  aspect-ratio: 1 / 0.86;
  padding: 7% 10% 7.5%;
}
.review-slot-card.is-empty .review-slot-avatar-wrap {
  min-height: 30%;
}
.review-slot-card.is-empty .review-slot-stars {
  opacity: .16;
}
.review-slot-card.is-empty .review-slot-copy {
  opacity: 0;
}
.review-slot-avatar-wrap {
  width: 40%;
  min-height: 29%;
  margin-top: .5%;
}
.review-slot-stars {
  gap: 1px;
  margin-top: 3%;
  font-size: clamp(17px, 1.42vw, 24px);
}
.review-slot-copy {
  margin-top: 5.5%;
  font-size: clamp(12px, .98vw, 15px);
}
.reviews-compose {
  grid-template-columns: minmax(180px, .68fr) minmax(0, 1.02fr) minmax(200px, .54fr);
  gap: 18px;
}
.reviews-avatar-picker-block {
  align-self: end;
  width: min(100%, 320px);
  margin-left: 24px;
}
.reviews-compose-eyebrow,
.reviews-compose-heading {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: clamp(13px, 1vw, 18px);
  text-shadow: 0 1px 0 rgba(31, 20, 4, .52);
}
.reviews-avatar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 260px;
}
.review-avatar-choice img {
  width: 92%;
  margin: 0 auto;
}
.reviews-compose-main {
  gap: 10px;
  align-self: end;
}
.reviews-rating-row {
  justify-content: flex-start;
  gap: 16px;
}
.reviews-interactive-stars {
  gap: 4px;
}
.reviews-interactive-stars button {
  font-size: clamp(22px, 1.55vw, 30px);
}
.reviews-textarea-shell {
  min-height: 92px;
  max-width: 470px;
  padding: 16px 16px 28px;
}
.reviews-textarea-shell textarea {
  min-height: 46px;
  font-size: clamp(13px, .92vw, 16px);
}
.reviews-character-count {
  right: 14px;
  bottom: 10px;
  font-size: 13px;
}
.reviews-submit-button {
  max-width: 250px;
}
@media (max-width: 1200px) {
  .reviews-panel-inner {
    inset: 18.5% 7.5% 6.8% 7.4%;
  }
  .reviews-avatar-picker-block {
    margin-left: 0;
    width: min(100%, 300px);
  }
}
@media (max-width: 920px) {
  .reviews-close-button {
    top: 3.4%;
    right: 4%;
  }
  .reviews-gallery-grid {
    width: 100%;
  }
  .reviews-avatar-grid {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .reviews-compose {
    gap: 14px;
  }
  .reviews-avatar-picker-block {
    width: 100%;
  }
  .reviews-textarea-shell {
    max-width: none;
  }
}

.reviews-launch-row-wrap {
  margin-top: -14px !important;
  margin-bottom: -12px !important;
}
.history-launch-row .reviews-launch-button {
  margin-top: 0 !important;
}
.reviews-launch-copy {
  gap: 7px;
}
.reviews-launch-star {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: .94em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}
.reviews-panel {
  width: min(95vw, 1290px);
}
.reviews-panel-inner {
  inset: 19.45% 8.8% 7.5% 8.75%;
  gap: 2.6%;
}
.reviews-close-button {
  top: 5.35%;
  right: 5.55%;
  width: min(4.85vw, 66px);
}
.reviews-gallery-grid {
  width: min(100%, 980px);
  gap: 12px 14px;
}
.review-slot-card {
  aspect-ratio: 1 / 0.78;
  padding: 6% 9% 6.5%;
}
.review-slot-card.is-empty .review-slot-stars,
.review-slot-card.is-empty .review-slot-copy,
.review-slot-card.is-empty .review-slot-avatar-wrap {
  opacity: 0 !important;
}
.review-slot-avatar-wrap {
  width: 36%;
  min-height: 24%;
}
.review-slot-stars {
  margin-top: 2.2%;
  font-size: clamp(15px, 1.16vw, 20px);
}
.review-slot-copy {
  margin-top: 4.2%;
  font-size: clamp(11px, .88vw, 13px);
}
.reviews-compose {
  grid-template-columns: minmax(164px, .62fr) minmax(0, .84fr) minmax(188px, .5fr);
  gap: 16px;
}
.reviews-avatar-picker-block {
  width: min(100%, 280px);
  margin-left: 42px;
  transform: translateY(-12px);
}
.reviews-compose-eyebrow,
.reviews-compose-heading {
  margin: 0 0 6px;
  font-weight: 400;
  font-size: clamp(11px, .84vw, 15px);
}
.reviews-avatar-grid {
  max-width: 232px;
  gap: 7px;
}
.review-avatar-choice img {
  width: 88%;
}
.reviews-rating-row {
  gap: 12px;
}
.reviews-interactive-stars {
  gap: 3px;
}
.reviews-interactive-stars button {
  font-size: clamp(18px, 1.28vw, 24px);
}
.reviews-textarea-shell {
  min-height: 74px;
  max-width: 360px;
  padding: 13px 14px 24px;
}
.reviews-textarea-shell textarea {
  min-height: 34px;
  font-size: clamp(12px, .84vw, 14px);
}
.reviews-character-count {
  font-size: 12px;
}
.reviews-submit-button {
  max-width: 234px;
}
@media (max-width: 1200px) {
  .reviews-avatar-picker-block {
    margin-left: 18px;
    transform: translateY(-6px);
  }
  .reviews-textarea-shell {
    max-width: 420px;
  }
}
@media (max-width: 920px) {
  .reviews-launch-row-wrap {
    margin-top: -8px !important;
    margin-bottom: -6px !important;
  }
  .reviews-close-button {
    top: 4.3%;
    right: 4.6%;
  }
  .reviews-gallery-grid {
    width: 100%;
  }
  .reviews-avatar-picker-block {
    margin-left: 0;
    transform: none;
  }
  .reviews-textarea-shell {
    max-width: none;
  }
}

.reviews-launch-row-wrap {
  margin-top: -12px !important;
  margin-bottom: -26px !important;
}
.reviews-launch-copy {
  gap: 6px;
}
.reviews-launch-star,
.reviews-launch-star-cluster {
  color: inherit;
}
.reviews-launch-star-cluster {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 14px;
  flex: 0 0 18px;
}
.reviews-launch-star-cluster .cluster-star {
  position: absolute;
  display: block;
  line-height: 1;
  color: currentColor;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.reviews-launch-star-cluster .cluster-star-main {
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: 9px;
}
.reviews-launch-star-cluster .cluster-star-left {
  left: 1px;
  top: 7px;
  transform: translateY(-50%);
  font-size: 6px;
  opacity: .95;
}
.reviews-launch-star-cluster .cluster-star-right {
  right: 0;
  top: 2px;
  font-size: 5px;
  opacity: .9;
}
.reviews-panel-inner {
  inset: 19.6% 8.95% 7.45% 8.9%;
  gap: 2.8%;
}
.reviews-close-button {
  top: 7.2%;
  right: 8.2%;
  width: min(4.65vw, 62px);
}
.reviews-gallery-grid {
  width: min(100%, 930px);
  gap: 18px 14px;
}
.review-slot-card {
  aspect-ratio: 1 / 0.72;
  padding: 5.6% 8.5% 6%;
}
.reviews-compose {
  grid-template-columns: minmax(188px, .7fr) minmax(0, .82fr) minmax(170px, .42fr);
  gap: 12px;
}
.reviews-avatar-picker-block {
  width: min(100%, 312px);
  margin-left: 64px;
  transform: translateY(-20px);
}
.reviews-avatar-grid {
  max-width: 256px;
  gap: 8px;
}
.review-avatar-choice img {
  width: 94%;
}
.reviews-compose-main {
  gap: 8px;
  align-self: end;
  transform: translateY(-14px);
}
.reviews-compose-eyebrow,
.reviews-compose-heading {
  margin: 0 0 5px;
  font-size: clamp(11px, .8vw, 14px);
}
.reviews-rating-row {
  gap: 10px;
}
.reviews-interactive-stars button {
  font-size: clamp(17px, 1.16vw, 22px);
}
.reviews-textarea-shell {
  min-height: 66px;
  max-width: 324px;
  padding: 11px 13px 22px;
}
.reviews-textarea-shell textarea {
  min-height: 28px;
  font-size: clamp(11px, .78vw, 13px);
}
.reviews-submit-button {
  max-width: 214px;
  justify-self: start;
  margin-left: -10px;
  transform: translateY(-10px);
}
.reviews-submit-button:hover,
.reviews-submit-button:focus-visible {
  transform: translateY(-12px) scale(1.01);
}
@media (max-width: 1200px) {
  .reviews-avatar-picker-block {
    margin-left: 26px;
    transform: translateY(-10px);
  }
  .reviews-compose-main {
    transform: translateY(-8px);
  }
  .reviews-submit-button {
    margin-left: 0;
    transform: translateY(-6px);
  }
}
@media (max-width: 920px) {
  .reviews-launch-row-wrap {
    margin-top: -6px !important;
    margin-bottom: -10px !important;
  }
  .reviews-close-button {
    top: 5.4%;
    right: 6.2%;
  }
  .reviews-gallery-grid {
    width: 100%;
  }
  .reviews-avatar-picker-block {
    width: min(100%, 330px);
    margin-left: 0;
    transform: none;
  }
  .reviews-compose-main,
  .reviews-submit-button {
    transform: none;
  }
  .reviews-submit-button {
    justify-self: start;
    margin-left: 0;
  }
}

.reviews-launch-row-wrap {
  margin-top: -10px !important;
  margin-bottom: 0 !important;
}
.reviews-launch-row-wrap + .history-launch-row {
  margin-top: -16px !important;
}
.reviews-launch-copy {
  gap: 7px;
}
.reviews-launch-star-cluster {
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
}
.reviews-launch-star-cluster .cluster-star-main {
  font-size: 11px;
  top: 52%;
}
.reviews-launch-star-cluster .cluster-star-left {
  left: 0;
  top: 10px;
  font-size: 8px;
}
.reviews-launch-star-cluster .cluster-star-right {
  right: 0;
  top: 1px;
  font-size: 7px;
}

.reviews-close-button {
  top: 10.2%;
  right: 13.1%;
  width: min(4.5vw, 60px);
}
.reviews-gallery-grid {
  width: min(100%, 900px);
  column-gap: 14px;
  row-gap: 26px;
}
.review-slot-card {
  height: clamp(138px, 12vw, 158px);
  aspect-ratio: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}
.review-slot-avatar-wrap,
.review-slot-stars,
.review-slot-copy {
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.reviews-avatar-picker-block {
  width: min(100%, 334px);
  margin-left: 82px;
  transform: translateY(-14px);
}
.reviews-avatar-grid {
  max-width: 275px;
  gap: 8px;
}
.review-avatar-choice img {
  width: 100%;
}
.reviews-compose-main {
  gap: 9px;
  transform: translateY(-18px);
}
.reviews-compose-eyebrow,
.reviews-compose-heading {
  margin: 0 0 6px;
  font-size: clamp(12px, .94vw, 16px);
}
.reviews-rating-row {
  gap: 12px;
}
.reviews-interactive-stars {
  gap: 4px;
}
.reviews-interactive-stars button {
  position: relative;
  font-size: clamp(20px, 1.34vw, 25px);
  color: #a5ae8d;
  text-shadow:
    0 1px 0 rgba(60, 45, 10, .9),
    0 0 3px rgba(0, 0, 0, .22);
  filter: drop-shadow(0 1px 0 rgba(72, 48, 12, .45));
}
.reviews-interactive-stars button::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 52%;
  width: 18%;
  height: 18%;
  border-radius: 999px;
  background: rgba(255, 251, 230, .8);
  box-shadow: 0 0 5px rgba(255, 250, 226, .34);
  opacity: .55;
  pointer-events: none;
}
.reviews-interactive-stars button:hover,
.reviews-interactive-stars button:focus-visible,
.reviews-interactive-stars button.is-active {
  color: #ffcb45;
  text-shadow:
    0 1px 0 rgba(113, 73, 10, .95),
    0 0 9px rgba(255, 220, 112, .30),
    0 0 18px rgba(255, 190, 69, .16);
}
.reviews-textarea-shell {
  min-height: 72px;
  max-width: 340px;
  padding: 11px 13px 22px;
  background-color: rgba(0, 0, 0, .26);
  background-blend-mode: multiply;
}
.reviews-textarea-shell textarea {
  min-height: 34px;
  font-size: clamp(12px, .88vw, 14px);
}
.reviews-submit-button {
  max-width: 214px;
  justify-self: start;
  margin-left: -58px;
  transform: translateY(-6px);
}
.reviews-submit-button:hover,
.reviews-submit-button:focus-visible {
  transform: translateY(-8px) scale(1.01);
}

@media (max-width: 1200px) {
  .reviews-avatar-picker-block {
    margin-left: 34px;
  }
  .reviews-submit-button {
    margin-left: -28px;
  }
}
@media (max-width: 920px) {
  .reviews-launch-row-wrap + .history-launch-row {
    margin-top: -8px !important;
  }
  .reviews-close-button {
    top: 7.2%;
    right: 9.2%;
  }
  .reviews-avatar-picker-block {
    margin-left: 0;
    transform: none;
  }
  .reviews-compose-main {
    transform: none;
  }
  .reviews-submit-button {
    margin-left: 0;
    transform: none;
  }
}

.reviews-launch-row-wrap {
  margin-top: -8px !important;
  margin-bottom: 0 !important;
}
.reviews-launch-row-wrap + .history-launch-row {
  margin-top: -8px !important;
}
.reviews-launch-star-cluster {
  width: 30px;
  height: 20px;
  flex: 0 0 30px;
}
.reviews-launch-star-cluster .cluster-star {
  color: currentColor;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 0 2px rgba(255,255,255,.04);
}
.reviews-launch-star-cluster .cluster-star-main {
  font-size: 14px;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
}
.reviews-launch-star-cluster .cluster-star-left {
  left: 0;
  top: 12px;
  font-size: 9px;
}
.reviews-launch-star-cluster .cluster-star-right {
  right: 0;
  top: 1px;
  font-size: 8px;
}

.reviews-close-button {
  top: 8.9%;
  right: 11.6%;
  width: min(5vw, 70px);
}
.reviews-gallery {
  padding-top: 10px;
}
.reviews-gallery-grid {
  width: min(100%, 920px);
  column-gap: 14px;
  row-gap: 34px;
}
.review-slot-card {
  height: clamp(148px, 12.7vw, 166px);
}
.reviews-compose-main {
  transform: translateY(6px);
}
.reviews-compose-eyebrow,
.reviews-compose-heading {
  font-size: clamp(12px, .98vw, 16px);
}
.reviews-rating-row {
  gap: 12px;
}
.reviews-interactive-stars button {
  font-size: clamp(21px, 1.42vw, 26px);
  color: #a9b18c;
  -webkit-text-stroke: 0.8px rgba(83, 64, 19, .62);
  text-shadow:
    0 1px 0 rgba(59, 44, 12, .95),
    0 2px 3px rgba(0, 0, 0, .16);
  filter: drop-shadow(0 1px 0 rgba(81, 58, 14, .42));
}
.reviews-interactive-stars button::after {
  content: none !important;
  display: none !important;
}
.reviews-interactive-stars button:hover,
.reviews-interactive-stars button:focus-visible,
.reviews-interactive-stars button.is-active {
  color: #ffcb45;
  -webkit-text-stroke: 0.8px rgba(124, 79, 14, .8);
  text-shadow:
    0 1px 0 rgba(113, 73, 10, .98),
    0 0 8px rgba(255, 220, 112, .26),
    0 0 14px rgba(255, 192, 69, .14);
}
.reviews-textarea-shell {
  min-height: 76px;
  max-width: 350px;
  background-color: transparent;
}
.reviews-submit-button {
  margin-left: -96px;
  transform: translateY(-16px);
}
.reviews-submit-button:hover,
.reviews-submit-button:focus-visible {
  transform: translateY(-18px) scale(1.01);
}

@media (max-width: 1200px) {
  .reviews-submit-button {
    margin-left: -40px;
  }
}
@media (max-width: 920px) {
  .reviews-close-button {
    top: 6.6%;
    right: 8.4%;
  }
  .reviews-gallery {
    padding-top: 4px;
  }
  .reviews-gallery-grid {
    row-gap: 18px;
  }
  .reviews-compose-main {
    transform: none;
  }
  .reviews-submit-button {
    margin-left: 0;
    transform: translateY(-4px);
  }
}

.reviews-launch-star-cluster {
  width: 36px;
  height: 22px;
  flex: 0 0 36px;
  position: relative;
}
.reviews-launch-star-cluster .cluster-star {
  position: absolute;
  display: block;
  color: currentColor;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .32),
    0 0 1px rgba(255,255,255,.06);
}
.reviews-launch-star-cluster .cluster-star-main {
  left: 14px;
  top: 8px;
  font-size: 14px;
}
.reviews-launch-star-cluster .cluster-star-left {
  left: 3px;
  top: 11px;
  font-size: 9px;
}
.reviews-launch-star-cluster .cluster-star-right {
  left: 25px;
  top: 10px;
  font-size: 8px;
}
.reviews-launch-star-cluster .cluster-star-top {
  left: 20px;
  top: 1px;
  font-size: 7px;
}

.reviews-gallery-grid {
  width: min(100%, 944px);
  column-gap: 10px;
  row-gap: 34px;
}
.review-slot-card {
  height: clamp(156px, 13.3vw, 174px);
}
.reviews-compose-main {
  transform: translateY(-10px);
}
.reviews-submit-button {
  margin-left: -96px;
  transform: translateY(-16px);
}
.reviews-submit-button:hover,
.reviews-submit-button:focus-visible {
  transform: translateY(-18px) scale(1.01);
}
@media (max-width: 920px) {
  .reviews-compose-main {
    transform: none;
  }
}

.reviews-launch-row-wrap {
  margin-top: -8px !important;
  margin-bottom: -10px !important;
}
.reviews-launch-row-wrap + .history-launch-row {
  margin-top: -28px !important;
}
.reviews-launch-star-cluster {
  width: 34px;
  height: 18px;
  flex: 0 0 34px;
}
.reviews-launch-star-cluster .cluster-star {
  position: absolute;
  display: block;
  color: currentColor;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.32), 0 0 1px rgba(255,255,255,.04);
}
.reviews-launch-star-cluster .cluster-star-main {
  left: 12px;
  top: 4px;
  font-size: 13px;
}
.reviews-launch-star-cluster .cluster-star-left {
  left: 2px;
  top: 8px;
  font-size: 9px;
}
.reviews-launch-star-cluster .cluster-star-right {
  left: 23px;
  top: 6px;
  font-size: 9px;
}
.reviews-launch-star-cluster .cluster-star-bottom {
  left: 15px;
  top: 12px;
  font-size: 8px;
}
.history-launch-buttons .kofi-launch-button:hover,
.history-launch-buttons .kofi-launch-button:focus-visible {
  transform: translateY(-2px) scale(1.006) !important;
  color: var(--gold-soft) !important;
  border-color: rgba(232, 199, 112, .32) !important;
  background: rgba(22, 34, 24, .94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 10px 21px rgba(0,0,0,.16),
    0 0 10px rgba(214,180,95,.08) !important;
}
.history-launch-buttons .kofi-launch-button:hover::before,
.history-launch-buttons .kofi-launch-button:focus-visible::before,
.history-launch-buttons .kofi-launch-button:hover::after,
.history-launch-buttons .kofi-launch-button:focus-visible::after {
  display: none !important;
  content: none !important;
}
.history-launch-buttons .kofi-launch-button:hover > span:first-child,
.history-launch-buttons .kofi-launch-button:focus-visible > span:first-child,
.history-launch-buttons .kofi-launch-button:hover > b,
.history-launch-buttons .kofi-launch-button:focus-visible > b {
  color: inherit !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45) !important;
  letter-spacing: inherit !important;
  transform: none !important;
}

.reviews-close-button {
  width: min(5.35vw, 76px);
}
.reviews-gallery-grid {
  width: min(100%, 970px);
  column-gap: 6px;
  row-gap: 34px;
}
.review-slot-card {
  height: clamp(164px, 13.8vw, 182px);
}
.reviews-avatar-picker-block .reviews-compose-eyebrow {
  font-size: clamp(13px, 1.02vw, 17px);
}
.review-avatar-choice.is-selected {
  transform: none !important;
  filter: none !important;
}
.review-avatar-choice.is-selected img {
  border-radius: 8px;
  outline: 2px solid rgba(250, 211, 115, .98);
  outline-offset: 2px;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255, 212, 95, .70))
          drop-shadow(0 0 11px rgba(255, 208, 101, .46));
}
.reviews-compose-main {
  margin-left: 12px;
  transform: translateY(-14px);
}
.reviews-rating-row {
  justify-content: flex-start;
  gap: 14px;
}
.reviews-interactive-stars {
  align-items: center;
  transform: none;
}
.reviews-rating-row .reviews-compose-heading {
  margin-bottom: 0;
  line-height: 1.2;
}
.reviews-rating-row .reviews-interactive-stars button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0;
  line-height: 1;
}
.reviews-textarea-shell {
  border-radius: 0;
  overflow: visible;
  background-color: transparent;
  background-blend-mode: normal;
}
.reviews-textarea-shell::before {
  content: "";
  position: absolute;
  inset: 2px 2px 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .34);
  pointer-events: none;
  z-index: 0;
}
.reviews-textarea-shell textarea {
  position: relative;
  z-index: 1;
}
.reviews-textarea-shell .reviews-character-count {
  z-index: 1;
}
.reviews-submit-button {
  max-width: 198px;
  margin-left: -74px;
  transform: translateY(-16px);
}
.reviews-submit-button:hover,
.reviews-submit-button:focus-visible {
  transform: translateY(-18px) scale(1.01);
}
@media (max-width: 1200px) {
  .reviews-submit-button {
    margin-left: -28px;
  }
}
@media (max-width: 920px) {
  .reviews-launch-row-wrap + .history-launch-row {
    margin-top: -12px !important;
  }
  .reviews-compose-main {
    margin-left: 0;
    transform: none;
  }
  .reviews-submit-button {
    margin-left: 0;
  }
}

@media (min-width: 921px) {
  .reviews-panel-inner > .reviews-gallery {
    position: absolute !important;
    top: -2.3% !important;
    left: 2.12% !important;
    right: 2.12% !important;
    height: calc(63% + 32px) !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .reviews-panel-inner > .reviews-compose {
    grid-row: 2;
  }
}
.reviews-gallery-grid {
  display: grid !important;
  box-sizing: border-box;
  width: min(100%, 848px) !important;
  margin-inline: auto !important;
  padding: 0 3px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px 8px !important;
  align-content: start;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
 .reviews-gallery-grid.is-placeholder-only {
  overflow-y: hidden !important;
}
.reviews-gallery-grid::-webkit-scrollbar { width: 6px; }
.reviews-gallery-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(214, 183, 91, .42);
}
.review-slot-card {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / .985 !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 6% 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bryer-css-v60-reviewslots, url('/images/reviewslots.png')) center / contain no-repeat !important;
}
.review-slot-card.is-empty { padding: 0; }
@media (max-width: 920px) {

  .reviews-gallery-grid {
    width: min(100%, 510px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px !important;
  }
}
@media (max-width: 560px) {
  .reviews-gallery-grid { width: min(100%, 330px) !important; }
}

@keyframes hideoutReviewsBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hideoutReviewsPanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.875);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.reviews-overlay.is-closing {
  pointer-events: none;
  animation: hideoutReviewsBackdropOut .62s ease both;
}
.reviews-overlay.is-closing .reviews-panel {
  animation: hideoutReviewsPanelOut .62s cubic-bezier(.32,.02,.2,1) both;
}
@keyframes hideoutReviewsBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes hideoutReviewsPanelOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .42)) blur(0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.84);
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .42)) blur(1.2px);
  }
}

html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button {

  position: relative !important;
  top: -12px !important;
  border-radius:7px 5px 9px 4px / 5px 8px 6px 7px !important;
  clip-path:polygon(0.6% 17%,3.9% 4.2%,19% 0,31.5% 2.5%,47.5% 0.4%,63% 3%,77.5% 1%,96.7% 5.6%,99.6% 14%,97.5% 28%,100% 44.5%,97.8% 69.5%,99.2% 85.5%,95.8% 96.5%,82.4% 100%,61.2% 95.6%,41% 100%,22% 97.5%,6% 100%,1.2% 90%,2.8% 70.5%,0 53%,2% 34%) !important;
  color:#f5ddb0 !important;
  background:
    radial-gradient(ellipse at 11% 43%,rgba(77,38,14,.54) 0 1.5px,transparent 2px),
    radial-gradient(ellipse at 69% 70%,rgba(60,28,10,.52) 0 2px,transparent 2.6px),
    repeating-linear-gradient(1.8deg,rgba(62,29,11,.31) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,216,149,.06) 8px 9px,transparent 9px 14px),
    linear-gradient(92deg,#74411a 0%,#965d2b 17%,#7f491f 34%,#a86a33 52%,#874b20 71%,#9f6230 88%,#6f3d18 100%) !important;
  background-position:32px 0,69% 71%,0 -2px,0 3px,0 0 !important;
  background-size:auto,auto,auto,auto,auto !important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button::before {
  background:
    linear-gradient(96deg,transparent 0 9%,rgba(54,27,9,.20) 9.5% 10%,transparent 10.5% 31%,rgba(255,219,151,.075) 31.5% 32%,transparent 32.5% 57%,rgba(52,25,8,.17) 57.5% 58%,transparent 58.5% 79%,rgba(255,219,151,.05) 79.5% 80%,transparent 80.5%),
    linear-gradient(7deg,transparent 0 66%,rgba(74,35,12,.18) 66.5% 67%,transparent 67.5%),
    repeating-linear-gradient(4deg,transparent 0 6px,rgba(45,21,7,.12) 6px 7px,transparent 7px 11px) !important;
  opacity:.91 !important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button:hover:not(:disabled),
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button:focus-visible {

  background:
    radial-gradient(ellipse at 13% 38%,rgba(64,31,10,.58) 0 1px,transparent 1.8px),
    radial-gradient(ellipse at 78% 68%,rgba(54,27,9,.50) 0 2px,transparent 2px),
    repeating-linear-gradient(1.5deg,rgba(60,29,10,.30) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(177deg,transparent 0 8px,rgba(255,214,145,.055) 8px 9px,transparent 9px 13px),
    linear-gradient(92deg,#714018 0%,#925826 17%,#7b461d 34%,#a0622d 53%,#81491f 72%,#9a5d29 87%,#6d3b17 100%) !important;
  background-size:auto,auto,auto,auto,auto !important;
  background-position:34px 0,70% 72%,0 -2px,0 3px,0 0 !important;
  color:#f5ddb0 !important;
  border-color:rgba(95,54,22,.98) !important;
  filter:brightness(1.08) saturate(1.04) !important;
}
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button:hover:not(:disabled) > .kofi-launch-copy,
html body .history-column > .history-launch-stack > .history-launch-row > .kofi-launch-button:focus-visible > .kofi-launch-copy {
  color:#f5ddb0 !important;
  text-shadow:0 1px 0 rgba(69,35,12,.98),0 2px 2px rgba(30,14,5,.76) !important;
}

.review-quill {
  --quill-color: #F9E4B6;
  --quill-highlight: #FFF2D2;

  position: relative;
  display: inline-block;
  width: 40px;
  height: 30px;
  flex: 0 0 40px;
  vertical-align: middle;
  isolation: isolate;
}

.review-quill__feather {
  position: absolute;
  left: 10px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: linear-gradient(180deg, var(--quill-highlight) 0%, #fbe8bc 38%, var(--quill-color) 100%);
  clip-path: polygon(50% 0%, 61% 31%, 96% 35%, 70% 56%, 78% 91%, 50% 73%, 22% 91%, 30% 56%, 4% 35%, 39% 31%);
  transform: rotate(-2deg);
  filter: drop-shadow(0 1px 0 rgba(255, 243, 210, .34)) drop-shadow(0 2px 2px rgba(120, 67, 24, .16));
}

.review-quill__feather::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: linear-gradient(180deg, rgba(255, 247, 226, .95) 0%, rgba(255, 238, 198, .72) 45%, rgba(255, 220, 150, .18) 100%);
  clip-path: polygon(50% 0%, 61% 31%, 96% 35%, 70% 56%, 78% 91%, 50% 73%, 22% 91%, 30% 56%, 4% 35%, 39% 31%);
  opacity: .9;
}

.review-quill__shaft,
.review-quill__signature,
.review-quill__sparkle,
.review-quill__signature::after,
.review-quill__shaft::before,
.review-quill__signature::before {
  display: none !important;
  content: none !important;
}

.hideout-reviews-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hideout-reviews-button .reviews-launch-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(-12px);
}
.hideout-reviews-button .reviews-launch-copy > span:last-child {
  transform: translateX(-6px);
}
.hideout-reviews-button .review-quill {
  --quill-color: #F9E4B6;
  --quill-highlight: #FFF2D2;
}

.review-slot-card.is-filled {
  overflow: hidden;
  justify-content: flex-start;
  padding: 6% 9% 8%;
}
.review-slot-name {
  display: block;
  width: 100%;
  margin: 4% 0 0;
  color: #f8e4b5;
  font-size: clamp(11px, .90vw, 14px);
  font-weight: 750;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(17,19,9,.95);
}
.review-slot-card.is-filled .review-slot-avatar-wrap {
  width: 38%;
  min-height: 27%;
  height: 27%;
  margin-top: 1%;
}
.review-slot-card.is-filled .review-slot-avatar {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.review-slot-card.is-filled .review-slot-stars {
  margin-top: 1%;
  gap: 0;
  font-size: clamp(13px, 1.13vw, 19px);
  white-space: nowrap;
  line-height: 1;
}
.review-slot-card.is-filled .review-slot-copy {
  margin: 3% 0 0;
  max-width: 100%;
  max-height: 37%;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1.15;
  text-align: center;
  text-wrap: wrap;
  scrollbar-width: thin;
}

.reviews-text-block { position: relative; }
.reviews-submit-button:disabled {
  cursor: not-allowed;
  opacity: .64;
}
.reviews-submit-button:disabled:hover { filter: none; }

.review-slot-card.is-filled {
  padding: 5% 8% 7%;
  overflow: hidden;
  justify-content: flex-start;
  gap: 1%;
}
.review-slot-card.is-filled .review-slot-name {
  flex: 0 0 auto;
  margin: 1% 0 0;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.2;
  font-weight: 800;
}
.review-slot-card.is-filled .review-slot-avatar-wrap {
  display: flex;
  flex: 0 0 42%;
  width: 64%;
  height: 42%;
  min-height: 42%;
  margin: 1% auto 0;
  overflow: visible;
  align-items: center;
  justify-content: center;
}
.review-slot-card.is-filled .review-slot-avatar {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.review-slot-card.is-filled .review-slot-stars {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 18px;
  margin: 0;
  overflow: visible;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1;
}
.review-slot-card.is-filled .review-slot-copy {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 1% 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f7efd1;
  font-size: clamp(11px, .88vw, 14px);
  line-height: 1.22;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.reviews-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 5, .78);
  animation: hideoutReviewsBackdropIn .25s ease-out both;
}
.reviews-notice-panel {
  width: min(450px, calc(100vw - 36px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 27px 30px 25px;
  text-align: center;
  color: #f9e8bc;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: hideoutReviewsPanelIn .35s cubic-bezier(.2,.8,.22,1) both;
}
.reviews-notice-panel h2 {
  margin: 0;
  color: #ffe4a4;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  text-shadow: 0 2px 3px rgba(0,0,0,.65), 0 0 14px rgba(232,190,104,.28);
}
.reviews-notice-panel > img {
  display: block;
  width: min(170px, 45vw);
  height: min(150px, 26vh);
  object-fit: contain;
}
.reviews-notice-panel p {
  margin: 0;
  font-size: clamp(14px, 1.45vw, 17px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.reviews-notice-dismiss {
  min-width: 150px;
  min-height: 43px;
  margin-top: 3px;
  padding: 9px 23px;
  border: 1px solid #e5bd6d;
  border-radius: 9px;
  background: linear-gradient(180deg,#93632e,#64401b);
  color: #fff1cb;
  font: 700 15px Georgia, 'Times New Roman', serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,244,204,.26), 0 4px 10px rgba(0,0,0,.26);
}
.reviews-notice-dismiss:hover,
.reviews-notice-dismiss:focus-visible { filter: brightness(1.14); }
@media(max-width:560px) {
  .reviews-notice-panel {
    padding: 22px 17px 20px;
    gap: 12px;
  }
  .review-slot-card.is-filled .review-slot-name { font-size: 13px; }
  .review-slot-card.is-filled .review-slot-stars { font-size: 14px; }
  .review-slot-card.is-filled .review-slot-copy { font-size: 11px; }
}

.reviews-mobile-header,
.reviews-mobile-section-title,
.reviews-mobile-gallery-hint,
.reviews-mobile-compose-title,
.reviews-mobile-compose-subtitle,
.reviews-mobile-submit-label { display: none; }

@media (max-width: 767px), (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
  .reviews-overlay {
    box-sizing: border-box;
    inset: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(2, 9, 6, .84);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .reviews-overlay .reviews-panel {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    height: 100%;
    max-height: min(920px, calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))));
    min-height: 0;
    aspect-ratio: auto;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #aa7d41;
    border-radius: 20px;
    background-image:
      radial-gradient(ellipse at 50% -6%, rgba(78,126,79,.34), transparent 65%),
      radial-gradient(ellipse at 5% 85%, rgba(50,91,57,.24), transparent 48%),
      linear-gradient(145deg,#1b3827 0%,#102b1e 47%,#0b2118 100%) !important;
    background-color: #0c261b;
    box-shadow: 0 20px 46px rgba(0,0,0,.7), inset 0 0 0 2px #1d3b29, inset 0 0 0 4px rgba(229,194,112,.34), inset 0 0 34px rgba(1,9,4,.6);
    filter: none;
  }
  .reviews-overlay .reviews-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 7px;
    border: 1px solid rgba(213,172,98,.38);
    border-radius: 14px;
    pointer-events: none;
  }
  .reviews-overlay .reviews-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 23%;
    right: 23%;
    top: 5px;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg,transparent,rgba(251,224,141,.72),transparent);
    pointer-events: none;
  }
  .reviews-overlay .reviews-mobile-header {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 99px;
    padding: 20px 51px 15px 15px;
    text-align: center;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(156,135,65,.16), transparent 79%),
      linear-gradient(180deg,rgba(6,23,15,.08),rgba(8,21,13,.46));
    border-bottom: 1px solid rgba(206,162,83,.57);
    box-shadow: 0 3px 11px rgba(2,12,6,.25);
  }
  .reviews-mobile-header-mark {
    position: absolute;
    left: 14px;
    top: 29px;
    color: #edcc81;
    font-size: 22px;
    text-shadow: 0 0 10px rgba(236,190,98,.43);
  }
  .reviews-mobile-header h2 {
    margin: 0;
    color: #f7d99a;
    font: 700 clamp(21px, 6vw, 30px)/1.12 Georgia,'Times New Roman',serif;
    letter-spacing: .012em;
    text-shadow: 0 2px 2px #152013, 0 0 16px rgba(255,208,95,.21);
  }
  .reviews-mobile-header p {
    margin: 6px 0 0;
    color: #d8cda7;
    font: 12px/1.25 Georgia,'Times New Roman',serif;
  }
  .reviews-overlay .reviews-close-button {
    position: absolute;
    z-index: 7;
    top: 16px;
    right: 16px;
    left: auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #d5ae65;
    border-radius: 50%;
    background: linear-gradient(155deg,#84582d,#3e2714);
    box-shadow: inset 0 0 0 2px rgba(246,210,135,.18), 0 2px 7px rgba(0,0,0,.6);
    cursor: pointer;
    transform: none;
    filter: none;
  }
  .reviews-overlay .reviews-close-button img { display: none; }
  .reviews-overlay .reviews-close-button::before,
  .reviews-overlay .reviews-close-button::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    top: calc(50% - 1px);
    left: calc(50% - 8px);
    border-radius: 2px;
    background: #fce3ac;
    pointer-events: none;
  }
  .reviews-overlay .reviews-close-button::before { transform: rotate(45deg); }
  .reviews-overlay .reviews-close-button::after { transform: rotate(-45deg); }
  .reviews-overlay .reviews-close-button:hover,
  .reviews-overlay .reviews-close-button:focus-visible {
    filter: brightness(1.14);
    transform: none;
  }

  .reviews-overlay .reviews-panel-inner {
    position: relative;
    inset: auto;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    padding: 14px 13px 26px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews-overlay .reviews-panel-inner::-webkit-scrollbar { display: none; }
  .reviews-overlay .reviews-gallery {
    box-sizing: border-box;
    position: static;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .reviews-overlay .reviews-mobile-section-title {
    display: block;
    margin: 2px 0 10px;
    color: #f0d9a1;
    font: 700 15px/1.2 Georgia,'Times New Roman',serif;
    text-align: center;
    letter-spacing: .045em;
  }
  .reviews-overlay .reviews-mobile-section-title::before,
  .reviews-overlay .reviews-mobile-section-title::after {
    content: "✦";
    margin: 0 9px;
    color: #ba9049;
    font-size: 10px;
    vertical-align: 1px;
  }
  .reviews-overlay .reviews-gallery-grid {
    display: grid !important;
    box-sizing: border-box;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    align-content: start;
    width: 100% !important;
    height: auto !important;
    max-height: none;
    min-height: 0;
    padding: 1px 2px 3px !important;
    margin: 0 !important;
    overflow: visible !important;
    scrollbar-width: none;
  }

  .reviews-overlay .reviews-gallery-grid > .review-slot-card.is-empty:nth-child(n + 5) {
    display: none !important;
  }
  .reviews-overlay .reviews-gallery-grid.has-many-reviews {
    max-height: min(46dvh, 390px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(210,171,90,.5) transparent;
  }
  .reviews-overlay .reviews-mobile-gallery-hint {
    display: block;
    margin: 8px 0 0;
    color: #b5ac88;
    font-size: 11px;
    text-align: center;
  }
  .reviews-overlay .review-slot-card {
    box-sizing: border-box !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    min-width: 0;
    aspect-ratio: 1 / .90 !important;
    margin: 0 !important;
    padding: 8px 7px !important;
    border: 1px solid rgba(204,164,83,.76);
    border-radius: 12px;
    background:
      radial-gradient(ellipse at 50% 0%,rgba(69,116,71,.34),transparent 85%),
      linear-gradient(155deg,#1c3c29 0%,#122e20 62%,#10291c 100%) !important;
    box-shadow: inset 0 0 0 2px rgba(15,40,24,.92), inset 0 0 0 3px rgba(222,181,89,.12), 0 3px 7px rgba(0,0,0,.22);
    overflow: hidden;
    text-align: center;
  }
  .reviews-overlay .review-slot-card::before,
  .reviews-overlay .review-slot-card::after {
    content: "✣";
    position: absolute;
    z-index: 0;
    top: 3px;
    font: 13px/1 Georgia,'Times New Roman',serif;
    color: rgba(220,184,101,.52);
    pointer-events: none;
  }
  .reviews-overlay .review-slot-card::before { left: 5px; }
  .reviews-overlay .review-slot-card::after {
    right: 5px;
    transform: scaleX(-1);
  }
  .reviews-overlay .review-slot-card.is-filled {
    gap: 1px;
    padding: 9px 7px 8px !important;
  }
  .reviews-overlay .review-slot-card.is-filled .review-slot-name {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 1px 0 0;
    padding: 0 9px;
    color: #f6dfa5;
    font: 700 clamp(13px,3.8vw,16px)/1.15 Georgia,'Times New Roman',serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .reviews-overlay .review-slot-card.is-filled .review-slot-avatar-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 39%;
    width: 74%;
    height: 39%;
    min-height: 0;
    max-height: 39%;
    margin: 1px auto 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .reviews-overlay .review-slot-card.is-filled .review-slot-avatar {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .reviews-overlay .review-slot-card.is-filled .review-slot-stars {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 1px 0 0;
    gap: 0;
    font-size: clamp(14px,4vw,17px);
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
  }
  .reviews-overlay .review-slot-card.is-filled .review-slot-copy {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 2px 0 0;
    color: #e8e0c1;
    font: 12px/1.18 Georgia,'Times New Roman',serif;
    text-align: center;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .reviews-overlay .review-slot-copy::-webkit-scrollbar { display: none; }

  .reviews-overlay .reviews-compose {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 13px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 17px 2px 5px;
    border-top: 1px solid rgba(197,153,81,.47);
    background: none;
    transform: none;
  }
  .reviews-overlay .reviews-mobile-compose-title {
    display: block;
    margin: 0;
    color: #f6d99b;
    font: 700 23px/1.15 Georgia,'Times New Roman',serif;
    text-align: center;
    text-shadow: 0 2px 3px #07130d;
  }
  .reviews-overlay .reviews-mobile-compose-subtitle {
    display: block;
    margin: -7px 0 2px;
    color: #d8c69b;
    font: 12px/1.4 Georgia,'Times New Roman',serif;
    text-align: center;
  }
  .reviews-overlay .reviews-avatar-picker-block {
    display: block;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    transform: none;
  }
  .reviews-overlay .reviews-compose-eyebrow,
  .reviews-overlay .reviews-compose-heading {
    margin: 0 0 7px;
    color: #f7e4b5;
    font: 700 15px/1.25 Georgia,'Times New Roman',serif;
    text-shadow: 0 1px 2px rgba(0,0,0,.65);
  }
  .reviews-overlay .reviews-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    justify-items: center;
    gap: 10px 8px;
    width: min(100%, 306px);
    max-width: 306px;
    margin: 0 auto;
    padding: 0 3px;
  }
  .reviews-overlay .review-avatar-choice {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: min(100%, 67px);
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    transform: none;
  }
  .reviews-overlay .review-avatar-choice img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    object-fit: contain;
  }
  .reviews-overlay .review-avatar-choice.is-selected img {
    border-radius: 8px;
    outline: 2px solid #f4d27f;
    outline-offset: 1px;
    box-shadow: 0 0 10px rgba(251,202,89,.3);
  }
  .reviews-overlay .reviews-compose-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: none;
  }
  .reviews-overlay .reviews-rating-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    transform: none;
  }
  .reviews-overlay .reviews-rating-row .reviews-compose-heading {
    flex: 0 0 auto;
    margin: 0;
    line-height: 1.25;
  }
  .reviews-overlay .reviews-interactive-stars {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    height: 32px;
    gap: 5px;
    margin: 0;
    padding: 0;
    transform: none !important;
  }
  .reviews-overlay .reviews-interactive-stars button {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 32px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    transform: none;
  }
  .reviews-overlay .reviews-interactive-stars button::after {
    display: none !important;
    content: none !important;
  }
  .reviews-overlay .reviews-text-block {
    display: block;
    min-width: 0;
  }
  .reviews-overlay .reviews-textarea-shell {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    min-height: 111px;
    height: auto;
    margin: 0;
    padding: 12px 13px 27px;
    border: 1px solid rgba(200,156,82,.86);
    border-radius: 11px;
    background: linear-gradient(160deg,rgba(8,22,15,.88),rgba(17,36,24,.92)) !important;
    background-image: linear-gradient(160deg,rgba(8,22,15,.88),rgba(17,36,24,.92)) !important;
    box-shadow: inset 0 0 0 2px rgba(33,60,38,.73), 0 2px 6px rgba(0,0,0,.2);
    overflow: visible;
    transform: none;
  }
  .reviews-overlay .reviews-textarea-shell::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 0;
    border-radius: 7px;
    background: rgba(0,0,0,.20);
    pointer-events: none;
  }
  .reviews-overlay .reviews-textarea-shell textarea {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 66px;
    min-height: 66px;
    max-height: 90px;
    padding: 0 0 0 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    resize: none;
    color: #f8e8c2;
    font: 16px/1.35 Georgia,'Times New Roman',serif;
    overflow-y: auto;
  }
  .reviews-overlay .reviews-character-count {
    position: absolute;
    z-index: 1;
    right: 12px;
    bottom: 9px;
    color: #cfbea2;
    font-size: 12px;
  }
  .reviews-overlay .reviews-submit-button {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: min(100%, 220px);
    max-width: 220px;
    min-height: 48px;
    margin: 1px auto 0;
    padding: 9px 18px;
    border: 1px solid #d7af63;
    border-radius: 10px;
    background:
      linear-gradient(90deg,transparent,rgba(255,226,149,.12),transparent) 0 0 / 100% 100%,
      linear-gradient(180deg,#925e2b 0%,#70451f 52%,#553317 100%);
    box-shadow: inset 0 1px 0 rgba(255,245,203,.39), inset 0 -2px 0 rgba(40,22,10,.55), 0 4px 12px rgba(0,0,0,.3);
    transform: none;
    cursor: pointer;
  }
  .reviews-overlay .reviews-submit-button img { display: none !important; }
  .reviews-overlay .reviews-mobile-submit-label {
    display: inline-block;
    color: #ffedc2;
    font: 700 17px/1.2 Georgia,'Times New Roman',serif;
    text-shadow: 0 1px 1px rgba(42,21,4,.86);
    white-space: nowrap;
  }
  .reviews-overlay .reviews-submit-button:hover,
  .reviews-overlay .reviews-submit-button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.1);
  }
  .reviews-overlay .reviews-submit-button:disabled {
    opacity: .6;
    cursor: not-allowed;
  }
  .reviews-overlay .reviews-notice-overlay { z-index: 12; }
  .reviews-overlay .reviews-notice-panel { width: min(100%,410px); }
}

@media (max-width: 365px) {
  .reviews-overlay .reviews-panel-inner { padding-inline: 10px; }
  .reviews-overlay .review-slot-card.is-filled .review-slot-copy { font-size: 11px; }
  .reviews-overlay .reviews-interactive-stars { gap: 2px; }
  .reviews-overlay .reviews-interactive-stars button {
    width: 27px;
    font-size: 25px;
  }
}

@media (max-width: 767px), (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
  .reviews-overlay .review-slot-card.is-filled.is-short-review {
    aspect-ratio: 1 / 1.10 !important;
    gap: 2px;
  }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-name {
    font-size: clamp(15px, 4.2vw, 18px);
  }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-avatar-wrap {
    flex: 0 0 43%;
    width: 82%;
    height: 43%;
    max-height: 43%;
  }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-stars {
    font-size: clamp(16px, 4.5vw, 19px);
  }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-copy {
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.22;
  }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
  .reviews-overlay {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .reviews-overlay .reviews-panel {
    width: min(100%, 900px);
    height: 100%;
    max-width: none;
    max-height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 14px;
  }
  .reviews-overlay .reviews-panel::before { border-radius: 9px; }
  .reviews-overlay .reviews-mobile-header {
    flex: 0 0 auto;
    min-height: 0;
    padding: 8px 48px 7px;
  }
  .reviews-mobile-header-mark {
    left: 15px;
    top: 10px;
    font-size: 16px;
  }
  .reviews-overlay .reviews-mobile-header h2 {
    font-size: 20px;
    line-height: 1.08;
  }
  .reviews-overlay .reviews-mobile-header p {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.12;
  }
  .reviews-overlay .reviews-close-button {
    top: 8px;
    right: 10px;
    width: 30px;
    min-width: 30px;
    height: 30px;
  }
  .reviews-overlay .reviews-panel-inner {
    position: relative;
    inset: auto;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 9px 10px 10px;
    overflow: hidden;
  }
  .reviews-overlay .reviews-panel-inner > .reviews-gallery,
  .reviews-panel-inner > .reviews-gallery {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  .reviews-overlay .reviews-mobile-section-title {
    flex: 0 0 auto;
    margin: 0 0 6px;
    font-size: 13px;
  }
  .reviews-overlay .reviews-gallery-grid,
  .reviews-overlay .reviews-gallery-grid.has-many-reviews {
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 7px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    margin: 0 !important;
    padding: 1px 3px 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews-overlay .reviews-gallery-grid::-webkit-scrollbar { display: none; }
  .reviews-overlay .reviews-gallery-grid > .review-slot-card.is-empty:nth-child(n + 5) {
    display: none !important;
  }
  .reviews-overlay .reviews-mobile-gallery-hint {
    flex: 0 0 auto;
    margin: 3px 0 0;
    font-size: 10px;
  }
  .reviews-overlay .review-slot-card.is-filled.is-short-review {
    aspect-ratio: 1 / 1.10 !important;
  }
  .reviews-overlay .review-slot-card.is-filled .review-slot-name { font-size: clamp(12px, 1.8vw, 15px); }
  .reviews-overlay .review-slot-card.is-filled .review-slot-stars { font-size: clamp(12px, 1.65vw, 16px); }
  .reviews-overlay .review-slot-card.is-filled .review-slot-copy { font-size: clamp(10px, 1.35vw, 12px); }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-name { font-size: clamp(13px, 1.95vw, 16px); }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-stars { font-size: clamp(13px, 1.8vw, 17px); }
  .reviews-overlay .review-slot-card.is-filled.is-short-review .review-slot-copy { font-size: clamp(11px, 1.55vw, 13px); }

  .reviews-overlay .reviews-panel-inner > .reviews-compose,
  .reviews-overlay .reviews-compose {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    grid-row: 1;
    gap: 7px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 5px 10px 12px;
    border-top: 0;
    border-left: 1px solid rgba(197,153,81,.47);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    transform: none;
  }
  .reviews-overlay .reviews-compose::-webkit-scrollbar { display: none; }
  .reviews-overlay .reviews-mobile-compose-title {
    font-size: 17px;
    line-height: 1.12;
  }
  .reviews-overlay .reviews-mobile-compose-subtitle {
    font-size: 10px;
    line-height: 1.2;
    margin: -4px 0 0;
  }
  .reviews-overlay .reviews-compose-eyebrow,
  .reviews-overlay .reviews-compose-heading {
    font-size: 12px;
    margin-bottom: 3px;
  }
  .reviews-overlay .reviews-avatar-grid {
    width: min(100%, 244px);
    gap: 3px 6px;
    margin: 0 auto;
  }
  .reviews-overlay .review-avatar-choice { width: min(100%, 43px); }
  .reviews-overlay .reviews-compose-main { gap: 6px; }
  .reviews-overlay .reviews-rating-row { gap: 4px 6px; }
  .reviews-overlay .reviews-interactive-stars {
    height: 26px;
    gap: 2px;
  }
  .reviews-overlay .reviews-interactive-stars button {
    width: 24px;
    height: 26px;
    font-size: 22px;
  }
  .reviews-overlay .reviews-textarea-shell {
    min-height: 75px;
    padding: 7px 10px 18px;
  }
  .reviews-overlay .reviews-textarea-shell textarea {
    height: 46px;
    min-height: 46px;
    max-height: 72px;
    font-size: 13px;
  }
  .reviews-overlay .reviews-character-count {
    bottom: 5px;
    font-size: 10px;
  }
  .reviews-overlay .reviews-submit-button {
    width: min(100%, 175px);
    max-width: 175px;
    min-height: 36px;
    margin: 0 auto;
    padding: 6px 12px;
  }
  .reviews-overlay .reviews-mobile-submit-label { font-size: 13px; }
  .reviews-overlay .reviews-notice-panel {
    width: min(100%, 420px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

.reviews-selected-avatar-preview { display: none; }
@media (min-width: 921px) and (min-height: 601px) {
  .reviews-overlay .reviews-submit-button {
    position: relative;
    overflow: visible;
  }
  .reviews-overlay .reviews-submit-button .reviews-selected-avatar-preview {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 5px);
    transform: translateX(-50%);
    align-items: flex-end;
    justify-content: center;
    width: clamp(86px, 8.5vw, 118px);
    height: clamp(96px, 9.5vw, 135px);
    padding: 0;
    margin: 0;
    pointer-events: none;
    z-index: 2;
  }
  .reviews-overlay .reviews-submit-button .reviews-selected-avatar-preview img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    margin: 0;
    padding: 0;
  }
}

.card-album-launch-icon .card-album-new-badge {
  position: absolute;
  top: -4px;
  right: -7px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(255,247,204,.84);
  border-radius: 999px;
  background: linear-gradient(180deg, #d4513d, #9f2728);
  color: #fff7de;
  box-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 8px rgba(241,171,96,.38);
  font: 800 9px/1 Arial, sans-serif;
  letter-spacing: 0;
  pointer-events: none;
}

@keyframes mountsSapphireCurrent {
  0% {
    background-position: 0% 50%, 0% 50%, 0% 50%;
    opacity: .62;
  }
  45%  { opacity: .95; }
  100% {
    background-position: 180% 50%, -150% 50%, 140% 50%;
    opacity: .62;
  }
}

@keyframes mountsMarbleLightPass {
  0%, 12% {
    transform: translateX(-145%) skewX(-18deg);
    opacity: 0;
  }
  22%     { opacity: .12; }
  44%     { opacity: .34; }
  62%     { opacity: .13; }
  74%,100% {
    transform: translateX(145%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes mountsGemRadiance {
  0%, 100% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 2px rgba(54, 187, 255, .16));
  }
  48% {
    filter: brightness(1.16) saturate(1.08) drop-shadow(0 0 7px rgba(54, 187, 255, .58)) drop-shadow(0 0 10px rgba(255, 220, 106, .18));
  }
}

@keyframes mountsJewelAuraPulse {
  0%, 100% {
    opacity: .22;
    transform: scale(.985);
    filter: blur(10px);
  }
  50% {
    opacity: .58;
    transform: scale(1.02);
    filter: blur(12px);
  }
}

@keyframes mountsJewelSweep {
  0% {
    transform: translateX(-158%) skewX(-20deg);
    opacity: 0;
  }
  34% { opacity: 0; }
  46% { opacity: .72; }
  58% { opacity: .34; }
  72% { opacity: 0; }
  100% {
    transform: translateX(162%) skewX(-20deg);
    opacity: 0;
  }
}

@keyframes mountsGemShardFloat {
  0%, 18% {
    opacity: 0;
    transform: translateY(8px) scale(.72) rotate(0deg);
  }
  32% {
    opacity: .70;
  }
  54% {
    opacity: .88;
    transform: translateY(-4px) scale(1) rotate(0deg);
  }
  74% {
    opacity: .42;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(.82) rotate(0deg);
  }
}

.purchase-action-pair.purchase-style-mounts,
.inventory-open-button-shell.inventory-open-style-mounts {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.box-card .card-actions .purchase-action-pair.purchase-style-mounts {
  min-height: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 22px !important;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts,
.purchase-style-mounts > button.box-buy-button.buy-style-mounts:hover:not(:disabled),
.purchase-style-mounts > button.box-buy-button.buy-style-mounts:focus-visible,
.purchase-style-mounts > button.box-buy-button.buy-style-mounts:disabled,
.inventory-open-style-mounts > button.inventory-open-custom-button,
.inventory-open-style-mounts > button.inventory-open-custom-button:hover:not(:disabled),
.inventory-open-style-mounts > button.inventory-open-custom-button:focus-visible,
.inventory-open-style-mounts > button.inventory-open-custom-button:disabled {
  --gold-0: #fff7bf;
  --gold-1: #ffd75d;
  --gold-2: #d89b16;
  --gold-3: #8d5705;
  --gold-4: #5b3200;
  --blue-0: #37c9ff;
  --blue-1: #0788e5;
  --blue-2: #0756a7;
  --blue-3: #072d6d;
  --blue-4: #03183d;

  position: relative !important;
  top: -3px !important;
  z-index: 4 !important;
  width: 100% !important;
  min-height: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  cursor: pointer;
  filter:
    drop-shadow(0 4px 4px rgba(0, 0, 0, .30))
    drop-shadow(0 0 5px rgba(255, 199, 54, .20)) !important;
  transition: transform .15s ease, filter .15s ease !important;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts::before,
.purchase-style-mounts > button.box-buy-button.buy-style-mounts::after,
.inventory-open-style-mounts > button.inventory-open-custom-button::before,
.inventory-open-style-mounts > button.inventory-open-custom-button::after {
  content: none !important;
  display: none !important;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts:hover:not(:disabled),
.inventory-open-style-mounts > button.inventory-open-custom-button:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  filter:
    drop-shadow(0 6px 5px rgba(0, 0, 0, .33))
    drop-shadow(0 0 9px rgba(255, 198, 43, .32)) !important;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts:active:not(:disabled),
.inventory-open-style-mounts > button.inventory-open-custom-button:active:not(:disabled) {
  transform: translateY(1px) scale(.992) !important;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts:focus-visible,
.inventory-open-style-mounts > button.inventory-open-custom-button:focus-visible {
  outline: 2px solid #70d9ff !important;
  outline-offset: 5px !important;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts:disabled,
.inventory-open-style-mounts > button.inventory-open-custom-button:disabled {
  cursor: default !important;
  filter: grayscale(.10) brightness(.86) opacity(.72) !important;
}

.mount-buy__ornament {
  position: absolute;
  inset: -6px -8px;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.mount-buy__ornament::before,
.mount-buy__ornament::after,
.purchase-style-mounts::before,
.purchase-style-mounts::after,
.inventory-open-style-mounts::before,
.inventory-open-style-mounts::after {
  content: none !important;
  display: none !important;
}

.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts,
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts {
  position: absolute !important;
  inset: -12px -14px !important;
  z-index: 12 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before,
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before {
  content: "";
  position: absolute;
  inset: 12px 24px 10px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at center, rgba(86, 198, 255, .42) 0%, rgba(86, 198, 255, .18) 34%, rgba(255, 226, 135, .18) 52%, rgba(86, 198, 255, 0) 76%),
    radial-gradient(ellipse at center, rgba(255, 245, 224, .16) 0%, rgba(255,255,255,0) 68%);
  animation: mountsJewelAuraPulse 3.2s ease-in-out infinite;
}

.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::after,
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 19%;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(193, 238, 255, .22) 22%, rgba(208, 246, 255, .94) 49%, rgba(255, 236, 176, .52) 76%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: mountsJewelSweep 4.25s ease-in-out infinite;
}

.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i,
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i {
  --gem-light: #e9fbff;
  --gem-mid: #7de5ff;
  --gem-deep: #1f8cff;
  position: absolute;
  width: 11px;
  height: 14px;
  opacity: 0;
  clip-path: polygon(50% 0%, 78% 10%, 100% 34%, 92% 72%, 50% 100%, 8% 72%, 0% 34%, 22% 10%);
  background:
    radial-gradient(circle at 35% 26%, var(--gem-light) 0 10%, var(--gem-mid) 11% 33%, var(--gem-deep) 34% 72%, rgba(31,140,255,0) 73%),
    linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,0) 46%);
  border: 1px solid rgba(255, 223, 140, .74);
  border-radius: 2px;
  box-shadow:
    0 0 7px rgba(77, 199, 255, .36),
    0 0 10px rgba(255, 219, 118, .14),
    inset 0 0 4px rgba(255,255,255,.22);
  transform-origin: center;
  animation: mountsGemShardFloat 3.75s ease-in-out infinite;
}

.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(1),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(1) {
  left: 10%;
  bottom: 2px;
  animation-delay: 0s;
}
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(2),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(2) {
  left: 22%;
  top: 4px;
  width: 8px;
  height: 11px;
  animation-delay: -.70s;
  --gem-mid: #95efff;
  --gem-deep: #4aa8ff;
}
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(3),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(3) {
  left: 50%;
  bottom: -2px;
  width: 12px;
  height: 15px;
  animation-delay: -1.42s;
  transform: translateX(-50%);
  --gem-mid: #69d4ff;
  --gem-deep: #0f73ef;
}
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(4),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(4) {
  right: 22%;
  top: 5px;
  width: 8px;
  height: 11px;
  animation-delay: -2.10s;
  --gem-mid: #9be9ff;
  --gem-deep: #5cb2ff;
}
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(5),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(5) {
  right: 10%;
  bottom: 3px;
  animation-delay: -2.85s;
  --gem-mid: #7fe6ff;
  --gem-deep: #1589fb;
}
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(6),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(6) {
  left: 50%;
  top: -3px;
  width: 9px;
  height: 12px;
  animation-delay: -3.55s;
  transform: translateX(-50%);
  --gem-mid: #b7f3ff;
  --gem-deep: #49a2ff;
}
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(7),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(7),
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(8),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(8),
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(9),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(9),
.purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(10),
.inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i:nth-child(10) {
  display: none;
}

.mount-buy__frame {
  position: absolute;
  inset: 18% 3.5%;
  z-index: 1;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  background: linear-gradient(
    180deg,
    #fff5ad 0%,
    #ffc941 7%,
    #8e5202 15%,
    #fbc841 22%,
    #fff0a1 29%,
    #a26507 42%,
    #6c3c00 50%,
    #be7b0a 58%,
    #ffe26e 70%,
    #8b5004 84%,
    #f5bf32 93%,
    #fff2a1 100%
  );
  box-shadow:
    0 0 0 1px #5e3400,
    inset 0 0 0 2px #ffde68,
    inset 0 4px 3px rgba(255,255,255,.75),
    inset 0 -5px 4px rgba(73,35,0,.55);
}

.mount-buy__blue {
  position: absolute;
  left: 8.7%;
  right: 8.7%;
  height: 15%;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(34,160,255,.20), transparent 45%),
    linear-gradient(180deg, #147ecb 0%, #07559e 22%, #073471 54%, #051c48 100%);
  border-top: 2px solid #f5bf2a;
  border-bottom: 2px solid #8c5205;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 5px rgba(0,0,0,.55),
    0 0 0 1px #f4bb28;
}
.mount-buy__blue--top { top: 27.5%; }
.mount-buy__blue--bottom { bottom: 27.5%; }
.mount-buy__blue::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(73,180,255,.22), transparent 24%),
    radial-gradient(circle at 65% 70%, rgba(47,133,255,.18), transparent 25%),
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.04) 30%, rgba(142,224,255,.38) 42%, rgba(255,255,255,.10) 49%, transparent 57% 100%);
  background-size: 145% 100%, 155% 100%, 185% 100%;
  background-repeat: no-repeat;
  opacity: .8;
  animation: mountsSapphireCurrent 4.6s linear infinite;
}

.mount-buy__marble {
  position: absolute;
  left: 16.7%;
  right: 16.7%;
  top: 28%;
  bottom: 28%;
  z-index: 4;
  clip-path: polygon(6.5% 0, 93.5% 0, 100% 50%, 93.5% 100%, 6.5% 100%, 0 50%);
  background:
    linear-gradient(118deg, transparent 0 17%, rgba(133,139,144,.10) 17.5%, rgba(169,169,169,.17) 18.2%, transparent 19% 35%, rgba(124,131,139,.12) 36%, transparent 37.4% 63%, rgba(157,161,164,.13) 64%, transparent 65.2%),
    linear-gradient(62deg, transparent 0 29%, rgba(120,126,132,.10) 30%, transparent 31.1% 72%, rgba(135,139,145,.10) 73%, transparent 74%),
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.95), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8f7f1 37%, #ebe9e2 100%);
  box-shadow:
    inset 0 0 0 3px #a86a0a,
    inset 0 0 0 5px #ffe287,
    inset 0 4px 10px rgba(255,255,255,.9),
    inset 0 -5px 8px rgba(89,67,28,.14),
    0 0 0 2px #8e5705,
    0 2px 6px rgba(0,0,0,.28);
}
.mount-buy__marble::before {
  content: "";
  position: absolute;
  top: -28%;
  bottom: -28%;
  left: 36%;
  width: 22%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 24%, rgba(135,214,255,.30) 50%, rgba(255,232,150,.15) 68%, transparent 100%);
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  animation: mountsMarbleLightPass 5.4s ease-in-out infinite;
}

.mount-buy__corner {
  position: absolute;
  width: 9.5%;
  height: 14%;
  z-index: 5;
  background: linear-gradient(135deg, #fffdf5 0%, #f2eee6 55%, #d9d3c8 100%);
  border: 2px solid #d89d19;
  box-shadow:
    inset 0 0 0 1px #fff1a1,
    inset 0 -2px 4px rgba(88,52,4,.15),
    0 0 0 1px #734001;
}
.mount-buy__corner--lt {
  left: 10.5%;
  top: 24%;
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.mount-buy__corner--lb {
  left: 10.5%;
  bottom: 24%;
  clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}
.mount-buy__corner--rt {
  right: 10.5%;
  top: 24%;
  clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}
.mount-buy__corner--rb {
  right: 10.5%;
  bottom: 24%;
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

.mount-buy__gem {
  position: absolute;
  z-index: 10;
  background: linear-gradient(135deg, #e6fbff 0%, #51ddff 13%, #087fe9 33%, #004aba 48%, #28baff 62%, #05278c 78%, #66e8ff 100%);
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 0 2px #003d97,
    inset 0 0 0 3px #27caff,
    inset 3px 3px 5px rgba(255,255,255,.65),
    inset -4px -4px 6px rgba(0,18,91,.65),
    0 0 0 2px #d58e0e,
    0 0 0 4px #ffe573,
    0 0 0 5px #7c4702,
    0 0 6px rgba(31,167,255,.72);
  transition: filter .15s ease;
  animation: mountsGemRadiance 3.8s ease-in-out infinite;
}
.mount-buy__gem::before,
.mount-buy__gem::after {
  content: "";
  position: absolute;
  inset: 8%;
  pointer-events: none;
}
.mount-buy__gem::before {
  background:
    linear-gradient(45deg, transparent 45%, rgba(255,255,255,.75) 49%, rgba(255,255,255,.75) 51%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(255,255,255,.55) 49%, rgba(255,255,255,.55) 51%, transparent 55%);
}
.mount-buy__gem::after {
  inset: 30%;
  background: white;
  filter: blur(5px);
  opacity: .55;
}
.mount-buy__gem--left,
.mount-buy__gem--right {
  width: 6.2%;
  aspect-ratio: 1;
  top: 50%;
  translate: 0 -50%;
}
.mount-buy__gem--left { left: 5.4%; }
.mount-buy__gem--right { right: 5.4%; }
.mount-buy__gem--left { animation-delay: -2.85s; }
.mount-buy__gem--right { animation-delay: -.95s; }
.mount-buy__gem--top,
.mount-buy__gem--bottom {
  width: 1.82%;
  aspect-ratio: 1;
  left: 49.09%;
}
.mount-buy__gem--top {
  top: 19.55%;
  animation-delay: -1.9s;
}
.mount-buy__gem--bottom {
  bottom: 19.55%;
  animation-delay: 0s;
}

.mount-buy__gem--top::after,
.mount-buy__gem--bottom::after {
  content: "";
  position: absolute;
  width: 145%;
  height: 72%;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) rotate(-45deg);
  clip-path: polygon(0 50%, 27% 17%, 44% 38%, 50% 0, 56% 38%, 73% 17%, 100% 50%, 73% 83%, 56% 62%, 50% 100%, 44% 62%, 27% 83%);
  background: linear-gradient(180deg, #fff3a0, #d88d0c 32%, #fff4a5 49%, #995803 72%, #fbc53a);
  box-shadow: inset 0 0 0 1px #743d00;
}

.purchase-style-mounts .box-buy-button-label,
.inventory-open-style-mounts .inventory-open-button-label {
  position: relative !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-height: 44px;
  padding-top: 0;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #fff6af 0%, #ffd55b 18%, #b96e06 47%, #fff09a 57%, #ba7107 78%, #6e3900 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 1px #7a4301;
  filter: drop-shadow(0 3px 1px rgba(62, 31, 0, .48)) drop-shadow(0 0 1px #fff5a5);
  pointer-events: none;
}

.purchase-style-mounts > button.box-buy-button.buy-style-mounts:hover:not(:disabled) .mount-buy__gem,
.inventory-open-style-mounts > button.inventory-open-custom-button:hover:not(:disabled) .mount-buy__gem {
  filter: brightness(1.12);
}
.purchase-style-mounts > button.box-buy-button.buy-style-mounts:hover:not(:disabled) .mount-buy__marble,
.inventory-open-style-mounts > button.inventory-open-custom-button:hover:not(:disabled) .mount-buy__marble {
  filter: brightness(1.025);
}

.box-card.is-sold-out .purchase-style-mounts .mount-buy__ornament,
.box-card.is-sold-out .purchase-style-mounts .custom-buy-fx-mounts {
  opacity: .40 !important;
  filter: saturate(.20) brightness(.84) !important;
}

@media (max-width: 700px) {
  .box-card .card-actions .purchase-action-pair.purchase-style-mounts {
    min-height: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }
  .mount-buy__ornament {
    inset: -5px -6px;
  }
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts {
    inset: -10px -12px !important;
  }
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before {
    inset: 12px 20px 10px;
  }
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::after,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts::after {
    width: 22%;
  }
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i {
    width: 9px;
    height: 12px;
  }
  .purchase-style-mounts > button.box-buy-button.buy-style-mounts,
  .inventory-open-style-mounts > button.inventory-open-custom-button,
  .purchase-style-mounts .box-buy-button-label,
  .inventory-open-style-mounts .inventory-open-button-label {
    min-height: 54px !important;
    height: 54px !important;
  }
  .purchase-style-mounts .box-buy-button-label,
  .inventory-open-style-mounts .inventory-open-button-label {
    font-size: 23px !important;
  }
  .mount-buy__corner {
    width: 9%;
    height: 13%;
    border-width: 1px;
  }
  .mount-buy__gem--left,
  .mount-buy__gem--right {
    width: 5.8%;
  }
  .mount-buy__gem--top,
  .mount-buy__gem--bottom {
    width: 1.68%;
    left: 49.16%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-style-mounts .mount-buy__blue::after,
  .inventory-open-style-mounts .mount-buy__blue::after,
  .purchase-style-mounts .mount-buy__marble::before,
  .inventory-open-style-mounts .mount-buy__marble::before,
  .purchase-style-mounts .mount-buy__gem,
  .inventory-open-style-mounts .mount-buy__gem,
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before,
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::after,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts::after,
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i,
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i::before,
  .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts i::after,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i,
  .inventory-open-style-mounts .custom-buy-fx.custom-buy-fx-mounts i::before,
  .high-payout-coffer-seal-sheen::before,
  .selected-coffer-image-seal-high-payout::after {
    animation: none !important;
  }
}

.rewards-modal-footer .peek-close-button-shell.peek-close-style-mounts {
  width: 258px !important;
}

.rewards-modal-footer .peek-close-button-shell.peek-close-style-mounts .peek-close-button.buy-style-mounts {
  min-height: 64px !important;
  height: 64px !important;
}

.inventory-open-button-shell.inventory-open-style-mounts > button.inventory-open-custom-button,
.inventory-open-button-shell.inventory-open-style-mounts > button.inventory-open-custom-button:hover:not(:disabled),
.inventory-open-button-shell.inventory-open-style-mounts > button.inventory-open-custom-button:focus-visible,
.inventory-open-button-shell.inventory-open-style-mounts > button.inventory-open-custom-button:disabled {
  background-image: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.inventory-open-button-shell.inventory-open-style-mounts > button.inventory-open-custom-button.open-button:not(.inventory-buy-now-button) {
  min-height: 64px !important;
  height: 64px !important;
}

.inventory-open-button-shell.inventory-open-style-mounts > button.inventory-open-custom-button.open-button:not(.inventory-buy-now-button) .inventory-open-button-label {
  min-height: 48px !important;
}

.high-payout-coffer-seal-wrap {
  position: absolute !important;
  top: -7px !important;
  left: 50% !important;
  z-index: 17 !important;
  display: block !important;
  width: 160px !important;
  height: 44px !important;
  max-width: calc(100% - 16px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.high-payout-coffer-seal {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: 160px !important;
  height: 44px !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}
.high-payout-coffer-seal-outline-svg {
  display: none !important;
  content: none !important;
  animation: none !important;
}
.high-payout-coffer-seal-sheen {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  display: block !important;
  width: 160px !important;
  height: 44px !important;
  max-width: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
  -webkit-mask: url('/images/highpayout.png') center / contain no-repeat;
  mask: url('/images/highpayout.png') center / contain no-repeat;
}
.high-payout-coffer-seal-sheen::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -34%;
  width: 26%;
  height: 220%;
  background: linear-gradient(102deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 28%,
    rgba(202, 240, 255, .18) 40%,
    rgba(255, 255, 255, .82) 50%,
    rgba(153, 225, 255, .34) 60%,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  filter: blur(.2px);
  animation: high-payout-seal-sheen-pass 3s linear infinite;
}
.box-visual.has-high-payout-seal .coffer-rarity-seal {
  top: 42px !important;
}
.box-visual.is-sold-out .high-payout-coffer-seal-wrap {
  opacity: .34 !important;
}
.box-visual.is-sold-out .high-payout-coffer-seal {
  filter: grayscale(.72) brightness(.58) !important;
}
.selected-coffer-image-seal-high-payout {
  width: 132px;
  height: 37px;
  background-image: url('/images/highpayout.png');
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  overflow: hidden !important;
}
.selected-coffer-image-seal-high-payout::after {
  content: "";
  position: absolute;
  top: -58%;
  left: -34%;
  width: 26%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(102deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 28%,
    rgba(202, 240, 255, .18) 40%,
    rgba(255, 255, 255, .78) 50%,
    rgba(153, 225, 255, .32) 60%,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  -webkit-mask: url('/images/highpayout.png') center / contain no-repeat;
  mask: url('/images/highpayout.png') center / contain no-repeat;
  animation: high-payout-seal-sheen-pass 3s linear infinite;
}

@keyframes high-payout-seal-sheen-pass {
  0%, 16% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  22% {
    opacity: .95;
  }
  38% {
    opacity: .95;
  }
  54% {
    transform: translateX(520%) skewX(-18deg);
    opacity: 0;
  }
  100% {
    transform: translateX(520%) skewX(-18deg);
    opacity: 0;
  }
}

@media (max-width: 680px) {
  .high-payout-coffer-seal-wrap,
  .high-payout-coffer-seal,
  .high-payout-coffer-seal-sheen {
    width: 146px !important;
    height: 40px !important;
  }
  .high-payout-coffer-seal-wrap {
    top: -6px !important;
  }
  .box-visual.has-high-payout-seal .coffer-rarity-seal {
    top: 39px !important;
  }
  .selected-coffer-image-seal-high-payout {
    width: 122px;
    height: 34px;
  }
}

@media (max-width: 640px) {
  .rewards-modal-footer .peek-close-button-shell.peek-close-style-mounts {
    width: min(236px, calc(100vw - 76px)) !important;
  }
}

html body .box-card .card-actions .purchase-action-pair.purchase-style-mounts
> button.btn.primary.box-buy-button.buy-style-mounts .box-buy-button-label {
  font-size: 26px !important;
  line-height: 1 !important;
}

html body .view-vault .vault-selection .vault-action-group
.inventory-open-button-shell.inventory-open-style-mounts
> button.btn.primary.open-button.inventory-open-custom-button:not(.inventory-buy-now-button),
html body .view-vault .vault-selection .vault-action-group
.inventory-open-button-shell.inventory-open-style-mounts
> button.btn.primary.open-button.inventory-open-custom-button:not(.inventory-buy-now-button):hover:not(:disabled),
html body .view-vault .vault-selection .vault-action-group
.inventory-open-button-shell.inventory-open-style-mounts
> button.btn.primary.open-button.inventory-open-custom-button:not(.inventory-buy-now-button):focus-visible,
html body .view-vault .vault-selection .vault-action-group
.inventory-open-button-shell.inventory-open-style-mounts
> button.btn.primary.open-button.inventory-open-custom-button:not(.inventory-buy-now-button):disabled {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline-color: transparent;
}

html body .view-vault .vault-selection .vault-action-group
.inventory-open-button-shell.inventory-open-style-mounts
> button.btn.primary.open-button.inventory-open-custom-button:not(.inventory-buy-now-button)
.inventory-open-button-label {
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

@media (max-width: 700px) {
  html body .box-card .card-actions .purchase-action-pair.purchase-style-mounts
  > button.btn.primary.box-buy-button.buy-style-mounts .box-buy-button-label {
    font-size: 23px !important;
  }

  html body .view-vault .vault-selection .vault-action-group
  .inventory-open-button-shell.inventory-open-style-mounts
  > button.btn.primary.open-button.inventory-open-custom-button:not(.inventory-buy-now-button)
  .inventory-open-button-label {
    font-size: 17px !important;
  }
}

html body .box-card .card-actions .purchase-action-pair.purchase-style-mounts
> button.btn.primary.box-buy-button.buy-style-mounts .box-buy-button-label {
  font-size: 24px !important;
}

@media (max-width: 700px) {
  html body .box-card .card-actions .purchase-action-pair.purchase-style-mounts
  > button.btn.primary.box-buy-button.buy-style-mounts .box-buy-button-label {
    font-size: 21px !important;
  }
}

html body .fourfun-card-copy,
html body .card-inspector-card-description,
html body .card-catalog-preset-description,
html body .album-preset-card-description {
  display: none !important;
}

html body .fourfun-card-face:not(.rarity-legendary) .fourfun-card-title,
html body .fourfun-card-face:not(.rarity-legendary) .fourfun-card-number,
html body .fourfun-card-face:not(.rarity-legendary) .fourfun-card-footer-center small,
html body .fourfun-card-back:not(.rarity-legendary) .fourfun-card-back-labels strong,
html body .card-inspector-front:not(.rarity-legendary) .card-inspector-card-title,
html body .card-inspector-front:not(.rarity-legendary) .card-inspector-card-number,
html body .card-inspector-front:not(.rarity-legendary) .card-inspector-card-date,
html body .card-catalog-preset-card:not(.rarity-legendary) .card-catalog-preset-title,
html body .card-catalog-preset-card:not(.rarity-legendary) .card-catalog-preset-number,
html body .card-catalog-preset-card:not(.rarity-legendary) .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card:not(.rarity-legendary) .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card:not(.rarity-legendary) .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card:not(.rarity-legendary) .album-preset-card-date {
  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(255,248,214,.18), 0 2px 12px rgba(95,64,9,.35), 0 0 1px rgba(255,232,154,.22) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35)) !important;
}

html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date {
  color: transparent !important;
  background-image:
    linear-gradient(180deg, #fffbff 0%, #eed7ff 9%, #cfa9ff 20%, #f9efff 31%, #c393ff 45%, #a4e6ff 57%, #b58bff 70%, #f3e9ff 100%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.22) 0 12px, rgba(183,137,255,.10) 12px 24px, rgba(150,234,255,.15) 24px 34px, rgba(255,255,255,.05) 34px 50px) !important;
  background-size: 100% 100%, 180% 100% !important;
  background-position: center center, 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(96,60,166,.26) !important;
  text-shadow: 0 2px 0 rgba(116,72,182,.18), 0 8px 18px rgba(0,0,0,.22), 0 0 24px rgba(223,190,255,.22) !important;
  filter: drop-shadow(0 0 10px rgba(185,232,255,.14)) !important;
  animation: cardLegendaryTextHologram 3.6s linear infinite !important;
}

@keyframes cardLegendaryTextHologram {
  0% {
    background-position: center center, 0% 50%;
    filter: drop-shadow(0 0 8px rgba(185,232,255,.12)) brightness(.98);
  }
  35% {
    background-position: center center, 85% 50%;
    filter: drop-shadow(0 0 12px rgba(223,190,255,.20)) brightness(1.06);
  }
  70% {
    background-position: center center, 170% 50%;
    filter: drop-shadow(0 0 11px rgba(164,230,255,.18)) brightness(1.02);
  }
  100% {
    background-position: center center, 220% 50%;
    filter: drop-shadow(0 0 8px rgba(185,232,255,.12)) brightness(.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
  html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
  html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
  html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
  html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
  html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
  html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
  html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
  html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
  html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date {
    animation: none !important;
  }
}

html body .fourfun-card-title,
html body .card-inspector-card-title,
html body .card-catalog-preset-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
  translate: 0 -3px !important;
}

html body .card-inspector-card-number {
  font-size: clamp(9px, 4.15cqw, 13px) !important;
}
html body .card-inspector-card-date {
  font-size: clamp(7.2px, 3.15cqw, 10px) !important;
}

html body .card-catalog-preset-number {
  font-size: clamp(7.8px, .80vw, 10.4px) !important;
}
html body .card-catalog-preset-date {
  font-size: clamp(6.1px, .62vw, 8.3px) !important;
}

html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-date {
  translate: 0 3px !important;
}

html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date {
  color: transparent !important;
  background-image:
    linear-gradient(105deg,
      #ff9fd8 0%,
      #ffd0ed 9%,
      #d9a7ff 18%,
      #b49cff 29%,
      #91c8ff 40%,
      #86efff 51%,
      #91f6d0 62%,
      #fff0a8 73%,
      #ffc0d9 84%,
      #d8a9ff 93%,
      #ff9fd8 100%),
    linear-gradient(115deg,
      transparent 0 37%,
      rgba(255,255,255,.92) 46%,
      rgba(255,255,255,.34) 51%,
      transparent 61%) !important;
  background-size: 330% 100%, 250% 100% !important;
  background-position: 0% 50%, -160% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .55px rgba(89, 63, 145, .24) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.14),
    0 3px 12px rgba(0,0,0,.28),
    0 0 12px rgba(112,225,255,.22),
    0 0 18px rgba(255,129,207,.18) !important;
  filter: drop-shadow(0 0 7px rgba(181,224,255,.18)) saturate(1.08) !important;
  animation: cardLegendaryTextHologramV2 4.4s linear infinite !important;
}

@keyframes cardLegendaryTextHologramV2 {
  0% {
    background-position: 0% 50%, -160% 50%;
    filter: drop-shadow(0 0 7px rgba(181,224,255,.16)) saturate(1.06) brightness(1);
  }
  25% {
    background-position: 28% 50%, -55% 50%;
    filter: drop-shadow(0 0 9px rgba(255,161,218,.18)) saturate(1.14) brightness(1.04);
  }
  50% {
    background-position: 57% 50%, 42% 50%;
    filter: drop-shadow(0 0 10px rgba(126,236,255,.22)) saturate(1.12) brightness(1.07);
  }
  75% {
    background-position: 82% 50%, 132% 50%;
    filter: drop-shadow(0 0 9px rgba(178,156,255,.20)) saturate(1.13) brightness(1.03);
  }
  100% {
    background-position: 100% 50%, 250% 50%;
    filter: drop-shadow(0 0 7px rgba(181,224,255,.16)) saturate(1.06) brightness(1);
  }
}

html body .lootbox-four-card-stage.stage-cards.cards-ready .lootbox-card-slot.is-placed {
  overflow: visible !important;
}

html body .lootbox-card-detail-hint {
  position: absolute !important;
  left: 50% !important;
  top: 80.5% !important;
  z-index: 120 !important;
  width: max-content !important;
  max-width: 148% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  translate: -50% 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .lootbox-card-detail-hint > img {
  display: block !important;
  width: clamp(34px, 4.1vw, 48px) !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 -2px !important;
  transform-origin: 50% 8% !important;
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,.72))
    drop-shadow(0 0 9px rgba(255,224,137,.52)) !important;
  animation: lootboxCardDetailCursorTap 1.08s ease-in-out infinite !important;
}

html body .lootbox-card-detail-hint > span {
  display: block !important;
  margin-top: 0 !important;
  color: #f4d47f !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(8px, .82vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  text-align: center !important;
  white-space: nowrap !important;
  -webkit-text-stroke: 1.25px rgba(0,0,0,.96) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 2px 4px rgba(0,0,0,.95),
    0 0 8px rgba(229,187,82,.34) !important;
  animation: lootboxCardDetailLabelPulse 1.55s ease-in-out infinite !important;
}

@keyframes lootboxCardDetailCursorTap {
  0%, 100% { transform: rotate(-9deg) translateY(0) scale(1); }
  46% { transform: rotate(-9deg) translateY(7px) scale(.92); }
  66% { transform: rotate(-9deg) translateY(1px) scale(1.04); }
}

@keyframes lootboxCardDetailLabelPulse {
  0%, 100% {
    opacity: .84;
    filter: brightness(.96);
  }
  50% {
    opacity: 1;
    filter: brightness(1.14);
  }
}

html body .lootbox-four-card-stage.stage-cards.is-multi-pack .lootbox-card-detail-hint {
  top: 79% !important;
  max-width: 160% !important;
}
html body .lootbox-four-card-stage.stage-cards.is-multi-pack .lootbox-card-detail-hint > img {
  width: clamp(26px, 2.9vw, 38px) !important;
}
html body .lootbox-four-card-stage.stage-cards.is-multi-pack .lootbox-card-detail-hint > span {
  font-size: clamp(6.5px, .63vw, 9px) !important;
  letter-spacing: .035em !important;
  -webkit-text-stroke-width: 1px !important;
}

@media (max-width: 700px) {
  html body .lootbox-card-detail-hint {
    top: 79% !important;
  }
  html body .lootbox-card-detail-hint > img {
    width: 32px !important;
  }
  html body .lootbox-card-detail-hint > span {
    font-size: 7.5px !important;
    -webkit-text-stroke-width: 1px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .lootbox-card-detail-hint > img,
  html body .lootbox-card-detail-hint > span,
  html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
  html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
  html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
  html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
  html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
  html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
  html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
  html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
  html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
  html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date {
    animation: none !important;
  }
}

html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-title {
  translate: 0 -1px !important;
}

html body .card-inspector-card-number {
  font-size: clamp(9.8px, 4.5cqw, 14px) !important;
  translate: 0 2px !important;
}
html body .card-inspector-card-date {
  font-size: clamp(7.8px, 3.45cqw, 10.8px) !important;
  translate: 0 2px !important;
}

html body .card-catalog-preset-number {
  font-size: clamp(8.5px, .88vw, 11.2px) !important;
  translate: 0 2px !important;
}
html body .card-catalog-preset-date {
  font-size: clamp(6.6px, .69vw, 8.9px) !important;
  translate: 0 2px !important;
}
html body .card-catalog-preset-title {
  font-size: clamp(10px, .95vw, 13.1px) !important;
}

html body .lootbox-card-detail-hint > img {
  width: clamp(28px, 3.45vw, 40px) !important;
}
html body .lootbox-card-detail-hint > span {
  margin-top: 1px !important;
  padding: 3px 8px 4px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .34) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
}
html body .lootbox-four-card-stage.stage-cards.is-multi-pack .lootbox-card-detail-hint > img {
  width: clamp(23px, 2.55vw, 33px) !important;
}
html body .lootbox-four-card-stage.stage-cards.is-multi-pack .lootbox-card-detail-hint > span {
  padding: 2px 6px 3px !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date {
  -webkit-text-stroke: 1px rgba(92, 246, 177, .46) !important;
  text-shadow:
    0 0 1px rgba(18, 67, 43, .9),
    0 0 7px rgba(108, 255, 193, .24),
    0 0 13px rgba(92, 246, 177, .18),
    0 2px 10px rgba(0,0,0,.22) !important;
  filter: drop-shadow(0 0 7px rgba(120, 255, 208, .18)) !important;
  animation: mythicCardTextPulse 1.65s ease-in-out infinite !important;
}

@keyframes mythicCardTextPulse {
  0%, 100% {
    opacity: .92;
    filter: drop-shadow(0 0 6px rgba(114,255,205,.15)) brightness(.98);
    text-shadow:
      0 0 1px rgba(18, 67, 43, .88),
      0 0 7px rgba(108, 255, 193, .22),
      0 0 12px rgba(92, 246, 177, .16),
      0 2px 10px rgba(0,0,0,.22);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(123,255,211,.24)) brightness(1.08);
    text-shadow:
      0 0 1px rgba(18, 67, 43, .96),
      0 0 9px rgba(124, 255, 202, .34),
      0 0 18px rgba(92, 246, 177, .24),
      0 2px 12px rgba(0,0,0,.24);
  }
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-art-parallax-x, 0px), var(--mythic-art-parallax-y, 0px), 0) scale(1.01) !important;
  transform-origin: 50% 50% !important;
  transition: transform 30ms linear !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer {
  transform-style: flat !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: mythicPanoramaFloatV16Inspector 5.7s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: none !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
  html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date {
    animation: none !important;
  }
}

html body .card-inspector-front:not(.rarity-legendary):not(.rarity-mythic) .card-inspector-card-title {
  translate: 0 -1px !important;
}

html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-title {
  font-size: 6.05cqw !important;
  letter-spacing: .01em !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-number {
  font-size: 4.15cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-date,
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-edition {
  font-size: 3.04cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-mark {
  font-size: 4.65cqw !important;
}

html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date {
  -webkit-text-stroke: .78px rgba(0,0,0,.92) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.28),
    0 3px 12px rgba(0,0,0,.26),
    0 0 10px rgba(112,225,255,.18),
    0 0 15px rgba(255,129,207,.14) !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date {
  -webkit-text-stroke-width: .9px !important;
  -webkit-text-stroke-color: rgba(103, 247, 184, .62) !important;
  paint-order: stroke fill !important;
  filter: drop-shadow(0 0 5px rgba(120,255,208,.12)) !important;
  text-shadow:
    0 1px 1px rgba(4,7,4,.96),
    1px 0 1px rgba(4,7,4,.72),
    -1px 0 1px rgba(4,7,4,.72),
    0 -1px 1px rgba(4,7,4,.66),
    0 0 4px rgba(255,255,239,.55),
    0 0 7px rgba(117,243,206,.15) !important;
  animation: mythicCardTextPulseOutline 1.8s ease-in-out infinite !important;
}

@keyframes mythicCardTextPulseOutline {
  0%, 100% {
    opacity: .93;
    -webkit-text-stroke-color: rgba(103, 247, 184, .52);
    filter: drop-shadow(0 0 4px rgba(120,255,208,.10));
    text-shadow:
      0 1px 1px rgba(4,7,4,.96),
      1px 0 1px rgba(4,7,4,.72),
      -1px 0 1px rgba(4,7,4,.72),
      0 -1px 1px rgba(4,7,4,.66),
      0 0 4px rgba(255,255,239,.50),
      0 0 7px rgba(117,243,206,.13);
  }
  50% {
    opacity: 1;
    -webkit-text-stroke-color: rgba(136, 255, 209, .78);
    filter: drop-shadow(0 0 8px rgba(120,255,208,.18));
    text-shadow:
      0 1px 1px rgba(4,7,4,.98),
      1px 0 1px rgba(4,7,4,.76),
      -1px 0 1px rgba(4,7,4,.76),
      0 -1px 1px rgba(4,7,4,.72),
      0 0 5px rgba(255,255,239,.64),
      0 0 10px rgba(117,243,206,.18);
  }
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer {
  transform: translate3d(var(--mythic-art-parallax-x, 0px), var(--mythic-art-parallax-y, 0px), 0) !important;
  transition: transform 28ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(calc(var(--mythic-art-parallax-x, 0px) * .72), calc(var(--mythic-art-parallax-y, 0px) * .72), 0) scale(1.012) !important;
  transform-origin: 50% 50% !important;
  transition: transform 28ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image {
  transform: translate3d(calc(var(--mythic-art-parallax-x, 0px) * -.22), calc(var(--mythic-art-parallax-y, 0px) * -.22), 0) !important;
  transition: transform 28ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: translate3d(calc(var(--mythic-art-parallax-x, 0px) * -.22), calc(var(--mythic-art-parallax-y, 0px) * -.22), 0) !important;
  transition: transform 28ms linear !important;
  will-change: transform !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
  html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date {
    animation: none !important;
  }
}

html body .card-inspector-backdrop:not(.mythic-acquisition-overlay)
.card-inspector .card-inspector-stage
.card-inspector-front:not(.rarity-legendary):not(.rarity-mythic)
.card-inspector-card-title {
  translate: 0 -4px !important;
}

html body .lootbox-four-card-stage.stage-cards .lootbox-front-art .card-inspector-card-title,
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-title {
  translate: 0 -4px !important;
}

html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-title {
  font-size: 6.35cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-number {
  font-size: 4.38cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-date,
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-edition {
  font-size: 3.22cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-card-mark {
  font-size: 4.9cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card:not(.card-mythic-rarity-seal) {
  font-size: 2.38cqw !important;
}
html body .card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card:not(.card-mythic-rarity-seal)::before,
html body .card-pack-result-card > .card-pack-result-front .card-inspector-unified-seal.is-on-card:not(.card-mythic-rarity-seal)::after {
  font-size: 1.72cqw !important;
}

html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
html body .card-inspector-front.rarity-legendary .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-mark {
  -webkit-text-stroke: 0 transparent !important;
  paint-order: normal !important;
  text-shadow:
    -.35px 0 rgba(0,0,0,.56),
    .35px 0 rgba(0,0,0,.56),
    0 -.35px rgba(0,0,0,.56),
    0 .35px rgba(0,0,0,.56),
    0 2px 6px rgba(0,0,0,.20),
    0 0 10px rgba(112,225,255,.17),
    0 0 14px rgba(255,129,207,.13) !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  color: #f3d58b !important;
  -webkit-text-fill-color: #f3d58b !important;
  -webkit-text-stroke: 0 transparent !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  paint-order: normal !important;
  text-shadow:
    -.58px 0 rgba(81, 226, 156, .68),
    .58px 0 rgba(81, 226, 156, .68),
    0 -.58px rgba(81, 226, 156, .68),
    0 .58px rgba(81, 226, 156, .68),
    -.42px -.42px rgba(81, 226, 156, .42),
    .42px .42px rgba(81, 226, 156, .42),
    0 1px 1px rgba(4,7,4,.92),
    0 0 4px rgba(255,248,209,.34),
    0 0 7px rgba(96,238,174,.13) !important;
  filter: none !important;
  animation: mythicCardGoldOutlinePulse 1.72s ease-in-out infinite !important;
}

@keyframes mythicCardGoldOutlinePulse {
  0%, 100% {
    opacity: .94;
    text-shadow:
      -.52px 0 rgba(81,226,156,.58),
      .52px 0 rgba(81,226,156,.58),
      0 -.52px rgba(81,226,156,.58),
      0 .52px rgba(81,226,156,.58),
      -.38px -.38px rgba(81,226,156,.34),
      .38px .38px rgba(81,226,156,.34),
      0 1px 1px rgba(4,7,4,.92),
      0 0 4px rgba(255,248,209,.30),
      0 0 6px rgba(96,238,174,.10);
  }
  50% {
    opacity: 1;
    text-shadow:
      -.72px 0 rgba(108,255,190,.78),
      .72px 0 rgba(108,255,190,.78),
      0 -.72px rgba(108,255,190,.78),
      0 .72px rgba(108,255,190,.78),
      -.5px -.5px rgba(108,255,190,.48),
      .5px .5px rgba(108,255,190,.48),
      0 1px 1px rgba(4,7,4,.94),
      0 0 5px rgba(255,248,209,.42),
      0 0 10px rgba(96,238,174,.18);
  }
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
html body .card-inspector-front.rarity-mythic
> .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-art-inner-x, 0px), var(--mythic-art-inner-y, 0px), 0) scale(1.016) !important;
  transform-origin: 50% 50% !important;
  transition: transform 24ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: translate3d(var(--mythic-panorama-x, 0px), var(--mythic-panorama-y, 0px), 0) scale(1.006) !important;
  transform-origin: 50% 50% !important;
  transition: transform 24ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer {
  animation: mythicPanoramaFloatV16Inspector 5.7s ease-in-out infinite !important;
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
  html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date {
    animation: none !important;
  }
}

html body .fourfun-card-face.rarity-legendary .fourfun-card-title,
html body .fourfun-card-face.rarity-legendary .fourfun-card-number,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-legendary .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-legendary .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-legendary .card-inspector-card-title,
html body .card-inspector-front.rarity-legendary .card-inspector-card-number,
html body .card-inspector-front.rarity-legendary .card-inspector-card-date,
html body .card-inspector-front.rarity-legendary .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-legendary .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-legendary .album-preset-card-mark {
  color: transparent !important;
  background-image:
    linear-gradient(105deg,
      #ff9fd8 0%,
      #ffd0ed 9%,
      #d9a7ff 18%,
      #b49cff 29%,
      #91c8ff 40%,
      #86efff 51%,
      #91f6d0 62%,
      #fff0a8 73%,
      #ffc0d9 84%,
      #d8a9ff 93%,
      #ff9fd8 100%),
    linear-gradient(115deg,
      transparent 0 37%,
      rgba(255,255,255,.92) 46%,
      rgba(255,255,255,.34) 51%,
      transparent 61%) !important;
  background-size: 330% 100%, 250% 100% !important;
  background-position: 0% 50%, -160% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .22px rgba(0,0,0,.26) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 2px 8px rgba(0,0,0,.16),
    0 0 9px rgba(112,225,255,.18),
    0 0 14px rgba(255,129,207,.14) !important;
  filter: drop-shadow(0 0 6px rgba(181,224,255,.14)) saturate(1.06) !important;
  animation: cardLegendaryTextHologramV2 4.4s linear infinite !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .34px rgba(93, 241, 171, .38) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,248,214,.14),
    0 2px 10px rgba(95,64,9,.28),
    0 0 1px rgba(255,232,154,.16),
    0 0 5px rgba(104, 241, 181, .10) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.28)) drop-shadow(0 0 4px rgba(104, 241, 181, .08)) !important;
  animation: mythicGoldGreenEdgePulseSoft 1.72s ease-in-out infinite !important;
}

@keyframes mythicGoldGreenEdgePulseSoft {
  0%, 100% {
    opacity: .95;
    -webkit-text-stroke-color: rgba(93, 241, 171, .34);
    filter: drop-shadow(0 1px 1px rgba(47,29,7,.28)) drop-shadow(0 0 4px rgba(104, 241, 181, .07));
  }
  50% {
    opacity: 1;
    -webkit-text-stroke-color: rgba(122, 255, 197, .48);
    filter: drop-shadow(0 1px 1px rgba(47,29,7,.30)) drop-shadow(0 0 6px rgba(104, 241, 181, .12));
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
  html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
  html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
  html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
  html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
  html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
    animation: none !important;
  }
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  opacity: 1 !important;
  color: #f4d88d !important;
  background-image:
    linear-gradient(180deg,
      #fffbe6 0%,
      #fff0c4 12%,
      #f6d67f 26%,
      #c98c29 41%,
      #fff3cd 52%,
      #d79e34 64%,
      #bc7d1a 78%,
      #f6d989 89%,
      #fff7df 100%) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .26px rgba(108, 241, 180, .26) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,249,225,.14),
    0 2px 6px rgba(86, 59, 8, .18),
    0 0 3px rgba(113, 241, 186, .06) !important;
  filter: drop-shadow(0 1px 1px rgba(60,40,9,.18)) drop-shadow(0 0 3px rgba(113,241,186,.04)) !important;
  animation: mythicGoldGreenEdgePulseVisible 1.9s ease-in-out infinite !important;
}

@keyframes mythicGoldGreenEdgePulseVisible {
  0%, 100% {
    opacity: 1;
    -webkit-text-stroke-color: rgba(108, 241, 180, .24);
    filter: drop-shadow(0 1px 1px rgba(60,40,9,.18)) drop-shadow(0 0 3px rgba(113,241,186,.04));
  }
  50% {
    opacity: 1;
    -webkit-text-stroke-color: rgba(132, 255, 201, .36);
    filter: drop-shadow(0 1px 1px rgba(60,40,9,.20)) drop-shadow(0 0 4px rgba(113,241,186,.07));
  }
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer {
  transform: translate3d(var(--mythic-art-parallax-x, 0px), var(--mythic-art-parallax-y, 0px), 0) !important;
  transition: transform 12ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-art-inner-x, 0px), var(--mythic-art-inner-y, 0px), 0) scale(1.022) !important;
  transition: transform 12ms linear !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: translate3d(var(--mythic-panorama-x, 0px), var(--mythic-panorama-y, 0px), 0) scale(1.01) !important;
  transition: transform 12ms linear !important;
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

html body .card-inspector-front.rarity-mythic
> .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-hover-x, 0px), var(--mythic-hover-y, 0px), 0) scale(1.08) !important;
  transform-origin: 50% 50% !important;
  transition: transform 18ms linear !important;
  will-change: transform !important;
}

html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  opacity: 1 !important;
  visibility: visible !important;
  color: #f6d982 !important;
  background-image:
    linear-gradient(180deg,
      #fffdf0 0%,
      #fff3c9 11%,
      #f6d77e 25%,
      #d79d34 39%,
      #fff6d7 51%,
      #e1ad49 62%,
      #c88c28 74%,
      #f8dc8b 87%,
      #fff9e4 100%) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .18px rgba(92, 230, 163, .20) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,253,231,.22),
    0 2px 7px rgba(79,52,7,.24),
    0 0 3px rgba(99,232,168,.055) !important;
  filter: brightness(1.12) saturate(1.06) drop-shadow(0 1px 1px rgba(55,36,7,.18)) !important;
  animation: mythicGoldTextPulseBright 1.9s ease-in-out infinite !important;
}

@keyframes mythicGoldTextPulseBright {
  0%, 100% {
    opacity: 1;
    -webkit-text-stroke-color: rgba(92,230,163,.18);
    filter: brightness(1.10) saturate(1.05) drop-shadow(0 1px 1px rgba(55,36,7,.18));
  }
  50% {
    opacity: 1;
    -webkit-text-stroke-color: rgba(112,246,184,.28);
    filter: brightness(1.20) saturate(1.08) drop-shadow(0 1px 1px rgba(55,36,7,.18)) drop-shadow(0 0 3px rgba(100,238,174,.06));
  }
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-art-parallax-x, 0px), var(--mythic-art-parallax-y, 0px), 0) scale(1.01) !important;
  transform-origin: 50% 50% !important;
  transition: transform 30ms linear !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer {
  transform-style: flat !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: mythicPanoramaFloatV16Inspector 5.7s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: none !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  opacity: 1 !important;
  color: #f4d88d !important;
  background-image: linear-gradient(180deg, #fffbe6 0%, #fff0c4 12%, #f6d67f 26%, #c98c29 41%, #fff3cd 52%, #d79e34 64%, #bc7d1a 78%, #f6d989 89%, #fff7df 100%) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .6px rgba(0, 0, 0, .9) !important;
  paint-order: stroke fill !important;
  text-shadow: none !important;
  filter: none !important;
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transition: transform 16ms linear !important;
  will-change: transform !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.74),
    0 0 5px rgba(0,0,0,.42),
    0 0 9px rgba(0,0,0,.16) !important;
  filter: none !important;
}

html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: translate3d(var(--mythic-background-x, 0px), var(--mythic-background-y, 0px), 0) scale(1.006) !important;
  transition: transform 16ms linear !important;
  will-change: transform !important;
}
html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-foreground-x, 0px), var(--mythic-foreground-y, 0px), 0) scale(1.01) !important;
  transition: transform 16ms linear !important;
  will-change: transform !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-right b,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels strong,
html body .fourfun-card-back.rarity-mythic .fourfun-card-back-labels small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-inspector-front.rarity-mythic .card-inspector-card-mark,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-mark,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-mark {
  opacity: 1 !important;
  color: #f4d88d !important;
  background-image: linear-gradient(180deg, #fffbe6 0%, #fff0c4 12%, #f6d67f 26%, #c98c29 41%, #fff3cd 52%, #d79e34 64%, #bc7d1a 78%, #f6d989 89%, #fff7df 100%) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.82),
    0 2px 4px rgba(0,0,0,.62),
    0 0 8px rgba(0,0,0,.32) !important;
}

html body .card-inspector-front.rarity-mythic > .card-inspector-mythic-art-layer > .card-inspector-main-image,
html body .card-inspector-front.rarity-mythic .card-mythic-art-sweep-image {
  transform: translate3d(var(--mythic-foreground-x, 0px), var(--mythic-foreground-y, 0px), 0) scale(1.01) !important;
}

html body .fourfun-card-face.rarity-mythic .fourfun-card-title,
html body .fourfun-card-face.rarity-mythic .fourfun-card-number,
html body .fourfun-card-face.rarity-mythic .fourfun-card-footer-center small,
html body .card-inspector-front.rarity-mythic .card-inspector-card-title,
html body .card-inspector-front.rarity-mythic .card-inspector-card-number,
html body .card-inspector-front.rarity-mythic .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-mythic .card-catalog-preset-date,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-title,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-number,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-mythic .album-preset-card-date {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .card-inspector-front.rarity-mythic .card-mythic-panorama-layer {
  transition: translate 16ms linear !important;
  will-change: transform, translate !important;
}
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-image,
html body .card-inspector-front.rarity-mythic .card-mythic-panorama-sweep-image {
  transform: none !important;
}

html body .fourfun-card-title,
html body .fourfun-card-number,
html body .fourfun-card-footer small,
html body .fourfun-card-footer b,
html body .fourfun-card-back-labels strong,
html body .fourfun-card-back-labels small,
html body .card-inspector-card-title,
html body .card-inspector-card-number,
html body .card-inspector-card-date,
html body .card-inspector-card-mark,
html body .card-catalog-preset-title,
html body .card-catalog-preset-number,
html body .card-catalog-preset-date,
html body .card-catalog-preset-mark,
html body .album-preset-card-title,
html body .album-preset-card-number,
html body .album-preset-card-date,
html body .album-preset-card-mark {
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 0 10px rgba(0,0,0,1),
    0 0 20px rgba(0,0,0,1),
    0 0 35px rgba(0,0,0,1),
    0 0 55px rgba(0,0,0,.98),
    0 6px 14px rgba(0,0,0,1) !important;
}

.view-shop .box-card .card-actions .purchase-action-pair:is(
  .purchase-style-legendary,
  .purchase-style-bryer,
  .purchase-style-gil,
  .purchase-style-minions,
  .purchase-style-cards,
  .purchase-style-blackjack,
  .purchase-style-mounts
) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.view-shop .box-card .card-actions .purchase-action-pair.purchase-style-mounts
> button.box-buy-button.buy-style-mounts {
  top: 0 !important;
}

@media (max-width: 700px) {
  .view-shop .box-card .card-actions .purchase-action-pair:is(
    .purchase-style-legendary,
    .purchase-style-bryer,
    .purchase-style-gil,
    .purchase-style-minions,
    .purchase-style-cards,
    .purchase-style-blackjack,
    .purchase-style-mounts
  ) {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
}

html body .card-album-modal-backdrop {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

html body .card-album-modal-stage,
html body .card-album.card-album-modal-book,
html body .card-album.card-album-modal-book .card-binder-glow-stage,
html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell {
  overflow: visible !important;
}

html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell {
  position: relative !important;
  isolation: isolate !important;

  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body .card-album.card-album-modal-book .card-album-book-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translate(calc(-50% - 15px), -50%) !important;
  scale: 1 !important;
  object-fit: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell::before,
html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell::after,
html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread::before,
html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread::after,
html body .card-album.card-album-modal-book .card-book-page.card-binder-page::before,
html body .card-album.card-album-modal-book .card-book-page.card-binder-page::after,
html body .card-album.card-album-modal-book .card-book-gutter.card-binder-gutter::before,
html body .card-album.card-album-modal-book .card-book-gutter.card-binder-gutter::after,
html body .card-album.card-album-modal-book .card-book-slot::before,
html body .card-album.card-album-modal-book .card-book-slot::after,
html body .card-album.card-album-modal-book .card-book-slot-empty::before,
html body .card-album.card-album-modal-book .card-book-slot-empty::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .card-album.card-album-modal-book .card-binder-ambient-glow,
html body .card-album.card-album-modal-book .card-binder-cover-edge,
html body .card-album.card-album-modal-book .card-binder-rings,
html body .card-album.card-album-modal-book .card-binder-corner,
html body .card-album.card-album-modal-book .card-binder-page-gloss {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
}

html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread,
html body .card-album.card-album-modal-book .card-book-page.card-binder-page,
html body .card-album.card-album-modal-book .card-book-page-left.card-binder-page,
html body .card-album.card-album-modal-book .card-book-page-right.card-binder-page,
html body .card-album.card-album-modal-book .card-book-slot,
html body .card-album.card-album-modal-book .card-book-slot-empty {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body .card-album.card-album-modal-book .card-book-gutter.card-binder-gutter {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}
html body .card-album.card-album-modal-book .card-binder-tabs {
  z-index: 30 !important;
}
html body .card-album.card-album-modal-book .card-book-slot > .album-preset-card {
  position: relative !important;
  z-index: 10 !important;
}
html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity {
  z-index: 20 !important;
}
html body .card-album.card-album-modal-book .card-book-pagination {
  position: relative !important;
  z-index: 30 !important;
}

html body .card-album.card-album-modal-book .card-binder-tabs {
  transform: translateX(15px) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination {
  transform: translateX(7px) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn {
  position: relative !important;
  min-width: 255px !important;
  width: 255px !important;
  max-width: 255px !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 0 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: var(--bryer-css-v60-cardsbutton, url('/images/cardsbutton.png')) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  color: #ebd2a0 !important;
  font-family: 'Cinzel', 'Times New Roman', serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 10px rgba(228,176,97,.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:hover:not(:disabled) {
  color: #f4deb2 !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:disabled {
  opacity: .52 !important;
  filter: grayscale(.12) brightness(.82) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type {
  padding-left: 58px !important;
  padding-right: 34px !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type {
  padding-left: 34px !important;
  padding-right: 58px !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before,
html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  transform: translateY(-50%) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before {
  left: 30px !important;
  border-right: 10px solid rgba(237, 192, 113, .95) !important;
  filter: drop-shadow(0 0 4px rgba(237, 192, 113, .18)) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
  right: 30px !important;
  border-left: 10px solid rgba(237, 192, 113, .95) !important;
  filter: drop-shadow(0 0 4px rgba(237, 192, 113, .18)) !important;
}

@media (max-width: 959px) {
  html body .card-album.card-album-modal-book .card-book-pagination {
    transform: translateX(7px) !important;
  }
  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    min-width: 230px !important;
    width: 230px !important;
    max-width: 230px !important;
    height: 58px !important;
    min-height: 58px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 519px) {
  html body .card-album.card-album-modal-book .card-book-pagination {
    transform: none !important;
  }
  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    width: min(240px, 100%) !important;
    max-width: min(240px, 100%) !important;
    min-width: 0 !important;
  }
}

html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell::before {
  content: url('/images/cardslots2.png') !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translate(calc(-50% - 15px), -50%) !important;
  scale: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body .card-album.card-album-modal-book .card-binder-tabs {
  transform: translateX(25px) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn {
  background-color: #1c140f !important;
  background-image:
    var(--bryer-css-v60-cardsbutton, url('/images/cardsbutton.png')),
    linear-gradient(180deg, rgba(96, 71, 45, .36) 0%, rgba(45, 29, 20, .96) 22%, rgba(25, 17, 13, .98) 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, 100% 100% !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:hover:not(:disabled) {
  background-image:
    var(--bryer-css-v60-cardsbutton, url('/images/cardsbutton.png')),
    linear-gradient(180deg, rgba(114, 84, 52, .42) 0%, rgba(57, 37, 25, .97) 22%, rgba(30, 20, 14, .99) 100%) !important;
}

html body .card-album.card-album-modal-book .card-book-pagination .btn:disabled {
  background-image:
    var(--bryer-css-v60-cardsbutton, url('/images/cardsbutton.png')),
    linear-gradient(180deg, rgba(70, 53, 38, .28) 0%, rgba(34, 24, 19, .88) 22%, rgba(22, 17, 14, .92) 100%) !important;
}

html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell::before {
  content: none !important;
  display: none !important;
}

html body .card-album.card-album-modal-book .card-album-book-image {
  z-index: 0 !important;
}

html body .card-album.card-album-modal-book .card-album-book-image.card-album-slots-image {
  z-index: 1 !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity {
  left: 50% !important;
  right: auto !important;
  width: min(120px, calc(100% - 4px)) !important;
  max-width: 120px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal {
  box-sizing: border-box !important;
  width: 90.909091% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  border-radius: 3px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: scale(.88) !important;
  transform-origin: center top !important;
  font-size: 8.4px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-epic {
  border-radius: 3px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  font-size: 8.5px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary {
  border-radius: 3px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  font-size: 8.7px !important;
}

@media (max-width: 640px) {
  html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal {
    width: 105.263158% !important;
    transform: scale(.76) !important;
    font-size: 8.4px !important;
  }

  html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-epic {
    font-size: 8.5px !important;
  }

  html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary {
    font-size: 8.7px !important;
  }
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal {
  height: 21px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary {
  height: 23px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-common,
html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-uncommon,
html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-rare {
  font-size: 9.1px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-epic {
  font-size: 9.2px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal {
  height: 19px !important;
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary {
  height: 21px !important;
}

@media (max-width: 959px) {
  html body .card-album-modal-backdrop {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px !important;
    place-items: start center !important;
  }

  html body .card-album-modal-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  html body .card-album.card-album-modal-book {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading {
    width: min(560px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto 8px !important;
    padding: 10px 42px 9px 14px !important;
    box-sizing: border-box !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading h3 {
    font-size: clamp(22px, 6.8vw, 31px) !important;
    line-height: 1.05 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading .eyebrow,
  html body .card-album.card-album-modal-book .card-album-heading p {
    max-width: 100% !important;
  }

  html body .card-album.card-album-modal-book .card-binder-glow-stage {
    width: 1320px !important;
    min-width: 1320px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    zoom: var(--card-album-mobile-scale, 1) !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell {
    width: 1320px !important;
    min-width: 1320px !important;
    max-width: 1320px !important;
    margin: 0 !important;
    padding: 26px 18px 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-page.card-binder-page {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: 14px 10px !important;
    padding: 20px 12px !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-slot,
  html body .card-album.card-album-modal-book .card-book-slot-empty {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 202px !important;
    min-height: 202px !important;
    max-height: 202px !important;
    padding: 8px 2px !important;
    box-sizing: border-box !important;
    place-items: center !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-slot .album-preset-card {
    width: min(120px, calc(100% - 4px)) !important;
    min-width: 0 !important;
    max-width: 120px !important;
    height: auto !important;
  }

  html body .card-album.card-album-modal-book .card-album-book-image,
  html body .card-album.card-album-modal-book .card-album-book-image.card-album-slots-image {
    left: 50% !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(calc(-50% - 15px), -50%) !important;
    object-fit: none !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    width: min(620px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto 6px !important;
    padding: 0 !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px 10px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 230px !important;
    min-height: 52px !important;
    height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
    justify-self: stretch !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination span {
    min-width: 92px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  html body .card-album-modal-close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 100 !important;
  }
}

@media (max-width: 519px) {
  html body .card-album.card-album-modal-book .card-album-heading {
    padding: 9px 38px 8px 10px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px 8px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination span {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 100% !important;
    text-align: center !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    max-width: none !important;
    min-height: 48px !important;
    height: 48px !important;
    font-size: 12.5px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-left: 40px !important;
    padding-right: 18px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding-left: 18px !important;
    padding-right: 40px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before {
    left: 20px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
    right: 20px !important;
  }
}

@media (max-width: 959px) and (orientation: landscape) and (max-height: 600px) {
  html body .card-album.card-album-modal-book .card-album-heading {
    margin-bottom: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 5px !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading h3 {
    font-size: clamp(20px, 4vw, 27px) !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    margin-top: 5px !important;
    margin-bottom: 4px !important;
  }
}

@media (max-width: 959px) {

  html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread {
    display: grid !important;
    width: 1284px !important;
    min-width: 1284px !important;
    max-width: 1284px !important;
    grid-template-columns: 630px 24px 630px !important;
    grid-template-rows: auto !important;
    justify-content: start !important;
    align-items: stretch !important;
  }

  html body .card-album.card-album-modal-book .card-book-page.card-binder-page,
  html body .card-album.card-album-modal-book .card-book-page-left.card-binder-page,
  html body .card-album.card-album-modal-book .card-book-page-right.card-binder-page {
    width: 630px !important;
    min-width: 630px !important;
    max-width: 630px !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  html body .card-album.card-album-modal-book .card-book-page-left.card-binder-page {
    grid-column: 1 !important;
  }

  html body .card-album.card-album-modal-book .card-book-gutter.card-binder-gutter {
    grid-column: 2 !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }

  html body .card-album.card-album-modal-book .card-book-page-right.card-binder-page {
    grid-column: 3 !important;
  }

  html body .card-album.card-album-modal-book .card-book-page.card-binder-page {
    grid-template-columns: repeat(5, 114px) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    padding: 20px 10px !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  html body .card-album.card-album-modal-book .card-book-slot,
  html body .card-album.card-album-modal-book .card-book-slot-empty {
    width: 114px !important;
    min-width: 114px !important;
    max-width: 114px !important;
  }
}

@media (max-width: 959px) and (orientation: portrait) {
  html body .card-album.card-album-modal-book .card-binder-glow-stage {
    width: 660px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    zoom: var(--card-album-mobile-scale, 1) !important;
  }

  html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell {
    width: 1320px !important;
    min-width: 1320px !important;
    max-width: 1320px !important;
    margin: 0 !important;
    padding: 26px 18px 20px !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book.is-single-page-layout .card-book-spread.card-binder-spread,
  html body .card-album.card-album-modal-book .card-book-spread.card-binder-spread {
    display: grid !important;
    width: 630px !important;
    min-width: 630px !important;
    max-width: 630px !important;
    grid-template-columns: 630px !important;
    grid-template-rows: auto !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-page.card-binder-page,
  html body .card-album.card-album-modal-book .card-book-page-left.card-binder-page {
    grid-column: 1 !important;
    width: 630px !important;
    min-width: 630px !important;
    max-width: 630px !important;
    grid-template-columns: repeat(5, 114px) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    padding: 20px 10px !important;
    justify-content: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  html body .card-album.card-album-modal-book.is-single-page-layout .card-book-page-right,
  html body .card-album.card-album-modal-book.is-single-page-layout .card-book-gutter {
    display: none !important;
  }

  html body .card-album.card-album-modal-book .card-binder-tabs {
    left: 618px !important;
    right: auto !important;
    transform: none !important;
    z-index: 30 !important;
  }

  html body .card-album.card-album-modal-book .card-album-book-image,
  html body .card-album.card-album-modal-book .card-album-book-image.card-album-slots-image {
    left: 50% !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(calc(-50% - 15px), -50%) !important;
  }
}

@media (max-width: 959px) and (orientation: landscape) {
  html body .card-album.card-album-modal-book .card-album-heading {
    margin-bottom: 3px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading .eyebrow {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading h3 {
    font-size: clamp(18px, 3.4vw, 24px) !important;
    line-height: 1 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading p:not(.eyebrow) {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    width: min(540px, calc(100vw - 24px)) !important;
    margin-top: 4px !important;
    margin-bottom: 3px !important;
    gap: 6px 8px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    max-width: 205px !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: 12.5px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type {
    padding-left: 46px !important;
    padding-right: 24px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type {
    padding-left: 24px !important;
    padding-right: 46px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before {
    left: 24px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
    right: 24px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination span {
    min-width: 78px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 959px) and (orientation: portrait) {
  html body .card-album.card-album-modal-book .card-binder-tabs {
    left: 628px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    width: min(520px, calc(100vw - 24px)) !important;
    gap: 6px 8px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    max-width: 190px !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 12px !important;
    justify-self: center !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type {
    padding-left: 36px !important;
    padding-right: 16px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type {
    padding-left: 16px !important;
    padding-right: 36px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before {
    left: 18px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
    right: 18px !important;
  }
}

@media (max-width: 519px) and (orientation: portrait) {
  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    width: 100% !important;
    max-width: 165px !important;
    min-height: 42px !important;
    height: 42px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 959px) and (orientation: landscape) {
  html body .card-album.card-album-modal-book .card-album-heading {
    margin-bottom: 2px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading .eyebrow {
    font-size: 7px !important;
    line-height: 1.05 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading h3 {
    font-size: clamp(16px, 3vw, 21px) !important;
    line-height: 1 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading p:not(.eyebrow) {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    width: min(500px, calc(100vw - 24px)) !important;
    margin-top: 3px !important;
    margin-bottom: 2px !important;
    gap: 5px 7px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    max-width: 185px !important;
    min-height: 42px !important;
    height: 42px !important;
    font-size: 11.5px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type {
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type {
    padding-left: 20px !important;
    padding-right: 40px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before {
    left: 21px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
    right: 21px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination span {
    min-width: 72px !important;
    font-size: 8.5px !important;
  }
}

@media (max-width: 959px) and (orientation: portrait) {
  html body .card-album.card-album-modal-book .card-binder-glow-stage {
    width: 660px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-book-shell.card-binder-shell {
    width: 660px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    overflow: visible !important;
  }

  html body .card-album.card-album-modal-book .card-album-book-image,
  html body .card-album.card-album-modal-book .card-album-book-image.card-album-slots-image {
    left: 660px !important;
    clip-path: polygon(0 0, 51% 0, 51% 100%, 0 100%) !important;
  }

  html body .card-album.card-album-modal-book .card-binder-tabs {
    left: 646px !important;
    right: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 959px) and (orientation: landscape) {
  html body .card-album.card-album-modal-book .card-album-heading {
    margin-bottom: 1px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading .eyebrow {
    font-size: 6px !important;
    line-height: 1 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading h3 {
    font-size: clamp(14px, 2.5vw, 18px) !important;
    line-height: .98 !important;
  }

  html body .card-album.card-album-modal-book .card-album-heading p:not(.eyebrow) {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination {
    width: min(430px, calc(100vw - 20px)) !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;
    gap: 4px 6px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn {
    width: 155px !important;
    min-width: 155px !important;
    max-width: 155px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 10.5px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type {
    padding-left: 34px !important;
    padding-right: 16px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type {
    padding-left: 16px !important;
    padding-right: 34px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before,
  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:first-of-type::before {
    left: 18px !important;
    border-right-width: 8px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination .btn:last-of-type::after {
    right: 18px !important;
    border-left-width: 8px !important;
  }

  html body .card-album.card-album-modal-book .card-book-pagination span {
    min-width: 62px !important;
    font-size: 7.5px !important;
  }
}

.reward-rarity-seal.rarity-seal-halloween {
  --seal-a: #ff8a20;
  --seal-b: #35134d;
  --seal-text: #fff0c9;
  border-color: rgba(255, 158, 58, .92);
  color: #fff0c9;
  background:
    linear-gradient(180deg, rgba(255, 224, 158, .22), transparent 34%),
    radial-gradient(circle at 50% 140%, rgba(142, 45, 193, .48), transparent 48%),
    linear-gradient(135deg, #140a19 0%, #562064 38%, #d45216 72%, #2a1038 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 190, .28),
    inset 0 -2px 0 rgba(24, 4, 31, .52),
    0 0 11px rgba(255, 103, 20, .38),
    0 0 19px rgba(114, 49, 175, .22),
    0 3px 8px rgba(0,0,0,.38);
  text-shadow:
    0 1px 2px rgba(0,0,0,.94),
    0 0 6px rgba(255, 116, 25, .38);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
.reward-rarity-seal.rarity-seal-halloween::before,
.reward-rarity-seal.rarity-seal-halloween::after {
  content: "" !important;
  width: 7px;
  height: 5px;
  background: #17091e;
  filter: drop-shadow(0 0 2px rgba(255, 127, 24, .65));
  clip-path: polygon(50% 45%, 0 0, 13% 100%, 50% 68%, 87% 100%, 100% 0);
}
.reward-rarity-seal.rarity-seal-halloween::after {
  transform: scaleX(-1);
}

.rarity-halloween {
  --card-accent: #ff7b1b;
  --card-secondary: #7c39aa;
  --card-accent-rgb: 255 123 27;
  --card-secondary-rgb: 124 57 170;
}
.rarity-halloween .fourfun-card-preset-frame,
.card-catalog-preset-card.rarity-halloween .card-catalog-preset-frame,
.album-preset-card.rarity-halloween .album-preset-card-frame,
.card-inspector-front.rarity-halloween .card-inspector-preset-frame,
.lootbox-card-slot.rarity-halloween .lootbox-front-art .fourfun-card-preset-frame {
  filter:
    drop-shadow(0 0 4px rgba(255, 117, 19, .36))
    drop-shadow(0 0 8px rgba(93, 33, 126, .28));
}

.halloween-card-pumpkins {
  position: absolute;
  inset: 5% 6%;
  z-index: 7;
  display: block;
  overflow: hidden;
  border-radius: 10%;
  pointer-events: none;
  transform-style: preserve-3d;
}
.halloween-card-pumpkins > i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(8px, 8%, 18px);
  aspect-ratio: 1.08 / 1;
  border-radius: 47% 47% 43% 43%;
  opacity: 0;
  background:
    linear-gradient(90deg,
      rgba(92, 33, 5, .48) 0 10%,
      transparent 10% 28%,
      rgba(255, 191, 77, .38) 28% 42%,
      transparent 42% 58%,
      rgba(130, 43, 5, .42) 58% 72%,
      transparent 72% 90%,
      rgba(83, 25, 4, .44) 90% 100%),
    radial-gradient(ellipse at 48% 48%, #ffbd38 0 24%, #ef7416 58%, #88300b 100%);
  box-shadow:
    inset 0 0 4px rgba(255, 220, 122, .38),
    0 0 5px rgba(255, 106, 17, .48);
  animation: halloween-pumpkin-wander-a 5.8s ease-in-out infinite;
  will-change: transform, opacity;
}
.halloween-card-pumpkins > i::before {
  content: "";
  position: absolute;
  left: 43%;
  top: -22%;
  width: 18%;
  height: 29%;
  border-radius: 60% 20% 30% 20%;
  background: linear-gradient(#7f9d49, #283717);
  transform: rotate(9deg);
}
.halloween-card-pumpkins > i::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 39%;
  width: 12%;
  height: 12%;
  background: #2c1015;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 13px 0 0 #2c1015;
  opacity: .82;
}
.halloween-card-pumpkins > i:nth-child(1) {
  left: 14%;
  top: 21%;
  width: 9%;
  animation-delay: -1.1s;
  animation-duration: 5.3s;
}
.halloween-card-pumpkins > i:nth-child(2) {
  left: 70%;
  top: 17%;
  width: 7%;
  animation-name: halloween-pumpkin-wander-b;
  animation-delay: -3.4s;
  animation-duration: 6.4s;
}
.halloween-card-pumpkins > i:nth-child(3) {
  left: 23%;
  top: 61%;
  width: 7.5%;
  animation-name: halloween-pumpkin-wander-c;
  animation-delay: -4.7s;
  animation-duration: 6.9s;
}
.halloween-card-pumpkins > i:nth-child(4) {
  left: 77%;
  top: 57%;
  width: 9%;
  animation-name: halloween-pumpkin-wander-b;
  animation-delay: -1.9s;
  animation-duration: 5.7s;
}
.halloween-card-pumpkins > i:nth-child(5) {
  left: 45%;
  top: 33%;
  width: 6.5%;
  animation-name: halloween-pumpkin-wander-c;
  animation-delay: -5.1s;
  animation-duration: 7.2s;
}
.halloween-card-pumpkins > i:nth-child(6) {
  left: 51%;
  top: 74%;
  width: 8%;
  animation-delay: -2.7s;
  animation-duration: 6.1s;
}

@keyframes halloween-pumpkin-wander-a {
  0%, 100% {
    opacity: 0;
    transform: translate(-12px, 10px) rotate(-12deg) scale(.72);
  }
  13% { opacity: .74; }
  45% {
    opacity: .8;
    transform: translate(9px, -8px) rotate(9deg) scale(1);
  }
  68% {
    opacity: .68;
    transform: translate(19px, 7px) rotate(-4deg) scale(.9);
  }
  80% {
    opacity: 0;
    transform: translate(26px, -3px) rotate(12deg) scale(.66);
  }
}
@keyframes halloween-pumpkin-wander-b {
  0%, 100% {
    opacity: 0;
    transform: translate(14px, -13px) rotate(11deg) scale(.66);
  }
  17% { opacity: .72; }
  47% {
    opacity: .82;
    transform: translate(-8px, 8px) rotate(-8deg) scale(.96);
  }
  69% {
    opacity: .64;
    transform: translate(-20px, -4px) rotate(5deg) scale(.84);
  }
  82% {
    opacity: 0;
    transform: translate(-28px, 9px) rotate(-13deg) scale(.62);
  }
}
@keyframes halloween-pumpkin-wander-c {
  0%, 100% {
    opacity: 0;
    transform: translate(-5px, -16px) rotate(-8deg) scale(.64);
  }
  11% { opacity: .68; }
  42% {
    opacity: .78;
    transform: translate(13px, 5px) rotate(12deg) scale(.92);
  }
  66% {
    opacity: .7;
    transform: translate(-9px, 16px) rotate(1deg) scale(.86);
  }
  79% {
    opacity: 0;
    transform: translate(6px, 24px) rotate(-11deg) scale(.6);
  }
}

.halloween-card-bats {
  position: absolute;
  inset: -18%;
  z-index: 48;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform-style: preserve-3d;
}
.halloween-card-bats > i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 4px;
  border-radius: 60%;
  background: #16091c;
  opacity: 0;
  filter:
    drop-shadow(0 0 2px rgba(255, 111, 22, .7))
    drop-shadow(0 0 5px rgba(103, 41, 151, .45));
  animation: halloween-bat-orbit-a 5.5s linear infinite;
  will-change: transform, opacity;
}
.halloween-card-bats > i::before,
.halloween-card-bats > i::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 10px;
  height: 8px;
  background: #16091c;
  clip-path: polygon(100% 48%, 65% 3%, 42% 36%, 0 14%, 18% 92%, 62% 69%);
  transform-origin: 100% 55%;
  animation: halloween-bat-wing .34s ease-in-out infinite alternate;
}
.halloween-card-bats > i::before { right: 3px; }
.halloween-card-bats > i::after {
  left: 3px;
  transform: scaleX(-1);
  transform-origin: 0 55%;
  animation-direction: alternate-reverse;
}
.halloween-card-bats > i:nth-child(1) {
  animation-delay: -0.2s;
  animation-duration: 5.7s;
}
.halloween-card-bats > i:nth-child(2) {
  animation-name: halloween-bat-orbit-b;
  animation-delay: -2.1s;
  animation-duration: 6.6s;
}
.halloween-card-bats > i:nth-child(3) {
  animation-delay: -3.7s;
  animation-duration: 7.1s;
}
.halloween-card-bats > i:nth-child(4) {
  animation-name: halloween-bat-orbit-b;
  animation-delay: -1.3s;
  animation-duration: 5.9s;
}
.halloween-card-bats > i:nth-child(5) {
  animation-delay: -4.8s;
  animation-duration: 6.9s;
}
.halloween-card-bats > i:nth-child(6) {
  animation-name: halloween-bat-orbit-b;
  animation-delay: -3.1s;
  animation-duration: 7.4s;
}
.halloween-card-bats > i:nth-child(7) {
  animation-delay: -5.3s;
  animation-duration: 8.1s;
}
.halloween-card-bats > i:nth-child(8) {
  animation-name: halloween-bat-orbit-b;
  animation-delay: -0.9s;
  animation-duration: 6.2s;
}

@keyframes halloween-bat-wing {
  from {
    rotate: -17deg;
    scale: .82 .65;
  }
  to {
    rotate: 16deg;
    scale: 1 .98;
  }
}
@keyframes halloween-bat-orbit-a {
  0% {
    opacity: 0;
    transform: translate(-72px, 42px) rotate(-18deg) scale(.72);
  }
  8% { opacity: .92; }
  28% { transform: translate(-45px, -58px) rotate(12deg) scale(.92); }
  51% {
    opacity: .84;
    transform: translate(53px, -63px) rotate(14deg) scale(1);
  }
  73% { transform: translate(72px, 36px) rotate(-12deg) scale(.85); }
  91% { opacity: .74; }
  100% {
    opacity: 0;
    transform: translate(-72px, 42px) rotate(-18deg) scale(.72);
  }
}
@keyframes halloween-bat-orbit-b {
  0% {
    opacity: 0;
    transform: translate(69px, -27px) rotate(17deg) scale(.68);
  }
  10% { opacity: .88; }
  31% { transform: translate(42px, 59px) rotate(-14deg) scale(.88); }
  54% {
    opacity: .82;
    transform: translate(-60px, 52px) rotate(-10deg) scale(1);
  }
  77% { transform: translate(-70px, -35px) rotate(13deg) scale(.8); }
  90% { opacity: .7; }
  100% {
    opacity: 0;
    transform: translate(69px, -27px) rotate(17deg) scale(.68);
  }
}

.fourfun-card-shell.rarity-halloween,
.card-catalog-preset-card.rarity-halloween,
.album-preset-card.rarity-halloween,
.lootbox-card-slot.rarity-halloween .lootbox-card-button {
  filter:
    drop-shadow(0 0 8px rgba(255, 102, 16, .24))
    drop-shadow(0 0 14px rgba(102, 38, 145, .18));
}

.card-binder-tabs button.is-halloween > span {
  color: #ffe1b1 !important;
  border-color: rgba(255, 138, 31, .66) !important;
  background:
    linear-gradient(180deg, rgba(255, 154, 44, .24), transparent 32%),
    linear-gradient(90deg, #1b0b22, #622752 54%, #a34418) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 206, 126, .12),
    0 0 10px rgba(255, 113, 23, .2) !important;
}
.card-binder-tabs button.is-halloween.is-active > span,
.card-binder-tabs button.is-halloween:hover > span {
  color: #fff0c9 !important;
  filter: brightness(1.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 221, 156, .24),
    0 0 15px rgba(255, 113, 23, .42),
    0 0 20px rgba(113, 43, 160, .24) !important;
}

html body .card-album.card-album-modal-book
.card-book-slot > .card-book-slot-rarity
> .reward-rarity-seal.rarity-seal-halloween {
  height: 19px !important;
  border-radius: 3px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  font-size: 8.4px !important;
}

.staff-card-pool-rarity-panel.is-halloween-card-pool {
  border-color: rgba(255, 132, 33, .34);
  background:
    linear-gradient(135deg, rgba(96, 35, 111, .12), rgba(204, 77, 18, .08)),
    rgba(10, 8, 12, .28);
}
.staff-card-pool-rarity-panel.is-halloween-card-pool strong {
  color: #ffb560;
}

@media (max-width: 640px) {
  .halloween-card-bats { inset: -13%; }
  .halloween-card-bats > i { scale: .82; }
  .halloween-card-pumpkins > i { opacity: .72; }

  html body .card-album.card-album-modal-book
  .card-book-slot > .card-book-slot-rarity
  > .reward-rarity-seal.rarity-seal-halloween {
    font-size: 8.4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .halloween-card-bats > i,
  .halloween-card-pumpkins > i,
  .halloween-card-bats > i::before,
  .halloween-card-bats > i::after {
    animation-duration: 18s !important;
  }
}

.fourfun-card-face.rarity-halloween > .fourfun-card-preset-frame,
.card-inspector-front.rarity-halloween > .card-inspector-preset,
.card-catalog-preset-card.rarity-halloween .card-catalog-preset-frame,
.album-preset-card.rarity-halloween .album-preset-card-frame {
  filter:
    drop-shadow(0 0 4px rgba(255, 117, 19, .36))
    drop-shadow(0 0 8px rgba(93, 33, 126, .28));
}

.card-inspector-backdrop.rarity-halloween .card-inspector-card,
.card-inspector-backdrop.rarity-halloween .card-inspector-rotator-host {
  overflow: visible !important;
  contain: none !important;
}

.card-inspector-backdrop.rarity-halloween
.card-inspector-rotator-host > .halloween-card-pumpkins {
  position: absolute !important;
  inset: 5% 6% !important;
  z-index: 20 !important;
  overflow: hidden !important;
  transform: translateZ(9px) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  pointer-events: none !important;
}

.card-inspector-backdrop.rarity-halloween
.card-inspector-rotator-host > .halloween-card-bats {
  position: absolute !important;
  inset: -22% !important;
  z-index: 40 !important;
  overflow: visible !important;
  transform: translateZ(12px) !important;
  pointer-events: none !important;
}

html body .fourfun-card-face.rarity-halloween,
html body .fourfun-card-back.rarity-halloween,
html body .card-inspector-front.rarity-halloween,
html body .card-inspector-back.rarity-halloween,
html body .fourfun-card-face.rarity-halloween .fourfun-card-full-art,
html body .fourfun-card-face.rarity-halloween .fourfun-card-full-art img,
html body .fourfun-card-face.rarity-halloween .fourfun-card-preset-frame,
html body .fourfun-card-back.rarity-halloween .fourfun-card-back-preset,
html body .card-inspector-front.rarity-halloween .card-inspector-main-image,
html body .card-inspector-front.rarity-halloween .card-inspector-preset,
html body .card-inspector-back.rarity-halloween .card-inspector-back-image,
html body .card-catalog-preset-card.rarity-halloween .card-catalog-preset-image,
html body .card-catalog-preset-card.rarity-halloween .card-catalog-preset-frame,
html body .album-preset-card.rarity-halloween .album-preset-card-image,
html body .album-preset-card.rarity-halloween .album-preset-card-frame {
  border-radius: 0 !important;
}

html body .card-inspector-front.rarity-halloween,
html body .card-inspector-back.rarity-halloween,
html body .card-inspector-front.rarity-halloween .card-inspector-main-image,
html body .card-inspector-back.rarity-halloween .card-inspector-back-image,
html body .card-inspector-front.rarity-halloween > .card-inspector-preset {
  background: transparent !important;
}

html body .card-inspector-rotator.rarity-halloween {
  --card-3d-thickness: 10px !important;
  --card-3d-half-thickness: calc(var(--card-3d-thickness) / 2) !important;
  --card-3d-corner-cut: 0px !important;
}
html body .card-inspector-rotator.rarity-halloween .card-inspector-side {
  border-radius: 0 !important;
}

html body .fourfun-card-face.rarity-halloween .fourfun-card-full-art {
  overflow: hidden !important;
  isolation: isolate !important;
}
html body .fourfun-card-face.rarity-halloween .fourfun-card-full-art img {
  transform: translate3d(calc(var(--card-parallax-x, 0px) * 1.25), calc(var(--card-parallax-y, 0px) * 1.25), 0) rotate(calc(var(--card-parallax-rot, 0deg) * 1.25)) scale(1.085) !important;
  transition: transform .16s ease-out !important;
  will-change: transform !important;
}
html body .fourfun-card-shell:hover .fourfun-card-face.rarity-halloween .fourfun-card-full-art img {
  transform: translate3d(calc(var(--card-parallax-x, 0px) * 1.45), calc(var(--card-parallax-y, 0px) * 1.45), 0) rotate(calc(var(--card-parallax-rot, 0deg) * 1.45)) scale(1.095) !important;
}

html body .fourfun-card-face.rarity-halloween .fourfun-card-footer { bottom: 3.25% !important; }
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-halloween .album-preset-card-number { bottom: 4.8% !important; }
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-halloween .album-preset-card-date { bottom: 4.85% !important; }
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card.rarity-halloween .album-preset-card-mark { bottom: 4.5% !important; }

html body .card-album.card-album-modal-book .album-preset-card.rarity-halloween > .halloween-card-pumpkins,
html body .card-album.card-album-modal-book .album-preset-card.rarity-halloween > .halloween-card-bats { display: none !important; }

html body .card-album.card-album-modal-book .card-binder-tabs button.is-halloween {
  position: absolute !important;
  top: -57px !important;
  right: 31px !important;
  width: 86px !important;
  height: 30px !important;
  z-index: 50 !important;
  transform: translate(-11px, 4px) !important;
}
html body .card-album.card-album-modal-book .card-binder-tabs button.is-halloween > span {
  width: 86px !important;
  height: 30px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  border-left: 1px solid rgba(255, 138, 31, .66) !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 8.5px !important;
  letter-spacing: .06em !important;
  text-indent: 0 !important;
  justify-content: center !important;
}

html body .halloween-card-pumpkins,
html body .fourfun-card-shell > .halloween-card-pumpkins,
html body .card-inspector-rotator-host > .halloween-card-pumpkins { display: none !important; }

@keyframes halloween-bat-drift-v396 {
  0%,100% {
    opacity:.18;
    transform:translate(0,0) scale(.92);
  }
  25% {
    opacity:1;
    transform:translate(7px,-8px) scale(1);
  }
  50% {
    opacity:.82;
    transform:translate(13px,1px) scale(.96);
  }
  75% {
    opacity:.96;
    transform:translate(5px,9px) scale(1.03);
  }
}
html body .halloween-card-bats.is-inline {
  inset:-10% !important;
  z-index:48 !important;
  overflow:visible !important;
}
html body .halloween-card-bats.is-inline > i {
  width:10px !important; height:5px !important; opacity:1 !important; background:#563273 !important;
  animation:halloween-bat-drift-v396 4.8s ease-in-out infinite !important;
  filter:drop-shadow(0 0 2px rgba(255,160,58,.72)) drop-shadow(0 0 8px rgba(154,95,214,.42)) !important;
}
html body .halloween-card-bats.is-inline > i::before,
html body .halloween-card-bats.is-inline > i::after {
  top:-5px !important; width:14px !important; height:10px !important; background:#563273 !important; animation:none !important;
  clip-path:polygon(100% 54%,82% 15%,60% 38%,39% 9%,22% 32%,0 0,10% 68%,40% 58%,62% 100%,80% 59%) !important;
}
html body .halloween-card-bats.is-inline > i::before { right:3px !important; }
html body .halloween-card-bats.is-inline > i::after {
  left:3px !important;
  transform:scaleX(-1) !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(1) {
  left:8% !important;
  top:18% !important;
  animation-delay:-.3s !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(2) {
  left:79% !important;
  top:18% !important;
  animation-delay:-1.1s !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(3) {
  left:87% !important;
  top:49% !important;
  animation-delay:-2.1s !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(4) {
  left:76% !important;
  top:80% !important;
  animation-delay:-3.2s !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(5) {
  left:16% !important;
  top:83% !important;
  animation-delay:-2.6s !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(6) {
  left:3% !important;
  top:54% !important;
  animation-delay:-.8s !important;
}
html body .halloween-card-bats.is-inline > i:nth-child(7) {
  left:44% !important;
  top:4% !important;
  animation-delay:-1.7s !important;
}

html body .card-inspector-backdrop.rarity-halloween .card-inspector-rotator-host > .halloween-card-bats {
  inset:-8% !important; z-index:40 !important; overflow:visible !important; transform:translateZ(14px) !important;
}
html body .card-inspector-backdrop.rarity-halloween .card-inspector-rotator-host > .halloween-card-bats > i {
  width:12px !important;
  height:6px !important;
}
html body .card-inspector-backdrop.rarity-halloween .card-inspector-rotator-host > .halloween-card-bats > i::before,
html body .card-inspector-backdrop.rarity-halloween .card-inspector-rotator-host > .halloween-card-bats > i::after {
  width:17px !important;
  height:12px !important;
}

html body .card-inspector-backdrop.rarity-halloween { overflow:hidden !important; }
html body .card-inspector-backdrop.rarity-halloween::before {
  content:"" !important; position:absolute !important; inset:0 !important;
  background:var(--bryer-css-v60-halloweenbg, url('/images/halloweenbg.png')) center center / cover no-repeat !important;
  opacity:.62 !important; z-index:1 !important; pointer-events:none !important;
}
html body .card-inspector-backdrop.rarity-halloween > .halloween-inspector-swarm {
  position:absolute !important; inset:0 !important; z-index:2 !important; overflow:hidden !important; pointer-events:none !important;
}
html body .card-inspector-backdrop.rarity-halloween > .card-inspector,
html body .card-inspector-backdrop.rarity-halloween > .card-inspector-close { z-index:4 !important; }

html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i {
  position:absolute !important; left:var(--swarm-x) !important; top:var(--swarm-y) !important;
  width:auto !important; height:auto !important; display:block !important; opacity:0 !important; visibility:visible !important;
  background:none !important; border-radius:0 !important; box-shadow:none !important;
  animation:halloweenInspectorEmojiRainV396 var(--swarm-duration) linear infinite !important;
  animation-delay:var(--swarm-delay) !important;
}
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i::before {
  position:relative !important; display:block !important; inset:auto !important; width:auto !important; height:auto !important;
  background:none !important; clip-path:none !important; box-shadow:none !important; font-size:var(--swarm-size) !important; line-height:1 !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)) !important;
}
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i::after {
  content:none !important;
  display:none !important;
}
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i.is-pumpkin::before { content:'🎃' !important; }
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i.is-bat::before { content:'🦇' !important; }
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i.is-spider::before { content:'🕷️' !important; }
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i.is-web::before { content:'🕸' !important; }
html body .card-inspector-backdrop.rarity-halloween .halloween-inspector-swarm > i.is-candy::before { content:'🍬' !important; }
@keyframes halloweenInspectorEmojiRainV396 {
  0% {
    opacity:0;
    transform:translate(-50%,-16vh) rotate(0deg) scale(.86);
  }
  10% { opacity:.70; }
  50% {
    opacity:.76;
    transform:translate(calc(-50% + 8px),38vh) rotate(5deg) scale(1);
  }
  90% { opacity:.68; }
  100% {
    opacity:0;
    transform:translate(calc(-50% - 10px),112vh) rotate(-8deg) scale(1.04);
  }
}

html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-halloween::before,
html body .card-album.card-album-modal-book .card-book-slot > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-halloween::after { display:none !important; }

html body .card-inspector-backdrop.rarity-halloween .card-inspector-front.rarity-halloween .card-inspector-main-image {
  transform:
    translate3d(var(--card-parallax-x, 0px), var(--card-parallax-y, 0px), 0)
    rotate(var(--card-parallax-rot, 0deg))
    scale(1.028) !important;
  transform-origin: center center !important;
  transition: transform 80ms linear !important;
  will-change: transform !important;
}

html body .card-inspector-backdrop.rarity-halloween .card-inspector-front.rarity-halloween .card-inspector-main-image {
  transform:
    translate3d(var(--card-parallax-x, 0px), var(--card-parallax-y, 0px), 0)
    rotate(var(--card-parallax-rot, 0deg))
    scale(1.028) !important;
  transform-origin: center center !important;
  transition: none !important;
  will-change: transform !important;
}

html body .fourfun-card-face.rarity-halloween .fourfun-card-holo,
html body .fourfun-card-face.rarity-halloween .fourfun-card-gloss,
html body .fourfun-card-back.rarity-halloween .fourfun-card-holo,
html body .fourfun-card-back.rarity-halloween .fourfun-card-gloss,
html body .card-inspector-front.rarity-halloween .fourfun-card-holo,
html body .card-inspector-front.rarity-halloween .fourfun-card-gloss,
html body .card-pack-result-card.rarity-halloween .fourfun-card-holo,
html body .card-pack-result-card.rarity-halloween .fourfun-card-gloss,
html body .album-preset-card.rarity-halloween .fourfun-card-holo,
html body .album-preset-card.rarity-halloween .fourfun-card-gloss {
  display: none !important;
}

@keyframes halloweenBuyAuraPulse {
  0%, 100% {
    opacity: .38;
    transform: scale(.985);
    filter: blur(9px);
  }
  50% {
    opacity: .72;
    transform: scale(1.025);
    filter: blur(12px);
  }
}

@keyframes halloweenBuyWispSweep {
  0%, 14% {
    opacity: 0;
    transform: translate3d(-130%, 7px, 0) skewX(-19deg) scaleX(.72);
  }
  25% { opacity: .72; }
  52% { opacity: .42; }
  72%, 100% {
    opacity: 0;
    transform: translate3d(160%, -5px, 0) skewX(-19deg) scaleX(1.08);
  }
}

@keyframes halloweenBuyCardShuffleOne {
  0%, 68%, 100% { transform: translate(-9px, 2px) rotate(-14deg); }
  76% { transform: translate(-15px, -5px) rotate(-21deg); }
  84% { transform: translate(-7px, -1px) rotate(-10deg); }
}
@keyframes halloweenBuyCardShuffleTwo {
  0%, 68%, 100% { transform: translate(0, -2px) rotate(0deg); }
  76% { transform: translate(2px, -10px) rotate(5deg); }
  84% { transform: translate(-1px, -3px) rotate(-3deg); }
}
@keyframes halloweenBuyCardShuffleThree {
  0%, 68%, 100% { transform: translate(9px, 2px) rotate(14deg); }
  76% { transform: translate(15px, -5px) rotate(21deg); }
  84% { transform: translate(7px, -1px) rotate(10deg); }
}

@keyframes halloweenBuyBatHover {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.035); }
}

@keyframes halloweenBuyPumpkinGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,124,24,.35)); }
  50% { filter: drop-shadow(0 0 8px rgba(255,128,24,.72)); }
}

@keyframes halloweenBuyRunePulse {
  0%, 100% { opacity: .26; }
  50% { opacity: .72; }
}

@keyframes halloweenBuyParticleRise {
  0%, 18% {
    opacity: 0;
    transform: translateY(8px) scale(.65) rotate(0deg);
  }
  36% { opacity: .75; }
  68% { opacity: .45; }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(18deg);
  }
}

.purchase-action-pair.purchase-style-halloween,
.inventory-open-button-shell.inventory-open-style-halloween,
.peek-close-button-shell.peek-close-style-halloween {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.view-shop .box-card .card-actions .purchase-action-pair.purchase-style-halloween {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.purchase-style-halloween > button.box-buy-button.buy-style-halloween,
.purchase-style-halloween > button.box-buy-button.buy-style-halloween:hover:not(:disabled),
.purchase-style-halloween > button.box-buy-button.buy-style-halloween:focus-visible,
.purchase-style-halloween > button.box-buy-button.buy-style-halloween:disabled,
.inventory-open-style-halloween > button.inventory-open-custom-button,
.inventory-open-style-halloween > button.inventory-open-custom-button:hover:not(:disabled),
.inventory-open-style-halloween > button.inventory-open-custom-button:focus-visible,
.inventory-open-style-halloween > button.inventory-open-custom-button:disabled,
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween,
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween:hover:not(:disabled),
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween:focus-visible,
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween:disabled {
  --halloween-ink: #09060d;
  --halloween-plum: #24122f;
  --halloween-purple: #5d2b7b;
  --halloween-violet: #9152b6;
  --halloween-orange: #f07818;
  --halloween-ember: #ffad31;
  --halloween-gold: #d69a39;
  --halloween-bone: #f4e8c9;
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  min-height: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.34)) drop-shadow(0 0 6px rgba(119,54,145,.18)) !important;
  transition: transform .16s ease, filter .16s ease !important;
}

.purchase-style-halloween > button.box-buy-button.buy-style-halloween::before,
.purchase-style-halloween > button.box-buy-button.buy-style-halloween::after,
.inventory-open-style-halloween > button.inventory-open-custom-button::before,
.inventory-open-style-halloween > button.inventory-open-custom-button::after,
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween::before,
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween::after {
  content: none !important;
  display: none !important;
}

.purchase-style-halloween > button.box-buy-button.buy-style-halloween:hover:not(:disabled),
.inventory-open-style-halloween > button.inventory-open-custom-button:hover:not(:disabled),
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 7px 6px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(239,112,24,.24)) !important;
}

.purchase-style-halloween > button.box-buy-button.buy-style-halloween:active:not(:disabled),
.inventory-open-style-halloween > button.inventory-open-custom-button:active:not(:disabled),
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween:active:not(:disabled) {
  transform: translateY(1px) scale(.993) !important;
}

.purchase-style-halloween > button.box-buy-button.buy-style-halloween:focus-visible,
.inventory-open-style-halloween > button.inventory-open-custom-button:focus-visible,
.peek-close-style-halloween > button.peek-close-button.buy-style-halloween:focus-visible {
  outline: 2px solid #f69b39 !important;
  outline-offset: 5px !important;
}

.halloween-buy-stage {
  position: absolute !important;
  left: -10px !important;
  right: -10px !important;
  top: 50% !important;
  width: calc(100% + 20px) !important;
  height: 92px !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.34));
}
.halloween-stage-vine {
  fill: #130a19;
  stroke: #a15d32;
  stroke-width: 8;
}
.halloween-stage-vine-inner {
  fill: #32133e;
  stroke: #7c3e91;
  stroke-width: 5;
}
.halloween-stage-thread {
  fill: none;
  stroke: #d8983a;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .74;
}
.halloween-stage-web {
  fill: none;
  stroke: rgba(235,216,190,.68);
  stroke-width: 4;
  stroke-linecap: round;
}
.halloween-stage-pumpkin ellipse {
  fill: #d65e12;
  stroke: #ffad36;
  stroke-width: 5;
}
.halloween-stage-pumpkin > path:not(.face) {
  fill: none;
  stroke: #65732d;
  stroke-width: 6;
  stroke-linecap: round;
}
.halloween-stage-pumpkin .face {
  fill: none;
  stroke: #3a1012;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.halloween-stage-pumpkin {
  animation: halloweenBuyPumpkinGlow 3.6s ease-in-out infinite;
}
.halloween-stage-pumpkin-right { animation-delay: -1.8s; }
.halloween-stage-card-fan rect {
  fill: #21102b;
  stroke: #d99237;
  stroke-width: 4;
}
.halloween-stage-card-fan-left rect:nth-child(1),
.halloween-stage-card-fan-right rect:nth-child(3) { fill: #471d51; }
.halloween-stage-card-fan-left rect:nth-child(3),
.halloween-stage-card-fan-right rect:nth-child(1) { fill: #612039; }
.halloween-stage-bat {
  fill: #0a0710;
  stroke: #9d5fb0;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: halloweenBuyBatHover 3.2s ease-in-out infinite;
}

.halloween-buy__ornament {
  position: absolute;
  inset: -6px -8px;
  z-index: 1;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.halloween-buy__ornament::before {
  content: "";
  position: absolute;
  inset: 13px 18px 12px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at center, rgba(143,65,171,.34), rgba(143,65,171,.08) 44%, transparent 72%),
    radial-gradient(ellipse at center, rgba(244,112,20,.18), transparent 64%);
  animation: halloweenBuyAuraPulse 3.8s ease-in-out infinite;
}
.halloween-buy__frame {
  position: absolute;
  inset: 17% 2.8%;
  z-index: 2;
  clip-path: polygon(4.6% 0, 95.4% 0, 100% 50%, 95.4% 100%, 4.6% 100%, 0 50%);
  background:
    linear-gradient(180deg, #f5c361 0%, #9c4d1d 9%, #3a142d 19%, #b86c28 30%, #5d276f 49%, #2a102f 67%, #bd7029 82%, #f0ad43 100%);
  box-shadow:
    0 0 0 1px #210c25,
    inset 0 0 0 2px rgba(255,180,78,.44),
    inset 0 4px 5px rgba(255,219,151,.28),
    inset 0 -5px 6px rgba(8,2,12,.62),
    0 0 9px rgba(104,44,124,.28);
}
.halloween-buy__inner {
  position: absolute;
  left: 7.1%;
  right: 7.1%;
  top: 28%;
  bottom: 28%;
  z-index: 3;
  border: 1px solid rgba(244,153,61,.50);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% -25%, rgba(152,76,175,.30), transparent 54%),
    linear-gradient(180deg, #251229 0%, #140a1c 46%, #0b0710 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,202,125,.16),
    inset 0 -3px 7px rgba(0,0,0,.58),
    0 0 0 2px #401c3d;
}
.halloween-buy__inner::before {
  content: "";
  position: absolute;
  inset: 5px 14px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(136,69,151,.05) 18px 19px),
    linear-gradient(90deg, rgba(255,116,23,.06), transparent 18%, transparent 82%, rgba(255,116,23,.06));
  animation: halloweenBuyRunePulse 3.4s ease-in-out infinite;
}

.halloween-buy__web {
  position: absolute;
  top: 23%;
  width: 15%;
  aspect-ratio: 1;
  z-index: 6;
  opacity: .64;
  background:
    repeating-conic-gradient(from -6deg at 0 0, rgba(236,222,202,.64) 0 1deg, transparent 1deg 28deg),
    radial-gradient(circle at 0 0, transparent 0 29%, rgba(236,222,202,.42) 30% 31%, transparent 32% 50%, rgba(236,222,202,.34) 51% 52%, transparent 53% 100%);
  transform-origin: top left;
}
.halloween-buy__web--left { left: 8%; }
.halloween-buy__web--right {
  right: 8%;
  transform: scaleX(-1);
}

.halloween-buy__moon {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 30px;
  aspect-ratio: 1;
  z-index: 5;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffe8a5 0 10%, #f4ad42 35%, #a84d22 72%, #4b1633 100%);
  box-shadow: 0 0 10px rgba(255,155,47,.42), inset -5px -4px 6px rgba(75,19,48,.28);
}
.halloween-buy__bat {
  position: absolute;
  left: 50%;
  top: 21%;
  z-index: 7;
  width: 10px;
  height: 8px;
  translate: -50% 0;
  border-radius: 55% 55% 42% 42%;
  background: #09070d;
  animation: halloweenBuyBatHover 3.2s ease-in-out infinite;
}
.halloween-buy__bat > i {
  position: absolute;
  top: -2px;
  width: 23px;
  height: 15px;
  background: #09070d;
  clip-path: polygon(100% 48%, 76% 8%, 58% 34%, 36% 4%, 14% 35%, 0 18%, 9% 80%, 35% 62%, 61% 100%, 79% 58%);
}
.halloween-buy__bat > i:first-child { right: 5px; }
.halloween-buy__bat > i:last-child {
  left: 5px;
  transform: scaleX(-1);
}

.halloween-buy__card {
  position: absolute;
  right: 13.5%;
  top: 35%;
  z-index: 7;
  width: 18px;
  height: 25px;
  border: 1px solid #d8973b;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 35%),
    linear-gradient(160deg, #5b2871, #26112e 58%, #100813);
  box-shadow: inset 0 0 0 2px rgba(18,7,24,.76), 0 2px 3px rgba(0,0,0,.36);
  transform-origin: 50% 100%;
}
.halloween-buy__card::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 4px;
  height: 10px;
  border-radius: 2px;
  background: radial-gradient(circle, #f4791d 0 18%, #6c2b72 20% 48%, #150b1c 50% 100%);
}
.halloween-buy__card--one { animation: halloweenBuyCardShuffleOne 5.1s ease-in-out infinite; }
.halloween-buy__card--two {
  animation: halloweenBuyCardShuffleTwo 5.1s ease-in-out infinite;
  z-index: 8;
}
.halloween-buy__card--three { animation: halloweenBuyCardShuffleThree 5.1s ease-in-out infinite; }

.halloween-buy__pumpkin {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 32px;
  height: 27px;
  translate: 0 -50%;
  border: 2px solid #8b3916;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 23%, rgba(91,34,20,.24) 24% 31%, transparent 32%),
    linear-gradient(90deg, #9f3d14, #eb7318 24%, #ff9c25 50%, #e96b16 76%, #993713);
  box-shadow: inset 0 -5px 6px rgba(83,24,18,.30), 0 0 7px rgba(242,103,22,.32);
  animation: halloweenBuyPumpkinGlow 3.6s ease-in-out infinite;
}
.halloween-buy__pumpkin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 5px;
  height: 10px;
  border-radius: 3px 3px 0 0;
  background: #586426;
  transform: translateX(-50%) rotate(7deg);
}
.halloween-buy__pumpkin > i,
.halloween-buy__pumpkin > i::before,
.halloween-buy__pumpkin > i::after {
  position: absolute;
  display: block;
  content: "";
  background: #321018;
}
.halloween-buy__pumpkin > i {
  left: 50%; top: 49%; width: 11px; height: 3px; translate: -50% 0;
  clip-path: polygon(0 0, 20% 100%, 50% 42%, 80% 100%, 100% 0, 50% 60%);
}
.halloween-buy__pumpkin > i::before {
  width: 6px;
  height: 5px;
  left: -7px;
  top: -7px;
  clip-path: polygon(0 0,100% 45%,18% 100%);
}
.halloween-buy__pumpkin > i::after {
  width: 6px;
  height: 5px;
  right: -7px;
  top: -7px;
  clip-path: polygon(100% 0,0 45%,82% 100%);
}
.halloween-buy__pumpkin--left { left: 1.4%; }
.halloween-buy__pumpkin--right {
  right: 1.4%;
  animation-delay: -1.8s;
}

.halloween-buy__wisp {
  position: absolute;
  top: 31%;
  bottom: 31%;
  z-index: 6;
  width: 17%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(154,77,178,.10), rgba(220,152,255,.42), rgba(255,134,42,.24), transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: halloweenBuyWispSweep 4.8s ease-in-out infinite;
}
.halloween-buy__wisp--one { left: 6%; }
.halloween-buy__wisp--two {
  left: 19%;
  animation-delay: -2.4s;
  opacity: .6;
}

.purchase-style-halloween .custom-buy-fx.custom-buy-fx-halloween,
.inventory-open-style-halloween .custom-buy-fx.custom-buy-fx-halloween,
.peek-close-style-halloween .custom-buy-fx.custom-buy-fx-halloween {
  position: absolute !important;
  inset: -10px -12px !important;
  z-index: 11 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.purchase-style-halloween .custom-buy-fx.custom-buy-fx-halloween i,
.inventory-open-style-halloween .custom-buy-fx.custom-buy-fx-halloween i,
.peek-close-style-halloween .custom-buy-fx.custom-buy-fx-halloween i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #ffd589 0 25%, #f37a1c 26% 52%, #6f3288 53% 100%);
  box-shadow: 0 0 7px rgba(247,116,27,.52), 0 0 10px rgba(126,58,150,.28);
  animation: halloweenBuyParticleRise 3.8s ease-in-out infinite;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(1), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(1), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(1) {
  left: 8%;
  bottom: 9px;
  animation-delay: -.2s;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(2), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(2), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(2) {
  left: 20%;
  top: 13px;
  animation-delay: -1.1s;
  width: 4px;
  height: 4px;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(3), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(3), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(3) {
  left: 36%;
  bottom: 7px;
  animation-delay: -2.2s;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(4), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(4), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(4) {
  right: 36%;
  top: 8px;
  animation-delay: -3.0s;
  width: 4px;
  height: 4px;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(5), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(5), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(5) {
  right: 21%;
  bottom: 10px;
  animation-delay: -1.7s;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(6), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(6), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(6) {
  right: 8%;
  top: 14px;
  animation-delay: -.8s;
  width: 4px;
  height: 4px;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(7), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(7), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(7) {
  left: 49%;
  top: 4px;
  animation-delay: -2.6s;
}
.purchase-style-halloween .custom-buy-fx-halloween i:nth-child(8), .inventory-open-style-halloween .custom-buy-fx-halloween i:nth-child(8), .peek-close-style-halloween .custom-buy-fx-halloween i:nth-child(8) {
  left: 55%;
  bottom: 4px;
  animation-delay: -3.4s;
  width: 4px;
  height: 4px;
}

.purchase-style-halloween .box-buy-button-label,
.inventory-open-style-halloween .inventory-open-button-label,
.peek-close-style-halloween .box-buy-button-label {
  position: relative !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 72px 0 58px !important;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #fff3ca 0%, #ffc86a 23%, #ef7e24 49%, #f7d58e 58%, #a74b86 82%, #6e2b75 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-stroke: .55px rgba(48,13,41,.88) !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.48) !important;
  filter: drop-shadow(0 0 4px rgba(244,117,30,.16));
  pointer-events: none !important;
}

.purchase-style-halloween > button.box-buy-button.buy-style-halloween.has-long-label .box-buy-button-label {
  font-size: 14px !important;
  letter-spacing: .015em !important;
  padding-inline: 54px !important;
}

.box-card.is-sold-out .purchase-style-halloween .halloween-buy__ornament,
.box-card.is-sold-out .purchase-style-halloween .halloween-buy-stage,
.box-card.is-sold-out .purchase-style-halloween .custom-buy-fx-halloween {
  opacity: .36 !important;
  filter: saturate(.24) brightness(.78) !important;
}

.rewards-modal-footer .peek-close-button-shell.peek-close-style-halloween {
  width: 258px !important;
}
.rewards-modal-footer .peek-close-button-shell.peek-close-style-halloween .peek-close-button.buy-style-halloween {
  min-height: 64px !important;
  height: 64px !important;
}

@media (max-width: 700px) {
  .view-shop .box-card .card-actions .purchase-action-pair.purchase-style-halloween {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }
  .purchase-style-halloween > button.box-buy-button.buy-style-halloween,
  .inventory-open-style-halloween > button.inventory-open-custom-button,
  .peek-close-style-halloween > button.peek-close-button.buy-style-halloween {
    min-height: 54px !important;
    height: 54px !important;
  }
  .halloween-buy__ornament { inset: -5px -6px; }
  .halloween-buy-stage { height: 82px !important; }
  .purchase-style-halloween .box-buy-button-label,
  .inventory-open-style-halloween .inventory-open-button-label,
  .peek-close-style-halloween .box-buy-button-label {
    min-height: 40px !important;
    padding: 0 60px 0 48px !important;
    font-size: 21px !important;
  }
  .halloween-buy__pumpkin {
    width: 28px;
    height: 24px;
  }
  .halloween-buy__moon { width: 26px; }
  .halloween-buy__card {
    width: 16px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .halloween-buy__ornament::before,
  .halloween-buy__inner::before,
  .halloween-buy__bat,
  .halloween-buy__card,
  .halloween-buy__pumpkin,
  .halloween-buy__wisp,
  .halloween-stage-bat,
  .halloween-stage-pumpkin,
  .custom-buy-fx-halloween i {
    animation: none !important;
  }
}

.halloween-buy__moon {
  top: 13% !important;
  width: 28px !important;
  background: radial-gradient(circle at 38% 34%, #fff1ba 0 18%, #f5d47b 48%, #d09a38 76%, #7e4a22 100%) !important;
  box-shadow: 0 0 9px rgba(255, 208, 96, .28), inset -4px -4px 6px rgba(97, 49, 18, .18) !important;
}
.halloween-buy__moon::before {
  content: "";
  position: absolute;
  inset: 3px 2px 3px 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #241229, #130a18);
}

.halloween-buy__web {
  top: 17% !important;
  width: 10.5% !important;
  opacity: .52 !important;
}
.halloween-buy__web--left { left: 10.8% !important; }
.halloween-buy__web--right { right: 10.8% !important; }

.halloween-buy__card--left-one,
.halloween-buy__card--left-two,
.halloween-buy__card--left-three {
  left: 13.5% !important;
  right: auto !important;
}
.halloween-buy__card--left-one {
  animation: halloweenBuyCardShuffleThree 5.1s ease-in-out infinite !important;
}
.halloween-buy__card--left-two {
  animation: halloweenBuyCardShuffleTwo 5.1s ease-in-out infinite !important;
  z-index: 8 !important;
}
.halloween-buy__card--left-three {
  animation: halloweenBuyCardShuffleOne 5.1s ease-in-out infinite !important;
}

.halloween-buy__pumpkin {
  width: 36px !important;
  height: 30px !important;
}
.halloween-buy__pumpkin--left { left: 3.2% !important; }
.halloween-buy__pumpkin--right { right: 3.2% !important; }

@media (max-width: 700px) {
  .halloween-buy__web {
    top: 18% !important;
    width: 11% !important;
  }
  .halloween-buy__pumpkin {
    width: 33px !important;
    height: 28px !important;
  }
  .halloween-buy__card--left-one,
  .halloween-buy__card--left-two,
  .halloween-buy__card--left-three {
    left: 14.5% !important;
  }
}

.halloween-buy__web {
  z-index: 11 !important;
  top: 14% !important;
  width: 9.2% !important;
  opacity: .62 !important;
}
.halloween-buy__web--left {
  left: 7.2% !important;
}
.halloween-buy__web--right {
  right: 7.2% !important;
}

.halloween-buy__moon {
  display: none !important;
}
.halloween-buy__moon::before {
  content: none !important;
}

.halloween-buy__bat {
  top: 15.5% !important;
  width: 11px !important;
  height: 8px !important;
  background: #120b17 !important;
  border-radius: 50% 50% 45% 45% !important;
  box-shadow: 0 0 6px rgba(217, 120, 49, .18) !important;
}
.halloween-buy__bat > i {
  top: -1px !important;
  width: 19px !important;
  height: 11px !important;
  background: #120b17 !important;
  clip-path: polygon(100% 58%, 84% 13%, 65% 33%, 47% 3%, 28% 31%, 0 12%, 10% 73%, 39% 57%, 61% 96%, 82% 61%) !important;
}
.halloween-buy__bat > i:first-child { right: 6px !important; }
.halloween-buy__bat > i:last-child {
  left: 6px !important;
  transform: scaleX(-1) !important;
}

.purchase-style-halloween .box-buy-button-label,
.inventory-open-style-halloween .inventory-open-button-label,
.peek-close-style-halloween .box-buy-button-label {
  padding: 0 64px !important;
  font-size: 25px !important;
  letter-spacing: .045em !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: border-box !important;
  color: #fff1cf !important;
  -webkit-text-fill-color: #fff1cf !important;
  -webkit-text-stroke: .85px rgba(42, 13, 27, .98) !important;
  text-shadow:
    0 1px 0 rgba(52, 16, 31, .95),
    0 2px 3px rgba(0, 0, 0, .52),
    0 0 6px rgba(255, 155, 53, .18) !important;
  filter: none !important;
}
.purchase-style-halloween > button.box-buy-button.buy-style-halloween.has-long-label .box-buy-button-label {
  font-size: 15px !important;
  letter-spacing: .01em !important;
  padding-inline: 50px !important;
}

@media (max-width: 700px) {
  .halloween-buy__web {
    top: 15% !important;
    width: 9.8% !important;
  }
  .purchase-style-halloween .box-buy-button-label,
  .inventory-open-style-halloween .inventory-open-button-label,
  .peek-close-style-halloween .box-buy-button-label {
    font-size: 22px !important;
    padding: 0 56px !important;
  }
}

.halloween-buy__web {
  z-index: 12 !important;
  width: 9.8% !important;
  top: 13% !important;
  opacity: .66 !important;
}
.halloween-buy__web--left {
  left: 2.4% !important;
  top: 11% !important;
}
.halloween-buy__web--right {
  right: 7.2% !important;
  top: calc(14% + 3px) !important;
}

.halloween-buy__moon,
.halloween-buy__bat {
  display: none !important;
}
.halloween-buy__candle {
  position: absolute;
  top: 7px;
  z-index: 12;
  width: 11px;
  height: 22px;
  border-radius: 4px 4px 3px 3px;
  border: 1px solid rgba(92, 36, 20, .9);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #f5e2ca 0%, #f0cfa9 45%, #d89a69 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.22),
    inset 0 -2px 4px rgba(113, 59, 31, .22);
}
.halloween-buy__candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 1px;
  height: 5px;
  background: #3f2518;
  transform: translateX(-50%);
}
.halloween-buy__candle > i {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 10px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 60% 60% 60% 60% / 68% 68% 35% 35%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,252,227,.95) 0 18%, rgba(255,212,96,.92) 19% 38%, rgba(255,129,36,.9) 39% 72%, rgba(255,129,36,0) 73%),
    linear-gradient(180deg, rgba(255,240,176,.95), rgba(255,140,34,.88));
  filter: drop-shadow(0 0 6px rgba(255, 160, 46, .38));
  animation: halloweenBuyCandleFlicker 2.6s ease-in-out infinite;
}
.halloween-buy__candle--left {
  left: 44.4%;
  height: 19px;
  top: 10px;
}
.halloween-buy__candle--center { left: 49.4%; }
.halloween-buy__candle--right {
  left: 54.2%;
  height: 20px;
  top: 9px;
}
.halloween-buy__candle--left > i { animation-delay: -.8s; }
.halloween-buy__candle--right > i { animation-delay: -1.3s; }

.halloween-buy__candy {
  position: absolute;
  top: 13px;
  z-index: 12;
  width: 12px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.halloween-buy__candy::before,
.halloween-buy__candy::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 7px;
  transform: translateY(-50%);
  clip-path: polygon(0 50%, 100% 0, 84% 50%, 100% 100%);
  opacity: .92;
}
.halloween-buy__candy::before { left: -4px; }
.halloween-buy__candy::after {
  right: -4px;
  transform: translateY(-50%) scaleX(-1);
}
.halloween-buy__candy--one {
  left: 39.4%;
  background: linear-gradient(180deg, #7a45b0, #4f247d);
}
.halloween-buy__candy--one::before,
.halloween-buy__candy--one::after { background: #b493e0; }
.halloween-buy__candy--two {
  left: 42.1%;
  top: 18px;
  width: 10px;
  height: 7px;
  background: linear-gradient(180deg, #eb8b26, #c55d12);
}
.halloween-buy__candy--two::before,
.halloween-buy__candy--two::after { background: #ffd27e; }
.halloween-buy__candy--three {
  left: 57.6%;
  top: 18px;
  width: 10px;
  height: 7px;
  background: linear-gradient(180deg, #eb8b26, #c55d12);
}
.halloween-buy__candy--three::before,
.halloween-buy__candy--three::after { background: #ffd27e; }
.halloween-buy__candy--four {
  left: 60.1%;
  background: linear-gradient(180deg, #7a45b0, #4f247d);
}
.halloween-buy__candy--four::before,
.halloween-buy__candy--four::after { background: #b493e0; }

@keyframes halloweenBuyCandleFlicker {
  0%, 100% {
    transform: translateX(-50%) scale(1) rotate(-2deg);
    opacity: .94;
  }
  35% {
    transform: translateX(-50%) scale(1.04, 1.08) rotate(2deg);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) scale(.96, .92) rotate(-1deg);
    opacity: .9;
  }
}

.halloween-buy__card {
  top: 35% !important;
}
.halloween-buy__card--one,
.halloween-buy__card--two,
.halloween-buy__card--three {
  right: 16.8% !important;
}
.halloween-buy__card--left-one,
.halloween-buy__card--left-two,
.halloween-buy__card--left-three {
  left: 16.8% !important;
}

.halloween-buy__pumpkin {
  width: 39px !important;
  height: 32px !important;
}
.halloween-buy__pumpkin > i,
.halloween-buy__pumpkin > i::before,
.halloween-buy__pumpkin > i::after {
  display: none !important;
}
.halloween-buy__pumpkin--left { left: 4.2% !important; }
.halloween-buy__pumpkin--right { right: 4.2% !important; }

@media (max-width: 700px) {
  .halloween-buy__web { width: 10.4% !important; }
  .halloween-buy__web--left { left: 3.2% !important; }
  .halloween-buy__web--right { right: 8.4% !important; }
  .halloween-buy__card--one,
  .halloween-buy__card--two,
  .halloween-buy__card--three { right: 17.8% !important; }
  .halloween-buy__card--left-one,
  .halloween-buy__card--left-two,
  .halloween-buy__card--left-three { left: 17.8% !important; }
  .halloween-buy__pumpkin {
    width: 36px !important;
    height: 30px !important;
  }
}

.halloween-buy__candle {
  top: -8px !important;
  z-index: 12 !important;
  width: 12px !important;
  height: 26px !important;
  border-radius: 4px 4px 3px 3px !important;
  border: 1px solid rgba(104, 50, 26, .92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0) 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #f8e8d3 0%, #efc99f 44%, #d48b55 100%) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.20),
    inset 0 -3px 5px rgba(108, 58, 31, .24) !important;
}
.halloween-buy__candle::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -5px !important;
  width: 1px !important;
  height: 6px !important;
  background: #3a2417 !important;
  transform: translateX(-50%) !important;
}
.halloween-buy__candle::after {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  top: 2px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 244, 227, .62) !important;
}
.halloween-buy__candle > i {
  position: absolute !important;
  left: 50% !important;
  top: -16px !important;
  width: 11px !important;
  height: 15px !important;
  transform: translateX(-50%) !important;
  border-radius: 56% 56% 64% 64% / 76% 76% 26% 26% !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,249,220,.98) 0 14%, rgba(255,230,132,.96) 15% 30%, rgba(255,156,46,.94) 31% 62%, rgba(255,156,46,0) 63%),
    linear-gradient(180deg, rgba(255,240,176,.98), rgba(255,142,37,.92)) !important;
  filter: drop-shadow(0 0 7px rgba(255, 170, 59, .40)) !important;
  animation: halloweenBuyCandleFlicker 2.4s ease-in-out infinite !important;
}
.halloween-buy__candle--left {
  left: 17.5% !important;
  top: -9px !important;
  height: 24px !important;
}
.halloween-buy__candle--center {
  left: 49.4% !important;
  top: -12px !important;
  height: 28px !important;
}
.halloween-buy__candle--right {
  left: 80.2% !important;
  top: -8px !important;
  height: 25px !important;
}
.halloween-buy__candle--left > i { animation-delay: -.7s !important; }
.halloween-buy__candle--right > i { animation-delay: -1.2s !important; }

.halloween-buy__candy {
  top: -2px !important;
  z-index: 12 !important;
  width: 14px !important;
  height: 9px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.24) !important;
}
.halloween-buy__candy::before,
.halloween-buy__candy::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 7px !important;
  height: 8px !important;
  transform: translateY(-50%) !important;
  clip-path: polygon(0 50%, 100% 0, 84% 50%, 100% 100%) !important;
  opacity: .96 !important;
}
.halloween-buy__candy::before { left: -5px !important; }
.halloween-buy__candy::after {
  right: -5px !important;
  transform: translateY(-50%) scaleX(-1) !important;
}
.halloween-buy__candy--one {
  left: 30.2% !important;
  background:
    linear-gradient(90deg, #6b37a8 0 28%, #dfc6ff 28% 36%, #6b37a8 36% 64%, #dfc6ff 64% 72%, #6b37a8 72% 100%) !important;
  transform: rotate(-10deg) !important;
}
.halloween-buy__candy--one::before,
.halloween-buy__candy--one::after { background: #c7b0ec !important; }
.halloween-buy__candy--two {
  left: 39.6% !important;
  top: 3px !important;
  background:
    linear-gradient(90deg, #d86c19 0 28%, #ffd58f 28% 36%, #d86c19 36% 64%, #ffd58f 64% 72%, #d86c19 72% 100%) !important;
  transform: rotate(8deg) !important;
}
.halloween-buy__candy--two::before,
.halloween-buy__candy--two::after { background: #ffd58f !important; }
.halloween-buy__candy--three {
  left: 58.6% !important;
  top: 3px !important;
  background:
    linear-gradient(90deg, #d86c19 0 28%, #ffd58f 28% 36%, #d86c19 36% 64%, #ffd58f 64% 72%, #d86c19 72% 100%) !important;
  transform: rotate(-8deg) !important;
}
.halloween-buy__candy--three::before,
.halloween-buy__candy--three::after { background: #ffd58f !important; }
.halloween-buy__candy--four {
  left: 69.1% !important;
  background:
    linear-gradient(90deg, #6b37a8 0 28%, #dfc6ff 28% 36%, #6b37a8 36% 64%, #dfc6ff 64% 72%, #6b37a8 72% 100%) !important;
  transform: rotate(10deg) !important;
}
.halloween-buy__candy--four::before,
.halloween-buy__candy--four::after { background: #c7b0ec !important; }

@media (max-width: 700px) {
  .halloween-buy__candle--left { left: 18.5% !important; }
  .halloween-buy__candle--right { left: 79.2% !important; }
  .halloween-buy__candy--one { left: 31.2% !important; }
  .halloween-buy__candy--two { left: 41.4% !important; }
  .halloween-buy__candy--three { left: 57.1% !important; }
  .halloween-buy__candy--four { left: 67.0% !important; }
}

.halloween-buy__candle {
  width: 10px !important;
  height: 22px !important;
  top: -5px !important;
}
.halloween-buy__candle::before {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  bottom: 0 !important;
  width: 6px !important;
  height: 15px !important;
  border-radius: 3px 3px 2px 2px !important;
  border: 1px solid rgba(104, 50, 26, .86) !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 250, 225, .95) 0 18%, rgba(255, 194, 84, .92) 19% 34%, rgba(255, 194, 84, 0) 35%),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, #f7e6d0 0%, #efcea5 48%, #d58f57 100%) !important;
  box-shadow: 9px 2px 0 -1px rgba(0,0,0,0) !important;
}
.halloween-buy__candle::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  bottom: 0 !important;
  width: 6px !important;
  height: 13px !important;
  border-radius: 3px 3px 2px 2px !important;
  border: 1px solid rgba(104, 50, 26, .84) !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 250, 225, .95) 0 18%, rgba(255, 194, 84, .92) 19% 34%, rgba(255, 194, 84, 0) 35%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #f7e6d0 0%, #efcea5 48%, #d58f57 100%) !important;
}
.halloween-buy__candle > i {
  top: -14px !important;
  width: 9px !important;
  height: 13px !important;
}
.halloween-buy__candle--left {
  left: 18.5% !important;
  top: -6px !important;
  height: 20px !important;
}
.halloween-buy__candle--center {
  left: 49.4% !important;
  top: -9px !important;
  height: 24px !important;
}
.halloween-buy__candle--right {
  left: 79.0% !important;
  top: -6px !important;
  height: 21px !important;
}

.halloween-buy__candy {
  width: 12px !important;
  height: 7px !important;
  top: 4px !important;
}
.halloween-buy__candy::before,
.halloween-buy__candy::after {
  width: 6px !important;
  height: 7px !important;
}
.halloween-buy__candy--one {
  left: 31.0% !important;
  top: 5px !important;
}
.halloween-buy__candy--two {
  left: 40.5% !important;
  top: 7px !important;
}
.halloween-buy__candy--three {
  left: 57.8% !important;
  top: 7px !important;
}
.halloween-buy__candy--four {
  left: 67.2% !important;
  top: 5px !important;
}

.halloween-buy__card--one,
.halloween-buy__card--two,
.halloween-buy__card--three {
  right: 20.2% !important;
}
.halloween-buy__card--left-one,
.halloween-buy__card--left-two,
.halloween-buy__card--left-three {
  left: 20.2% !important;
}

@media (max-width: 700px) {
  .halloween-buy__candle--left { left: 19.2% !important; }
  .halloween-buy__candle--right { left: 78.2% !important; }
  .halloween-buy__candy--one { left: 32.0% !important; }
  .halloween-buy__candy--two { left: 41.3% !important; }
  .halloween-buy__candy--three { left: 56.8% !important; }
  .halloween-buy__candy--four { left: 66.0% !important; }
  .halloween-buy__card--one,
  .halloween-buy__card--two,
  .halloween-buy__card--three { right: 20.8% !important; }
  .halloween-buy__card--left-one,
  .halloween-buy__card--left-two,
  .halloween-buy__card--left-three { left: 20.8% !important; }
}

.halloween-stage-bat {
  display: none !important;
}

.halloween-buy__inner {
  overflow: hidden !important;
}
@keyframes halloweenBuyWispSweep-v408 {
  0%, 14% {
    opacity: 0;
    transform: translate3d(-60%, 5px, 0) skewX(-19deg) scaleX(.74);
  }
  24% { opacity: .64; }
  56% { opacity: .40; }
  82%, 100% {
    opacity: 0;
    transform: translate3d(430%, -4px, 0) skewX(-19deg) scaleX(1.04);
  }
}
.halloween-buy__wisp {
  animation-name: halloweenBuyWispSweep-v408 !important;
}

.halloween-buy__candle {
  width: 9px !important;
  height: 19px !important;
  top: -1px !important;
  border-radius: 3px 3px 2px 2px !important;
}
.halloween-buy__candle::before,
.halloween-buy__candle::after {
  bottom: 0 !important;
  width: 5px !important;
  border-radius: 2px 2px 2px 2px !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,248,216,.98) 0 16%, rgba(255,198,88,.94) 17% 32%, rgba(255,198,88,0) 33%),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #f8e8d3 0%, #efc99f 46%, #d48853 100%) !important;
}
.halloween-buy__candle::before {
  left: -10px !important;
  height: 13px !important;
}
.halloween-buy__candle::after {
  right: -10px !important;
  height: 11px !important;
}
.halloween-buy__candle > i {
  top: -12px !important;
  width: 8px !important;
  height: 11px !important;
  display: block !important;
}
.halloween-buy__candle--left {
  left: 17.8% !important;
  top: 0 !important;
  height: 18px !important;
}
.halloween-buy__candle--center {
  left: 49.4% !important;
  top: -3px !important;
  height: 21px !important;
}
.halloween-buy__candle--right {
  left: 79.0% !important;
  top: 0 !important;
  height: 18px !important;
}

.halloween-buy__candy {
  width: 11px !important;
  height: 6px !important;
  top: 8px !important;
}
.halloween-buy__candy::before,
.halloween-buy__candy::after {
  width: 5px !important;
  height: 6px !important;
}
.halloween-buy__candy--one {
  left: 31.2% !important;
  top: 8px !important;
}
.halloween-buy__candy--two {
  left: 40.6% !important;
  top: 10px !important;
}
.halloween-buy__candy--three {
  left: 57.9% !important;
  top: 10px !important;
}
.halloween-buy__candy--four {
  left: 67.3% !important;
  top: 8px !important;
}

.halloween-buy__card--one,
.halloween-buy__card--two,
.halloween-buy__card--three {
  right: 22.6% !important;
}
.halloween-buy__card--left-one,
.halloween-buy__card--left-two,
.halloween-buy__card--left-three {
  left: 22.6% !important;
}

@media (max-width: 700px) {
  .halloween-buy__card--one,
  .halloween-buy__card--two,
  .halloween-buy__card--three {
    right: 23.1% !important;
  }
  .halloween-buy__card--left-one,
  .halloween-buy__card--left-two,
  .halloween-buy__card--left-three {
    left: 23.1% !important;
  }
}

.halloween-buy__candle::before,
.halloween-buy__candle::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #f8e8d3 0%, #efc99f 46%, #d48853 100%) !important;
}
.halloween-buy__candle::before {
  left: -12px !important;
  width: 4px !important;
  height: 12px !important;
}
.halloween-buy__candle::after {
  right: -12px !important;
  width: 4px !important;
  height: 10px !important;
}
.halloween-buy__candle > i {
  top: -12px !important;
  width: 8px !important;
  height: 11px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,252,229,.98) 0 18%, rgba(255,221,120,.96) 19% 36%, rgba(255,154,46,.94) 37% 70%, rgba(255,154,46,0) 71%),
    linear-gradient(180deg, rgba(255,245,190,.98), rgba(255,140,34,.94)) !important;
  box-shadow:
    -12px 1px 0 -1px rgba(0,0,0,0),
    12px 2px 0 -1px rgba(0,0,0,0);
  filter: drop-shadow(0 0 8px rgba(255, 170, 59, .46)) !important;
}
.halloween-buy__candle--left > i,
.halloween-buy__candle--center > i,
.halloween-buy__candle--right > i {
  box-shadow:
    -12px 1px 0 0 rgba(0,0,0,0),
    12px 2px 0 0 rgba(0,0,0,0) !important;
}

.halloween-buy__candle,
.halloween-buy__candle::before,
.halloween-buy__candle::after {
  overflow: visible !important;
}
.halloween-buy__candle::before,
.halloween-buy__candle::after {
  top: 0 !important;
  bottom: auto !important;
  width: 5px !important;
  background:
    radial-gradient(circle at 50% 3px,
      rgba(255,252,231,1) 0 1.4px,
      rgba(255,220,114,.98) 1.5px 3px,
      rgba(255,149,42,.94) 3.1px 5px,
      rgba(255,149,42,0) 5.1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #f8e8d3 0%, #efc99f 48%, #d48853 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% calc(100% - 7px) !important;
  background-position: center top, center top, center bottom !important;
}
.halloween-buy__candle::before {
  left: -14px !important;
  height: 14px !important;
}
.halloween-buy__candle::after {
  right: -14px !important;
  height: 12px !important;
}
.halloween-buy__candle > i {
  top: -13px !important;
  width: 9px !important;
  height: 12px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,252,229,.99) 0 18%, rgba(255,221,120,.98) 19% 38%, rgba(255,154,46,.95) 39% 72%, rgba(255,154,46,0) 73%),
    linear-gradient(180deg, rgba(255,245,190,.99), rgba(255,140,34,.95)) !important;
  filter: drop-shadow(0 0 8px rgba(255, 170, 59, .48)) !important;
}

@font-face {
  font-family: 'HalloweenBuy';
  src: url('/fonts/HALLOWEEN.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.halloween-buy__candle::before,
.halloween-buy__candle::after {
  top: -1px !important;
  bottom: auto !important;
  width: 4px !important;
  background:
    radial-gradient(circle at 50% 3px,
      rgba(255,250,224,.98) 0 1.2px,
      rgba(255,219,111,.97) 1.3px 2.6px,
      rgba(255,152,43,.94) 2.7px 4.3px,
      rgba(255,152,43,0) 4.4px),
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #f8e8d3 0%, #efc99f 46%, #d48853 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 7px, 100% 100%, 100% calc(100% - 6px) !important;
  background-position: center top, center top, center bottom !important;
  box-shadow: 0 0 0 1px rgba(104, 50, 26, .84) inset !important;
}
.halloween-buy__candle::before {
  left: -17px !important;
  height: 13px !important;
}
.halloween-buy__candle::after {
  right: -17px !important;
  height: 11px !important;
}
.halloween-buy__candle > i {
  top: -13px !important;
}

.purchase-style-halloween .box-buy-button-label,
.inventory-open-style-halloween .inventory-open-button-label,
.peek-close-style-halloween .box-buy-button-label {
  font-family: 'HalloweenBuy', 'Cinzel', serif !important;
  font-size: 27px !important;
  letter-spacing: .03em !important;
}
.purchase-style-halloween > button.box-buy-button.buy-style-halloween.has-long-label .box-buy-button-label {
  font-size: 16px !important;
}

@media (max-width: 700px) {
  .purchase-style-halloween .box-buy-button-label,
  .inventory-open-style-halloween .inventory-open-button-label,
  .peek-close-style-halloween .box-buy-button-label {
    font-size: 24px !important;
  }
}

.halloween-buy__candle {
  display: none !important;
}

.purchase-style-halloween .box-buy-button-label,
.inventory-open-style-halloween .inventory-open-button-label,
.peek-close-style-halloween .box-buy-button-label {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.purchase-style-halloween .box-buy-button-label,
.inventory-open-style-halloween .inventory-open-button-label,
.peek-close-style-halloween .box-buy-button-label {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-fill-color: #FFFFFF !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.72),
    0 2px 4px rgba(0,0,0,.45) !important;
}

html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-halloween
> button.btn.primary.box-buy-button.buy-style-halloween
> span.box-buy-button-label,
html body .inventory-open-button-shell.inventory-open-style-halloween
> button.inventory-open-custom-button
> span.inventory-open-button-label,
html body .peek-close-button-shell.peek-close-style-halloween
> button.peek-close-button.buy-style-halloween
> span.box-buy-button-label {
  font-family: 'HalloweenBuy', 'Cinzel', serif !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-text-stroke: 0 transparent !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.78),
    0 2px 3px rgba(0,0,0,.56),
    0 0 5px rgba(255,255,255,.14) !important;
}

html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-halloween
> button.btn.primary.box-buy-button.buy-style-halloween
> span.box-buy-button-label,
html body .inventory-open-button-shell.inventory-open-style-halloween
> button.inventory-open-custom-button
> span.inventory-open-button-label,
html body .peek-close-button-shell.peek-close-style-halloween
> button.peek-close-button.buy-style-halloween
> span.box-buy-button-label {
  font-size: 22px !important;
  line-height: 1 !important;
}

html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-halloween
> button.btn.primary.box-buy-button.buy-style-halloween.has-long-label
> span.box-buy-button-label {
  font-size: 15px !important;
}

@media (max-width: 700px) {
  html body .view-shop .box-card .card-actions
  .purchase-action-pair.purchase-style-halloween
  > button.btn.primary.box-buy-button.buy-style-halloween
  > span.box-buy-button-label,
  html body .inventory-open-button-shell.inventory-open-style-halloween
  > button.inventory-open-custom-button
  > span.inventory-open-button-label,
  html body .peek-close-button-shell.peek-close-style-halloween
  > button.peek-close-button.buy-style-halloween
  > span.box-buy-button-label {
    font-size: 20px !important;
  }
}

html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-halloween
> button.btn.primary.box-buy-button.buy-style-halloween
> span.box-buy-button-label,
html body .inventory-open-button-shell.inventory-open-style-halloween
> button.inventory-open-custom-button
> span.inventory-open-button-label,
html body .peek-close-button-shell.peek-close-style-halloween
> button.peek-close-button.buy-style-halloween
> span.box-buy-button-label {
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-halloween
> button.btn.primary.box-buy-button.buy-style-halloween
> span.box-buy-button-label,
html body .inventory-open-button-shell.inventory-open-style-halloween
> button.inventory-open-custom-button
> span.inventory-open-button-label,
html body .peek-close-button-shell.peek-close-style-halloween
> button.peek-close-button.buy-style-halloween
> span.box-buy-button-label {
  font-family: 'HalloweenBuy', 'Cinzel', serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1 !important;

  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg,
      #fff9d8 0%,
      #fff1bf 14%,
      #f1d27a 27%,
      #bf8425 42%,
      #fff4c7 52%,
      #d49a32 63%,
      #b97818 76%,
      #f8db8c 88%,
      #fff6d8 100%),
    linear-gradient(115deg,
      transparent 0 34%,
      rgba(255,255,255,.78) 46%,
      rgba(255,255,255,.28) 50%,
      transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow:
    0 1px 0 rgba(255,248,214,.18),
    0 2px 12px rgba(95,64,9,.35),
    0 0 1px rgba(255,232,154,.22) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35)) !important;
}

html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-halloween
> button.btn.primary.box-buy-button.buy-style-halloween.has-long-label
> span.box-buy-button-label {
  font-size: 17px !important;
}

@media (max-width: 700px) {
  html body .view-shop .box-card .card-actions
  .purchase-action-pair.purchase-style-halloween
  > button.btn.primary.box-buy-button.buy-style-halloween
  > span.box-buy-button-label,
  html body .inventory-open-button-shell.inventory-open-style-halloween
  > button.inventory-open-custom-button
  > span.inventory-open-button-label,
  html body .peek-close-button-shell.peek-close-style-halloween
  > button.peek-close-button.buy-style-halloween
  > span.box-buy-button-label {
    font-size: 22px !important;
  }
}

.event-x666-coffer-seal-sheen {
  -webkit-mask: url('/images/halloweenbadge.png') center / contain no-repeat !important;
  mask: url('/images/halloweenbadge.png') center / contain no-repeat !important;
}

.event-x666-coffer-seal-sheen::before {
  background: linear-gradient(102deg,
    rgba(79, 43, 74, 0) 0%,
    rgba(79, 43, 74, 0) 28%,
    rgba(79, 43, 74, .24) 40%,
    rgba(105, 63, 99, .82) 50%,
    rgba(79, 43, 74, .42) 60%,
    rgba(79, 43, 74, 0) 72%,
    rgba(79, 43, 74, 0) 100%) !important;
  filter: blur(.2px) drop-shadow(0 0 3px rgba(79, 43, 74, .34)) !important;
}

.event-x666-coffer-seal-sheen::before {
  background: linear-gradient(102deg,
    rgba(79, 43, 74, 0) 0%,
    rgba(79, 43, 74, 0) 30%,
    rgba(123, 88, 54, .10) 39%,
    rgba(79, 43, 74, .18) 44%,
    rgba(141, 105, 60, .24) 50%,
    rgba(108, 71, 102, .42) 55%,
    rgba(129, 95, 56, .18) 61%,
    rgba(79, 43, 74, .10) 66%,
    rgba(79, 43, 74, 0) 72%,
    rgba(79, 43, 74, 0) 100%) !important;
  filter: blur(.2px) drop-shadow(0 0 2px rgba(110, 82, 54, .18)) !important;
  opacity: .78 !important;
}

.event-x666-coffer-seal-sheen::before {
  background: linear-gradient(102deg,
    rgba(79, 43, 74, 0) 0%,
    rgba(79, 43, 74, 0) 27%,
    rgba(79, 43, 74, .16) 36%,
    rgba(103, 61, 94, .30) 42%,
    rgba(166, 121, 48, .34) 47%,
    rgba(225, 183, 91, .50) 51%,
    rgba(173, 128, 54, .38) 55%,
    rgba(105, 63, 99, .32) 61%,
    rgba(79, 43, 74, .16) 67%,
    rgba(79, 43, 74, 0) 74%,
    rgba(79, 43, 74, 0) 100%) !important;
  filter: blur(.2px) drop-shadow(0 0 2px rgba(159, 119, 55, .20)) !important;
  opacity: .74 !important;
  animation: high-payout-seal-sheen-pass 4.5s linear infinite !important;
}

.event-x666-coffer-seal-sheen::before {
  opacity: .82 !important;
}

.box-visual.is-halloween-coffer::before {
  width: 238px !important;
  height: 238px !important;
  background:
    radial-gradient(circle at 39% 43%, rgba(255, 126, 36, .21) 0 10%, rgba(255, 126, 36, .08) 28%, transparent 56%),
    radial-gradient(circle at 63% 56%, rgba(125, 63, 157, .24) 0 9%, rgba(125, 63, 157, .09) 31%, transparent 60%),
    radial-gradient(circle, color-mix(in srgb, var(--box-glow) 22%, transparent) 0 24%, transparent 68%) !important;
  filter: blur(15px) !important;
  opacity: .72 !important;
  animation: halloweenCofferAuraPulse 4.8s ease-in-out infinite !important;
}

.box-visual.is-halloween-coffer::after {
  width: 190px !important;
  height: 64px !important;
  bottom: 10px !important;
  background:
    radial-gradient(ellipse at center,
      rgba(255, 117, 33, .19) 0%,
      rgba(118, 56, 151, .16) 38%,
      color-mix(in srgb, var(--box-glow) 12%, transparent) 56%,
      transparent 78%) !important;
  filter: blur(18px) !important;
  opacity: .7 !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow {
  position: absolute !important;
  width: 226px !important;
  height: 226px !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 1 !important;
  overflow: visible !important;
  animation: none !important;
  pointer-events: none !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 14px,
      rgba(225, 203, 224, .18) 14.5px 15.5px,
      transparent 16px 29px),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(229, 209, 228, .24) 0deg 1.1deg,
      transparent 1.1deg 29.8deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 64%, rgba(0,0,0,.84) 72%, transparent 91%);
  mask-image: radial-gradient(circle, #000 0 64%, rgba(0,0,0,.84) 72%, transparent 91%);
  opacity: .64;
  filter:
    drop-shadow(0 0 4px rgba(247, 134, 45, .16))
    drop-shadow(0 0 6px rgba(126, 69, 157, .18));
  animation: halloweenWebOrbit 14s linear infinite;
  transform-origin: center;
}

.box-visual.is-halloween-coffer .halloween-box-glow::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background:
    conic-gradient(from 12deg,
      transparent 0 7%, rgba(235,214,231,.11) 7.5% 8.2%, transparent 8.7% 23%,
      rgba(235,214,231,.10) 23.5% 24.1%, transparent 24.7% 44%,
      rgba(235,214,231,.09) 44.5% 45.2%, transparent 45.8% 67%,
      rgba(235,214,231,.11) 67.5% 68.1%, transparent 68.7% 100%);
  opacity: .58;
  animation: halloweenWebOrbitReverse 18s linear infinite;
}

.halloween-glow-stars {
  position: absolute;
  inset: 9%;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.halloween-glow-stars > i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe7a4;
  box-shadow:
    0 0 4px rgba(255, 198, 91, .9),
    0 0 8px rgba(168, 89, 182, .36);
  opacity: 0;
  animation: halloweenStarFlicker 4.4s ease-in-out infinite;
}
.halloween-glow-stars > i::before,
.halloween-glow-stars > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 224, 150, .72);
  transform: translate(-50%, -50%);
  border-radius: 99px;
}
.halloween-glow-stars > i::before {
  width: 1px;
  height: 7px;
}
.halloween-glow-stars > i::after {
  width: 7px;
  height: 1px;
}

.halloween-glow-stars > i:nth-child(1) {
  left: 13%;
  top: 22%;
  animation-delay: -3.7s;
  animation-duration: 4.9s;
}
.halloween-glow-stars > i:nth-child(2) {
  left: 27%;
  top: 10%;
  animation-delay: -1.2s;
  animation-duration: 5.6s;
}
.halloween-glow-stars > i:nth-child(3) {
  left: 48%;
  top: 18%;
  animation-delay: -4.3s;
  animation-duration: 4.2s;
}
.halloween-glow-stars > i:nth-child(4) {
  left: 72%;
  top: 13%;
  animation-delay: -2.5s;
  animation-duration: 5.1s;
}
.halloween-glow-stars > i:nth-child(5) {
  left: 84%;
  top: 31%;
  animation-delay: -.8s;
  animation-duration: 4.7s;
}
.halloween-glow-stars > i:nth-child(6) {
  left: 16%;
  top: 54%;
  animation-delay: -2.1s;
  animation-duration: 5.4s;
}
.halloween-glow-stars > i:nth-child(7) {
  left: 35%;
  top: 72%;
  animation-delay: -4.8s;
  animation-duration: 4.6s;
}
.halloween-glow-stars > i:nth-child(8) {
  left: 61%;
  top: 79%;
  animation-delay: -1.7s;
  animation-duration: 5.8s;
}
.halloween-glow-stars > i:nth-child(9) {
  left: 82%;
  top: 65%;
  animation-delay: -3.1s;
  animation-duration: 4.3s;
}
.halloween-glow-stars > i:nth-child(10) {
  left: 8%;
  top: 75%;
  animation-delay: -.4s;
  animation-duration: 5.2s;
}
.halloween-glow-stars > i:nth-child(11) {
  left: 91%;
  top: 48%;
  animation-delay: -4.1s;
  animation-duration: 5.5s;
}
.halloween-glow-stars > i:nth-child(12) {
  left: 53%;
  top: 5%;
  animation-delay: -2.9s;
  animation-duration: 4.8s;
}

@keyframes halloweenWebOrbit {
  from { transform: rotate(0deg) scale(.98); }
  to { transform: rotate(360deg) scale(.98); }
}
@keyframes halloweenWebOrbitReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes halloweenCofferAuraPulse {
  0%, 100% {
    transform: scale(.96);
    opacity: .60;
  }
  48% {
    transform: scale(1.045);
    opacity: .78;
  }
}
@keyframes halloweenStarFlicker {
  0%, 14%, 100% {
    opacity: 0;
    transform: scale(.42) rotate(0deg);
  }
  24% { opacity: .18; }
  39% {
    opacity: .94;
    transform: scale(1.12) rotate(18deg);
  }
  54% { opacity: .32; }
  68% {
    opacity: .82;
    transform: scale(.86) rotate(34deg);
  }
  82% {
    opacity: 0;
    transform: scale(.48) rotate(46deg);
  }
}

@media (max-width: 700px) {
  .box-visual.is-halloween-coffer .halloween-box-glow {
    width: 202px !important;
    height: 202px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .box-visual.is-halloween-coffer .halloween-box-glow::before,
  .box-visual.is-halloween-coffer .halloween-box-glow::after,
  .halloween-glow-stars > i,
  .box-visual.is-halloween-coffer::before {
    animation: none !important;
  }
  .halloween-glow-stars > i { opacity: .5; }
}

.box-visual.is-halloween-coffer .halloween-box-glow {
  width: 310px !important;
  height: 226px !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::before {
  inset: 0 !important;
  border-radius: 46% !important;
  background:
    repeating-radial-gradient(ellipse at 50% 50%,
      transparent 0 17px,
      rgba(236, 216, 235, .29) 17.5px 18.7px,
      transparent 19.2px 34px),
    repeating-conic-gradient(from 4deg at 50% 50%,
      rgba(239, 220, 237, .34) 0deg 1.35deg,
      transparent 1.35deg 24deg) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 67%, rgba(0,0,0,.92) 75%, rgba(0,0,0,.52) 87%, transparent 98%) !important;
  mask-image: radial-gradient(ellipse at center, #000 0 67%, rgba(0,0,0,.92) 75%, rgba(0,0,0,.52) 87%, transparent 98%) !important;
  opacity: .88 !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 145, 45, .24))
    drop-shadow(0 0 7px rgba(121, 67, 157, .30)) !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::after {
  inset: 8% 14% !important;
  border-radius: 50% !important;
  opacity: .72 !important;
}

.box-visual.is-halloween-coffer .halloween-glow-stars {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i {
  width: 4px !important;
  height: 4px !important;
  background: #ffe8a6 !important;
  box-shadow:
    0 0 5px rgba(255, 195, 83, .96),
    0 0 10px rgba(163, 89, 184, .48) !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(1) {
  left: 7% !important;
  top: 19% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(2) {
  left: 17% !important;
  top: 7% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(3) {
  left: 31% !important;
  top: 2% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(4) {
  left: 70% !important;
  top: 3% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(5) {
  left: 84% !important;
  top: 10% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(6) {
  left: 94% !important;
  top: 31% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(7) {
  left: 4% !important;
  top: 66% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(8) {
  left: 14% !important;
  top: 84% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(9) {
  left: 30% !important;
  top: 96% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(10) {
  left: 69% !important;
  top: 95% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(11) {
  left: 85% !important;
  top: 82% !important;
}
.box-visual.is-halloween-coffer .halloween-glow-stars > i:nth-child(12) {
  left: 96% !important;
  top: 58% !important;
}

.box-visual.is-halloween-coffer::before {
  width: 286px !important;
  height: 210px !important;
  opacity: .78 !important;
  filter: blur(17px) !important;
}

@media (max-width: 700px) {
  .box-visual.is-halloween-coffer .halloween-box-glow {
    width: 270px !important;
    height: 210px !important;
  }
}

.box-visual.is-halloween-coffer .halloween-box-glow {
  width: 334px !important;
  height: 246px !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::before {
  inset: -1% !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%201000%22%20fill%3D%22none%22%3E%0A%20%20%3Cg%20stroke%3D%22rgb%28236%2C230%2C242%29%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.96%22%3E%0A%20%20%20%20%3C%21--%20spokes%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L500%2028%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L820%2095%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L970%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L820%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L500%20972%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L180%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L30%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L180%2095%22/%3E%0A%0A%20%20%20%20%3C%21--%20outer%20frame%20connectors%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M180%2095%20Q500%20172%20820%2095%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%2095%20Q886%20296%20970%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M970%20500%20Q886%20704%20820%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%20905%20Q500%20828%20180%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M180%20905%20Q114%20704%2030%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M30%20500%20Q114%20296%20180%2095%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%201%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M401%20156%20Q500%20185%20599%20156%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M599%20156%20Q663%20248%20729%20343%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M729%20343%20Q779%20420%20842%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M842%20500%20Q779%20580%20729%20657%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M729%20657%20Q663%20752%20599%20844%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M599%20844%20Q500%20815%20401%20844%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M401%20844%20Q337%20752%20271%20657%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M271%20657%20Q221%20580%20158%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M158%20500%20Q221%20420%20271%20343%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M271%20343%20Q337%20248%20401%20156%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%202%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M430%20236%20Q500%20258%20570%20236%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M570%20236%20Q617%20303%20664%20374%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M664%20374%20Q701%20433%20748%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M748%20500%20Q701%20567%20664%20626%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M664%20626%20Q617%20697%20570%20764%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M570%20764%20Q500%20742%20430%20764%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M430%20764%20Q383%20697%20336%20626%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M336%20626%20Q299%20567%20252%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M252%20500%20Q299%20433%20336%20374%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M336%20374%20Q383%20303%20430%20236%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%203%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M454%20309%20Q500%20325%20546%20309%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M546%20309%20Q578%20356%20611%20406%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M611%20406%20Q635%20447%20671%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M671%20500%20Q635%20553%20611%20594%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M611%20594%20Q578%20644%20546%20691%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M546%20691%20Q500%20675%20454%20691%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M454%20691%20Q422%20644%20389%20594%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M389%20594%20Q365%20553%20329%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M329%20500%20Q365%20447%20389%20406%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M389%20406%20Q422%20356%20454%20309%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%204%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M472%20375%20Q500%20386%20528%20375%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M528%20375%20Q548%20405%20568%20438%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M568%20438%20Q583%20465%20605%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M605%20500%20Q583%20535%20568%20562%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M568%20562%20Q548%20595%20528%20625%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M528%20625%20Q500%20614%20472%20625%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M472%20625%20Q452%20595%20432%20562%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M432%20562%20Q417%20535%20395%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M395%20500%20Q417%20465%20432%20438%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M432%20438%20Q452%20405%20472%20375%22/%3E%0A%0A%20%20%20%20%3C%21--%20core%20ring%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M487%20431%20Q500%20438%20513%20431%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M513%20431%20Q523%20447%20533%20462%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M533%20462%20Q542%20478%20552%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M552%20500%20Q542%20522%20533%20538%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M533%20538%20Q523%20553%20513%20569%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M513%20569%20Q500%20562%20487%20569%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M487%20569%20Q477%20553%20467%20538%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M467%20538%20Q458%20522%20448%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M448%20500%20Q458%20478%20467%20462%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M467%20462%20Q477%20447%20487%20431%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E") center center / contain no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: .94 !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 175, 70, .18))
    drop-shadow(0 0 8px rgba(135, 78, 170, .22)) !important;
  animation: halloweenWebOrbit 18s linear infinite !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::after {
  inset: 10% !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%201000%22%20fill%3D%22none%22%3E%0A%20%20%3Cg%20stroke%3D%22rgb%28236%2C230%2C242%29%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.96%22%3E%0A%20%20%20%20%3C%21--%20spokes%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L500%2028%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L820%2095%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L970%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L820%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L500%20972%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L180%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L30%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%20500%20L180%2095%22/%3E%0A%0A%20%20%20%20%3C%21--%20outer%20frame%20connectors%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M180%2095%20Q500%20172%20820%2095%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%2095%20Q886%20296%20970%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M970%20500%20Q886%20704%20820%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%20905%20Q500%20828%20180%20905%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M180%20905%20Q114%20704%2030%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M30%20500%20Q114%20296%20180%2095%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%201%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M401%20156%20Q500%20185%20599%20156%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M599%20156%20Q663%20248%20729%20343%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M729%20343%20Q779%20420%20842%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M842%20500%20Q779%20580%20729%20657%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M729%20657%20Q663%20752%20599%20844%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M599%20844%20Q500%20815%20401%20844%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M401%20844%20Q337%20752%20271%20657%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M271%20657%20Q221%20580%20158%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M158%20500%20Q221%20420%20271%20343%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M271%20343%20Q337%20248%20401%20156%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%202%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M430%20236%20Q500%20258%20570%20236%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M570%20236%20Q617%20303%20664%20374%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M664%20374%20Q701%20433%20748%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M748%20500%20Q701%20567%20664%20626%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M664%20626%20Q617%20697%20570%20764%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M570%20764%20Q500%20742%20430%20764%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M430%20764%20Q383%20697%20336%20626%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M336%20626%20Q299%20567%20252%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M252%20500%20Q299%20433%20336%20374%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M336%20374%20Q383%20303%20430%20236%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%203%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M454%20309%20Q500%20325%20546%20309%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M546%20309%20Q578%20356%20611%20406%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M611%20406%20Q635%20447%20671%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M671%20500%20Q635%20553%20611%20594%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M611%20594%20Q578%20644%20546%20691%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M546%20691%20Q500%20675%20454%20691%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M454%20691%20Q422%20644%20389%20594%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M389%20594%20Q365%20553%20329%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M329%20500%20Q365%20447%20389%20406%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M389%20406%20Q422%20356%20454%20309%22/%3E%0A%0A%20%20%20%20%3C%21--%20ring%204%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M472%20375%20Q500%20386%20528%20375%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M528%20375%20Q548%20405%20568%20438%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M568%20438%20Q583%20465%20605%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M605%20500%20Q583%20535%20568%20562%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M568%20562%20Q548%20595%20528%20625%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M528%20625%20Q500%20614%20472%20625%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M472%20625%20Q452%20595%20432%20562%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M432%20562%20Q417%20535%20395%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M395%20500%20Q417%20465%20432%20438%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M432%20438%20Q452%20405%20472%20375%22/%3E%0A%0A%20%20%20%20%3C%21--%20core%20ring%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M487%20431%20Q500%20438%20513%20431%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M513%20431%20Q523%20447%20533%20462%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M533%20462%20Q542%20478%20552%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M552%20500%20Q542%20522%20533%20538%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M533%20538%20Q523%20553%20513%20569%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M513%20569%20Q500%20562%20487%20569%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M487%20569%20Q477%20553%20467%20538%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M467%20538%20Q458%20522%20448%20500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M448%20500%20Q458%20478%20467%20462%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M467%20462%20Q477%20447%20487%20431%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E") center center / contain no-repeat !important;
  opacity: .34 !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 156, 52, .12))
    drop-shadow(0 0 5px rgba(129, 73, 161, .16)) !important;
  animation: halloweenWebOrbitReverse 24s linear infinite !important;
}

.box-visual.is-halloween-coffer::before {
  width: 294px !important;
  height: 214px !important;
  opacity: .82 !important;
  filter: blur(18px) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 140, 56, .16) 0 32%, rgba(255, 140, 56, .08) 46%, transparent 67%),
    radial-gradient(circle at 50% 50%, rgba(145, 84, 194, .18) 0 38%, rgba(145, 84, 194, .08) 56%, transparent 76%) !important;
}

@media (max-width: 700px) {
  .box-visual.is-halloween-coffer .halloween-box-glow {
    width: 286px !important;
    height: 220px !important;
  }
}

.box-visual.is-halloween-coffer .halloween-box-glow {
  width: 334px !important;
  height: 246px !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::before {
  inset: -1% !important;
  border-radius: 0 !important;
  background: var(--bryer-css-v60-cobweb, url('/images/cobweb.png')) center center / contain no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: .94 !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 175, 70, .18))
    drop-shadow(0 0 8px rgba(135, 78, 170, .22)) !important;
  animation: halloweenWebOrbit 18s linear infinite !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::after {
  inset: 10% !important;
  border-radius: 0 !important;
  background: var(--bryer-css-v60-cobweb, url('/images/cobweb.png')) center center / contain no-repeat !important;
  opacity: .28 !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 156, 52, .10))
    drop-shadow(0 0 5px rgba(129, 73, 161, .14)) !important;
  animation: halloweenWebOrbitReverse 24s linear infinite !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow::before {
  animation-duration: 28s !important;
}
.box-visual.is-halloween-coffer .halloween-box-glow::after {
  animation-duration: 38s !important;
}

.box-visual.is-halloween-coffer .halloween-glow-stars {
  display: none !important;
}

.box-visual.is-halloween-coffer .halloween-slot-particles {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 6 !important;
}

.box-visual.is-halloween-coffer .halloween-slot-particle {
  position: absolute !important;
  display: block !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  transform-origin: center center !important;
  text-shadow:
    0 0 5px rgba(255, 177, 76, .22),
    0 0 8px rgba(130, 72, 168, .18) !important;
  filter: drop-shadow(0 0 2px rgba(255, 170, 67, .15)) !important;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(3n + 1) {
  animation-name: halloweenEmojiDriftA;
}
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(3n + 2) {
  animation-name: halloweenEmojiDriftB;
}
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(3n) {
  animation-name: halloweenEmojiDriftC;
}

.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(1)  { animation-duration: 4.7s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(2)  { animation-duration: 6.1s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(3)  { animation-duration: 5.0s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(4)  { animation-duration: 6.6s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(5)  { animation-duration: 5.4s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(6)  { animation-duration: 6.9s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(7)  { animation-duration: 4.9s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(8)  { animation-duration: 5.8s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(9)  { animation-duration: 6.3s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(10) { animation-duration: 5.2s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(11) { animation-duration: 7.1s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(12) { animation-duration: 5.6s; }

@keyframes halloweenEmojiDriftA {
  0%, 12%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 3px) scale(.66) rotate(-7deg);
  }
  25% {
    opacity: .82;
    transform: translate(-50%, -50%) translate(-4px, -1px) scale(.94) rotate(-2deg);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(3px, -7px) scale(1.04) rotate(4deg);
  }
  68% {
    opacity: .72;
    transform: translate(-50%, -50%) translate(-2px, -10px) scale(.98) rotate(1deg);
  }
  82% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(2px, -13px) scale(.78) rotate(6deg);
  }
}

@keyframes halloweenEmojiDriftB {
  0%, 18%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(2px, 1px) scale(.7) rotate(6deg);
  }
  30% {
    opacity: .9;
    transform: translate(-50%, -50%) translate(6px, -3px) scale(.96) rotate(1deg);
  }
  51% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(-2px, -8px) scale(1.06) rotate(-5deg);
  }
  70% {
    opacity: .64;
    transform: translate(-50%, -50%) translate(5px, -11px) scale(.94) rotate(-1deg);
  }
  86% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(-3px, -14px) scale(.76) rotate(-6deg);
  }
}

@keyframes halloweenEmojiDriftC {
  0%, 15%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(-2px, 2px) scale(.68) rotate(-4deg);
  }
  27% {
    opacity: .86;
    transform: translate(-50%, -50%) translate(-6px, -2px) scale(.92) rotate(2deg);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(4px, -6px) scale(1.02) rotate(6deg);
  }
  66% {
    opacity: .76;
    transform: translate(-50%, -50%) translate(-5px, -10px) scale(.97) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(3px, -13px) scale(.8) rotate(-5deg);
  }
}

@media (max-width: 700px) {
  .box-visual.is-halloween-coffer .halloween-slot-particle {
    font-size: 15px !important;
  }
}

.box-visual.is-halloween-coffer .halloween-slot-particles {
  z-index: 6 !important;
}

.box-visual.is-halloween-coffer .halloween-slot-particle {
  font-size: 18px !important;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
}

.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(odd) {
  animation-name: halloweenEmojiSlowDriftA;
}
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(even) {
  animation-name: halloweenEmojiSlowDriftB;
}

.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(1) { animation-duration: 7.4s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(2) { animation-duration: 8.3s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(3) { animation-duration: 7.8s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(4) { animation-duration: 8.8s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(5) { animation-duration: 7.6s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(6) { animation-duration: 8.5s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(7) { animation-duration: 7.9s; }
.box-visual.is-halloween-coffer .halloween-slot-particle:nth-child(8) { animation-duration: 8.9s; }

@keyframes halloweenEmojiSlowDriftA {
  0%, 20%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 3px) scale(.68) rotate(-6deg);
  }
  34% {
    opacity: .72;
    transform: translate(-50%, -50%) translate(-3px, -1px) scale(.92) rotate(-2deg);
  }
  52% {
    opacity: .98;
    transform: translate(-50%, -50%) translate(2px, -6px) scale(1.02) rotate(3deg);
  }
  72% {
    opacity: .62;
    transform: translate(-50%, -50%) translate(-2px, -10px) scale(.96) rotate(1deg);
  }
  88% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(3px, -13px) scale(.78) rotate(5deg);
  }
}

@keyframes halloweenEmojiSlowDriftB {
  0%, 18%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(2px, 2px) scale(.70) rotate(5deg);
  }
  32% {
    opacity: .76;
    transform: translate(-50%, -50%) translate(5px, -2px) scale(.94) rotate(1deg);
  }
  54% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(-2px, -7px) scale(1.04) rotate(-4deg);
  }
  74% {
    opacity: .58;
    transform: translate(-50%, -50%) translate(4px, -11px) scale(.97) rotate(-1deg);
  }
  90% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(-3px, -14px) scale(.80) rotate(-5deg);
  }
}

@media (max-width: 700px) {
  .box-visual.is-halloween-coffer .halloween-slot-particle {
    font-size: 16px !important;
  }
}

.box-visual.is-halloween-coffer .halloween-slot-particle {
  -webkit-text-stroke: 0.45px rgba(244, 199, 92, .82) !important;
  text-shadow:
    0 0 1px rgba(255, 244, 200, .58),
    0 0 4px rgba(246, 196, 86, .34),
    0 0 8px rgba(209, 145, 35, .22),
    0 0 10px rgba(130, 72, 168, .16) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 219, 120, .38))
    drop-shadow(0 0 3px rgba(228, 169, 46, .24)) !important;
}

.box-visual.is-halloween-coffer .halloween-slot-particle {
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 0 1px rgba(255, 246, 214, .95),
    0 0 3px rgba(248, 209, 112, .82),
    0 0 6px rgba(228, 174, 58, .62),
    0 0 9px rgba(185, 124, 23, .42) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 241, 191, .9))
    drop-shadow(0 0 3px rgba(244, 198, 85, .72))
    drop-shadow(0 0 6px rgba(205, 145, 34, .42)) !important;
}

.box-visual.is-halloween-coffer {
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, var(--box-glow) 28%, rgba(255, 232, 176, .20)) !important;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--box-glow) 19%, rgba(255,255,255,.05)) 0 16%, transparent 46%),
    radial-gradient(circle at 18% 16%, rgba(255, 163, 66, .08) 0 7%, transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(156, 96, 210, .08) 0 8%, transparent 28%),
    linear-gradient(180deg, rgba(24, 17, 34, .90) 0%, rgba(16, 12, 23, .96) 58%, rgba(13, 9, 19, .98) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 26px color-mix(in srgb, var(--box-glow) 12%, transparent),
    inset 0 -18px 34px rgba(0, 0, 0, .18),
    0 0 0 1px color-mix(in srgb, var(--box-glow) 10%, transparent),
    0 0 16px color-mix(in srgb, var(--box-glow) 12%, transparent),
    0 0 32px color-mix(in srgb, var(--box-glow) 08%, transparent) !important;
  animation: halloweenSlotAuraBreath 5.8s ease-in-out infinite !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--box-glow) 18%, transparent) 0 30%, transparent 68%) !important;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--box-glow) 18%, transparent)) !important;
}

.box-visual.is-halloween-coffer > img,
.box-visual.is-halloween-coffer .box-peek-trigger img {
  filter:
    drop-shadow(0 18px 20px rgba(0,0,0,.46))
    drop-shadow(0 0 10px color-mix(in srgb, var(--box-glow) 14%, transparent)) !important;
}

@keyframes halloweenSlotAuraBreath {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.03),
      inset 0 0 22px color-mix(in srgb, var(--box-glow) 10%, transparent),
      inset 0 -16px 30px rgba(0, 0, 0, .16),
      0 0 0 1px color-mix(in srgb, var(--box-glow) 08%, transparent),
      0 0 12px color-mix(in srgb, var(--box-glow) 10%, transparent),
      0 0 24px color-mix(in srgb, var(--box-glow) 06%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      inset 0 0 30px color-mix(in srgb, var(--box-glow) 16%, transparent),
      inset 0 -20px 38px rgba(0, 0, 0, .20),
      0 0 0 1px color-mix(in srgb, var(--box-glow) 14%, transparent),
      0 0 18px color-mix(in srgb, var(--box-glow) 18%, transparent),
      0 0 38px color-mix(in srgb, var(--box-glow) 12%, transparent);
  }
}

.box-visual.is-halloween-coffer {
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.box-visual.is-halloween-coffer::before,
.box-visual.is-halloween-coffer::after {
  display: none !important;
  content: none !important;
}

.box-visual.is-halloween-coffer .halloween-slot-aura {
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: min(360px, 108%) !important;
  height: 228px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
  opacity: .82 !important;
  background:
    radial-gradient(ellipse 38% 34% at 22% 37%, color-mix(in srgb, var(--box-glow) 42%, transparent) 0%, color-mix(in srgb, var(--box-glow) 16%, transparent) 38%, transparent 72%),
    radial-gradient(ellipse 43% 31% at 76% 42%, color-mix(in srgb, var(--box-glow) 36%, transparent) 0%, color-mix(in srgb, var(--box-glow) 13%, transparent) 42%, transparent 74%),
    radial-gradient(ellipse 48% 25% at 49% 77%, color-mix(in srgb, var(--box-glow) 28%, transparent) 0%, color-mix(in srgb, var(--box-glow) 10%, transparent) 48%, transparent 78%) !important;
  filter: blur(13px) saturate(1.12) !important;
  animation: halloweenFreeformAuraBreathe 7.2s ease-in-out infinite !important;
}

.box-visual.is-halloween-coffer .halloween-slot-aura::before {
  content: "" !important;
  position: absolute !important;
  inset: 8% 7% 12% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background:
    conic-gradient(from 18deg at 50% 50%,
      transparent 0deg 19deg,
      color-mix(in srgb, var(--box-glow) 28%, transparent) 28deg 43deg,
      transparent 55deg 108deg,
      color-mix(in srgb, var(--box-glow) 20%, transparent) 121deg 136deg,
      transparent 150deg 211deg,
      color-mix(in srgb, var(--box-glow) 26%, transparent) 226deg 244deg,
      transparent 258deg 326deg,
      color-mix(in srgb, var(--box-glow) 18%, transparent) 337deg 350deg,
      transparent 360deg) !important;
  -webkit-mask: radial-gradient(ellipse at center, transparent 0 22%, #000 43%, rgba(0,0,0,.82) 61%, transparent 82%) !important;
  mask: radial-gradient(ellipse at center, transparent 0 22%, #000 43%, rgba(0,0,0,.82) 61%, transparent 82%) !important;
  filter: blur(10px) !important;
  opacity: .86 !important;
  animation: halloweenFreeformAuraOrbit 16s linear infinite !important;
}

.box-visual.is-halloween-coffer .halloween-slot-aura::after {
  content: "" !important;
  position: absolute !important;
  inset: -6% -2% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 58%, color-mix(in srgb, var(--box-glow) 42%, white 7%) 0 2%, color-mix(in srgb, var(--box-glow) 19%, transparent) 5%, transparent 15%),
    radial-gradient(circle at 82% 29%, color-mix(in srgb, var(--box-glow) 38%, white 5%) 0 2.2%, color-mix(in srgb, var(--box-glow) 17%, transparent) 6%, transparent 17%),
    radial-gradient(circle at 61% 84%, color-mix(in srgb, var(--box-glow) 32%, white 4%) 0 1.8%, color-mix(in srgb, var(--box-glow) 14%, transparent) 5%, transparent 15%) !important;
  filter: blur(7px) !important;
  opacity: .74 !important;
  animation: halloweenGhostLightsDrift 9.5s ease-in-out infinite alternate !important;
}

.box-visual.is-halloween-coffer .halloween-box-glow {
  background: transparent !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--box-glow) 22%, transparent)) !important;
}

.box-visual.is-halloween-coffer .box-peek-trigger img {
  filter:
    drop-shadow(0 18px 20px rgba(0,0,0,.46))
    drop-shadow(0 0 8px color-mix(in srgb, var(--box-glow) 17%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--box-glow) 8%, transparent)) !important;
}

@keyframes halloweenFreeformAuraBreathe {
  0%, 100% {
    opacity: .66;
    transform: translate(-50%, -50%) scale(.96, .94);
  }
  46% {
    opacity: .91;
    transform: translate(-50%, -50%) scale(1.04, 1.02);
  }
  72% {
    opacity: .76;
    transform: translate(-50%, -50%) scale(1.00, .98);
  }
}

@keyframes halloweenFreeformAuraOrbit {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes halloweenGhostLightsDrift {
  0% {
    transform: translate3d(-7px, 4px, 0) scale(.96);
    opacity: .58;
  }
  38% {
    transform: translate3d(6px, -5px, 0) scale(1.04);
    opacity: .82;
  }
  72% {
    transform: translate3d(-2px, -8px, 0) scale(1.00);
    opacity: .68;
  }
  100% {
    transform: translate3d(8px, 3px, 0) scale(1.06);
    opacity: .86;
  }
}

@media (max-width: 700px) {
  .box-visual.is-halloween-coffer .halloween-slot-aura {
    width: min(310px, 106%) !important;
    height: 212px !important;
  }
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection {
  background-color: transparent !important;
  background-image: var(--bryer-css-v60-halloweenpanel, url('/images/halloweenpanel.png')) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection::before,
html body .view-vault .vault-selection.is-halloween-card-pack-selection::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection > .vault-selection-texture,
html body .view-vault .vault-selection.is-halloween-card-pack-selection > .mythic-panel-frame-overlay {
  display: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.vault-action-group > .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action {
  flex: 0 0 154px !important;
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button:hover:not(:disabled),
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button:focus-visible,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button:disabled {
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button::before,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button::after {
  content: none !important;
  display: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__ornament {
  inset: -3px -5px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__frame {
  inset: 18% 3.2% !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__inner {
  left: 7.7% !important;
  right: 7.7% !important;
  top: 29% !important;
  bottom: 29% !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card {
  width: 14px !important;
  height: 20px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__pumpkin {
  width: 31px !important;
  height: 26px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button > .inventory-open-button-label {
  font-size: 20px !important;
  line-height: 1 !important;
  padding: 0 31px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> .card-pack-open-fx {
  display: none !important;
}

@media (max-width: 820px) {
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .vault-action-group > .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
  > button.inventory-open-custom-button {
    flex-basis: 144px !important;
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
  }

  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
  > button.inventory-open-custom-button > .inventory-open-button-label {
    font-size: 18px !important;
  }
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection .vault-action-group {
  align-items: stretch !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.vault-action-group > .open-secondary {
  min-height: 60px !important;
  height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.vault-action-group > .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action {
  min-height: 60px !important;
  height: 60px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button:hover:not(:disabled),
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button:focus-visible,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button:disabled {
  min-height: 60px !important;
  height: 60px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__frame {
  inset: 15% 3.2% !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__inner {
  top: 26% !important;
  bottom: 26% !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__moon {
  width: 28px !important;
  top: 10% !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card {
  width: 15px !important;
  height: 21px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__pumpkin {
  width: 33px !important;
  height: 28px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
> button.inventory-open-custom-button > .inventory-open-button-label {
  font-size: 22px !important;
  padding: 0 31px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection .selected-coffer-info > h3 {
  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg,
      #fff9d8 0%,
      #fff1bf 14%,
      #f1d27a 27%,
      #bf8425 42%,
      #fff4c7 52%,
      #d49a32 63%,
      #b97818 76%,
      #f8db8c 88%,
      #fff6d8 100%),
    linear-gradient(115deg,
      transparent 0 34%,
      rgba(255,255,255,.78) 46%,
      rgba(255,255,255,.28) 50%,
      transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow:
    0 1px 0 rgba(255,248,214,.18),
    0 2px 12px rgba(95,64,9,.35),
    0 0 1px rgba(255,232,154,.22) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35)) !important;
}

@media (max-width: 820px) {
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .vault-action-group > .open-secondary,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .vault-action-group > .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
  > button.inventory-open-custom-button {
    min-height: 56px !important;
    height: 56px !important;
  }

  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
  > button.inventory-open-custom-button > .inventory-open-button-label {
    font-size: 20px !important;
  }
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card {
  width: 13px !important;
  height: 18px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__pumpkin {
  width: 29px !important;
  height: 24px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: center / 100% 100% no-repeat var(--bryer-css-v60-halloweenpanel, url('/images/halloweenpanel.png')) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection::after,
html body .view-vault .vault-selection.is-halloween-card-pack-selection > .vault-selection-texture,
html body .view-vault .vault-selection.is-halloween-card-pack-selection > .mythic-panel-frame-overlay {
  content: none !important;
  display: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection > * {
  position: relative;
  z-index: 1;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card--one,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card--two,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card--three,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card--left-one,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card--left-two,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__card--left-three {
  display: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__pumpkin {
  width: 26px !important;
  height: 22px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__pumpkin--left { left: 4.6% !important; }
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__pumpkin--right { right: 4.6% !important; }

html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__candy {
  width: 10px !important;
  height: 6px !important;
}
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__candy::before,
html body .view-vault .vault-selection.is-halloween-card-pack-selection
.inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action
.halloween-buy__candy::after {
  width: 5px !important;
  height: 6px !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection {
  background: center / 100% 100% no-repeat var(--bryer-css-v60-halloweenpanel, url('/images/halloweenpanel.png')) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection::before,
html body .view-vault .vault-selection.is-halloween-card-pack-selection::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .view-vault .vault-selection.is-halloween-card-pack-selection > .vault-selection-texture,
html body .view-vault .vault-selection.is-halloween-card-pack-selection > .mythic-panel-frame-overlay,
html body .view-vault .vault-selection.is-halloween-card-pack-selection .mythic-panel-corner,
html body .view-vault .vault-selection.is-halloween-card-pack-selection .mythic-panel-corner::before,
html body .view-vault .vault-selection.is-halloween-card-pack-selection .mythic-panel-corner::after {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support > img {
  filter: drop-shadow(0 0 8px rgba(255, 136, 41, .20));
}

html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-halloween-tooltip {
  color: #ffe9c8 !important;
  border: 1px solid rgba(243, 132, 46, .48) !important;
  background:
    linear-gradient(180deg, rgba(84, 34, 71, .97), rgba(34, 14, 34, .985)) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.52),
    0 0 22px rgba(242, 126, 40, .14),
    inset 0 1px 0 rgba(255, 211, 158, .10) !important;
}

html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-halloween-tooltip::before {
  border-top-color: rgba(243, 132, 46, .90) !important;
}

html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-halloween-tooltip > span:first-child {
  color: #ffd28f !important;
}

html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-halloween-tooltip > span + span {
  color: #f6d9ff !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support {
  width: 42px !important;
  height: 42px !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support > img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-halloween-tooltip {
  background:
    linear-gradient(180deg, rgba(84, 34, 71, .88), rgba(34, 14, 34, .90)) !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support {
  width: 54px !important;
  height: 54px !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support > img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support {
  width: 50px !important;
  height: 50px !important;
}

html body .box-card > .card-pack-support-symbol.is-halloween-support > img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
}

html body .fourfun-card-full-art,
html body .card-inspector-front,
html body .card-catalog-preset-surface,
html body .card-album.card-album-modal-book .card-book-slot .album-preset-card-surface {
  isolation: isolate;
}

html body .halloween-666-overlays {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  user-select: none !important;
  display: block !important;
  overflow: hidden !important;
}

html body .halloween-666-overlays > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-bats-shell,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap,
html body .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer-sigil-glow {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body .halloween-666-overlays > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer {
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

@keyframes halloween666FloatChar {
  0% { transform: translate3d(0, 0, 0) scale(1.003); }
  25% { transform: translate3d(0.45%, -0.9%, 0) scale(1.008); }
  50% { transform: translate3d(-0.35%, -1.45%, 0) scale(1.012); }
  75% { transform: translate3d(-0.55%, -0.55%, 0) scale(1.007); }
  100% { transform: translate3d(0, 0, 0) scale(1.003); }
}

@keyframes halloween666FloatBats {
  0% { transform: translate3d(0, 0, 0) scale(1.006); }
  20% { transform: translate3d(-0.7%, 0.55%, 0) scale(1.01); }
  48% { transform: translate3d(0.65%, -0.75%, 0) scale(1.015); }
  72% { transform: translate3d(-0.45%, -1.15%, 0) scale(1.01); }
  100% { transform: translate3d(0, 0, 0) scale(1.006); }
}

@keyframes halloween666PulseSigil {
  0% {
    transform: translate3d(0, 0, 0) scale(0.988);
    opacity: 0.96;
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.018);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.988);
    opacity: 0.96;
  }
}

html body .halloween-666-overlays > .halloween-666-layer-char {
  z-index: 1 !important;
  animation: halloween666FloatChar 5.8s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

html body .halloween-666-overlays > .halloween-666-layer-bats-shell {
  z-index: 2 !important;
  animation: halloween666FloatBats 7.1s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

html body .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer-bats {
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * -0.52), calc(var(--card-parallax-y, 0px) * -0.52), 0)
    scale(1.006) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap {
  z-index: 3 !important;
  animation: halloween666PulseSigil 3.6s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform, opacity !important;
}

html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer-sigil-glow {
  z-index: 0 !important;
  background: radial-gradient(circle at 50% 58%, rgba(248, 209, 117, 0.30) 0%, rgba(244, 168, 64, 0.16) 22%, rgba(98, 36, 117, 0.10) 46%, rgba(0, 0, 0, 0) 68%) !important;
  filter: blur(10px) !important;
  opacity: 0.92 !important;
}

html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer-sigil {
  z-index: 1 !important;
  filter:
    drop-shadow(0 0 8px rgba(246, 214, 143, 0.50))
    drop-shadow(0 0 16px rgba(242, 157, 53, 0.28)) !important;
}

html body .fourfun-card-shell:hover .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer-bats,
html body .card-catalog-preset-card:hover .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer-bats,
html body .album-preset-card:hover .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer-bats,
html body .card-inspector-stage .card-inspector-front:hover .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer-bats {
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * -0.68), calc(var(--card-parallax-y, 0px) * -0.68), 0)
    scale(1.012) !important;
}

html body .card-inspector-front.rarity-halloween > .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer-bats {
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * -0.74), calc(var(--card-parallax-y, 0px) * -0.74), 0)
    scale(1.01) !important;
}

@keyframes halloween666FloatCharSmooth {
  0%   { transform: translate3d(0.00%,  0.00%, 0) scale(1.006); }
  12%  { transform: translate3d(0.22%, -0.34%, 0) scale(1.008); }
  24%  { transform: translate3d(0.42%, -0.72%, 0) scale(1.010); }
  36%  { transform: translate3d(0.16%, -1.04%, 0) scale(1.012); }
  48%  { transform: translate3d(-0.18%, -1.26%, 0) scale(1.013); }
  60%  { transform: translate3d(-0.46%, -1.02%, 0) scale(1.011); }
  72%  { transform: translate3d(-0.56%, -0.58%, 0) scale(1.009); }
  84%  { transform: translate3d(-0.30%, -0.18%, 0) scale(1.007); }
  100% { transform: translate3d(0.00%,  0.00%, 0) scale(1.006); }
}

@keyframes halloween666FloatBatsSmooth {
  0%   { transform: translate3d(0.00%,  0.00%, 0) scale(1.010); }
  10%  { transform: translate3d(-0.20%, 0.16%, 0) scale(1.011); }
  22%  { transform: translate3d(-0.44%, 0.34%, 0) scale(1.013); }
  34%  { transform: translate3d(-0.28%, -0.10%, 0) scale(1.014); }
  46%  { transform: translate3d(0.12%, -0.48%, 0) scale(1.016); }
  58%  { transform: translate3d(0.42%, -0.76%, 0) scale(1.017); }
  70%  { transform: translate3d(0.56%, -0.46%, 0) scale(1.015); }
  82%  { transform: translate3d(0.18%, -0.08%, 0) scale(1.013); }
  100% { transform: translate3d(0.00%,  0.00%, 0) scale(1.010); }
}

@keyframes halloween666PulseSigilFaster {
  0% {
    transform: translate3d(0, 0, 0) scale(0.992);
    opacity: 0.965;
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.014);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.992);
    opacity: 0.965;
  }
}

html body .halloween-666-overlays,
html body .halloween-666-overlays > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-bats-shell,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap,
html body .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer-sigil-glow {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

html body .halloween-666-overlays > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-bats-shell > .halloween-666-layer,
html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer {
  image-rendering: auto !important;
  image-rendering: high-quality !important;
  -ms-interpolation-mode: bicubic !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  transform: translateZ(0);
}

html body .halloween-666-overlays > .halloween-666-layer-char {
  animation: halloween666FloatCharSmooth 6.4s linear infinite !important;
  will-change: transform !important;
}

html body .halloween-666-overlays > .halloween-666-layer-bats-shell {
  animation: halloween666FloatBatsSmooth 7.3s linear infinite !important;
  will-change: transform !important;
}

html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap {
  animation: halloween666PulseSigilFaster 2.7s ease-in-out infinite !important;
}

html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer-sigil-glow {
  background: radial-gradient(circle at 50% 58%, rgba(248, 209, 117, 0.20) 0%, rgba(244, 168, 64, 0.10) 24%, rgba(98, 36, 117, 0.06) 46%, rgba(0, 0, 0, 0) 68%) !important;
  filter: blur(8px) !important;
  opacity: 0.72 !important;
}

html body .halloween-666-overlays > .halloween-666-layer-sigil-wrap > .halloween-666-layer-sigil {
  filter:
    drop-shadow(0 0 5px rgba(246, 214, 143, 0.34))
    drop-shadow(0 0 10px rgba(242, 157, 53, 0.16)) !important;
}

html body .halloween-666-overlays > .halloween-666-layer-char-shell,
html body .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

html body .halloween-666-overlays > .halloween-666-layer-char-shell {
  z-index: 1 !important;
  animation: halloween666FloatCharSmooth 6.4s linear infinite !important;
  will-change: transform !important;
}

html body .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char {
  object-fit: cover !important;
  object-position: center center !important;
  image-rendering: auto !important;
  image-rendering: high-quality !important;
  -ms-interpolation-mode: bicubic !important;
  transform: translate3d(calc(var(--card-parallax-x, 0px) * 0.28), calc(var(--card-parallax-y, 0px) * 0.28), 0) scale(1.006) !important;
  will-change: transform !important;
}

html body .fourfun-card-shell:hover .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char,
html body .card-catalog-preset-card:hover .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char,
html body .album-preset-card:hover .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char,
html body .card-inspector-stage .card-inspector-front:hover .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char {
  transform: translate3d(calc(var(--card-parallax-x, 0px) * 0.38), calc(var(--card-parallax-y, 0px) * 0.38), 0) scale(1.009) !important;
}

html body .card-inspector-front.rarity-halloween > .halloween-666-overlays > .halloween-666-layer-char-shell > .halloween-666-layer-char {
  transform: translate3d(calc(var(--card-parallax-x, 0px) * 0.42), calc(var(--card-parallax-y, 0px) * 0.42), 0) scale(1.008) !important;
}

html body .halloween-666-overlays > .halloween-666-layer-char {
  z-index: 1 !important;
  animation: none !important;
}

html body .halloween-666-frame-overlay {
  position:absolute !important;
  inset:0 !important;
  z-index:30 !important;
  overflow:visible !important;
  pointer-events:none !important;
  user-select:none !important;
}
html body .halloween-666-frame-overlay::before,
html body .halloween-666-frame-overlay::after {
  content:none !important;
  display:none !important;
}
html body .halloween-666-frame-overlay > .halloween-666-frame-overlay-image {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  opacity:1 !important;
  pointer-events:none !important;
  user-select:none !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  image-rendering:auto !important;
  -ms-interpolation-mode:bicubic !important;
}

html body .card-inspector-titlebar {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body .card-inspector-titlebar h2 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  text-align: center !important;
}

html body .card-inspector-titlebar .card-inspector-unified-seal.is-heading,
html body .card-inspector-titlebar .card-inspector-heading-seal,
html body .card-inspector-titlebar .rarity-seal.is-heading {
  position: absolute !important;
  left: 50% !important;
  top: calc(-16px - 1em) !important;
  margin: 0 !important;
  transform: translateX(-50%) scale(1.24) !important;
  transform-origin: center center !important;
  z-index: 2 !important;
}

html body .card-inspector:has(.card-inspector-front:not(.rarity-legendary):not(.rarity-mythic)) .card-inspector-copy h2 {
  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(255,248,214,.18), 0 2px 12px rgba(95,64,9,.35), 0 0 1px rgba(255,232,154,.22) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35)) !important;
}

html body .card-inspector:has(.card-inspector-front.rarity-legendary) .card-inspector-copy h2 {
  color: transparent !important;
  background-image:
    linear-gradient(180deg, #fffbff 0%, #f6ebff 8%, #eed7ff 16%, #cfa9ff 28%, #f9efff 40%, #c393ff 52%, #a4e6ff 64%, #b58bff 76%, #f3e9ff 100%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.22) 0 12px, rgba(183,137,255,.10) 12px 24px, rgba(150,234,255,.15) 24px 34px, rgba(255,255,255,.05) 34px 50px) !important;
  background-size: 100% 100%, 180% 100% !important;
  background-position: center center, 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .22px rgba(0,0,0,.26) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 2px 8px rgba(0,0,0,.16),
    0 0 9px rgba(112,225,255,.18),
    0 0 14px rgba(255,129,207,.14) !important;
  filter: drop-shadow(0 0 6px rgba(181,224,255,.14)) saturate(1.06) !important;
  animation: cardLegendaryTextHologramV2 4.4s linear infinite !important;
}

html body .card-inspector:has(.card-inspector-front.rarity-mythic) .card-inspector-copy h2 {
  color: #f3d58b !important;
  background-image:
    linear-gradient(180deg, #fff9d8 0%, #fff1bf 14%, #f1d27a 27%, #bf8425 42%, #fff4c7 52%, #d49a32 63%, #b97818 76%, #f8db8c 88%, #fff6d8 100%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 50%, transparent 61%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: center center, 18% center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .34px rgba(93, 241, 171, .38) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 rgba(255,248,214,.14),
    0 2px 10px rgba(95,64,9,.28),
    0 0 1px rgba(255,232,154,.16),
    0 0 5px rgba(104, 241, 181, .10) !important;
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.28)) drop-shadow(0 0 4px rgba(104, 241, 181, .08)) !important;
  animation: mythicGoldGreenEdgePulseSoft 1.72s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .card-inspector:has(.card-inspector-front.rarity-legendary) .card-inspector-copy h2,
  html body .card-inspector:has(.card-inspector-front.rarity-mythic) .card-inspector-copy h2 {
    animation: none !important;
  }
}

.reward-rarity-seal.rarity-seal-supporter {
  --seal-a: #f7d87a;
  --seal-b: #7b5109;
  --seal-text: #fff8d8;
  min-width: 82px;
  height: 24px;
  padding-inline: 12px;
  border-color: rgba(255, 224, 125, .92) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 27%, transparent 46%),
    linear-gradient(135deg, #6e4708 0%, #c99525 19%, #ffe08a 47%, #b7790d 72%, #5c3905 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 0 rgba(69,39,0,.46),
    0 0 8px rgba(255,222,120,.44),
    0 0 19px rgba(221,157,39,.26),
    0 4px 10px rgba(0,0,0,.38) !important;
  color: #fff7cf !important;
  text-shadow:
    0 1px 1px rgba(53,28,0,.95),
    0 0 5px rgba(255,232,154,.40) !important;
  letter-spacing: .10em !important;
}
.reward-rarity-seal.rarity-seal-supporter::before,
.reward-rarity-seal.rarity-seal-supporter::after {
  content: "✦";
  color: #fff0a8;
  text-shadow: 0 0 5px rgba(255,224,112,.62);
}

html body .fourfun-card-face.rarity-supporter > .fourfun-card-preset-frame,
html body .card-inspector-front.rarity-supporter > .card-inspector-preset,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-frame,
html body .album-preset-card.rarity-supporter .album-preset-card-frame {
  filter:
    drop-shadow(0 0 4px rgba(255,224,127,.22))
    drop-shadow(0 0 10px rgba(192,132,24,.14));
}

html body .fourfun-card-face.rarity-supporter .fourfun-card-title,
html body .fourfun-card-face.rarity-supporter .fourfun-card-number,
html body .fourfun-card-face.rarity-supporter .fourfun-card-footer-center small,
html body .card-inspector-front.rarity-supporter .card-inspector-card-title,
html body .card-inspector-front.rarity-supporter .card-inspector-card-number,
html body .card-inspector-front.rarity-supporter .card-inspector-card-date,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-title,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-number,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-date,
html body .card-album.card-album-modal-book .album-preset-card.rarity-supporter .album-preset-card-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-supporter .album-preset-card-number,
html body .card-album.card-album-modal-book .album-preset-card.rarity-supporter .album-preset-card-date {
  filter: drop-shadow(0 1px 1px rgba(47,29,7,.35)) drop-shadow(0 0 4px rgba(229,178,63,.10)) !important;
}

html body .fourfun-card-face.rarity-supporter,
html body .fourfun-card-back.rarity-supporter,
html body .card-inspector-front.rarity-supporter,
html body .card-inspector-back.rarity-supporter,
html body .fourfun-card-face.rarity-supporter .fourfun-card-full-art,
html body .fourfun-card-face.rarity-supporter .fourfun-card-full-art img,
html body .fourfun-card-face.rarity-supporter .fourfun-card-preset-frame,
html body .fourfun-card-back.rarity-supporter .fourfun-card-back-preset,
html body .card-inspector-front.rarity-supporter .card-inspector-main-image,
html body .card-inspector-front.rarity-supporter .card-inspector-preset,
html body .card-inspector-back.rarity-supporter .card-inspector-back-image {
  border-radius: 0 !important;
}

html body .card-inspector-front.rarity-supporter,
html body .card-inspector-back.rarity-supporter {
  border-radius: 0 !important;
  background: transparent !important;
}

html body .card-inspector-rotator.rarity-supporter {
  --card-3d-thickness: 10px !important;
  --card-3d-half-thickness: calc(var(--card-3d-thickness) / 2) !important;
  --card-3d-corner-cut: 0px !important;
}

html body .card-inspector-rotator.rarity-supporter .card-inspector-side {
  border-radius: 0 !important;
}

html body .card-inspector-rotator.rarity-supporter {
  --card-accent: #c99525 !important;
  --card-secondary: #ffe49a !important;
  --card-accent-rgb: 201,149,37 !important;
  --card-secondary-rgb: 255,228,154 !important;
}

html body .card-inspector-rotator.rarity-supporter {
  --card-3d-thickness: 10px !important;
  --card-3d-half-thickness: calc(var(--card-3d-thickness) / 2) !important;
}

html body .fourfun-card-face.rarity-supporter .fourfun-card-holo,
html body .fourfun-card-face.rarity-supporter .fourfun-card-gloss,
html body .fourfun-card-face.rarity-supporter .fourfun-card-grain,
html body .fourfun-card-face.rarity-supporter .fourfun-card-particles,
html body .fourfun-card-back.rarity-supporter .fourfun-card-holo,
html body .fourfun-card-back.rarity-supporter .fourfun-card-gloss,
html body .card-inspector-side.rarity-supporter .fourfun-card-holo,
html body .card-inspector-side.rarity-supporter .fourfun-card-gloss,
html body .card-inspector-side.rarity-supporter .fourfun-card-grain,
html body .card-inspector-side.rarity-supporter .fourfun-card-particles,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-foil,
html body .album-preset-card.rarity-supporter .album-preset-card-foil {
  display: none !important;
}

html body .solaire-astoria-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 14 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

html body .solaire-astoria-overlay-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  transform: translateZ(16px) !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.14)) !important;
}

html body .solaire-astoria-overlay-stars {
  position: absolute !important;
  inset: 0 !important;
  z-index: 28 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

html body .solaire-astoria-overlay-stars > i {
  position: absolute !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 0 !important;
  transform: scale(0.62) translateZ(24px) !important;
  background: #ffffff !important;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%) !important;
  box-shadow:
    0 0 4px rgba(255,255,255,0.92),
    0 0 10px rgba(255,255,255,0.66),
    0 0 18px rgba(255,255,255,0.44) !important;
  animation: solaire-star-twinkle 3.2s ease-in-out infinite !important;
  will-change: opacity, transform !important;
}

html body .solaire-astoria-overlay-stars > i:nth-child(1) {
  left: 13%;
  top: 14%;
  width: 18px !important;
  height: 18px !important;
  animation-delay: 0.10s !important;
  animation-duration: 2.8s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(2) {
  left: 74%;
  top: 15%;
  width: 15px !important;
  height: 15px !important;
  animation-delay: 0.82s !important;
  animation-duration: 3.4s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(3) {
  left: 20%;
  top: 30%;
  width: 13px !important;
  height: 13px !important;
  animation-delay: 1.44s !important;
  animation-duration: 3.0s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(4) {
  left: 71%;
  top: 33%;
  width: 17px !important;
  height: 17px !important;
  animation-delay: 0.42s !important;
  animation-duration: 3.2s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(5) {
  left: 16%;
  top: 56%;
  width: 14px !important;
  height: 14px !important;
  animation-delay: 1.96s !important;
  animation-duration: 3.5s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(6) {
  left: 76%;
  top: 58%;
  width: 16px !important;
  height: 16px !important;
  animation-delay: 0.24s !important;
  animation-duration: 3.1s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(7) {
  left: 26%;
  top: 74%;
  width: 13px !important;
  height: 13px !important;
  animation-delay: 1.14s !important;
  animation-duration: 3.6s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(8) {
  left: 67%;
  top: 76%;
  width: 18px !important;
  height: 18px !important;
  animation-delay: 2.26s !important;
  animation-duration: 2.9s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(9) {
  left: 43%;
  top: 20%;
  width: 11px !important;
  height: 11px !important;
  animation-delay: 1.72s !important;
  animation-duration: 3.2s !important;
}
html body .solaire-astoria-overlay-stars > i:nth-child(10) {
  left: 58%;
  top: 65%;
  width: 12px !important;
  height: 12px !important;
  animation-delay: 0.62s !important;
  animation-duration: 3.35s !important;
}

@keyframes solaire-star-twinkle {
  0%, 16%, 100% {
    opacity: 0;
    transform: scale(0.58) translateZ(24px);
  }
  28% {
    opacity: 0.85;
    transform: scale(0.96) translateZ(24px);
  }
  44% {
    opacity: 1;
    transform: scale(1.14) translateZ(24px);
  }
  66% {
    opacity: 0.26;
    transform: scale(0.80) translateZ(24px);
  }
}

html body .solaire-astoria-overlay-stars {
  display: none !important;
}

html body .solaire-astoria-stars-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  mix-blend-mode: screen !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body .fourfun-card-face > .solaire-astoria-stars-canvas {
  z-index: 96 !important;
}

html body .card-inspector-front > .solaire-astoria-stars-canvas,
html body .card-catalog-preset-surface > .solaire-astoria-stars-canvas,
html body .album-preset-card-surface > .solaire-astoria-stars-canvas {
  z-index: 96 !important;
}

html body .fourfun-card-face:has(> .solaire-astoria-overlay) .fourfun-card-full-art img,
html body .fourfun-card-face:has(> .solaire-astoria-overlay) .fourfun-card-main-image {
  will-change: transform !important;
  transition: transform 180ms ease-out !important;
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * 0.22), calc(var(--card-parallax-y, 0px) * 0.22), 0)
    rotate(calc(var(--card-parallax-rot, 0deg) * 0.22))
    scale(1.01) !important;
}

html body .card-inspector-front:has(> .solaire-astoria-overlay) .card-inspector-main-image {
  will-change: transform !important;
  transition: transform 170ms ease-out !important;
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * 0.18), calc(var(--card-parallax-y, 0px) * 0.18), 0)
    rotate(calc(var(--card-parallax-rot, 0deg) * 0.16))
    scale(1.006) !important;
}

html body .card-catalog-preset-surface:has(> .solaire-astoria-overlay) .card-catalog-preset-image,
html body .album-preset-card-surface:has(> .solaire-astoria-overlay) .album-preset-card-image {
  will-change: transform !important;
  transition: transform 180ms ease-out !important;
  transform:
    translate3d(calc(var(--catalog-parallax-art-x, 0px) * 0.32), calc(var(--catalog-parallax-art-y, 0px) * 0.32), 0)
    scale(1.008) !important;
}

html body .fourfun-card-face:has(> .solaire-astoria-overlay) .fourfun-card-full-art > img:first-child {
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * .72), calc(var(--card-parallax-y, 0px) * .72), 0)
    rotate(calc(var(--card-parallax-rot, 0deg) * .38))
    scale(1.024) !important;
  transition: transform 130ms ease-out !important;
}

html body .card-catalog-preset-surface:has(> .solaire-astoria-overlay) > .card-catalog-preset-image {
  transform:
    translate3d(calc(var(--catalog-parallax-art-x, 0px) * 1.15), calc(var(--catalog-parallax-art-y, 0px) * 1.15), 0)
    scale(1.022) !important;
  transition: transform 130ms ease-out !important;
}

html body .card-inspector-front:has(> .solaire-astoria-overlay) > .card-inspector-main-image {
  transition: transform 90ms linear !important;
  will-change: transform !important;
}

html body .fourfun-card-face:has(> .solaire-astoria-overlay) .fourfun-card-full-art,
html body .card-inspector-front:has(> .solaire-astoria-overlay),
html body .card-catalog-preset-surface:has(> .solaire-astoria-overlay),
html body .album-preset-card-surface:has(> .solaire-astoria-overlay) {
  overflow: hidden !important;
}

html body .fourfun-card-face:has(> .solaire-astoria-overlay) .fourfun-card-full-art > img:first-child {
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * .26), calc(var(--card-parallax-y, 0px) * .26), 0)
    rotate(calc(var(--card-parallax-rot, 0deg) * .14))
    scale(1.014) !important;
  transition: transform 120ms ease-out !important;
}

html body .card-catalog-preset-surface:has(> .solaire-astoria-overlay) > .card-catalog-preset-image,
html body .album-preset-card-surface:has(> .solaire-astoria-overlay) > .album-preset-card-image {
  transform:
    translate3d(calc(var(--catalog-parallax-art-x, 0px) * .34), calc(var(--catalog-parallax-art-y, 0px) * .34), 0)
    scale(1.012) !important;
  transition: transform 120ms ease-out !important;
}

html body .card-inspector-front:has(> .solaire-astoria-overlay) > .card-inspector-main-image {
  object-position: 50% 50% !important;
  transform: scale(1.018) !important;
  transition: object-position 120ms ease-out, transform 120ms ease-out !important;
  will-change: object-position, transform !important;
}

html body .card-inspector-front > .solaire-inspector-art-window {
  --solaire-art-x: 0px;
  --solaire-art-y: 0px;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  transform: none !important;
}

html body .card-inspector-front > .solaire-inspector-art-window > .solaire-inspector-url-art {
  position: absolute !important;
  left: -2.4% !important;
  top: -2.4% !important;
  width: 104.8% !important;
  height: 104.8% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(var(--solaire-art-x, 0px), var(--solaire-art-y, 0px), 0) !important;
  transform-origin: center center !important;
  transition: transform 85ms ease-out !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body .card-inspector-front:has(> .solaire-astoria-overlay)
  > .solaire-inspector-art-window
  > .solaire-inspector-url-art {
  transform: translate3d(var(--solaire-art-x, 0px), var(--solaire-art-y, 0px), 0) !important;
  object-position: center center !important;
}

html body .solaire-astoria-overlay-art {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;
  transform: none !important;
}

html body .card-inspector-front > .solaire-inspector-art-window > .solaire-inspector-url-art {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;
  transform: translate3d(var(--solaire-art-x, 0px), var(--solaire-art-y, 0px), 0) !important;
  transition: transform 95ms ease-out !important;
}

html body .card-inspector-front:has(> .solaire-astoria-overlay)
  > .solaire-inspector-art-window
  > .solaire-inspector-url-art {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  transform: translate3d(var(--solaire-art-x, 0px), var(--solaire-art-y, 0px), 0) !important;
}

html body .fourfun-card-face:has(> .solaire-astoria-overlay) .fourfun-card-full-art > img:first-child {
  transform:
    translate3d(calc(var(--card-parallax-x, 0px) * .12), calc(var(--card-parallax-y, 0px) * .12), 0)
    rotate(calc(var(--card-parallax-rot, 0deg) * .07))
    scale(1.004) !important;
}

html body .card-catalog-preset-surface:has(> .solaire-astoria-overlay) > .card-catalog-preset-image,
html body .album-preset-card-surface:has(> .solaire-astoria-overlay) > .album-preset-card-image {
  transform:
    translate3d(calc(var(--catalog-parallax-art-x, 0px) * .16), calc(var(--catalog-parallax-art-y, 0px) * .16), 0)
    scale(1.003) !important;
}

html body .solaire-astoria-overlay-underlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: fill !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  transform-origin: center center !important;
  animation: solaire-underlay-pulse 2s ease-in-out infinite !important;
  filter:
    brightness(1)
    drop-shadow(0 0 10px rgba(255, 241, 196, 0.18))
    drop-shadow(0 0 18px rgba(255, 217, 120, 0.12)) !important;
}

html body .solaire-astoria-overlay-art {
  animation: solaire-overlay-float 5.8s ease-in-out infinite !important;
  transform-origin: center center !important;
}

@keyframes solaire-underlay-pulse {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1)
      drop-shadow(0 0 10px rgba(255, 241, 196, 0.18))
      drop-shadow(0 0 18px rgba(255, 217, 120, 0.12));
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.018);
    filter:
      brightness(1.18)
      drop-shadow(0 0 14px rgba(255, 244, 212, 0.34))
      drop-shadow(0 0 28px rgba(255, 214, 116, 0.22));
  }
}

@keyframes solaire-overlay-float {
  0%   { transform: translate3d(0, 0, 0); }
  18%  { transform: translate3d(0.6%, -1.2%, 0); }
  38%  { transform: translate3d(-0.35%, -1.95%, 0); }
  58%  { transform: translate3d(-0.55%, -0.9%, 0); }
  78%  { transform: translate3d(0.45%, -1.55%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

html body .fourfun-card-face.rarity-supporter .fourfun-card-title,
html body .card-inspector-front.rarity-supporter .card-inspector-card-title,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-title,
html body .card-album.card-album-modal-book .album-preset-card.rarity-supporter .album-preset-card-title {
  transform: translateY(-10px) !important;
}

html body .fourfun-card-face.rarity-supporter .fourfun-card-rarity-seal,
html body .card-inspector-front.rarity-supporter .card-inspector-unified-seal.is-on-card,
html body .card-catalog-preset-card.rarity-supporter .card-catalog-preset-rarity,
html body .card-catalog-preset-card.rarity-supporter .card-inspector-unified-seal.is-catalog {
  transform: translateX(-5px) !important;
}

html body .reward-rarity-seal.rarity-seal-supporter {
  --seal-text: #fffdf3;
  color: #fffdf3 !important;
  border-color: rgba(255, 232, 154, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(61, 34, 2, 0.98),
    0 0 4px rgba(255, 243, 187, 0.28) !important;
  -webkit-text-stroke: 0.35px rgba(84, 46, 4, 0.55);
  letter-spacing: .08em !important;
}

html body .reward-rarity-seal.rarity-seal-supporter::before,
html body .reward-rarity-seal.rarity-seal-supporter::after {
  color: #fff3ba !important;
  text-shadow:
    0 0 5px rgba(255, 224, 112, 0.58),
    0 1px 0 rgba(79, 41, 3, 0.72) !important;
}

html body .solaire-astoria-overlay {
  --solaire-overlay-x: 0px;
  --solaire-overlay-y: 0px;
  transform: translate3d(var(--solaire-overlay-x), var(--solaire-overlay-y), 0) !important;
  transition: transform 95ms ease-out !important;
  will-change: transform !important;
}

html body .solaire-astoria-overlay-underlay {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  animation: solaire-underlay-pulse-v2 2s ease-in-out infinite !important;
  will-change: transform, filter, opacity !important;
}

html body .solaire-astoria-overlay-art {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  transform: translate3d(0, 0, 0) !important;
  animation: solaire-overlay-float-v2 5.6s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes solaire-underlay-pulse-v2 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 8px rgba(255, 238, 180, 0.14))
      drop-shadow(0 0 14px rgba(255, 206, 92, 0.10));
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.018);
    filter:
      brightness(1.36)
      saturate(1.12)
      drop-shadow(0 0 14px rgba(255, 247, 218, 0.34))
      drop-shadow(0 0 24px rgba(255, 214, 110, 0.26))
      drop-shadow(0 0 36px rgba(255, 192, 74, 0.18));
  }
}

@keyframes solaire-overlay-float-v2 {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(0.35%, -0.90%, 0); }
  34%  { transform: translate3d(-0.25%, -1.55%, 0); }
  52%  { transform: translate3d(-0.40%, -0.80%, 0); }
  72%  { transform: translate3d(0.28%, -1.22%, 0); }
  88%  { transform: translate3d(0.10%, -0.48%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

html body .fourfun-card-face:has(> .solaire-astoria-overlay) > .solaire-astoria-overlay {
  transform: translate3d(calc(var(--card-parallax-x, 0px) * -0.12), calc(var(--card-parallax-y, 0px) * -0.12), 0) !important;
}

html body .card-catalog-preset-surface:has(> .solaire-astoria-overlay) > .solaire-astoria-overlay,
html body .album-preset-card-surface:has(> .solaire-astoria-overlay) > .solaire-astoria-overlay {
  transform: translate3d(calc(var(--catalog-parallax-art-x, 0px) * -0.16), calc(var(--catalog-parallax-art-y, 0px) * -0.16), 0) !important;
}

html body .card-inspector-front:has(> .solaire-astoria-overlay) > .solaire-astoria-overlay {
  transform: translate3d(var(--solaire-overlay-x, 0px), var(--solaire-overlay-y, 0px), 0) !important;
}

html body .solaire-astoria-stars-canvas,
html body .fourfun-card-face > .solaire-astoria-stars-canvas,
html body .card-inspector-front > .solaire-astoria-stars-canvas,
html body .card-catalog-preset-surface > .solaire-astoria-stars-canvas,
html body .album-preset-card-surface > .solaire-astoria-stars-canvas {
  z-index: 220 !important;
}

html body .solaire-astoria-overlay-art {
  animation: solaire-overlay-float-v3 5.0s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes solaire-overlay-float-v3 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  18% {
    transform: translate3d(0.65%, -1.35%, 0) scale(1.005);
  }
  38% {
    transform: translate3d(-0.55%, -2.25%, 0) scale(1.010);
  }
  58% {
    transform: translate3d(-0.80%, -1.05%, 0) scale(1.007);
  }
  78% {
    transform: translate3d(0.55%, -1.85%, 0) scale(1.009);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

html body .solaire-astoria-overlay-art-float {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform-origin: center center !important;
  animation: solaire-overlay-float-wrapper 4.8s ease-in-out infinite !important;
  will-change: transform !important;
}

html body .solaire-astoria-overlay-art-float > .solaire-astoria-overlay-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;
  animation: none !important;
  transform: none !important;
}

@keyframes solaire-overlay-float-wrapper {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(0.28%, -0.72%, 0);
  }
  42% {
    transform: translate3d(-0.20%, -1.62%, 0);
  }
  62% {
    transform: translate3d(-0.34%, -0.92%, 0);
  }
  82% {
    transform: translate3d(0.22%, -1.30%, 0);
  }
}

html body .solaire-astoria-overlay-underlay {
  z-index: 7 !important;
}
html body .solaire-astoria-overlay-art-float {
  z-index: 8 !important;
}
html body .solaire-astoria-stars-canvas,
html body .fourfun-card-face > .solaire-astoria-stars-canvas,
html body .card-inspector-front > .solaire-astoria-stars-canvas,
html body .card-catalog-preset-surface > .solaire-astoria-stars-canvas,
html body .album-preset-card-surface > .solaire-astoria-stars-canvas {
  z-index: 260 !important;
}

html body .solaire-astoria-overlay-art-float {
  animation: none !important;
  transform: translate3d(0px, -1.38px, 0) scale(1.002) !important;
  will-change: transform !important;
}

html body .solaire-astoria-overlay-art-float > .solaire-astoria-overlay-art {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

html body .solaire-astoria-overlay-art-float {
  animation: none !important;
  transform: translate3d(0, -3.2px, 0) scale(1.006) !important;
  will-change: transform !important;
}

html body .solaire-astoria-overlay-art-float {
  animation: none !important;
  transform: translate3d(0, -1px, 0) scale(1) !important;
  will-change: transform !important;
}

html body .reward-rarity-seal.rarity-seal-supporter {
  --seal-text: #000000 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.38),
    0 0 2px rgba(255,238,170,.22) !important;
}

html body .reward-rarity-seal.rarity-seal-supporter::before,
html body .reward-rarity-seal.rarity-seal-supporter::after {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.30) !important;
}

html body .box-buy-button.is-guest-simulator-button .box-buy-button-label {
  white-space: nowrap !important;
  font-size: clamp(10px, .86vw, 13px) !important;
  letter-spacing: .055em !important;
}

html body .box-buy-button.is-guest-simulator-button:disabled {
  cursor: not-allowed !important;
  opacity: .52 !important;
  filter: grayscale(.28) brightness(.72) !important;
}

html body .box-card .card-actions
.purchase-action-pair.purchase-style-bryer
> button.btn.primary.box-buy-button.buy-style-bryer.is-guest-simulator-button.has-long-label
> span.box-buy-button-label {
  font-size: 21px !important;
  line-height: .94 !important;
  letter-spacing: .006em !important;
  transform: scale(1.04) !important;
  transform-origin: center center !important;
}

html body .box-card .card-actions
.purchase-action-pair.purchase-style-mounts
> button.btn.primary.box-buy-button.buy-style-mounts.is-guest-simulator-button
> .box-buy-button-label {
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  transform: none !important;
}

html body .box-card .card-actions
.purchase-action-pair.purchase-style-cards
> button.btn.primary.box-buy-button.buy-style-cards.is-guest-simulator-button
> .box-buy-button-label {
  top: -2px !important;
  font-size: 29px !important;
  line-height: .90 !important;
  letter-spacing: .008em !important;
  transform: scale(1.08) !important;
  transform-origin: center !important;
}

html body .box-card .card-actions
.purchase-action-pair.is-guest-simulator-unavailable {
  opacity: .62 !important;
  filter: grayscale(.18) saturate(.72) brightness(.88) !important;
}

html body .box-card .card-actions
.purchase-action-pair.is-guest-simulator-unavailable
> button.box-buy-button.is-guest-simulator-unavailable {
  cursor: not-allowed !important;
}

html body .lootbox-card-detail-hint.is-simulator-login-hint {
  gap: 0 !important;
  cursor: default !important;
}

html body .lootbox-card-detail-hint.is-simulator-login-hint > img {
  display: none !important;
}

@media (max-width: 700px) {
  html body .box-card .card-actions
  .purchase-action-pair.purchase-style-bryer
  > button.btn.primary.box-buy-button.buy-style-bryer.is-guest-simulator-button.has-long-label
  > span.box-buy-button-label {
    font-size: 18.5px !important;
    transform: scale(1.025) !important;
  }

  html body .box-card .card-actions
  .purchase-action-pair.purchase-style-mounts
  > button.btn.primary.box-buy-button.buy-style-mounts.is-guest-simulator-button
  > .box-buy-button-label {
    font-size: 14px !important;
  }

  html body .box-card .card-actions
  .purchase-action-pair.purchase-style-cards
  > button.btn.primary.box-buy-button.buy-style-cards.is-guest-simulator-button
  > .box-buy-button-label {
    font-size: 25px !important;
    transform: scale(1.05) !important;
  }
}

html body .card-album.card-album-modal-book .card-book-slot
.album-preset-card.rarity-supporter .album-preset-card-title {
  transform: translateY(-2px) !important;
  z-index: 320 !important;
}

html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal {
  font-size: 9.2px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-common,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-uncommon,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-rare {
  font-size: 9.6px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-epic,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-supporter {
  font-size: 9.7px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-halloween {
  font-size: 9.4px !important;
}

@media (max-width: 640px) {
  html body .card-album.card-album-modal-book .card-book-slot
  > .card-book-slot-rarity > .reward-rarity-seal {
    font-size: 9px !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot
  > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-supporter {
    font-size: 9.3px !important;
  }
}

html body .card-album.card-album-modal-book .card-book-slot
.album-preset-card.rarity-supporter .album-preset-card-title {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 500 !important;
  color: #f3d58b !important;
  -webkit-text-fill-color: #f3d58b !important;
  -webkit-text-stroke: 0 !important;
  background: none !important;
  background-image: none !important;
  transform: translateY(-2px) !important;
  text-shadow:
    0 1px 0 rgba(255,248,214,.22),
    0 2px 5px rgba(31,18,3,.90),
    0 0 4px rgba(255,221,119,.20) !important;
  filter: none !important;
}

html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal {
  font-size: 10.4px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-common,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-uncommon,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-rare {
  font-size: 10.7px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-epic {
  font-size: 10.8px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-supporter {
  font-size: 11.2px !important;
}
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-legendary,
html body .card-album.card-album-modal-book .card-book-slot
> .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-halloween {
  font-size: 10.5px !important;
}

@media (max-width: 640px) {
  html body .card-album.card-album-modal-book .card-book-slot
  > .card-book-slot-rarity > .reward-rarity-seal {
    font-size: 9.7px !important;
  }
  html body .card-album.card-album-modal-book .card-book-slot
  > .card-book-slot-rarity > .reward-rarity-seal.rarity-seal-supporter {
    font-size: 10.3px !important;
  }
}

html body .card-inspector-actions {
  position: relative !important;
}

html body .card-inspector-download-options {
  position: absolute;
  right: 0;
  top: calc(100% + 11px);
  z-index: 900;
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 7px;
  min-width: 252px;
  padding: 7px;
  border: 1px solid rgba(231, 199, 107, .58);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(47, 43, 31, .98), rgba(20, 22, 18, .985));
  box-shadow:
    0 14px 34px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(218, 180, 78, .10);
  backdrop-filter: blur(10px);
}

html body .card-inspector-download-options::before {
  content: "";
  position: absolute;
  right: 44px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(231, 199, 107, .58);
  border-top: 1px solid rgba(231, 199, 107, .58);
  background: #2e2b20;
  transform: rotate(45deg);
}

html body .card-inspector-download-option {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(24, 27, 22, .94);
  color: #f5e6b8;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

html body .card-inspector-download-option:hover,
html body .card-inspector-download-option:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 207, 119, .68);
  outline: none;
  background:
    linear-gradient(180deg, rgba(255,231,159,.12), rgba(255,255,255,.02)),
    rgba(31, 33, 26, .97);
  box-shadow: 0 5px 14px rgba(0,0,0,.24);
}

html body .card-inspector-download-option strong {
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .065em;
  text-transform: uppercase;
}

html body .card-inspector-download-option span {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .09em;
  color: rgba(245, 230, 184, .64);
  text-transform: uppercase;
}

html body .card-inspector-download-option.is-animated strong {
  color: #f4d678;
}

html body .card-inspector-download-option.is-png strong {
  color: #f3ead0;
}

@media (max-width: 720px) {
  html body .card-inspector-download-options {
    right: 0;
    left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  html body .card-inspector-download-options::before {
    right: 23%;
  }
}

html body .card-inspector-download-shell {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
}

html body .card-inspector-download-shell
> .card-inspector-download-button {
  margin: 0 !important;
}

html body .card-inspector-download-shell
> .card-inspector-download-options {
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 11px) !important;
  transform: translateX(-50%) !important;
}

html body .card-inspector-download-shell
> .card-inspector-download-options::before {
  left: 50% !important;
  right: auto !important;
  margin-left: -5px !important;
  transform: rotate(45deg) !important;
}

@media (max-width: 720px) {
  html body .card-inspector-download-shell
  > .card-inspector-download-options {
    left: 50% !important;
    right: auto !important;
    min-width: 252px !important;
    transform: translateX(-50%) !important;
  }

  html body .card-inspector-download-shell
  > .card-inspector-download-options::before {
    left: 50% !important;
    right: auto !important;
    margin-left: -5px !important;
  }
}

html body .card-catalog-preset-card.rarity-supporter.is-locked
.solaire-astoria-overlay,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.solaire-astoria-stars-canvas,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.halloween-666-overlays,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.halloween-666-frame-overlay {
  filter: grayscale(1) brightness(.46) !important;
}

html body .album-preset-card.rarity-supporter.is-locked
.solaire-astoria-overlay,
html body .album-preset-card.rarity-supporter.is-locked
.solaire-astoria-stars-canvas,
html body .album-preset-card.rarity-supporter.is-locked
.halloween-666-overlays,
html body .album-preset-card.rarity-supporter.is-locked
.halloween-666-frame-overlay {
  filter: grayscale(1) brightness(.46) !important;
}

html body .fourfun-card-face.rarity-supporter.is-locked
.solaire-astoria-overlay,
html body .fourfun-card-face.rarity-supporter.is-locked
.solaire-astoria-stars-canvas,
html body .fourfun-card-face.rarity-supporter.is-locked
.halloween-666-overlays,
html body .fourfun-card-face.rarity-supporter.is-locked
.halloween-666-frame-overlay {
  filter: grayscale(1) brightness(.46) !important;
}

html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .solaire-astoria-overlay,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .solaire-astoria-stars-canvas,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .halloween-666-overlays,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .halloween-666-frame-overlay {
  filter: grayscale(1) brightness(.46) !important;
}

html body .card-catalog-preset-card.rarity-supporter.is-locked .solaire-astoria-overlay,
html body .album-preset-card.rarity-supporter.is-locked .solaire-astoria-overlay,
html body .card-inspector.rarity-supporter.is-locked .solaire-astoria-overlay {
  opacity: .72 !important;
}

html body .fourfun-card-face.rarity-supporter.is-locked
.solaire-astoria-overlay,
html body .fourfun-card-face.rarity-supporter.is-locked
.solaire-astoria-stars-canvas,
html body .fourfun-card-face.rarity-supporter.is-locked
.halloween-666-overlays,
html body .fourfun-card-face.rarity-supporter.is-locked
.halloween-666-frame-overlay,

html body .card-catalog-preset-card.rarity-supporter.is-locked
.solaire-astoria-overlay,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.solaire-astoria-stars-canvas,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.halloween-666-overlays,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.halloween-666-frame-overlay,

html body .album-preset-card.rarity-supporter.is-locked
.solaire-astoria-overlay,
html body .album-preset-card.rarity-supporter.is-locked
.solaire-astoria-stars-canvas,
html body .album-preset-card.rarity-supporter.is-locked
.halloween-666-overlays,
html body .album-preset-card.rarity-supporter.is-locked
.halloween-666-frame-overlay,

html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .solaire-astoria-overlay,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .solaire-astoria-stars-canvas,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .halloween-666-overlays,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front .halloween-666-frame-overlay {
  filter:
    grayscale(1)
    brightness(.46)
    contrast(.96)
    blur(1.35px) !important;
}

html body .fourfun-card-face.rarity-supporter.is-locked
> .fourfun-card-preset-frame {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .card-catalog-preset-card.rarity-supporter.is-locked
.card-catalog-preset-frame {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .album-preset-card.rarity-supporter.is-locked
.album-preset-card-frame {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front > .card-inspector-preset {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .fourfun-card-face.rarity-supporter.is-locked
> .fourfun-card-preset-frame,
html body .card-catalog-preset-card.rarity-supporter.is-locked
.card-catalog-preset-frame,
html body .album-preset-card.rarity-supporter.is-locked
.album-preset-card-frame,
html body .card-inspector.rarity-supporter.is-locked
.card-inspector-front > .card-inspector-preset {
  opacity: 1 !important;
  visibility: visible !important;
  filter:
    grayscale(1)
    brightness(.46)
    contrast(.96)
    blur(1.35px) !important;
}

html body .card-catalog-modal
.card-catalog-preset-card.rarity-supporter
.card-catalog-preset-title {
  transform: translateY(-2px) !important;
}

html body .fourfun-card-back.rarity-supporter.is-locked
> .fourfun-card-back-preset,
html body .card-inspector-back.rarity-supporter.is-locked
> .card-inspector-back-image {
  filter:
    grayscale(1)
    brightness(.46)
    contrast(.96)
    blur(1.35px) !important;
}

html body .lootbox-four-card-stage.stage-cards
.lootbox-front-art.rarity-supporter
.card-inspector-card-title {
  transform: translateY(-2px) !important;
}

html body .topbar .nav-tabs .nav-tab-open {
  position: relative !important;
}

html body .topbar .nav-tabs .nav-tab-open .inventory-nav-new-badge {
  position: absolute !important;
  top: 3px !important;
  right: 5px !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,247,204,.88) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #d4513d, #982326) !important;
  color: #fff8e4 !important;
  box-shadow:
    0 1px 4px rgba(0,0,0,.68),
    0 0 9px rgba(241,171,96,.42) !important;
  font: 900 9px/1 Arial, sans-serif !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

html body .site-mobile-nav-grid .site-mobile-nav-inventory {
  position: relative !important;
}
html body .site-mobile-nav-grid .inventory-mobile-new-badge {
  position: absolute !important;
  top: 5px !important;
  right: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border: 1px solid rgba(255,247,204,.84) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #d4513d, #982326) !important;
  color: #fff8e4 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.6) !important;
  font: 900 9px/1 Arial, sans-serif !important;
  pointer-events: none !important;
}

html body .view-page.view-vault .carousel-coffer.is-unowned > img,
html body .view-page.view-vault .carousel-coffer.is-unowned.selected > img,
html body .view-page.view-vault .carousel-coffer.is-unowned.is-legendary-coffer.selected > img,
html body .view-page.view-vault .carousel-coffer.is-vip-coffer.is-unowned.selected > img {
  opacity: .58 !important;
  filter: grayscale(1) saturate(0) brightness(.68) contrast(.92) !important;
}

html body .view-page.view-vault .carousel-coffer.is-unowned.is-access-locked > img,
html body .view-page.view-vault .carousel-coffer.is-vip-coffer.is-access-locked.selected > img {
  opacity: .54 !important;
  filter: grayscale(1) saturate(0) brightness(.60) contrast(.90) !important;
}

html body .view-page.view-vault > .inventory-hero
> .hero-character.inventory-character-charsit3 > img {
  scale: .88 !important;
  transform-origin: left bottom !important;
}

html body .view-page.view-vault > .inventory-hero
> .hero-character.inventory-character-charsit2 > img {
  scale: .88 !important;
  transform-origin: right bottom !important;
}

html body .view-page.view-vault
> .open-stage
> .vault-carousel
> .carousel-arrow.left {
  left: calc(50% - 158px) !important;
  right: auto !important;
}

html body .view-page.view-vault
> .open-stage
> .vault-carousel
> .carousel-arrow.right {
  left: auto !important;
  right: calc(50% - 158px) !important;
}

html body .lootbox-card-detail-hint.is-simulator-member-hint {
  width: max-content !important;
  max-width: 188% !important;
}

html body .lootbox-card-detail-hint.is-simulator-member-hint > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  line-height: 1.03 !important;
  padding: 4px 8px 5px !important;
}

html body .lootbox-card-detail-hint.is-simulator-member-hint
.simulator-member-hint-line {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  html body .view-page.view-vault
  > .open-stage
  > .vault-carousel
  > .carousel-arrow.left {
    left: calc(50% - 145px) !important;
  }

  html body .view-page.view-vault
  > .open-stage
  > .vault-carousel
  > .carousel-arrow.right {
    right: calc(50% - 145px) !important;
  }

  html body .lootbox-card-detail-hint.is-simulator-member-hint {
    max-width: 205% !important;
  }

  html body .lootbox-card-detail-hint.is-simulator-member-hint > span {
    font-size: 7px !important;
    padding-inline: 6px !important;
  }
}

html body .topbar .nav-tabs .nav-tab-open .inventory-nav-new-badge,
html body .site-mobile-nav-grid .inventory-mobile-new-badge {
  transform-origin: 50% 50% !important;
  will-change: transform, background, box-shadow, filter !important;
  animation: inventoryNewUnitBadgePulse 1.55s ease-in-out infinite !important;
}

@keyframes inventoryNewUnitBadgePulse {
  0%, 100% {
    transform: scale(.92);
    background: linear-gradient(180deg, #b43f35, #74191f);
    filter: brightness(.88);
    box-shadow:
      0 1px 4px rgba(0,0,0,.68),
      0 0 5px rgba(241,171,96,.22);
  }
  50% {
    transform: scale(1.13);
    background: linear-gradient(180deg, #f06b50, #bd2930);
    filter: brightness(1.22);
    box-shadow:
      0 1px 5px rgba(0,0,0,.62),
      0 0 13px rgba(255,184,93,.62);
  }
}

html body .purchase-dialog.is-success .purchase-dialog-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  max-width: 610px !important;
  font-size: clamp(29px, 3.7vw, 43px) !important;
  line-height: 1.04 !important;
}

html body .purchase-dialog.is-success .purchase-dialog-title > span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

html body .content > .view-page.view-shop {
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  transform: translate3d(0, -44px, 0) !important;
}

html[data-site-overlay-open="true"] body .content > .view-page.view-shop {
  z-index: 0 !important;
  isolation: isolate !important;
}

html body .purchase-overlay {
  z-index: 100000 !important;
}

@media (max-width: 820px) {
  html body .content > .view-page.view-shop {
    transform: translate3d(0, -22px, 0) !important;
  }

  html body .purchase-dialog.is-success .purchase-dialog-title {
    font-size: clamp(25px, 7vw, 34px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .topbar .nav-tabs .nav-tab-open .inventory-nav-new-badge,
  html body .site-mobile-nav-grid .inventory-mobile-new-badge {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

html body .app-shell:has([aria-modal="true"]) > .topbar,
html body .app-shell:has(.modal-backdrop) > .topbar,
html body .app-shell:has(.help-backdrop) > .topbar,
html body .app-shell:has(.peek-inside-backdrop) > .topbar {
  z-index: 20 !important;
}

html body .app-shell:has([aria-modal="true"]) > .ticker-wrap,
html body .app-shell:has(.modal-backdrop) > .ticker-wrap,
html body .app-shell:has(.help-backdrop) > .ticker-wrap,
html body .app-shell:has(.peek-inside-backdrop) > .ticker-wrap {
  z-index: 999 !important;
}

html body .modal-backdrop,
html body .help-backdrop,
html body .purchase-overlay,
html body .user-area-overlay,
html body .achievements-overlay,
html body .collection-detail-overlay,
html body .gift-compose-overlay,
html body .gift-detail-overlay,
html body .first-purchase-gift-overlay,
html body .buy-limit-reached-popup-overlay,
html body .reviews-overlay,
html body .mobile-entry-notice-overlay,
html body .duplicate-reward-popup-overlay,
html body .duplicate-exit-confirm-overlay,
html body .custom-coffer-win-popup-backdrop,
html body .reel-overlay,
html body .card-album-modal-backdrop,
html body .card-inspector-backdrop,
html body .card-catalog-backdrop {
  z-index: 100000 !important;
}

html body .reviews-notice-overlay {
  z-index: 100010 !important;
}

html[data-site-overlay-open="true"] body .content > .view-page.view-shop {
  z-index: 0 !important;
  isolation: isolate !important;
}

html body .reviews-overlay > .reviews-panel {
  scale: 1.055 !important;
  transform-origin: 50% 50% !important;
}

@media (max-width: 820px) {

  html body .app-shell:has([aria-modal="true"]) > .topbar,
  html body .app-shell:has(.modal-backdrop) > .topbar,
  html body .app-shell:has(.help-backdrop) > .topbar,
  html body .app-shell:has(.peek-inside-backdrop) > .topbar {
    z-index: 2450 !important;
  }

  html body .app-shell:has([aria-modal="true"]) > .ticker-wrap,
  html body .app-shell:has(.modal-backdrop) > .ticker-wrap,
  html body .app-shell:has(.help-backdrop) > .ticker-wrap,
  html body .app-shell:has(.peek-inside-backdrop) > .ticker-wrap {
    z-index: 10 !important;
  }

  html body .reviews-overlay > .reviews-panel {
    scale: 1.025 !important;
  }
}

html body .reviews-overlay
.review-slot-card.is-filled .review-slot-name {
  font-size: clamp(13px, 1.08vw, 17px) !important;
}

html body .reviews-overlay
.review-slot-card.is-filled .review-slot-copy {
  font-size: clamp(10px, .79vw, 12.5px) !important;
}

@media (max-width: 767px), (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
  html body .reviews-overlay
  .review-slot-card.is-filled .review-slot-name {
    font-size: clamp(11.5px, 1.65vw, 14px) !important;
  }

  html body .reviews-overlay
  .review-slot-card.is-filled .review-slot-copy {
    font-size: clamp(9px, 1.2vw, 11px) !important;
  }

  html body .reviews-overlay
  .review-slot-card.is-filled.is-short-review .review-slot-name {
    font-size: clamp(12.5px, 1.8vw, 15px) !important;
  }

  html body .reviews-overlay
  .review-slot-card.is-filled.is-short-review .review-slot-copy {
    font-size: clamp(10px, 1.4vw, 12px) !important;
  }
}

.coffer-hall-promo-banners {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  margin: clamp(14px, 1.8vw, 26px) auto 8px;
  padding: 0 24px;
  position: relative;
  z-index: 3;
}

.coffer-hall-promo-banner {
  --promo-interval: 3s;
  --promo-cycle: 9s;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1136 / 215;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  transform: translateZ(0);
  contain: layout paint;
  transition: filter .24s ease, transform .24s ease;
}

.coffer-hall-promo-banner-two {
  --promo-interval: 4.2s;
  --promo-cycle: 12.6s;
}

.coffer-hall-promo-banner:hover {
  filter: brightness(1.07) saturate(1.06) drop-shadow(0 0 12px rgba(226, 190, 92, .16));
}

.coffer-hall-promo-banner:active {
  transform: scale(.994);
}

.coffer-hall-promo-banner:focus-visible {
  outline: 2px solid rgba(245, 211, 126, .9);
  outline-offset: 3px;
}

.coffer-hall-promo-banner-base,
.coffer-hall-promo-zoom-track,
.coffer-hall-promo-slide,
.coffer-hall-promo-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coffer-hall-promo-banner-base {
  z-index: 0;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.coffer-hall-promo-zoom-track {
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: cofferPromoContinuousZoom 12.8s ease-in-out infinite;
  will-change: transform;
}

.coffer-hall-promo-banner-two .coffer-hall-promo-zoom-track {
  animation-duration: 14.6s;
  animation-delay: -5.1s;
}

.coffer-hall-promo-slide {
  display: block;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform, filter, clip-path;
  animation: cofferPromoSlideGlitch var(--promo-cycle) linear infinite;
}

.coffer-hall-promo-slide.is-slide-1 { animation-delay: 0s; }
.coffer-hall-promo-slide.is-slide-2 { animation-delay: var(--promo-interval); }
.coffer-hall-promo-slide.is-slide-3 { animation-delay: calc(var(--promo-interval) * 2); }

.coffer-hall-promo-stars {
  z-index: 7;
  display: block;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 3px rgba(255, 220, 112, .45));
}

.coffer-hall-promo-stars i {
  --star-size: 8px;
  --star-opacity: .96;
  position: absolute;
  left: var(--star-left);
  top: var(--star-top);
  width: var(--star-size);
  height: var(--star-size);
  margin: calc(var(--star-size) * -.5) 0 0 calc(var(--star-size) * -.5);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fffef0 0 13%, #ffe895 21%, #efbd43 43%, rgba(219, 151, 31, .42) 59%, transparent 74%);
  box-shadow:
    0 0 4px rgba(255, 247, 195, 1),
    0 0 9px rgba(255, 218, 107, .96),
    0 0 17px rgba(223, 163, 47, .72);
  transform: translate3d(0, 0, 0) scale(.45);
  animation:
    cofferPromoStarTwinkle var(--star-twinkle) ease-in-out var(--star-delay) infinite,
    cofferPromoStarDrift var(--star-drift) ease-in-out var(--star-delay) infinite;
  will-change: opacity, transform;
}

.coffer-hall-promo-stars i::before,
.coffer-hall-promo-stars i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 198, .98), transparent);
  transform: translate(-50%, -50%);
  border-radius: 999px;
}
.coffer-hall-promo-stars i::before {
  width: calc(var(--star-size) * 2.65);
  height: 1.5px;
}
.coffer-hall-promo-stars i::after {
  width: 1.5px;
  height: calc(var(--star-size) * 2.65);
}

.coffer-hall-promo-stars i:nth-child(1) {
  --star-left:7%;
  --star-top:20%;
  --star-size:8px;
  --star-delay:-.4s;
  --star-twinkle:3.1s;
  --star-drift:8.7s;
}
.coffer-hall-promo-stars i:nth-child(2) {
  --star-left:19%;
  --star-top:72%;
  --star-size:6px;
  --star-delay:-2.2s;
  --star-twinkle:4.4s;
  --star-drift:10.4s;
}
.coffer-hall-promo-stars i:nth-child(3) {
  --star-left:33%;
  --star-top:32%;
  --star-size:9px;
  --star-delay:-1.1s;
  --star-twinkle:3.6s;
  --star-drift:9.3s;
}
.coffer-hall-promo-stars i:nth-child(4) {
  --star-left:46%;
  --star-top:81%;
  --star-size:7px;
  --star-delay:-3.8s;
  --star-twinkle:4.8s;
  --star-drift:11.8s;
}
.coffer-hall-promo-stars i:nth-child(5) {
  --star-left:58%;
  --star-top:16%;
  --star-size:6px;
  --star-delay:-.9s;
  --star-twinkle:2.9s;
  --star-drift:8.1s;
}
.coffer-hall-promo-stars i:nth-child(6) {
  --star-left:68%;
  --star-top:60%;
  --star-size:10px;
  --star-delay:-4.3s;
  --star-twinkle:5.2s;
  --star-drift:12.7s;
}
.coffer-hall-promo-stars i:nth-child(7) {
  --star-left:81%;
  --star-top:30%;
  --star-size:7px;
  --star-delay:-2.7s;
  --star-twinkle:3.8s;
  --star-drift:9.9s;
}
.coffer-hall-promo-stars i:nth-child(8) {
  --star-left:93%;
  --star-top:78%;
  --star-size:8px;
  --star-delay:-5.0s;
  --star-twinkle:4.6s;
  --star-drift:13.2s;
}
.coffer-hall-promo-stars i:nth-child(9) {
  --star-left:11%;
  --star-top:54%;
  --star-size:5px;
  --star-delay:-1.8s;
  --star-twinkle:3.3s;
  --star-drift:10.8s;
}
.coffer-hall-promo-stars i:nth-child(10) {
  --star-left:26%;
  --star-top:13%;
  --star-size:7px;
  --star-delay:-4.7s;
  --star-twinkle:5.0s;
  --star-drift:12.2s;
}
.coffer-hall-promo-stars i:nth-child(11) {
  --star-left:41%;
  --star-top:48%;
  --star-size:5px;
  --star-delay:-3.1s;
  --star-twinkle:3.7s;
  --star-drift:9.1s;
}
.coffer-hall-promo-stars i:nth-child(12) {
  --star-left:63%;
  --star-top:85%;
  --star-size:7px;
  --star-delay:-.2s;
  --star-twinkle:4.1s;
  --star-drift:11.1s;
}
.coffer-hall-promo-stars i:nth-child(13) {
  --star-left:78%;
  --star-top:83%;
  --star-size:6px;
  --star-delay:-3.5s;
  --star-twinkle:3.0s;
  --star-drift:8.9s;
}
.coffer-hall-promo-stars i:nth-child(14) {
  --star-left:89%;
  --star-top:15%;
  --star-size:9px;
  --star-delay:-1.4s;
  --star-twinkle:4.9s;
  --star-drift:12.9s;
}

.coffer-hall-promo-banner-two .coffer-hall-promo-stars i:nth-child(odd) { animation-delay: calc(var(--star-delay) - 1.3s); }
.coffer-hall-promo-banner-two .coffer-hall-promo-stars i:nth-child(even) { animation-delay: calc(var(--star-delay) - 3.4s); }

@keyframes cofferPromoContinuousZoom {
  0%, 100% { transform: scale(1.008) translate3d(0, 0, 0); }
  50% { transform: scale(1.045) translate3d(-.25%, .18%, 0); }
}

@keyframes cofferPromoSlideGlitch {
  0% {
    opacity: 0;
    transform: translate3d(-1.1%, .5%, 0) skewX(-.7deg);
    filter: brightness(1.46) contrast(1.38) saturate(1.28);
    clip-path: inset(10% 0 58% 0);
  }
  1.1% {
    opacity: .52;
    transform: translate3d(.85%, -.35%, 0) skewX(.5deg);
    filter: brightness(1.3) contrast(1.2) saturate(1.18);
    clip-path: inset(48% 0 13% 0);
  }
  2.2% {
    opacity: .84;
    transform: translate3d(-.35%, .15%, 0);
    filter: brightness(1.12) contrast(1.08) saturate(1.08);
    clip-path: inset(0 0 0 0);
  }
  3%, 30.3% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  31.1% {
    opacity: .96;
    transform: translate3d(.75%, -.3%, 0) skewX(.35deg);
    filter: brightness(1.18) contrast(1.14) saturate(1.12);
    clip-path: inset(0 0 0 0);
  }
  32.2% {
    opacity: .65;
    transform: translate3d(-1%, .25%, 0) skewX(-.65deg);
    filter: brightness(1.48) contrast(1.42) saturate(1.32);
    clip-path: inset(15% 0 51% 0);
  }
  33.35% {
    opacity: .22;
    transform: translate3d(.8%, -.4%, 0) skewX(.55deg);
    filter: brightness(1.62) contrast(1.5) saturate(1.36);
    clip-path: inset(56% 0 8% 0);
  }
  37%, 96.7% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  97.8% {
    opacity: .08;
    transform: translate3d(-.8%, .25%, 0) skewX(-.4deg);
    filter: brightness(1.42) contrast(1.3) saturate(1.22);
    clip-path: inset(34% 0 27% 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(1%, -.35%, 0) skewX(.55deg);
    filter: brightness(1.55) contrast(1.44) saturate(1.3);
    clip-path: inset(8% 0 62% 0);
  }
}

.coffer-hall-promo-banner-one .coffer-hall-promo-slide {
  animation-name: cofferPromoSlideGlitchFour;
}
.coffer-hall-promo-banner-one .coffer-hall-promo-slide.is-slide-4 {
  animation-delay: calc(var(--promo-interval) * 3);
}

@keyframes cofferPromoSlideGlitchFour {
  0% {
    opacity: 0;
    transform: translate3d(-1.1%, .5%, 0) skewX(-.7deg);
    filter: brightness(1.46) contrast(1.38) saturate(1.28);
    clip-path: inset(10% 0 58% 0);
  }
  .825% {
    opacity: .52;
    transform: translate3d(.85%, -.35%, 0) skewX(.5deg);
    filter: brightness(1.3) contrast(1.2) saturate(1.18);
    clip-path: inset(48% 0 13% 0);
  }
  1.65% {
    opacity: .84;
    transform: translate3d(-.35%, .15%, 0);
    filter: brightness(1.12) contrast(1.08) saturate(1.08);
    clip-path: inset(0 0 0 0);
  }
  2.25%, 22.725% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  23.325% {
    opacity: .96;
    transform: translate3d(.75%, -.3%, 0) skewX(.35deg);
    filter: brightness(1.18) contrast(1.14) saturate(1.12);
    clip-path: inset(0 0 0 0);
  }
  24.15% {
    opacity: .65;
    transform: translate3d(-1%, .25%, 0) skewX(-.65deg);
    filter: brightness(1.48) contrast(1.42) saturate(1.32);
    clip-path: inset(15% 0 51% 0);
  }
  25.0125% {
    opacity: .22;
    transform: translate3d(.8%, -.4%, 0) skewX(.55deg);
    filter: brightness(1.62) contrast(1.5) saturate(1.36);
    clip-path: inset(56% 0 8% 0);
  }
  27.75%, 97.525% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  98.35% {
    opacity: .08;
    transform: translate3d(-.8%, .25%, 0) skewX(-.4deg);
    filter: brightness(1.42) contrast(1.3) saturate(1.22);
    clip-path: inset(34% 0 27% 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(1%, -.35%, 0) skewX(.55deg);
    filter: brightness(1.55) contrast(1.44) saturate(1.3);
    clip-path: inset(8% 0 62% 0);
  }
}

@keyframes cofferPromoStarTwinkle {
  0%, 10%, 100% {
    opacity: 0;
    filter: brightness(.82) saturate(.9);
  }
  22% {
    opacity: .58;
    filter: brightness(1.12) saturate(1.05);
  }
  43% {
    opacity: var(--star-opacity);
    filter: brightness(1.72) saturate(1.18);
  }
  58% {
    opacity: .72;
    filter: brightness(1.34) saturate(1.08);
  }
  74% {
    opacity: .24;
    filter: brightness(1.02);
  }
  86% {
    opacity: 0;
    filter: brightness(.86);
  }
}

@keyframes cofferPromoStarDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.52) rotate(0deg); }
  45% { transform: translate3d(7px, -5px, 0) scale(1.08) rotate(18deg); }
  72% { transform: translate3d(-4px, -9px, 0) scale(.76) rotate(31deg); }
}

@media (max-width: 900px) {
  .coffer-hall-promo-banners {
    gap: 8px;
    padding-inline: 8px;
    margin-top: 10px;
  }
  .coffer-hall-promo-stars i:nth-child(n+11) { display: none; }
}

@media (max-width: 620px) {
  .coffer-hall-promo-banners {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coffer-hall-promo-zoom-track { animation: none !important; }
  .coffer-hall-promo-slide {
    animation: none !important;
    opacity: 0 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
  }
  .coffer-hall-promo-slide.is-slide-1 { opacity: 1 !important; }
  .coffer-hall-promo-stars i {
    animation: none !important;
    opacity: .28;
  }
}

.coffer-hall-promo-banners {
  transform: translate3d(0, -22px, 0);
}

.coffer-hall-promo-banner-one {
  --promo-interval: 5s;
  --promo-cycle: 20s;
}

.coffer-hall-promo-banner-two {
  --promo-interval: 7.4s;
  --promo-cycle: 22.2s;
}

.coffer-hall-promo-edge-fade {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.coffer-hall-promo-edge-fade::before,
.coffer-hall-promo-edge-fade::after {
  content: "";
  position: absolute;
  top: -24%;
  bottom: -24%;
  width: 15.5%;
  pointer-events: none;
  filter: blur(11px);
  opacity: .94;
  will-change: transform;
}

.coffer-hall-promo-edge-fade::before {
  left: -5.6%;
  transform: rotate(-1.2deg) scaleY(1.08);
  background:
    radial-gradient(ellipse 92% 72% at 15% 32%, rgba(8, 16, 9, .95) 0 28%, rgba(10, 18, 10, .70) 49%, rgba(11, 19, 10, .24) 69%, transparent 84%),
    radial-gradient(ellipse 105% 62% at 8% 74%, rgba(6, 13, 8, .90) 0 30%, rgba(9, 17, 9, .48) 55%, transparent 82%);
}

.coffer-hall-promo-edge-fade::after {
  right: -5.6%;
  transform: rotate(1.2deg) scaleY(1.08);
  background:
    radial-gradient(ellipse 92% 72% at 85% 30%, rgba(8, 16, 9, .95) 0 28%, rgba(10, 18, 10, .70) 49%, rgba(11, 19, 10, .24) 69%, transparent 84%),
    radial-gradient(ellipse 105% 62% at 92% 76%, rgba(6, 13, 8, .90) 0 30%, rgba(9, 17, 9, .48) 55%, transparent 82%);
}

.coffer-hall-promo-rail {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 8;
  height: clamp(10px, 1.05vw, 15px);
  pointer-events: none;
  background:
    repeating-linear-gradient(176deg, rgba(255, 222, 164, .075) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #9a7549 0%, #73502d 20%, #452714 49%, #5d381d 73%, #211006 100%);
  box-shadow:
    inset 0 2px rgba(224, 177, 117, .22),
    inset 0 -3px rgba(24, 11, 5, .42),
    0 2px 4px rgba(4, 8, 4, .52);
  filter: drop-shadow(0 2px 2px rgba(8, 5, 2, .70));
}

.coffer-hall-promo-rail.is-top {
  top: 0;
  clip-path: polygon(0 36%, 5% 19%, 12% 31%, 20% 15%, 29% 29%, 38% 13%, 47% 27%, 56% 12%, 66% 28%, 76% 14%, 85% 29%, 94% 17%, 100% 33%, 100% 82%, 94% 71%, 85% 86%, 76% 73%, 66% 88%, 56% 74%, 47% 89%, 38% 75%, 29% 88%, 20% 72%, 12% 86%, 5% 73%, 0 84%);
}

.coffer-hall-promo-rail.is-bottom {
  bottom: 0;
  transform: scaleY(-1);
  clip-path: polygon(0 36%, 5% 19%, 12% 31%, 20% 15%, 29% 29%, 38% 13%, 47% 27%, 56% 12%, 66% 28%, 76% 14%, 85% 29%, 94% 17%, 100% 33%, 100% 82%, 94% 71%, 85% 86%, 76% 73%, 66% 88%, 56% 74%, 47% 89%, 38% 75%, 29% 88%, 20% 72%, 12% 86%, 5% 73%, 0 84%);
}

.coffer-hall-promo-rail::before,
.coffer-hall-promo-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(15px, 1.45vw, 23px);
  height: clamp(7px, .62vw, 10px);
  background: linear-gradient(135deg, #8eaf54 0%, #5d7d35 55%, #30451e 100%);
  border: 1px solid rgba(38, 58, 27, .8);
  border-radius: 100% 0 100% 0;
  box-shadow: 0 2px 3px rgba(5, 10, 4, .45);
  opacity: .88;
}

.coffer-hall-promo-rail::before {
  left: 7%;
  transform: translateY(-58%) rotate(-21deg);
}

.coffer-hall-promo-rail::after {
  right: 8%;
  transform: translateY(-42%) rotate(158deg);
}

@media (max-width: 900px) {
  .coffer-hall-promo-banners {
    transform: translate3d(0, -15px, 0);
  }
  .coffer-hall-promo-edge-fade::before,
  .coffer-hall-promo-edge-fade::after {
    width: 18%;
    filter: blur(8px);
  }
}

html body .coffer-hall-promo-banners {
  position: relative;
  top: -40px;
  transform: none !important;
}

html body .coffer-hall-promo-banner {
  overflow: visible;
  contain: layout;
}

html body .coffer-hall-promo-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url('/images/ui/coffer/coffer-banner-organic-edge-mask-v541.svg');
  mask-image: url('/images/ui/coffer/coffer-banner-organic-edge-mask-v541.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

html body .coffer-hall-promo-banner-one .coffer-hall-promo-unmasked-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}

html body .coffer-hall-promo-banner-one > .coffer-hall-promo-stars {
  -webkit-mask-image: url('/images/ui/coffer/coffer-banner-organic-edge-mask-v541.svg');
  mask-image: url('/images/ui/coffer/coffer-banner-organic-edge-mask-v541.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

html body .coffer-hall-promo-edge-fade {
  display: none !important;
}

html body .coffer-hall-promo-rail {
  left: 0;
  right: 0;
  z-index: 12;
  height: clamp(22px, 2.35vw, 34px);
  background: url('/images/ui/history/history-top-frame-v136.svg') center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 2px rgba(20, 10, 4, .68)) drop-shadow(0 7px 7px rgba(1, 8, 4, .28));
  clip-path: none;
  overflow: visible;
}

html body .coffer-hall-promo-rail::before,
html body .coffer-hall-promo-rail::after {
  content: none !important;
  display: none !important;
}

html body .coffer-hall-promo-rail.is-top {
  top: -16px;
  transform: none;
}

html body .coffer-hall-promo-rail.is-bottom {
  bottom: -16px;
  transform: scaleY(-1);
}

@media (max-width: 900px) {
  html body .coffer-hall-promo-banners {
    top: -30px;
    transform: none !important;
  }
  html body .coffer-hall-promo-rail {
    height: clamp(18px, 3.2vw, 28px);
  }
  html body .coffer-hall-promo-rail.is-top { top: -13px; }
  html body .coffer-hall-promo-rail.is-bottom { bottom: -13px; }
}

html body .view-shop .coffer-sections {
  padding-bottom: 24px !important;
}

html body .coffer-hall-promo-banners {
  position: relative;
  top: auto !important;
  transform: none !important;
  margin-top: -8px !important;
  margin-bottom: -30px !important;
}

html body .coffer-hall-promo-rail {
  height: 18px !important;
  background-size: 100% 100% !important;
}

html body .coffer-hall-promo-rail.is-top {
  top: -25px !important;
  bottom: auto !important;
  transform: none !important;
}

html body .coffer-hall-promo-rail.is-bottom {
  top: auto !important;
  bottom: -25px !important;
  transform: scaleY(-1) !important;
}

@media (max-width: 900px) {
  html body .view-shop .coffer-sections {
    padding-bottom: 18px !important;
  }

  html body .coffer-hall-promo-banners {
    top: auto !important;
    margin-top: -4px !important;
    margin-bottom: -20px !important;
  }

  html body .coffer-hall-promo-rail {
    height: 15px !important;
  }

  html body .coffer-hall-promo-rail.is-top {
    top: -20px !important;
  }

  html body .coffer-hall-promo-rail.is-bottom {
    bottom: -20px !important;
  }
}

html body .coffer-hall-promo-rail.is-top {
  top: -14px !important;
}

html body .coffer-hall-promo-rail.is-bottom {
  bottom: -14px !important;
}

@media (max-width: 900px) {
  html body .coffer-hall-promo-rail.is-top {
    top: -11px !important;
  }

  html body .coffer-hall-promo-rail.is-bottom {
    bottom: -11px !important;
  }
}

html body .coffer-hall-promo-rail {
  height: 13px !important;
}

html body .coffer-hall-promo-rail.is-top {
  top: -9px !important;
}

html body .coffer-hall-promo-rail.is-bottom {
  bottom: -9px !important;
}

html body .coffer-hall-promo-flora {
  position: absolute;
  inset: 0;
  z-index: 13;
  display: block;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

html body .coffer-hall-promo-flora > .is-petal {
  position: absolute;
  display: block;
  width: 8px;
  height: 13px;
  margin: 0;
  border: 1px solid rgba(103, 132, 70, .42);
  border-radius: 78% 22% 70% 30% / 36% 64% 36% 64%;
  background: linear-gradient(145deg, #4a6639 0%, #2b4728 52%, #172d1c 100%);
  box-shadow:
    inset 1px 1px rgba(155, 177, 105, .16),
    0 2px 3px rgba(1, 9, 4, .55);
  filter: drop-shadow(0 1px 1px rgba(1, 8, 4, .55));
  opacity: .96;
}

html body .coffer-hall-promo-flora > .is-petal::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 12%;
  width: 1px;
  height: 74%;
  border-radius: 999px;
  background: rgba(154, 177, 103, .25);
  transform: rotate(8deg);
}

html body .coffer-hall-promo-flora > .is-flower {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  color: #e4e2c5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-shadow:
    0 1px 1px rgba(1, 8, 4, .92),
    0 0 4px rgba(181, 194, 127, .22);
  filter: drop-shadow(0 2px 2px rgba(1, 8, 4, .58));
  opacity: .96;
}

html body .coffer-hall-promo-flora > .petal-top-a {
  left: 8%;
  top: -12px;
  transform: rotate(-34deg);
}
html body .coffer-hall-promo-flora > .petal-top-b {
  left: 31%;
  top: -10px;
  transform: rotate(25deg) scale(.82);
}
html body .coffer-hall-promo-flora > .petal-top-c {
  right: 29%;
  top: -11px;
  transform: rotate(-24deg) scale(.88);
}
html body .coffer-hall-promo-flora > .petal-top-d {
  right: 7%;
  top: -12px;
  transform: rotate(31deg) scale(.78);
}
html body .coffer-hall-promo-flora > .flower-top-a {
  left: 18%;
  top: -14px;
  transform: rotate(-12deg) scale(.78);
}
html body .coffer-hall-promo-flora > .flower-top-b {
  right: 17%;
  top: -15px;
  transform: rotate(11deg) scale(.72);
}

html body .coffer-hall-promo-flora > .petal-bottom-a {
  left: 10%;
  bottom: -12px;
  transform: rotate(29deg) scale(.80);
}
html body .coffer-hall-promo-flora > .petal-bottom-b {
  left: 37%;
  bottom: -11px;
  transform: rotate(-21deg) scale(.74);
}
html body .coffer-hall-promo-flora > .petal-bottom-c {
  right: 35%;
  bottom: -10px;
  transform: rotate(24deg) scale(.84);
}
html body .coffer-hall-promo-flora > .petal-bottom-d {
  right: 9%;
  bottom: -12px;
  transform: rotate(-28deg) scale(.76);
}
html body .coffer-hall-promo-flora > .flower-bottom-a {
  left: 23%;
  bottom: -15px;
  transform: rotate(13deg) scale(.70);
}
html body .coffer-hall-promo-flora > .flower-bottom-b {
  right: 22%;
  bottom: -14px;
  transform: rotate(-9deg) scale(.68);
}

@media (max-width: 900px) {
  html body .coffer-hall-promo-rail {
    height: 11px !important;
  }
  html body .coffer-hall-promo-rail.is-top {
    top: -7px !important;
  }
  html body .coffer-hall-promo-rail.is-bottom {
    bottom: -7px !important;
  }
  html body .coffer-hall-promo-flora > .is-flower {
    font-size: 13px;
  }
}

html body .coffer-hall-promo-banner-two {
  cursor: default;
}

html body .coffer-hall-promo-banner-two:hover {
  filter: none;
}

html body .coffer-hall-promo-banner-two:active {
  transform: none;
}

.coffer-hall-promo-banner[data-performance-offscreen="true"] .coffer-hall-promo-zoom-track,
.coffer-hall-promo-banner[data-performance-offscreen="true"] .coffer-hall-promo-slide,
.coffer-hall-promo-banner[data-performance-offscreen="true"] .coffer-hall-promo-stars i,
html[data-site-hidden="true"] .coffer-hall-promo-zoom-track,
html[data-site-hidden="true"] .coffer-hall-promo-slide,
html[data-site-hidden="true"] .coffer-hall-promo-stars i {
  will-change: auto;
}

.card-inspector-stage {
  padding-bottom: 60px !important;
}

.card-inspector-authorship-note {
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  z-index: 120 !important;
  width: min(390px, 88vw);
  margin: 0 !important;
  transform: translateX(-50%) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(235,231,214,.77) !important;
  font-size: clamp(11px, .95vw, 13px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  text-align: center !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.72);
  pointer-events: none !important;
  user-select: none;
  isolation: isolate;
}

.card-inspector-authorship-note > span {
  display: block;
}

@media (max-width: 620px) {
  .card-inspector-stage {
    padding-bottom: 66px !important;
  }

  .card-inspector-authorship-note {
    bottom: 3px !important;
    width: min(360px, 90vw);
    font-size: 11px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 2559px),
       screen and (min-width: 1024px) and (max-height: 1439px) {
  :root { --bryer-native-density: .95; }
}
@media screen and (min-width: 1024px) and (max-width: 2099px) {
  :root { --bryer-native-density: .90; }
}
@media screen and (min-width: 1024px) and (max-width: 1699px) {
  :root { --bryer-native-density: .86; }
}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  :root { --bryer-native-density: .82; }
}
@media screen and (min-width: 2100px) and (max-height: 1199px) {
  :root { --bryer-native-density: .90; }
}

@media screen and (min-width: 1024px) and (max-width: 2559px),
       screen and (min-width: 1024px) and (max-height: 1439px) {
  html { font-size: calc(16px * var(--bryer-native-density, 1)); }
  html body {
    zoom: 1 !important;
    min-height: 100dvh !important;
  }

  html body .app-shell > .topbar {
    padding: calc(16px * var(--bryer-native-density)) clamp(12px, 2vw, 48px) !important;
    gap: clamp(8px, 1vw, 19px) !important;
    grid-template-columns: minmax(210px,auto) minmax(12px,1fr) auto minmax(12px,1fr) minmax(175px,auto) !important;
  }
  html body .topbar .brand { gap: calc(12px * var(--bryer-native-density)) !important; }
  html body .topbar .brand-mark {
    width: calc(42px * var(--bryer-native-density)) !important;
    height: calc(42px * var(--bryer-native-density)) !important;
  }
  html body .topbar .brand-mark img {
    width: calc(27px * var(--bryer-native-density)) !important;
    height: calc(27px * var(--bryer-native-density)) !important;
  }
  html body .topbar .brand h1 { font-size: clamp(17px, 1.1vw, calc(23px * var(--bryer-native-density))) !important; }
  html body .topbar .brand p { font-size: calc(12px * var(--bryer-native-density)) !important; }
  html body .topbar .nav-cluster { gap: calc(8px * var(--bryer-native-density)) !important; }
  html body .topbar .nav-tabs {
    gap: calc(8px * var(--bryer-native-density)) !important;
    padding: calc(5px * var(--bryer-native-density)) !important;
  }
  html body .topbar .nav-tab,
  html body .topbar .nav-tabs > button {
    padding: calc(9px * var(--bryer-native-density)) calc(18px * var(--bryer-native-density)) !important;
    font-size: calc(13px * var(--bryer-native-density)) !important;
  }
  html body .topbar .nav-help-button {
    min-height: calc(42px * var(--bryer-native-density)) !important;
    padding: calc(9px * var(--bryer-native-density)) calc(13px * var(--bryer-native-density)) !important;
  }
  html body .topbar .player-chip { gap: calc(12px * var(--bryer-native-density)) !important; }
  html body .topbar .player-name { font-size: calc(13px * var(--bryer-native-density)) !important; }
  html body .topbar .player-balance { font-size: calc(13px * var(--bryer-native-density)) !important; }
  html body .topbar .avatar {
    width: calc(42px * var(--bryer-native-density)) !important;
    height: calc(42px * var(--bryer-native-density)) !important;
  }
  html body .app-shell > .ticker-wrap { padding: calc(14px * var(--bryer-native-density)) clamp(14px, 2.5vw, 50px) 0 !important; }
  html body .ticker {
    min-height: calc(60px * var(--bryer-native-density)) !important;
    padding: calc(10px * var(--bryer-native-density)) calc(18px * var(--bryer-native-density)) !important;
  }
  html body .ticker-label { font-size: calc(12px * var(--bryer-native-density)) !important; }
  html body .ticker-message { font-size: calc(13px * var(--bryer-native-density)) !important; }

  html body .app-shell > .main-layout {
    grid-template-columns: minmax(0,1fr) calc(315px * var(--bryer-native-density)) !important;
    column-gap: calc(24px * var(--bryer-native-density)) !important;
    padding: calc(24px * var(--bryer-native-density)) clamp(14px,2.5vw,50px) calc(48px * var(--bryer-native-density)) !important;
  }
  html body .main-layout > .content,
  html body .main-layout > .history-column { min-width:0 !important; }
  html body .history-column { gap: calc(10px * var(--bryer-native-density)) !important; }
  html body .history-column > .history-launch-stack { gap: calc(10px * var(--bryer-native-density)) !important; }
  html body .history-column > .history-launch-stack .achievements-launch-button,
  html body .history-column > .history-launch-stack .card-album-launch-button {
    min-height: calc(44px * var(--bryer-native-density)) !important;
    font-size: calc(11px * var(--bryer-native-density)) !important;
  }

  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top {
    height: calc(62px * var(--bryer-native-density)) !important;
  }
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic > .history-panel-canonical-top > img {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  html body .history-column .history-item { min-width:0 !important; }
  html body .history-column .history-item small,
  html body .history-column .history-item time { font-size: calc(10px * var(--bryer-native-density)) !important; }

  html body .view-page .hero-copy h2,
  html body .view-page .hero-rotating-title { font-size: clamp(34px, 3vw, 63px) !important; }
  html body .view-page .hero-copy > p { font-size: clamp(12px, .85vw, 17px) !important; }
  html body .view-page .eyebrow { font-size: calc(12px * var(--bryer-native-density)) !important; }
  html body .view-page .catalog-tools {
    gap: calc(12px * var(--bryer-native-density)) !important;
    padding: calc(14px * var(--bryer-native-density)) !important;
  }
  html body .view-page .btn { font-size: calc(13px * var(--bryer-native-density)) !important; }

  html body .inventory-main-suspension-layer,
  html body .inventory-main-suspension-layer > .inventory-main-suspension,
  html body .view-page.view-vault > .inventory-rewards-bridge > .inventory-lower-suspension-layer {
    zoom: 1 !important;
  }

  html body .login-screen {
    width:100%;
    min-height:100dvh !important;
  }
  html body .login-screen > .login-access-stack {
    width:min(calc(480px * var(--bryer-native-density)), 96vw) !important;
  }
  html body .login-screen .login-card { padding: calc(34px * var(--bryer-native-density)) !important; }
  html body .login-screen .login-card h1 { font-size: calc(34px * var(--bryer-native-density)) !important; }
  html body .login-screen .login-card p { font-size: calc(13px * var(--bryer-native-density)) !important; }
  html body .login-screen .code-input { padding: calc(15px * var(--bryer-native-density)) calc(16px * var(--bryer-native-density)) !important; }
  html body .login-screen > .login-access-stack > .login-audio-controls.history-column {
    width: min(calc(330px * var(--bryer-native-density)),86vw) !important;
  }
  html body .login-screen > .login-access-stack .login-audio-plank-controls { min-width:0 !important; }
}

@media screen and (min-width: 1024px) and (max-width: 2099px) {
  html body .wheel-game { grid-template-rows: 88px minmax(0,1fr) 86px !important; }
  html body .wheel-game .orbit-header { padding-inline: clamp(16px,2.2vw,48px) !important; }
  html body .crash-game { grid-template-rows: 68px minmax(0,1fr) 105px !important; }
  html body .crash-topbar {
    gap:14px !important;
    padding-inline:20px !important;
  }
  html body .crash-layout { grid-template-columns:minmax(0,1fr) minmax(270px,330px) !important; }
}

@media screen and (min-width: 1700px) and (max-width: 2099px) and (max-height: 1199px) {

  html body .app-shell > .topbar {
    box-sizing: border-box !important;
    height: 76px !important;
    min-height: 76px !important;
    padding-block: 12px !important;
  }
  html body .app-shell > .ticker-wrap {
    top: 74px !important;
    padding-top: 0 !important;
  }

  html body .topbar .nav-tabs .nav-tab {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  html body .topbar .nav-cluster > .nav-venue-button {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}

@media screen and (min-width: 1800px) and (max-width: 2049px) and (max-height: 1199px) {

  html body .app-shell > .topbar {
    height: 72px !important;
    min-height: 72px !important;
    padding-block: 10px !important;
  }
  html body .app-shell > .ticker-wrap {
    top: 70px !important;
  }

  html body .app-shell > .topbar > .nav-cluster {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: max-content !important;
    height: max-content !important;
    margin: auto !important;
    transform: none !important;
  }
  html body .topbar .nav-tabs .nav-tab,
  html body .topbar .nav-cluster > .nav-venue-button {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: auto !important;
    text-rendering: optimizeLegibility !important;
  }

  html body .topbar .nav-tabs .nav-tab:not(.active) {
    color: #d9d0ba !important;
  }

  html body .view-page.view-upgrade .upgrade-page::before {
    left: -32px !important;
  }
  html body .view-page.view-upgrade .upgrade-page::after {
    left: 1337px !important;
  }
  html body .view-page.view-upgrade .upgrade-catalogs::before {
    left: 32px !important;
  }
}

@media screen and (min-width: 1200px) {
  html body .app-shell > .ticker-wrap {
    padding-top: 0 !important;
    margin-top: -7px !important;
    top: 78px !important;
  }
}

@media screen and (min-width: 1700px) and (max-width: 2099px) and (max-height: 1199px) {
  html body .app-shell > .ticker-wrap { top: 66px !important; }
}
@media screen and (min-width: 1800px) and (max-width: 2049px) and (max-height: 1199px) {
  html body .app-shell > .ticker-wrap { top: 62px !important; }
}

@media screen and (min-width: 1921px) {
  html body .topbar .nav-tabs .nav-tab,
  html body .topbar .nav-cluster > .nav-venue-button {
    font-size: clamp(15px, .78vw, 17px) !important;
    line-height: 1.15 !important;
  }
}

html body .app-shell > .ticker-wrap > .ticker > .ticker-label,
html body .app-shell > .ticker-wrap > .ticker > .ticker-message {
  position: relative !important;
  top: 2px !important;
}

html body .app-shell > .ticker-wrap > .ticker > .ticker-label,
html body .app-shell > .ticker-wrap > .ticker > .ticker-message {
  translate: 0 3px !important;
}

@media screen and (min-width: 821px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .peek-inside-backdrop {
    padding: 12px !important;
  }
  html body .peek-inside-backdrop > .rewards-modal.rewards-modal-wheel {
    box-sizing: border-box !important;
    width: min(860px, calc(100vw - 40px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body .peek-inside-backdrop .rewards-modal-header {
    padding: 6px 12px 9px !important;
  }
  html body .peek-inside-backdrop .peek-wheel-shell {
    min-height: 0 !important;
    padding: 0 0 8px !important;
    gap: 0 !important;
  }
  html body .peek-inside-backdrop .peek-wheel-stage.peek-inside-grid {
    box-sizing: border-box !important;
    width: min(100%, 670px) !important;
    height: clamp(310px, calc(100dvh - 375px), 460px) !important;
  }
  html body .peek-inside-backdrop .peek-wheel-arrow {
    height: 38px !important;
  }
  html body .peek-inside-backdrop .rewards-modal-footer {
    padding: 6px 12px 12px !important;
  }
}

@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body .peek-inside-backdrop,
  html body .peek-inside-backdrop .rewards-modal.rewards-modal-wheel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html body .peek-inside-backdrop::-webkit-scrollbar,
  html body .peek-inside-backdrop .rewards-modal.rewards-modal-wheel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

@media screen and (min-width: 821px) {
  html body .app-shell > .ticker-wrap {
    top: var(--bryer-ticker-sticky-top, 86px) !important;
  }
}

html body .main-layout > .history-column > .history-launch-stack > .history-launch-audio {
  display: flex;
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 11px) !important;
  left: 0;
  right: 0;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  height: 62px;
  padding: 0 10px 2px;
  align-items: center;
  justify-content: center;
  transform: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-controls {
  box-sizing: border-box;
  width: 100% !important;
  height: 62px !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-controls::before,
html body .main-layout > .history-column .history-launch-audio .audio-controls::after {
  display: none !important;
  content: none !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-slider-row {
  grid-template-columns: 22px 35px minmax(0,1fr) !important;
  min-height: 19px !important;
  gap: 7px !important;
  color: #e6ce92 !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-slider-label {
  color: #dfd0ac !important;
  font-size: 10px !important;
  letter-spacing: .075em !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-icon-button.sound-toggle {
  color: #e7d197 !important;
  border: 1px solid rgba(217,180,95,.56) !important;
  background: linear-gradient(160deg, #345442, #192a21) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0 10px rgba(227,194,107,.12) !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-volume-slider {
  color: #e7c878 !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-volume-slider::-webkit-slider-thumb {
  background: #f4e2ae !important;
  border-color: #fff1c9 !important;
  box-shadow: 0 0 9px rgba(244,221,143,.48) !important;
}
html body .main-layout > .history-column .history-launch-audio .audio-volume-slider::-moz-range-thumb {
  background: #f4e2ae !important;
  border-color: #fff1c9 !important;
  box-shadow: 0 0 9px rgba(244,221,143,.48) !important;
}

html body .topbar .site-deposit-anchor {
  position: relative;
  left: -5px;
  flex: 0 0 auto;
  isolation: isolate;
  z-index: 5;
}
html body .topbar .site-deposit-anchor > .site-deposit-trigger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  min-width: 125px;
  min-height: 42px;
  border: 1px solid rgba(105,65,31,.90) !important;
  border-radius: 7px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #f0e7d3 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.78) !important;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(235,185,105,.11),transparent 31%),
    repeating-linear-gradient(2deg,rgba(241,196,124,.052) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#55391f 0%,#352112 50%,#22130a 100%) !important;
  box-shadow:
    inset 0 1px rgba(239,198,130,.11),
    inset 0 -3px rgba(15,7,3,.42),
    0 4px 8px rgba(1,5,2,.24) !important;
}
html body .topbar .site-deposit-anchor > .site-deposit-trigger:hover,
html body .topbar .site-deposit-anchor > .site-deposit-trigger[aria-expanded="true"] {
  background:
    radial-gradient(ellipse at 18% 18%,rgba(245,199,120,.15),transparent 31%),
    repeating-linear-gradient(2deg,rgba(248,208,139,.06) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#624326 0%,#3d2715 50%,#28160c 100%) !important;
}
html body .topbar .site-deposit-trigger .site-deposit-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
  filter: drop-shadow(0 0 3px rgba(222,187,111,.24));
}

html body .app-shell > .topbar.site-deposit-menu-open {
  overflow: visible !important;
  z-index: 1200 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-dropdown {
  box-sizing: border-box;
  position: absolute;
  z-index: 8;
  top: calc(100% + 13px);
  right: 0;
  width: min(324px, calc(100vw - 24px));
  padding: 13px 16px 15px;
  border: 1px solid rgba(211,170,88,.64);
  border-radius: 12px 12px 15px 15px;
  background:
    repeating-linear-gradient(4deg,rgba(219,194,122,.024) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(95deg,transparent 0 16px,rgba(5,19,13,.14) 16px 17px,transparent 17px 32px),
    radial-gradient(ellipse at 50% -6%,rgba(215,175,85,.23),transparent 70%),
    radial-gradient(ellipse at 102% 100%,rgba(35,84,68,.2),transparent 55%),
    linear-gradient(146deg,rgba(51,76,61,.89) 0%,rgba(33,58,48,.90) 28%,rgba(23,44,36,.92) 64%,rgba(16,35,30,.93) 100%) !important;
  box-shadow:
    inset 0 0 0 4px rgba(5,22,15,.37),
    inset 0 0 0 5px rgba(221,177,97,.15),
    inset 0 1px 0 rgba(255,245,198,.23),
    inset 0 -3px 14px rgba(2,14,9,.36),
    0 13px 27px rgba(0,0,0,.36),
    0 0 12px rgba(203,153,63,.08) !important;
  contain: layout style;
  animation: siteDepositAppear .2s ease-out both;
}

html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-dropdown::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 53px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(211,170,88,.68);
  border-left: 1px solid rgba(211,170,88,.68);
  background: linear-gradient(135deg,rgba(59,78,58,.91),rgba(48,70,55,.92),rgba(42,61,50,.93)) !important;
  box-shadow: -2px -2px 4px rgba(0,0,0,.08);
  pointer-events: none;
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-dropdown::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(224,186,98,.18);
  border-radius: 7px 7px 10px 10px;
  pointer-events: none;
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  color: #e8ce8f;
  font: 800 11px/1.4 Georgia,serif;
  letter-spacing: .18em;
  text-shadow: 0 1px 2px rgba(2,11,8,.85), 0 0 9px rgba(233,186,93,.23);
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-heading-title { white-space: nowrap; }
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-heading-flourish {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(219,184,105,.72),transparent);
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-dropdown > p {
  position: relative;
  z-index: 1;
  margin: 0 0 13px;
  color: #e8e7dc;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.58;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(3,12,8,.62);
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > a,
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(17,16,31,.58);
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease,transform .2s ease,box-shadow .2s ease;
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-contact {
  background:
    repeating-linear-gradient(4deg,rgba(13,19,95,.14) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(95deg,transparent 0 11px,rgba(255,255,255,.085) 11px 12px,transparent 12px 22px),
    radial-gradient(ellipse at 50% 0,rgba(255,255,255,.25),transparent 80%),
    linear-gradient(115deg,#5663ea 0%,#5e6bff 34%,#6470f9 62%,#515ee2 100%) !important;
  border-color: rgba(174,188,255,.77) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.30), inset 0 -3px rgba(32,37,118,.35), 0 5px 12px rgba(38,44,139,.27) !important;
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-close {
  background:
    repeating-linear-gradient(4deg,rgba(75,10,23,.19) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(95deg,transparent 0 11px,rgba(255,255,255,.07) 11px 12px,transparent 12px 22px),
    radial-gradient(ellipse at 50% 0,rgba(255,232,229,.17),transparent 80%),
    linear-gradient(120deg,#a1273d 0%,#d4414d 37%,#c23342 67%,#9d2335 100%) !important;
  border-color: rgba(242,127,141,.67) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.19), inset 0 -3px rgba(82,11,21,.36),0 5px 12px rgba(94,17,28,.30) !important;
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > a:hover,
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > button:hover {
  filter: brightness(1.13) saturate(1.09);
  transform: translateY(-1px);
}
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > a:focus-visible,
html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > button:focus-visible,
html body .topbar .site-deposit-trigger:focus-visible {
  outline: 2px solid #f7dfa5;
  outline-offset: 3px;
}
@keyframes siteDepositAppear {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-dropdown { animation: none; }
  html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > a,
  html body :is(.topbar, .site-mobile-nav-drawer) .site-deposit-actions > button { transition: none; }
}

@media (max-width: 820px) {
  html body .topbar .site-deposit-anchor { display: none !important; }
}

@media (min-width: 821px) {

  html body .topbar .site-deposit-anchor { left: -15px !important; }
}

html body .main-layout > .history-column > .history-launch-stack > .history-launch-audio {
  bottom: calc(100% + 21px) !important;
}

html body .main-layout > .history-column .history-launch-audio .audio-slider-row {
  grid-template-columns: 81px minmax(0, 134px) !important;
  justify-content: center !important;
  gap: 12px !important;
}
html body .history-launch-audio .audio-slider-prefix,
html body .site-mobile-nav-audio .audio-slider-prefix {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  height: 23px;
  min-width: 0;
  padding: 1px 8px 1px 4px;
  border: 1px solid rgba(218,182,101,.42);
  border-radius: 14px;
  color: #e8d7ae;
  background:
    repeating-linear-gradient(3deg,rgba(255,223,154,.045) 0 1px,transparent 1px 6px),
    linear-gradient(155deg,rgba(44,69,51,.93),rgba(15,35,27,.9));
  box-shadow: inset 0 1px 0 rgba(255,250,214,.1), 0 2px 5px rgba(0,0,0,.22);
}
html body .history-launch-audio .audio-slider-prefix .audio-icon-button.sound-toggle {
  flex: 0 0 17px !important;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  border-color: rgba(230,197,114,.34) !important;
  background: rgba(13,31,24,.42) !important;
  box-shadow: none !important;
}
html body .history-launch-audio .audio-slider-prefix .audio-slider-label,
html body .site-mobile-nav-audio .audio-slider-prefix .audio-slider-label {
  display: inline-block !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  color: #e9d8ae !important;
  opacity: 1;
}
html body .main-layout > .history-column .history-launch-audio .audio-volume-slider {
  min-width: 0 !important;
  width: 134px !important;
  max-width: 134px !important;
}

html body .topbar .site-deposit-actions {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}
html body .topbar .site-deposit-actions > .site-deposit-contact {
  box-sizing: border-box;
  width: 139px !important;
  max-width: 100%;
}
@media (max-width: 820px) {

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 27px !important;
    margin: -6px 0 0 !important;
    padding: 3px 9px !important;
    border: 1px solid rgba(151,104,59,.82) !important;
    border-radius: 6px !important;
    color: #f1e4c8 !important;
    font: 800 10.5px/1.2 Georgia,serif !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
    background:
      repeating-linear-gradient(2deg,rgba(238,195,120,.06) 0 1px,transparent 1px 6px),
      linear-gradient(180deg,#583b22,#352112 57%,#25170d) !important;
    box-shadow: inset 0 1px rgba(252,222,158,.14), inset 0 -2px rgba(14,7,4,.37) !important;
    cursor: pointer;
  }
  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger .site-deposit-icon {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
  }
  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger[aria-expanded="true"] {
    border-color: rgba(226,182,97,.9) !important;
    background: linear-gradient(180deg,#66482b,#442b18 57%,#30200f) !important;
  }
  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger:focus-visible {
    outline: 2px solid #f6dda3;
    outline-offset: 2px;
  }

  html body .site-mobile-nav-drawer.is-deposit-open > .site-mobile-nav-audio,
  html body .site-mobile-nav-drawer.is-deposit-open > .site-mobile-nav-grid {
    display: none !important;
  }
  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: min(390px, 53dvh) !important;
    height: auto !important;
    flex: 1 0 auto !important;
    margin: 8px 0 0 !important;
    padding: 15px 13px 18px !important;
    contain: layout style !important;
    transform: none;
  }
  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown::before {
    right: auto !important;
    left: 50px !important;
  }
  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown > p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown .site-deposit-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 11px !important;
  }
  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown .site-deposit-actions > a,
  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown .site-deposit-actions > button {
    box-sizing: border-box !important;
    width: 139px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  html body .site-mobile-nav-audio .audio-slider-row {
    grid-template-columns: 81px minmax(0, 1fr) !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }
  html body .site-mobile-nav-audio .audio-slider-prefix {
    gap: 6px;
    padding-right: 7px;
  }
  html body .site-mobile-nav-audio input.audio-volume-slider {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 820px) {

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger > span {
    color: #f1e4c8 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 820px) {
  html body .site-mobile-nav-drawer > .site-mobile-nav-profile.has-deposit-trigger {
    border-bottom: 0 !important;
  }
}

@keyframes bryerHallStockSealGlowGPU {
  0%, 100% { opacity: .84; }
  50% { opacity: 1; }
}
html body .view-shop .box-visual .sale-stock-seal,
html body .view-shop .box-card.is-legendary-coffer .sale-stock-seal {
  animation: bryerHallStockSealGlowGPU 2.35s ease-in-out infinite !important;
  text-shadow:
    0 0 5.5px rgba(255,255,255,.33),
    0 0 12px color-mix(in srgb, var(--box-glow) 46%, transparent),
    0 2px 3px rgba(0,0,0,.78) !important;
}
html body .view-shop .box-visual .sale-stock-seal b,
html body .view-shop .box-card.is-legendary-coffer .sale-stock-seal b {
  text-shadow:
    0 0 11px color-mix(in srgb, var(--box-glow) 44%, transparent) !important;
}

@keyframes bryerHallStockSealSweepGPU {
  0%, 18% {
    transform: translate3d(0, 0, 0) rotate(18deg);
    opacity: 0;
  }
  32% { opacity: 1; }
  62% {
    transform: translate3d(155px, 0, 0) rotate(18deg);
    opacity: .7;
  }
  72%, 100% {
    transform: translate3d(155px, 0, 0) rotate(18deg);
    opacity: 0;
  }
}
html body .view-shop .sale-stock-seal::after {
  left: -40px;
  animation: bryerHallStockSealSweepGPU 3.8s ease-in-out infinite !important;
}

@keyframes bryerHallFiligreeGlowGPU {
  0%, 100% {
    opacity: .34;
    transform: translate3d(0, 0, 0) scaleX(var(--filigree-flip, 1));
  }
  50% {
    opacity: .66;
    transform: translate3d(0, -13px, 0) scaleX(var(--filigree-flip, 1));
  }
}
html body .view-shop .shop-ambient-filigree {
  filter: drop-shadow(0 0 8px currentColor);
  animation: bryerHallFiligreeGlowGPU 8s ease-in-out infinite !important;
}
html body .view-shop .shop-ambient-filigree-right {
  animation-delay: -4s !important;
}
html body .view-shop .shop-filigree-main {
  animation-timing-function: steps(96, end) !important;
}

@keyframes bryerHallSideRailGPU {
  0%, 100% { opacity: .28; }
  50% { opacity: .72; }
}
html body .view-shop .coffer-section-block .grid::before,
html body .view-shop .coffer-section-block .grid::after {
  filter: brightness(1.12) drop-shadow(0 0 7px currentColor);
  animation: bryerHallSideRailGPU 5.8s ease-in-out infinite !important;
}
html body .view-shop .coffer-section-block .grid::after {
  animation-delay: -2.9s !important;
}

@keyframes bryerHallGilFrameGPU {
  0%, 100% { opacity: .91; }
  50% { opacity: 1; }
}
html body .view-shop .purchase-style-gil .gil-buy-stage,
html body .view-shop .purchase-style-gil .gil-buy-ornament {
  filter: drop-shadow(0 0 5px rgba(255,205,111,.25));
  animation: bryerHallGilFrameGPU 3.2s ease-in-out infinite !important;
}

@keyframes bryerHallMinionsStageGPU {
  0%, 100% { opacity: .88; }
  50% { opacity: 1; }
}
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stage {
  filter:
    drop-shadow(-2px 0 4px rgba(87,255,119,.25))
    drop-shadow(2px 0 4px rgba(213,103,255,.21))
    drop-shadow(0 1px 5px rgba(255,219,88,.16));
  animation: bryerHallMinionsStageGPU 3.4s ease-in-out infinite !important;
}

@keyframes bryerHallMountSapphireGPU {
  0% {
    transform: translate3d(-10%, 0, 0);
    opacity: .62;
  }
  45% { opacity: .95; }
  100% {
    transform: translate3d(10%, 0, 0);
    opacity: .62;
  }
}
html body .view-shop .purchase-style-mounts .mount-buy__blue {
  overflow: hidden;
}
html body .view-shop .purchase-style-mounts .mount-buy__blue::after {
  left: -22%;
  right: -22%;
  animation: bryerHallMountSapphireGPU 4.6s linear infinite !important;
}

@keyframes bryerHallMountGemGPU {
  0%, 100% { opacity: .88; }
  48% { opacity: 1; }
}
@keyframes bryerHallMountAuraGPU {
  0%, 100% {
    opacity: .22;
    transform: scale(.985);
  }
  50% {
    opacity: .58;
    transform: scale(1.02);
  }
}
html body .view-shop .purchase-style-mounts .mount-buy__gem {
  filter: brightness(1.08) saturate(1.04)
    drop-shadow(0 0 5px rgba(54,187,255,.39))
    drop-shadow(0 0 8px rgba(255,220,106,.12));
  animation: bryerHallMountGemGPU 3.8s ease-in-out infinite !important;
}
html body .view-shop .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before {
  filter: blur(11px);
  animation: bryerHallMountAuraGPU 3.2s ease-in-out infinite !important;
}

@keyframes bryerHallGilCoinGlintGPU {
  0%, 100% { opacity: .89; }
  46% { opacity: 1; }
  58% { opacity: .95; }
}
html body .view-shop .purchase-style-gil .gil-stage-coin,
html body .view-shop .purchase-style-gil .gil-stage-top-coin,
html body .view-shop .purchase-style-gil .gil-buy-side-emblem,
html body .view-shop .purchase-style-gil .gil-buy-top-crest {
  filter: brightness(1.15) drop-shadow(0 0 5px rgba(255,210,122,.43));
  animation: bryerHallGilCoinGlintGPU 2.8s ease-in-out infinite !important;
}

@keyframes bryerHallMinionGemGPU {
  0%, 100% {
    transform: scale(.90) rotate(0deg);
    opacity: .83;
  }
  45% {
    transform: scale(1.16) rotate(4deg);
    opacity: 1;
  }
}
@keyframes bryerHallMinionStarGPU {
  0%, 100% {
    transform: scale(.65) rotate(0deg);
    opacity: .78;
  }
  50% {
    transform: scale(1.35) rotate(45deg);
    opacity: 1;
  }
}
@keyframes bryerHallMinionCreatureGPU {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-top-gem path:first-child,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-bottom-gem path:first-child,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-top-crest path:first-child,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-bottom-crest path:first-child {
  filter: drop-shadow(0 0 5px rgba(112,255,128,.60)) drop-shadow(0 0 8px rgba(255,230,105,.47));
  animation: bryerHallMinionGemGPU 1.65s ease-in-out infinite !important;
}
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-stars path,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-stars path {
  filter: drop-shadow(0 0 4px rgba(255,245,164,.72)) drop-shadow(0 0 7px rgba(202,112,255,.35));
  animation: bryerHallMinionStarGPU 1.45s ease-in-out infinite !important;
}
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-left-minion,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-left-plinth .face,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-right-dragon,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-right-plinth .face.dragon {
  filter: drop-shadow(0 0 5px rgba(255,224,100,.43)) drop-shadow(0 0 7px rgba(101,239,119,.23));
  animation: bryerHallMinionCreatureGPU 2.10s ease-in-out infinite !important;
}
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-bottom-gem path:first-child,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-bottom-crest path:first-child {
  animation-delay: -.82s !important;
}
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-stage-right-dragon,
html body .view-shop .box-card:not(.is-sold-out) .purchase-style-minions .minions-buy-right-plinth .face.dragon {
  animation-delay: -1.05s !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .view-shop .box-visual .sale-stock-seal,
  html body .view-shop .box-card.is-legendary-coffer .sale-stock-seal,
  html body .view-shop .sale-stock-seal::after,
  html body .view-shop .shop-ambient-filigree,
  html body .view-shop .shop-filigree-main,
  html body .view-shop .coffer-section-block .grid::before,
  html body .view-shop .coffer-section-block .grid::after,
  html body .view-shop .purchase-style-gil .gil-buy-stage,
  html body .view-shop .purchase-style-gil .gil-buy-ornament,
  html body .view-shop .purchase-style-gil .gil-stage-coin,
  html body .view-shop .purchase-style-gil .gil-stage-top-coin,
  html body .view-shop .purchase-style-gil .gil-buy-side-emblem,
  html body .view-shop .purchase-style-gil .gil-buy-top-crest,
  html body .view-shop .purchase-style-minions .minions-buy-stage,
  html body .view-shop .purchase-style-minions .minions-stage-top-gem path:first-child,
  html body .view-shop .purchase-style-minions .minions-stage-bottom-gem path:first-child,
  html body .view-shop .purchase-style-minions .minions-buy-top-crest path:first-child,
  html body .view-shop .purchase-style-minions .minions-buy-bottom-crest path:first-child,
  html body .view-shop .purchase-style-minions .minions-buy-stars path,
  html body .view-shop .purchase-style-minions .minions-stage-stars path,
  html body .view-shop .purchase-style-minions .minions-stage-left-minion,
  html body .view-shop .purchase-style-minions .minions-buy-left-plinth .face,
  html body .view-shop .purchase-style-minions .minions-stage-right-dragon,
  html body .view-shop .purchase-style-minions .minions-buy-right-plinth .face.dragon,
  html body .view-shop .purchase-style-mounts .mount-buy__blue::after,
  html body .view-shop .purchase-style-mounts .mount-buy__gem,
  html body .view-shop .purchase-style-mounts .custom-buy-fx.custom-buy-fx-mounts::before {
    animation: none !important;
  }
}

@keyframes bryerLegendarySealReflectionComposited {
  0%, 12% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  18% { opacity: .20; }
  25% { opacity: .72; }
  32% { opacity: 1; }
  68% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
  76% { opacity: .46; }
  84%, 100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
html body .view-shop .legendary-edition-coffer-seal-reflection-compositor {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: url('/images/legendaryedition.png');
  mask-image: url('/images/legendaryedition.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html body .view-shop .legendary-edition-coffer-seal-reflection-light {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(
    113deg,
    rgba(255,255,255,0) 27%,
    rgba(255,255,255,.02) 36%,
    rgba(255,78,186,.11) 41%,
    rgba(165,111,255,.19) 45%,
    rgba(77,226,255,.24) 49%,
    rgba(255,255,255,.12) 54%,
    rgba(255,78,186,.09) 59%,
    rgba(255,255,255,0) 66%
  );
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: bryerLegendarySealReflectionComposited 4.8s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  html body .view-shop .purchase-action-pair.purchase-style-minions:not(:hover):not(:focus-within)
  :is(.minions-buy-stage, .minions-buy-ornament) *,
  html body .view-shop .purchase-action-pair.purchase-style-gil:not(:hover):not(:focus-within)
  :is(.gil-buy-stage, .gil-buy-ornament) * {
    animation-play-state: paused !important;
  }
}

html body .view-shop .purchase-style-minions .minions-buy-stage,
html body .view-shop .purchase-style-minions .minions-buy-ornament,
html body .view-shop .purchase-style-gil .gil-buy-stage,
html body .view-shop .purchase-style-gil .gil-buy-ornament {
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  html body .view-shop .legendary-edition-coffer-seal-reflection-light {
    animation: none !important;
    opacity: 0 !important;
    will-change: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
html body .view-shop .box-card .purchase-action-pair.purchase-style-minions
:is(svg.minions-buy-stage, svg.minions-buy-ornament) *,
html body .view-shop .box-card .purchase-action-pair.purchase-style-gil
:is(svg.gil-buy-stage, svg.gil-buy-ornament) * {
  animation: none !important;
  transition: none !important;
}
}

@media (hover: hover) and (pointer: fine) {
  html body .view-shop .box-card:not(.is-sold-out) .card-actions .purchase-action-pair.purchase-style-minions
  :is(svg.minions-buy-stage, svg.minions-buy-ornament),
  html body .view-shop .box-card:not(.is-sold-out) .card-actions .purchase-action-pair.purchase-style-minions
  :is(svg.minions-buy-stage, svg.minions-buy-ornament) *,
  html body .view-shop .box-card:not(.is-sold-out) .card-actions .purchase-action-pair.purchase-style-gil
  :is(svg.gil-buy-stage, svg.gil-buy-ornament),
  html body .view-shop .box-card:not(.is-sold-out) .card-actions .purchase-action-pair.purchase-style-gil
  :is(svg.gil-buy-stage, svg.gil-buy-ornament) * {
    animation: none !important;
    transition: none !important;
  }

  html body .view-shop .purchase-action-pair.purchase-style-minions
  :is(svg.minions-buy-stage, svg.minions-buy-ornament),
  html body .view-shop .purchase-action-pair.purchase-style-gil
  :is(svg.gil-buy-stage, svg.gil-buy-ornament) {
    animation: none !important;
  }
}

html body .history-launch-audio .audio-slider-prefix > button.audio-badge-toggle,
html body .site-mobile-nav-audio .audio-slider-prefix > button.audio-badge-toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto;
  padding: 2px 0;
  margin: 0;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  color: #e9d8ae !important;
  opacity: 1 !important;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .history-launch-audio .audio-slider-prefix > button.audio-badge-toggle:hover,
html body .site-mobile-nav-audio .audio-slider-prefix > button.audio-badge-toggle:hover {
  color: #fff2c9 !important;
  text-shadow: 0 0 6px rgba(243,215,153,.65);
}
html body .history-launch-audio .audio-slider-prefix > button.audio-badge-toggle:focus-visible,
html body .site-mobile-nav-audio .audio-slider-prefix > button.audio-badge-toggle:focus-visible {
  outline: 1px solid #f0d99c !important;
  outline-offset: 2px;
  border-radius: 2px;
}

html body .history-launch-audio .audio-slider-row > input.audio-volume-slider,
html body .site-mobile-nav-audio .audio-slider-row > input.audio-volume-slider {
  position: relative;
  z-index: 3;
  display: block;
  box-sizing: border-box;
  height: 19px !important;
  min-height: 19px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  vertical-align: middle;
  touch-action: none;
}
html body .history-launch-audio .audio-slider-row > input.audio-volume-slider::-webkit-slider-thumb,
html body .site-mobile-nav-audio .audio-slider-row > input.audio-volume-slider::-webkit-slider-thumb {
  margin-top: -3px !important;
}
@media (max-width: 820px) {
  html body .site-mobile-nav-audio .audio-slider-row > input.audio-volume-slider::-webkit-slider-thumb {
    margin-top: -3.5px !important;
  }
}

@media (min-width: 821px) {
  html body .app-shell > .main-layout > .history-column {
    position: relative !important;
    z-index: 10060 !important;
  }
  html body .app-shell > .main-layout > .history-column > .history-launch-stack > .history-launch-audio {
    z-index: 10061 !important;
    pointer-events: auto !important;
  }
}

html body .history-launch-audio .audio-slider-prefix > button.audio-badge-toggle,
html body .site-mobile-nav-audio .audio-slider-prefix > button.audio-badge-toggle {
  display: inline-flex !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

html body .history-launch-audio .audio-slider-row > input.audio-volume-slider,
html body .site-mobile-nav-audio .audio-slider-row > input.audio-volume-slider {
  z-index: 3 !important;
  pointer-events: auto !important;
}

html body .history-launch-audio button.audio-slider-prefix.audio-badge-toggle,
html body .site-mobile-nav-audio button.audio-slider-prefix.audio-badge-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  z-index: 4 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 81px !important;
  min-width: 81px !important;
  max-width: 81px !important;
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 1px 8px 1px 4px !important;
  margin: 0 !important;
  font-family: inherit !important;
  line-height: normal !important;
  text-align: left !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}
html body .history-launch-audio button.audio-slider-prefix.audio-badge-toggle > *,
html body .site-mobile-nav-audio button.audio-slider-prefix.audio-badge-toggle > * {
  pointer-events: none !important;
}
html body .history-launch-audio button.audio-slider-prefix.audio-badge-toggle:hover,
html body .site-mobile-nav-audio button.audio-slider-prefix.audio-badge-toggle:hover {
  border-color: rgba(242,209,137,.65) !important;
}
html body .history-launch-audio button.audio-slider-prefix.audio-badge-toggle:focus-visible,
html body .site-mobile-nav-audio button.audio-slider-prefix.audio-badge-toggle:focus-visible {
  outline: 2px solid #f0d99c !important;
  outline-offset: 2px !important;
}
html body .history-launch-audio .audio-slider-row > input.audio-volume-slider,
html body .site-mobile-nav-audio .audio-slider-row > input.audio-volume-slider {
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  align-self: center !important;
  cursor: pointer !important;
}
@media (max-width: 820px) {
  html body .site-mobile-nav-audio button.audio-slider-prefix.audio-badge-toggle {
    gap: 6px !important;
    padding-right: 7px !important;
  }
}

@media (min-width: 821px) {
  html body .main-layout > .history-column > .history-launch-stack > .history-launch-audio-anchor {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html body > .history-launch-audio-portal {

    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2147483000 !important;
    display: flex !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px 2px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  html body > .history-launch-audio-portal > .audio-controls {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 62px !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html body > .history-launch-audio-portal .audio-controls::before,
  html body > .history-launch-audio-portal .audio-controls::after {
    display: none !important;
    content: none !important;
  }
  html body > .history-launch-audio-portal .audio-slider-row {
    grid-template-columns: 81px minmax(0, 134px) !important;
    justify-content: center !important;
    min-height: 19px !important;
    gap: 12px !important;
    color: #e6ce92 !important;
  }
  html body > .history-launch-audio-portal .audio-slider-label {
    color: #dfd0ac !important;
    font-size: 10px !important;
    letter-spacing: .075em !important;
  }
  html body > .history-launch-audio-portal .audio-icon-button.sound-toggle {
    color: #e7d197 !important;
    border: 1px solid rgba(217,180,95,.56) !important;
    background: linear-gradient(160deg,#345442,#192a21) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0 10px rgba(227,194,107,.12) !important;
  }
  html body > .history-launch-audio-portal .audio-slider-prefix .audio-icon-button.sound-toggle {
    flex: 0 0 17px !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    border-color: rgba(230,197,114,.34) !important;
    background: rgba(13,31,24,.42) !important;
    box-shadow: none !important;
  }
  html body > .history-launch-audio-portal .audio-volume-slider {
    min-width: 0 !important;
    width: 134px !important;
    max-width: 134px !important;
    color: #e7c878 !important;
  }
  html body > .history-launch-audio-portal .audio-volume-slider::-webkit-slider-thumb {
    background: #f4e2ae !important;
    border-color: #fff1c9 !important;
    box-shadow: 0 0 9px rgba(244,221,143,.48) !important;
  }
  html body > .history-launch-audio-portal .audio-volume-slider::-moz-range-thumb {
    background: #f4e2ae !important;
    border-color: #fff1c9 !important;
  }

  html body > .history-launch-audio-portal button.audio-badge-toggle,
  html body > .history-launch-audio-portal input.audio-volume-slider {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
  html body > .history-launch-audio-portal input.audio-volume-slider {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    transform: none !important;
    touch-action: none;
  }
  html body > .history-launch-audio-portal .audio-volume-slider::-webkit-slider-thumb {
    margin-top: -3px !important;
  }

  html body:has([aria-modal="true"]) > .history-launch-audio-portal {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media screen and (max-width: 820px) {
  html body .app-shell > .topbar::before,
  html body .topbar::before {
    background-image: var(--bryer-css-v60-topbarmobile, url('/images/topbarmobile.png')) !important;
  }
}

/* Landscape phones can exceed the 820px breakpoint. Keep their mobile header and drawer,
   but scope the override to short, touch-first screens so desktop stays unchanged. */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1400px) and (pointer: coarse) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 7px 9px !important;
    padding: calc(7px + env(safe-area-inset-top)) 9px 8px !important;
  }

  .brand p,
  .topbar-ornament,
  .player-meta {
    display: none !important;
  }

  .topbar .brand > div:last-child {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .topbar .brand h1 {
    max-width: 100% !important;
    overflow: visible !important;
    font-size: clamp(11px, 3.35vw, 15px) !important;
    line-height: 1.02 !important;
    letter-spacing: .035em !important;
    text-overflow: clip !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }

  .topbar .nav-tabs .nav-tab {
    border: 1px solid rgba(214, 180, 95, .22) !important;
    border-radius: 7px !important;
    color: rgba(247, 245, 237, .82) !important;
    background:
      radial-gradient(circle at 50% 0, rgba(214,180,95,.09), transparent 64%),
      linear-gradient(145deg, rgba(43,59,42,.74), rgba(19,30,21,.84)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -2px 0 rgba(2,8,3,.26),
      0 4px 10px rgba(0,0,0,.18) !important;
    opacity: 1 !important;
  }

  .topbar .nav-tabs .nav-tab:hover:not(.active) {
    color: var(--gold-soft) !important;
    border-color: rgba(214,180,95,.4) !important;
    background:
      radial-gradient(circle at 50% 0, rgba(214,180,95,.15), transparent 64%),
      linear-gradient(145deg, rgba(52,71,51,.82), rgba(24,37,26,.9)) !important;
  }

  .topbar .nav-tabs .nav-tab.active {
    color: #172018 !important;
    border-color: rgba(247,232,181,.72) !important;
    background:
      repeating-linear-gradient(125deg, rgba(255,255,255,.13) 0 1px, transparent 1px 6px),
      linear-gradient(145deg, #f7e8b5, var(--gold)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      inset 0 -3px 0 rgba(104,76,18,.2),
      0 5px 12px rgba(214,180,95,.2) !important;
  }

  html body .app-shell > .topbar::after,
  html body .topbar::after {
    inset: -1px 4px -3px !important;
    border-radius: 25px !important;
  }

  html body .topbar .nav-tabs {
    max-width:min(70vw,510px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }

  html body .topbar .nav-tabs::-webkit-scrollbar {display:none!important;}

  html body .topbar .nav-tabs::before {display:none!important;}

  html body .topbar .nav-tabs .nav-tab.active {
    background:linear-gradient(180deg,#8f5b2d,#4b2a13)!important;
    border:1px solid rgba(120,72,31,.92)!important;
    box-shadow:inset 0 1px rgba(255,226,168,.13)!important;
  }

  html body .topbar .nav-tabs .nav-tab-minigame { order: 1 !important; }

  html body .topbar .nav-tabs .nav-tab-shop { order: 2 !important; }

  html body .topbar .nav-tabs .nav-tab-open { order: 3 !important; }

  html body .topbar .nav-tabs .nav-tab-upgrade { order: 4 !important; }

  html body header.topbar nav.nav-cluster > button.nav-help-button.nav-help-compact {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    inline-size: 38px !important;
  }

  html body .app-shell > .topbar,
  html body .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: minmax(42px, auto) !important;
    align-items: center !important;
    min-height: calc(58px + env(safe-area-inset-top)) !important;
    gap: 8px !important;
    padding: calc(7px + env(safe-area-inset-top)) 10px 7px !important;
    z-index: 2450 !important;
  }

  html body .app-shell > .topbar::after,
  html body .topbar::after {
    inset: -1px 4px -2px !important;
    border-radius: 22px !important;
    background-position: center !important;
    background-size: cover !important;
  }

  html body .topbar > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  html body .topbar .brand-mark {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  html body .topbar .brand-mark img {
    width: 27px !important;
    height: 27px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  html body .topbar .brand-copy {
    min-width: 0 !important;
  }

  html body .topbar .brand h1 {
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .topbar .brand-tagline-row,
  html body .topbar .brand p,
  html body .topbar > .topbar-ornament,
  html body .topbar > .nav-cluster,
  html body .topbar .player-meta,
  html body .topbar .player-chip > .audio-controls {
    display: none !important;
  }

  html body .topbar > .player-chip {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .topbar .avatar.avatar-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    font-size: 10px !important;
  }

  html body .site-mobile-menu-toggle {
    appearance: none !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2452 !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 1px solid rgba(225,190,86,.54) !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg,rgba(20,47,32,.96),rgba(7,24,16,.98)) !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05) !important;
    cursor: pointer !important;
  }

  html body .site-mobile-menu-toggle > span {
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #efd373 !important;
    box-shadow: 0 0 7px rgba(224,184,62,.18) !important;
    transition: transform .22s ease, opacity .18s ease !important;
  }

  html body .site-mobile-menu-toggle.is-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }

  html body .site-mobile-menu-toggle.is-open > span:nth-child(2) { opacity: 0 !important; }

  html body .site-mobile-menu-toggle.is-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  html body .site-mobile-nav-scrim {
    appearance: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2400 !important;
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: rgba(1,7,4,.67) !important;
    backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }

  html body .site-mobile-nav-scrim.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body .site-mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2425 !important;
    width: min(340px, 88vw) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: calc(78px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)) !important;
    border-left: 1px solid rgba(218,184,89,.30) !important;
    background:
      radial-gradient(circle at 70% 6%,rgba(199,161,70,.10),transparent 28%),
      linear-gradient(180deg,#10271a 0%,#07160f 54%,#040b08 100%) !important;
    box-shadow: -24px 0 55px rgba(0,0,0,.44) !important;
    transform: translate3d(104%,0,0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.78,.25,1), visibility .28s ease !important;
  }

  html body .site-mobile-nav-drawer.is-open {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body .site-mobile-nav-profile {
    display: grid !important;
    gap: 4px !important;
    padding: 0 2px 14px !important;
    border-bottom: 1px solid rgba(221,188,96,.18) !important;
  }

  html body .site-mobile-nav-profile strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #f0dfae !important;
    font: 700 17px/1.1 Georgia,"Times New Roman",serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .site-mobile-nav-profile span {
    color: #d8b965 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body .site-mobile-nav-audio,
  html body .site-mobile-nav-audio .audio-controls {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .site-mobile-nav-audio .audio-controls {
    display: grid !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html body .site-mobile-nav-audio .audio-slider-row {
    grid-template-columns: 28px 34px minmax(0,1fr) !important;
    gap: 7px !important;
  }

  html body .site-mobile-nav-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body .site-mobile-nav-grid > button {
    appearance: none !important;
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 15px !important;
    border: 1px solid rgba(219,184,89,.22) !important;
    border-radius: 10px !important;
    color: #d9d2b7 !important;
    background: linear-gradient(180deg,rgba(25,54,37,.82),rgba(8,25,17,.92)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-align: left !important;
  }

  html body .site-mobile-nav-grid > button.is-active {
    color: #fff0b3 !important;
    border-color: rgba(236,203,111,.58) !important;
    background: linear-gradient(180deg,rgba(72,86,45,.86),rgba(27,52,31,.96)) !important;
    box-shadow: inset 0 0 18px rgba(231,198,101,.08), 0 0 13px rgba(217,174,66,.08) !important;
  }

  html body .site-mobile-nav-grid > button:disabled {
    opacity: .42 !important;
  }

  html body .app-shell > .topbar,
  html body .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .site-mobile-nav-audio .audio-controls {
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
  }

  html body .site-mobile-nav-audio .audio-slider-row {
    width: 100% !important;
    grid-template-columns: 26px 40px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 20px !important;
  }

  html body .site-mobile-nav-audio .audio-icon-button.sound-toggle,
  html body .site-mobile-nav-audio .audio-icon-button.sound-toggle:hover {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
  }

  html body .site-mobile-nav-audio .audio-slider-label { font-size: 9px !important; }

  html body .site-mobile-nav-audio .audio-volume-slider {
    width: 100% !important;
    min-width: 0 !important;
    height: 18px !important;
  }

  html body .site-mobile-nav-audio .audio-volume-slider::-webkit-slider-runnable-track { height: 5px !important; }

  html body .site-mobile-nav-audio .audio-volume-slider::-webkit-slider-thumb {
    width: 12px !important;
    height: 12px !important;
    margin-top: -3.5px !important;
  }

  html body .site-mobile-nav-audio .audio-volume-slider::-moz-range-track,
  html body .site-mobile-nav-audio .audio-volume-slider::-moz-range-progress { height: 5px !important; }

  html body .site-mobile-nav-audio .audio-volume-slider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
  }

  html body .site-mobile-nav-grid > button.site-mobile-nav-venue {
    color: #fff0bd !important;
    border-color: rgba(222, 160, 76, .58) !important;
    background:
      radial-gradient(circle at 22% 0, rgba(255, 218, 136, .12), transparent 52%),
      linear-gradient(180deg, rgba(113, 68, 31, .94), rgba(55, 31, 15, .98)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -2px rgba(31,13,4,.35), 0 5px 13px rgba(0,0,0,.18) !important;
  }

  html body .site-mobile-nav-audio,
  html body .site-mobile-nav-audio .audio-controls {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
  }

  html body .site-mobile-nav-audio .audio-controls {
    display: grid !important;
    padding: 9px 9px 10px !important;
  }

  html body .site-mobile-nav-audio .audio-slider-row {
    display: grid !important;
    grid-template-columns: 23px 34px minmax(145px, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 7px !important;
  }

  html body .site-mobile-nav-audio .audio-slider-label {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  html body .site-mobile-nav-audio input.audio-volume-slider {
    display: block !important;
    width: 100% !important;
    min-width: 145px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  html body .site-mobile-nav-grid > button.site-mobile-nav-album {
    color: #d9f0ee !important;
    border-color: rgba(100, 184, 184, .48) !important;
    background: linear-gradient(180deg, rgba(27, 67, 69, .94), rgba(10, 32, 34, .98)) !important;
  }

  html body .site-mobile-nav-grid > button.site-mobile-nav-achievements {
    color: #eee1ff !important;
    border-color: rgba(171, 127, 205, .48) !important;
    background: linear-gradient(180deg, rgba(63, 43, 76, .94), rgba(30, 20, 39, .98)) !important;
  }

  html body .site-mobile-nav-grid > button.site-mobile-nav-coffee {
    color: #ffe1e5 !important;
    border-color: rgba(201, 120, 135, .48) !important;
    background: linear-gradient(180deg, rgba(76, 39, 48, .94), rgba(38, 20, 25, .98)) !important;
  }

  html body .site-mobile-nav-grid > button {
    position: relative !important;
    overflow: hidden !important;
  }

  html body .site-mobile-nav-grid > button.is-active {
    padding-left: 18px !important;
    color: #fff4c7 !important;
    border-color: rgba(250, 218, 116, .88) !important;
    border-left: 4px solid #f3d46d !important;
    background:
      linear-gradient(90deg, rgba(238, 198, 84, .16), transparent 42%),
      linear-gradient(180deg, rgba(69, 91, 49, .98), rgba(22, 48, 29, .99)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 238, 173, .08),
      inset 0 0 24px rgba(238, 198, 84, .10),
      0 0 16px rgba(223, 183, 66, .13) !important;
  }

  html body .site-mobile-nav-grid > button.is-active::after {
    content: "CURRENT" !important;
    margin-left: auto !important;
    padding-left: 10px !important;
    color: #f6d978 !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-shadow: 0 0 8px rgba(239, 202, 99, .24) !important;
  }

  html body .site-mobile-nav-drawer {
    width: min(312px, 82vw) !important;
  }

  html body .site-mobile-nav-grid > .site-mobile-nav-divider {
    display: block !important;
    width: calc(100% - 8px) !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 5px 4px 6px !important;
    border: 0 !important;
    background: linear-gradient(90deg, transparent 0%, rgba(221,188,96,.38) 18%, rgba(221,188,96,.20) 82%, transparent 100%) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.28) !important;
    pointer-events: none !important;
  }

  html body .site-mobile-nav-grid > .site-mobile-nav-divider-utility {
    margin-top: 7px !important;
  }

  html body .site-mobile-nav-drawer {
    width: min(280px, 74vw) !important;
  }

  html body .site-mobile-nav-profile {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  html body .site-mobile-nav-profile-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }

  html body .site-mobile-nav-profile-copy strong,
  html body .site-mobile-nav-profile-copy span {
    min-width: 0 !important;
  }

  html body .site-mobile-nav-profile-button {
    appearance: none !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  html body .topbar .site-top-profile-button {
    transition: opacity .16s ease, visibility .16s ease !important;
  }

  html body .topbar .site-top-profile-button.is-hidden-while-mobile-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body .site-mobile-nav-spend-limit {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 3px 5px !important;
    margin-top: 2px !important;
    color: rgba(235, 230, 211, .62) !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  html body .site-mobile-nav-spend-limit > small {
    color: rgba(235, 230, 211, .62) !important;
    font: 800 9px/1.15 Arial, sans-serif !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
  }

  html body .site-mobile-nav-spend-limit > b {
    min-width: 0 !important;
    color: #d8b965 !important;
    font: 850 9px/1.15 Arial, sans-serif !important;
    text-shadow: 0 0 9px rgba(214, 180, 95, .13) !important;
    white-space: nowrap !important;
  }

  html body .site-mobile-nav-spend-limit.is-reached > b {
    color: #f2c878 !important;
    text-shadow: 0 0 10px rgba(242, 174, 86, .22) !important;
  }

  html body .app-shell:has([aria-modal="true"]) > .topbar,
  html body .app-shell:has(.modal-backdrop) > .topbar,
  html body .app-shell:has(.help-backdrop) > .topbar,
  html body .app-shell:has(.peek-inside-backdrop) > .topbar {
    z-index: 2450 !important;
  }

  html body .topbar .site-deposit-anchor { display: none !important; }

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 27px !important;
    margin: -6px 0 0 !important;
    padding: 3px 9px !important;
    border: 1px solid rgba(151,104,59,.82) !important;
    border-radius: 6px !important;
    color: #f1e4c8 !important;
    font: 800 10.5px/1.2 Georgia,serif !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
    background:
      repeating-linear-gradient(2deg,rgba(238,195,120,.06) 0 1px,transparent 1px 6px),
      linear-gradient(180deg,#583b22,#352112 57%,#25170d) !important;
    box-shadow: inset 0 1px rgba(252,222,158,.14), inset 0 -2px rgba(14,7,4,.37) !important;
    cursor: pointer;
  }

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger .site-deposit-icon {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
  }

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger[aria-expanded="true"] {
    border-color: rgba(226,182,97,.9) !important;
    background: linear-gradient(180deg,#66482b,#442b18 57%,#30200f) !important;
  }

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger:focus-visible {
    outline: 2px solid #f6dda3;
    outline-offset: 2px;
  }

  html body .site-mobile-nav-drawer.is-deposit-open > .site-mobile-nav-audio,
  html body .site-mobile-nav-drawer.is-deposit-open > .site-mobile-nav-grid {
    display: none !important;
  }

  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: min(390px, 53dvh) !important;
    height: auto !important;
    flex: 1 0 auto !important;
    margin: 8px 0 0 !important;
    padding: 15px 13px 18px !important;
    contain: layout style !important;
    transform: none;
  }

  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown::before {
    right: auto !important;
    left: 50px !important;
  }

  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown > p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown .site-deposit-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 11px !important;
  }

  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown .site-deposit-actions > a,
  html body .site-mobile-nav-drawer .site-mobile-deposit-dropdown .site-deposit-actions > button {
    box-sizing: border-box !important;
    width: 139px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  html body .site-mobile-nav-audio .audio-slider-row {
    grid-template-columns: 81px minmax(0, 1fr) !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }

  html body .site-mobile-nav-audio .audio-slider-prefix {
    gap: 6px;
    padding-right: 7px;
  }

  html body .site-mobile-nav-audio input.audio-volume-slider {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .site-mobile-nav-drawer > .site-mobile-deposit-trigger > span {
    color: #f1e4c8 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  html body .site-mobile-nav-drawer > .site-mobile-nav-profile.has-deposit-trigger {
    border-bottom: 0 !important;
  }

  html body .site-mobile-nav-audio .audio-slider-row > input.audio-volume-slider::-webkit-slider-thumb {
    margin-top: -3.5px !important;
  }

  html body .site-mobile-nav-audio button.audio-slider-prefix.audio-badge-toggle {
    gap: 6px !important;
    padding-right: 7px !important;
  }

  html body .app-shell > .topbar::before,
  html body .topbar::before {
    background-image: var(--bryer-css-v60-topbarmobile, url("/images/topbarmobile.png")) !important;
  }

  /* Restore mobile positioning where the desktop offsets would otherwise carry over. */
  html body .app-shell > .topbar,
  html body .topbar {
    position: sticky !important;
    transform: none !important;
  }
  html body .topbar > .brand {
    transform: none !important;
    transform-origin: left center !important;
  }
  html body .topbar > .player-chip {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .topbar > .nav-cluster,
  html body .topbar > .topbar-ornament,
  html body .topbar .player-meta,
  html body .topbar .site-deposit-anchor {
    display: none !important;
  }
}

/* helpbg.png already includes the Help window's background and border.
   Show the full artwork instead of covering it with a second frame. */
html body .help-modal {
  /* Leave the transparent parts of helpbg.png open to the backdrop. */
  background: transparent url("/images/helpbg.png") center center / 100% 100% no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
}
html body .help-modal::before,
html body .help-modal::after {
  content: none !important;
  display: none !important;
}
/* The artwork also sits behind the header and footer, so neither needs its old fill. */
html body .help-modal > .help-modal-header,
html body .help-modal > .help-modal-footer {
  background: transparent !important;
}

/* Keep the Help frame fixed while the topic list scrolls inside it.
   The frame itself still comes from /images/helpbg.png. */
html body .help-backdrop {
  overscroll-behavior: none;
}
html body .help-modal {
  min-height: 0;
}
html body .help-modal .help-modal-header,
html body .help-modal .help-modal-footer {
  flex-shrink: 0;
}
html body .help-modal .help-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: auto;
  scrollbar-color: #dfbb65 rgba(10, 20, 13, .54);
  scrollbar-gutter: stable;
  padding-right: 16px;
}
html body .help-modal .help-modal-content::-webkit-scrollbar {
  width: 11px;
}
html body .help-modal .help-modal-content::-webkit-scrollbar-track {
  background: rgba(10, 20, 13, .48);
  border: 1px solid rgba(230, 189, 105, .15);
  border-radius: 12px;
}
html body .help-modal .help-modal-content::-webkit-scrollbar-thumb {
  border-radius: 12px;
  border: 2px solid rgba(13, 25, 16, .84);
  background: linear-gradient(180deg, #fff0b1 0%, #d9ab47 55%, #a87723 100%);
  box-shadow: 0 0 8px rgba(239, 198, 113, .22);
}
html body .help-modal .help-modal-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fff6c9 0%, #edc56c 60%, #c28c30 100%);
}
html body .help-modal .help-modal-header > .close {
  transform: scale(1);
  transform-origin: center;
  transition: transform .30s cubic-bezier(.2, .8, .2, 1),
              color .25s ease, text-shadow .25s ease;
}
html body .help-modal .help-modal-header > .close:hover {
  transform: scale(1.14);
  color: #fff1a3;
  text-shadow: 0 0 10px rgba(255, 229, 137, .8), 0 0 20px rgba(248, 186, 61, .5);
}
html body .help-modal .help-modal-header > .close:active {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  html body .help-modal .help-modal-header > .close {
    transition-duration: .01ms;
  }
}

/* Reduce only the artwork scale on smaller screens. Coffer Hall, Rewards and Inventory
   keep their existing positions and animations; larger desktop layouts stay untouched. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  /* Coffer Hall character artwork: char-640.webp and charcoin-640.webp. */
  html body .view-page.view-shop > .hero.hero-story
    > .hero-character.hero-character-left > img[src*="char-640.webp"],
  html body .view-page.view-shop > .hero.hero-story
    > .hero-character.hero-character-right > img[src*="charcoin-640.webp"] {
    scale: .9 !important;
  }
  html body .view-page.view-shop > .hero.hero-story
    > .hero-character.hero-character-left > img[src*="char-640.webp"] {
    transform-origin: left bottom !important;
  }
  html body .view-page.view-shop > .hero.hero-story
    > .hero-character.hero-character-right > img[src*="charcoin-640.webp"] {
    transform-origin: right bottom !important;
  }

  /* Reward showcase birds: keep both existing animation paths. */
  html body .reward-showcase-hall .reward-showcase-bird-pair
    > .reward-showcase-bird-primary > img[src*="birds.png"],
  html body .reward-showcase-hall .reward-showcase-bird-pair
    > .reward-showcase-bird-secondary > img[src*="bird1.png"] {
    scale: .9 !important;
    transform-origin: center center !important;
  }

  /* Inventory characters: scale down from the existing .88 value. */
  html body .view-page.view-vault > .inventory-hero
    > .hero-character.inventory-character-charsit3 > img[src*="charsit3.png"],
  html body .view-page.view-vault > .inventory-hero
    > .hero-character.inventory-character-charsit2 > img[src*="charsit2.png"] {
    scale: .8 !important;
  }
}

/* Inventory mobile: Halloween uses the same Selected Coffer panel geometry as
   the other Card Packs. The illustrated Halloween frame remains desktop-only. */
@media (max-width: 820px), (max-height: 610px) and (pointer: coarse) {
  html body .view-vault .vault-selection.is-card-pack-selection.is-halloween-card-pack-selection {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 194, 139, .27) !important;
    border-radius: 13px !important;
    outline: none !important;
    background: linear-gradient(118deg, rgba(19, 37, 31, .90), rgba(46, 42, 28, .72) 48%, rgba(20, 38, 32, .90)) !important;
    box-shadow: inset 0 0 36px color-mix(in srgb, var(--accent) 5%, transparent) !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection.is-halloween-card-pack-selection::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    opacity: .48 !important;
    pointer-events: none !important;
    border: 0 !important;
    background-image:
      linear-gradient(30deg, transparent 47%, rgba(226,211,165,.095) 48% 49%, transparent 50%),
      linear-gradient(-30deg, transparent 47%, rgba(154,207,181,.06) 48% 49%, transparent 50%),
      radial-gradient(ellipse at 50% 125%, transparent 0 48%, rgba(231,203,124,.12) 49% 50%, transparent 51%),
      radial-gradient(circle at 8px 8px, rgba(255,240,190,.10) 0 1px, transparent 1.5px) !important;
    background-size: 54px 31px, 54px 31px, 210px 82px, 24px 24px !important;
    background-position: initial !important;
    background-repeat: repeat !important;
    box-shadow: none !important;
    clip-path: none !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-card-pack-selection.is-halloween-card-pack-selection::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 7px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border: 1px solid rgba(244, 220, 151, .13) !important;
    background: none !important;
    clip-path: polygon(0 13px, 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px)) !important;
    box-shadow: none !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection > .vault-selection-texture {
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection > .mythic-panel-frame-overlay {
    display: none !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection > div:not(.vault-selection-texture) {
    position: relative !important;
    z-index: 2 !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection .selected-coffer-info > h3 {
    color: var(--gold-soft) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection .selected-coffer-label-row,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection .open-count-picker {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection .vault-action-group {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection .vault-action-group > .open-secondary,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection .vault-action-group > .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action {
    flex: 0 1 180px !important;
    width: min(180px, 100%) !important;
    min-width: 150px !important;
    max-width: 180px !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action > button.inventory-open-custom-button,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action > button.inventory-open-custom-button:hover:not(:disabled),
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action > button.inventory-open-custom-button:focus-visible,
  html body .view-vault .vault-selection.is-halloween-card-pack-selection
  .inventory-open-button-shell.inventory-open-style-halloween.is-halloween-compact-action > button.inventory-open-custom-button:disabled {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 56px !important;
  }
}

/* Inventory mobile: Halloween has no quantity picker. Do not reserve a grid
   row for the invisible multi-open placeholder beneath the coffer title. */
@media (max-width: 820px), (max-height: 610px) and (pointer: coarse) {
  html body .view-vault .vault-selection.is-card-pack-selection.is-halloween-card-pack-selection {
    row-gap: 14px !important;
    padding-block: 16px !important;
  }

  html body .view-vault .vault-selection.is-halloween-card-pack-selection > .open-count-picker.inventory-purchase-slot-placeholder {
    display: none !important;
  }
}



/* Collection and Card Packs remain in a single real grid. Keeping the section
   and grid boxes intact preserves the positioning and animation layers used
   by the individual purchase slots. */
html body .view-shop .coffer-section-continuous > .coffer-continuous-grid {
  position: relative;
  min-width: 0;
}
@media (min-width: 1201px) {
  html body .view-shop .coffer-section-continuous > .coffer-continuous-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading {
    position: absolute !important;
    grid-column: var(--card-packs-column) / span var(--card-packs-heading-span);
    grid-row: var(--card-packs-row);
    justify-self: start;
    align-self: start;
    top: -33px;
    left: 0;
    z-index: 4;
    width: max-content !important;
    max-width: 100%;
    min-height: 27px;
    display: flex !important;
    flex: none !important;
    gap: 9px !important;
    padding: 1px 11px 1px 2px !important;
    border-radius: 8px !important;
    background: linear-gradient(90deg, rgba(10, 30, 25, .92), rgba(10, 30, 25, .18)) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    white-space: nowrap;
  }
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading::before,
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading::after {
    content: none !important;
    display: none !important;
  }
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading .coffer-section-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading h3 {
    font-size: 18px !important;
  }
}
@media (max-width: 1200px) {
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading {
    position: relative !important;
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
  }
}


/* A short vertical marker where Card Packs join the Collection grid.
   It belongs to the existing heading rather than to a coffer, leaving every
   slot's animation layers and purchase hit area untouched. */
@media (min-width: 1201px) {
  html body .view-shop .coffer-continuous-grid > .coffer-inline-cards-heading::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 37px !important;
    bottom: auto !important;
    left: -21px !important;
    right: auto !important;
    width: 13px !important;
    height: clamp(160px, 18vw, 265px) !important;
    opacity: .35 !important;
    pointer-events: none;
    background:
      radial-gradient(circle, #fff6df 0 2px, transparent 3px) center 10% / 13px 13px no-repeat,
      radial-gradient(circle, #fff6df 0 1.5px, transparent 2.5px) center 90% / 13px 13px no-repeat,
      linear-gradient(180deg, transparent, rgba(240, 228, 191, .66) 14%, rgba(240, 228, 191, .50) 50%, rgba(240, 228, 191, .66) 86%, transparent) center / 1px 100% no-repeat !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 5px rgba(255, 246, 223, .28));
    transform: none !important;
  }
}
@font-face {
  font-family: "HousingInquisition";
  src: url("/fonts/The Inquisition.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Housing Coffer: cedar framing, slate-blue roof, porch details and drifting sawdust.
   The shop, inventory and preview all use the existing button's footprint. */
.purchase-action-pair.purchase-style-housing,
.inventory-open-button-shell.inventory-open-style-housing,
.peek-close-button-shell.peek-close-style-housing .purchase-action-pair {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.purchase-style-housing > button.box-buy-button.buy-style-housing,
.inventory-open-style-housing > button.inventory-open-custom-button,
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f9ead3 !important;
  overflow: visible !important;
  isolation: isolate !important;
  filter: drop-shadow(0 4px 4px #110d09a6) drop-shadow(0 0 4px #79b4c345) !important;
  transition: transform .2s cubic-bezier(.22,.75,.26,1), filter .25s ease !important;
}
.purchase-style-housing > button.box-buy-button.buy-style-housing::before,
.purchase-style-housing > button.box-buy-button.buy-style-housing::after,
.inventory-open-style-housing > button.inventory-open-custom-button::before,
.inventory-open-style-housing > button.inventory-open-custom-button::after,
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing::before,
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing::after {
  content: none !important;
  display: none !important;
}
.purchase-style-housing > button.box-buy-button.buy-style-housing:hover:not(:disabled),
.inventory-open-style-housing > button.inventory-open-custom-button:hover:not(:disabled),
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 6px 5px #110d09ba) drop-shadow(0 0 10px #87c6d085) !important;
}
.purchase-style-housing > button.box-buy-button.buy-style-housing:active:not(:disabled),
.inventory-open-style-housing > button.inventory-open-custom-button:active:not(:disabled),
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing:active:not(:disabled) {
  transform: translateY(1px) scale(.995) !important;
}
.purchase-style-housing > button.box-buy-button.buy-style-housing:focus-visible,
.inventory-open-style-housing > button.inventory-open-custom-button:focus-visible,
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing:focus-visible {
  outline: 2px solid #badce2 !important;
  outline-offset: 4px !important;
}
.purchase-style-housing > button.box-buy-button.buy-style-housing:disabled,
.inventory-open-style-housing > button.inventory-open-custom-button:disabled,
.peek-close-style-housing > .purchase-action-pair > button.peek-close-button.buy-style-housing:disabled {
  filter: grayscale(.28) brightness(.78) !important;
  cursor: default !important;
}

.housing-buy-ornament {
  display: block;
  position: absolute !important;
  inset: 0 -5px !important;
  width: calc(100% + 10px) !important;
  height: calc(100% + 1px) !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.housing-ornament-shadow { fill: #2a160c; stroke: #32180b; stroke-width: 5; }
.housing-ornament-sill { fill: #653315; stroke: #d19b65; stroke-width: 5; }
.housing-ornament-cedar { fill: #9f551d; stroke: #603212; stroke-width: 4; }
.housing-ornament-planks { fill: none; stroke: #e3a46b; stroke-width: 2; opacity: .46; }
.housing-ornament-skirting,.housing-ornament-base { fill: #683611; stroke: #b9804d; stroke-width: 3; }
.housing-ornament-roof { fill: #43527c; stroke: #98aaca; stroke-width: 4.5; }
.housing-ornament-roof-inner { fill: #6475a0; }
.housing-ornament-shingles { fill: none; stroke: #b3bfdf; stroke-width: 2; opacity: .58; }
.housing-ornament-eaves { fill: none; stroke: #d6ad79; stroke-width: 4; }
.housing-ornament-window rect { fill: #e6b879; stroke: #f2ddb5; stroke-width: 5; }
.housing-ornament-window path { stroke: #6d4830; stroke-width: 5; }
.housing-ornament-shutters { fill: #43527c; stroke: #a0aecb; stroke-width: 2; }
.housing-ornament-door { fill: #43281e; stroke: #e2ba89; stroke-width: 4; }
.housing-ornament-door-panel { fill: #74452e; stroke: #b78559; stroke-width: 3; }
.housing-ornament-knob,.housing-ornament-hinges circle { fill: #f1cc86; }
.housing-ornament-step { fill: #43527c; stroke: #a4afc7; stroke-width: 3; }

.housing-buy-stage {
  position: absolute !important;
  left: -8px !important;
  top: 50% !important;
  z-index: 5 !important;
  display: block;
  width: calc(100% + 16px) !important;
  height: 70px !important;
  transform: translateY(-50%);
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 3px 3px #160c0a77);
}
.housing-stage-roof { fill: #43527c; stroke: #9baaca; stroke-width: 7; }
.housing-stage-roof-shine { fill: none; stroke: #c1cae5; stroke-width: 3; }
.housing-stage-gutters,.housing-stage-rail { fill: none; stroke: #be8250; stroke-width: 8; stroke-linecap: round; }
.housing-stage-posts,.housing-stage-balusters { fill: none; stroke: #9f551d; stroke-width: 10; }
.housing-stage-window { fill: #efc78c; stroke: #845339; stroke-width: 9; }
.housing-stage-pane { fill: none; stroke: #6d513a; stroke-width: 7; }
.housing-stage-shutters,.housing-stage-chimney { fill: none; stroke: #43527c; stroke-width: 11; }
.housing-stage-chimney-cap { fill: none; stroke: #c4a47d; stroke-width: 9; }
.housing-stage-smoke { fill: none; stroke: #d5e0d5; stroke-width: 7; opacity: .38; animation: housingChimneyBreathe 6s ease-in-out infinite; }
.housing-stage-lamps path:first-child { fill: #4b3225; stroke: #c8a67b; stroke-width: 5; }
.housing-stage-lamps .housing-stage-lamp-light { fill: #ffe8b1; stroke: none; animation: housingPorchGlow 4.2s ease-in-out infinite; }
.housing-stage-flowerbox { fill: #9f551d; stroke: #d39a65; stroke-width: 4; }
.housing-stage-stems { fill: none; stroke: #91a786; stroke-width: 7; stroke-linecap: round; }

.purchase-style-housing .box-buy-button-label,
.inventory-open-style-housing .inventory-open-button-label,
.peek-close-style-housing .box-buy-button-label {
  position: relative !important;
  top: 5px !important;
  z-index: 5 !important;
  display: block;
  max-width: 100%;
  padding: 0 37px !important;
  color: #fff0d3 !important;
  -webkit-text-fill-color: #fff0d3 !important;
  -webkit-text-stroke: .25px #35251c !important;
  font-family: "HousingInquisition", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 1.6vw, 27px) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #28170eef, 0 0 9px #28170ee5, 0 0 15px #f6dfb138 !important;
  letter-spacing: .06em !important;
  pointer-events: none;
}
.purchase-style-housing > button.box-buy-button.has-long-label .box-buy-button-label {
  padding-inline: 22px !important;
  font-size: clamp(9px,.78vw,13px) !important;
  letter-spacing: 0 !important;
}

/* Cedar pollen and tiny shingle flecks float around the roofline, never over the label. */
.purchase-style-housing .custom-buy-fx-housing,
.inventory-open-style-housing .custom-buy-fx-housing,
.peek-close-style-housing .custom-buy-fx-housing {
  position: absolute !important;
  inset: -14px -9px !important;
  z-index: 7 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.custom-buy-fx-housing i {
  --housing-sway: 9px;
  position: absolute;
  display: block;
  width: 5px;
  height: 2px;
  background: #e6c493;
  border-radius: 1px 60% 1px 60%;
  box-shadow: 0 0 3px #d9bd7999;
  transform: translateY(0) rotate(-25deg);
  opacity: 0;
  animation: housingTimberDrift 5.7s ease-in-out infinite;
}
.custom-buy-fx-housing i:nth-child(3n) {
  background: #83b7c8;
  box-shadow: 0 0 4px #88b7c67a;
  width: 6px; height: 3px;
}
.custom-buy-fx-housing i:nth-child(1) { left: 5%; bottom: 15%; animation-delay: -1s; }
.custom-buy-fx-housing i:nth-child(2) { left: 12%; top: 23%; animation-delay: -3.2s; --housing-sway:-8px; }
.custom-buy-fx-housing i:nth-child(3) { left: 21%; bottom: 1%; animation-delay: -4.3s; }
.custom-buy-fx-housing i:nth-child(4) { left: 30%; top: 1%; animation-delay: -2.2s; }
.custom-buy-fx-housing i:nth-child(5) { left: 40%; bottom: 5%; animation-delay: -5s; --housing-sway:-10px; }
.custom-buy-fx-housing i:nth-child(6) { right: 36%; top: 3%; animation-delay: -3.7s; }
.custom-buy-fx-housing i:nth-child(7) { right: 26%; bottom: 8%; animation-delay: -1.7s; }
.custom-buy-fx-housing i:nth-child(8) { right: 18%; top: 7%; animation-delay: -4.7s; --housing-sway:-8px; }
.custom-buy-fx-housing i:nth-child(9) { right: 12%; bottom: 13%; animation-delay: -2.8s; }
.custom-buy-fx-housing i:nth-child(10) { right: 5%; top: 21%; animation-delay: -5.5s; }
.custom-buy-fx-housing i:nth-child(11) { left: 2%; top: 42%; animation-delay: -.6s; --housing-sway:-9px; }
.custom-buy-fx-housing i:nth-child(12) { right: 2%; bottom: 38%; animation-delay: -3.9s; }

@keyframes housingTimberDrift {
  0%,100% { opacity: 0; transform: translate3d(0,7px,0) rotate(-25deg); }
  20% { opacity: .72; }
  65% { opacity: .58; }
  90% { opacity: 0; }
  99% { transform: translate3d(var(--housing-sway),-23px,0) rotate(90deg); }
}
@keyframes housingPorchGlow { 0%,100% { opacity:.67; } 50% { opacity:1; } }
@keyframes housingChimneyBreathe { 0%,100% { opacity:.16; transform:translateY(4px); } 50% { opacity:.5; transform:translateY(-5px); } }

.box-card.is-sold-out .purchase-style-housing .custom-buy-fx-housing { animation-play-state: paused; opacity: .25; }
@media(max-width:700px) {
  .housing-buy-stage { height: 66px !important; }
  .housing-buy-ornament { inset: 0 -4px !important; width:calc(100% + 8px) !important; height:calc(100% + 1px) !important; }
  .purchase-style-housing .box-buy-button-label,
  .inventory-open-style-housing .inventory-open-button-label { padding-inline:29px !important; font-size:clamp(20px,4.6vw,24px) !important; }
}
@media(prefers-reduced-motion:reduce) {
  .custom-buy-fx-housing i,.housing-stage-smoke,.housing-stage-lamp-light { animation: none !important; }
}


/* The shared shop rule fixes BUY text at 16/14px; Housing uses its own legible size. */
html body .view-shop .box-card .card-actions
.purchase-action-pair.purchase-style-housing
> button.btn.primary.box-buy-button.buy-style-housing:not(.has-long-label)
> span.box-buy-button-label,
html body .inventory-open-button-shell.inventory-open-style-housing
> button.inventory-open-custom-button:not(.has-long-label)
> span.inventory-open-button-label,
html body .peek-close-button-shell.peek-close-style-housing
> .purchase-action-pair > button.peek-close-button.buy-style-housing
> span.box-buy-button-label {
  font-family: "HousingInquisition", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(23px, 1.75vw, 27px) !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
}
@media (max-width: 700px) {
  html body .view-shop .box-card .card-actions
  .purchase-action-pair.purchase-style-housing
  > button.btn.primary.box-buy-button.buy-style-housing:not(.has-long-label)
  > span.box-buy-button-label,
  html body .inventory-open-button-shell.inventory-open-style-housing
  > button.inventory-open-custom-button:not(.has-long-label)
  > span.inventory-open-button-label,
  html body .peek-close-button-shell.peek-close-style-housing
  > .purchase-action-pair > button.peek-close-button.buy-style-housing
  > span.box-buy-button-label {
    font-size: clamp(20px, 5vw, 24px) !important;
  }
}


/* Housing's SVG replaces the inventory button skin. Keep the vault glow and
   the base .open-button gradients from painting a second rectangle beneath it. */
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing {
  background: transparent !important;
  box-shadow: none !important;
}
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing::before,
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing::after {
  content: none !important;
  display: none !important;
}
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing
> button.btn.primary.open-button.inventory-open-custom-button {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing
> button.btn.primary.open-button.inventory-open-custom-button:is(:hover, :active, :focus-visible, :disabled) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing
> button.btn.primary.open-button.inventory-open-custom-button::before,
html body .view-vault .vault-selection .vault-action-group
> .inventory-open-button-shell.inventory-open-style-housing
> button.btn.primary.open-button.inventory-open-custom-button::after {
  content: none !important;
  display: none !important;
}

/* The Housing preview's Close action is deliberately larger than BUY and OPEN. */
html body .peek-close-button-shell.peek-close-style-housing
> .card-actions .purchase-action-pair.purchase-style-housing
> button.peek-close-button.buy-style-housing
> span.box-buy-button-label {
  font-size: clamp(28px, 2.1vw, 33px) !important;
}
@media (max-width: 700px) {
  html body .peek-close-button-shell.peek-close-style-housing
  > .card-actions .purchase-action-pair.purchase-style-housing
  > button.peek-close-button.buy-style-housing
  > span.box-buy-button-label {
    font-size: clamp(25px, 5.8vw, 29px) !important;
  }
}


/* The reel can open Peek Inside without dismissing The Coffer Awakens.
   Only previews portalled from the reel use this higher viewport layer. */
html body > .peek-inside-backdrop,
html body > .card-catalog-backdrop {
  z-index: 100040 !important;
}

/* Keep the original layout on large displays. Scale the entire opening scene,
   rather than individual art layers, on Full HD and smaller desktop screens. */
@media (min-width: 981px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .app-shell > .reel-overlay.custom-coffer-opening .custom-coffer-scene.custom-coffer-scene,
  html body .app-shell > .reel-overlay.custom-coffer-opening.is-revealed .custom-coffer-scene.custom-coffer-scene,
  html body .app-shell > .reel-overlay.custom-coffer-opening.is-reuse-ready .custom-coffer-scene.custom-coffer-scene {
    width: min(89vw, 1490px, 148vh) !important;
    max-width: 1490px !important;
  }
}

/* Audio controls are not modal content. In particular, the desktop history
   controls are portalled to body with an extremely high stacking order.
   Put them back underneath dialog backdrops, and dim controls in fixed headers. */
html:has([aria-modal="true"], .modal-backdrop, .reel-overlay, .help-backdrop, .purchase-overlay, .gift-opening-overlay, .gift-compose-overlay, .reviews-overlay)
  body > .history-launch-audio-portal {
  z-index: 15 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
html:has([aria-modal="true"], .modal-backdrop, .reel-overlay, .help-backdrop, .purchase-overlay, .gift-opening-overlay, .gift-compose-overlay, .reviews-overlay)
  .audio-controls {
  opacity: .28 !important;
  pointer-events: none !important;
}
/* The login's hanging ropes belong to the audio assembly, not to its
   buttons. Dim only the wood planks and sliders so the ropes stay visible. */
html:has([aria-modal="true"], .modal-backdrop, .reel-overlay, .help-backdrop, .purchase-overlay, .gift-opening-overlay, .gift-compose-overlay, .reviews-overlay)
  .login-audio-controls .history-launch-row > .login-audio-plank-visual,
html:has([aria-modal="true"], .modal-backdrop, .reel-overlay, .help-backdrop, .purchase-overlay, .gift-opening-overlay, .gift-compose-overlay, .reviews-overlay)
  .login-audio-controls .history-launch-row > .login-audio-plank-controls {
  opacity: .28 !important;
  pointer-events: none !important;
}
html:has([aria-modal="true"], .modal-backdrop, .reel-overlay, .help-backdrop, .purchase-overlay, .gift-opening-overlay, .gift-compose-overlay, .reviews-overlay)
  :is(.audio-controls, .login-audio-controls) :is(button, input) {
  pointer-events: none !important;
}

/* The Coffer Awakens already fits Full HD. Keep its illustrated slot frames in
   place and scale just the reward artwork, rarity and name within each slot. */
@media (min-width: 981px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .custom-coffer-opening .custom-coffer-carousel .custom-opening-card-face .custom-opening-card-inner {
    transform: scale(.85) !important;
    transform-origin: center center !important;
  }
}

/* Keep the Cards Peek Inside at three quarters of its full desktop size,
   with a little more room for the coffer heading and the card copy. */
@media (min-width: 981px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .card-catalog-backdrop > .card-catalog-modal,
  html body .card-catalog-backdrop > .card-catalog-featured-mythic {
    zoom: .75 !important;
  }

  html body .card-catalog-backdrop > .card-catalog-modal {
    max-height: 120dvh !important;
  }

  html body .card-catalog-modal .card-catalog-header h2 {
    font-size: clamp(23px, 1.25vw, 26px) !important;
    line-height: 1.18 !important;
  }

  html body .card-catalog-modal .card-catalog-header > .card-catalog-box-description {
    font-size: 13px !important;
  }

  html body .card-catalog-modal .card-catalog-stats span {
    font-size: 11px !important;
  }

  html body .card-catalog-modal .card-catalog-preset-title {
    font-size: clamp(13.5px, .75vw, 14.5px) !important;
  }

  html body .card-catalog-modal .card-catalog-preset-description {
    font-size: clamp(8px, .86vw, 11px) !important;
  }
}
@media (min-width: 1501px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .card-catalog-backdrop > .card-catalog-featured-mythic {
    right: calc(50% + 585px) !important;
  }
}
@media (min-width: 1081px) and (max-width: 1500px) and (max-height: 1080px) {
  html body .card-catalog-backdrop > .card-catalog-featured-mythic {
    right: calc(50% + 565px) !important;
  }
}

/* The regular coffer reel freezes background animation for performance, but
   paint containment on the entire main layout clips the long ropes above the
   history/audio planks. Keep layout containment and allow those ropes to paint
   outside the history column while the reel/backdrop stays in front. */
html body .app-shell.reel-is-active > .main-layout {
  contain: layout style !important;
}

/* Only the Housing Coffer in Inventory includes this bid disclaimer. */
html body .view-vault .vault-selection .selected-coffer-housing-note {
  max-width: 470px;
  margin: 3px 0 8px;
  color: rgba(239, 223, 189, .88);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  text-wrap: pretty;
}
@media (max-width: 1180px) {
  html body .view-vault .vault-selection .selected-coffer-housing-note {
    margin-inline: auto;
  }
}


/* Small text-style track navigation attached to the site's existing audio assembly.
   Keep it outside the slider rows so neither slider shifts when changing tracks. */
html body .audio-controls {
  position: relative !important;
  overflow: visible !important;
}
html body .login-audio-controls .login-audio-plank-controls {
  overflow: visible !important;
}
html body .audio-controls > .audio-track-buttons,
html body .login-audio-controls .login-audio-plank-controls > .audio-track-buttons {
  position: absolute !important;
  top: -20px;
  left: 0;
  right: 0;
  z-index: 8;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 11px;
  height: 19px;
  pointer-events: none;
}
html body .audio-controls > .audio-track-buttons .audio-track-button,
html body .login-audio-controls .audio-track-buttons .audio-track-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: 27px;
  height: 19px;
  min-height: 19px;
  padding: 0;
  color: #ebd49b;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 160ms ease, color 160ms ease;
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
}
html body .audio-track-button > span {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-variant-emoji: text;
  font-size: 14px;
  line-height: 1;
}
html body .audio-track-button:hover {
  color: #fff1c5;
  transform: scale(1.15);
}
html body .audio-track-button:focus-visible {
  outline: 2px solid #f2d99a;
  outline-offset: 2px;
}
/* The login screen uses wooden hanging planks instead of the desktop portal. */
html body .login-audio-controls .login-audio-plank-controls > .audio-track-buttons {
  top: -25px !important;
}
@media (max-width: 820px) {
  html body .site-mobile-nav-audio .audio-controls > .audio-track-buttons {
    position: relative !important;
    top: -3px !important;
    left: auto !important;
    right: auto !important;
    justify-self: center;
    width: 100%;
    margin: 0 0 3px;
    height: 21px;
  }
}


/* Housing's auction warning belongs only to this coffer's reward preview.
   Keep it beneath the themed Close button without changing other previews. */
html body .peek-inside-backdrop .rewards-modal-footer.housing-rewards-footer {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
html body .peek-inside-backdrop .housing-peek-disclaimer {
  box-sizing: border-box;
  width: 100%;
  max-width: 680px;
  margin: 2px auto 0;
  padding: 0 10px;
  color: rgba(234, 225, 202, .86);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(10px, .75vw, 12px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: pretty;
}
html body .peek-inside-backdrop .housing-peek-disclaimer strong {
  font-weight: 600;
}
@media (max-width: 700px) {
  html body .peek-inside-backdrop .housing-peek-disclaimer {
    font-size: 10px;
  }
}

/* Make the track glyphs slightly larger only on screens bigger than Full HD.
   The text-only buttons and their existing hover/overlay behavior stay intact. */
@media (min-width: 1921px), (min-width: 981px) and (min-height: 1081px) {
  html body .audio-controls > .audio-track-buttons .audio-track-button,
  html body .login-audio-controls .audio-track-buttons .audio-track-button {
    width: 32px;
    height: 23px;
    min-height: 23px;
  }
  html body .audio-track-button > span {
    font-size: 17px;
  }
}

/* Housing Coffer: explain the game's bid process without changing Card Pack badges. */
html body .box-card > .card-pack-support-symbol.is-housing-warning {
  width: 38px !important;
  height: 38px !important;
  transform-origin: center !important;
  /* The shared Card Pack image has a !important transform, so the pulse runs on its wrapper. */
  animation: housingCofferWarningPulse 5s ease-in-out infinite !important;
}
html body .box-card > .card-pack-support-symbol.is-housing-warning > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
@keyframes housingCofferWarningPulse {
  0%, 18%, 100% { transform: scale(1); }
  9% { transform: scale(1.18); }
}
html body .box-card > .card-pack-support-symbol.is-housing-warning:hover,
html body .box-card > .card-pack-support-symbol.is-housing-warning:focus-visible {
  /* Don't move the tooltip or its pointer while the player is reading it. */
  animation: none !important;
}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-housing-tooltip {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  left: var(--housing-tooltip-left, 0px) !important;
  right: auto !important;
  width: min(430px, calc(100vw - 32px)) !important;
  color: #fff3dd !important;
  border: 2px solid #43527c !important;
  background:
    repeating-linear-gradient(1deg, transparent 0 7px, rgba(55, 27, 12, .12) 8px 9px, transparent 10px 18px),
    repeating-linear-gradient(93deg, rgba(245, 186, 110, .10) 0 2px, transparent 3px 19px, rgba(45, 20, 8, .09) 20px 22px, transparent 23px 34px),
    linear-gradient(180deg, rgba(202, 126, 59, .18), rgba(67, 32, 11, .19)),
    rgba(159, 85, 29, .89) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.54), inset 0 1px 0 rgba(255, 211, 157, .2) !important;
  transform-origin: top right !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
}
html body .box-card > .card-pack-support-symbol > .card-pack-support-tooltip.is-housing-tooltip::after {
  top: auto !important;
  bottom: 100% !important;
  left: var(--housing-tooltip-arrow, 20px) !important;
  right: auto !important;
  border-top: 2px solid #43527c !important;
  border-left: 2px solid #43527c !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: #9f551d !important;
  transform: translateY(5px) rotate(45deg) !important;
}
@media (max-width: 720px) {
  html body .box-card > .card-pack-support-symbol.is-housing-warning {
    width: 34px !important;
    height: 34px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .box-card > .card-pack-support-symbol.is-housing-warning {
    animation: none !important;
  }
}

/* Housing Coffer checkout confirmation, overlaid inside the existing purchase dialog. */
html body .purchase-dialog:has(> .housing-purchase-notice-cover) {
  min-height: 520px;
}
html body .purchase-dialog:has(> .housing-purchase-notice-cover) > :not(.housing-purchase-notice-cover) {
  /* Keep the original checkout visible but subdued behind Housing's consent dialog. */
  opacity: .55 !important;
  pointer-events: none !important;
  user-select: none !important;
}
html body .housing-purchase-notice-cover {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: clamp(12px, 2.2vw, 22px);
  /* No rectangular backdrop: the page already has the normal purchase overlay. */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .housing-purchase-notice {
  width: min(100%, 530px);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(19px, 2.5vw, 28px);
  border: 2px solid rgba(67, 82, 124, .78);
  border-radius: 16px;
  color: #fff4e4;
  background:
    repeating-linear-gradient(2deg, transparent 0 12px, rgba(49, 22, 9, .10) 13px 14px, transparent 15px 24px),
    linear-gradient(160deg, rgba(159, 85, 29, .88), rgba(83, 45, 23, .90));
  box-shadow: 0 20px 65px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,240,207,.18);
  text-align: center;
}
html body .housing-purchase-notice h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.15;
  color: #ffe4ac;
  text-shadow: 0 2px 12px rgba(0,0,0,.48);
}
html body .housing-purchase-notice p {
  margin: 0;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.65;
  font-weight: 550;
  text-wrap: pretty;
}
html body .housing-purchase-notice-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 30px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
html body .housing-purchase-notice-choice input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #43527c;
  cursor: pointer;
}
html body .housing-purchase-notice-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
html body .housing-purchase-notice-actions .btn {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 220px;
  font-size: 13px;
  white-space: normal;
}
@media (max-width: 680px), (max-height: 740px) {
  html body .housing-purchase-notice {
    gap: 12px;
    padding: 15px;
  }
  html body .housing-purchase-notice-cover { padding: 9px; }
  html body .housing-purchase-notice p { font-size: 12px; line-height: 1.5; }
  html body .housing-purchase-notice-actions .btn { flex-basis: 120px; }
}

/* At Full HD and smaller, reduce site chrome and dialogs together. The Minigames
   card selector keeps its established dimensions instead of inheriting the reduction. */
@media screen and (min-width: 1024px) and (max-width: 1920px) and (max-height: 1080px) {
  html body {
    --bryer-layout-scale: .90;
    zoom: var(--bryer-layout-scale) !important;
    min-height: calc(100dvh / var(--bryer-layout-scale)) !important;
  }
  html body > .app-shell {
    min-height: calc(100dvh / var(--bryer-layout-scale)) !important;
  }
  html body .view-page.view-minigame .minigame-selector-hero {
    zoom: 1.1111111111 !important;
  }
}
@media screen and (min-width: 821px) and (max-width: 1023px) and (max-height: 1080px) {
  html body {
    --bryer-layout-scale: .95;
    zoom: var(--bryer-layout-scale) !important;
    min-height: calc(100dvh / var(--bryer-layout-scale)) !important;
  }
  html body > .app-shell {
    min-height: calc(100dvh / var(--bryer-layout-scale)) !important;
  }
  html body .view-page.view-minigame .minigame-selector-hero {
    zoom: 1.0526315789 !important;
  }
}
@media screen and (max-width: 820px) and (max-height: 1080px) {
  html body {
    --bryer-layout-scale: .96;
    zoom: var(--bryer-layout-scale) !important;
    min-height: calc(100dvh / var(--bryer-layout-scale)) !important;
  }
  html body > .app-shell {
    min-height: calc(100dvh / var(--bryer-layout-scale)) !important;
  }
  html body .view-page.view-minigame .minigame-selector-hero {
    zoom: 1.0416666667 !important;
  }
  /* The menu background still reaches both screen edges after the body zoom. */
  html body .app-shell > .topbar {
    width: calc(100vw / var(--bryer-layout-scale)) !important;
    max-width: none !important;
  }
}

/* Keep the Minigames selection cards at their existing desktop widths. */
@media screen and (min-width: 1024px) and (max-width: 1899px) and (max-height: 1080px) {
  html body .view-minigame .minigame-selector-center {
    width: min(1548px, calc(100% - 58px)) !important;
  }
}

/* Every reward plaque hangs from one evenly-spaced position along the same
   illustrated rope. Use matching columns rather than fixed pixel offsets,
   so Inventory and Coffer Hall stay aligned at each desktop breakpoint. */
@media screen and (min-width: 821px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track {
    display: grid !important;
    grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    padding-inline: 0 !important;
    inset: 30px 0 auto 0 !important;
    width: 100% !important;
    gap: 0 !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card {
    justify-self: center !important;
    margin-inline: 0 !important;
  }
  html body .reward-showcase .reward-rope-image {
    top: 4px !important;
  }
}
@media screen and (min-width: 821px) and (max-width: 1680px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track {
    grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 821px) and (max-width: 1480px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track {
    grid-template-columns: repeat(13, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 821px) and (max-width: 1260px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track {
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 821px) and (max-width: 1040px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  }
}


/* Coffer Hall: shrink the complete illustrated search/filter assembly. Keep the
   frame, lanterns, floating effects, searchbar and chips in the same zoom context. */
@media screen and (min-width: 1024px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    zoom: .83 !important;
  }
}
@media screen and (min-width: 821px) and (max-width: 1023px) and (max-height: 1080px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    zoom: .87 !important;
  }
}
@media screen and (max-width: 820px) and (max-height: 1080px) {
  html body .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    zoom: .91 !important;
  }
}

/* On the Full HD band all 18 plaques must fit on the same rope; the previous
   sixteen-column grid placed two plaques on a hidden second row. */
@media screen and (min-width: 1681px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track {
    grid-template-columns: repeat(18, minmax(0, 1fr)) !important;
  }
}

/* The static reward plaques were repositioned into grid columns, but their old
   space-around offsets were still being inherited. Each plaque gets its own
   rope-attachment correction; animation remains on the nested sway/flip layers.
   Applies to both the Coffer Hall and the Inventory version of the showcase. */
@media screen and (min-width: 821px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card {
    --manual-sign-offset-x: 0px;
    --manual-sign-offset-y: 0px;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card .reward-flip-assembly {
    translate: var(--manual-sign-offset-x) var(--manual-sign-offset-y) !important;
  }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(1)  { --manual-sign-offset-x: 3px; --manual-sign-offset-y: -2px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(2)  { --manual-sign-offset-x: 1px; --manual-sign-offset-y:  -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(3)  { --manual-sign-offset-x: 1px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(4)  { --manual-sign-offset-x: -1px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(5)  { --manual-sign-offset-x: -1px; --manual-sign-offset-y: -2px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(6)  { --manual-sign-offset-x: 3px; --manual-sign-offset-y:  -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(7)  { --manual-sign-offset-x:  0px; --manual-sign-offset-y: -2px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(8)  { --manual-sign-offset-x: -1px; --manual-sign-offset-y:  0px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(9)  { --manual-sign-offset-x: 3px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(10) { --manual-sign-offset-x: -1px; --manual-sign-offset-y:  0px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(11) { --manual-sign-offset-x:  2px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(12) { --manual-sign-offset-x:  1px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(13) { --manual-sign-offset-x: -3px; --manual-sign-offset-y:  0px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(14) { --manual-sign-offset-x: 1px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(15) { --manual-sign-offset-x: 2px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(16) { --manual-sign-offset-x: 3px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(17) { --manual-sign-offset-x:  1px; --manual-sign-offset-y: -1px; }
  html body .reward-showcase .reward-showcase-track.is-static-track > .reward-showcase-static-card:nth-child(18) { --manual-sign-offset-x: -1px; --manual-sign-offset-y:  -1px; }
}

/* The minigame canvases are body portals, not page content. Restore native
   viewport pixels only while an actual full-screen game is open. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body.bryer-minigame-viewport {
    zoom: 1 !important;
    min-height: 100dvh !important;
  }
  html body.bryer-minigame-viewport > .app-shell {
    min-height: 100dvh !important;
  }
  html body.bryer-minigame-viewport .app-shell > .topbar {
    width: 100vw !important;
  }
}

/* Coffer Hall and Inventory sit a little higher without moving the topbar or
   the separate history/audio column. Preserve the shop's existing page reveal. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body .main-layout > .content > .view-page.view-shop,
  html body .main-layout > .content > .view-page.view-vault {
    position: relative !important;
    top: -24px !important;
  }
}

/* Inventory's two upper hanging ropes are measured against the stage position.
   At the compact viewport density their lower knots end before reaching the
   illustrated first panel. Let the ropes continue behind that panel, without
   stretching the rope texture or shifting their attachment points. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body .app-shell > .inventory-main-suspension-layer {
    height: calc(var(--inventory-main-rope-height) + clamp(24px, 4vw, 72px)) !important;
  }
}


/* Compact viewports: keep the topbar and history column fixed while the two
   main pages receive their own layout adjustments. The extra shop zoom covers
   its artwork and rewards as well as the catalog, rather than scaling panels alone. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body .main-layout > .content > .view-page.view-shop {
    top: -36px !important;
    zoom: .97 !important;
  }

  html body .main-layout > .content > .view-page.view-vault {
    top: -48px !important;
  }

  /* Position for both upper ropes comes from the matching lower attachments. */

  /* Retain the separate catalog lift from the previous layout pass. */
  html body .main-layout > .content > .view-page.view-shop > .catalog-tools.catalog-tools-tree-trunk {
    margin-top: -12px !important;
  }
}


/* Compact layout refinements: the Inventory artwork moves without affecting
   the topbar, Fortune Echo or the history/audio column. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body .main-layout > .content > .view-page.view-vault {
    top: -60px !important;
  }

  /* Both upper ropes now use the real attachment axes of the lower pair.
     No extra CSS margins should move them away from those coordinates. */
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-left,
  html body .app-shell > .inventory-main-suspension-layer > .inventory-main-suspension.is-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* chain2.png carries both lower chain axes, while chain.png renders each
     upper strand. Align the two upper strands to the same measured artwork. */
  html body .view-page.view-upgrade .upgrade-page:not(.upgrade-page-loading)::before {
    left: var(--upgrade-upper-chain-left, -32px) !important;
    right: auto !important;
  }
  html body .view-page.view-upgrade .upgrade-page:not(.upgrade-page-loading)::after {
    left: auto !important;
    right: var(--upgrade-upper-chain-right, 0px) !important;
  }
}


/* The entry screen is a full-window scene, not a compact site page. Without
   this exception the global body zoom shrinks its background to 90/95/96% of
   the viewport after the stylesheet loads, leaving blank bands on two sides. */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  html body:has(.login-screen) {
    zoom: 1 !important;
    min-height: 100dvh !important;
  }
  html body:has(.login-screen) .login-screen {
    width: 100% !important;
    min-height: 100dvh !important;
  }
}


/* Upgrade: the left upper strand has its own element. The old ::before
   inherited several legacy coordinates, leaving the visible artwork unchanged
   when its offset was edited. The right ::after strand remains untouched. */
html body .view-page.view-upgrade .upgrade-page > img.upgrade-left-hanging-chain {
  display: none !important;
}

@media screen and (min-width: 1081px) and (max-width: 1920px) and (max-height: 1080px) {
  html body .view-page.view-upgrade .upgrade-page:not(.upgrade-page-loading)::before {
    content: none !important;
    display: none !important;
  }

  html body .view-page.view-upgrade .upgrade-page > img.upgrade-left-hanging-chain {
    display: block !important;
    position: absolute !important;
    top: -110px !important;
    left: calc(var(--upgrade-upper-chain-left, -32px) + 34px) !important;
    right: auto !important;
    width: 204px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    opacity: .98 !important;
    transform: none !important;
    transform-origin: center top !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(214,180,95,.18)) !important;
  }
}


/* Large desktops use two real chain.png images, aligned to the painted
   attachment points of chain2.png by LootboxApp. The v15 pseudo-element
   positions were overridden by older styles and never moved the artwork. */
html body .view-page.view-upgrade .upgrade-page > img.upgrade-right-hanging-chain {
  display: none !important;
}

@media screen and (min-width: 1921px),
       screen and (min-width: 1081px) and (min-height: 1081px) {
  html body .view-page.view-upgrade #upgrade-page-no-art-glow::before,
  html body .view-page.view-upgrade #upgrade-page-no-art-glow::after {
    content: none !important;
    display: none !important;
  }

  html body .view-page.view-upgrade #upgrade-page-no-art-glow > img.upgrade-left-hanging-chain,
  html body .view-page.view-upgrade #upgrade-page-no-art-glow > img.upgrade-right-hanging-chain {
    display: block !important;
    position: absolute !important;
    top: -110px !important;
    width: 204px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    opacity: .98 !important;
    transform-origin: center top !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(214,180,95,.18)) !important;
  }

  html body .view-page.view-upgrade #upgrade-page-no-art-glow > img.upgrade-left-hanging-chain {
    left: var(--upgrade-upper-chain-left, 210px) !important;
    right: auto !important;
    transform: none !important;
  }

  html body .view-page.view-upgrade #upgrade-page-no-art-glow > img.upgrade-right-hanging-chain {
    right: var(--upgrade-upper-chain-right, 210px) !important;
    left: auto !important;
    transform: scaleX(-1) !important;
  }
}


/* Minigames has a tall, fixed visual History frame. Its scroll viewport fills
   the available interior instead of stopping after the seventh result. */
@media (min-width: 1181px) {
  html body .main-layout > .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] {
    display: flex !important;
    flex-direction: column !important;
  }

  html body .main-layout > .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .panel-header {
    flex-shrink: 0 !important;
  }

  html body .main-layout > .history-column > .history-panel.history-panel-dynamic[data-history-mode="minigame"] > .history-list {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }
}