/* =========================================================
RESET
========================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  min-height: 100%;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #3d3d50 #09090d;
}
html::-webkit-scrollbar {
  width: 7px;
}
html::-webkit-scrollbar-track {
  background: #09090d;
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient( 180deg, #505064, #292936 );
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient( 180deg, #68687e, #3d3d50 );
}
body {
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient( circle at 50% -20%, #202638 0%, #0b0d12 45%, #06070a 100% );
  color: #ffffff;
}
/* =========================================================
HEADER
========================================================= */
.site-header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid #252a35;
  backdrop-filter: blur(14px);
}
.logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 3px;
}
.header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-info a, .header-info button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #30303d;
  border-radius: 9px;
  background: linear-gradient( 145deg, #1b1b25, #111117 );
  color: #dcdce8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.header-info a:hover, .header-info button:hover {
  transform: translateY(-2px);
  background: linear-gradient( 145deg, #272735, #171720 );
  border-color: #55556d;
  color: white;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.35);
}
.header-info a:active, .header-info button:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
#logout-button {
  color: #ff8585;
  border-color: rgba(255, 90, 90, 0.25);
  background: linear-gradient( 145deg, #241619, #171114 );
}
#logout-button:hover {
  color: #ffaaaa;
  border-color: rgba(255, 90, 90, 0.55);
  background: linear-gradient( 145deg, #351a1d, #211316 );
  box-shadow: 0 7px 22px rgba(255, 70, 70, 0.12);
}
#username-display {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: #aaaabd;
  font-size: 13px;
  font-weight: 600;
}
/* =========================================================
HERO
========================================================= */
.hero {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 70px 20px 50px;
  text-align: center;
}
.hero h1 {
  margin-bottom: 12px;
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient( 90deg, #ffffff, #aeb8ff, #ffffff );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 5s linear infinite;
}
.hero p {
  margin-bottom: 30px;
  color: #8f96a3;
  font-size: 16px;
}
@keyframes titleShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}
/* =========================================================
TAG INPUT
========================================================= */
.tag-input-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 20px;
}
#tag-input {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border: 1px solid #303642;
  border-radius: 10px;
  background: rgba(21, 25, 34, 0.9);
  color: #ffffff;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#tag-input::placeholder {
  color: #666d7a;
}
#tag-input:focus {
  border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15), 0 0 25px rgba(88, 101, 242, 0.12);
}
/* =========================================================
MAIN BUTTON
========================================================= */
#open-pack-button {
  height: 50px;
  padding: 0 32px;
  border: none;
  border-radius: 10px;
  background: linear-gradient( 135deg, #5865f2, #7c5cff );
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(88, 101, 242, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#open-pack-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(88, 101, 242, 0.4);
}
#open-pack-button:active {
  transform: translateY(1px);
}
#open-pack-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* =========================================================
PACK / CARD GRID
========================================================= */
.pack-section {
  width: 100%;
  min-height: calc(100vh - 70px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.cards-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(240px, 280px) );
  justify-content: center;
  gap: 30px;
}
/* =========================================================
BASE CARD
========================================================= */
.card {
  --rarity-color: #737985;
  --rarity-color-2: #a0a6b2;
  --rarity-glow: rgba(115, 121, 133, 0.2);
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: linear-gradient( 145deg, #202633, #10131a );
  border: 2px solid var(--rarity-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 20px var(--rarity-glow);
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, filter 0.3s ease;
  isolation: isolate;
  animation: cardAppear 0.55s cubic-bezier(.2,.8,.2,1) both;
}
.card:hover {
  transform: translateY(-12px);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65), 0 0 35px var(--rarity-glow);
}
/* =========================================================
CARD SHINE
========================================================= */
.card::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: -100%;
  left: -150%;
  width: 60%;
  height: 300%;
  pointer-events: none;
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.12), rgba(255,255,255,0.45), rgba(255,255,255,0.12), transparent );
  transform: rotate(25deg);
  animation: cardShine 5s ease-in-out infinite;
}
@keyframes cardShine {
  0% {
    left: -150%;
  }
  35% {
    left: 180%;
  }
  100% {
    left: 180%;
  }
}
/* =========================================================
CARD IMAGE
========================================================= */
.card > img {
  display: block;
  width: 100%;
  height: 68%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  flex-shrink: 0;
  background: #080a0f;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
}
.card:hover > img {
  filter: saturate(1.08) contrast(1.03);
}
/* =========================================================
CARD INFO
========================================================= */
.card-info {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient( to bottom, rgba(24, 28, 37, 0.97), rgba(10, 12, 17, 0.99) );
}
.card-info h3 {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.card-info p {
  margin-top: 4px;
  color: #9da3b0;
  font-size: 13px;
  line-height: 1.4;
}
/* =========================================================
RARITIES - MAIN CARDS
========================================================= */
.card.rarity-common {
  --rarity-color: #747b87;
  --rarity-color-2: #aeb4be;
  --rarity-glow: rgba(130, 140, 155, 0.16);
}
.card.rarity-uncommon {
  --rarity-color: #42d77d;
  --rarity-color-2: #8affb0;
  --rarity-glow: rgba(66, 215, 125, 0.28);
}
.card.rarity-rare {
  --rarity-color: #3d8cff;
  --rarity-color-2: #79b7ff;
  --rarity-glow: rgba(61, 140, 255, 0.35);
}
.card.rarity-epic {
  --rarity-color: #a855f7;
  --rarity-color-2: #e0a7ff;
  --rarity-glow: rgba(168, 85, 247, 0.42);
}
.card.rarity-legendary {
  --rarity-color: #ffae22;
  --rarity-color-2: #ffe08a;
  --rarity-glow: rgba(255, 174, 34, 0.5);
  background: linear-gradient( 145deg, #35250d, #15120b );
}
.card.rarity-mythic {
  --rarity-color: #ff3b81;
  --rarity-color-2: #ff9ac2;
  --rarity-glow: rgba(255, 59, 129, 0.55);
  background: linear-gradient( 145deg, #30101f, #120b12 );
}
.card.rarity-transcendent {
  --rarity-color: #d946ef;
  --rarity-color-2: #67e8f9;
  --rarity-glow: rgba(217, 70, 239, 0.6);
  background: linear-gradient( 135deg, #180d25, #09151d, #1b0920 );
  background-size: 200% 200%;
}
.card.rarity-divine {
  --rarity-color: #fff2a8;
  --rarity-color-2: #ffffff;
  --rarity-glow: rgba(255, 236, 130, 0.7);
  background: linear-gradient( 135deg, #30260b, #11100a, #3a2a08 );
  background-size: 200% 200%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 25px rgba(255, 236, 130, 0.35);
}
/* =========================================================
RARITY EFFECTS
========================================================= */
.card.rarity-uncommon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient( circle at 50% 0%, rgba(66, 215, 125, 0.18), transparent 48% );
  animation: uncommonGlow 3s ease-in-out infinite;
}
@keyframes uncommonGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.card.rarity-rare::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(61, 140, 255, 0.25), inset 0 0 15px rgba(61, 140, 255, 0.08);
  animation: rareGlow 3s ease-in-out infinite;
}
@keyframes rareGlow {
  0%, 100% {
    opacity: 0.55;
    box-shadow: 0 0 18px rgba(61, 140, 255, 0.25), inset 0 0 15px rgba(61, 140, 255, 0.08);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 35px rgba(61, 140, 255, 0.55), inset 0 0 25px rgba(61, 140, 255, 0.15);
  }
}
.card.rarity-epic::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  background: conic-gradient( from 0deg, transparent, rgba(168, 85, 247, 0.24), transparent, rgba(76, 201, 240, 0.20), transparent );
  opacity: 0.7;
  animation: epicRotate 7s linear infinite;
}
@keyframes epicRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.card.rarity-legendary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient( 120deg, transparent 20%, rgba(255, 220, 100, 0.22), transparent 45% );
  background-size: 250% 250%;
  animation: legendaryShine 3s linear infinite;
}
@keyframes legendaryShine {
  0% {
    background-position: 200% 200%;
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position: -50% -50%;
    opacity: 0.3;
  }
}
.card.rarity-mythic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient( 125deg, transparent 0%, rgba(255, 0, 110, 0.12) 20%, rgba(0, 200, 255, 0.15) 40%, rgba(255, 230, 0, 0.12) 60%, rgba(150, 0, 255, 0.14) 80%, transparent 100% );
  background-size: 300% 300%;
  mix-blend-mode: screen;
  animation: mythicHolographic 4s ease infinite;
}
@keyframes mythicHolographic {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
    opacity: 0.45;
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(45deg);
    opacity: 0.8;
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
    opacity: 0.45;
  }
}
.card.rarity-transcendent::after {
  content: "";
  position: absolute;
  inset: -15px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient( from 0deg, #ff0080, #7928ca, #00d4ff, #00ff9d, #ffe600, #ff0080 );
  opacity: 0.2;
  filter: blur(14px);
  animation: transcendentSpin 5s linear infinite;
}
@keyframes transcendentSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.card.rarity-divine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(255,236,130,0.35) 45%, transparent 60% );
  background-size: 250% 250%;
  animation: divineShine 2.5s linear infinite;
}
@keyframes divineShine {
  0% {
    background-position: 200% 200%;
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -50% -50%;
    opacity: 0.35;
  }
}
.card.rarity-divine:hover {
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65), 0 0 55px rgba(255, 236, 130, 0.75);
}
/* =========================================================
RARITY LABEL COLORS - MAIN CARDS
========================================================= */
.card.rarity-common .card-info p:first-of-type {
  color: #9da3b0;
}
.card.rarity-uncommon .card-info p:first-of-type {
  color: #42d77d;
}
.card.rarity-rare .card-info p:first-of-type {
  color: #5fa3ff;
}
.card.rarity-epic .card-info p:first-of-type {
  color: #c084fc;
}
.card.rarity-legendary .card-info p:first-of-type {
  color: #ffc247;
}
.card.rarity-mythic .card-info p:first-of-type {
  color: #ff6b9d;
}
.card.rarity-transcendent .card-info p:first-of-type {
  color: #67e8f9;
}
.card.rarity-divine .card-info p:first-of-type {
  color: #fff2a8;
}
/* =========================================================
CARD ENTRANCE ANIMATION
========================================================= */
.cards-container .card:nth-child(1) {
  animation-delay: 0.05s;
}
.cards-container .card:nth-child(2) {
  animation-delay: 0.15s;
}
.cards-container .card:nth-child(3) {
  animation-delay: 0.25s;
}
.cards-container .card:nth-child(4) {
  animation-delay: 0.35s;
}
.cards-container .card:nth-child(5) {
  animation-delay: 0.45s;
}
.cards-container .card:nth-child(6) {
  animation-delay: 0.55s;
}
@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotateX(8deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
  }
}
/* =========================================================
BOOSTER VIEW
========================================================= */
.booster-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
body.booster-active .hero {
  display: none;
}
body.booster-active .pack-section {
  min-height: calc(100vh - 70px);
}
.booster-progress {
  color: #8f96a3;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.booster-progress span {
  color: #ffffff;
}
.booster-card-slot {
  animation: boosterReveal 0.55s ease-out both;
}
@keyframes boosterReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: brightness(1.5);
  }
  60% {
    opacity: 1;
    filter: brightness(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1);
  }
}
.booster-card-slot .card {
  animation: boosterCardReveal 0.45s ease-out both;
}
@keyframes boosterCardReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =========================================================
BOOSTER CONTROLS
========================================================= */
.booster-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.booster-button {
  margin-top: 20px ;
  min-width: 140px;
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient( 135deg, #ff36c6, #f36fcb );
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(88, 101, 242, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.booster-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(88, 101, 242, 0.4);
}
.booster-button:active {
  transform: translateY(0);
}
.booster-button.collect {
  background: linear-gradient( 135deg, #eab308, #f97316 );
  box-shadow: 0 10px 30px rgba(234, 179, 8, 0.25);
}
.booster-button.collect:hover {
  box-shadow: 0 15px 40px rgba(234, 179, 8, 0.4);
}
/* =========================================================
PACK COMPLETE
========================================================= */
.booster-complete {
  text-align: center;
  color: #ffd86b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  animation: completeAppear 0.4s ease both;
}
@keyframes completeAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
AUTH PAGE
========================================================= */
.auth-page {
  height: 100vh;
  display: grid;
  place-items: center;
  justify-content: center;
  background: #08080c;
  color: white;
}
.auth-container {
  width: min(400px, 90vw);
  padding: 40px;
  background: #111118;
  border: 1px solid #292936;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.auth-container h1 {
  margin-bottom: 15px;
  font-size: 30px;
}
.auth-container h2 {
  margin-bottom: 30px;
}
.auth-container form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-container input {
  padding: 14px 16px;
  border: 1px solid #333340;
  border-radius: 8px;
  background: #09090d;
  color: white;
  font-size: 16px;
  outline: none;
}
.auth-container input:focus {
  border-color: #7777ff;
}
.auth-container form button {
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: #635bff;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.auth-switch {
  margin-top: 20px;
  border: none;
  background: none;
  color: #9999ff;
  cursor: pointer;
}
.auth-message {
  min-height: 24px;
  margin-top: 20px;
}
/* =========================================================
COLLECTION PAGE
========================================================= */
.collection-page {
  width: min(1500px, 94vw);
  margin: 0 auto;
  padding: 90px 0 60px;
  min-height: calc(100vh - 80px);
  height: auto;
  overflow: visible;
}
.collection-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #252530;
}
.collection-header h1 {
  margin: 0;
  font-size: clamp( 28px, 4vw, 44px );
  font-weight: 900;
  letter-spacing: -1.5px;
}
.collection-header p {
  margin: 0;
  color: #777789;
  font-size: 14px;
  text-align: right;
}
/* =========================================================
COLLECTION CONTROLS
========================================================= */
.collection-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
#collection-search, #rarity-filter, #collection-sort {
  accent-color: #ff4d94;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #292936;
  background: #111119;
  color: white;
  outline: none;
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#collection-search {
  flex: 1;
  min-width: 220px;
  padding: 0 16px;
}

#collection-search::placeholder {
  color: #666675;
}
#collection-search:focus, #rarity-filter:focus, #collection-sort:focus {
  border-color: #635bff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
#rarity-filter option, #collection-sort option {
  background: #111119;
  color: white;
}
/* =========================================================
COLLECTION GRID
========================================================= */
.collection-container {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
  gap: 18px;
  align-items: start;
  max-height: none;
  overflow: visible;
}
/* =========================================================
COLLECTION CARD
========================================================= */
.collection-card {
  --collection-rarity-color: #3b3b44;
  --collection-rarity-glow: rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 16px;
  background: linear-gradient( 145deg, #191923, #0d0d12 );
  border: 1px solid var(--collection-rarity-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 18px var(--collection-rarity-glow);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.collection-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 25px var(--collection-rarity-glow);
}
/* =========================================================
COLLECTION CARD IMAGE
========================================================= */
.collection-card-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #08080c;
}
.collection-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
  transition: transform 0.3s ease;
}
.collection-card:hover .collection-card-image img {
  transform: scale(1.03);
}
/* =========================================================
COLLECTION CARD INFO
========================================================= */
.collection-card-info {
  position: relative;
  padding: 12px;
}
.collection-card-info h2 {
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collection-rarity {
  color: #aaa;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.collection-stats {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  color: #aaa;
  font-size: 11px;
}
/* =========================================================
COLLECTION QUANTITY
========================================================= */
.collection-quantity {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* =========================================================
COLLECTION RARITY COLORS
========================================================= */
.collection-card.rarity-common {
  --collection-rarity-color: #747b87;
  --collection-rarity-glow: rgba(130, 140, 155, 0.16);
}
.collection-card.rarity-uncommon {
  --collection-rarity-color: #42d77d;
  --collection-rarity-glow: rgba(66, 215, 125, 0.28);
}
.collection-card.rarity-rare {
  --collection-rarity-color: #3d8cff;
  --collection-rarity-glow: rgba(61, 140, 255, 0.35);
}
.collection-card.rarity-epic {
  --collection-rarity-color: #a855f7;
  --collection-rarity-glow: rgba(168, 85, 247, 0.42);
}
.collection-card.rarity-legendary {
  --collection-rarity-color: #ffae22;
  --collection-rarity-glow: rgba(255, 174, 34, 0.5);
}
.collection-card.rarity-mythic {
  --collection-rarity-color: #ff3b81;
  --collection-rarity-glow: rgba(255, 59, 129, 0.55);
}
.collection-card.rarity-transcendent {
  --collection-rarity-color: #d946ef;
  --collection-rarity-glow: rgba(217, 70, 239, 0.6);
}
.collection-card.rarity-divine {
  --collection-rarity-color: #fff2a8;
  --collection-rarity-glow: rgba(255, 236, 130, 0.7);
}
.collection-card.rarity-common .collection-rarity {
  color: #9da3b0;
}
.collection-card.rarity-uncommon .collection-rarity {
  color: #42d77d;
}
.collection-card.rarity-rare .collection-rarity {
  color: #5fa3ff;
}
.collection-card.rarity-epic .collection-rarity {
  color: #c084fc;
}
.collection-card.rarity-legendary .collection-rarity {
  color: #ffc247;
}
.collection-card.rarity-mythic .collection-rarity {
  color: #ff6b9d;
}
.collection-card.rarity-transcendent .collection-rarity {
  color: #67e8f9;
}
.collection-card.rarity-divine .collection-rarity {
  color: #fff2a8;
}
/* =========================================================
EMPTY COLLECTION
========================================================= */
.empty-collection {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: #999;
}
.empty-collection h2 {
  margin-bottom: 10px;
  color: white;
}
.empty-collection a {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 8px;
  background: #635bff;
  color: white;
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.empty-collection a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 91, 255, 0.35);
}
/* =========================================================
COLLECTION ERROR
========================================================= */
.collection-error {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: #ff6b6b;
}
/* =========================================================
CARD DETAIL MODAL
========================================================= */
.card-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease, visibility 0s linear 0.1s;
}
.card-modal.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.1s ease, visibility 0s linear 0s;
}
/* =========================================================
MODAL BACKDROP
========================================================= */
.card-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
/* =========================================================
MODAL CONTENT
========================================================= */
.card-modal-content {
  --detail-rarity-color: #747b87;
  --detail-rarity-glow: rgba(130, 140, 155, 0.22);
  position: relative;
  z-index: 2;
  width: min(900px, 94vw);
  max-height: min(90vh, calc(100dvh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px;
  border-radius: 22px;
  background: linear-gradient( 145deg, #1a1a24, #0d0d12 );
  border: 2px solid var(--detail-rarity-color);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 35px var(--detail-rarity-glow), inset 0 0 25px var(--detail-rarity-glow);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-modal.active .card-modal-content {
  transform: translateY(0) scale(1);
}
/* =========================================================
MODAL RARITY COLORS
========================================================= */
.card-modal-content.rarity-common {
  --detail-rarity-color: #9da3b0;
  --detail-rarity-glow: rgba(157, 163, 176, 0.25);
}
.card-modal-content.rarity-uncommon {
  --detail-rarity-color: #42d77d;
  --detail-rarity-glow: rgba(66, 215, 125, 0.38);
}
.card-modal-content.rarity-rare {
  --detail-rarity-color: #3d8cff;
  --detail-rarity-glow: rgba(61, 140, 255, 0.42);
}
.card-modal-content.rarity-epic {
  --detail-rarity-color: #c084fc;
  --detail-rarity-glow: rgba(168, 85, 247, 0.48);
}
.card-modal-content.rarity-legendary {
  --detail-rarity-color: #ffc247;
  --detail-rarity-glow: rgba(255, 174, 34, 0.52);
}
.card-modal-content.rarity-mythic {
  --detail-rarity-color: #ff6b9d;
  --detail-rarity-glow: rgba(255, 59, 129, 0.55);
}
.card-modal-content.rarity-transcendent {
  --detail-rarity-color: #67e8f9;
  --detail-rarity-glow: rgba(217, 70, 239, 0.6);
}
.card-modal-content.rarity-divine {
  --detail-rarity-color: #fff2a8;
  --detail-rarity-glow: rgba(255, 236, 130, 0.7);
}
/* =========================================================
MODAL CLOSE BUTTON
========================================================= */
.card-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #444452;
  border-radius: 50%;
  background: rgba(20, 20, 28, 0.95);
  color: #aaa;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.card-modal-close:hover {
  color: white;
  background: #292934;
  border-color: #666678;
  transform: rotate(90deg);
}
.card-modal-close:active {
  transform: rotate(90deg) scale(0.92);
}
/* =========================================================
CARD DETAIL
========================================================= */
.card-detail {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.card-detail-image {
  width: 100%;
  max-height: 75vh;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--detail-rarity-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px var(--detail-rarity-glow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-detail-image img {
  width: 100%;
  max-height: 75vh;
  display: block;
  object-fit: contain;
}
/* =========================================================
DETAIL INFO
========================================================= */
.card-detail-info {
  min-width: 0;
}
.card-detail-info h2 {
  margin: 8px 0 20px;
  font-size: clamp( 28px, 4vw, 48px );
  line-height: 1.05;
}
.card-detail-rarity {
  color: var(--detail-rarity-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 0 15px var(--detail-rarity-glow);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.card-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.card-detail-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border-radius: 12px;
  background: #15151d;
  border: 1px solid #292934;
}
.card-detail-stats span {
  margin-bottom: 5px;
  font-size: 18px;
}
.card-detail-stats strong {
  font-size: 20px;
}
.card-detail-stats small {
  margin-top: 3px;
  color: #777;
  font-size: 9px;
  letter-spacing: 1px;
}
.card-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 25px;
}
.card-detail-quantity {
  padding: 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #999;
  border-left: 3px solid var(--detail-rarity-color);
  box-shadow: 0 0 15px var(--detail-rarity-glow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-detail-quantity strong {
  margin-left: 8px;
  color: var(--detail-rarity-color);
  font-size: 20px;
  text-shadow: 0 0 12px var(--detail-rarity-glow);
}
/* =========================================================
MODAL SCROLL LOCK
========================================================= */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}
/* =========================================================
GENERAL PAGE SCROLLING
========================================================= */
body {
  overflow-x: hidden;
}
html:has(.collection-page), body:has(.collection-page) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
/* =========================================================
NO CARDS / ERROR
========================================================= */
.no-cards, .error-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
}
.no-cards {
  color: #737b89;
}
.error-message {
  color: #ff6b6b;
}
/* =========================================================
RESPONSIVE - 700px
========================================================= */
@media (max-width: 700px) {
  .site-header {
    padding: 0 20px;
  }
  .hero {
    padding-top: 45px;
  }
  .hero h1 {
    font-size: 36px;
  }
  .pack-section {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cards-container {
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap: 15px;
  }
  .card {
    max-width: none;
    border-radius: 14px;
  }
  .card-info {
    padding: 10px;
  }
  .card-info h3 {
    font-size: 14px;
  }
  .card-info p {
    font-size: 11px;
  }
  /* Modal */
  .card-modal {
    padding: 15px;
  }
  .card-modal-content {
    width: 94vw;
    max-height: calc(100dvh - 30px);
    padding: 20px;
    overflow-y: auto;
  }
  .card-detail {
    grid-template-columns: 1fr;
    gap: 20px;
    max-height: none;
    overflow: visible;
  }
  .card-detail-image {
    width: min(55vw, 260px);
    max-height: 35dvh;
    margin: 0 auto;
  }
  .card-detail-image img {
    max-height: 35dvh;
  }
  .card-detail-info h2 {
    font-size: 30px;
    margin-bottom: 12px;
  }
  .card-modal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    margin-bottom: -42px;
  }
  .card-detail-tags { overflow-wrap: anywhere; }
  .card-detail-stats {
    margin-bottom: 14px;
  }
  .card-detail-tags {
    margin-bottom: 14px;
  }
}
/* =========================================================
RESPONSIVE - 650px
========================================================= */
@media (max-width: 650px) {
  .header-info {
    gap: 6px;
  }
  .header-info a, .header-info button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
  }
  #username-display {
    display: none;
  }
}
/* =========================================================
RESPONSIVE - 600px
========================================================= */
@media (max-width: 600px) {
  .collection-page {
    width: 94vw;
    padding: 70px 0 40px;
  }
  .collection-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .collection-header p {
    text-align: left;
  }
  .collection-container {
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap: 12px;
  }
  .collection-card-info {
    padding: 10px;
  }
  .collection-card-info h2 {
    font-size: 13px;
  }
  .collection-rarity {
    font-size: 9px;
  }
  .collection-stats {
    gap: 7px;
    font-size: 10px;
  }
  .collection-quantity {
    top: 7px;
    right: 7px;
    min-width: 27px;
    height: 27px;
    font-size: 11px;
  }
  .collection-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #collection-search {
    grid-column: 1 / -1;
    width: 100%;
  }
  #rarity-filter, #collection-sort {
    width: 100%;
  }
}
/* =========================================================
RESPONSIVE - 420px
========================================================= */
@media (max-width: 420px) {
  .cards-container {
    grid-template-columns: 1fr;
  }
  .card {
    width: 280px;
    justify-self: center;
  }
}
/* =========================================================
REDUCE MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================
MODAL OUTER BORDER — RARITY COLORS
============================================ */
.card-modal-content.rarity-common {
  border-color: #747b87;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 25px rgba(130, 140, 155, 0.25);
}
.card-modal-content.rarity-uncommon {
  border-color: #42d77d;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 30px rgba(66, 215, 125, 0.35);
}
.card-modal-content.rarity-rare {
  border-color: #3d8cff;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 35px rgba(61, 140, 255, 0.45);
}
.card-modal-content.rarity-epic {
  border-color: #a855f7;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 40px rgba(168, 85, 247, 0.5);
}
.card-modal-content.rarity-legendary {
  border-color: #ffae22;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 45px rgba(255, 174, 34, 0.55);
}
.card-modal-content.rarity-mythic {
  border-color: #ff3b81;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 50px rgba(255, 59, 129, 0.55);
}
.card-modal-content.rarity-transcendent {
  border-color: #67e8f9;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 50px rgba(103, 232, 249, 0.55);
}
.card-modal-content.rarity-divine {
  border-color: #fff2a8;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 236, 130, 0.65);
}
/* =========================================================
PROFILE PAGE
========================================================= */
.profile-page {
  width: min(1100px, 94vw);
  margin: 0 auto;
  padding: 80px 0 70px;
  min-height: calc(100vh - 70px);
}
/* =========================================================
PROFILE HEADER
========================================================= */
.profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #252530;
}
.profile-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #635bff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}
.profile-header h1 {
  margin: 0;
  font-size: clamp( 38px, 6vw, 64px );
  line-height: 1;
  font-weight: 900;
  background: linear-gradient( 90deg, #ffffff, #aeb8ff, #ffffff );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 5s linear infinite;
}
.profile-header p {
  margin-top: 12px;
  color: #777789;
  font-size: 15px;
}
.profile-member {
  min-width: 190px;
  padding: 16px 20px;
  border: 1px solid #292936;
  border-radius: 12px;
  background: linear-gradient( 145deg, #181820, #101016 );
  text-align: right;
}
.profile-member span {
  display: block;
  margin-bottom: 6px;
  color: #666675;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.profile-member strong {
  color: #dcdce8;
  font-size: 13px;
}
/* =========================================================
PROFILE STATISTICS
========================================================= */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.profile-stat {
  min-height: 130px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #292936;
  border-radius: 14px;
  background: linear-gradient( 145deg, #191922, #0f0f15 );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-stat:hover {
  transform: translateY(-3px);
  border-color: #3d3d50;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.profile-stats-compact .profile-stat {
  min-height: 0;
  padding: 18px 22px;
  justify-content: flex-start;
  gap: 12px;
}
.profile-stat-label {
  color: #686878;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.profile-stat strong {
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
}
/* =========================================================
PROFILE PANELS
========================================================= */
.profile-panel {
  margin-top: 20px;
  padding: 26px;
  border: 1px solid #292936;
  border-radius: 16px;
  background: linear-gradient( 145deg, #17171f, #0d0d12 );
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
}
.profile-panel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.profile-panel-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
}
.profile-panel-header > strong {
  color: #8f96ff;
  font-size: 24px;
  font-weight: 900;
}
/* =========================================================
RARITY BREAKDOWN
========================================================= */
.rarity-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rarity-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  align-items: center;
  gap: 15px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #252530;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  transition: background 0.2s ease, transform 0.2s ease;
}
.rarity-row:hover {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.035);
}
.rarity-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dcdce8;
  font-size: 13px;
  font-weight: 800;
}
.rarity-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--profile-rarity-color);
  box-shadow: 0 0 10px var(--profile-rarity-glow);
}
.rarity-row-count {
  text-align: right;
}
.rarity-row-count strong {
  color: var(--profile-rarity-color);
  font-size: 14px;
}
.rarity-row-count span {
  margin-left: 4px;
  color: #666675;
  font-size: 10px;
}
.rarity-row-total {
  color: #777789;
  font-size: 11px;
  text-align: right;
}
/* =========================================================
PROFILE RARITY COLORS
========================================================= */
.rarity-row.rarity-common, .rarity-value.rarity-common {
  --profile-rarity-color: #9da3b0;
  --profile-rarity-glow: rgba(157, 163, 176, 0.3);
}
.rarity-row.rarity-uncommon, .rarity-value.rarity-uncommon {
  --profile-rarity-color: #42d77d;
  --profile-rarity-glow: rgba(66, 215, 125, 0.4);
}
.rarity-row.rarity-rare, .rarity-value.rarity-rare {
  --profile-rarity-color: #5fa3ff;
  --profile-rarity-glow: rgba(61, 140, 255, 0.45);
}
.rarity-row.rarity-epic, .rarity-value.rarity-epic {
  --profile-rarity-color: #c084fc;
  --profile-rarity-glow: rgba(168, 85, 247, 0.5);
}
.rarity-row.rarity-legendary, .rarity-value.rarity-legendary {
  --profile-rarity-color: #ffc247;
  --profile-rarity-glow: rgba(255, 174, 34, 0.55);
}
.rarity-row.rarity-mythic, .rarity-value.rarity-mythic {
  --profile-rarity-color: #ff6b9d;
  --profile-rarity-glow: rgba(255, 59, 129, 0.55);
}
.rarity-row.rarity-transcendent, .rarity-value.rarity-transcendent {
  --profile-rarity-color: #67e8f9;
  --profile-rarity-glow: rgba(217, 70, 239, 0.6);
}
.rarity-row.rarity-divine, .rarity-value.rarity-divine {
  --profile-rarity-color: #fff2a8;
  --profile-rarity-glow: rgba(255, 236, 130, 0.7);
}
.rarity-value {
  color: var(--profile-rarity-color) !important;
  text-shadow: 0 0 15px var(--profile-rarity-glow);
}
/* =========================================================
PROFILE ACTIONS
========================================================= */
.profile-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
}
.profile-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: linear-gradient( 135deg, #5865f2, #7c5cff );
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 10px 25px rgba(88, 101, 242, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(88, 101, 242, 0.35);
}
.profile-action-button.secondary {
  background: linear-gradient( 145deg, #1b1b25, #111117 );
  border: 1px solid #30303d;
  color: #dcdce8;
  box-shadow: none;
}
.profile-action-button.secondary:hover {
  border-color: #55556d;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* =========================================================
PROFILE ERROR / LOADING
========================================================= */
.profile-loading {
  padding: 30px;
  color: #666675;
  text-align: center;
  font-size: 13px;
}
.profile-error {
  margin-top: 20px;
  color: #ff6b6b;
  text-align: center;
  font-size: 13px;
}
/* =========================================================
PROFILE RESPONSIVE
========================================================= */
@media (max-width: 800px) {
  .profile-page {
    padding: 55px 0 50px;
  }
  .profile-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-member {
    width: 100%;
    text-align: left;
  }
  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .profile-page {
    width: 92vw;
  }
  .profile-header h1 {
    font-size: 42px;
  }
  .profile-panel {
    padding: 18px;
  }
  .profile-panel-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .rarity-row {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 10px 12px;
  }
  .rarity-row-total {
    grid-column: 2;
    text-align: right;
  }
  .profile-actions {
    flex-direction: column;
  }
  .profile-action-button {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .profile-stats {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
THREE PACK SELECTOR
========================================================= */
.pack-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min( 1100px, calc(100% - 40px) );
  margin: 40px auto 0;
}
/* =========================================================
INDIVIDUAL PACK
========================================================= */
.pack-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px;
  height: 330px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient( 145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) );
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* =========================================================
BOOSTER IDENTITIES
========================================================= */
.pack-option:nth-child(1) {
  --pack-color: #5fa3ff;
  --pack-glow: rgba(61, 140, 255, 0.28);
  --pack-color-soft: rgba(61, 140, 255, 0.10);
  border-color: rgba(61, 140, 255, 0.28);
  background: radial-gradient( circle at 50% 0%, rgba(61, 140, 255, 0.12), transparent 55% ), linear-gradient( 145deg, #171d2b, #0d0f16 );
}
.pack-option:nth-child(2) {
  --pack-color: #c084fc;
  --pack-glow: rgba(168, 85, 247, 0.35);
  --pack-color-soft: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.32);
  background: radial-gradient( circle at 50% 0%, rgba(168, 85, 247, 0.14), transparent 55% ), linear-gradient( 145deg, #21182d, #100d16 );
}
.pack-option:nth-child(3) {
  --pack-color: #ffc247;
  --pack-glow: rgba(255, 174, 34, 0.38);
  --pack-color-soft: rgba(255, 174, 34, 0.13);
  border-color: rgba(255, 174, 34, 0.35);
  background: radial-gradient( circle at 50% 0%, rgba(255, 174, 34, 0.16), transparent 55% ), linear-gradient( 145deg, #2a2112, #120f0a );
}
/* =========================================================
BOOSTER HOVER
========================================================= */
.pack-option:nth-child(1):hover {
  border-color: rgba(61, 140, 255, 0.65);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(61, 140, 255, 0.18);
}
.pack-option:nth-child(2):hover {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 35px rgba(168, 85, 247, 0.22);
}
.pack-option:nth-child(3):hover {
  border-color: rgba(255, 174, 34, 0.7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 174, 34, 0.24);
}
/* =========================================================
BOOSTER TITLES
========================================================= */
.pack-option h2 {
  color: var(--pack-color);
  text-shadow: 0 0 18px var(--pack-glow);
}
/* =========================================================
BOOSTER QUANTITY
========================================================= */
.pack-option .pack-quantity {
  color: #ffffff;
  text-shadow: 0 0 15px var(--pack-glow);
}
/* =========================================================
BOOSTER COOLDOWN
========================================================= */
.pack-option .pack-cooldown {
  color: var(--pack-color);
  text-shadow: 0 0 10px var(--pack-glow);
}
/* =========================================================
BOOSTER BUTTON
========================================================= */
.pack-option .pack-open-button {
  background: linear-gradient( 135deg, color-mix(in srgb, var(--pack-color) 85%, white), var(--pack-color) );
  box-shadow: 0 10px 25px var(--pack-glow);
}
.pack-option .pack-open-button:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: 0 14px 35px var(--pack-glow);
}
/* =========================================================
BOOSTER TOP GLOW
========================================================= */
/* =========================================================
BOOSTER INNER GLOW
========================================================= */
.pack-option {
  overflow: hidden;
}
.pack-option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: radial-gradient( ellipse at center top, var(--pack-glow), transparent 70% );
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.pack-option:hover::before {
  opacity: 0.9;
}
/* Hover effect */
.pack-option:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
/* =========================================================
PACK TITLE
========================================================= */
.pack-option h2 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}
/* =========================================================
PACK DESCRIPTION
========================================================= */
.pack-option p {
  margin: 0 0 20px;
  opacity: 0.7;
  font-size: 14px;
}
/* =========================================================
QUANTITY
========================================================= */
.pack-quantity {
  margin-top: auto;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  order: 4;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
}
/* =========================================================
COOLDOWN
========================================================= */
.pack-cooldown {
  margin-top: auto;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  order: 4;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
}
/* =========================================================
PACK BUTTON
========================================================= */
.pack-open-button {
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient( 135deg, #5865f2, #7c4dff );
  color: white;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
  order: 7;
}
.pack-open-button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.pack-open-button:active:not(:disabled) {
  transform: translateY(0);
}
.pack-open-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.custom-tag-input:focus {
  border-color: #7c4dff;
  box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.15);
}
.custom-tag-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
/* =========================================================
CUSTOM PACK ERROR
========================================================= */
.pack-error {
  height: 20px;
  min-height: 20px;
  width: 100%;
  margin: 0 0 10px;
  color: #ff6b6b;
  font-size: 13px;
  flex-shrink: 0;
  order: 6;
}
/*
Keep the same error-slot height on the two standard packs.
*/
.pack-option:not(:has(.pack-error))::after {
  content: "";
  width: 100%;
  height: 20px;
  margin: 0 0 10px;
  flex-shrink: 0;
  order: 6;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 850px) {
  .pack-buttons {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  .pack-option {
    min-height: 280px;
  }
}
/* =========================================================
LOST-TCG BOOSTER FLIP — isolated from collection card styles
The inner element rotates; front and back are separate faces.
========================================================= */
.booster-card-slot .booster-flip-card {
  --booster-flip-duration: 520ms;
  --booster-flip-delay: 180ms;
  width: min(280px, 78vw);
  max-width: 280px;
  padding: 0;
  display: block;
  overflow: visible;
  aspect-ratio: 2 / 3;
  border-width: 2px;
  background: transparent;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 20px var(--rarity-glow);
  perspective: 1200px;
  transform: none;
  transition: box-shadow .25s ease;
  animation: boosterCardEntrance .32s ease-out both;
}
.booster-card-slot .booster-flip-card:hover {
  transform: none;
}
.booster-card-slot .booster-flip-card::before, .booster-card-slot .booster-flip-card::after {
  content: none !important;
  display: none !important;
}
.booster-flip-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform var(--booster-flip-duration) cubic-bezier(.18,.78,.18,1);
  border-radius: inherit;
}
.booster-is-flipped .booster-flip-inner {
  transform: rotateY(180deg);
}
.booster-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
  border: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.booster-card-back {
  display: grid;
  place-items: center;
  transform: rotateY(0deg);
  background: radial-gradient(ellipse at 50% 44%, #36102e 0%, #130b19 48%, #07080d 100%);
  box-shadow: inset 0 0 35px rgba(255,35,158,.2);
}
.booster-card-back::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--rarity-color-2) 75%, #ff3caa);
  border-radius: 9px;
  pointer-events: none;
}
.booster-card-back-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booster-card-back-fallback {
  background: radial-gradient(ellipse, #3b0d35, #08080f 70%);
}
.booster-logo-fallback {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:#ff4eb8;
  text-shadow:0 0 18px #ff1493;
}
.booster-logo-fallback strong {
  font-size:42px;
  letter-spacing:.12em;
}
.booster-logo-fallback span {
  font-size:20px;
  font-weight:900;
  letter-spacing:.3em;
}
.booster-card-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #1b1c28, #08090f 75%);
  text-align: left;
}
.booster-front-art {
  position:relative;
  flex: 1 1 68%;
  min-height:0;
  overflow:hidden;
  background:#080a0f;
}
.booster-front-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.booster-art-unavailable::after {
  content:"Artwork unavailable";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#9299a8;
  font-size:13px;
}
.booster-front-info {
  position:relative;
  z-index:1;
  flex:0 0 auto;
  padding:11px 13px 12px;
  border-top:1px solid color-mix(in srgb, var(--rarity-color) 65%, transparent);
  background:linear-gradient(180deg, rgba(24,28,37,.98), rgba(10,12,17,.99));
}
.booster-front-info h3 {
  margin:0 0 6px;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.booster-front-info p {
  margin:4px 0 0;
  color:#aeb4c1;
  font-size:11px;
  line-height:1.35;
}
.booster-front-info .booster-front-rarity {
  color:var(--rarity-color-2);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.booster-card-slot .booster-flip-card.rarity-uncommon {
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 16px rgba(66,215,125,.2);
}
.booster-card-slot .booster-flip-card.rarity-rare {
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 23px rgba(61,140,255,.32);
}
.booster-card-slot .booster-flip-card.rarity-epic {
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(168,85,247,.42);
}
.booster-card-slot .booster-flip-card.rarity-legendary {
  animation:boosterCardEntrance .32s ease-out both, boosterLegendaryAura 1.25s ease-in-out .3s infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-mythic {
  animation:boosterCardEntrance .32s ease-out both, boosterMythicAura 1.1s ease-in-out .3s infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-transcendent {
  animation:boosterCardEntrance .32s ease-out both, boosterTranscendentAura 1s ease-in-out .3s infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-divine {
  animation:boosterCardEntrance .32s ease-out both, boosterDivineAura .8s ease-in-out .3s infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-legendary .booster-card-back::after, .booster-card-slot .booster-flip-card.rarity-mythic .booster-card-back::after, .booster-card-slot .booster-flip-card.rarity-transcendent .booster-card-back::after, .booster-card-slot .booster-flip-card.rarity-divine .booster-card-back::after {
  content:"";
  position:absolute;
  inset:-50%;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.45) 49%,rgba(255,255,255,.1) 52%,transparent 59%);
  transform:translateX(-65%);
  animation:boosterBackShine 1.05s ease-out .1s both;
}
.booster-card-slot .booster-flip-card.rarity-legendary .booster-card-front::after, .booster-card-slot .booster-flip-card.rarity-mythic .booster-card-front::after, .booster-card-slot .booster-flip-card.rarity-transcendent .booster-card-front::after, .booster-card-slot .booster-flip-card.rarity-divine .booster-card-front::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(125deg,transparent 25%,rgba(255,255,255,.2) 48%,transparent 62%);
  transform:translateX(-110%);
  animation:boosterFrontShine 1.15s ease-out .15s both;
}
.booster-card-slot .booster-flip-card.rarity-mythic .booster-card-front::after {
  background:linear-gradient(125deg,transparent 20%,rgba(255,50,160,.28) 40%,rgba(140,70,255,.25) 55%,transparent 72%);
}
.booster-card-slot .booster-flip-card.rarity-transcendent .booster-card-front::after {
  background:linear-gradient(125deg,transparent 20%,rgba(34,211,238,.32) 40%,rgba(140,70,255,.3) 55%,transparent 72%);
}
.booster-card-slot .booster-flip-card.rarity-divine .booster-card-front::after {
  background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.7) 42%,rgba(255,220,100,.42) 53%,transparent 72%);
}
.booster-card-slot .booster-flip-card.rarity-legendary.booster-is-flipped {
  animation:boosterLegendaryAura 1.25s ease-in-out infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-mythic.booster-is-flipped {
  animation:boosterMythicAura 1.1s ease-in-out infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-transcendent.booster-is-flipped {
  animation:boosterTranscendentAura 1s ease-in-out infinite alternate;
}
.booster-card-slot .booster-flip-card.rarity-divine.booster-is-flipped {
  animation:boosterDivineAura .8s ease-in-out infinite alternate;
}
@keyframes boosterCardEntrance {
  from {
    opacity:0;
    transform:translateY(15px) scale(.96);
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes boosterBackShine {
  to {
    transform:translateX(65%);
  }
}
@keyframes boosterFrontShine {
  to {
    transform:translateX(110%);
  }
}
@keyframes boosterLegendaryAura {
  from {
    box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 20px rgba(255,174,34,.42);
  }
  to {
    box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 38px rgba(255,174,34,.78);
  }
}
@keyframes boosterMythicAura {
  from {
    box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 24px rgba(255,59,129,.45);
  }
  to {
    box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 48px rgba(255,59,129,.85),0 0 75px rgba(147,51,234,.35);
  }
}
@keyframes boosterTranscendentAura {
  from {
    box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 28px rgba(34,211,238,.5);
  }
  to {
    box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 54px rgba(34,211,238,.9),0 0 85px rgba(109,40,217,.5);
  }
}
@keyframes boosterDivineAura {
  from {
    box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 30px rgba(255,242,168,.55);
  }
  to {
    box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 62px rgba(255,242,168,.98),0 0 100px rgba(245,158,11,.55);
  }
}
@media (max-width: 600px) {
  .booster-card-slot .booster-flip-card {
    width:min(280px,78vw);
  }
  .booster-front-info {
    padding:9px 10px;
  }
  .booster-front-info h3 {
    font-size:14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .booster-card-slot .booster-flip-card, .booster-card-slot .booster-flip-card * {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* =========================================================
BOOSTER CINEMATIC FX UPGRADE
Scoped to the booster reveal only. The rarity border is on each
rotating face (not the stationary outer wrapper), so it flips correctly.
========================================================= */
.booster-card-slot {
  position: relative;
  isolation: isolate;
}
.booster-card-slot .booster-flip-card {
  position: relative;
  z-index: 2;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  filter: drop-shadow(0 18px 25px rgba(0,0,0,.45));
}
.booster-card-slot .booster-flip-inner {
  overflow: visible;
  border-radius: 15px;
}
.booster-card-slot .booster-card-face {
  border: 2px solid var(--rarity-color-2, #ff4eb8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 22px color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 15%, transparent);
}
.booster-card-slot .booster-card-back::before {
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 90%, white);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 70%, transparent), inset 0 0 12px color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 28%, transparent);
}
.booster-card-slot .booster-card-front {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.booster-reveal-effects {
  position: absolute;
  z-index: 1;
  inset: -95px -110px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  color: var(--rarity-color-2, #ff4eb8);
  --fx-power: .12;
  --fx-speed: 1.2s;
}
.booster-reveal-active .booster-reveal-effects {
  opacity: 1;
}
.booster-fx-rays {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 7deg, color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 48%, transparent) 8deg 9deg, transparent 10deg 16deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  transform: scale(.35) rotate(-25deg);
}
.booster-reveal-active .booster-fx-rays {
  animation: boosterFxRays var(--fx-speed) linear infinite;
  opacity: var(--fx-power);
}
.booster-fx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.2);
  opacity: 0;
  box-shadow: 0 0 18px currentColor, inset 0 0 18px currentColor;
}
.booster-reveal-active .booster-fx-ring-one {
  animation: boosterFxRing .85s cubic-bezier(.1,.7,.2,1) .02s both;
}
.booster-reveal-active .booster-fx-ring-two {
  animation: boosterFxRing 1.15s cubic-bezier(.1,.7,.2,1) .18s both;
}
.booster-fx-ring-two {
  width: 58%;
  border-style: dashed;
}
.booster-fx-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.12);
  background: radial-gradient(circle, color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 42%, transparent) 0%, color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 20%, transparent) 23%, transparent 67%);
}
.booster-reveal-active .booster-fx-burst {
  animation: boosterFxBurst .72s ease-out both;
}
.booster-fx-flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%,-50%) scale(.2) rotate(0deg);
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg 18deg, color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 45%, transparent) 22deg, transparent 28deg 58deg, color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 34%, transparent) 62deg, transparent 70deg 108deg, color-mix(in srgb, var(--rarity-color-2, #ff4eb8) 42%, transparent) 112deg, transparent 120deg 360deg);
  mask-image: radial-gradient(circle, transparent 0 22%, #000 35%, transparent 68%);
}
.booster-reveal-active .booster-fx-flare {
  animation: boosterFxFlare 1s ease-out both;
}
.booster-fx-sparks {
  position: absolute;
  inset: 0;
}
.booster-fx-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 15px;
  border-radius: 100%;
  background: linear-gradient(to bottom, #fff, currentColor 55%, transparent);
  box-shadow: 0 0 9px currentColor, 0 0 18px currentColor;
  opacity: 0;
  transform: rotate(var(--spark-angle)) translateY(0) scale(.25);
  transform-origin: center;
}
.booster-reveal-active .booster-fx-sparks i {
  animation: boosterFxSpark .75s cubic-bezier(.12,.7,.2,1) var(--spark-delay) both;
}
.booster-reveal-active.booster-tier-uncommon .booster-reveal-effects {
  --fx-power: .05;
  --fx-speed: 2s;
}
.booster-reveal-active.booster-tier-rare .booster-reveal-effects {
  --fx-power: .14;
  --fx-speed: 1.8s;
}
.booster-reveal-active.booster-tier-epic .booster-reveal-effects {
  --fx-power: .25;
  --fx-speed: 1.5s;
}
.booster-reveal-active.booster-tier-legendary .booster-reveal-effects {
  --fx-power: .48;
  --fx-speed: 1.15s;
}
.booster-reveal-active.booster-tier-mythic .booster-reveal-effects {
  --fx-power: .62;
  --fx-speed: .95s;
}
.booster-reveal-active.booster-tier-transcendent .booster-reveal-effects {
  --fx-power: .78;
  --fx-speed: .8s;
}
.booster-reveal-active.booster-tier-divine .booster-reveal-effects {
  --fx-power: .95;
  --fx-speed: .65s;
}
.booster-reveal-active.booster-tier-rare .booster-fx-ring-one {
  animation-duration: .95s;
}
.booster-reveal-active.booster-tier-epic .booster-fx-ring-one, .booster-reveal-active.booster-tier-legendary .booster-fx-ring-one {
  animation-duration: .9s;
}
.booster-reveal-active.booster-tier-legendary .booster-fx-burst, .booster-reveal-active.booster-tier-mythic .booster-fx-burst, .booster-reveal-active.booster-tier-transcendent .booster-fx-burst, .booster-reveal-active.booster-tier-divine .booster-fx-burst {
  animation-duration: .95s;
}
.booster-reveal-active.booster-tier-legendary .booster-fx-flare, .booster-reveal-active.booster-tier-mythic .booster-fx-flare, .booster-reveal-active.booster-tier-transcendent .booster-fx-flare, .booster-reveal-active.booster-tier-divine .booster-fx-flare {
  animation-duration: 1.2s;
}
.booster-reveal-active.booster-tier-legendary .booster-flip-card {
  animation: boosterLegendaryAura 1s ease-in-out .25s infinite alternate, boosterLegendaryImpact .4s ease-out .05s both;
}
.booster-reveal-active.booster-tier-mythic .booster-flip-card {
  animation: boosterMythicAura .9s ease-in-out .2s infinite alternate, boosterMythicImpact .5s ease-out .05s both;
}
.booster-reveal-active.booster-tier-transcendent .booster-flip-card {
  animation: boosterTranscendentAura .8s ease-in-out .2s infinite alternate, boosterTranscendentImpact .6s ease-out .05s both;
}
.booster-reveal-active.booster-tier-divine .booster-flip-card {
  animation: boosterDivineAura .7s ease-in-out .2s infinite alternate, boosterDivineImpact .72s ease-out .05s both;
}
.booster-reveal-active.booster-tier-mythic .booster-card-front {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 38px rgba(255,59,129,.24);
}
.booster-reveal-active.booster-tier-transcendent .booster-card-front {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 42px rgba(34,211,238,.3);
}
.booster-reveal-active.booster-tier-divine .booster-card-front {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), inset 0 0 50px rgba(255,220,100,.38);
}
@keyframes boosterFxRays {
  0% {
    transform: scale(.35) rotate(0);
  }
  100% {
    transform: scale(1.12) rotate(360deg);
  }
}
@keyframes boosterFxRing {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.2);
  }
  22% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(1.8);
  }
}
@keyframes boosterFxBurst {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.12);
  }
  18% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(1.45);
  }
}
@keyframes boosterFxFlare {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.2) rotate(0);
  }
  25% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(1.1) rotate(70deg);
  }
}
@keyframes boosterFxSpark {
  0% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateY(0) scale(.25);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-distance))) scale(1.1);
  }
}
@keyframes boosterLegendaryImpact {
  0% {
    filter: brightness(1);
  }
  25% {
    filter: brightness(1.8);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes boosterMythicImpact {
  0% {
    filter: brightness(1) saturate(1);
  }
  25% {
    filter: brightness(2) saturate(1.8);
  }
  100% {
    filter: brightness(1.05) saturate(1.1);
  }
}
@keyframes boosterTranscendentImpact {
  0% {
    filter: brightness(1) hue-rotate(0deg);
  }
  20% {
    filter: brightness(2.1) hue-rotate(18deg);
  }
  100% {
    filter: brightness(1.1) hue-rotate(0deg);
  }
}
@keyframes boosterDivineImpact {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  18% {
    filter: brightness(2.25);
    transform: scale(1.045);
  }
  48% {
    filter: brightness(1.25);
    transform: scale(.99);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    filter: brightness(1.1);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .booster-reveal-effects, .booster-reveal-effects *, .booster-card-slot .booster-flip-card, .booster-card-slot .booster-flip-card * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* Rarity gating and high-tier impact override: keep Common restrained. */
.booster-card-slot.booster-tier-common .booster-reveal-effects, .booster-card-slot.booster-tier-common .booster-fx-ring, .booster-card-slot.booster-tier-common .booster-fx-burst, .booster-card-slot.booster-tier-common .booster-fx-flare, .booster-card-slot.booster-tier-common .booster-fx-sparks {
  display: none;
}
.booster-card-slot.booster-tier-uncommon .booster-fx-rays, .booster-card-slot.booster-tier-uncommon .booster-fx-ring-two, .booster-card-slot.booster-tier-uncommon .booster-fx-burst, .booster-card-slot.booster-tier-uncommon .booster-fx-flare {
  display: none;
}
.booster-card-slot.booster-tier-uncommon .booster-fx-sparks i:nth-child(n+3), .booster-card-slot.booster-tier-rare .booster-fx-sparks i:nth-child(n+7), .booster-card-slot.booster-tier-epic .booster-fx-sparks i:nth-child(n+13), .booster-card-slot.booster-tier-legendary .booster-fx-sparks i:nth-child(n+19), .booster-card-slot.booster-tier-mythic .booster-fx-sparks i:nth-child(n+23), .booster-card-slot.booster-tier-transcendent .booster-fx-sparks i:nth-child(n+27) {
  display: none;
}
.booster-card-slot.booster-tier-rare .booster-fx-flare {
  display: none;
}
.booster-card-slot.booster-tier-legendary .booster-fx-ring {
  border-width: 3px;
}
.booster-card-slot.booster-tier-mythic .booster-fx-ring, .booster-card-slot.booster-tier-transcendent .booster-fx-ring, .booster-card-slot.booster-tier-divine .booster-fx-ring {
  border-width: 3px;
}
.booster-card-slot.booster-tier-mythic .booster-fx-burst {
  background: radial-gradient(circle, rgba(255,60,170,.6), rgba(140,60,255,.25) 35%, transparent 70%);
}
.booster-card-slot.booster-tier-transcendent .booster-fx-burst {
  background: radial-gradient(circle, rgba(34,211,238,.62), rgba(124,58,237,.32) 38%, transparent 72%);
}
.booster-card-slot.booster-tier-divine .booster-fx-burst {
  background: radial-gradient(circle, rgba(255,255,235,.8), rgba(255,205,65,.5) 25%, rgba(245,158,11,.24) 48%, transparent 72%);
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-flip-card.rarity-legendary, .booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-flip-card.rarity-legendary.booster-is-flipped {
  animation: boosterLegendaryAura 1s ease-in-out .25s infinite alternate, boosterLegendaryImpact .4s ease-out .05s both;
}
.booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-flip-card.rarity-mythic, .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-flip-card.rarity-mythic.booster-is-flipped {
  animation: boosterMythicAura .9s ease-in-out .2s infinite alternate, boosterMythicImpact .5s ease-out .05s both;
}
.booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-flip-card.rarity-transcendent, .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-flip-card.rarity-transcendent.booster-is-flipped {
  animation: boosterTranscendentAura .8s ease-in-out .2s infinite alternate, boosterTranscendentImpact .6s ease-out .05s both;
}
.booster-card-slot.booster-reveal-active.booster-tier-divine .booster-flip-card.rarity-divine, .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-flip-card.rarity-divine.booster-is-flipped {
  animation: boosterDivineAura .7s ease-in-out .2s infinite alternate, boosterDivineImpact .72s ease-out .05s both;
}
/* =========================================================
BOOSTER FX RARITY ISOLATION PATCH
Transient effects are enabled only for the current card's tier,
and are removed by the reveal controller after their short burst.
========================================================= */
/* Never let rarity auras start before a card is actually revealed. */
.booster-card-slot .booster-flip-card.rarity-legendary, .booster-card-slot .booster-flip-card.rarity-mythic, .booster-card-slot .booster-flip-card.rarity-transcendent, .booster-card-slot .booster-flip-card.rarity-divine {
  animation: boosterCardEntrance .32s ease-out both !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-flip-card.rarity-legendary {
  animation: boosterLegendaryAura 1s ease-in-out .1s infinite alternate, boosterLegendaryImpact .4s ease-out both !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-flip-card.rarity-mythic {
  animation: boosterMythicAura .9s ease-in-out .1s infinite alternate, boosterMythicImpact .5s ease-out both !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-flip-card.rarity-transcendent {
  animation: boosterTranscendentAura .8s ease-in-out .1s infinite alternate, boosterTranscendentImpact .6s ease-out both !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-divine .booster-flip-card.rarity-divine {
  animation: boosterDivineAura .7s ease-in-out .1s infinite alternate, boosterDivineImpact .72s ease-out both !important;
}
/* Default to no cinematic overlay. A tier must explicitly opt in to each effect. */
.booster-card-slot .booster-reveal-effects {
  opacity: 0 !important;
}
.booster-card-slot.booster-reveal-active .booster-reveal-effects {
  opacity: 1 !important;
}
.booster-card-slot .booster-fx-rays, .booster-card-slot .booster-fx-ring, .booster-card-slot .booster-fx-burst, .booster-card-slot .booster-fx-flare, .booster-card-slot .booster-fx-sparks {
  display: none !important;
}
/* Uncommon: restrained green aura only; no rings, rays, or burst. */
.booster-card-slot.booster-reveal-active.booster-tier-uncommon .booster-reveal-effects {
  --fx-power: .035;
}
/* Rare: one brief ring and a small number of sparks. */
.booster-card-slot.booster-reveal-active.booster-tier-rare .booster-fx-ring-one {
  display: block !important;
  animation: boosterFxRing .78s cubic-bezier(.1,.7,.2,1) both;
}
.booster-card-slot.booster-reveal-active.booster-tier-rare .booster-fx-sparks {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-rare .booster-fx-sparks i:nth-child(-n+6) {
  display: block !important;
  animation: boosterFxSpark .72s cubic-bezier(.12,.7,.2,1) var(--spark-delay) both;
}
/* Epic: dual rings, rotating rays, radial burst and a controlled spark burst. */
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-rays {
  display: block !important;
  animation: boosterFxRays 1.2s ease-out both !important;
  opacity: .22 !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-ring {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-ring-one {
  animation: boosterFxRing .85s cubic-bezier(.1,.7,.2,1) both;
}
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-ring-two {
  animation: boosterFxRing 1s cubic-bezier(.1,.7,.2,1) .12s both;
}
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-burst {
  display: block !important;
  animation: boosterFxBurst .8s ease-out both;
}
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-sparks {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-epic .booster-fx-sparks i:nth-child(-n+12) {
  display: block !important;
  animation: boosterFxSpark .8s cubic-bezier(.12,.7,.2,1) var(--spark-delay) both;
}
/* Legendary and above unlock flare and larger particle counts. */
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-fx-rays, .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-fx-rays, .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-fx-rays, .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-fx-rays {
  display: block !important;
  animation: boosterFxRays var(--fx-speed, 1s) ease-out both !important;
  opacity: var(--fx-power, .5) !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-fx-ring, .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-fx-ring, .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-fx-ring, .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-fx-ring {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-fx-burst, .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-fx-burst, .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-fx-burst, .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-fx-burst {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-fx-flare, .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-fx-flare, .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-fx-flare, .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-fx-flare {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-fx-sparks, .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-fx-sparks, .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-fx-sparks, .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-fx-sparks {
  display: block !important;
}
.booster-card-slot.booster-reveal-active.booster-tier-legendary .booster-fx-sparks i:nth-child(-n+18), .booster-card-slot.booster-reveal-active.booster-tier-mythic .booster-fx-sparks i:nth-child(-n+22), .booster-card-slot.booster-reveal-active.booster-tier-transcendent .booster-fx-sparks i:nth-child(-n+26), .booster-card-slot.booster-reveal-active.booster-tier-divine .booster-fx-sparks i {
  display: block !important;
  animation: boosterFxSpark .9s cubic-bezier(.12,.7,.2,1) var(--spark-delay) both;
}
/* =========================================================
LOST-TCG NEON-ROMANTIC THEME + RARITY COLOR ISOLATION
Safe additive overrides; original application logic untouched.
========================================================= */
:root {
  --lust-pink: #ff4eb8;
  --lust-pink-soft: #ff8bd2;
  --lust-violet: #a855f7;
  --lust-bg: #08070d;
  --lust-panel: rgba(20, 12, 25, .88);
  --lust-line: rgba(255, 78, 184, .24);
  --lust-text: #fff4fb;
}
html {
  background: var(--lust-bg);
}
body {
  background: radial-gradient(ellipse at 12% -8%, rgba(255, 45, 164, .13), transparent 36rem), radial-gradient(ellipse at 92% 8%, rgba(126, 34, 206, .12), transparent 32rem), linear-gradient(180deg, #0a0710 0%, #08070d 55%, #0d0812 100%);
  color: var(--lust-text);
}
.site-header {
  border-bottom: 1px solid var(--lust-line);
  box-shadow: 0 8px 35px rgba(0,0,0,.24), 0 1px 0 rgba(255,78,184,.06);
}
.logo {
  display:flex;
  align-items:center;
  text-decoration:none;
  min-width:110px;
  height:62px;
}
.site-logo-image {
  display:block;
  width:118px;
  height:60px;
  object-fit:contain;
  filter: drop-shadow(0 0 10px rgba(255,78,184,.25));
}
.header-info a, .header-info button {
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-info a:hover, .header-info button:hover {
  border-color: rgba(255,78,184,.58);
  box-shadow: 0 0 18px rgba(255,78,184,.12);
}
button, .btn, [role="button"] {
  accent-color: var(--lust-pink);
}
.card, .panel, .profile-card, .auth-card, .collection-card, .collection-item, .profile-section, .auth-container, .stat-card, .pack-card {
  border-color: rgba(255,78,184,.15);
}
.hero h1, .section-title, .page-title {
  text-shadow: 0 0 24px rgba(255,78,184,.13);
}
@media (max-width: 700px) {
  .site-header {
    padding: 0 14px;
  }
  .site-logo-image {
    width: 88px;
    height: 54px;
  }
  .logo {
    min-width: 82px;
  }
}
/* Rarity colors are explicitly owned by the current slot, never inherited
from an earlier Epic card. FX elements read these per-slot variables. */
.booster-card-slot.booster-tier-common {
  --rarity-color: #a8b0bf !important;
  --rarity-color-2: #687386 !important;
  --fx-color: #a8b0bf !important;
  --fx-color-2: #687386 !important;
}
.booster-card-slot.booster-tier-uncommon {
  --rarity-color: #55e58b !important;
  --rarity-color-2: #16864d !important;
  --fx-color: #55e58b !important;
  --fx-color-2: #16864d !important;
}
.booster-card-slot.booster-tier-rare {
  --rarity-color: #58a6ff !important;
  --rarity-color-2: #245edb !important;
  --fx-color: #58a6ff !important;
  --fx-color-2: #245edb !important;
}
.booster-card-slot.booster-tier-epic {
  --rarity-color: #c084fc !important;
  --rarity-color-2: #7e22ce !important;
  --fx-color: #c084fc !important;
  --fx-color-2: #7e22ce !important;
}
.booster-card-slot.booster-tier-legendary {
  --rarity-color: #fbbf24 !important;
  --rarity-color-2: #ea580c !important;
  --fx-color: #fbbf24 !important;
  --fx-color-2: #ea580c !important;
}
.booster-card-slot.booster-tier-mythic {
  --rarity-color: #f472b6 !important;
  --rarity-color-2: #9333ea !important;
  --fx-color: #f472b6 !important;
  --fx-color-2: #9333ea !important;
}
.booster-card-slot.booster-tier-transcendent {
  --rarity-color: #22d3ee !important;
  --rarity-color-2: #6d28d9 !important;
  --fx-color: #22d3ee !important;
  --fx-color-2: #6d28d9 !important;
}
.booster-card-slot.booster-tier-divine {
  --rarity-color: #fff1a8 !important;
  --rarity-color-2: #f59e0b !important;
  --fx-color: #fff1a8 !important;
  --fx-color-2: #f59e0b !important;
}
/* Use one clean back face: remove the extra inset rarity frame on the back. */
.booster-card-slot .booster-card-back::before {
  content: none !important;
  display: none !important;
}
/* FX color declarations use the active slot palette, not fixed Epic purple. */
.booster-card-slot .booster-fx-ring {
  border-color: var(--fx-color, var(--rarity-color, #a855f7)) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--fx-color, #a855f7) 48%, transparent), inset 0 0 18px color-mix(in srgb, var(--fx-color, #a855f7) 22%, transparent) !important;
}
.booster-card-slot .booster-fx-rays {
  background: repeating-conic-gradient(from 0deg, transparent 0deg 9deg, color-mix(in srgb, var(--fx-color, #a855f7) 35%, transparent) 10deg 11deg, transparent 12deg 20deg) !important;
}
.booster-card-slot .booster-fx-burst {
  background: radial-gradient(circle, color-mix(in srgb, var(--fx-color, #a855f7) 58%, transparent), color-mix(in srgb, var(--fx-color-2, #7e22ce) 25%, transparent) 38%, transparent 72%) !important;
}
.booster-card-slot .booster-fx-sparks i {
  background: var(--fx-color, var(--rarity-color, #a855f7)) !important;
  box-shadow: 0 0 12px var(--fx-color, #a855f7) !important;
}
/* =========================================================
LOST-TCG — REBUILT BOOSTER SELECTOR
Scoped to main.html booster selection; gameplay/API untouched.
========================================================= */
body:not(.booster-active) .hero {
  position: relative;
  width: min(1240px, calc(100% - 44px));
  margin: 42px auto 58px;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 34px) 32px;
  border: 1px solid rgba(255, 66, 194, .22);
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(237, 34, 165, .16), transparent 55%), radial-gradient(ellipse at 90% 40%, rgba(119, 44, 217, .12), transparent 40%), linear-gradient(145deg, rgba(18, 7, 25, .97), rgba(5, 5, 13, .98));
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
}
body:not(.booster-active) .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background: repeating-linear-gradient(135deg, transparent 0 58px, rgba(255,55,191,.035) 59px 60px, transparent 61px 118px);
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
body:not(.booster-active) .hero > h1, body:not(.booster-active) .hero > p, body:not(.booster-active) .hero > .booster-intro-strip, body:not(.booster-active) .hero > .booster-shop-grid {
  position: relative;
  z-index: 1;
}
body:not(.booster-active) .hero > h1 {
  color: #fff;
  text-align: center;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 30, 177, .36);
  margin: 8px 0 13px;
}
body:not(.booster-active) .hero > p {
  color: #cbbbd4;
  text-align: center;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.6;
}
.booster-intro-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0 20px;
  padding: 17px 20px;
  border: 1px solid rgba(255, 65, 193, .2);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(255, 31, 177, .09), rgba(120, 49, 211, .045), rgba(255,255,255,.015));
}
.booster-intro-copy {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.booster-kicker {
  color:#ff63d0;
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
}
.booster-intro-copy strong {
  color:#fff;
  font-size:17px;
  letter-spacing:.01em;
}
.booster-intro-copy > span:last-child {
  color:#a99ab4;
  font-size:12px;
}
.booster-legend {
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  color:#d7c9e0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
}
.booster-legend i {
  width:1px;
  height:17px;
  background:rgba(255,255,255,.16);
  margin:0 4px;
}
.legend-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff40c3;
  box-shadow:0 0 12px #ff40c3;
}
.pack-buttons.booster-shop-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  width:100%;
  margin:0;
  align-items:stretch;
}
.pack-option {
  --pack-color:#ff4bc8;
  --pack-glow:rgba(255,49,192,.3);
  --pack-color-soft:rgba(255,49,192,.1);
  position:relative;
  min-width:0;
  height:auto;
  min-height:610px;
  padding:15px 16px 17px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--pack-color) 35%,transparent);
  border-radius:20px;
  background:radial-gradient(ellipse at 50% 20%,var(--pack-color-soft),transparent 52%),linear-gradient(155deg,rgba(26,13,32,.98),rgba(8,7,15,.99) 68%);
  box-shadow:0 15px 34px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
  cursor:pointer;
  isolation:isolate;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,filter .25s ease;
}
.pack-option::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  height:auto;
  opacity:.7;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.035) 48%,transparent 70%);
}
.pack-option::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:190px;
  height:190px;
  border-radius:50%;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  background:var(--pack-glow);
  filter:blur(65px);
  opacity:.42;
  pointer-events:none;
}
.pack-option:hover,.pack-option:focus-visible {
  transform:translateY(-7px);
  border-color:var(--pack-color);
  box-shadow:0 25px 52px rgba(0,0,0,.42),0 0 30px var(--pack-glow),inset 0 0 0 1px color-mix(in srgb,var(--pack-color) 28%,transparent);
  outline:none;
}
.pack-option:active {
  transform:translateY(-2px) scale(.995);
}
.pack-option:nth-child(1),.pack-option.pack-basic {
  --pack-color:#ff50c9;
  --pack-glow:rgba(255,40,190,.36);
  --pack-color-soft:rgba(255,40,190,.14);
}
.pack-option:nth-child(2),.pack-option.pack-premium {
  --pack-color:#9d75ff;
  --pack-glow:rgba(126,65,255,.38);
  --pack-color-soft:rgba(126,65,255,.15);
}
.pack-option:nth-child(3),.pack-option.pack-custom {
  --pack-color:#ffc15e;
  --pack-glow:rgba(255,166,52,.34);
  --pack-color-soft:rgba(255,166,52,.12);
}
.pack-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:22px;
  color:var(--pack-color);
}
.pack-edition {
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.9;
}
.pack-seal {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid color-mix(in srgb,var(--pack-color) 50%,transparent);
  border-radius:50%;
  font-size:14px;
  color:var(--pack-color);
  box-shadow:0 0 14px var(--pack-glow);
}
.pack-art-wrap {
  position:relative;
  display:grid;
  place-items:center;
  height:250px;
  margin:3px -8px 2px;
  overflow:hidden;
}
.pack-art-halo {
  position:absolute;
  width:68%;
  height:24px;
  bottom:17px;
  border-radius:50%;
  background:var(--pack-color);
  filter:blur(19px);
  opacity:.6;
}
.pack-art {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.4));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;
}
.pack-option:hover .pack-art,.pack-option:focus-visible .pack-art {
  transform:translateY(-5px) scale(1.055) rotate(-1deg);
  filter:drop-shadow(0 14px 20px var(--pack-glow));
}
.pack-copy {
  padding:0 2px 14px;
  text-align:center;
}
.pack-overline {
  color:var(--pack-color);
  font-size:9px;
  font-weight:900;
  letter-spacing:.17em;
  margin-bottom:6px;
}
.pack-copy h2 {
  color:#fff;
  font-size:clamp(19px,2vw,25px);
  line-height:1.15;
  font-weight:900;
  text-shadow:0 0 18px var(--pack-glow);
}
.pack-description {
  margin-top:7px;
  min-height:17px;
  color:#b7a9c0;
  font-size:11px;
  line-height:1.45;
}
.pack-metrics {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:8px;
  margin-top:auto;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.pack-metric {
  min-width:0;
  display:grid;
  grid-template-columns:17px 1fr;
  align-items:center;
  gap:3px 7px;
}
.metric-icon {
  grid-row:span 2;
  color:var(--pack-color);
  font-size:19px;
  text-align:center;
  text-shadow:0 0 10px var(--pack-glow);
}
.metric-label {
  color:#8f819a;
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
  white-space:nowrap;
}
.pack-option .pack-quantity,.pack-option .pack-cooldown {
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  overflow-wrap:anywhere;
  text-shadow:none;
}
.pack-option .pack-cooldown {
  color:var(--pack-color);
  font-size:11px;
}
.pack-open-button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px;
  padding:14px 15px;
  border:1px solid var(--pack-color);
  border-radius:11px;
  color:#fff;
  background:linear-gradient(100deg,color-mix(in srgb,var(--pack-color) 30%,#140918),rgba(18,9,24,.95));
  box-shadow:0 0 18px var(--pack-glow),inset 0 1px rgba(255,255,255,.08);
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  cursor:pointer;
  transition:filter .2s,box-shadow .2s,transform .2s;
}
.pack-open-button:hover:not(:disabled) {
  filter:brightness(1.18);
  box-shadow:0 0 28px var(--pack-glow),inset 0 1px rgba(255,255,255,.15);
}
.pack-open-button:active:not(:disabled) {
  transform:scale(.985);
}
.pack-open-button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.pack-button-arrow {
  font-size:19px;
  line-height:12px;
  color:var(--pack-color);
}
.pack-card-hint {
  margin-top:10px;
  color:#66586f;
  text-align:center;
  font-size:8px;
  font-weight:800;
  letter-spacing:.17em;
  transition:color .2s;
}
.pack-option:hover .pack-card-hint {
  color:var(--pack-color);
}
.custom-tag-label {
  color:var(--pack-color);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  margin:0 2px 5px;
}
.pack-option .custom-tag-input {
  width:100%;
  height:36px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--pack-color) 35%,rgba(255,255,255,.1));
  border-radius:9px;
  background:rgba(0,0,0,.32);
  color:#fff;
  font-size:12px;
  outline:none;
}
.pack-option .custom-tag-input:focus {
  border-color:var(--pack-color);
  box-shadow:0 0 0 3px var(--pack-color-soft);
}
.pack-option .pack-error {
  min-height:14px;
  padding:2px 2px 0;
  color:#ff7f9b;
  font-size:10px;
}
.pack-custom .pack-metrics {
  margin-top:3px;
}
@media (max-width: 960px) {
  .pack-buttons.booster-shop-grid {
    gap:13px;
  }
  .pack-option {
    min-height:590px;
    padding:12px;
  }
  .pack-art-wrap {
    height:215px;
  }
  .pack-metrics {
    grid-template-columns:1fr;
    gap:10px;
  }
  .pack-metric {
    grid-template-columns:18px 1fr;
  }
  .metric-icon {
    grid-row:span 2;
  }
}
@media (max-width: 680px) {
  body:not(.booster-active) .hero {
    width:calc(100% - 22px);
    margin:18px auto 30px;
    padding:24px 13px 18px;
    border-radius:20px;
  }
  .booster-intro-strip {
    align-items:flex-start;
    flex-direction:column;
    padding:14px;
    margin-top:23px;
  }
  .booster-legend {
    flex-wrap:wrap;
    font-size:9px;
  }
  .pack-buttons.booster-shop-grid {
    grid-template-columns:1fr;
    gap:14px;
  }
  .pack-option {
    min-height:0;
    display:grid;
    grid-template-columns:minmax(100px, .75fr) minmax(0,1.25fr);
    grid-template-rows:auto auto auto 1fr auto;
    column-gap:12px;
    padding:13px;
  }
  .pack-topline {
    grid-column:1 / -1;
  }
  .pack-art-wrap {
    grid-column:1;
    grid-row:2 / span 3;
    height:220px;
    margin:0 -8px;
  }
  .pack-copy {
    grid-column:2;
    grid-row:2;
    text-align:left;
    align-self:end;
    padding:5px 0 10px;
  }
  .pack-copy h2 {
    font-size:21px;
  }
  .pack-description {
    min-height:0;
  }
  .pack-metrics {
    grid-column:2;
    grid-row:3;
    grid-template-columns:1fr;
    align-self:center;
    margin:0;
    padding:10px 0;
  }
  .pack-open-button {
    grid-column:1 / -1;
    grid-row:5;
    margin-top:12px;
  }
  .pack-card-hint {
    grid-column:1 / -1;
    grid-row:6;
  }
  .pack-custom .custom-tag-label,.pack-custom .custom-tag-input,.pack-custom .pack-error {
    grid-column:2;
  }
  .pack-custom .custom-tag-label {
    grid-row:3;
  }
  .pack-custom .custom-tag-input {
    grid-row:4;
  }
  .pack-custom .pack-error {
    grid-row:5;
  }
  .pack-custom .pack-metrics {
    grid-row:6;
  }
  .pack-custom .pack-open-button {
    grid-row:7;
  }
  .pack-custom .pack-card-hint {
    grid-row:8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pack-option,.pack-art,.pack-open-button {
    transition:none !important;
  }
}
/* LOST-TCG neon showcase pass: shared identity across every page */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rajdhani:wght@400;500;600;700&display=swap');
:root {
  --lust-pink:#ff2bbd;
  --lust-pink-bright:#ff68d5;
  --lust-violet:#9c36ff;
  --lust-ink:#07030d;
  --lust-panel:rgba(13,5,20,.88);
}
body {
  background-color:#07030d;
  background-image:radial-gradient(ellipse at 50% -15%,rgba(125,13,113,.24),transparent 55%),radial-gradient(ellipse at 0% 45%,rgba(105,12,96,.12),transparent 38%);
  color:#f7eefe;
  font-family:'Rajdhani',system-ui,sans-serif;
}
.site-header {
  border-bottom:1px solid rgba(255,43,189,.65)!important;
  box-shadow:0 8px 35px rgba(255,43,189,.1);
  backdrop-filter:blur(18px);
}
.site-logo-link {
  display:flex;
  align-items:center;
  text-decoration:none;
}
.site-logo-image {
  display:block;
  width:154px;
  max-height:96px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,43,189,.45));
}
.hero>h1, .auth-container h1, .collection-title, .profile-title {
  font-family:'Permanent Marker','Rajdhani',sans-serif!important;
  letter-spacing:.025em;
  color:#ff45c6;
  text-shadow:0 0 8px rgba(255,43,189,.65),0 0 28px rgba(156,54,255,.28);
}
.pack-buttons.booster-shop-grid {
  align-items:stretch;
  gap:clamp(16px,2.3vw,34px);
  margin-top:30px;
}
.pack-option {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,43,189,.4)!important;
  border-radius:18px!important;
  background:linear-gradient(155deg,rgba(34,9,39,.94),rgba(5,3,12,.97) 62%)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 0 28px rgba(255,43,189,.045);
  cursor:pointer;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.pack-option:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background:radial-gradient(ellipse at 50% 25%,var(--pack-glow,rgba(255,43,189,.2)),transparent 52%);
}
.pack-option:hover,.pack-option:focus-visible {
  transform:translateY(-8px) scale(1.012);
  border-color:var(--pack-accent,#ff2bbd)!important;
  box-shadow:0 0 0 1px var(--pack-accent,#ff2bbd),0 20px 60px color-mix(in srgb,var(--pack-accent,#ff2bbd) 18%,transparent),inset 0 0 35px rgba(255,43,189,.09);
  outline:none;
}
.pack-basic {
  --pack-accent:#ff36c6;
  --pack-glow:rgba(255,35,175,.25);
}
.pack-premium {
  --pack-accent:#bb5bff;
  --pack-glow:rgba(143,38,255,.3);
}
.pack-custom {
  --pack-accent:#55d9ff;
  --pack-glow:rgba(255,160,31,.25);
}
.pack-topline {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 17px 0;
  color:#cbb6d4;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700;
}
.pack-seal {
  color:var(--pack-accent);
  font-size:22px;
  text-shadow:0 0 15px var(--pack-accent);
}
.pack-art-wrap {
  height:clamp(250px,30vw,380px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  isolation:isolate;
  margin:0 10px;
  overflow:visible;
}
.pack-art-halo {
  position:absolute;
  z-index:-1;
  bottom:11%;
  left:15%;
  right:15%;
  height:12%;
  border-radius:50%;
  background:var(--pack-accent);
  filter:blur(27px);
  opacity:.42;
  transition:opacity .3s,transform .3s;
}
.pack-option:hover .pack-art-halo {
  opacity:.85;
  transform:scale(1.18);
}
.pack-art {
  position:relative;
  z-index:1;
  height:100%;
  width:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.65)) drop-shadow(0 0 10px color-mix(in srgb,var(--pack-accent) 32%,transparent));
  transform:translateY(0) rotate(-1deg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;
  mix-blend-mode:screen;
}
.pack-premium .pack-art {
  transform:rotate(1deg);
}
.pack-custom .pack-art {
  transform:rotate(1.5deg);
}
.pack-option:hover .pack-art {
  transform:translateY(-9px) rotate(0) scale(1.045);
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.6)) drop-shadow(0 0 20px var(--pack-accent));
}
.pack-copy {
  padding:0 22px 14px;
}
.pack-copy .pack-overline {
  color:var(--pack-accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  margin:0 0 5px;
}
.pack-copy h2 {
  font-family:'Permanent Marker','Rajdhani',sans-serif;
  font-size:clamp(22px,2.1vw,30px);
  line-height:1.1;
  color:#fff;
  margin:0 0 8px;
  text-shadow:0 0 15px color-mix(in srgb,var(--pack-accent) 42%,transparent);
}
.pack-description {
  color:#c6b6d1;
  font-size:15px;
  margin:0;
  line-height:1.35;
}
.pack-metrics {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:10px;
  margin:auto 17px 17px;
  padding:13px 12px;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.pack-metric {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.metric-icon {
  color:var(--pack-accent);
  font-size:18px;
}
.metric-label {
  color:#9d8aa8;
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
}
.pack-quantity,.pack-cooldown {
  color:#fff;
  font-size:17px;
  font-weight:700;
}
.pack-cooldown {
  font-size:14px;
  overflow-wrap:anywhere;
}
.pack-open-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 17px 12px;
  padding:13px 16px;
  border:1px solid var(--pack-accent)!important;
  border-radius:8px!important;
  background:linear-gradient(100deg,color-mix(in srgb,var(--pack-accent) 22%,#140719),rgba(10,4,15,.94))!important;
  color:#fff!important;
  font:700 13px 'Rajdhani',sans-serif!important;
  letter-spacing:.12em;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--pack-accent) 12%,transparent),0 0 16px color-mix(in srgb,var(--pack-accent) 10%,transparent);
  cursor:pointer;
}
.pack-open-button:hover {
  box-shadow:0 0 22px color-mix(in srgb,var(--pack-accent) 32%,transparent);
}
.pack-button-arrow {
  font-size:19px;
  color:var(--pack-accent);
}
.pack-card-hint {
  padding:0 16px 15px;
  text-align:center;
  color:#77627f;
  font-size:9px;
  letter-spacing:.2em;
}
.custom-tag-label {
  padding:0 22px 5px;
  color:#d7a9ff;
  font-size:10px;
  letter-spacing:.16em;
}

.pack-error {
  padding:0 17px;
  color:#ff82cf;
  font-size:12px;
  min-height:0;
}
.booster-intro-strip {
  border:1px solid rgba(255,43,189,.24);
  background:linear-gradient(110deg,rgba(28,7,34,.85),rgba(9,4,15,.85));
  border-radius:12px;
  box-shadow:inset 0 0 25px rgba(255,43,189,.04);
}
.booster-kicker {
  font-family:'Rajdhani',sans-serif;
  letter-spacing:.22em;
}
.booster-legend {
  color:#e9d7f0;
}
.auth-page {
  background:radial-gradient(ellipse at 50% 0%,rgba(255,43,189,.18),transparent 52%),#07030d!important;
}
.auth-container {
  border:1px solid rgba(255,43,189,.35)!important;
  background:rgba(12,5,18,.92)!important;
  box-shadow:0 20px 70px rgba(0,0,0,.5),0 0 35px rgba(255,43,189,.08);
  border-radius:18px!important;
}
.auth-logo-image {
  width:min(210px,65%);
  max-height:135px;
  object-fit:contain;
  filter:drop-shadow(0 0 17px rgba(255,43,189,.4));
}
.collection-container,.collection-panel,.profile-container,.profile-card,.profile-panel {
  border-color:rgba(255,43,189,.25)!important;
  background-color:rgba(12,5,18,.82)!important;
  box-shadow:0 15px 45px rgba(0,0,0,.24);
}
@media(max-width:760px) {
  .site-logo-image {
    width:115px;
  }
  .pack-art-wrap {
    height:310px;
  }
  .pack-option:hover {
    transform:translateY(-3px);
  }
  .pack-copy {
    padding-left:17px;
    padding-right:17px;
  }
  .pack-metrics {
    margin-left:13px;
    margin-right:13px;
  }
  .pack-open-button {
    margin-left:13px;
    margin-right:13px;
  }
}
/* Minimal immersive booster stage: packs float in the world, never inside UI cards. */
body:not(.booster-active) .hero > .booster-intro-strip {
  display:none !important;
}
body:not(.booster-active) .hero > h1 {
  margin-bottom:4px;
}
body:not(.booster-active) .hero > p {
  margin-bottom:16px;
}
.pack-buttons.booster-shop-grid {
  gap:clamp(24px,5vw,76px) !important;
  margin-top:18px !important;
  align-items:start !important;
}
.pack-option, .pack-option:hover, .pack-option:focus-visible, .pack-option:active {
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none;
  isolation:auto !important;
}
.pack-option::before,.pack-option::after {
  content:none !important;
  display:none !important;
}
.pack-topline,.pack-description,.pack-overline,.pack-open-button,.pack-card-hint {
  display:none !important;
}
.pack-copy {
  order:0;
  padding:0 0 8px !important;
  text-align:center !important;
}
.pack-copy h2 {
  margin:0 !important;
  font-size:clamp(23px,2.2vw,32px) !important;
  color:#fff !important;
  text-shadow:0 2px 18px rgba(255,40,190,.25) !important;
}
.pack-art-wrap {
  order:1;
  height:clamp(300px,35vw,455px) !important;
  margin:0 !important;
  overflow:visible !important;
  isolation:auto !important;
  position:relative !important;
}
.pack-art-halo {
  display:none !important;
}
.pack-art {
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.48)) !important;
  transform:translateY(0) rotate(-1deg) !important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease !important;
}
.pack-premium .pack-art {
  transform:rotate(1deg) !important;
}
.pack-custom .pack-art {
  transform:rotate(1.5deg) !important;
}
.pack-option:hover .pack-art,.pack-option:focus-visible .pack-art {
  transform:translateY(-9px) scale(1.045) rotate(0) !important;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.55)) !important;
}
.pack-metrics {
  order:2;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:clamp(18px,2.5vw,38px) !important;
  margin:0 !important;
  padding:4px 0 0 !important;
  border:0 !important;
  background:transparent !important;
  text-align:center !important;
}
.pack-metric {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
}
.metric-icon {
  display:none !important;
}
.metric-label {
  color:#a99bb4 !important;
  font-size:9px !important;
  letter-spacing:.16em !important;
}
.pack-option .pack-quantity,.pack-option .pack-cooldown {
  color:var(--pack-accent) !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}
.pack-option .pack-cooldown {
  font-size:12px !important;
}
.pack-option.pack-basic {
  --pack-accent:#ff36c6;
}
.pack-option.pack-premium {
  --pack-accent:#bd68ff;
}
.pack-option.pack-custom {
  --pack-accent:#55d9ff;
}
.pack-custom .custom-tag-label {
  order:2;
  display:block;
  text-align:center;
  margin-top:10px;
  padding:0;
}
.pack-custom .custom-tag-input {
  order:3;
  width:min(230px,90%);
  margin:6px auto 0;
  background:rgba(5,2,10,.88)!important;
}
.pack-custom .pack-error {
  order:4;
  text-align:center;
}
@media(max-width:680px) {
  .pack-buttons.booster-shop-grid {
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .pack-option {
    display:flex !important;
  }
  .pack-art-wrap {
    height:clamp(270px,76vw,390px) !important;
    width:min(100%,380px);
    margin:0 auto !important;
  }
  .pack-copy {
    text-align:center !important;
  }
  .pack-metrics {
    display:flex !important;
    margin:0 !important;
  }
}
/* Compact, borderless pack stage: the pack itself is the control. */
@media (min-width: 681px) {
  html, body {
    min-height:100%;
    height:100%;
    overflow:hidden !important;
  }
  body {
    display:flex;
    flex-direction:column;
  }
  .site-header {
    flex:0 0 58px;
    min-height:58px !important;
    height:58px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .site-header .site-logo-image {
    width:112px !important;
    max-height:52px !important;
  }
  main {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:8px 20px 14px !important;
    box-sizing:border-box;
  }
  .hero {
    width:min(100%,1040px);
    margin:0 auto !important;
    padding:0 !important;
  }
  .hero > h1 {
    font-size:clamp(34px,4.5vh,58px) !important;
    line-height:1 !important;
    margin:0 0 5px !important;
  }
  .hero > p {
    margin:0 0 14px !important;
    font-size:13px !important;
  }
  .pack-buttons.booster-shop-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(18px,4vw,64px) !important;
    margin-top:0 !important;
  }
  .pack-option {
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    cursor:pointer;
  }
  .pack-copy {
    order:0 !important;
    padding:0 0 2px !important;
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .pack-copy h2 {
    font-size:clamp(19px,2vw,27px) !important;
    white-space:normal;
  }
  .pack-art-wrap {
    order:1 !important;
    height:min(52vh,420px) !important;
    width:100% !important;
    margin:0 auto !important;
  }
  .pack-art {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    mix-blend-mode:normal !important;
    filter:drop-shadow(0 18px 16px rgba(0,0,0,.48)) !important;
  }
  .pack-option:hover .pack-art,.pack-option:focus-visible .pack-art {
    transform:translateY(-7px) scale(1.025) !important;
    filter:drop-shadow(0 20px 18px rgba(0,0,0,.56)) !important;
  }
  .pack-metrics {
    order:2 !important;
    width:100%;
    justify-content:center !important;
    gap:clamp(12px,1.8vw,28px) !important;
    padding-top:2px !important;
  }
  .pack-custom .custom-tag-label {
    margin-top:4px !important;
  }
  .pack-custom .custom-tag-input {
    margin-top:3px !important;
    height:30px !important;
  }
  .pack-custom .pack-error {
    font-size:10px !important;
  }
  .pack-section {
    display:none !important;
  }
}
/* The supplied art has its own colored backdrop; use alpha-cut pack silhouettes and never screen-blend. */
.pack-art {
  mix-blend-mode:normal !important;
  background:transparent !important;
}
.pack-art-wrap {
  background:transparent !important;
}
.pack-art-halo {
  display:none !important;
}
.pack-option {
  box-shadow:none !important;
}
.pack-option:hover,.pack-option:focus-visible,.pack-option:active {
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
@media (max-height:700px) and (min-width:681px) {
  .site-header {
    flex-basis:48px;
    height:48px !important;
    min-height:48px !important;
  }
  .site-header .site-logo-image {
    max-height:42px !important;
  }
  .hero > h1 {
    font-size:clamp(30px,4vh,42px) !important;
  }
  .hero > p {
    margin-bottom:7px !important;
  }
  .pack-art-wrap {
    height:42vh !important;
  }
  .pack-copy {
    min-height:27px;
  }
  .pack-option .pack-quantity {
    font-size:13px !important;
  }
  .pack-option .pack-cooldown {
    font-size:11px !important;
  }
}
@media (max-width:680px) {
  html,body {
    height:auto !important;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .pack-art-wrap {
    height:clamp(250px,65vw,350px) !important;
  }
}
/* Accessibility/layout repair: scrolling belongs to each page, not just the booster shop. */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body {
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
  min-height: auto !important;
  overflow: visible !important;
}
/* Collection and profile have long content; let their natural document height drive scrolling. */
body:has(.collection-container) > main, body:has(.collection-panel) > main, body:has(.profile-container) > main, body:has(.profile-card) > main, body:has(.profile-panel) > main {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding-top: clamp(20px, 4vh, 48px) !important;
  padding-bottom: 56px !important;
}
/* Main page: logo-inspired display typography with clear, readable supporting text. */
body:has(.booster-shop-grid) .hero > h1 {
  font-family: 'Permanent Marker', 'Rajdhani', sans-serif !important;
  font-size: clamp(36px, 5vw, 66px) !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
  line-height: 1.08 !important;
  text-transform: uppercase;
  color: #ff45c6 !important;
  text-shadow: 0 0 10px rgba(255,43,189,.55), 0 0 32px rgba(156,54,255,.25) !important;
}
body:has(.booster-shop-grid) .hero > p {
  color: #d6c3df !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: clamp(14px, 1.35vw, 18px) !important;
  font-weight: 600 !important;
  letter-spacing: .055em !important;
  line-height: 1.5 !important;
}
body:has(.booster-shop-grid) .pack-copy h2 {
  font-family: 'Permanent Marker', 'Rajdhani', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  line-height: 1.12 !important;
  text-shadow: 0 0 12px rgba(255,43,189,.28) !important;
}
body:has(.booster-shop-grid) .metric-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}
body:has(.booster-shop-grid) .pack-option .pack-quantity, body:has(.booster-shop-grid) .pack-option .pack-cooldown {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
}
body:has(.booster-shop-grid) .custom-tag-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
@media (min-width: 681px) {
  body:has(.booster-shop-grid) > main {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: clamp(28px, 5vh, 62px) !important;
    padding-bottom: 48px !important;
  }
  body:has(.booster-shop-grid) .hero {
    margin: 0 auto 30px !important;
  }
  body:has(.booster-shop-grid) .pack-art-wrap {
    height: min(47vh, 390px) !important;
  }
}
/* Header artwork and reveal-stage visibility repair. */
.booster-heading-image {
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto 8px !important;
  padding:0 !important;
  line-height:0 !important;
  text-shadow:none !important;
}
.booster-heading-image img {
  display:block;
  width:min( min(775px, 78vw), 100%);
  height:auto;
  max-height:clamp(52px, 10vh, 94px);
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,35,167,.16));
}
.booster-heading-image .visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
/* The desktop compact-shop rule hides the collection section normally. When a pack
is opened, explicitly restore the reveal stage and let the card fit the viewport. */
body.booster-active > main {
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  min-height:0 !important;
  flex:1 1 auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:12px 18px 24px !important;
}
body.booster-active .pack-section {
  display:flex !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  padding:0 !important;
}
body.booster-active #cards-container {
  display:flex !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
body.booster-active .booster-view {
  width:100%;
  min-height:0;
  gap:clamp(10px,2vh,22px);
  padding:6px 0 12px;
}
body.booster-active .booster-card-slot {
  max-height:calc(100vh - 170px);
}
@media(max-width:680px) {
  .booster-heading-image img {
    width:min(94vw,775px);
    max-height:none;
  }
  body.booster-active > main {
    padding:12px 10px 22px !important;
  }
}
/* Desktop reveal-stage fix: the booster shop and reveal stage share <main>.
Keep the reveal stage in a vertical flex layout so it cannot collapse or sit
beside the hidden shop when desktop media rules are active. */
@media (min-width: 681px) {
  body.booster-active, body.booster-active html {
    overflow-y:auto !important;
  }
  body.booster-active > main, body:has(.booster-shop-grid).booster-active > main {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    min-height:calc(100vh - 58px) !important;
    height:auto !important;
    overflow:visible !important;
    padding:18px 24px 36px !important;
  }
  body.booster-active .hero, body:has(.booster-shop-grid).booster-active .hero {
    display:none !important;
    visibility:hidden !important;
  }
  body.booster-active .pack-section, body:has(.booster-shop-grid).booster-active .pack-section {
    display:flex !important;
    flex:1 0 auto !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:calc(100vh - 90px) !important;
    height:auto !important;
    overflow:visible !important;
    visibility:visible !important;
  }
  body.booster-active #cards-container {
    display:flex !important;
    flex:1 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:calc(100vh - 120px) !important;
    overflow:visible !important;
  }
  body.booster-active .booster-view {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:0 !important;
    gap:clamp(12px,2vh,24px) !important;
    overflow:visible !important;
  }
  body.booster-active .booster-card-slot {
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(360px, 42vh) !important;
    max-width:100% !important;
    max-height:none !important;
    min-height:0 !important;
    aspect-ratio:2 / 3 !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body.booster-active .booster-card-slot .booster-flip-card {
    display:block !important;
    width:min(100%, 280px) !important;
    max-width:280px !important;
    min-width:190px !important;
    aspect-ratio:2 / 3 !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body.booster-active .booster-controls {
    display:flex !important;
    visibility:visible !important;
  }
}
/* Brush-lettered LOST-TCG navigation wordmarks */
.header-info a.nav-image-link, .header-info button#logout-button {
  min-height: 34px !important;
  height: 38px !important;
  min-width: 54px;
  padding: 2px 5px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, filter .18s ease;
}
.header-info a.nav-image-link:hover, .header-info button#logout-button:hover {
  transform: translateY(-1px) scale(1.045);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(255, 36, 176, .55));
}
.nav-wordmark {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.nav-wordmark-packs {
  width: 64px;
  max-height: 28px;
}
.nav-wordmark-logout {
  width: 72px;
  max-height: 27px;
}
.nav-wordmark-account {
  width: 116px;
  max-height: 34px;
}
.profile-eyebrow-image {
  display:flex;
  align-items:center;
  min-height:36px;
}
.profile-eyebrow-image .nav-wordmark-account {
  width:116px;
  max-height:34px;
}

@media (max-width: 600px) {
  .nav-wordmark-packs {
    width: 54px;
  }
  .nav-wordmark-logout {
    width: 60px;
  }
  .header-info a.nav-image-link, .header-info button#logout-button {
    min-width:44px;
    padding:1px 2px !important;
  }
}
/* Navigation refinement: collection brush label, quieter header glow, account wordmark. */
.header-info .nav-collection-link {
  color: #ff3ebd !important;
  font-family: 'Permanent Marker', 'Rajdhani', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase;
  text-shadow: 0 0 3px rgba(255,43,189,.16) !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
}
.header-info .nav-collection-link:hover {
  color: #ff8cde !important;
  text-shadow: 0 0 5px rgba(255,43,189,.24) !important;
  filter: none !important;
  transform: translateY(-1px);
}
.site-header .header-info {
  text-shadow: none !important;
}
.site-header .header-info a, .site-header .header-info button, .site-header .header-info .username-button {
  text-shadow: 0 0 2px rgba(255,43,189,.12) !important;
  filter: none;
}
.site-header .site-logo-image {
  filter: drop-shadow(0 0 5px rgba(255,43,189,.18)) !important;
}
.header-info .nav-wordmark {
  filter: none !important;
}
.header-info .nav-account-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 5px !important;
}
.header-info .nav-wordmark-account {
  width: 80px;
  max-height: 29px;
}
@media (max-width: 600px) {
  .header-info .nav-wordmark-account {
    width: 62px;
    max-height: 24px;
  }
}
/* LOST-TCG atmosphere + resilient shared navigation */
html {
  min-height: 100%;
  background: #07040b;
}
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: #07040b !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(5,3,9,.72), rgba(5,3,9,.64) 45%, rgba(5,3,9,.80)), url("assets/lust-neon-background.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .92;
}
.site-header {
  position: relative;
  z-index: 20;
  min-height: 70px;
  height: auto;
  gap: 20px;
  flex-wrap: nowrap;
  border-bottom: 1px solid rgba(255,49,184,.72) !important;
  box-shadow: 0 4px 22px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(16px);
}
.site-header .logo {
  flex: 0 0 auto;
}
.site-header .site-logo-image {
  max-width: 154px;
}
.site-header .header-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(4px, 1.1vw, 16px);
  min-width: 0;
  flex-wrap: wrap;
}
.site-header .header-info a, .site-header .header-info button {
  flex: 0 0 auto;
}
.site-header .header-info a:not(.nav-image-link):not(.nav-account-link), .site-header .header-info button#logout-button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.site-header .header-info a:not(.nav-image-link):not(.nav-account-link) {
  color: #ff45c6 !important;
  font-family: 'Permanent Marker', 'Rajdhani', sans-serif !important;
  font-size: clamp(13px, 1.15vw, 17px) !important;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(255,43,189,.12) !important;
  padding: 0 8px !important;
  min-height: 40px;
}
.site-header .header-info a:not(.nav-image-link):not(.nav-account-link):hover, .site-header .header-info button#logout-button:hover {
  color: #ffd4f1 !important;
  text-shadow: 0 0 5px rgba(255,43,189,.22) !important;
  transform: translateY(-1px);
}
.site-header .nav-collection-link span {
  display: inline-block;
}
.site-header .nav-image-link {
  min-width: 60px;
  padding: 2px 4px !important;
}
.site-header .nav-wordmark-packs {
  width: 65px;
  height: 29px;
}

.site-header .nav-wordmark-arena {
  width: 76px;
  height: 29px;
}

.site-header .nav-wordmark-deck {
  width: 65px;
  height: 29px;
}

.site-header .nav-wordmark-logout {
  width: 72px;
  max-height: 29px;
}
.site-header .nav-account-link {
  min-width: 84px;
  padding: 2px 5px !important;
}
.site-header .nav-wordmark-account {
  width: 80px !important;
  max-height: 29px !important;
}
.site-header #username-display:not(.nav-account-link) {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .site-header {
    padding: 7px 12px !important;
    gap: 8px;
  }
  .site-header .site-logo-image {
    width: 82px !important;
    max-height: 48px !important;
  }
  .site-header .logo {
    min-width: 0 !important;
    height: auto;
  }
  .site-header .header-info {
    gap: 2px;
  }
  .site-header .header-info a:not(.nav-image-link):not(.nav-account-link) {
    font-size: 12px !important;
    padding: 0 5px !important;
  }
  .site-header .nav-wordmark-packs {
    width: 48px;
  }
  .site-header .nav-wordmark-logout {
    width: 54px;
  }
  .site-header .nav-account-link {
    min-width: 62px;
  }
  .site-header .nav-wordmark-account {
    width: 60px !important;
  }
}
@media (max-width: 480px) {
  .site-header {
    align-items: center;
  }
  .site-header .header-info {
    justify-content: flex-end;
    gap: 0;
  }
  .site-header .nav-image-link {
    min-width: 44px;
  }
  .site-header .nav-wordmark-packs {
    width: 42px;
  }
  .site-header .nav-wordmark-logout {
    width: 48px;
  }
  .site-header .header-info a:not(.nav-image-link):not(.nav-account-link) {
    font-size: 10px !important;
    padding: 0 3px !important;
  }
}
/* Unified standalone neon environment and navigation wordmarks */
body {
  background-color: #07020b;
  background-image: linear-gradient(rgba(5, 1, 9, .60), rgba(5, 1, 9, .72)), url('assets/lust-neon-background.webp');
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.header-info .nav-collection-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  min-width: 86px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.nav-wordmark-collection {
  width: 104px;
  height: auto;
  max-height: 30px;
  object-fit: contain;
}
.nav-wordmark-packs {
  width: 76px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}
.nav-wordmark-account {
  width: 92px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.nav-wordmark-arena {
  height: auto;
  max-height: 29px;
  object-fit: contain;
}

.nav-wordmark-logout {
  width: 86px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}
.site-header .header-info .username-button.nav-account-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 8px;
}
.nav-image-link, .nav-collection-link, .nav-account-link, #logout-button {
  transition: transform .18s ease, filter .18s ease;
}
.nav-image-link:hover, .nav-collection-link:hover, .nav-account-link:hover, #logout-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
@media (max-width: 720px) {
  .nav-wordmark-collection {
    width: 80px;
  }
  .nav-wordmark-account {
    width: 72px;
  }
  .nav-wordmark-packs, .nav-wordmark-logout {
    width: 65px;
  }
}
/* === LOST-TCG background + consistent neon-pink controls === */
:root {
  --lust-pink: #ff2fae;
  --lust-pink-bright: #ff45c6;
  --lust-violet: #b84cff;
  --lust-ink: #08040d;
}
html {
  min-height: 100%;
  background-color: var(--lust-ink);
}
body {
  min-height: 100vh;
  background-color: var(--lust-ink) !important;
  background-image: linear-gradient(rgba(5, 1, 9, .32), rgba(5, 1, 9, .52)), url("assets/lust-neon-background.webp") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body > main, body > .auth-page, .auth-page {
  background: transparent !important;
}
.hero, .pack-buttons.booster-shop-grid {
  background: transparent !important;
}
.auth-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 64px) 18px;
}
.auth-container {
  width: min(100%, 460px);
  box-sizing: border-box;
  margin: auto;
  background: linear-gradient(145deg, rgba(18, 7, 22, .88), rgba(7, 4, 12, .92)) !important;
  border: 1px solid rgba(255, 47, 174, .42) !important;
  border-radius: 18px;
  box-shadow: 0 16px 55px rgba(0,0,0,.42), 0 0 28px rgba(255,47,174,.08);
  backdrop-filter: blur(12px);
}
.auth-container form button, .auth-page button:not(.auth-switch), button.primary, button[type="submit"], .btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #ff2fae, #c51a8d) !important;
  border: 1px solid rgba(255, 124, 216, .72) !important;
  box-shadow: 0 5px 18px rgba(255, 47, 174, .18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.auth-container form button:hover, .auth-page button:not(.auth-switch):hover, button.primary:hover, button[type="submit"]:hover, .btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 7px 24px rgba(255, 47, 174, .3);
  transform: translateY(-1px);
}
.auth-switch {
  color: #ff78d3 !important;
}
.auth-container input {
  color: #fff !important;
  background: rgba(5, 2, 10, .82) !important;
  border-color: rgba(255, 47, 174, .28) !important;
}
.auth-container input:focus {
  border-color: #ff45c6 !important;
  box-shadow: 0 0 0 3px rgba(255, 47, 174, .13) !important;
  outline: none;
}
@media (max-width: 600px) {
  body {
    background-attachment: scroll !important;
  }
  .auth-page {
    align-items: flex-start;
    padding-top: 28px;
  }
  .auth-container {
    margin: auto;
  }
}
/* === Final consistency pass: auth layout, custom tag field, shared nav hover === */
.auth-page {
  min-height: 100vh !important;
  min-height: 100svh !important;
  height: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 18px !important;
  margin: 0 !important;
}
.auth-container {
  width: min(100%, 440px) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 4vw, 36px) !important;
  align-self: center !important;
}
.auth-container h1 {
  margin: 10px 0 18px !important;
}
.auth-container form {
  gap: 12px !important;
}
.auth-container form button {
  margin-top: 2px !important;
}
.auth-message {
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  line-height: 1.35 !important;
}
.auth-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px auto 0 !important;
  padding: 5px 10px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ff78d3 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease !important;
}
.auth-switch:hover {
  color: #ffd2f0 !important;
  text-shadow: 0 0 10px rgba(255,47,174,.34) !important;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .auth-page {
    align-items: center !important;
    padding: 18px 14px !important;
  }
  .auth-container {
    margin: auto !important;
  }
}
/* Every header item gets the same restrained pink hover treatment. */
.site-header .header-info a, .site-header .header-info button, .site-header .header-info a .nav-wordmark {
  -webkit-tap-highlight-color: transparent;
}
.site-header .header-info a, .site-header .header-info button {
  transition: transform .18s ease, filter .18s ease, text-shadow .18s ease, box-shadow .18s ease !important;
}
.site-header .header-info a:hover, .site-header .header-info button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,47,174,.24)) !important;
}
.site-header .header-info a:hover .nav-wordmark, .site-header .header-info button:hover .nav-wordmark {
  filter: drop-shadow(0 0 5px rgba(255,47,174,.38)) !important;
}
.site-header .header-info a:focus-visible, .site-header .header-info button:focus-visible {
  outline: 1px solid rgba(255,69,198,.9) !important;
  outline-offset: 4px !important;
  border-radius: 5px;
}
.site-header .header-info a:active, .site-header .header-info button:active {
  transform: translateY(0) scale(.98) !important;
}
/* Custom tag selection is a compact part of the pack, not a separate form panel. */
.pack-custom .custom-tag-label {
  display: block !important;
  width: min(100%, 260px) !important;
  margin: 10px auto 4px !important;
  color: #ffc8ec !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-align: left !important;
}
.pack-custom .custom-tag-input {
  display: block !important;
  width: min(100% - 28px, 260px) !important;
  min-height: 38px !important;
  margin: 3px auto 8px !important;
  padding: 0 13px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,69,198,.48) !important;
  border-radius: 12px !important;
  background: rgba(9,3,15,.78) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,47,174,.04) !important;
  font: 500 13px 'Rajdhani', sans-serif !important;
  letter-spacing: .02em !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.pack-custom .custom-tag-input::placeholder {
  color: rgba(245,215,239,.52) !important;
}
.pack-custom .custom-tag-input:focus {
  outline: none !important;
  border-color: #ff45c6 !important;
  background: rgba(13,4,21,.96) !important;
  box-shadow: 0 0 0 3px rgba(255,47,174,.13), 0 0 14px rgba(255,47,174,.10) !important;
}
.pack-custom .pack-error {
  margin: 0 auto 5px !important;
  max-width: 260px;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .header-info a, .site-header .header-info button, .auth-switch, .pack-custom .custom-tag-input {
    transition: none !important;
  }
}
/* LUST pink accents: collection filters/details and profile actions use the site's brand color. */
:root {
  --lust-pink: #ff2fae;
  --lust-pink-bright: #ff45c6;
  --lust-pink-glow: rgba(255,47,174,.24);
}
#collection-search:focus, #rarity-filter:focus, #collection-sort:focus, .collection-controls input:focus, .collection-controls select:focus, #tag-input:focus {
  border-color: var(--lust-pink-bright) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,47,174,.14), 0 0 20px rgba(255,47,174,.12) !important;
}
#collection-search:hover, #rarity-filter:hover, #collection-sort:hover {
  border-color: rgba(255,69,198,.7) !important;
}
.profile-panel-header .profile-eyebrow, .profile-panel-header h2 {
  color: #ff78d3 !important;
  text-shadow: 0 0 12px rgba(255,47,174,.18);
}
.profile-action-button, .profile-action-button.secondary {
  background: linear-gradient(135deg, #ff2fae, #c51a8d) !important;
  color: #fff !important;
  border: 1px solid rgba(255,105,211,.78) !important;
  box-shadow: 0 8px 24px rgba(255,47,174,.16) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease !important;
}
.profile-action-button:hover, .profile-action-button.secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(255,47,174,.3) !important;
  filter: brightness(1.08) !important;
  border-color: #ff9be0 !important;
}
/* Keep the custom-tag control in a reserved slot shared by all packs, so it never makes
the Custom pack taller or pushes its quantity/countdown out of alignment. */
@media (min-width: 681px) {
  .pack-option {
    padding-bottom: 48px !important;
    box-sizing: border-box !important;
  }
  .pack-custom .custom-tag-label {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 31px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 8px !important;
    line-height: 10px !important;
  }
  .pack-custom .custom-tag-input {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: min(230px, 90%) !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }
  .pack-custom .pack-error {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: -16px;
    margin: 0 auto !important;
  }
}
@media (max-width: 680px) {
  .pack-option {
    padding-bottom: 0 !important;
  }
  .pack-custom .custom-tag-label {
    margin-top: 8px !important;
  }
  .pack-custom .custom-tag-input {
    height: 34px !important;
  }
}
/* =========================================================
FINAL POLISH: collection dropdowns, profile stats, pack accents
========================================================= */
#rarity-filter, #collection-sort {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  color: #f8eaf5 !important;
  background-color: rgba(13, 5, 18, .96) !important;
  border: 1px solid rgba(255, 55, 190, .38) !important;
  border-radius: 10px !important;
  padding: 0 38px 0 13px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff4ac8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
#rarity-filter:hover, #collection-sort:hover, #rarity-filter:focus-visible, #collection-sort:focus-visible {
  border-color: #ff45c6 !important;
  box-shadow: 0 0 0 2px rgba(255, 47, 174, .12), 0 0 16px rgba(255, 47, 174, .13) !important;
  outline: none !important;
}
#rarity-filter option, #collection-sort option {
  background: #100713;
  color: #f8eaf5;
}
.profile-eyebrow, .profile-panel-header h2 {
  color: #e8e3e8 !important;
  text-shadow: none !important;
}
.profile-eyebrow {
  opacity: .78;
}
/* Match the Basic pack's quantity and Ready state to the cool cyan of the Custom pack artwork. */
/* Keep the custom-tag control stationary and independently interactive while the pack art animates. */
.pack-custom .custom-tag-label, .pack-custom .custom-tag-input, .pack-custom .pack-error {
  position: relative !important;
  z-index: 4 !important;
  transform: none !important;
  translate: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.pack-custom:hover .custom-tag-label, .pack-custom:hover .custom-tag-input, .pack-custom:hover .pack-error, .pack-custom:focus-within .custom-tag-label, .pack-custom:focus-within .custom-tag-input, .pack-custom:focus-within .pack-error {
  transform: none !important;
  translate: none !important;
}
.pack-custom .custom-tag-input:hover {
  border-color: rgba(255, 75, 202, .65) !important;
  box-shadow: 0 0 12px rgba(255, 47, 174, .10) !important;
}
.pack-custom .custom-tag-input:focus {
  border-color: #ff45c6 !important;
  box-shadow: 0 0 0 2px rgba(255, 47, 174, .14), 0 0 16px rgba(255, 47, 174, .12) !important;
}
/* Custom Pack: consistently use the requested cool cyan accent for the text and pack details. */

/* Final pack interaction fixes: keep the Custom Pack/card stationary and remove hover blur. */
.pack-option,
.pack-option:hover,
.pack-option:focus-visible,
.pack-option:active,
.pack-custom,
.pack-custom:hover,
.pack-custom:focus-visible,
.pack-custom:active {
  transform: none !important;
  translate: none !important;
  animation: none !important;
}

/* Keep pack artwork crisp on hover; retain its normal resting drop shadow only. */
.pack-option:hover .pack-art,
.pack-option:focus-visible .pack-art,
.pack-custom:hover .pack-art,
.pack-custom:focus-visible .pack-art {
  transform: none !important;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)) !important;
}

/* Remove the blurred glow that expands when a pack is hovered. */
.pack-option:hover .pack-art-halo,
.pack-option:focus-visible .pack-art-halo,
.pack-custom:hover .pack-art-halo,
.pack-custom:focus-visible .pack-art-halo {
  filter: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* Final correction: animate only the pack artwork, never the pack card itself.
   Translation/rotation preserve the original hover motion without resampling via scale(). */
body:has(.booster-shop-grid) .pack-option,
body:has(.booster-shop-grid) .pack-option:hover,
body:has(.booster-shop-grid) .pack-option:focus-visible,
body:has(.booster-shop-grid) .pack-option:active,
body:has(.booster-shop-grid) .pack-custom,
body:has(.booster-shop-grid) .pack-custom:hover,
body:has(.booster-shop-grid) .pack-custom:focus-visible,
body:has(.booster-shop-grid) .pack-custom:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  transition: none !important;
}

/* Keep the Custom Pack's content and controls in the same layout on hover/focus. */
body:has(.booster-shop-grid) .pack-custom:hover,
body:has(.booster-shop-grid) .pack-custom:focus-within {
  margin: 0 !important;
  padding: 0 !important;
  align-self: start !important;
}

/* Preserve a subtle floating animation without enlarging or blurring the pack image. */
body:has(.booster-shop-grid) .pack-art {
  transform-origin: center center !important;
  translate: 0 0 !important;
  scale: none !important;
  transition: translate .35s cubic-bezier(.2,.8,.2,1), filter .35s ease !important;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.4)) !important;
  backface-visibility: hidden;
}
body:has(.booster-shop-grid) .pack-option:hover .pack-art,
body:has(.booster-shop-grid) .pack-option:focus-visible .pack-art {
  translate: 0 -8px !important;
  transform: rotate(0deg) !important;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.42)) !important;
}
body:has(.booster-shop-grid) .pack-premium .pack-art {
  transform: rotate(1deg) !important;
}
body:has(.booster-shop-grid) .pack-custom .pack-art {
  transform: rotate(1.5deg) !important;
}
body:has(.booster-shop-grid) .pack-custom:hover .pack-art,
body:has(.booster-shop-grid) .pack-custom:focus-visible .pack-art {
  transform: rotate(1.5deg) !important;
  translate: 0 -8px !important;
}

/* Disable hover bloom/blur; do not change card dimensions to create a glow. */
body:has(.booster-shop-grid) .pack-art-halo,
body:has(.booster-shop-grid) .pack-option::after {
  display: none !important;
  filter: none !important;
  opacity: 0 !important;
  transform: none !important;
}
body:has(.booster-shop-grid) .pack-option:hover,
body:has(.booster-shop-grid) .pack-option:focus-visible {
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}


/* FIX: prevent the Custom Pack tile from changing its grid-item size on hover.
   Keep all pack tiles stretched to their grid tracks; animate only the artwork. */
body:has(.booster-shop-grid) .pack-buttons.booster-shop-grid {
  align-items: stretch !important;
}
body:has(.booster-shop-grid) .pack-option,
body:has(.booster-shop-grid) .pack-option:hover,
body:has(.booster-shop-grid) .pack-option:focus-visible,
body:has(.booster-shop-grid) .pack-option:focus-within,
body:has(.booster-shop-grid) .pack-option:active {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body:has(.booster-shop-grid) .pack-custom:hover,
body:has(.booster-shop-grid) .pack-custom:focus-within {
  align-self: stretch !important;
}

/* On desktop, keep the tag input in its reserved slot rather than in normal flow. */
@media (min-width: 681px) {
  body:has(.booster-shop-grid) .pack-custom .custom-tag-input,
  body:has(.booster-shop-grid) .pack-custom .custom-tag-input:hover,
  body:has(.booster-shop-grid) .pack-custom .custom-tag-input:focus {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    top: auto !important;
    width: min(230px, 90%) !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* CUSTOM PACK MODAL */

.custom-pack-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(5, 4, 12, 0.72);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 220ms ease, visibility 220ms ease;
}

.custom-pack-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.custom-pack-modal-panel {
    position: relative;
    width: min(100%, 440px);
    box-sizing: border-box;
    padding: 36px 28px 28px;

    background: linear-gradient(145deg, #1b172b, #0a0a12);
    border: 1px solid #ff36c6;
    border-radius: 18px;

    text-align: center;

    box-shadow: 0 0 35px rgba(119, 65, 255, 0.18),
                0 24px 80px rgba(0, 0, 0, 0.65);

    transform: translateY(12px);
    transition: transform 220ms ease;
}

.custom-pack-modal.is-open .custom-pack-modal-panel {
    transform: translateY(0);
}

.custom-pack-modal-panel h2 {
    margin: 0 25px 10px;
    color: #f5edff;
    font-size: 25px;
    letter-spacing: 2px;
}

.custom-pack-modal-description {
    margin: 0 0 24px;
    color: #aaa4bd;
    font-size: 14px;
}

.custom-pack-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;

    border: none;
    background: transparent;
    color: #bcb5ce;

    font-size: 28px;
    cursor: pointer;
}

.custom-pack-modal-close:hover {
    color: white;
}

.custom-pack-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.custom-pack-form .custom-tag-input {
    flex: 1;
    min-width: 0;
    width: 0;
    box-sizing: border-box;
    padding: 13px;

    background: #0b0a13;
    border: 1px solid #55d9ff;
    border-radius: 9px;

    color: white;
    font-size: 14px;
    outline: none;
}

.custom-pack-form .custom-tag-input:focus {
    border-color: #55d9ff;
    box-shadow: 0 0 0 3px rgba(151, 92, 255, 0.15);
}

.custom-pack-confirm {
    flex-shrink: 0;
    padding: 0 16px;

    border: 1px solid rgba(201, 174, 255, 0.55);
    border-radius: 9px;

    background: linear-gradient(135deg, #9b61ff, #6734d6);
    color: white;

    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.custom-pack-confirm:hover {
    filter: brightness(1.15);
}

.custom-pack-confirm:disabled {
    opacity: 0.55;
    cursor: wait;
}

.custom-pack-error {
    margin: 14px 0 0;
    color: #ff858e;
    font-size: 13px;
}

.custom-pack-error:empty {
    display: none;
}

@media (max-width: 420px) {
    .custom-pack-modal-panel {
        padding: 34px 18px 24px;
    }

    .custom-pack-form {
        flex-direction: column;
    }

    .custom-pack-form .custom-tag-input,
    .custom-pack-confirm {
        width: 100%;
        min-height: 46px;
    }
}

/* =========================================================
   FIXED-VIEWPORT BOOSTER REVEAL
   The old desktop rules stacked several 100vh minimum-heights plus main padding,
   so the document became taller when the shop was hidden. Keep the reveal within
   the viewport below the header instead of expanding the page.
========================================================= */
@media (min-width: 681px) {
  body:has(.booster-shop-grid).booster-active {
    overflow: hidden !important;
  }
  body:has(.booster-shop-grid).booster-active > main {
    height: calc(100vh - var(--site-header-height, 76px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--site-header-height, 76px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 12px 24px 18px !important;
  }
  body:has(.booster-shop-grid).booster-active .pack-section {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body:has(.booster-shop-grid).booster-active #cards-container {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body:has(.booster-shop-grid).booster-active .booster-view {
    max-height: 100% !important;
    box-sizing: border-box !important;
    gap: clamp(8px, 1.2vh, 14px) !important;
    padding: 0 !important;
  }
  body:has(.booster-shop-grid).booster-active .booster-card-slot {
    width: min(300px, 42vh) !important;
    max-height: calc(100vh - 190px) !important;
  }
  body:has(.booster-shop-grid).booster-active .booster-card-slot .booster-flip-card {
    width: min(100%, 260px) !important;
    min-width: 0 !important;
  }
  body:has(.booster-shop-grid).booster-active .booster-button {
    height: 44px !important;
    margin-top: 4px !important;
  }
}
@media (max-width: 680px) {
  body:has(.booster-shop-grid).booster-active > main {
    min-height: 0 !important;
    padding-top: 10px !important;
  }
  body:has(.booster-shop-grid).booster-active .pack-section,
  body:has(.booster-shop-grid).booster-active #cards-container {
    min-height: 0 !important;
  }
}

/* =========================================================
   DECK & ARENA — consolidated page styles
   Keep these rules in one section to avoid competing overrides.
========================================================= */
.site-header .nav-deck-link,
.site-header .nav-arena-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 10px;
  color: #f7d9f1;
  border: 1px solid rgba(255, 65, 196, .24);
  border-radius: 5px;
  background: rgba(18, 9, 27, .35);
  text-decoration: none;
  font: 800 11px/1 'Rajdhani', sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 0 8px rgba(255, 43, 189, .28);
}
.site-header .nav-deck-link:hover,
.site-header .nav-arena-link:hover {
  border-color: rgba(255, 65, 196, .65);
  color: #fff;
}

.deck-page,
.arena-page {
  width: min(1500px, calc(100% - 40px));
  margin: 28px auto 60px;
  color: #f5eaf8;
}
.game-page-heading { margin-bottom: 20px; }
.game-page-heading h1 {
  margin: 0 0 8px;
  color: #ff45c6;
  font-family: 'Permanent Marker', 'Rajdhani', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  text-shadow: 0 0 18px rgba(255,43,189,.25);
}
.game-page-heading p { max-width: 1000px; color: #c7b4d0; line-height: 1.6; }
.game-panel {
  padding: 18px;
  border: 1px solid rgba(255, 61, 195, .22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 12, 32, .92), rgba(8, 9, 20, .94));
  box-shadow: 0 12px 35px rgba(0,0,0,.18), inset 0 0 24px rgba(255,43,189,.025);
}
.game-panel h2 { margin: 0 0 14px; font-size: 16px; letter-spacing: .1em; color: #f6d8f2; }
.game-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.game-button {
  border:1px solid rgba(255,70,198,.45); border-radius:7px; padding:10px 16px;
  color:#fff; background:linear-gradient(135deg,#d92eaa,#7738c7);
  font-weight:800; letter-spacing:.05em; cursor:pointer;
}
.game-button.secondary { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
.game-button:disabled { opacity:.45; cursor:not-allowed; }
.game-message { min-height:20px; margin-top:10px; color:#d7bfdc; font-size:13px; }
.game-message.is-error { color:#ff8eae !important; }

/* Deck: active deck is a single sticky horizontal bar directly under the header. */
.deck-page { width:min(1500px, calc(100% - 40px)); margin-top:0; }
body:has(.deck-page) .site-header { position:sticky; top:0; z-index:40; background:rgba(8,8,14,.94); }
.deck-page .deck-active-panel {
  position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-areas:"heading slots stats actions" "message slots help help";
  align-items:center;
  gap:8px 18px;
  margin:0 -1px 22px;
  padding:12px 18px;
  border-top:0;
  border-radius:0 0 14px 14px;
  background:rgba(11,8,19,.97);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.deck-active-panel > h2 { grid-area:heading; margin:0; white-space:nowrap; font-size:14px; }
#deck-count { grid-area:count; color:#ff8bd9; font-size:11px; text-align:center; }
.deck-page .deck-slots { grid-area:slots; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; min-width:0; }
.deck-page .deck-slot {
  min-width:0; height:112px; padding:5px; display:grid; grid-template-columns:46px minmax(0,1fr);
  grid-template-rows:1fr auto; align-items:center; gap:3px 8px; overflow:hidden;
  color:#a999b5; text-align:left; border:1px dashed rgba(255,74,198,.34);
  border-radius:8px; background:rgba(0,0,0,.18); font-size:10px;
}
.deck-page .deck-slot img { grid-row:1 / 3; width:46px; height:69px; object-fit:cover; border-radius:4px; }
.deck-page .deck-slot strong { min-width:0; color:#fff; font-size:10px; overflow:hidden; text-overflow:ellipsis; }
.deck-page .deck-slot span { min-width:0; color:#d6bfdc; font-size:9px; }
.deck-page .deck-slot.filled { cursor:pointer; border-style:solid; border-color:rgba(255,69,198,.55); }
.deck-page .deck-total-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; grid-area:stats; margin:0; color:#d8c5df; font-size:11px; }
.deck-page .deck-active-panel .game-actions { grid-area:actions; margin:0; align-self:end; }
.deck-page .deck-active-panel .game-actions .game-button { padding:8px 11px; font-size:10px; }
.deck-page .deck-active-panel .game-message { grid-area:message; margin:0; min-height:0; font-size:11px; }
.deck-page .deck-help-text { grid-area:help; margin:0; color:#a995b5; font-size:10px; line-height:1.4; text-align:right; }
.deck-page .deck-layout { display:block; }
.deck-page .deck-collection-panel { min-width:0; }
.deck-page .deck-collection-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.deck-page .deck-collection-controls #deck-search,
.deck-page .deck-collection-controls #deck-rarity,
.deck-page .deck-collection-controls #deck-sort {
  height:44px; border-radius:10px; border:1px solid #292936;
  background:#111119; color:#fff; outline:none; font-size:13px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.deck-page .deck-collection-controls #deck-search { flex:1; min-width:220px; padding:0 16px; }
.deck-page .deck-collection-controls select { min-width:150px; padding:0 12px; }
.deck-page .deck-collection-controls input:focus,
.deck-page .deck-collection-controls select:focus { border-color:#635bff; box-shadow:0 0 0 3px rgba(99,91,255,.12); }
.deck-page .deck-collection-controls select option { background:#111119; color:white; }
.deck-page .deck-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
.deck-page .deck-card.collection-card { display:block; width:100%; padding:0; text-align:left; }
.deck-page .deck-card.collection-card .collection-card-image { display:block; }
.deck-page .deck-card.collection-card .collection-card-info { display:block; padding:12px; }
.deck-page .deck-card.collection-card .deck-card-name { display:block; margin:0 0 7px; color:#f8edf9; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-page .deck-card.collection-card .collection-rarity { display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.deck-page .deck-card.collection-card .collection-stats { display:flex; justify-content:flex-start; margin-top:10px; font-size:11px; }
.deck-page .deck-card.collection-card.selected { outline:2px solid #ff45c6; outline-offset:1px; }
.deck-page .deck-load-more { display:flex; justify-content:center; }
.deck-page #deck-load-more { display:flex; justify-content:center; margin-top:20px; }

/* Arena: lobby may scroll normally; active battle is a fixed viewport layout. */
.arena-page { margin-top:22px; }
.arena-intro { max-width:1100px; padding-bottom:16px; border-bottom:1px solid rgba(255,69,198,.16); }
.arena-intro p { line-height:1.55; }
.arena-opponent-panel { margin-top:18px; }
.arena-bot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.arena-bot { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:145px; padding:16px; border:1px solid rgba(255,70,198,.22); border-radius:12px; background:rgba(20,12,32,.72); }
.arena-bot h3 { color:#ff8cdb; }
.arena-bot p { flex:1; color:#c7b4d0; font-size:13px; }
.arena-preview { margin-top:18px; }
.arena-preview-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:14px 0; }
.arena-fighter-card.collection-card { display:flex; flex-direction:column; min-width:0; min-height:0; width:100%; height:100%; padding:0; text-align:left; }
.arena-fighter-card .collection-card-image { display:block; width:100%; height:145px; flex:0 1 auto; aspect-ratio:2/3; overflow:hidden; background:#08080c; }
.arena-fighter-card .collection-card-image img { display:block; width:100%; height:100%; object-fit:cover; }
.arena-fighter-card .collection-card-info { min-height:0; padding:8px; }
.arena-fighter-card .collection-card-info h2 { margin:0 0 5px; color:#fff; font-size:clamp(9px,.8vw,13px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arena-fighter-card .collection-rarity { display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.arena-fighter-card .collection-stats { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; color:#d6bfdc; font-size:10px; }
.arena-fighter-card.is-knocked-out { opacity:.32; filter:grayscale(1); }
.arena-fighter-card.is-active { outline:2px solid #ff45c6; outline-offset:2px; }
.arena-rules-summary { color:#c7b4d0; line-height:1.5; font-size:12px; }
.arena-battle { margin-top:0; }
.arena-battle-status { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:#ead9ef; font-size:12px; }
.arena-battle-board { display:grid; grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); gap:8px; height:calc(100vh - 180px); min-height:0; }
.arena-side { min-height:0; display:flex; flex-direction:column; }
.arena-side-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; color:#f7d8f1; font-size:12px; letter-spacing:.08em; }
.arena-side-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; min-height:0; flex:1; }
.arena-side-cards > .arena-fighter-card .collection-card-image { height:auto; flex:1 1 auto; min-height:0; aspect-ratio:auto; }
.arena-side-cards > .arena-fighter-card .play-card-button { flex:0 0 auto; }
.arena-fighter-wrap { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; }
.arena-fighter-wrap .arena-fighter-card { min-height:0; height:100%; overflow:hidden; }
.arena-fighter-wrap .collection-card-image { height:calc(100% - 55px); aspect-ratio:auto; flex-shrink:1; }
.arena-fighter-wrap .collection-card-image img { height:100%; object-fit:contain; }
.arena-fighter-wrap .collection-card-info { min-height:0; padding:5px 7px; }
.arena-fighter-wrap .collection-card-info h2 { font-size:clamp(9px,.85vw,12px); }
.arena-fighter-wrap .collection-stats { font-size:10px; }
.arena-fighter-wrap .play-card-button { margin-top:auto; padding:6px 4px; font-size:9px; }
.arena-vs-banner { text-align:center; padding:6px 10px; border:1px solid rgba(255,69,198,.2); border-radius:8px; color:#ff8cdb; background:rgba(255,69,198,.06); font-size:12px; }
.arena-turn-log { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d9c4e2; font-size:11px; }
.arena-final-result { text-align:center; color:#ff8cdb; font-size:clamp(18px,2vw,26px); }
.arena-battle-actions { display:flex; justify-content:center; gap:10px; margin-top:8px; }
body.arena-fighting { height:100vh; overflow:hidden; }
body.arena-fighting .site-header { position:relative; z-index:40; }
body.arena-fighting .arena-page { width:calc(100% - 32px); height:calc(100vh - 70px); max-height:calc(100vh - 70px); overflow:hidden; margin:0 auto; padding:10px 0 12px; }
body.arena-fighting .arena-intro,
body.arena-fighting .arena-opponent-panel,
body.arena-fighting .arena-preview { display:none !important; }
body.arena-fighting .arena-battle { display:block; height:100%; padding:12px; overflow:hidden; }
body.arena-fighting .arena-battle-board { height:calc(100% - 58px); }
body.arena-fighting .arena-side-cards { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:900px) {
  .deck-page .deck-active-panel { grid-template-columns:1fr; grid-template-areas:"heading" "slots" "stats" "actions" "message" "help"; position:sticky; }
  .deck-page .deck-help-text { text-align:left; }
  .deck-page .deck-slot { height:90px; grid-template-columns:36px minmax(0,1fr); }
  .deck-page .deck-slot img { width:36px; height:54px; }
  .arena-bot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .arena-battle-board { height:calc(100vh - 205px); }
}
@media(max-width:600px) {
  .deck-page,.arena-page { width:calc(100% - 18px); }
  .deck-page .deck-active-panel { padding:10px; }
  .deck-page .deck-slots { gap:4px; }
  .deck-page .deck-slot { height:78px; display:flex; flex-direction:column; justify-content:center; text-align:center; font-size:8px; }
  .deck-page .deck-slot img { width:30px; height:42px; margin:0; }
  .deck-page .deck-slot strong { max-width:100%; font-size:8px; }
  .deck-page .deck-collection-controls #deck-search { flex-basis:100%; min-width:0; }
  .deck-page .deck-collection-controls select { flex:1; min-width:0; }
  .deck-page .deck-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .arena-bot-grid { grid-template-columns:1fr; }
  .arena-preview-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .arena-battle-board { height:calc(100vh - 180px); gap:5px; }
  .arena-side-cards { gap:4px; }
  .arena-fighter-wrap .collection-card-info { padding:3px; }
  .arena-fighter-wrap .collection-card-info h2 { font-size:8px; }
  .arena-fighter-wrap .collection-rarity,.arena-fighter-wrap .collection-stats { font-size:7px; }
  .arena-fighter-wrap .play-card-button { font-size:7px; padding:4px 1px; }
}


/* =========================================================
   DECK / ARENA LAYOUT — single final override block
   ========================================================= */
.deck-page .deck-active-panel {
  position: sticky;
  top: 70px;
  z-index: 30;
  margin: 0 -1px 22px;
  padding: 16px 18px;
  border-top: 1px solid rgba(255,69,198,.28);
  border-radius:14px;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  grid-template-areas: "heading slots actions" "message slots count" "help help stats";
  box-shadow: 0 14px 32px rgba(0,0,0,.55);
  background: rgba(11,8,19,.98);
}
.deck-page .deck-slots { align-items: stretch; }
.deck-page .deck-slot,
.deck-page .deck-slot:not(.filled) {
  height: 276px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-style: solid;
  background: linear-gradient(145deg,rgba(24,18,32,.98),rgba(7,8,14,.98));
}
.deck-page .deck-slot .collection-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  background: #08080c;
}
.deck-page .deck-slot .collection-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}
.deck-page .deck-slot .collection-card-info { display:block; min-width:0; padding:7px 8px; }
.deck-page .deck-slot .deck-slot-name {
  display:block; color:#fff; font-size:11px; line-height:1.25; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.deck-page .deck-slot .collection-rarity { display:block; margin-top:4px; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.deck-page .deck-slot .collection-stats { display:block; margin-top:5px; font-size:10px; white-space:normal; line-height:1.3; }
.deck-page .deck-slot:not(.filled) { align-items:center; justify-content:center; }
.deck-page .deck-total-stats { flex-wrap:wrap; }
.deck-page .deck-help-text { text-align:left; }

.arena-page { width:calc(100% - 40px); max-width:none; margin:14px auto 30px; }
.arena-intro { max-width:none; padding:0; margin:0 0 10px; border:0; }
.arena-intro h1 { margin:0; }
.arena-opponent-panel { width:100%; margin-top:0; }
.arena-opponent-panel > h2 { margin-bottom:10px; }
.arena-bot-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.arena-bot { min-height:185px; padding:22px; justify-content:space-between; }
.arena-bot h3 { font-size:19px; }
.arena-bot p { font-size:14px; line-height:1.5; }
.arena-bot .game-button { min-height:42px; }
.arena-preview { width:100%; }
.arena-preview-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.arena-preview-grid .arena-fighter-card { height:auto; min-width:0; align-self:start; display:flex; flex-direction:column; }
.arena-preview-grid .arena-fighter-card .collection-card-image {
  width:100%; height:auto; aspect-ratio:2/3; flex:0 0 auto; overflow:hidden;
}
.arena-preview-grid .arena-fighter-card .collection-card-image img { width:100%; height:100%; object-fit:contain; }
.arena-preview-grid .arena-fighter-card .collection-card-info { flex:1 1 auto; min-width:0; }

/* The battle board fits both teams and all controls in the viewport. */
body.arena-fighting { height:100vh; overflow:hidden; }
body.arena-fighting .site-header { position:relative; z-index:40; }
body.arena-fighting .arena-page {
  width:calc(100% - 32px); height:calc(100vh - 70px); max-height:calc(100vh - 70px);
  overflow:hidden; margin:0 auto; padding:8px 0 10px;
}
body.arena-fighting .arena-intro,
body.arena-fighting .arena-opponent-panel,
body.arena-fighting .arena-preview { display:none !important; }
body.arena-fighting .arena-battle {
  display:block; height:100%; min-height:0; box-sizing:border-box; padding:10px 12px; overflow:hidden;
}
body.arena-fighting .arena-battle-status { min-height:22px; margin-bottom:5px; }
body.arena-fighting .arena-battle-board {
  height:calc(100% - 27px); min-height:0;
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); gap:6px;
}
body.arena-fighting .arena-side { min-height:0; overflow:hidden; }
body.arena-fighting .arena-side-heading {
  flex:0 0 auto; min-height:20px; margin-bottom:4px; font-size:11px; line-height:1.2;
}
body.arena-fighting .arena-side-cards {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;
  align-items:stretch; flex:1 1 auto; min-height:0; height:100%;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card.collection-card {
  display:flex; flex-direction:column; align-self:stretch; justify-self:stretch;
  width:100%; height:100%; min-width:0; min-height:0; padding:0; overflow:hidden;
  box-sizing:border-box;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-image {
  display:block; width:100%; height:clamp(70px,16vh,155px); max-height:45%;
  min-height:0; aspect-ratio:2/3; flex:0 0 auto; overflow:hidden; background:#08080c;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-image img {
  display:block; width:100%; height:100%; object-fit:contain; object-position:center; border-radius:0;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-info {
  display:block; flex:1 1 auto; min-width:0; min-height:0; padding:5px 6px; overflow:visible;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-info h2 {
  display:block; margin:0 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#fff; font-size:clamp(9px,.8vw,12px); line-height:1.2;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-rarity {
  display:block; font-size:clamp(7px,.65vw,9px); line-height:1.2;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-stats {
  display:block; margin-top:4px; font-size:clamp(8px,.72vw,10px); line-height:1.25;
  white-space:normal; overflow-wrap:anywhere;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .play-card-button {
  display:block; flex:0 0 auto; width:calc(100% - 10px); margin:0 5px 5px;
  min-height:28px; padding:5px 2px; font-size:clamp(7px,.65vw,9px); line-height:1.1;
  white-space:normal;
}
body.arena-fighting .arena-fighter-card.is-active { outline:2px solid #ff8cdb; outline-offset:-2px; }
body.arena-fighting .arena-fighter-card.is-knocked-out { opacity:.52; }
body.arena-fighting .arena-fighter-card.is-knocked-out .collection-stats { color:#ff8caa; }
.arena-vs-banner { max-height:58px; overflow:hidden; padding:6px 10px; font-size:11px; line-height:1.3; }
.arena-result-overlay {
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  padding:20px; background:rgba(3,3,9,.72); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.arena-result-modal {
  width:min(520px,100%); padding:30px 28px; text-align:center;
  border:1px solid rgba(255,69,198,.55); border-radius:18px;
  background:linear-gradient(145deg,rgba(35,15,42,.98),rgba(8,8,16,.99));
  box-shadow:0 24px 90px rgba(0,0,0,.7),0 0 35px rgba(255,69,198,.18);
}
.arena-result-modal h2 { margin:0 0 12px; color:#ff8cdb; font-size:clamp(20px,3vw,30px); }
.arena-result-modal p { margin:0 0 24px; color:#e4d1e9; line-height:1.5; }
.arena-result-modal .game-button { min-height:48px; max-width:100%; white-space:normal; }

@media(max-width:900px) {
  .deck-page .deck-active-panel {
    top:70px; grid-template-columns:1fr; grid-template-areas:"heading" "slots" "actions" "count" "stats" "message" "help";
    max-height:calc(100vh - 70px); overflow:auto;
  }
  .deck-page .deck-slots { gap:6px; }
  .deck-page .deck-slot, .deck-page .deck-slot:not(.filled) { height:220px; }
  .arena-bot-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  body.arena-fighting .arena-page { width:calc(100% - 16px); }
  body.arena-fighting .arena-battle { padding:8px; }
  body.arena-fighting .arena-side-cards { gap:5px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-info { padding:4px 3px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-stats { font-size:8px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .play-card-button { width:calc(100% - 6px); margin:0 3px 3px; }
}
@media(max-width:600px) {
  .deck-page,.arena-page { width:calc(100% - 18px); }
  .deck-page .deck-active-panel { top:62px; padding:10px; }
  .deck-page .deck-slots { gap:4px; }
  .deck-page .deck-slot, .deck-page .deck-slot:not(.filled) { height:160px; }
  .deck-page .deck-slot .collection-card-info { padding:4px; }
  .deck-page .deck-slot .deck-slot-name { font-size:8px; }
  .deck-page .deck-slot .collection-rarity, .deck-page .deck-slot .collection-stats { font-size:7px; }
  .deck-page .deck-collection-controls #deck-search { flex-basis:100%; min-width:0; }
  .deck-page .deck-collection-controls select { flex:1; min-width:0; }
  .deck-page .deck-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .arena-page { width:calc(100% - 16px); }
  .arena-bot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .arena-bot { min-height:155px; padding:12px; }
  .arena-bot h3 { font-size:14px; }
  .arena-bot p { font-size:11px; }
  .arena-preview-grid { gap:4px; }
  body.arena-fighting .arena-page { width:calc(100% - 8px); height:calc(100vh - 62px); max-height:calc(100vh - 62px); }
  body.arena-fighting .arena-battle { padding:5px 3px; }
  body.arena-fighting .arena-battle-status { font-size:10px; }
  body.arena-fighting .arena-battle-board { height:calc(100% - 27px); gap:4px; }
  body.arena-fighting .arena-side-heading { font-size:8px; gap:3px; }
  body.arena-fighting .arena-side-cards { gap:2px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-image { height:clamp(45px,12vh,90px); }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-info { padding:3px 2px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-card-info h2 { font-size:7px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-rarity,
  body.arena-fighting .arena-side-cards > .arena-fighter-card .collection-stats { font-size:6px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .play-card-button { min-height:24px; padding:3px 1px; font-size:6px; }
  .arena-vs-banner { max-height:44px; padding:4px; font-size:9px; }
  .arena-result-modal { padding:24px 16px; }
}


/* Pack-reveal card face reused by Deck and Arena: identical art crop and info panel. */
.deck-page .booster-front-art,
.arena-page .booster-front-art,
.arena-deck-preview-modal .booster-front-art {
  position:relative; display:block; width:100%; aspect-ratio:2/3; flex:0 0 auto;
  min-height:0; overflow:hidden; background:#080a0f;
}
.deck-page .booster-front-art img,
.arena-page .booster-front-art img,
.arena-deck-preview-modal .booster-front-art img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}
.deck-page .booster-front-info,
.arena-page .booster-front-info,
.arena-deck-preview-modal .booster-front-info {
  position:relative; z-index:1; display:block; flex:0 0 auto; min-width:0;
  padding:11px 13px 12px; border-top:1px solid color-mix(in srgb, var(--rarity-color, #9a8ba5) 65%, transparent);
  background:linear-gradient(180deg,rgba(24,28,37,.98),rgba(10,12,17,.99)); text-align:left;
}
.deck-page .booster-front-info h3,
.deck-page .booster-front-info h2,
.arena-page .booster-front-info h3,
.arena-page .booster-front-info h2,
.arena-deck-preview-modal .booster-front-info h3,
.arena-deck-preview-modal .booster-front-info h2 {
  display:block; margin:0 0 6px; color:#fff; font-size:clamp(10px,1vw,16px); font-weight:800;
  line-height:1.2; white-space:normal; overflow-wrap:anywhere;
}
.deck-page .booster-front-info p,
.arena-page .booster-front-info p,
.arena-deck-preview-modal .booster-front-info p {
  display:block; margin:4px 0 0; color:#aeb4c1; font-size:clamp(8px,.75vw,11px); line-height:1.35;
}
.deck-page .booster-front-info .booster-front-rarity,
.arena-page .booster-front-info .booster-front-rarity,
.arena-deck-preview-modal .booster-front-info .booster-front-rarity {
  color:var(--rarity-color-2, #e6c9ff); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.deck-page .deck-slot .booster-front-art { aspect-ratio:2/3; }
.deck-page .deck-slot .booster-front-info { padding:7px 8px; }
.deck-page .deck-slot .booster-front-info h3,
.deck-page .deck-slot .booster-front-info h2 { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-page .deck-slot .booster-front-info p { font-size:9px; }
.arena-page .arena-fighter-card { display:flex; flex-direction:column; min-width:0; padding:0; }
.arena-page .arena-fighter-card .booster-front-info { flex:1 0 auto; }
.arena-page .arena-fighter-card .booster-front-art { flex:0 0 auto; }
.arena-page .arena-fighter-card .play-card-button { flex:0 0 auto; }
.arena-deck-preview-overlay {
  position:fixed; inset:0; z-index:9990; display:grid; place-items:center; padding:22px;
  background:rgba(3,3,9,.74); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.arena-deck-preview-modal {
  width:min(1180px,100%); max-height:min(88vh,900px); overflow:auto; padding:22px;
  border:1px solid rgba(255,69,198,.42); border-radius:18px;
  background:linear-gradient(145deg,rgba(24,17,33,.99),rgba(7,8,15,.99));
  box-shadow:0 24px 90px rgba(0,0,0,.72),0 0 32px rgba(255,69,198,.13);
}
.arena-deck-preview-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.arena-deck-preview-header h2 { margin:0; font-size:clamp(18px,2.5vw,28px); }
.arena-deck-preview-modal .arena-preview-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.arena-deck-preview-modal .arena-fighter-card { height:auto; min-width:0; }
.arena-deck-preview-modal .arena-fighter-card .booster-front-art { aspect-ratio:2/3; }
.arena-deck-preview-modal .arena-fighter-card .booster-front-info { padding:9px; }
.arena-deck-preview-modal .arena-fighter-card .booster-front-info h3 { font-size:clamp(10px,1vw,14px); }
.arena-deck-preview-modal .game-actions { margin-top:20px; }
@media(max-width:700px) {
  .arena-deck-preview-overlay { padding:8px; }
  .arena-deck-preview-modal { padding:12px; max-height:94vh; }
  .arena-deck-preview-modal .arena-preview-grid { gap:5px; }
  .arena-deck-preview-modal .arena-fighter-card .booster-front-info { padding:4px; }
  .arena-deck-preview-modal .arena-fighter-card .booster-front-info h3 { font-size:8px; }
  .arena-deck-preview-modal .arena-fighter-card .booster-front-info p { font-size:7px; }
}

/* Battle-only compact art height: retain pack-style cover crop without overflowing the viewport. */
body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-art {
  width:100%; height:clamp(58px,13vh,118px); aspect-ratio:auto; flex:0 0 auto; overflow:hidden;
}
body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-art img { width:100%; height:100%; object-fit:cover; }
body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-info { padding:5px 6px; flex:1 1 auto; min-height:0; overflow:hidden; }
body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-info h3 { font-size:clamp(8px,.8vw,12px); margin-bottom:3px; }
body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-info p { font-size:clamp(7px,.65vw,10px); margin-top:3px; line-height:1.2; }
body.arena-fighting .arena-side-cards > .arena-fighter-card .play-card-button { margin-top:auto; }
@media(max-width:600px) {
  body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-art { height:clamp(38px,10vh,68px); }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-info { padding:3px 2px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-info h3 { font-size:6px; }
  body.arena-fighting .arena-side-cards > .arena-fighter-card .booster-front-info p { font-size:5px; }
}


/* Deck active cards: size each slot from its full-width artwork, then let the
   pack-style information panel add its own height instead of being clipped. */
.deck-page .deck-slots { align-items: start; }
.deck-page .deck-slot,
.deck-page .deck-slot:not(.filled) {
  height: auto !important;
  min-height: 0;
  align-self: start;
  overflow: hidden;
  box-sizing: border-box;
}
.deck-page .deck-slot .booster-front-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  overflow: hidden;
}
.deck-page .deck-slot .booster-front-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.deck-page .deck-slot .booster-front-info {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
  padding: 7px 8px 9px;
  overflow: visible;
}
.deck-page .deck-slot .deck-slot-name {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-page .deck-slot .collection-rarity,
.deck-page .deck-slot .collection-stats {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.deck-page .deck-slot:not(.filled) { min-height: 180px; }

/* Feature additions: economy, auctions, card progression and probability transparency. */
.market-nav-link { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 11px; border:1px solid #5a426a; border-radius:8px; color:#e7c8ff; text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.08em; }
.market-nav-link:hover { border-color:#bb79f5; background:rgba(143,70,200,.15); }
.deck-selection-count { margin-top:12px; color:#aeb5c5; font-size:12px; text-align:center; }
.card-level-badge { display:inline-flex; width:max-content; margin-top:5px; padding:4px 7px; border:1px solid rgba(166,120,255,.5); border-radius:5px; color:#e2c7ff; background:rgba(114,64,170,.18); font-size:10px; font-weight:800; letter-spacing:.08em; }
.pack-probability-panel { max-width:1100px; margin:30px auto; text-align:left; }
.pack-probability-panel h2,.trade-page h1,.trade-page h2 { margin-bottom:12px; }
.pack-probability-panel > p,.trade-page .game-panel > p { color:#aab1c1; margin-bottom:16px; }
.pack-probability-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:16px; }
.pack-probability-card,.trade-listing { border:1px solid #303447; border-radius:12px; padding:16px; background:rgba(14,17,26,.8); }
.pack-probability-card h3,.trade-listing h3 { margin-bottom:10px; }
.pack-probability-card ul { list-style:none; }
.pack-probability-card li { display:flex; justify-content:space-between; gap:16px; padding:5px 0; color:#adb4c4; border-bottom:1px solid rgba(70,76,95,.3); text-transform:capitalize; font-size:12px; }
.pack-probability-card li strong { color:#f3eaff; font-variant-numeric:tabular-nums; }
.trade-page { max-width:1200px; margin:30px auto; padding:0 20px 50px; display:grid; grid-template-columns:minmax(280px, .8fr) minmax(0,1.5fr); gap:20px; }
.trade-page .game-panel { min-width:0; padding:22px; }
.trade-create-form { display:grid; gap:9px; }
.trade-create-form label { color:#c5c9d5; font-size:12px; font-weight:700; }
.trade-create-form input,.trade-create-form select { width:100%; min-height:42px; border:1px solid #34394c; border-radius:8px; padding:10px 12px; background:#111520; color:#fff; font:inherit; }
.trade-create-form .game-button { margin-top:8px; }
.trade-balance,.arena-wallet-summary { color:#c5a0ff!important; font-weight:800; }
.trade-listings { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.trade-listing p { margin:8px 0; color:#aeb5c5; font-size:12px; overflow-wrap:anywhere; }
.trade-listing .game-button { margin-top:8px; }
.trade-listing .game-button:disabled { opacity:.5; cursor:not-allowed; }
.arena-reward-line { color:#c9a4ff; font-weight:800; }
@media(max-width:800px) { .trade-page { grid-template-columns:1fr; } .market-nav-link { font-size:9px; padding:0 7px; } }
.patreon-panel { margin:24px 0; }
.patreon-content-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.patreon-content-item { padding:14px; border:1px solid #49365b; border-radius:10px; background:rgba(25,17,35,.7); }
.patreon-content-item h3 { margin-bottom:8px; }
.patreon-content-item p { color:#aeb5c5; margin-bottom:10px; }
.patreon-content-item a { color:#d9b1ff; }

/* October 2026 usability and membership update */
.site-header { gap: clamp(8px, 1.4vw, 24px); }
.header-wallet { display:inline-flex; align-items:center; gap:7px; flex:none; margin-right:auto; padding:7px 12px; border:1px solid rgba(255,79,182,.48); border-radius:11px; background:rgba(32,12,30,.88); color:#ffd5f1; font-weight:900; font-size:14px; white-space:nowrap; font-variant-numeric:tabular-nums; box-shadow:0 0 18px rgba(255,40,157,.11); }
.header-wallet .diamond-icon { color:#ff54b9; font-size:21px; text-shadow:0 0 11px #ff43ae; transform:rotate(8deg); }
.site-header .header-info { min-width:0; }
.site-header .header-info .vip-nav-link { border-color:#d9a640; color:#ffe2a0; background:linear-gradient(140deg,#432a0c,#1b1410); font-size:11px; font-weight:900; letter-spacing:.05em; white-space:nowrap; padding:0 10px; }
.site-header .market-nav-link[aria-current="page"] { background:rgba(223,70,154,.25); border-color:#fa78c7; color:#fff; box-shadow:0 0 12px rgba(253,70,165,.25); }
.pack-art-wrap { position:relative; }
.pack-rate-info { position:absolute; z-index:9; top:8px; right:8px; width:25px; height:25px; min-width:25px; padding:0; border:1px solid rgba(255,212,247,.65); border-radius:50%; background:rgba(14,10,22,.87); color:#ffddf6; font:900 14px/1 Arial,sans-serif; text-align:center; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 9px rgba(0,0,0,.45); }
.pack-rate-info:hover,.pack-rate-info:focus-visible { background:#b5398e; outline:2px solid #ffa0db; }
.pack-rates-dialog { max-width:min(450px,calc(100vw - 24px)); width:100%; max-height:80vh; overflow:auto; margin:auto; border:1px solid #b75da3; border-radius:18px; padding:23px; color:#fff; background:linear-gradient(155deg,#21152d,#090b15); box-shadow:0 20px 85px #000; }
.pack-rates-dialog::backdrop,.trade-collection-dialog::backdrop { background:rgba(3,2,9,.85); backdrop-filter:blur(6px); }
.rates-heading { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:20px; }
.rates-heading h2 { font-size:17px; line-height:1.3; }
.rates-heading .game-button { flex:none; }
.pack-rates-dialog p { font-size:13px; color:#adb0c0; margin-bottom:10px; }
.pack-rates-dialog ul { list-style:none; }
.pack-rates-dialog li { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); text-transform:capitalize; }
.pack-rates-dialog li strong { color:#ffb9e9; font-variant-numeric:tabular-nums; }
.deck-page .deck-active-panel { min-width:0; }
.deck-page .deck-panel-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; font-size:13px; font-weight:900; letter-spacing:.08em; color:#f9d5f0; }
.deck-page .deck-heading-note { font-size:10px; font-weight:600; color:#9f9ba9; }
.deck-page .deck-save-actions { display:flex; gap:8px; justify-content:stretch; }
.deck-page .deck-save-actions .game-button { flex:1; min-width:0; padding:9px; font-size:12px; }
.deck-page .deck-selection-count { margin:8px 0; font-size:11px; }
.deck-page .deck-help-text { font-size:11px; line-height:1.4; opacity:.77; }
.deck-page .deck-total-stats { gap:5px; margin-top:7px; }
.deck-page .deck-total-stats span { font-size:10px; }
.deck-card-grid .card-level-badge,.collection-container .card-level-badge { max-width:100%; white-space:normal; line-height:1.3; letter-spacing:0; font-size:9px; }
.arena-intro { margin:4px 0 20px; color:#b8abc0; font-size:13px; }
.arena-intro strong { color:#ff89d8; }
.arena-bot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; }
.arena-bot { position:relative; overflow:hidden; border:1px solid rgba(212,108,197,.25); border-radius:15px; background:linear-gradient(158deg,rgba(35,25,43,.93),rgba(13,14,25,.97)); box-shadow:0 8px 22px rgba(0,0,0,.22); padding:19px; gap:10px; }
.arena-bot:hover { border-color:rgba(253,108,193,.62); box-shadow:0 8px 28px rgba(208,47,147,.16); }
.arena-bot h3 { color:#fff1fd; font-size:17px; letter-spacing:.02em; }
.arena-bot p { color:#afadc3; font-size:12px; line-height:1.5; }
.arena-bot-status { display:inline-flex; width:max-content; color:#ff95d4; font-weight:850; font-size:10px; letter-spacing:.08em; }
.arena-wallet-summary { grid-column:1/-1; width:max-content; margin:0 0 2px; padding:8px 13px; border:1px solid rgba(255,101,186,.3); border-radius:12px; background:rgba(69,22,60,.3); }
.trade-selected-card { display:flex; align-items:center; min-height:90px; gap:13px; background:rgba(15,19,30,.8); border:1px dashed #66536b; border-radius:12px; padding:10px; color:#a6a6b6; }
.trade-selected-card img { width:64px; height:84px; object-fit:cover; border-radius:7px; }
.trade-selected-card strong { color:#ffecfb; }
.trade-selected-card p { margin-top:6px; color:#a6a6b6; font-size:12px; }
.trade-collection-dialog { width:min(1070px,calc(100vw - 20px)); max-width:1070px; max-height:90vh; overflow:auto; margin:auto; padding:22px; border:1px solid #9d5f8e; border-radius:18px; color:#fff; background:linear-gradient(140deg,#1f192c,#090d17); box-shadow:0 28px 100px #000; }
.trade-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.trade-dialog-header h2 { color:#ffceeb; }
.trade-dialog-header p { margin-top:5px; color:#adb1c3; font-size:12px; }
.trade-collection-tools { display:flex; gap:9px; margin-bottom:16px; }
.trade-collection-tools input,.trade-collection-tools select { min-width:0; border-radius:9px; border:1px solid #4b4054; background:#101422; color:#fff; padding:11px; }
.trade-collection-tools input { flex:1; }
.trade-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:13px; padding:4px 0; }
.trade-picker-card { cursor:pointer; display:flex; flex-direction:column; gap:7px; text-align:left; padding:9px; border:1px solid #40354e; border-radius:12px; background:#141522; color:#fff; }
.trade-picker-card:hover,.trade-picker-card:focus-visible { border-color:#ff92d5; background:#25172a; transform:translateY(-2px); }
.trade-picker-card img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:7px; }
.trade-picker-card strong { font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.trade-picker-card span { font-size:11px; color:#beacc0; }
#trade-load-more { margin:20px auto 0; display:block; }
#trade-load-more[hidden] { display:none; }
.trade-listing-image { max-width:100%; height:150px; object-fit:cover; border-radius:8px; display:block; margin:0 auto 9px; }
.vip-page { max-width:1200px; margin:35px auto; padding:0 20px 50px; }
.vip-hero { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 20px; background:radial-gradient(ellipse at top,rgba(131,83,10,.24),rgba(16,15,25,.98) 67%); border:1px solid rgba(238,188,72,.36); }
.vip-hero h1 { color:#ffe4a1; font-size:clamp(25px,4vw,48px); letter-spacing:.04em; }
.vip-hero p { max-width:560px; font-size:14px; color:#c5b9a5; line-height:1.6; }
.vip-crown { font-size:12px; color:#f6cc79; font-weight:900; letter-spacing:.19em; }
.vip-pack-art { width:min(280px,100%); filter:sepia(.6) saturate(1.8) hue-rotate(352deg) drop-shadow(0 0 25px rgba(240,175,36,.32)); }
.vip-pack-art img { display:block; width:100%; height:auto; }
.vip-pack-meta { display:flex; gap:22px; color:#f4d39b; font-size:15px; }
.vip-rewards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:15px; margin-top:16px; }
.vip-reward { padding:12px; border:1px solid rgba(233,168,72,.45); border-radius:13px; background:#171520; }
.vip-reward img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:8px; }
.vip-reward h3 { font-size:14px; margin:9px 0; }
.vip-reward p { font-size:12px; color:#c1b5a6; }
.vip-locked { max-width:520px; margin:70px auto; padding:25px; text-align:center; }
.vip-locked h1 { color:#ffdd92; margin-bottom:12px; }
.vip-locked p { margin-bottom:15px; color:#bbb; }
@media (max-width:1100px) { .site-header { padding:0 12px; gap:6px; } .header-wallet { padding:5px 7px; font-size:11px; } .site-header .header-info { gap:3px; } .site-header .header-info .vip-nav-link { padding:0 5px; font-size:9px; } }
@media (max-width:700px) { .header-wallet { margin-right:0; } .site-header { height:auto; min-height:75px; flex-wrap:wrap; justify-content:center; padding:8px; } .site-header .header-info { width:100%; justify-content:center; flex-wrap:wrap; } .trade-page { padding:0 10px 25px; } .trade-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .trade-collection-tools { flex-wrap:wrap; } .trade-collection-tools input { flex-basis:100%; } .arena-bot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .arena-bot { padding:11px; } .arena-bot h3 { font-size:13px; } }

/* Auction cards share the collection artwork, rarity borders and stats. */
.trade-page { grid-template-columns:minmax(260px,.65fr) minmax(0,1.5fr); }
.trade-listings.collection-container { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
.trade-auction-card { cursor:default; }
.trade-page .trade-auction-card h2 { margin:0 0 7px; }
.trade-auction-card .collection-stats { flex-wrap:wrap; gap:8px; }
.trade-auction-card .trade-auction-price { margin:12px 0 7px; color:#ffb5df; font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; }
.trade-auction-seller { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trade-auction-seller,.trade-auction-timer { margin:6px 0; color:#aeb5c5; font-size:10px; }
.trade-auction-card .game-button { width:100%; margin-top:8px; padding:9px 5px; font-size:11px; }
.trade-auction-card .game-button:disabled { opacity:.5; cursor:not-allowed; }
.trade-auction-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.trade-auction-filters label { display:grid; gap:6px; min-width:0; color:#c5c9d5; font-size:11px; font-weight:700; }
.trade-auction-filters input,.trade-auction-filters select { width:100%; min-width:0; min-height:40px; padding:9px; border:1px solid #4b4054; border-radius:8px; background:#101422; color:#fff; font:inherit; }
.trade-auction-filters input:focus-visible,.trade-auction-filters select:focus-visible { outline:2px solid #ff92d5; outline-offset:2px; }
.trade-filter-name { grid-column:1/-1; }
.trade-auction-filters .game-button { align-self:end; min-height:40px; }
.trade-auctions-empty { grid-column:1/-1; padding:25px 0; color:#aeb5c5; }
#auction-count { font-size:12px; }
@media(max-width:800px) { .trade-page { grid-template-columns:1fr; } }
@media(max-width:380px) { .trade-listings.collection-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .trade-auction-card .collection-card-info { padding:9px; } }

/* Compact page actions and membership flow. */
.trade-page { display:block; }
.trade-auction-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
.trade-filter-name { grid-column:span 2; }
.trade-filter-actions { display:flex; gap:8px; align-items:end; grid-column:span 2; }
.trade-filter-actions .game-button { flex:1; }
.trade-add-button,.membership-button { color:#fff; border:1px solid #ff83c6; background:linear-gradient(135deg,#dd398f,#a92770); box-shadow:0 4px 16px rgba(221,57,143,.2); }
.trade-add-button:hover,.membership-button:hover { background:linear-gradient(135deg,#ee50a3,#c23285); }
.trade-create-dialog { width:min(410px,calc(100vw - 24px)); max-height:90vh; overflow:auto; margin:auto; padding:22px; border:1px solid #7e496e; border-radius:18px; background:linear-gradient(145deg,#22152c,#0d101b); color:#fff; box-shadow:0 25px 90px #000; }
.trade-create-dialog::backdrop { background:rgba(3,2,9,.8); backdrop-filter:blur(6px); }
.trade-create-dialog h2 { font-size:18px; }
.trade-popup-close { width:30px; height:30px; border:0; border-radius:50%; color:#d5b6cd; background:rgba(255,255,255,.06); font-size:23px; cursor:pointer; }
.trade-card-slot { display:block; width:150px; min-height:225px; margin:0 auto 12px; padding:0; border:1px dashed #be689d; border-radius:14px; background:rgba(255,90,180,.05); color:#e4b7d6; cursor:pointer; overflow:hidden; }
.trade-card-slot:not(.collection-card) #trade-selected-card { display:flex; min-height:225px; flex-direction:column; align-items:center; justify-content:center; gap:12px; font-size:12px; }
.trade-slot-plus { font-size:38px; color:#ff80c6; font-weight:300; }
.trade-card-slot.collection-card { border-style:solid; min-height:0; text-align:left; }
.trade-card-slot #trade-selected-card { display:block; }
.trade-bid-fields { display:grid; gap:8px; }
.trade-create-dialog .game-message:empty,#trade-market-message:empty,#deck-message:empty { display:none; }
.trade-card-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
.trade-picker-card.collection-card { display:block; padding:0; text-align:left; color:#fff; background:linear-gradient(145deg,#191923,#0d0d12); border-color:var(--collection-rarity-color); }
.trade-picker-card.collection-card .collection-card-image,.trade-card-slot .collection-card-image { display:block; }
.trade-picker-card.collection-card img { border-radius:0; }
.trade-picker-card.collection-card .collection-card-info,.trade-card-slot .collection-card-info { display:block; }
.trade-picker-name { display:block; margin-bottom:7px; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trade-picker-card.collection-card .collection-rarity { font-size:10px; color:var(--collection-rarity-color); }
.trade-picker-card.collection-card .collection-stats,.trade-card-slot .collection-stats { flex-wrap:wrap; gap:7px; }
.trade-picker-quantity { display:block; font-size:10px; color:#bda9c0; margin-top:8px; }
.trade-picker-card.collection-card:focus-visible,.trade-card-slot:focus-visible { outline:2px solid #ff92d5; outline-offset:3px; }
.trade-collection-dialog { width:min(780px,calc(100vw - 24px)); }
.deck-page .deck-active-panel { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"slots actions" "slots stats"; gap:12px 20px; align-items:center; }
.deck-page .deck-active-panel .game-actions { align-self:end; }
.deck-page .deck-total-stats { align-self:start; flex-direction:column; margin:0; align-items:flex-start; gap:7px; }
.pack-rate-info { top:10px; right:10px; width:28px; height:28px; min-width:28px; border:1px solid rgba(255,255,255,.24); background:rgba(15,12,24,.72); color:#f5d8ec; font:600 15px/1 Georgia,serif; box-shadow:0 3px 12px rgba(0,0,0,.25); transition:background .15s,border-color .15s; }
.pack-rate-info:hover,.pack-rate-info:focus-visible { background:#662746; border-color:#ff9cd4; outline:2px solid rgba(255,156,212,.5); outline-offset:2px; }
.patreon-panel { scroll-margin-top:100px; }
.patreon-panel .game-button { display:inline-block; text-decoration:none; margin:0 0 15px; }
.patreon-panel [hidden],.vip-page[hidden],.vip-locked[hidden] { display:none; }
.patreon-code-form { max-width:540px; margin:20px 0 0; }
.patreon-code-form label { display:block; margin-bottom:9px; color:#d7bad3; font-size:13px; }
.patreon-code-form > .help-note { margin:0 0 12px; }
.patreon-code-form > .game-message:empty { display:none; }
.patreon-code-form > div { display:flex; gap:9px; }
.patreon-code-form input { flex:1; min-width:0; border:1px solid #5b3c59; border-radius:9px; padding:11px; color:#fff; background:#11111c; }
.patreon-code-form .game-button { margin:0; white-space:nowrap; }
.vip-locked .game-button { display:inline-block; text-decoration:none; }
@media(max-width:800px) {
  .trade-auction-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .deck-page .deck-active-panel { grid-template-columns:1fr; grid-template-areas:"slots" "actions" "stats"; gap:10px; }
  .deck-page .deck-total-stats { flex-direction:row; justify-content:center; }
}
@media(max-width:480px) { .patreon-code-form > div { flex-direction:column; } .trade-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.trade-create-dialog .trade-create-form { grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:center; }
.trade-create-dialog .trade-card-slot { width:110px; min-height:165px; margin:0; }
.trade-create-dialog .trade-card-slot:not(.collection-card) #trade-selected-card { min-height:165px; }
.trade-create-dialog .trade-card-slot .collection-card-info { padding:8px; }
.trade-create-dialog .trade-card-slot .collection-stats,.trade-create-dialog .trade-card-slot .trade-picker-quantity { display:none; }
.trade-create-dialog .trade-card-slot .trade-picker-name { font-size:12px; }
.trade-create-dialog #trade-submit { grid-column:1/-1; margin:0; }
.trade-create-dialog .trade-bid-fields { align-self:center; }

.site-header #username-display.nav-account-link { display:inline-flex; align-items:center; justify-content:center; }
.trade-create-dialog .trade-bid-fields select { font-size:12px; padding:8px; }

/* One header component and sizing system across every page. */
body .site-header { position:sticky; top:0; z-index:40; width:100%; min-height:70px !important; height:70px !important; padding:0 20px !important; gap:20px; background:rgba(8,8,14,.96); display:flex; align-items:center; align-content:center; flex-wrap:nowrap; }
body .site-header .site-logo-link { flex:0 0 auto; padding:0; margin:0; align-self:center; }
body .site-header .site-logo-image { width:90px !important; height:50px; max-height:50px !important; object-fit:contain; }
body .site-header .header-wallet { border:0; border-radius:0; background:transparent; box-shadow:none; padding:0; margin:0 auto 0 0; font-size:14px; gap:7px; }
body .site-header .header-info { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:0; align-self:center; transform:none; }
body .site-header .header-info a.nav-image-link,body .site-header .header-info #logout-button { display:inline-flex !important; width:auto; min-width:0 !important; max-width:none; height:38px !important; min-height:38px !important; padding:4px !important; margin:0; border:0 !important; background:transparent !important; box-shadow:none !important; align-items:center; justify-content:center; border-radius:0 !important; transform:none; }
body .site-header .header-info .nav-wordmark { height:28px !important; max-height:28px !important; width:auto !important; object-fit:contain; }








body .site-header .header-info a.nav-image-link:hover,body .site-header .header-info #logout-button:hover { filter:drop-shadow(0 0 5px rgba(255,45,167,.45)) !important; }
body .site-header .header-info a[aria-current="page"] .nav-wordmark { filter:drop-shadow(0 0 4px rgba(255,60,176,.6)) !important; }
.arena-solo-grid { display:flex !important; justify-content:center; }
.arena-solo-grid .arena-fighter-card { width:min(240px,100%); flex:0 1 240px; }
.arena-fighter-card .card-level-badge { display:block; margin:7px 0; font-size:10px; color:#ff94cf; }
@media(max-width:1150px) { body .site-header { height:auto !important; min-height:70px !important; flex-wrap:wrap; gap:8px 10px; padding:8px 12px !important; } body .site-header .header-info { width:100%; gap:6px; } }
@media(max-width:650px) {
  body .site-header { justify-content:center; gap:12px; }
  body .site-header .header-wallet { margin:0; font-size:13px; }
  body .site-header .header-info { gap:4px; }
  body .site-header .header-info a.nav-image-link,body .site-header .header-info #logout-button { height:32px !important; min-height:32px !important; padding:2px !important; }
  body .site-header .header-info .nav-wordmark { height:22px !important; max-height:22px !important; }
  
  
  
  
  
  
  
  
  .deck-page .deck-active-panel { position:static; }
}

/* Base and level bonus components in collection details. */
.card-detail-stats .card-stat-breakdown { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; font-size:clamp(16px,2.2vw,24px); }
.card-detail-stats .card-stat-breakdown span { font:inherit; margin:0; }
.card-detail-info .card-stat-base,.card-detail-stats .card-stat-base { color:#9da3b0; }
.card-detail-info .card-stat-bonus,.card-detail-stats .card-stat-bonus { color:#ff65bb; }
.card-detail-stats .card-stat-plus { color:#777e8d; }
.card-stat-legend { margin:12px 0 8px; color:#9297a4; font-size:11px; }

/* Consistent, restrained rarity halos across every card surface. */
.rarity-common,.booster-card-slot.booster-tier-common { --card-tint:#929baa; }
.rarity-uncommon,.booster-card-slot.booster-tier-uncommon { --card-tint:#42d77d; }
.rarity-rare,.booster-card-slot.booster-tier-rare { --card-tint:#3d8cff; }
.rarity-epic,.booster-card-slot.booster-tier-epic { --card-tint:#a855f7; }
.rarity-legendary,.booster-card-slot.booster-tier-legendary { --card-tint:#ffae22; }
.rarity-mythic,.booster-card-slot.booster-tier-mythic { --card-tint:#ff3b81; }
.rarity-transcendent,.booster-card-slot.booster-tier-transcendent { --card-tint:#38bdf8; }
.rarity-divine,.booster-card-slot.booster-tier-divine { --card-tint:#fff2a8; }

.rarity-transcendent,.collection-card.rarity-transcendent,.card-modal-content.rarity-transcendent,.booster-card-slot.booster-tier-transcendent {
 --card-tint:#38bdf8 !important; --rarity-color:#38bdf8 !important; --rarity-color-2:#7dd3fc !important; --fx-color:#38bdf8 !important; --fx-color-2:#7dd3fc !important;
 --rarity-glow:rgba(56,189,248,.28) !important; --collection-rarity-color:#38bdf8 !important; --collection-rarity-glow:rgba(56,189,248,.25) !important;
 --detail-rarity-color:#38bdf8 !important; --detail-rarity-glow:rgba(56,189,248,.3) !important;
}
:is(.card,.collection-card,.deck-slot.filled,.booster-flip-card,.booster-card-front,.vip-reward) {
 border-color:var(--card-tint,#929baa) !important;
 box-shadow:0 6px 18px rgba(0,0,0,.3),0 0 var(--card-halo,12px) color-mix(in srgb,var(--card-tint,#929baa) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--card-tint,#929baa) 12%,transparent) !important;
}
:is(.collection-container,.deck-slots,.arena-preview-grid,.arena-side-cards,.trade-card-grid) { --card-halo:8px; }
.card-modal-content { box-shadow:0 20px 65px rgba(0,0,0,.65),0 0 24px color-mix(in srgb,var(--card-tint,#929baa) 35%,transparent) !important; }
.collection-card.rarity-transcendent .collection-rarity,.rarity-transcendent .booster-front-rarity,.rarity-transcendent .card-detail-rarity { color:#7dd3fc !important; }
.trade-filter-actions { grid-column:1/-1; flex-wrap:wrap; }
.trade-filter-actions .game-button { flex:1 1 145px; box-sizing:border-box; height:40px; min-height:40px; padding:8px 10px; font-size:11px; line-height:1.2; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
.trade-escrow-note { color:#baacc0; font-size:11px; line-height:1.5; margin-top:12px; }
.trade-offer-type { color:#ff9dcc; font-size:10px; font-weight:800; letter-spacing:.06em; margin:0 0 8px; }
/* Cards shrink to the viewport; preview actions always stay in view. */
.arena-deck-preview-modal { width:min(1100px,100%); max-height:calc(100dvh - 32px); overflow:hidden; display:flex; flex-direction:column; padding:16px; }
.arena-deck-preview-header { flex:none; margin-bottom:8px; }
.arena-deck-preview-header h2 { font-size:clamp(14px,2vw,24px); }
.arena-deck-preview-header .arena-preview-close { position:static; flex:none; width:32px; height:32px; }
.arena-deck-preview-modal .arena-preview-grid { --preview-card-width:min(180px,calc((100vw - 88px)/var(--preview-count,5)),max(40px,calc((100dvh - 300px)*.6667))); grid-template-columns:repeat(var(--preview-count,5),minmax(0,1fr)); gap:10px; min-height:0; margin:8px 0; align-items:start; }
.arena-deck-preview-modal .arena-fighter-card { width:100%; max-width:var(--preview-card-width); height:auto; flex:0 1 var(--preview-card-width); justify-self:center; }
.arena-deck-preview-modal .arena-fighter-card .booster-front-info { padding:6px; }
.arena-deck-preview-modal .arena-fighter-card .booster-front-info p { font-size:10px; line-height:1.25; margin:4px 0; }
.arena-deck-preview-modal .game-actions { flex:none; margin-top:8px; display:flex; justify-content:center; gap:8px; }
@media(max-width:700px) { .arena-deck-preview-overlay { padding:8px; } .arena-deck-preview-modal { max-height:calc(100dvh - 16px); padding:10px; } .arena-deck-preview-modal .arena-preview-grid { gap:4px; } .arena-deck-preview-modal .arena-fighter-card .booster-front-info p { font-size:8px; } }
@media(max-height:450px) { .arena-deck-preview-modal { padding:8px; } .arena-deck-preview-modal .arena-fighter-card .booster-front-score { display:none; } .arena-deck-preview-modal .arena-fighter-card .booster-front-info p { font-size:8px; margin:2px 0; } .arena-deck-preview-modal .game-actions .game-button { padding:7px 10px; font-size:10px; } }

/* Shared booster and community surfaces. */
[hidden] { display:none !important; }
body:has(.booster-shop-grid) .pack-buttons.booster-shop-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:1200px; }
body:has(.booster-shop-grid) .pack-option .pack-art,body:has(.booster-shop-grid) .pack-option:hover .pack-art,body:has(.booster-shop-grid) .pack-option:focus-visible .pack-art { transform:translateY(0) !important; width:100% !important; height:100% !important; object-fit:contain; transition:transform .28s ease,filter .28s ease; }
body:has(.booster-shop-grid) .pack-option:hover .pack-art,body:has(.booster-shop-grid) .pack-option:focus-visible .pack-art { transform:translateY(-7px) !important; filter:drop-shadow(0 10px 16px #ff48aa44); }
body:has(.booster-shop-grid) .pack-option,body:has(.booster-shop-grid) .pack-option:hover { transform:none !important; }
body:has(.booster-shop-grid) .pack-art-wrap { height:280px; }
.custom-pack-modal-panel { padding:14px 18px 18px; }
.custom-pack-modal-panel .custom-pack-modal-description { min-height:28px; margin:0 36px 12px; display:flex; align-items:center; justify-content:center; color:#e7deee; font-size:13px; line-height:1.35; }
.custom-pack-modal-panel .tag-info { position:absolute; top:14px; left:18px; right:auto; width:28px; height:28px; padding:0; margin:0; display:grid; place-items:center; line-height:1; }
.custom-pack-modal-panel .custom-pack-modal-close { top:14px; right:18px; left:auto; width:28px; height:28px; padding:0; display:grid; place-items:center; line-height:1; }
.custom-pack-modal-panel .custom-pack-form { gap:8px; }
.custom-pack-modal-panel .custom-tag-input { padding:11px 12px; }
.custom-tags-dialog { width:min(420px,calc(100vw - 24px)); box-sizing:border-box; padding:18px; }
.custom-tags-dialog .rates-heading { margin-bottom:12px; }
.custom-tags-close { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; background:transparent; color:#c8bbd4; font-size:26px; line-height:1; cursor:pointer; }
.custom-tags-close:hover { color:#ff8bc8; }
.custom-tags-dialog .custom-tags-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0; margin:0 0 12px; }
.custom-tags-dialog .custom-tags-list li { display:block; padding:8px 10px; border:1px solid #ff78be25; border-radius:7px; background:#ff78be08; color:#e4d4eb; font-size:12px; text-transform:none; overflow-wrap:anywhere; }
.custom-tags-dialog>p { margin:0; line-height:1.5; }
.booster-copy-count { color:#ff87c6;font-weight:800; }
.vip-benefits { text-align:left;color:#cbbbd1;line-height:1.7;padding-left:22px; }
.notification-bell { position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border:0;background:transparent;color:#ff9bcd;cursor:pointer; }
.notification-badge { position:absolute;top:-4px;right:-5px;background:#ff489e;color:#fff;border-radius:12px;min-width:17px;padding:2px 4px;font-size:10px;font-weight:800; }

.community-dialog { color:#f7ecff;background:#160e21;border:1px solid #ff65bb55;border-radius:16px;padding:22px;width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 16px 80px #000b; }
.community-dialog::backdrop { background:#050309cc;backdrop-filter:blur(5px); }
.community-dialog.notification-dialog {box-sizing:border-box;max-height:50dvh;overflow:hidden;}
.community-dialog.notification-dialog[open] {display:flex;flex-direction:column;}
.notification-dialog>.rates-heading {flex-shrink:0;}
.notification-dialog>.rates-heading+div {min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.notification-row>.game-button {display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:130px;min-height:38px;padding:9px 12px;font-size:11px;line-height:1.2;text-decoration:none;vertical-align:middle;}
.notification-row>.game-button+.game-button {margin-left:10px;}
.community-dialog input { display:block;box-sizing:border-box;width:100%;margin:14px 0;padding:12px;color:white;background:#ffffff08;border:1px solid #ffffff26;border-radius:8px; }
.rates-heading { gap:12px; }.rates-heading h2 { font-size:20px; }
.notification-row { padding:12px 0;border-bottom:1px solid #ffffff15; }.notification-row p { margin:5px 0; }.notification-detail,.notification-row time { font-size:12px;color:#beaec9; }.notification-row time { display:block;margin:8px 0; }
.profile-gallery { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0; }.profile-gallery .collection-card,.gallery-picker-grid .collection-card { width:100%;height:auto;min-width:0; }.profile-gallery .collection-card-image,.gallery-picker-grid .collection-card-image { aspect-ratio:2/3;height:auto; }.profile-gallery .collection-card-info { padding:8px;font-size:11px; }
.gallery-empty { border:1px dashed #ff77bd60;border-radius:12px;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;color:#b9a6c5; }
.gallery-choose { border:0;background:transparent;color:inherit;padding:0;width:100%;text-align:left;cursor:pointer; }.gallery-choose:disabled { opacity:.4;cursor:default; }.gallery-slot>.game-button { width:100%;margin-top:8px;padding:8px;font-size:10px; }
.gallery-picker-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin:14px 0; }
.public-stats { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.public-stats dt { color:#b7a6c6; }.public-stats dd { margin:0;text-align:right; }
.ranking-scroll { overflow:auto; }.ranking-table { width:100%;border-collapse:collapse; }.ranking-table th,.ranking-table td { text-align:left;padding:12px 8px;border-bottom:1px solid #ffffff12;white-space:nowrap; }.player-name,.player-search-result { background:transparent;color:#ff87c6;border:0;font:inherit;cursor:pointer; }.player-search-result { display:block;padding:12px;width:100%;text-align:left; }.own-rank { padding:15px;border:1px solid #ff65bb55;border-radius:10px;background:#ff65bb0d; }.profile-member #lookup-user { margin-bottom:14px; }
@media(max-width:650px){.profile-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }.community-dialog { padding:14px; }.ranking-table th,.ranking-table td { padding:10px 6px;font-size:12px; }}
@media(prefers-reduced-motion:reduce){body:has(.booster-shop-grid) .pack-option .pack-art { transition:none; }}

@media(min-width:1000px){body:has(.booster-shop-grid):not([data-pack-page="vip"]) .hero{width:calc(100% - 56px) !important;max-width:1200px !important;}body:has(.booster-shop-grid):not([data-pack-page="vip"]) .pack-buttons.booster-shop-grid{width:100% !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:24px !important;}}

.community-dialog { margin:auto; }
.profile-gallery .collection-card-info strong,.profile-gallery .collection-card-info>.collection-rarity,.gallery-picker-grid .collection-card-info strong,.gallery-picker-grid .collection-card-info>.collection-rarity { display:block;margin-bottom:5px; }

body:has(.booster-shop-grid) .pack-option .pack-art,body:has(.booster-shop-grid) .pack-option:hover .pack-art,body:has(.booster-shop-grid) .pack-option:focus-visible .pack-art { translate:0 0 !important; transition:transform .28s ease,filter .28s ease !important; }
body:has(.booster-shop-grid) .pack-option:hover .pack-art,body:has(.booster-shop-grid) .pack-option:focus-visible .pack-art { filter:drop-shadow(0 10px 16px #ff48aa44) !important; }

/* Booster hover follows the artwork, not the stock/timer area below it. */
body:has(.booster-shop-grid) .pack-option { cursor:default; }
body:has(.booster-shop-grid) .pack-option .pack-art { cursor:pointer; }
body:has(.booster-shop-grid) .pack-option:not(:focus-visible) .pack-art:not(:hover) {
  transform:translateY(0) !important;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.4)) !important;
}
body:has(.booster-shop-grid) .pack-option .pack-art:hover {
  transform:translateY(-7px) !important;
  filter:drop-shadow(0 10px 16px #ff48aa44) !important;
}

/* Header height follows its contents on every page and viewport. */
body .site-header { flex:0 0 auto !important; height:auto !important; min-height:70px !important; max-height:none !important; padding:10px 20px !important; flex-wrap:wrap !important; align-items:center; align-content:center; box-sizing:border-box; }
body .site-header .header-info { flex:0 1 auto; height:auto !important; min-height:0; max-height:none !important; align-items:center; flex-wrap:wrap; }
body .site-header .header-info>a,body .site-header .header-info>button { flex-shrink:0; }
body .site-header .site-logo-link { line-height:0; }
@media(max-width:1150px){body .site-header { padding:8px 12px !important; }body .site-header .header-info { flex-basis:100%; width:100%; }}

/* Both shops use natural content height: scrolling appears only when needed. */
body[data-pack-page]:not(.booster-active) { height:auto !important; min-height:100dvh !important; max-height:none !important; overflow-x:hidden !important; overflow-y:auto !important; }
body[data-pack-page]:not(.booster-active)>main { display:block !important; flex:1 0 auto; min-height:0 !important; height:auto !important; max-height:none !important; padding:18px 20px 20px !important; overflow:visible !important; }
body[data-pack-page]:not(.booster-active) .pack-section { display:none !important; }
body[data-pack-page]:not(.booster-active) .hero { display:block; width:min(1200px,100%) !important; max-width:1200px !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 auto !important; padding:16px !important; overflow:visible !important; }
body[data-pack-page="vip"]:not(.booster-active) .hero { width:min(1100px,100%) !important; max-width:1100px !important; }
body[data-pack-page]:not(.booster-active) .booster-shop-grid { container-type:normal; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)) !important; grid-template-rows:auto; width:100%; height:auto; gap:24px !important; margin:16px 0 0 !important; padding:0 !important; }
body[data-pack-page]:not(.booster-active) .pack-option { display:flex; flex-direction:column; align-items:center; justify-content:start; height:auto !important; min-height:0 !important; padding:0 !important; gap:0; }
body[data-pack-page]:not(.booster-active) .pack-art-wrap { width:100% !important; height:clamp(250px,44dvh,390px) !important; min-height:0; flex:none; }
body[data-pack-page]:not(.booster-active) .pack-metrics { flex:none; flex-wrap:wrap; justify-content:center; gap:5px 12px !important; padding:10px 0 0 !important; margin:0 !important; }
body[data-pack-page]:not(.booster-active) .pack-metric { padding:0 !important; }
body[data-pack-page="vip"] .vip-booster-heading img { width:min(775px,100%,96dvh); height:clamp(46px,12dvh,100px); max-height:100px; object-fit:cover; filter:drop-shadow(0 0 8px #ffcd4d25); }
body[data-pack-page="vip"]:not(.booster-active) .hero>p { margin:4px 0 !important; font-size:clamp(12px,1.3vw,16px) !important; }
@media(min-width:1000px){body[data-pack-page="regular"]:not(.booster-active) .booster-shop-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }body[data-pack-page="vip"]:not(.booster-active) .booster-shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }}
@media(max-width:680px){body[data-pack-page]:not(.booster-active)>main { padding:12px 10px 20px !important; }body[data-pack-page]:not(.booster-active) .hero { padding:12px 8px !important; }body[data-pack-page]:not(.booster-active) .booster-shop-grid { gap:20px !important; }body[data-pack-page]:not(.booster-active) .pack-art-wrap { height:clamp(250px,65vw,350px) !important; }}

/* Ranking keeps its controls and personal position outside the scrolling list. */
body[data-community-page="ranking"] { height:100dvh !important; min-height:0 !important; max-height:100dvh !important; overflow:hidden !important; display:flex; flex-direction:column; }
body[data-community-page="ranking"]>.ranking-page { flex:1 1 0; min-height:0 !important; height:auto !important; max-height:none !important; width:min(1140px,100%); margin:0 auto; padding:22px !important; overflow:hidden !important; display:flex !important; }
.ranking-page>.ranking-panel { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; margin:0; padding:22px; border-color:#ff65bb35; background:linear-gradient(145deg,#201428e8,#0d0b14f5); }
.ranking-heading { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }.ranking-heading h1 { font-size:32px; color:#fff0fb; text-shadow:0 0 16px #ff65bb35; }.ranking-heading .profile-eyebrow { color:#ff85c5; }.ranking-limit { color:#d39cbe; border:1px solid #ff65bb35; padding:6px 10px; border-radius:20px; font-size:11px; letter-spacing:.1em; }
.ranking-filters { flex:none; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }.ranking-filters button { padding:9px 16px; border:1px solid #ff65bb35; border-radius:9px; color:#cebad6; background:#ffffff05; font:700 12px Arial,sans-serif; cursor:pointer; }.ranking-filters button[aria-pressed="true"] { color:#fff; background:linear-gradient(135deg,#d62b91,#a81f72); border-color:#ff85c5; box-shadow:0 0 16px #ff65bb25; }
#ranking-status { flex:none; font-size:12px; color:#c7a9ce; margin-bottom:10px; }#ranking-status:empty { display:none; }
.ranking-description {flex:none;font-size:11px;line-height:1.5;color:#bca5c6;margin:0 0 12px;}
.ranking-description[hidden] {display:none;}
.ranking-panel>.ranking-scroll { flex:1 1 0; min-height:0; overflow:auto; border:1px solid #ffffff15; border-radius:12px; scrollbar-width:thin; scrollbar-color:#a53c7e #110d19; overscroll-behavior:contain; }
.ranking-table thead th { position:sticky; top:0; z-index:1; background:#24152d; color:#d7b9df; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }.ranking-table tbody tr:nth-child(even) { background:#ffffff03; }.ranking-table tbody tr:hover { background:#ff65bb09; }.ranking-table .ranking-primary { color:#ff9fd2; font-weight:800; }.ranking-table .is-current-player { background:#ff65bb13; }.ranking-table td:first-child { font-weight:800; color:#e3cde9; }.ranking-table .player-name { font-weight:700; text-align:left; }
.ranking-panel>.own-rank { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 0; padding:12px 14px; }.own-rank-label { font-size:10px; color:#dcaccb; letter-spacing:.1em; }.own-rank>strong { color:#ff9fd2; font-size:23px; }.own-rank-name { color:#f5e8fa; }.own-rank-value { margin-left:auto; color:#d8b5de; font-size:13px; }

/* Public account views reuse the private profile's identity, stat tiles and gallery. */
.public-profile-page { width:min(1100px,94vw); }.public-player-identity { display:flex; align-items:center; gap:16px; min-width:0; }.public-player-avatar { flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:18px; border:1px solid #ff73be65; background:linear-gradient(135deg,#81234f,#271334); box-shadow:0 0 22px #ff65bb18; color:#ffb3da; font-size:30px; font-weight:900; }
.public-player-header { align-items:center; border-bottom-color:#ff65bb25; }.public-player-header h1 { overflow-wrap:anywhere; background:linear-gradient(90deg,#fff0fa,#ff9fd2,#fff0fa); background-clip:text; -webkit-background-clip:text; }.public-player-header .profile-eyebrow { color:#ff85c5; }.player-membership-badge { display:inline-flex; margin-top:10px; padding:4px 9px; border-radius:16px; color:#bea6cb; border:1px solid #ffffff20; font-size:10px; font-weight:800; letter-spacing:.06em; }.player-membership-badge.is-vip { color:#ffe09e; border-color:#efb74860; background:#ffca4610; }
.public-player-stats .profile-stat { border-color:#ff65bb25; background:linear-gradient(145deg,#23182be8,#100d18); }.public-player-stats .profile-stat-label { color:#c09fce; }.public-player-stats .rarity-value { font-size:clamp(16px,2vw,24px); text-transform:capitalize; overflow-wrap:anywhere; }.public-player-showcase { border-color:#ff65bb30; background:linear-gradient(145deg,#1f1428cc,#0e0b16); }.public-player-showcase .profile-gallery { margin:0; }.public-player-showcase .profile-eyebrow { color:#ff85c5; }
.player-profile-dialog { width:min(740px,calc(100vw - 24px)); padding:20px; border-color:#ff65bb65; background:linear-gradient(145deg,#23132deF,#0d0b16); box-shadow:0 20px 90px #000b,0 0 30px #ff65bb16; }.player-profile-dialog>.rates-heading { margin-bottom:14px; }.player-profile-dialog>.rates-heading h2 { font-size:12px; letter-spacing:.14em; color:#c89bbd; }.player-profile-dialog>.rates-heading button { padding:7px 12px; font-size:10px; }
.player-profile-dialog .public-player-header { flex-direction:row; gap:14px; padding-bottom:14px; }.player-profile-dialog .public-player-avatar { width:46px; height:46px; border-radius:13px; font-size:24px; }.player-profile-dialog .public-player-identity { gap:12px; }.player-profile-dialog .public-player-header h1 { font-size:30px; }.player-profile-dialog .profile-member { min-width:130px; width:auto; padding:10px 12px; text-align:right; }.player-profile-dialog .profile-member strong { font-size:11px; }.player-profile-dialog .profile-eyebrow { font-size:9px; margin-bottom:5px; }.player-profile-dialog .player-membership-badge { margin-top:7px; }
.player-profile-dialog .profile-stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0; }.player-profile-dialog .profile-stat { min-height:78px; padding:12px; }.player-profile-dialog .profile-stat strong { font-size:23px; }.player-profile-dialog .profile-stat .rarity-value { font-size:16px; }.player-profile-dialog .profile-stat-label { font-size:9px; letter-spacing:.04em; }.player-profile-dialog .public-player-showcase { margin:0; padding:14px; }.player-profile-dialog .profile-panel-header { margin-bottom:12px; }.player-profile-dialog .profile-panel-header h2 { font-size:18px; }.player-profile-dialog .profile-gallery { gap:10px; }.player-profile-dialog .public-profile-link { display:block; margin-top:14px; text-align:center; font-size:11px; }
.player-profile-dialog .public-player-header .profile-eyebrow { display:none; }
.player-profile-dialog .profile-gallery { width:100%; max-width:600px; margin:0 auto; }
.player-profile-dialog .collection-card-info { padding:6px; }
@media(max-width:650px){body[data-community-page="ranking"]>.ranking-page { padding:12px !important; }.ranking-page>.ranking-panel { padding:14px; }.ranking-heading { margin-bottom:12px; }.ranking-heading h1 { font-size:25px; }.ranking-filters button { padding:8px 10px; font-size:11px; }.ranking-panel>.own-rank { padding:10px; gap:6px; font-size:12px; }.own-rank-value { flex-basis:100%; margin-left:0; }.public-player-identity { gap:12px; }.public-player-header h1 { font-size:36px; }.player-profile-dialog { padding:14px; }.player-profile-dialog .public-player-header { flex-wrap:wrap; }.player-profile-dialog .public-player-header h1 { font-size:25px; }.player-profile-dialog .profile-member { width:100%; display:flex; align-items:center; justify-content:space-between; padding:8px 10px; }.player-profile-dialog .profile-member span { margin:0; }.player-profile-dialog .profile-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.player-profile-dialog .profile-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }.player-profile-dialog .collection-card-info { padding:5px; font-size:9px; }.player-profile-dialog .collection-card-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }.player-profile-dialog .collection-stats { font-size:8px; flex-wrap:wrap; }.player-profile-dialog .public-player-showcase { padding:10px; }}
@media(max-height:480px){body[data-community-page="ranking"]>.ranking-page { padding:8px !important; }.ranking-page>.ranking-panel { padding:10px; }.ranking-heading { margin-bottom:8px; }.ranking-heading h1 { font-size:22px; }.ranking-filters { margin-bottom:8px; }.ranking-filters button { padding:6px 10px; }.ranking-panel>.own-rank { margin-top:8px; padding:8px; }.ranking-panel>.own-rank>strong { font-size:18px; }}

/* Pixel-tested artwork alone controls pointer hover; keyboard focus stays visible. */
body:has(.booster-shop-grid) .pack-option .pack-art,
body:has(.booster-shop-grid) .pack-option:hover .pack-art,
body:has(.booster-shop-grid) .pack-option .pack-art:hover {
  cursor:default; transform:translateY(0) !important; filter:drop-shadow(0 12px 14px #0006) drop-shadow(0 10px 16px transparent) !important;
}
body:has(.booster-shop-grid) .pack-option .pack-art.art-hit,
body:has(.booster-shop-grid) .pack-option:focus-visible .pack-art {
  cursor:pointer; transform:translateY(-7px) !important; filter:drop-shadow(0 12px 14px #0006) drop-shadow(0 10px 16px var(--pack-hover-glow,#ff48aa4d)) !important;
}
body[data-pack-page="regular"] .pack-basic {--pack-hover-glow:#ff48aa4d;}
body[data-pack-page="regular"] .pack-premium {--pack-hover-glow:#b18af54d;}
body[data-pack-page="regular"] .pack-custom {--pack-hover-glow:#5bdde74d;}
body[data-pack-page="regular"] .pack-gold {--pack-hover-glow:#f0f2ff4d;}
body[data-pack-page="vip"] .pack-basic {--pack-hover-glow:#edc76b4d;}
body[data-pack-page="vip"] .pack-girl {--pack-hover-glow:#c1a0ef4d;}
body[data-pack-page="vip"] .pack-custom {--pack-hover-glow:#83d4a64d;}
body .site-header .site-logo-link,body .site-header .site-logo-image {cursor:default;}
body .site-header .site-logo-link.art-hit,body .site-header .site-logo-image.art-hit {cursor:pointer;}
body[data-pack-page="vip"] .pack-basic .pack-metrics {color:#edc76b;}
body[data-pack-page="vip"] .pack-girl .pack-metrics {color:#c1a0ef;}
body[data-pack-page="vip"] .pack-custom .pack-metrics {color:#83d4a6;}
body[data-pack-page="vip"] .pack-metrics strong {color:inherit !important;}
.card-filter-tools {display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.card-filter-tools input {flex:1;min-width:180px;}
body .deck-collection-controls :is(input,select),body .trade-page :is(input,select),body :is(.trade-create-dialog,.trade-collection-dialog) :is(input,select),body .community-dialog :is(input,select) {
  min-height:42px;padding:10px 14px;border:1px solid #ffffff24;border-radius:10px;background:#14111e;color:#f4eaf8;font:inherit;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
body .deck-collection-controls :is(input,select):hover,body .trade-page :is(input,select):hover,body :is(.trade-create-dialog,.trade-collection-dialog) :is(input,select):hover,body .community-dialog :is(input,select):hover {
  border-color:#ff45c6b3 !important;background:#1c1425;
}
body .deck-collection-controls :is(input,select):focus,body .trade-page :is(input,select):focus,body :is(.trade-create-dialog,.trade-collection-dialog) :is(input,select):focus,body .community-dialog :is(input,select):focus {
  outline:none !important;border-color:#ff45c6 !important;box-shadow:0 0 0 3px #ff2fae24,0 0 20px #ff2fae1f !important;
}
.card-filter-tools select option,.trade-page select option,.trade-dialog select option {background:#14111e;color:#fff;}
.profile-lookup {padding:18px 20px;border:1px solid #ff65bb30;border-radius:16px;background:linear-gradient(145deg,#25182d,#100d18);margin-left:auto;}
.profile-lookup p {font-size:12px;color:#bda5c8;margin:8px 0 14px;}
.profile-lookup .game-button {font-size:11px;padding:10px 14px;}
@media(max-width:750px){.profile-header {flex-wrap:wrap;gap:16px;}.profile-lookup {margin-left:0;flex:1;}.card-filter-tools input {flex-basis:100%;}.card-filter-tools select {flex:1;min-width:0;}}

.card-filter-tools {align-items:center;}
.card-filter-tools>input,.card-filter-tools>select {height:42px;box-sizing:border-box;margin:0;}

/* Every option chooser uses Collection's pink resting border and gentle halo. */
:is(body select,#rarity-filter,#collection-sort) {
  appearance:none;
  color-scheme:dark;
  accent-color:#ff45c6;
  color:#f8eaf5 !important;
  background-color:rgba(13,5,18,.96) !important;
  border:1px solid rgba(255,55,190,.38) !important;
  border-radius:10px !important;
  box-shadow:0 0 12px rgba(255,47,174,.08) !important;
  padding:0 38px 0 13px !important;
  min-height:42px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff4ac8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 13px center !important;
  transition:border-color .18s,box-shadow .18s,background-color .18s !important;
}
:is(body select,#rarity-filter,#collection-sort):is(:hover,:focus-visible,:open) {
  border-color:#ff45c6 !important;
  box-shadow:0 0 0 2px rgba(255,47,174,.12),0 0 16px rgba(255,47,174,.13) !important;
  outline:none !important;
}
body select option {background:#160b1d !important;color:#f8eaf5 !important;}
@supports (appearance:base-select) {
  :is(body select,#rarity-filter,#collection-sort),body select::picker(select) {appearance:base-select !important;}
  :is(body select,#rarity-filter,#collection-sort) {background-image:none !important;padding:10px 13px !important;align-items:center;gap:14px;}
  body select::picker-icon {color:#ff4ac8;transition:rotate .18s;}
  body select:open::picker-icon {rotate:180deg;}
  body select::picker(select) {
    margin:6px 0;padding:6px;border:1px solid #ff55c66b;border-radius:12px;
    background:linear-gradient(145deg,#25122e,#100916);color:#f8eaf5;
    box-shadow:0 12px 32px #0009,0 0 18px #ff2fae24;
    max-height:min(320px,60dvh);overflow:auto;
    scrollbar-width:thin;scrollbar-color:#a3357b #160b1d;
  }
  body select option {padding:10px 12px;border-radius:7px;gap:10px;cursor:pointer;transition:background .15s;}
  body select option:is(:hover,:focus) {background:#572044 !important;outline:none;color:#fff !important;}
  body select option:checked {background:#8d2764 !important;color:#fff !important;}
  body select option::checkmark {color:#ffafd9;}
  body select option:disabled {opacity:.45;cursor:default;}
}

/* Market inputs share the dropdowns' resting pink treatment. */
body :is(.trade-page,.trade-create-dialog,.trade-collection-dialog) input:not([type="hidden"]):not(:hover):not(:focus) {
  border-color:rgba(255,55,190,.38) !important;
  background-color:rgba(13,5,18,.96) !important;
  box-shadow:0 0 12px rgba(255,47,174,.08) !important;
}
body .trade-page #auction-search:not(:hover):not(:focus) {
  border-color:#ffffff24 !important;
  background-color:#14111e !important;
  box-shadow:none !important;
}
body .trade-page .trade-auction-filters input[type="number"]:hover {
  border-color:#ff45c6 !important;
  box-shadow:0 0 0 2px rgba(255,47,174,.12),0 0 16px rgba(255,47,174,.13) !important;
  outline:none !important;
}
body :is(.trade-page,.trade-create-dialog,.trade-collection-dialog) input[type="number"] {
  appearance:textfield;
  -moz-appearance:textfield;
}
body :is(.trade-page,.trade-create-dialog,.trade-collection-dialog) input[type="number"]::-webkit-inner-spin-button,
body :is(.trade-page,.trade-create-dialog,.trade-collection-dialog) input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0;
}

/* Gallery selection uses Collection’s control row and dimensions. */
body .community-dialog .gallery-collection-controls {margin:0 0 20px;gap:10px;align-items:center;flex-wrap:wrap;}
body .community-dialog .gallery-collection-controls>input {flex:0 1 280px;width:280px;min-width:0;max-width:100%;height:44px;box-sizing:border-box;padding:0 16px;margin:0;border:1px solid #292936;border-radius:10px;background:#111119;color:white;font-size:13px;outline:none;box-shadow:none;}
body .community-dialog .gallery-collection-controls>input::placeholder {color:#666675;}
body .community-dialog .gallery-collection-controls>select {flex:0 0 auto;width:auto;max-width:100%;height:44px;box-sizing:border-box;font-size:13px;}

.profile-gallery .gallery-card-level,.gallery-picker-grid .gallery-card-level {display:table;margin:6px 0;font-size:9px;line-height:1.3;padding:3px 6px;}

/* Gallery picker leaves space around the dialog; only its cards scroll. */
.community-dialog.gallery-picker-dialog {height:min(580px,78dvh);max-height:calc(100dvh - 48px);box-sizing:border-box;overflow:hidden;}
.community-dialog.gallery-picker-dialog[open] {display:flex;flex-direction:column;}
.gallery-picker-dialog>.rates-heading,.gallery-picker-dialog>.gallery-collection-controls {flex:none;}
.gallery-picker-dialog>.gallery-picker-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 12px 2px;scrollbar-width:thin;scrollbar-color:#a3357b #160b1d;}
.gallery-picker-scroll>.gallery-picker-grid {margin:0 0 14px;}
@media(max-width:650px){.community-dialog.gallery-picker-dialog {height:78dvh;max-height:calc(100dvh - 40px);}}




/* One painted-letter height and consistent navigation spacing for the whole set. */
body .site-header .header-info {--nav-letter-height:22px;gap:12px;}
.site-header .nav-art-frame {position:relative;display:block;flex:none;height:var(--nav-letter-height);width:calc(var(--nav-art-aspect)*var(--nav-letter-height));}
body .site-header .header-info .nav-art-frame>.nav-wordmark {position:absolute;max-height:none !important;max-width:none !important;width:calc(var(--nav-art-width)*var(--nav-letter-height)) !important;height:calc(var(--nav-art-height)*var(--nav-letter-height)) !important;left:calc(var(--nav-art-left)*var(--nav-letter-height));top:calc(var(--nav-art-top)*var(--nav-letter-height));object-fit:fill;}
@media(max-width:650px){body .site-header .header-info {--nav-letter-height:18px;gap:8px;}}

.header-wallet-trigger { display:inline-flex; align-items:center; gap:7px; flex:none; width:max-content; min-width:0; min-height:0; margin:0; padding:2px 3px; border:0; border-radius:5px; background:transparent; color:inherit; font:inherit; line-height:1.2; white-space:nowrap; cursor:pointer; }
.header-wallet-trigger:hover {color:#ff9bd1;}
.header-wallet-trigger:focus-visible {outline:2px solid #ff75c4;outline-offset:3px;}
@media(max-width:650px){.header-wallet-trigger {padding:4px 3px;}}
.wishlist-dialog {width:min(780px,calc(100vw - 24px));max-height:78dvh;}
.community-dialog.game-action-dialog {width:min(450px,calc(100vw - 28px));height:fit-content;max-height:85dvh;box-sizing:border-box;padding:20px;}
.game-action-dialog>.rates-heading {gap:12px;align-items:flex-start;margin-bottom:16px;}
.game-action-dialog .rates-heading h2 {font-size:18px;line-height:1.3;margin:0;min-width:0;}
.game-action-dialog .rates-heading button {flex:none;padding:8px 10px;font-size:10px;}
.game-action-body p {font-size:13px;line-height:1.55;margin:0 0 14px;white-space:pre-line;overflow-wrap:anywhere;}
.game-action-body>p:last-child {margin-bottom:0;}
.game-action-buttons {display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.game-action-buttons .game-button {flex:1;text-align:center;text-decoration:none;margin:0;}
.game-action-body label {display:block;font-size:12px;color:#e4bfd8;margin-bottom:8px;}
.game-action-body input {box-sizing:border-box;width:100%;border:1px solid #ff65bb55;border-radius:9px;background:#110d1b;color:#fff;padding:12px;font:inherit;font-size:16px;outline:none;}
.game-action-body input:focus {border-color:#ff87c6;box-shadow:0 0 15px #ff65bb30;}
.game-action-body input[aria-invalid="true"] {border-color:#ff638b;}
.game-action-body input+.help-note {margin-top:8px;}
.game-action-body .game-message:empty {display:none;}
.game-action-card-name {color:#ffb8dd;font-weight:700;}
.membership-email-notice {border:1px solid #ff65bb35;background:#ff65bb08;border-radius:10px;padding:13px;margin:14px 0 18px;font-size:13px;line-height:1.55;overflow-wrap:anywhere;}
.membership-email-notice strong {display:block;color:#f3c6e4;margin-bottom:7px;}
.membership-email-notice p {font-size:12px;line-height:1.55;margin:0 0 10px;}
.membership-email-notice p:last-child {margin-bottom:0;}
.membership-email-notice a {color:#ff9bd1;text-decoration:underline;text-underline-offset:3px;}
.vip-locked>.membership-email-notice {max-width:540px;margin:18px auto;text-align:left;}
@media(max-width:480px){.community-dialog.game-action-dialog{padding:16px;}.game-action-dialog .rates-heading h2{font-size:16px;}}
.wishlist-tabs {display:flex;gap:10px;margin:14px 0;}
.wishlist-tabs [aria-pressed="true"] {border-color:#ff78c6;background:#632249;}
.wishlist-controls {margin:14px 0;}
.wishlist-controls input {flex:1;min-width:180px;margin:0;}
.wishlist-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;padding:8px 3px;}
.wishlist-grid .collection-card {width:100%;height:auto;}
.wishlist-grid .collection-card-image {height:auto;aspect-ratio:2/3;}
.wishlist-grid .collection-card-info strong,.wishlist-grid .collection-card-info>.collection-rarity,.wishlist-grid .collection-card-info>.collection-stats {display:block;margin-bottom:6px;}
.wishlist-grid button {width:100%;padding:8px 4px;font-size:10px;margin-top:8px;}
.wishlist-empty {grid-column:1/-1;color:#baa8c7;}
.wishlist-card-action {margin-top:16px;}
.market-ledger-dialog {width:min(630px,calc(100vw - 24px));height:min(570px,78dvh);overflow:hidden;}
.market-ledger-dialog[open] {display:flex;flex-direction:column;}
.market-ledger-dialog>.rates-heading {flex:none;}
.market-ledger-dialog .ledger-scroll {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;}
.ledger-summary {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.ledger-summary>div {padding:15px;border:1px solid #ff65bb44;border-radius:12px;background:#ff65bb0b;font-weight:800;font-size:13px;}
.ledger-note {color:#b9a4c6;font-size:12px;line-height:1.5;margin:10px 0;}
.ledger-hold {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px;border-bottom:1px solid #ffffff16;font-size:12px;}
.ledger-entry {display:grid;gap:4px;padding:14px 0;border-top:1px solid #ff65bb26;}
.ledger-entry .ledger-note {margin:0;}
.ledger-entry-amount {color:#ff95cc;font-size:12px;}
.ledger-entry time {color:#a391b4;font-size:10px;}
.trade-auction-card.is-linked-offer {outline:2px solid #ff82ca;outline-offset:4px;}

.completion-goals {padding:18px;border:1px solid #ff65bb3b;border-radius:14px;background:#ff65bb08;margin-bottom:20px;}
.completion-goals>p {color:#d5b9da;font-size:13px;margin:10px 0;}
.achievements-panel progress {width:100%;height:7px;display:block;appearance:none;border:0;border-radius:6px;overflow:hidden;background:#39213e;accent-color:#ff5bb8;}
.achievements-panel progress::-webkit-progress-bar {background:#39213e;border-radius:6px;}
.achievements-panel progress::-webkit-progress-value {background:linear-gradient(90deg,#b5298a,#ff82cb);border-radius:6px;}
.achievements-panel progress::-moz-progress-bar {background:#ff65bb;border-radius:6px;}
.completion-goals summary {cursor:pointer;color:#e3bad9;font-size:12px;margin-top:14px;}
.completion-rarities {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px;}
.completion-goal {display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px;}
.completion-goal progress {grid-column:1/-1;}
.completion-goal .rarity-value {font-size:12px;text-transform:capitalize;}
.achievement-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.achievement-card {padding:16px;border:1px solid #ffffff20;border-radius:14px;background:linear-gradient(145deg,#211829,#100e17);display:flex;flex-direction:column;gap:9px;}
.achievement-card.is-unlocked {border-color:#ff65bb70;box-shadow:0 0 16px #ff65bb0a;}
.achievement-card h3 {font-size:16px;}
.achievement-card p {color:#bba6c8;font-size:12px;line-height:1.5;}
.achievement-state {font-size:9px;letter-spacing:.07em;color:#b299c0;}
.is-unlocked .achievement-state {color:#ff9acb;}
.achievement-progress,.achievement-card time {font-size:10px;color:#bca0c6;}
.achievement-count {margin:12px 0;color:#c2a8cf;font-size:12px;}
@media(max-width:750px){.achievement-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.achievement-grid,.completion-rarities {grid-template-columns:1fr;}}

/* Shared onboarding and feedback */
.player-help-controls {position:fixed;bottom:12px;right:16px;z-index:30;display:flex;gap:8px;}
.player-help-controls[hidden] {display:none;}
.player-help-controls button {padding:7px 11px;border:1px solid #ff65bb44;border-radius:8px;background:#160e21ed;color:#d9b1ce;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.06em;cursor:pointer;box-shadow:0 3px 12px #0005;}
.player-help-controls button:hover,.player-help-controls button:focus-visible {border-color:#ff83c6;color:#fff;box-shadow:0 0 12px #ff65bb35;}
.community-dialog.player-help-dialog {width:min(560px,calc(100vw - 32px));max-height:85dvh;box-sizing:border-box;}
.player-help-dialog h2 {font-size:22px;margin:0;}
.player-help-dialog .rates-heading {margin-bottom:14px;}
.help-intro {margin:0 0 16px;color:#d7b9d0;font-size:13px;}
.quick-guide-steps {padding-left:25px;margin:0 0 16px;}
.quick-guide-steps li:last-child {padding-bottom:0;}
.quick-guide-dialog>.help-note {margin:0;padding-top:14px;border-top:1px solid #ff65bb22;}
.quick-guide-steps li {padding:0 0 16px 8px;color:#ff83c6;}
.quick-guide-steps h3 {color:#f7ecff;font-size:15px;margin:0 0 6px;}
.quick-guide-steps p {color:#c4aecb;font-size:13px;line-height:1.55;margin:0 0 10px;}
.player-help-dialog a.game-button {display:inline-block;text-decoration:none;font-size:10px;padding:7px 11px;}
.help-note {font-size:12px;line-height:1.5;color:#b69bbd;}
.feedback-dialog label {display:block;margin:0 0 10px;font-size:13px;}
.feedback-dialog form>.help-note {margin:10px 0 16px;}
.feedback-dialog .game-message {margin:12px 0 0;min-height:0;}
.feedback-dialog .game-message:empty {display:none;}
.feedback-dialog textarea {box-sizing:border-box;width:100%;resize:vertical;min-height:100px;max-height:35dvh;padding:12px;border:1px solid #ff65bb55;border-radius:10px;background:#100c17;color:#fff;font:inherit;font-size:13px;outline:none;}
.feedback-dialog textarea:focus {border-color:#ff83c6;box-shadow:0 0 12px #ff65bb35;}
@media(max-width:650px){.player-help-controls {right:10px;bottom:8px;gap:6px;}.player-help-controls button {padding:6px 8px;font-size:9px;}.player-help-dialog h2 {font-size:18px;}}

/* Reserve header space before authentication and image loading. */
html {scrollbar-gutter:stable;}
body .site-header {min-height:62px !important;padding:6px 20px !important;}
@media(max-width:1150px){body .site-header {padding:6px 12px !important;}}
body .site-header .header-wallet {min-width:120px;}
@media(max-width:650px){body .site-header .header-wallet {min-width:110px;}}

/* Match the market panel to Arena's available page width. */
main.trade-page {width:calc(100% - 40px);max-width:none;box-sizing:border-box;margin:14px auto 30px;padding:0 0 30px;}
.collection-heading-image,.market-heading-image,.ranking-heading-image {line-height:0;}
.collection-heading-image img,.market-heading-image img,.ranking-heading-image img {display:block;width:auto;height:52px;max-width:100%;object-fit:contain;}
@media(max-width:650px){main.trade-page {width:calc(100% - 16px);}.collection-heading-image img,.market-heading-image img,.ranking-heading-image img {height:40px;}}

.auth-container form[hidden],.auth-container button[hidden] {display:none!important;}
.auth-recovery-note {margin:0;font-size:12px;line-height:1.5;color:#bca8c9;text-align:left;}
#forgot-password {margin:12px 0 0;font-size:12px;}
.age-gate {min-height:100dvh;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:radial-gradient(ellipse at top,#321326,#09080e 70%);}
.age-gate-panel {width:min(420px,100%);box-sizing:border-box;padding:30px 26px;border:1px solid #ff65bb44;border-radius:18px;background:#140e1bee;text-align:center;box-shadow:0 15px 70px #0008;}
.age-gate-panel>img {width:150px;height:auto;margin-bottom:18px;}
.age-gate-panel h1 {margin:0 0 14px;font-size:25px;color:#ff9bd1;}
.age-gate-panel>p {font-size:13px;line-height:1.6;color:#c9b1cf;margin:0 0 22px;}
.age-gate-panel>.game-button {display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;text-decoration:none;margin-top:10px;min-height:42px;}
.age-gate-panel>#age-gate-status {margin:14px 0 0;font-size:12px;}
.age-gate-panel>#age-gate-status:empty {display:none;}

/* Account safety controls share the site's compact pink panels and inputs. */
.verification-panel[hidden] {display:none!important;}
.verification-panel {display:grid;gap:12px;margin:18px 0;}
.verification-panel p {font-size:13px;line-height:1.6;color:#c9b1cf;}
.auth-container .auth-consent {display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#c9b1cf;line-height:1.5;text-align:left;}
.auth-container .auth-consent input {width:16px;min-width:16px;height:16px;margin:3px 0 0;padding:0;accent-color:#ee58ad;}
.auth-consent a,.artwork-disclaimer a,.policy-page a {color:#ff94ca;text-decoration:underline;text-underline-offset:3px;}
.safety-dialog {box-sizing:border-box;width:min(500px,calc(100vw - 32px));max-height:78dvh;}
.safety-dialog .rates-heading {margin-bottom:16px;}
.safety-dialog h2 {font-size:21px;margin:0;}
.safety-dialog form {display:grid;gap:12px;}
.safety-dialog form>label {font-size:12px;color:#d1b6d6;}
.safety-dialog form>input {margin:0;}
.safety-dialog textarea {box-sizing:border-box;width:100%;min-height:100px;resize:vertical;padding:12px;border:1px solid #ff65bb55;border-radius:10px;background:#100c17;color:#fff;font:inherit;font-size:13px;outline:none;}
.safety-dialog textarea:focus {border-color:#ff83c6;box-shadow:0 0 12px #ff65bb35;}
.safety-dialog .help-note,.safety-dialog .game-message {margin:0;line-height:1.5;}
.artwork-disclaimer {font-size:11px!important;line-height:1.5;color:#bca4c7!important;margin:16px 0 10px;}
.game-button.card-report-button {display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:auto;min-height:30px;margin-top:4px;padding:5px 9px;font-size:10px;line-height:1.2;letter-spacing:.03em;}
.account-delete-panel {margin-bottom:25px;border-color:#e8548544;}
.account-delete-panel p {color:#bca4c7;font-size:13px;line-height:1.5;margin:12px 0 16px;}
.game-button.danger-button {background:linear-gradient(135deg,#a62d61,#732048);border-color:#e76f9d;}
.game-button.danger-button:hover {background:linear-gradient(135deg,#bd3772,#8b2858);}
.legal-links {position:fixed;bottom:12px;left:16px;z-index:25;display:flex;gap:12px;font-size:10px;padding:6px 9px;border-radius:7px;background:#100b17e8;}
.legal-links a,.age-legal-links a {color:#be9ab9;text-decoration:none;}
.legal-links a:hover,.age-legal-links a:hover {color:#ff94ca;}
.age-legal-links {margin-top:18px;font-size:11px;}
body[data-legal-page] {display:block;}
body[data-legal-page]>.policy-page {display:block;width:min(900px,calc(100% - 32px));height:auto;min-height:0;margin:0 auto 70px;padding:0;}
body[data-legal-page]>.policy-header {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;width:min(900px,calc(100% - 32px));height:auto;min-height:72px;margin:20px auto 24px;padding:0;gap:12px 20px;}
.policy-header>a:first-child {display:flex;align-items:center;flex:0 0 110px;}
.policy-header img {display:block;width:110px;height:72px;object-fit:contain;}
.policy-header>.game-button {display:inline-flex;align-items:center;justify-content:center;position:static;flex:0 1 auto;align-self:center;max-width:100%;min-height:44px;margin:0;padding:12px 16px;font-size:12px;line-height:1.4;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;}
.policy-panel {border:1px solid #ff65bb44;border-radius:16px;background:linear-gradient(145deg,#1c1324,#0d0a12);padding:28px;box-shadow:0 14px 45px #0005;}
.policy-panel h1 {font-size:30px;color:#ff9bd1;margin:0 0 12px;}
.policy-panel h2 {font-size:17px;color:#f0d4e9;margin:25px 0 10px;}
.policy-panel p,.policy-panel li {font-size:13px;color:#c9b1cf;line-height:1.7;overflow-wrap:anywhere;}
.policy-panel p+p {margin-top:12px;}
.policy-panel .policy-meta {margin-bottom:20px;}
.policy-panel li+li {margin-top:8px;}
body[data-legal-page]>.legal-links {position:static;display:flex;flex-wrap:wrap;width:fit-content;max-width:calc(100% - 32px);margin:0 auto 20px;gap:10px 16px;padding:10px 14px;line-height:1.5;}
.policy-panel ul {padding-left:20px;}
.policy-meta {font-size:11px!important;color:#ad8eaa!important;}
@media(max-width:650px){.policy-panel {padding:20px;}.policy-panel h1 {font-size:25px;}.legal-links {left:8px;bottom:8px;gap:9px;font-size:9px;}.player-help-controls {bottom:38px;}.safety-dialog {padding:16px;}}

/* A short, optional review request using the existing dialog and button styles. */
.card-modal-content > .card-modal-close { position:sticky; top:0; right:0; margin-left:auto; margin-bottom:-42px; }
.review-prompt-dialog { width:min(440px,calc(100vw - 32px)); padding:24px; }
.review-prompt-dialog > p { margin:18px 0 22px; line-height:1.6; color:#c9bfd1; }
.review-prompt-actions { display:flex; flex-wrap:wrap; gap:12px; }
.review-prompt-actions .game-button { flex:1 1 150px; text-align:center; text-decoration:none; }
.card-synthesis-entry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.card-synthesis-entry .game-button { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; min-height:42px; margin:0; padding:10px 6px; font-size:11px; line-height:1.3; white-space:normal; text-align:center; }
.card-synthesis-entry>.game-message { grid-column:1 / -1; margin:0; }
.synthesis-note { color:#b4a6be; font-size:12px; line-height:1.5; margin:6px 0; }
.community-dialog.synthesis-dialog { width:min(880px,calc(100vw - 32px)); height:min(780px,90dvh); max-height:calc(100dvh - 32px); box-sizing:border-box; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a3357b #160b1d; padding:22px; }
.synthesis-dialog[open] { display:flex; flex-direction:column; gap:14px; }
.community-dialog.synthesis-dialog.is-reviewing { height:fit-content; }
.synthesis-dialog.is-reviewing .synthesis-scroll { max-height:none; }
.synthesis-dialog [hidden] { display:none!important; }
.synthesis-dialog>.rates-heading { flex:none; margin:0; gap:12px; }
.synthesis-dialog h2 { margin:0; font-size:20px; }
.synthesis-summary { flex:none; padding:12px 14px; border:1px solid #61314f; border-radius:12px; background:#1e1123; }
.synthesis-summary>strong { font-size:14px; overflow-wrap:anywhere; }
.synthesis-progress { display:grid; grid-template-columns:1fr; gap:14px; margin-top:10px; }
.synthesis-progress span { display:block; font-size:12px; color:#f1d4e7; margin-bottom:5px; }
.synthesis-progress progress { display:block; width:100%; height:6px; border:0; border-radius:8px; overflow:hidden; accent-color:#e33f9d; background:#39273e; }
.synthesis-progress progress::-webkit-progress-bar { background:#39273e; }
.synthesis-progress progress::-webkit-progress-value { background:#e33f9d; border-radius:8px; }
.synthesis-tools { flex:none; }
body .synthesis-dialog .gallery-collection-controls { margin:0 0 10px; }
.synthesis-protection { display:flex; gap:9px; align-items:center; color:#cec0d6; font-size:12px; line-height:1.4; cursor:pointer; }
.synthesis-protection input { width:16px; height:16px; margin:0; accent-color:#ed48a8; flex:none; }
.synthesis-scroll { flex:none; min-height:0; overflow:visible; padding:6px 6px 10px; }
.synthesis-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.synthesis-material { min-width:0; }
.synthesis-art-button { display:block; width:100%; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.synthesis-art-button:disabled { cursor:default; opacity:.55; }
.synthesis-material .collection-card-info>strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.synthesis-material .collection-stats { display:block; font-size:10px; }
.synthesis-material-note { display:block; font-size:10px; color:#b4a6be; line-height:1.5; }
.synthesis-loss-note { display:block; color:#ff9aca; font-size:12px; line-height:1.5; margin:10px 0; }
.synthesis-material.is-selected { outline:2px solid #ef53af; outline-offset:2px; }
.synthesis-quantity-controls { display:flex; gap:5px; align-items:center; margin-top:9px; }
.synthesis-quantity-controls button { border:1px solid #733456; background:#32172d; color:#ffe1f3; border-radius:8px; width:30px; height:32px; flex:none; cursor:pointer; font-size:18px; }
.synthesis-quantity-controls button:hover:enabled { border-color:#ff69b9; background:#54213f; }
.synthesis-quantity-controls input { width:100%; min-width:0; height:32px; padding:0 3px; border-radius:8px; text-align:center; appearance:textfield; -moz-appearance:textfield; }
.synthesis-quantity-controls input::-webkit-inner-spin-button,.synthesis-quantity-controls input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.synthesis-quantity-controls :disabled { opacity:.45; cursor:default; }
.synthesis-actions { display:flex; flex:none; justify-content:flex-end; gap:10px; }
.synthesis-actions .game-button { min-height:42px; }
.synthesis-dialog>.game-message { flex:none; margin:0; font-size:12px; }
.synthesis-dialog>.game-message:empty { display:none; }
.synthesis-review ul { margin:18px 0; padding-left:20px; color:#e2d3e8; }
.synthesis-review li { margin:10px 0; font-size:13px; line-height:1.5; }
.synthesis-result-preview { margin:0; padding:12px; border:1px solid #774364; border-radius:10px; color:#ffb4df; line-height:1.6; }
@media(max-height:600px) {
  .community-dialog.synthesis-dialog { height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); padding:12px; gap:8px; }
  .synthesis-dialog h2 { font-size:15px; }
  .synthesis-dialog>.rates-heading .game-button { padding:8px 12px; min-height:32px; }
  .synthesis-summary { padding:8px; }
  .synthesis-summary>.synthesis-note { font-size:10px; margin:3px 0; }
  .synthesis-progress { margin-top:5px; }
  body .synthesis-dialog .gallery-collection-controls { margin-bottom:5px; }
  body .synthesis-dialog .gallery-collection-controls>:is(input,select) { height:34px; }
  .synthesis-actions .game-button { min-height:36px; padding:8px 12px; }
}
@media(max-width:650px) {
  .community-dialog.synthesis-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); height:90dvh; padding:16px; gap:12px; }
  .synthesis-dialog h2 { font-size:15px; }
  .synthesis-dialog>.rates-heading .game-button { padding:10px; font-size:11px; }
  .synthesis-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  body .synthesis-dialog .gallery-collection-controls>input { flex:1 1 160px; width:160px; }
  .synthesis-summary { padding:10px; }
  .synthesis-actions { flex-wrap:wrap; }
  .synthesis-actions .game-button { flex:1 1 auto; font-size:11px; padding:10px; }
}

/* Shared chat is accessed from the Main booster page, away from navigation. */
.global-chat-toggle { position:fixed; bottom:54px; right:16px; z-index:35; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #ff65bb55; border-radius:11px; background:#1c1024f2; color:#f3bfdc; font:inherit; font-size:11px; font-weight:800; line-height:1.2; letter-spacing:.07em; cursor:pointer; box-shadow:0 5px 20px #0006; transition:background .18s,border-color .18s; }
.global-chat-toggle:hover,.global-chat-toggle[aria-expanded="true"] { border-color:#f36bb6; background:#35152f; color:#fff; }
.global-chat-toggle:disabled { opacity:.4; cursor:default; }
.global-chat-toggle:focus-visible,.global-chat-message-action:focus-visible { outline:2px solid #ff75c4; outline-offset:3px; }
.community-dialog.global-chat-panel { position:fixed; inset:auto 16px 98px auto; margin:0; z-index:70; width:380px; max-width:calc(100vw - 24px); height:min(540px,calc(100dvh - 120px)); max-height:calc(100dvh - 120px); padding:0; box-sizing:border-box; overflow:hidden; border-color:#9d4b7b; background:linear-gradient(155deg,#211428,#0e0c16 65%); box-shadow:0 18px 65px #000b,0 0 24px #df399d12; }
.global-chat-panel[open] { display:flex; flex-direction:column; }
.global-chat-panel [hidden] { display:none!important; }
.global-chat-heading { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 2px; }
.global-chat-heading h2 { margin:0; color:#f9dfef; font-size:13px; letter-spacing:.1em; }
.global-chat-close { width:30px; height:30px; border:1px solid #ffffff22; border-radius:8px; color:#dec7dd; background:#ffffff08; font-size:23px; line-height:1; cursor:pointer; }
.global-chat-close:hover { color:#fff; border-color:#ff65bb88; }
.global-chat-intro { flex:none; margin:0; padding:0 14px 10px; border-bottom:1px solid #ffffff10; color:#ad91b3; font-size:10px; }
.global-chat-messages { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px; scrollbar-width:thin; scrollbar-color:#9b416f #170d20; }
.global-chat-message { margin:0 0 10px; padding:9px 11px; border:1px solid #ffffff0d; border-radius:11px; background:#ffffff04; }
.global-chat-message.is-own { border-color:#eb5eaf38; background:#c6328620; }
.global-chat-meta { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.global-chat-meta strong { min-width:0; overflow-wrap:anywhere; color:#f6badd; font-size:11px; }
.global-chat-meta time { flex:none; color:#967f9f; font-size:9px; font-variant-numeric:tabular-nums; }
.global-chat-text { margin:5px 0 2px; white-space:pre-wrap; overflow-wrap:anywhere; color:#e5d6eb; font-size:12px; line-height:1.55; }
.global-chat-message.is-deleted .global-chat-text { color:#9c86a5; font-style:italic; }
.global-chat-message-action { border:0; padding:3px 0; background:none; color:#9f81a7; font:inherit; font-size:8px; letter-spacing:.08em; cursor:pointer; }
.global-chat-message-action:hover { color:#ff98ce; }
.global-chat-empty { color:#ae97b8; font-size:12px; text-align:center; margin:35px 12px; line-height:1.6; }
.global-chat-new { flex:none; align-self:center; margin:0 0 8px; border:1px solid #ff65bb55; border-radius:20px; padding:5px 12px; background:#4b1b3d; color:#ffe2f1; font:inherit; font-size:10px; cursor:pointer; }
.global-chat-delete-confirm { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 12px 8px; color:#d6b3d0; font-size:11px; }
.global-chat-delete-confirm>.game-button { min-height:28px; padding:5px 8px; font-size:9px; }
.global-chat-status { flex:none; margin:0 12px; color:#eab2ce; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.global-chat-status:empty { display:none; }
.global-chat-compose { flex:none; margin:0; padding:10px 12px 11px; border-top:1px solid #ffffff10; }
.global-chat-compose textarea,.global-chat-report textarea { box-sizing:border-box; display:block; width:100%; min-height:52px; max-height:96px; margin:0; padding:9px 10px; resize:none; border:1px solid #683852; border-radius:9px; outline:none; background:#0d0913; color:#f7e7f5; font:inherit; font-size:12px; line-height:1.5; }
.global-chat-compose textarea:focus,.global-chat-report textarea:focus { border-color:#e868ad; box-shadow:0 0 0 2px #ff65bb12; }
.global-chat-compose-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:7px; }
.global-chat-counter { font-size:10px; color:#947c9c; }
.global-chat-counter.is-over-limit { color:#ff82b9; }
.global-chat-compose-footer .game-button { min-height:32px; padding:7px 14px; font-size:10px; }
.global-chat-note { margin:7px 0 0; color:#927c9d; font-size:9px; line-height:1.5; }
.community-dialog.global-chat-report { width:min(410px,calc(100vw - 30px)); box-sizing:border-box; padding:20px; }
.global-chat-report h2 { font-size:16px; }
.global-chat-report label { display:block; font-size:12px; color:#d9bdd9; margin:14px 0 8px; }
.global-chat-report form>.game-button { margin-top:14px; }
body.booster-active :is(.global-chat-toggle,.global-chat-panel) { display:none!important; }
@media(max-width:650px) {
  .global-chat-toggle { right:10px; bottom:78px; padding:9px 12px; }
  .community-dialog.global-chat-panel { right:12px; width:calc(100vw - 24px); }
  .global-chat-compose textarea { font-size:16px; }
}

/* Permanent Divine discovery rewards and optional public pull celebrations. */
.divine-decoration,.collector-name {--collector-color:#efc66b;--collector-glow:0 0 7px #e9bc5180,0 0 14px #e9bc512e;}
.divine-decoration-3 {--collector-color:#ffdf8c;--collector-glow:0 0 5px #ffdb8ccc,0 0 12px #e9bc5185,0 0 23px #e9bc5140;}
.divine-decoration-5 {--collector-color:#ffe9a8;--collector-glow:0 0 7px #f5cd6d80,0 0 18px #e9bc5147;}
.divine-decoration-10 {--collector-color:#fffaf0;--collector-glow:0 0 5px #fff1c999,0 0 14px #ffd36766,0 0 24px #e9bc5138;}
.profile-header.divine-decoration h1,.ranking-table .player-name.collector-name,.own-rank-name.collector-name,.divine-preview {
 color:var(--collector-color);-webkit-text-fill-color:var(--collector-color);background:none;text-shadow:var(--collector-glow);
}
.divine-title {display:block;color:var(--collector-color,#f2d99a);font-size:12px;letter-spacing:.07em;margin:8px 0;}
.divine-rewards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0;}
.divine-reward {padding:16px 12px;border:1px solid #ffffff12;border-radius:12px;background:#100d1a;text-align:center;}
.divine-reward:not(.is-unlocked) .divine-preview {opacity:.4;}
.divine-reward h3 {font-size:14px;margin:14px 0 8px;color:#ecd2e4;}
.divine-preview {min-height:44px;display:grid;place-items:center;font-size:18px;font-weight:800;line-height:1.35;overflow-wrap:anywhere;margin:4px auto 16px;}
.divine-reward .game-button {font-size:10px;margin-top:12px;}
.divine-controls {display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:16px 0 10px;}
.divine-share-setting {display:flex;align-items:center;gap:10px;font-size:13px;color:#e5c7df;cursor:pointer;}
.divine-share-setting input {accent-color:#e5399e;width:17px;height:17px;flex:none;}
#divine-status:empty {display:none;}
.global-chat-message.is-divine-pull {border-color:#d7b36566;background:linear-gradient(110deg,#e9bc5112,#170f24);}
.global-chat-message.is-divine-pull .global-chat-text {color:#f2d99a;}
@media(max-width:650px){.divine-rewards {grid-template-columns:repeat(2,minmax(0,1fr));}.divine-controls {align-items:flex-start;flex-direction:column;}.divine-share-setting {line-height:1.5;}}

.ranking-player-identity {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ranking-divine-title {display:inline-block;font-size:10px;letter-spacing:.025em;margin:0;color:var(--collector-color,#dfb85e);}
.own-rank-name .ranking-divine-title {margin-left:10px;}

.divine-decoration--1 {--collector-color:#93ceff;--collector-glow:0 0 10px #3499ff66,0 0 20px #3499ff26;}
.divine-decoration--1 .divine-title,.transcendent-title {color:#93ceff;}
.ranking-divine-title {text-shadow:var(--collector-glow);-webkit-text-fill-color:currentColor;}
@media(min-width:651px){.divine-rewards {grid-template-columns:repeat(auto-fit,minmax(145px,1fr));}}

/* Ranking rewards: text, brighter text, small name highlight, then a full-row shimmer. */
.ranking-page .ranking-player-identity.ranking-reward-name-highlight {
 width:fit-content;max-width:100%;padding:7px 10px;border-radius:9px;
 background:linear-gradient(110deg,rgba(var(--ranking-reward-rgb),.13),rgba(var(--ranking-reward-rgb),.02));
 box-shadow:inset 0 0 14px rgba(var(--ranking-reward-rgb),.10),0 0 12px -3px rgba(var(--ranking-reward-rgb),.25);
}
.ranking-page .ranking-table tr.ranking-reward-stage-10 {
 background:linear-gradient(105deg,rgba(var(--ranking-reward-rgb),.07) 0%,rgba(var(--ranking-reward-rgb),.13) 35%,rgba(var(--ranking-reward-rgb),.28) 50%,rgba(var(--ranking-reward-rgb),.13) 65%,rgba(var(--ranking-reward-rgb),.07) 100%);
 background-size:260% 100%;background-position:100% 50%;
 box-shadow:inset 0 1px rgba(var(--ranking-reward-rgb),.22),inset 0 -1px rgba(var(--ranking-reward-rgb),.22);
 animation:ranking-sovereign-shimmer 9s ease-in-out infinite alternate;
}
.ranking-page .ranking-reward-stage-10>td:first-child {color:var(--ranking-rank-color,#fff5d6);}
@keyframes ranking-sovereign-shimmer {from{background-position:100% 50%;}to{background-position:0% 50%;}}
@media(prefers-reduced-motion:reduce){.ranking-page .ranking-table tr.ranking-reward-stage-10 {animation:none;background-position:50% 50%;}}

.ranking-reward-divine {--ranking-reward-rgb:235,188,90;}
.ranking-reward-transcendent {--ranking-reward-rgb:79,170,255;--ranking-rank-color:#e6f6ff;}
.ranking-reward-mythic {--ranking-reward-rgb:255,107,157;--ranking-rank-color:#ffe6f0;}
.divine-decoration--3 {--collector-color:#acdfff;--collector-glow:0 0 5px #8acfffcc,0 0 12px #3499ff85,0 0 23px #3499ff40;}
.divine-decoration--5 {--collector-color:#d1efff;--collector-glow:0 0 7px #b7e5ff99,0 0 18px #3499ff66;}
.divine-decoration--10 {--collector-color:#f2fbff;--collector-glow:0 0 5px #d6f1ffb0,0 0 14px #67c7ff80,0 0 24px #3499ff45;}
.divine-decoration--101 {--collector-color:#ff91b5;--collector-glow:0 0 7px #ff6b9d80,0 0 14px #ff6b9d2e;}
.divine-decoration--103 {--collector-color:#ffb1ce;--collector-glow:0 0 5px #ffafd2cc,0 0 12px #ff6b9d85,0 0 23px #ff6b9d40;}
.divine-milestones-panel,#divine-milestones {min-width:0;}
.rarity-reward-tabs {margin:16px 0 10px;flex-wrap:wrap;}
.divine-rewards.rarity-reward-strip {display:flex;gap:12px;max-width:100%;margin:12px 0 16px;padding:8px 4px 14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#be3e87 #1b1224;}
.rarity-reward-strip>.divine-reward {box-sizing:border-box;flex:0 0 clamp(190px,48vw,208px);width:clamp(190px,48vw,208px);aspect-ratio:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:4px;padding:12px;scroll-snap-align:start;}
.rarity-reward-strip .divine-preview {min-height:24px;margin:0;font-size:18px;line-height:1.25;}
.rarity-reward-strip h3 {margin:0;min-height:32px;display:grid;place-items:center;font-size:13px;line-height:1.2;overflow-wrap:anywhere;}
.rarity-reward-strip .help-note {margin:0;font-size:11px;line-height:1.3;}
.rarity-reward-strip .help-note:last-child {min-height:28px;display:grid;place-items:center;font-size:10px;}
.rarity-reward-strip .game-button {margin:0;align-self:center;min-height:30px;padding:7px 12px;font-size:10px;}
.rarity-reward-strip .is-equipped {border-color:#ff65bb66;background:#241226;}
.rarity-reward-strip:focus-visible {outline:2px solid #ff65bb;outline-offset:3px;border-radius:10px;}

/* Divine prestige: gilded lettering and royal accents, distinct from lower rarities. */
.divine-decoration-1 {--collector-color:#f6ce75;--collector-glow:0 0 5px #ffd873b3,0 0 13px #e9ad4380,0 0 24px #e9ad4330;--divine-metal:linear-gradient(180deg,#fff0bd 8%,#f6ce75 48%,#dcaa44 100%);}
.divine-decoration-3 {--collector-color:#ffe8a3;--collector-glow:0 0 4px #fff0bded,0 0 10px #ffce60b3,0 0 22px #e9ad4366,0 0 32px #e9ad4326;--divine-metal:linear-gradient(180deg,#fff9e5 8%,#ffe8a3 45%,#efbb4d 100%);}
.divine-decoration-5 {--collector-color:#fff0be;--collector-glow:0 0 4px #fff4d2eb,0 0 12px #ffdc87b3,0 0 26px #e9ad4380;--divine-metal:linear-gradient(180deg,#fffdf2 8%,#fff0be 48%,#f6cf72 100%);}
.divine-decoration-10 {--collector-color:#fffdf7;--collector-glow:0 0 3px #fffaf0f0,0 0 10px #ffe5a6b3,0 0 23px #ffd06b80,0 0 36px #e9ad4340;--divine-metal:linear-gradient(180deg,#ffffff 12%,#fffdf7 50%,#ffe9ae 100%);}
.profile-header:is(.divine-decoration-1,.divine-decoration-3,.divine-decoration-5,.divine-decoration-10) h1,
.ranking-table .player-name:is(.divine-decoration-1,.divine-decoration-3,.divine-decoration-5,.divine-decoration-10),
.own-rank-name:is(.divine-decoration-1,.divine-decoration-3,.divine-decoration-5,.divine-decoration-10),
.divine-preview:is(.divine-decoration-1,.divine-decoration-3,.divine-decoration-5,.divine-decoration-10) {
 background-image:var(--divine-metal);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.divine-royal-crest {display:inline-block;width:15px;height:13px;margin-right:6px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px #ffd47066);}
.ranking-reward-divine .ranking-divine-title {letter-spacing:.04em;}
.ranking-page .ranking-reward-divine .ranking-player-identity.ranking-reward-name-highlight {
 background:linear-gradient(115deg,#a56c182b,#f9d77d2b 45%,#a56c181a);
 box-shadow:inset 0 0 0 1px #ffe2a14d,inset 0 0 22px #e9bc5126,0 0 20px -4px #edbd5866;
}
.ranking-page .ranking-table tr.ranking-reward-divine.ranking-reward-stage-10 {
 background-image:linear-gradient(110deg,#e8b54d1f 0%,#e8b54d33 32%,#fff3ca66 50%,#e8b54d33 68%,#e8b54d1f 100%);
 background-size:260% 100%;
 animation:ranking-divine-sovereign 11s ease-in-out infinite;
 box-shadow:inset 0 1px #fff0b866,inset 0 -1px #fff0b866,inset 0 0 22px #e8b54d19;
}
@keyframes ranking-divine-sovereign {
 0%,100% {background-position:100% 50%;box-shadow:inset 0 1px #fff0b84d,inset 0 -1px #fff0b84d,inset 0 0 22px #e8b54d14;}
 50% {background-position:0% 50%;box-shadow:inset 0 1px #fff0b880,inset 0 -1px #fff0b880,inset 0 0 28px #e8b54d2b;}
}
@media(prefers-reduced-motion:reduce){.ranking-page .ranking-table tr.ranking-reward-divine.ranking-reward-stage-10 {animation:none;background-position:50% 50%;}}

/* Main-only player progress, aligned with the existing discreet legal footer. */
.player-level-progress {position:fixed;left:16px;bottom:46px;z-index:25;display:flex;align-items:center;gap:8px;width:190px;min-height:25px;padding:6px 9px;border-radius:7px;background:#100b17ed;color:#be9ab9;font-size:10px;}
.player-level-progress[hidden],.player-level-progress [hidden] {display:none!important;}
.player-xp-track {flex:1;height:5px;border-radius:8px;background:#4d28484d;overflow:hidden;}
.player-xp-track>span {display:block;height:100%;width:0;background:linear-gradient(90deg,#bd2a84,#f778be);border-radius:inherit;transition:width .35s ease;}
#player-xp-count {font-variant-numeric:tabular-nums;white-space:nowrap;font-size:10px;}
#level-up-pack-trigger {width:100%;padding:0;border:0;background:none;color:#f190c4;font-family:inherit;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.04em;cursor:pointer;text-align:left;}
#level-up-pack-trigger:hover {color:#ffd7ee;text-shadow:0 0 9px #ff65bb55;}
#level-up-pack-count {margin-left:5px;color:#dcb6d5;}
#level-up-pack-trigger:focus-visible {outline:2px solid #ff83c6;outline-offset:5px;border-radius:3px;}
.level-up-pack-dialog.custom-pack-modal-panel {position:fixed;inset:0;margin:auto;width:min(280px,calc(100vw - 24px));height:fit-content;max-height:calc(100dvh - 24px);padding:16px 14px 14px;overflow:auto;box-sizing:border-box;color:#f5d8ec;transform:none;}
.level-up-pack-dialog::backdrop {background:#08050cbb;backdrop-filter:blur(4px);}
.level-up-pack-dialog h2 {display:grid;place-items:center;min-height:24px;font-size:12px;letter-spacing:.08em;text-align:center;margin:0 26px 5px;}
.level-up-pack-dialog>.help-note {text-align:center;font-size:11px;line-height:1.4;margin:0 0 10px;}
.level-up-pack-dialog .level-up-rate-info {position:absolute;top:12px;left:12px;right:auto;display:grid;place-items:center;padding:0;line-height:1;}
.level-up-pack-dialog .custom-pack-modal-close {top:10px;right:12px;}
.level-up-pack-art-button {display:block;margin:0 auto 10px;padding:0;width:fit-content;max-width:100%;border:0;background:none;cursor:default;}
.level-up-pack-art-button .pack-art {display:block;position:static;width:auto!important;height:clamp(90px,min(46dvh,calc(100dvh - 170px)),320px)!important;max-width:100%;object-fit:contain;transform:none;filter:brightness(.87)!important;transition:filter .25s ease;}
.level-up-pack-art-button .pack-art.art-hit {cursor:pointer;filter:brightness(.99) drop-shadow(0 0 10px #e8bf6538)!important;}
.level-up-pack-dialog>.custom-pack-confirm {display:block;width:min(100%,210px);min-height:36px;margin:0 auto;padding:9px 16px;border:1px solid #ed72b477;border-radius:8px;background:linear-gradient(180deg,#a83377,#81265e);box-shadow:inset 0 1px #ffffff12;color:#fff0f8;font-family:inherit;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.07em;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;}
.level-up-pack-dialog>.custom-pack-confirm:hover:not(:disabled) {background:linear-gradient(180deg,#b73c85,#942d6c);border-color:#f68bc5aa;box-shadow:0 0 12px #ed72b422;filter:none;}
.level-up-pack-dialog>.custom-pack-confirm:focus-visible,.level-up-pack-art-button:focus-visible {outline:2px solid #ff9bd3;outline-offset:3px;}
.level-up-pack-dialog>.custom-pack-confirm:disabled {opacity:.6;cursor:wait;}
.level-up-pack-dialog>.custom-pack-error {font-size:12px;line-height:1.4;margin:10px 0 0;}
.level-up-pack-dialog>.custom-pack-error:empty {display:none;}
.profile-player-level {display:inline-block;margin-left:9px;vertical-align:middle;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.04em;color:#c9a0c2;-webkit-text-fill-color:#c9a0c2;text-shadow:none;white-space:nowrap;}
body.booster-active .player-level-progress {display:none!important;}
@media(max-width:650px){.player-level-progress {left:8px;bottom:41px;width:min(180px,calc(100vw - 184px));padding:6px;gap:6px;}body[data-pack-page="regular"]:not(.booster-active)>main {padding-bottom:100px!important;}}
@media(prefers-reduced-motion:reduce){.player-xp-track>span {transition:none;}}

/* Account password controls use the existing safety dialog language. */
.account-security-panel {margin-bottom:18px;}
.account-security-panel>p {margin:10px 0 14px;color:#bca4c7;font-size:13px;line-height:1.5;}
.account-password-dialog {width:min(420px,calc(100vw - 28px));overflow:auto;}
.account-password-dialog .rates-heading {gap:12px;align-items:center;}
.account-password-dialog h2 {font-size:16px;line-height:1.4;}
.account-password-dialog .rates-heading>button {flex:none;padding:7px 10px;min-height:30px;font-size:10px;}
.account-password-dialog form {gap:9px;}
.account-password-dialog form>input {box-sizing:border-box;width:100%;min-width:0;padding:10px 12px;border:1px solid #b2588a77;border-radius:9px;background:#100c17;color:#f5e6f3;font:inherit;font-size:14px;outline:none;}
.account-password-dialog form>input:focus {border-color:#ef86bf;box-shadow:0 0 10px #ff65bb28;}
.account-password-dialog form>button {margin-top:5px;min-height:38px;}
.account-password-dialog .is-success {color:#b7dfc2;}
.account-password-dialog .game-message:empty {display:none;}

/* Background artwork loading leaves the original reveal animation timing intact. */
.booster-artwork-status {position:absolute;bottom:18px;left:12px;right:12px;font-size:11px;line-height:1.5;text-align:center;color:#cbb1ce;}
.booster-controls .booster-artwork-retry {font-size:10px;padding:8px 12px;}

/* Translation sits beside Report/Delete without adding a new message panel. */
.global-chat-message-actions {display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;}
.global-chat-message-actions>a.global-chat-message-action {display:inline-block;text-decoration:none;line-height:normal;}
.global-chat-message-action[aria-busy="true"] {opacity:.6;cursor:wait;}
.global-chat-message-action:focus-visible {outline:2px solid #ff75c4;outline-offset:3px;border-radius:2px;}
.global-chat-message>.global-chat-translation-note {margin:4px 0 0;color:#af91b6;font-size:10px;line-height:1.4;overflow-wrap:anywhere;}
.global-chat-translation-note[hidden] {display:none;}

.trade-offer-participants {display:grid;gap:4px;margin:7px 0;}
.trade-offer-participants>p {margin:0;color:#bca7c5;font-size:10px;line-height:1.45;overflow-wrap:anywhere;}
.trade-offer-participants strong {color:#e6c9dd;font-size:inherit;font-weight:600;}

/* Direct player trades share the collection cards and native dialog styling. */
.public-player-actions {display:flex;align-items:center;gap:10px;flex:none;max-width:100%;}
.public-player-header .public-player-actions>.profile-member {box-sizing:border-box;min-width:0;width:auto;padding:9px 12px;text-align:left;}
.public-player-actions>.profile-member span {font-size:8px;letter-spacing:.08em;margin-bottom:4px;}
.public-player-actions>.profile-member strong {font-size:11px;}
.public-player-actions>.profile-send-trade {flex:none;align-self:center;margin:0;min-height:34px;padding:8px 12px;font-size:10px;}
.community-dialog.direct-trade-dialog {box-sizing:border-box;width:min(840px,calc(100vw - 24px));height:min(680px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:18px;overflow:hidden;}
.direct-trade-dialog[open] {display:flex;flex-direction:column;gap:12px;}
.direct-trade-dialog>.rates-heading {flex:none;margin:0;gap:12px;align-items:center;}
.direct-trade-dialog>.rates-heading h2 {margin:0;font-size:17px;line-height:1.3;overflow-wrap:anywhere;}
.direct-trade-dialog>.rates-heading>button {flex:none;font-size:10px;min-height:32px;padding:7px 10px;}
.direct-trade-body {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:#a24b80 #ffffff08;}
.direct-trade-note {margin:0 0 12px;font-size:11px;line-height:1.55;color:#bba3c4;}
.direct-trade-names {margin:0 0 8px;color:#efb2d5;font-size:13px;overflow-wrap:anywhere;}
.direct-trade-sides {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-bottom:12px;}
.direct-trade-side:first-child {padding-right:16px;}
.direct-trade-side+.direct-trade-side {padding-left:16px;border-left:2px solid #ef80bd;}
.direct-trade-side {min-width:0;}
.direct-trade-side h3 {font-size:11px;letter-spacing:.06em;color:#e9b5d5;margin:0 0 8px;}
.direct-trade-side-heading {margin-bottom:10px;}
.direct-trade-side-heading h3 {margin-bottom:4px;}
.direct-trade-side-heading>span {font-size:11px;color:#ae96b8;overflow-wrap:anywhere;}
.direct-trade-selected-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;}
.direct-trade-card {min-width:0;margin:0;cursor:default;}
.direct-trade-card>.collection-card-image {width:100%;height:auto;aspect-ratio:2/3;}
.direct-trade-card .collection-card-info {display:flex;flex-direction:column;gap:5px;padding:9px;min-width:0;}
.direct-trade-card .collection-card-info>strong {font-size:12px;overflow-wrap:anywhere;}
.direct-trade-card .collection-stats {font-size:10px;line-height:1.5;}
.direct-trade-card .collection-rarity,.direct-trade-card .card-level-badge {font-size:9px;}
.direct-trade-add-slot.game-button {width:100%;height:150px;min-width:0;padding:12px;border:1px dashed #c36a9c88;border-radius:12px;background:#e65aa510;color:#df9dc5;font-size:10px;white-space:normal;}
.direct-trade-add-slot.game-button:hover {border-color:#ff91cb;background:#e65aa51c;}
.direct-trade-quantity {display:flex;gap:4px;align-items:center;justify-content:center;padding:0 6px 8px;}
.direct-trade-quantity .game-button {padding:4px;min-width:22px;min-height:26px;font-size:12px;line-height:1;}
.direct-trade-quantity input {box-sizing:border-box;min-width:0;width:38px;margin:0;padding:5px 2px;text-align:center;font:inherit;font-size:11px;color:#f3dcec;background:#160d1e;border:1px solid #b16a9a66;border-radius:6px;}
.direct-trade-copies {margin:0;padding:0 8px 8px;color:#dbb6d4;font-size:11px;}
.direct-trade-unavailable {margin:0;padding:0 8px 8px;color:#f29bb7;font-size:10px;}
.direct-trade-status {flex:none;max-height:76px;overflow:auto;margin:0;font-size:12px;line-height:1.5;color:#e4b4d3;}
.direct-trade-status:empty {display:none;}
.direct-trade-actions {display:flex;gap:8px;flex:none;}
.direct-trade-actions>.game-button {flex:1;min-width:0;min-height:38px;margin:0;padding:10px 8px;font-size:11px;line-height:1.3;white-space:normal;}
.direct-trade-picker .direct-trade-filters {display:grid;grid-template-columns:minmax(0,1fr) 130px 130px;gap:8px;margin:0;flex:none;}
.direct-trade-filters>input,.direct-trade-filters>select {box-sizing:border-box;min-width:0;width:100%;height:38px;margin:0;font-size:12px;}
.direct-trade-picker-grid.collection-container {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:4px;margin:0;}
.direct-trade-choice {display:block;min-width:0;padding:0;border:0;border-radius:12px;background:none;color:inherit;text-align:left;cursor:pointer;}
.direct-trade-choice>.direct-trade-card {height:100%;}
.direct-trade-choice[aria-pressed="true"] {outline:2px solid #ff81c9;outline-offset:2px;}
.direct-trade-choice:disabled {opacity:.45;cursor:not-allowed;}
.direct-trade-choice:focus-visible {outline:2px solid #ffd0eb;outline-offset:3px;}
.notification-row.notification-direct-trade {margin:8px 0;padding:12px;border:1px solid #ec88c23d;border-radius:11px;background:#da5a9e0c;animation:direct-trade-notice 4s ease-in-out infinite;}
.notification-direct-trade>.game-button {width:calc(50% - 6px);max-width:130px;font-size:10px;}
.notification-direct-trade>.game-button+.game-button {margin-left:10px;}
@keyframes direct-trade-notice {0%,100%{background-color:#da5a9e0a;box-shadow:inset 0 0 12px #f879bd06;}50%{background-color:#da5a9e1b;box-shadow:inset 0 0 16px #f879bd12;}}
@media(max-width:650px){.community-dialog.direct-trade-dialog {padding:12px;}.direct-trade-dialog>.rates-heading h2 {font-size:14px;}.direct-trade-sides {grid-template-columns:1fr;}.direct-trade-side:first-child {padding-right:0;}.direct-trade-side+.direct-trade-side {padding-left:0;padding-top:18px;margin-top:18px;border-left:0;border-top:2px solid #ef80bd;}.direct-trade-picker-grid.collection-container {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.direct-trade-picker .direct-trade-filters {grid-template-columns:repeat(2,minmax(0,1fr));}.direct-trade-filters>input {grid-column:1/-1;}.direct-trade-actions>.game-button {font-size:10px;padding:9px 5px;}.profile-send-trade {align-self:flex-start;}}
@media(prefers-reduced-motion:reduce){.notification-row.notification-direct-trade {animation:none;}}

/* Compact notification actions stay outside the scrolling message list. */
.notification-dialog>.rates-heading {gap:8px;flex-wrap:wrap;align-items:center;}
.notification-dialog>.rates-heading>h2 {margin:0;font-size:13px;}
.notification-heading-actions {display:flex;gap:6px;align-items:center;margin-left:auto;}
.notification-heading-actions>.game-button {min-height:28px;margin:0;padding:6px 8px;font-size:9px;line-height:1.2;white-space:nowrap;}
.notification-clear-status {flex-basis:100%;margin:2px 0 0;font-size:11px;line-height:1.4;color:#d9abc9;}

/* Clan hall: the same cards, panels and inline pack artwork as the rest of LOST-TCG. */
body:has(.clan-page) {height:auto!important;min-height:100dvh;overflow-y:auto!important;}
.clan-page {width:min(1240px,100%);box-sizing:border-box;margin:0 auto;padding:24px 20px 40px!important;}
.clan-page [hidden] {display:none!important;}
.clan-page-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.clan-page-heading h1 {margin:0;line-height:1;}.clan-page-heading h1 img {width:170px;height:auto;display:block;}
.clan-marks {display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;padding:10px 14px;border:1px solid #f1ce7840;border-radius:12px;background:#e9bc510a;}
.clan-marks strong {font-size:22px;color:#ffe0a2;}.clan-marks>span:last-child {grid-column:1/-1;font-size:8px;letter-spacing:.12em;color:#c8b291;text-align:center;}.clan-mark-icon {font-size:24px;color:#f8d582;text-shadow:0 0 12px #edc76f55;}
.clan-lobby-grid,.clan-bottom-grid {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;}
.clan-page .game-panel {min-width:0;margin:0;padding:20px;border:1px solid #da72b33b;border-radius:16px;background:linear-gradient(145deg,#21142be8,#100c18);}
.clan-page h2 {font-size:19px;margin:0 0 12px;}.clan-page h3 {font-size:14px;}.clan-page .help-note {font-size:12px;line-height:1.65;color:#baa3c4;}.clan-page .game-message:empty {display:none;}
.clan-section-heading {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px;}.clan-section-heading h2 {margin:0;}
.clan-form {display:flex;flex-direction:column;gap:16px;}.clan-form label {display:flex;flex-direction:column;gap:8px;font-size:12px;color:#d3b7d0;}.clan-form input,.clan-form select,.clan-search input {box-sizing:border-box;width:100%;min-width:0;height:40px;}.clan-form .game-button {margin-top:2px;}
.clan-search {margin:0 0 14px!important;}.clan-list-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #e08ab521;}.clan-list-row>div {min-width:0;}.clan-list-row strong {overflow-wrap:anywhere;}.clan-list-row p {margin:5px 0 0;}.clan-list-row>.game-button {flex:none;padding:9px 12px;font-size:10px;}
.clan-overview {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px!important;}.clan-overview h2 {font-size:26px;overflow-wrap:anywhere;margin-bottom:8px;}.clan-overview p {margin-bottom:0;}.clan-growth {width:240px;flex:none;}.clan-progress {height:7px;background:#ffffff0b;border:1px solid #d180b82c;border-radius:99px;overflow:hidden;}.clan-progress>span {display:block;height:100%;width:0;background:linear-gradient(90deg,#b02b75,#ff9bd0);transition:width .45s ease;}.clan-growth>.help-note {display:block;margin-top:8px;}
.clan-content-grid {display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;margin-bottom:18px;}
.clan-pack-grid {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;width:100%;max-width:none!important;margin:0!important;}
.clan-pack {min-width:0;width:100%!important;}.clan-pack .pack-art-wrap {position:relative;display:flex;justify-content:center;width:100%;height:clamp(230px,31vw,400px)!important;}
.clan-pack-image {display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:none;cursor:default;}.clan-pack .pack-art {display:block;width:auto!important;max-width:100%!important;height:100%!important;object-fit:contain;transition:transform .3s ease,filter .3s ease;}
.clan-pack .pack-rate-info {right:0;top:4px;}.clan-pack h3 {margin:12px 0;font-size:15px;text-align:center;color:#b9d8f6;}.clan-pack-eclipse h3 {color:#f5a2af;}
.clan-pack-image:has(.art-hit) .pack-art,.clan-pack-image:focus-visible .pack-art {transform:translateY(-5px);filter:drop-shadow(0 0 13px #87bcf76b);cursor:pointer;}.clan-pack-eclipse .clan-pack-image:has(.art-hit) .pack-art,.clan-pack-eclipse .clan-pack-image:focus-visible .pack-art {filter:drop-shadow(0 0 13px #f3597870);}
.clan-buy.game-button {display:block;min-width:0;width:100%;padding:11px 5px!important;white-space:normal;font-size:10px!important;background:linear-gradient(135deg,#36527f,#203552);border-color:#87baff66;color:#deedff;}.clan-pack-eclipse .clan-buy.game-button {background:linear-gradient(135deg,#81304b,#4d1a2f);border-color:#f581a066;color:#ffe3ec;}.clan-shop-note {margin-bottom:0;text-align:center;}
.clan-card {width:100%;margin:0;cursor:default;}.clan-card .collection-card-image {height:auto!important;aspect-ratio:2/3;}.clan-card .collection-card-image img {width:100%;height:100%;object-fit:cover;}.clan-card .collection-card-info {display:flex;flex-direction:column;gap:5px;padding:9px;}.clan-card strong {font-size:12px;}.clan-card .collection-stats {font-size:10px;}.clan-card .card-level-badge {font-size:9px;}
#clan-boss-card {width:min(175px,100%);margin:14px auto;}.clan-boss-panel {text-align:center;}.clan-boss-panel .clan-section-heading {text-align:left;}.boss-health>span {background:linear-gradient(90deg,#9e2866,#f7a6d6);}.clan-boss-panel>.game-button {width:100%;}.clan-boss-panel>.help-note:last-child {margin-bottom:0;}
.clan-member {display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:10px 0;border-bottom:1px solid #ffffff0b;font-size:13px;}.clan-member>strong {flex:1;min-width:60px;overflow-wrap:anywhere;}.clan-member>.game-button {font-size:9px;padding:6px 8px;}.clan-member-role {font-size:8px;color:#ebc580;letter-spacing:.08em;}#clan-leave {margin-top:16px;font-size:10px;}
.clan-dialog {width:min(430px,calc(100vw - 24px));}.clan-dialog .game-action-body>.game-button {margin:6px 8px 0 0;}.clan-dialog .game-action-body>p {line-height:1.6;}.clan-battle-enemy {width:min(160px,42vw);margin:18px auto;text-align:center;}.clan-battle-hp {font-size:12px;color:#f5aacd;}.clan-fighters {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:700px;margin:0 auto;}.clan-fighter {min-width:0;padding:0;border:0;border-radius:12px;background:none;color:inherit;text-align:left;cursor:pointer;}.clan-fighter:focus-visible,.clan-fighter:hover:not(:disabled) {outline:2px solid #f98bc6;outline-offset:3px;}.clan-fighter.is-knocked-out {opacity:.3;}.clan-battle-actions {display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;}.clan-battle-actions>.game-button {font-size:11px;}
.clan-page>.pack-section {display:none!important;}
#clan-recovery:empty {display:none;}#clan-recovery {margin-bottom:16px;}.clan-page .legal-links {position:static;box-sizing:border-box;width:fit-content;max-width:100%;margin:24px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:6px 9px;font-size:10px;}
@media(max-width:900px){.clan-content-grid {grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);}.clan-pack-grid {gap:12px!important;}.clan-page .game-panel {padding:16px;}.clan-lobby-grid,.clan-bottom-grid {grid-template-columns:1fr 1fr;}.clan-growth {width:190px;}}
@media(max-width:650px){.clan-page {padding:18px 12px 32px!important;}.clan-page-heading h1 img {width:135px;}.clan-marks {padding:8px 10px;}.clan-marks strong {font-size:19px;}.clan-content-grid,.clan-lobby-grid,.clan-bottom-grid {grid-template-columns:1fr;}.clan-overview {align-items:stretch;flex-direction:column;gap:14px;}.clan-growth {width:100%;}.clan-pack .pack-art-wrap {height:clamp(200px,59vw,340px)!important;}.clan-pack h3 {font-size:12px;}.clan-page .game-panel {padding:14px;}.clan-fighters {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.clan-fighter .collection-stats {font-size:9px;}.clan-battle .clan-section-heading h2 {font-size:16px;} .clan-page h2 {font-size:18px;}}
@media(prefers-reduced-motion:reduce){.clan-progress>span,.clan-pack .pack-art {transition:none;}}

.clan-pack-aurora {--pack-hover-glow:#87bcf76b;}.clan-pack-eclipse {--pack-hover-glow:#f3597870;}

body:has(.clan-page)>.legal-links {display:none;}
.clan-page .clan-pack {display:flex!important;flex-direction:column;align-items:center;padding:0!important;gap:0;cursor:default;}
.clan-page .clan-pack>.pack-art-wrap {order:0!important;flex:none;}.clan-page .clan-pack>h3 {order:1!important;}.clan-page .clan-pack>.clan-buy {order:2!important;}
.clan-page .clan-pack .pack-art {filter:drop-shadow(0 10px 14px #0007);transform:none!important;}
.clan-page .clan-pack-image:has(.art-hit) .pack-art,.clan-page .clan-pack-image:focus-visible .pack-art {transform:translateY(-5px)!important;filter:drop-shadow(0 10px 14px #0007) drop-shadow(0 0 13px var(--pack-hover-glow));}
.clan-page .clan-pack .pack-art-wrap {width:100%!important;height:clamp(230px,31vw,400px)!important;}
.clan-battle-enemy {width:min(130px,35vw);}
@media(max-width:650px){.clan-page .clan-pack .pack-art-wrap {height:clamp(190px,59vw,320px)!important;}.clan-fighters {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}.clan-fighter .collection-card-info {padding:5px 3px;gap:3px;}.clan-fighter .collection-card-info strong {font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.clan-fighter .collection-stats {font-size:8px;overflow-wrap:anywhere;}.clan-fighter .card-level-badge {font-size:7px;padding:2px;}.clan-battle-actions>.game-button {font-size:9px;padding:9px 10px;}}

.clan-page {display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;}

.clan-form :is(input,select),.clan-search input {min-height:40px;padding:10px 14px;border:1px solid #ffffff24;border-radius:10px;background:#14111e;color:#f4eaf8;font:inherit;font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;}
.clan-form input::placeholder,.clan-search input::placeholder {color:#91798e;}
.clan-form input[type=number] {appearance:textfield;-moz-appearance:textfield;box-shadow:0 0 12px #ff45c620;}
.clan-form input[type=number]::-webkit-inner-spin-button,.clan-form input[type=number]::-webkit-outer-spin-button {appearance:none;margin:0;}
.clan-form :is(input,select):hover,.clan-search input:hover {border-color:#ff45c6b3;background:#1c1425;box-shadow:0 0 12px #ff45c630;}
.clan-form :is(input,select):focus,.clan-search input:focus {border-color:#ff45c6;box-shadow:0 0 0 3px #ff2fae24,0 0 20px #ff2fae1f;}

.clan-dialog {box-sizing:border-box;max-height:calc(100dvh - 24px);overflow-y:auto;}

/* Keep clan descriptions, actions and small-print comfortably separated. */
.clan-page .game-panel>p.help-note {margin:10px 0 14px;}
.clan-page .game-panel>p.help-note:last-child {margin-bottom:0;}
.clan-page .game-panel>.game-button+p.help-note {margin-top:12px;}
.clan-page .clan-shop-note {margin:18px 0 0!important;}
.clan-page .clan-create-panel>p.help-note {margin-bottom:18px;}
.clan-page #clan-boss-hp {margin:10px 0 14px;}
.clan-field-note {font-size:11px;line-height:1.5;color:#b59aba;font-weight:normal;}
.clan-dialog .game-action-body>p {margin:0 0 14px;}
.clan-dialog .game-action-body>.game-message:empty {display:none;}

/* A top-layer reveal keeps the hall in place and prevents hover on the packs behind it. */
body[data-clan-page].clan-pack-open {overflow:hidden!important;}
.clan-reveal-dialog {position:fixed;inset:0;box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:16px;border:0;border-radius:0;background:#0d08132b;color:#f4eaf8;overflow:clip;overscroll-behavior:contain;}
.clan-reveal-dialog[open] {display:grid;place-items:center;}
.clan-reveal-dialog::backdrop {background:#0c081170;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.clan-reveal-dialog .pack-section {display:flex!important;align-items:center;justify-content:center;width:100%;min-height:0!important;margin:0;padding:0;}
.clan-reveal-dialog #cards-container {display:flex;align-items:center;justify-content:center;width:100%;min-height:0;margin:0;padding:0;}
.clan-reveal-dialog .booster-view {gap:clamp(8px,1.2vh,14px);padding:0;}
.clan-reveal-dialog .booster-progress {margin:0;font-size:14px;}
.clan-reveal-dialog .booster-card-slot {display:flex;align-items:center;justify-content:center;width:min(280px,78vw,calc((100dvh - 180px) * 2 / 3));max-width:100%;max-height:none;aspect-ratio:2/3;flex:none;}
.clan-reveal-dialog .booster-card-slot .booster-flip-card {width:100%!important;max-width:none!important;min-width:0!important;margin:0;}
.clan-reveal-dialog .booster-flip-card:hover {transform:none;box-shadow:none;}
.clan-reveal-dialog .booster-controls {flex-wrap:wrap;gap:12px;}
.clan-reveal-dialog .booster-button {margin:4px 0 0;height:44px;}
@media(min-width:681px){.clan-reveal-dialog .booster-card-slot {width:min(300px,42vh);}.clan-reveal-dialog .booster-card-slot .booster-flip-card {width:min(100%,260px)!important;}}
@media(prefers-reduced-motion:reduce){.clan-reveal-dialog::backdrop {backdrop-filter:none;-webkit-backdrop-filter:none;}}

/* Clan lobby: readable browsing and creation panels without stretched empty space. */
.clan-lobby-grid {align-items:start;gap:20px;}
#clan-lobby .game-panel {padding:22px;}
#clan-lobby .clan-section-heading {gap:8px 16px;margin-bottom:16px;}
#clan-lobby .clan-section-heading h2 {line-height:1.4;}
#clan-lobby #clan-your-score {line-height:1.5;}
#clan-lobby .clan-search {display:block;width:100%;margin-bottom:18px!important;}
#clan-lobby .clan-search input {width:100%!important;max-width:none!important;}
#clan-list {display:grid;gap:10px;}
#clan-lobby .clan-list-row {gap:14px;padding:14px;border:1px solid #df80b72b;border-radius:11px;background:#e376b606;}
#clan-lobby .clan-list-row strong {display:block;font-size:14px;line-height:1.5;}
#clan-lobby .clan-list-row p {margin:6px 0 0;line-height:1.65;}
#clan-lobby .clan-list-row>.game-button {margin:0;max-width:45%;white-space:normal;line-height:1.4;}
#clan-lobby .clan-list-empty {margin:0;padding:18px 14px;border:1px dashed #dd89b52e;border-radius:11px;line-height:1.7;}
.clan-lobby-notes {margin-top:20px;padding-top:16px;border-top:1px solid #df80b721;color:#baa3c4;font-size:12px;line-height:1.75;}
.clan-lobby-notes p {margin:0;}
.clan-lobby-notes p+p {margin-top:10px;}
#clan-more {margin-top:16px;}
#clan-lobby .clan-create-panel>h2 {line-height:1.4;margin-bottom:10px;}
#clan-lobby .clan-create-panel>p.help-note {margin:0 0 22px;line-height:1.75;}
#clan-lobby .clan-form {gap:18px;}
#clan-lobby .clan-form label {line-height:1.5;gap:9px;}
#clan-lobby .clan-form .clan-field-note {line-height:1.6;}
#clan-lobby .clan-form>.game-button {margin:4px 0 0;min-height:42px;line-height:1.4;white-space:normal;}
@media(max-width:820px){.clan-lobby-grid {grid-template-columns:minmax(0,1fr);}#clan-lobby .game-panel {padding:18px;}#clan-lobby .clan-section-heading {align-items:flex-start;flex-direction:column;gap:6px;}}
@media(max-width:380px){#clan-lobby .game-panel {padding:15px;}#clan-lobby .clan-list-row {align-items:flex-start;flex-direction:column;gap:12px;}#clan-lobby .clan-list-row>.game-button {max-width:100%;align-self:flex-end;}}

/* Leaving a clan cannot expose populated hall/reveal content beneath the lobby. */
:is(#clan-lobby,#clan-hall,#clan-battle)[hidden],.clan-reveal-dialog:not([open]) {display:none!important;}

/* Clan chat shares the main chat placement and stays hidden outside membership. */
.global-chat-toggle[hidden] {display:none!important;}
body.clan-pack-open :is(.clan-chat-toggle,.global-chat-panel) {display:none!important;}

/* Bulk synthesis shortcuts retain the collection's compact pink controls. */
.synthesis-bulk-tools {display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px;}
.synthesis-bulk-tools label {display:flex;align-items:center;gap:6px;color:#cec0d6;font-size:11px;line-height:1.4;}
.synthesis-bulk-tools input {box-sizing:border-box;width:54px;min-height:34px;padding:6px 7px;border:1px solid #733456;border-radius:8px;background:#14111e;color:#f4eaf8;font:inherit;}
.synthesis-bulk-tools .game-button {min-height:34px;margin:0;padding:7px 8px;font-size:10px;}
.synthesis-bulk-note {margin:7px 0 0;font-size:10px;}
.synthesis-material-max {display:block;width:100%;min-height:28px;margin-top:6px;border:1px solid #733456;border-radius:7px;background:#32172d;color:#f5bfdf;font:inherit;font-size:10px;cursor:pointer;}
.synthesis-material-max:hover:enabled {border-color:#ff69b9;background:#54213f;}
.synthesis-material-max:disabled {opacity:.45;cursor:default;}
@media(max-height:600px){.synthesis-bulk-tools {margin-top:7px;}.synthesis-bulk-note {display:none;}}

.synthesis-bulk-tools {display:grid;grid-template-columns:84px minmax(0,1fr) 48px;align-items:center;gap:6px;}
.synthesis-bulk-tools label {margin:0;padding:0;min-width:0;font-size:10px;}
.synthesis-bulk-tools input {width:44px;height:34px;min-height:34px;margin:0;padding:5px 6px;font-size:12px;}
.synthesis-bulk-tools .game-button {box-sizing:border-box;width:100%;min-width:0!important;height:34px;margin:0!important;padding:6px;font-size:9px;letter-spacing:.03em;}
body .synthesis-dialog .gallery-collection-controls {display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,.8fr);gap:8px;width:100%;box-sizing:border-box;}
body .synthesis-dialog .gallery-collection-controls>:is(input,select) {box-sizing:border-box;width:100%;min-width:0;max-width:none;}

@media(max-height:600px){.synthesis-summary {padding:8px 10px;}.synthesis-summary>.synthesis-note {font-size:10px;margin:4px 0;}.synthesis-progress {margin-top:6px;}.synthesis-progress span {font-size:11px;}}
@media(max-height:600px) and (min-width:681px){.synthesis-tools {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;}body .synthesis-dialog .gallery-collection-controls {grid-column:1;margin:0!important;}.synthesis-protection {grid-column:1;grid-row:2;}.synthesis-bulk-tools {grid-column:2;grid-row:1/span 2;margin:0;align-self:center;}}

.synthesis-bulk-tools input {appearance:textfield;-moz-appearance:textfield;text-align:center;}
.synthesis-bulk-tools input::-webkit-inner-spin-button,.synthesis-bulk-tools input::-webkit-outer-spin-button {appearance:none;margin:0;}

/* Pack navigation overlays the card rail without moving cards or controls. */
.booster-previous {position:absolute;right:calc(100% + 8px);top:50%;z-index:10;display:grid;place-items:center;width:30px;height:40px;margin:0;padding:4px;border:1px solid #b74184;border-radius:10px;background:linear-gradient(145deg,#57203f,#291326);color:#ffa0d3;box-shadow:0 0 12px #ed48a826;cursor:pointer;transform:translateY(-50%);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;touch-action:manipulation;}
.booster-previous svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.booster-previous:hover {background:#6c2850;border-color:#ff75bd;box-shadow:0 0 15px #ed48a84d;}
.booster-previous:focus-visible {outline:2px solid #ff9ed2;outline-offset:3px;}
.booster-flip-card.booster-reverse.booster-is-flipped .booster-flip-inner {transform:rotateY(-180deg);}
@media(max-width:680px){
 body.booster-active .booster-card-slot,.clan-reveal-dialog .booster-card-slot {max-width:calc(100vw - 92px)!important;}
 body.booster-active .booster-card-slot .booster-flip-card {width:min(280px,calc(100vw - 92px))!important;max-width:none!important;min-width:0!important;}
 .booster-previous {width:32px;height:44px;}
}

/* Keep pack navigation still while only the card itself enters and flips. */
.booster-card-slot {animation:none;}
.booster-card-slot>.booster-previous {opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s,background .18s ease,border-color .18s ease,box-shadow .18s ease;}
.booster-card-slot>.booster-previous.is-visible {opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
@media(prefers-reduced-motion:reduce){.booster-card-slot>.booster-previous {transition:none;}}

/* Rarity halos belong to the rotating faces, never the stationary wrapper. */
.booster-card-slot .booster-flip-card {box-shadow:none!important;filter:none;}
.booster-card-slot .booster-card-face {
 box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 18px color-mix(in srgb,var(--rarity-color-2,#ff4eb8) 45%,transparent),0 0 36px color-mix(in srgb,var(--rarity-color-2,#ff4eb8) 22%,transparent),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 22px color-mix(in srgb,var(--rarity-color-2,#ff4eb8) 15%,transparent)!important;
 animation:boosterFaceGlow 1.5s ease-in-out infinite alternate;
}
@keyframes boosterFaceGlow {from {filter:brightness(.98);} to {filter:brightness(1.08);}}
@media(prefers-reduced-motion:reduce){.booster-card-slot .booster-card-face {animation:none;}}

.membership-tier-extras {display:grid;gap:10px;margin:16px 0;}
.membership-tier-extras p {margin:0;padding:12px 14px;border:1px solid #62304f;border-radius:12px;background:#211324;line-height:1.6;overflow-wrap:anywhere;}
.membership-tier-extras strong {display:block;margin-bottom:5px;color:#f8a9d3;font-size:12px;}
.membership-tier-extras span {display:block;color:#c6b8cf;font-size:12px;}

/* A stationary shortcut beside the artwork, outside normal layout flow. */
.pack-custom .custom-last-tag {position:absolute;top:50%;z-index:3;display:block;box-sizing:border-box;width:26px;margin:0;padding:8px 5px;border:1px solid transparent;border-radius:7px;background:transparent;color:#78b9d5;font:inherit;font-size:11px;font-weight:500;line-height:1.25;letter-spacing:.02em;writing-mode:vertical-rl;white-space:nowrap;transform:translateY(-50%);cursor:pointer;transition:color .18s ease,background .18s ease,border-color .18s ease;}
.pack-custom .custom-last-tag:hover:not(:disabled) {color:#a6dfff;background:#65bcf00a;border-color:#65bcf025;}
.pack-custom .custom-last-tag:focus-visible {outline:1px solid #78caff;outline-offset:2px;}
.pack-custom .custom-last-tag:disabled {opacity:.35;cursor:default;}
.pack-custom .custom-last-tag[hidden] {display:none;}
body[data-pack-page="vip"] .pack-custom .custom-last-tag {color:#83cfa6;}
body[data-pack-page="vip"] .pack-custom .custom-last-tag:hover:not(:disabled) {color:#b5f0cf;background:#83d4a60a;border-color:#83d4a625;}
body[data-pack-page="vip"] .pack-custom .custom-last-tag:focus-visible {outline-color:#83d4a6;}




/* Compact clan contributions and a bounded, readable roster. */
.clan-bottom-grid {grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr);align-items:start;}
.clan-bottom-grid>.game-panel {min-width:0;}
.clan-page .clan-donation-panel {padding:16px;}
.clan-donation-panel h2 {font-size:17px;margin:0 0 8px;}
.clan-page .clan-donation-panel>p.help-note {font-size:11px;line-height:1.5;margin:8px 0 0;}
.clan-donation-panel #clan-donate {margin:12px 0 2px;padding:9px 12px;font-size:11px;}
#clan-members {max-height:320px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#995474 #160e1c;padding-right:6px;}
#clan-applications {max-height:240px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#995474 #160e1c;}
#clan-members:focus-visible {outline:1px solid #ce719c;outline-offset:3px;border-radius:6px;}
#clan-members .clan-member {flex-wrap:nowrap;gap:10px;padding:11px 0;}
.clan-member-info {flex:1;min-width:0;}
.clan-member-identity {display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;line-height:1.4;}
.clan-member-identity strong {font-size:13px;overflow-wrap:anywhere;}
.clan-member-title {font-size:10px;font-weight:600;overflow-wrap:anywhere;}
.clan-title-mythic {color:#d29cf5;text-shadow:0 0 7px #ba65f12b;}
.clan-title-transcendent {color:#83cbff;text-shadow:0 0 7px #58adf332;}
.clan-title-divine {color:#f0d28e;text-shadow:0 0 7px #eabe6132;}
.clan-member-meta {display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:4px;color:#ac9db7;font-size:10px;line-height:1.5;}
.clan-member-meta span {color:#d3bfdc;}
#clan-members .game-button,.clan-member-role {flex-shrink:0;}
@media(max-width:650px){.clan-bottom-grid {grid-template-columns:minmax(0,1fr);}.clan-page .clan-donation-panel {padding:14px;}#clan-members {max-height:300px;}}