: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('/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('/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:2px!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;}