/* ============= WardrobeForge — pixel game UI ============= */

@font-face {
  font-family: 'PressStart';
  src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
  font-display: swap;
}

:root{
  --coral:#F85646;
  --coral-deep:#D43A2C;
  --coral-soft:#FF7E70;
  --pink:#DCC7C7;
  --pink-soft:#F2E3E3;
  --pink-neon:#FFB8C8;
  --mint:#B8F2D8;
  --sky:#A8DEFF;
  --lemon:#FFE9A8;
  --lavender:#D4B8FF;
  --white:#FFFFFF;
  --ink:#2A1B1B;
  --ink-2:#333333;
  --paper:#FFF7F2;
  --paper-2:#F8E9E5;
  --shadow:#2A1B1B;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family: 'VT323', 'Courier New', monospace;
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none;
}

img{image-rendering: pixelated; image-rendering:-moz-crisp-edges;}

a{color:inherit; text-decoration:none}

/* ----- pixel utility classes ----- */
.pixel{font-family:'PressStart', 'VT323', monospace; letter-spacing:.02em}
.mono{font-family:'VT323', monospace}

/* checkered dithered background */
.dither-bg{
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, var(--paper-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--paper-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--paper-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--paper-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.cloud-bg{
  background:
    radial-gradient(ellipse at 10% 20%, var(--pink-neon) 0%, transparent 30%),
    radial-gradient(ellipse at 90% 30%, var(--sky) 0%, transparent 32%),
    radial-gradient(ellipse at 30% 80%, var(--lemon) 0%, transparent 28%),
    radial-gradient(ellipse at 80% 90%, var(--lavender) 0%, transparent 30%),
    var(--paper);
}

/* chunky pixel border via box-shadow stair-step */
.pxl-box{
  background: var(--white);
  position:relative;
  box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink),
    0 8px 0 0 var(--coral);
}
.pxl-box.no-drop{ box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink);
}
.pxl-box.deep{
  box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink),
    8px 8px 0 0 var(--ink),
    8px 8px 0 4px var(--coral);
}
.pxl-box.coral{ background: var(--coral); color: var(--white) }
.pxl-box.pink{ background: var(--pink); }
.pxl-box.dark{ background: var(--ink); color: var(--white) }

/* pixel button */
.pxl-btn{
  font-family:'PressStart', monospace;
  font-size: 12px;
  letter-spacing:.04em;
  background: var(--coral);
  color: var(--white);
  border:none;
  padding: 14px 18px;
  cursor:pointer;
  position:relative;
  text-transform:uppercase;
  box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink),
    0 8px 0 0 var(--coral-deep);
  transition: transform .08s steps(2);
}
.pxl-btn:hover{ filter: brightness(1.05) }
.pxl-btn:active{ transform: translateY(4px); box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink);
}
.pxl-btn.ghost{ background: var(--white); color: var(--ink); box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink),
    0 8px 0 0 var(--pink);
}
.pxl-btn.ghost:active{ transform: translateY(4px); box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink);
}

/* sparkle pulse */
@keyframes sparkle{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.4; transform:scale(.7)}
}
.sparkle{ animation: sparkle 1.6s steps(4) infinite }

/* float */
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-6px)}
}
.float{ animation: floaty 2.4s steps(8) infinite }
.vto-balance-badge{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.vto-balance-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.vto-balance-topup-btn{
  white-space: nowrap;
}
.vto-token-icon{
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.star-power-icons{
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  width: fit-content;
}
.star-power-icon{
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

/* twinkle */
@keyframes twinkle{
  0%,100%{opacity:.2}
  50%{opacity:1}
}
.twinkle{ animation: twinkle 1.4s steps(3) infinite }

/* press-start glitch */
@keyframes blink{ 50%{opacity:0} }
.blink{ animation: blink 1s steps(2) infinite }

/* scanline overlay (subtle) */
.scanlines::after{
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.05) 0 2px,
    transparent 2px 4px
  );
  pointer-events:none;
  mix-blend-mode: multiply;
}

/* nav */
.nav{
  position: sticky; top:0; z-index:50;
  background: var(--white);
  border-bottom: 4px solid var(--ink);
  padding: 14px 24px;
  display:flex; align-items:center; gap: 18px;
  flex-wrap: wrap;
}
.nav .logo{
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
}
.nav .logo img{ width: 38px; height:38px }
.nav .logo span{ font-family:'PressStart', monospace; font-size:14px }
.nav .links{ display:flex; gap: 6px; flex-wrap:wrap; margin-left:auto }
.nav .link{
  font-family:'PressStart', monospace;
  font-size:10px;
  padding: 10px 12px;
  cursor:pointer;
  letter-spacing:.04em;
  color: var(--ink);
  border: 3px solid transparent;
  text-transform: uppercase;
}
.nav .link:hover{ background: var(--paper-2) }
.nav .link.active{
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: 0 4px 0 0 var(--coral);
}
.nav-account{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-account-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  min-height: 48px;
}

.auth-hero{
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 24px;
  align-items: start;
}
.auth-hero-embedded{
  grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr);
}
.auth-card{
  padding: 26px;
}
.auth-card-main{
  background:
    radial-gradient(circle at top right, rgba(255,184,200,.55), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fff7f2 100%);
}
.auth-card-side{
  min-height: 100%;
}
.auth-prompt-card{
  max-width: 720px;
  margin: 0 auto;
}
.topup-hero{
  display:grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, .68fr);
  gap: 24px;
  align-items: start;
}
.topup-hero-main{
  background:
    radial-gradient(circle at top right, rgba(168,222,255,.52), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  padding: 26px;
}
.topup-balance-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom: 22px;
}
.topup-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.topup-card{
  position: relative;
  background: #fff;
  overflow: hidden;
}
.topup-card-custom{
  background: #fff;
}
.topup-card-badge{
  position:absolute;
  top:12px;
  right:12px;
  padding: 6px 8px;
  background: #ffb8c8;
  color: var(--ink);
  font-family:'PressStart', monospace;
  font-size: 8px;
  box-shadow: 0 0 0 3px rgba(42,27,27,.18);
}
.topup-card-stage{
  height: 164px;
  margin: 16px 16px 0;
  border: 3px solid rgba(255,255,255,.84);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.topup-card-stage::after{
  content:'';
  position:absolute;
  inset: auto 0 0 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.45));
}
.topup-card-image{
  width: min(100%, 240px);
  max-height: 132px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  margin: 12px auto 0;
}
.topup-card-amount{
  font-size: 13px;
  margin-bottom: 12px;
  text-align:center;
  color: #fff;
}
.topup-card-price{
  font-size: 22px;
  text-align:center;
  margin-bottom: 18px;
  color: #fff;
}
.topup-card-lower{
  margin-top: 0;
  padding: 18px 16px 18px;
  background: var(--ink);
}
.topup-card-cta,
.topup-custom-cta{
  width:100%;
}
.topup-custom-card{
  padding: 26px;
  background:
    radial-gradient(circle at top right, rgba(255,184,200,.44), transparent 26%),
    linear-gradient(180deg, #fff 0%, #fff7f1 100%);
}
.topup-reward-card{
  overflow: hidden;
}
.topup-reward-confetti{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.topup-reward-confetti-piece{
  position: absolute;
  top: -22px;
  display: block;
  image-rendering: pixelated;
  box-shadow:
    0 0 0 2px var(--ink),
    2px 2px 0 0 rgba(42,27,27,.18);
  animation-name: pixelConfettiFall;
  animation-timing-function: steps(8);
  animation-iteration-count: infinite;
}
.topup-reward-card > *:not(.topup-reward-confetti){
  position: relative;
  z-index: 1;
}
.topup-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(42,27,27,.74);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 130;
}
.topup-modal-shell{
  width: min(760px, 100%);
}
.topup-custom-preview{
  height: 170px;
  margin-bottom: 16px;
  border: 4px solid var(--ink);
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topup-custom-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.topup-slider{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:8px;
  background: linear-gradient(90deg, #ffe9a8 0%, #f85646 100%);
  border: 3px solid var(--ink);
  margin: 10px 0 12px;
}
.topup-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--coral);
}
.topup-slider::-moz-range-thumb{
  width:20px;
  height:20px;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--coral);
}
.topup-slider-scale{
  display:flex;
  justify-content:space-between;
  font-family:'PressStart', monospace;
  font-size: 8px;
  color: rgba(42,27,27,.65);
  margin-bottom: 18px;
}
@keyframes pixelConfettiFall{
  0%{
    transform: translate3d(0, -18px, 0) rotate(0deg);
    opacity: 0;
  }
  8%{
    opacity: 1;
  }
  50%{
    transform: translate3d(12px, 170px, 0) rotate(90deg);
    opacity: 1;
  }
  100%{
    transform: translate3d(-10px, 380px, 0) rotate(180deg);
    opacity: 0;
  }
}
.auth-shell,
.auth-session{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width: 540px;
}
.auth-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.auth-field span{
  font-size: 10px;
}
.auth-field input{
  width:100%;
  border: 4px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: 14px 16px;
  font: inherit;
  font-size: 22px;
}
.auth-field input:focus{
  outline: 4px solid var(--coral);
  outline-offset: 2px;
}
.auth-feedback{
  padding: 12px 14px;
  border-left: 4px solid var(--ink);
  font-size: 20px;
}
.auth-feedback-error{
  background: #ffe2dc;
  color: #7c2219;
  border-left-color: var(--coral-deep);
}
.auth-feedback-success{
  background: #e5fff0;
  color: #124f2d;
  border-left-color: #2b8f54;
}
.auth-benefits{
  display:flex;
  flex-direction:column;
  gap:18px;
  font-size: 20px;
  line-height: 1.4;
}
.auth-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(42, 27, 27, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 120;
}
.auth-modal-shell{
  width: min(760px, 100%);
}
.auth-modal-close{
  border: 3px solid var(--ink);
  background: transparent;
  color: var(--white);
  font-family:'PressStart', monospace;
  font-size: 10px;
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1;
}
.auth-modal-close:hover{
  background: rgba(255,255,255,.08);
}
.auth-prompt-cta{
  margin-top: 22px;
  width: 100%;
}

/* page wrap */
.page{
  max-width: 1240px; margin: 0 auto;
  padding: 36px 24px 80px;
}

.avatar-page-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}

.avatar-stage{
  position: relative;
  min-height: 824px;
  overflow: hidden;
}

.avatar-stage-sidebar{
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: auto;
  max-width: none;
  align-items: flex-start;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.avatar-loadout-panel{
  display: flex;
  flex-direction: column;
}

.avatar-inventory-grid{
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.avatar-inventory-grid::-webkit-scrollbar{
  display: none;
}

.inventory-auth-id-btn{
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family:'PressStart', monospace;
  font-size: 8px;
  line-height: 1;
  padding: 7px 8px 6px;
  cursor: pointer;
  box-shadow: 0 3px 0 0 var(--pink);
}

.inventory-auth-id-btn.active{
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 3px 0 0 var(--coral);
}

.inventory-auth-id-popover{
  position: absolute;
  top: 34px;
  left: 4px;
  right: 4px;
  z-index: 4;
  padding: 10px 12px;
  background: rgba(255,255,255,.97);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 0 var(--coral);
}

.inventory-auth-id-label{
  font-size: 8px;
  color: var(--coral);
  margin-bottom: 6px;
}

.inventory-auth-id-value{
  font-size: 14px;
  line-height: 1.25;
  word-break: break-all;
}

.avatar-stage-figure{
  position: absolute;
  left: 53%;
  top: 32%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.avatar-stage-sidebar,
.avatar-stage-nameplate,
.avatar-stage-switcher,
.avatar-stage-selectors{
  z-index: 2;
}

.avatar-stage-selectors{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: 100%;
}

.avatar-stage-nameplate{
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 0;
  z-index: 1;
}

.avatar-stage-identity,
.avatar-stage-xp{
  width: 100%;
  min-width: 0;
}

/* footer */
.foot{
  border-top: 4px solid var(--ink);
  background: var(--ink); color: var(--white);
  padding: 28px 24px;
  text-align:center;
  font-family:'PressStart', monospace;
  font-size: 10px;
  letter-spacing:.06em;
}
.foot a{ color: var(--coral-soft); margin: 0 8px }
.foot-contact-wrap{
  margin-bottom: 20px;
}
.foot-contact-btn{
  background: var(--white);
  color: var(--ink);
  box-shadow:
    0 -4px 0 0 var(--white),
    0 4px 0 0 var(--white),
    -4px 0 0 0 var(--white),
    4px 0 0 0 var(--white),
    0 8px 0 0 var(--coral);
}
.foot-contact-btn:active{
  box-shadow:
    0 -4px 0 0 var(--white),
    0 4px 0 0 var(--white),
    -4px 0 0 0 var(--white),
    4px 0 0 0 var(--white);
}

/* heading styles */
h1.pixel{ font-size: 28px; line-height:1.2; }
h2.pixel{ font-size: 18px; line-height:1.3; }
h3.pixel{ font-size: 12px; line-height:1.4; letter-spacing:.06em }

.heart{color:var(--coral)}

/* hr - dotted pixel */
.pxl-hr{
  height: 4px;
  background-image: linear-gradient(to right, var(--ink) 50%, transparent 50%);
  background-size: 12px 4px;
  background-repeat: repeat-x;
  border: none;
  margin: 16px 0;
}

/* tag chip */
.chip{
  font-family:'PressStart', monospace;
  font-size: 9px;
  padding: 6px 8px;
  background: var(--ink);
  color: var(--white);
  display:inline-block;
  letter-spacing:.04em;
}
.chip.coral{ background: var(--coral) }
.chip.pink{ background: var(--pink); color: var(--ink) }
.chip.mint{ background: var(--mint); color: var(--ink) }
.chip.sky{ background: var(--sky); color: var(--ink) }
.chip.lemon{ background: var(--lemon); color: var(--ink) }
.chip.lavender{ background: var(--lavender); color: var(--ink) }

/* health/xp bar */
.bar{
  height: 14px;
  background: var(--ink);
  position: relative;
  border: 2px solid var(--ink);
}
.bar > i{
  display:block; height: 100%;
  background: linear-gradient(to right, var(--coral) 0%, var(--coral-soft) 100%);
}
.bar.green > i{ background: linear-gradient(to right, #6BCB77, var(--mint)) }
.bar.blue > i{ background: linear-gradient(to right, #4D9DE0, var(--sky)) }
.bar.purple > i{ background: linear-gradient(to right, #8E5CF7, var(--lavender)) }

/* select / radio pixel chips */
.opts{ display:flex; flex-wrap:wrap; gap:6px }
.opt{
  font-family:'PressStart', monospace;
  font-size: 9px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  background: var(--white);
  cursor:pointer;
  text-transform:uppercase;
}
.opt:hover{ background: var(--paper-2) }
.opt.active{ background: var(--ink); color: var(--white) }
.opt.coral.active{ background: var(--coral) }

/* card grid */
.grid{
  display:grid; gap: 28px;
}
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width: 900px){
  .grid.cols-3, .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .auth-hero{ grid-template-columns: 1fr; }
  .auth-hero-embedded{ grid-template-columns: 1fr; }
  .topup-hero{ grid-template-columns: 1fr; }
  .topup-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr }
  .topup-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }

  .why-wardrobe-card{
    padding: 24px 18px 28px !important;
  }

  .why-wardrobe-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .why-wardrobe-copy{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .why-wardrobe-body{
    padding-left: 0 !important;
  }

  .why-wardrobe-body p{
    font-size: 18px !important;
    line-height: 1.45 !important;
  }

  .why-wardrobe-visual{
    order: 2;
    justify-content: center;
    margin-top: 8px;
  }

  .why-wardrobe-points{
    gap: 12px !important;
  }
}

@media (max-width: 1100px){
  .avatar-stage-figure{
    left: 64%;
    top: 39%;
  }

  .avatar-stage-sidebar{
    max-width: none;
  }
}

@media (max-width: 1500px){
  .avatar-stage{
    min-height: 624px;
  }
}

@media (max-width: 760px){
  .nav-account{
    width:100%;
    justify-content:flex-start;
  }

  .nav-account-pill{
    min-width: 0;
  }

  .avatar-page-grid{
    grid-template-columns: 1fr;
  }

  .avatar-stage{
    min-height: 632px;
  }

  .avatar-stage-figure{
    left: 62%;
    top: 33%;
  }

  .avatar-stage-sidebar{
    width: calc(100% - 32px);
    max-width: none;
  }

  .avatar-stage-nameplate{
    gap: 18px;
  }

  .avatar-stage-identity,
  .avatar-stage-xp{
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 520px){
  .auth-card{
    padding: 18px;
  }

  .avatar-stage{
    min-height: 688px;
  }

  .avatar-stage-figure{
    left: 67%;
    top: 34%;
  }

  .avatar-stage-sidebar{
    width: calc(100% - 24px);
    max-width: none;
  }

  .avatar-stage-selectors{
    width: min(100%, 176px);
  }

  .avatar-stage-selectors > .pxl-box{
    width: 100%;
  }

  .avatar-stage-nameplate{
    width: calc(100% - 8px);
  }
}

/* nft card */
.nft-card{
  background: var(--white);
  padding: 16px;
  cursor:pointer;
  position: relative;
  transition: transform .1s steps(2);
}
.nft-card:hover{ transform: translate(-2px,-2px) }
.nft-thumb{
  background: var(--paper-2);
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.nft-thumb.dither-bg{ background-color: var(--paper-2) }

.crate-grid{
  align-items: stretch;
}
.crate-card{
  border: none;
  text-align: center;
  padding: 20px 18px 22px;
  cursor: pointer;
  transition: transform .12s steps(2), filter .12s steps(2);
}
.crate-card:hover{
  transform: translate(-2px,-2px);
  filter: brightness(1.03);
}
.crate-card.active{
  outline: 4px solid var(--coral);
  outline-offset: 6px;
}
.crate-image-wrap{
  min-height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.crate-image{
  width: 150px;
  height: auto;
  display: block;
  image-rendering: auto;
  filter: drop-shadow(0 14px 0 rgba(42,27,27,.12));
}
.crate-image-large{
  width: 240px;
}
.crate-sunflare .crate-image,
.crate-image.crate-sunflare{
  filter: hue-rotate(0deg) saturate(1.05) brightness(1.02) drop-shadow(0 14px 0 rgba(212,58,44,.16));
}
.crate-nebula .crate-image,
.crate-image.crate-nebula{
  filter: hue-rotate(168deg) saturate(1.16) brightness(1.01) drop-shadow(0 14px 0 rgba(120,98,190,.2));
}
.crate-verdant .crate-image,
.crate-image.crate-verdant{
  filter: hue-rotate(68deg) saturate(1.1) brightness(0.98) drop-shadow(0 14px 0 rgba(75,133,102,.18));
}
.crate-aurora .crate-image,
.crate-image.crate-aurora{
  filter: hue-rotate(112deg) saturate(1.18) brightness(1.02) drop-shadow(0 14px 0 rgba(76,132,192,.18));
}
.crate-detail-shell{
  overflow: hidden;
}
.crate-detail-split{
  grid-template-columns: .9fr 1.1fr;
}
.crate-detail-hero{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 4px solid var(--ink);
}
.crate-detail-hero.crate-sunflare{
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.7), transparent 22%),
    linear-gradient(180deg, #fff4bf 0%, #ffd768 58%, #f7b24c 100%);
}
.crate-detail-hero.crate-nebula{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.7), transparent 22%),
    linear-gradient(180deg, #f8e9ff 0%, #d9c4ff 56%, #b792ff 100%);
}
.crate-detail-hero.crate-verdant{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.7), transparent 22%),
    linear-gradient(180deg, #eef9d5 0%, #cfe89d 56%, #a9d27d 100%);
}
.crate-detail-hero.crate-aurora{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.72), transparent 22%),
    linear-gradient(180deg, #e9f7ff 0%, #bfe0ff 56%, #84bfff 100%);
}
.crate-detail-image-stack{
  position: relative;
  padding: 30px;
}
.crate-detail-open-wrap{
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  width: min(320px, calc(100% - 56px));
}
.crate-legend{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 14px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 8px;
}
.crate-legend-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper-2);
  border-left: 4px solid var(--ink);
}
.crate-legend-thumb{
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crate-legend-art{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.crate-legend-row.locked .crate-legend-art{
  filter: brightness(.42) saturate(.82);
}
.crate-legend-row.owned .crate-legend-art{
  filter: none;
}
.crate-open-btn{
  width: 100%;
  margin-bottom: 18px;
}
.crate-open-btn-hero{
  margin-bottom: 0;
}
.crate-open-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(42,27,27,.74);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 130;
}
.crate-open-shell{
  width: min(920px, 100%);
}
.crate-open-panel{
  position: relative;
  padding: 26px 26px 32px;
  text-align: center;
  overflow: hidden;
}
.crate-open-panel-revealed{
  min-height: 720px;
  display: grid;
  place-items: center;
  align-content: center;
}
.crate-open-panel-sunflare{
  background:
    linear-gradient(180deg, #fff7d8 0%, #ffe39f 58%, #ffc25d 100%);
}
.crate-open-panel-nebula{
  background:
    linear-gradient(180deg, #fff2ff 0%, #ead3ff 58%, #cfabff 100%);
}
.crate-open-panel-verdant{
  background:
    linear-gradient(180deg, #f8ffd8 0%, #ddf1b4 58%, #b9df7e 100%);
}
.crate-open-panel-aurora{
  background:
    linear-gradient(180deg, #f3fbff 0%, #d8ebff 58%, #a9d2ff 100%);
}
.crate-open-panel-revealed::before{
  content:'';
  position:absolute;
  inset:-38%;
  background:
    radial-gradient(circle at center, rgba(255,251,233,.98) 0 10%, rgba(255,245,204,.76) 14%, rgba(255,236,176,.18) 34%, rgba(255,236,176,0) 64%),
    repeating-conic-gradient(from 0deg, rgba(255,224,122,.74) 0deg 11deg, rgba(255,245,215,.06) 11deg 22deg),
    radial-gradient(circle at center, rgba(255,188,88,.16) 0 24%, rgba(255,152,103,.08) 38%, rgba(255,152,103,0) 76%);
  animation: crateRayShift 4.2s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
.crate-open-meta,
.crate-open-stage,
.crate-open-title,
.crate-open-subtitle,
.crate-reveal-card{
  position: relative;
  z-index: 1;
}
.crate-open-meta{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.crate-open-panel-revealed .crate-open-meta{
  position: absolute;
  inset: 22px 22px auto 22px;
  margin-bottom: 0;
}
.crate-modal-close{
  background: rgba(42,27,27,.88);
}
.crate-open-stage{
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.crate-open-image{
  width: min(320px, 68vw);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 24px 0 rgba(255,161,56,.22));
}
.crate-open-title{
  font-size: 22px;
  margin-bottom: 10px;
}
.crate-open-subtitle{
  font-size: 24px;
  opacity: .8;
}
.crate-reveal-card{
  margin: 0 auto;
  max-width: 420px;
  width: min(420px, 100%);
  background: transparent;
  padding: 20px 22px 24px;
}
.crate-auth-code{
  margin: 0 auto 18px;
  max-width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.52);
  border: 3px solid rgba(42,27,27,.22);
}
.crate-auth-code-label{
  font-size: 9px;
  color: var(--coral-deep);
  margin-bottom: 8px;
}
.crate-auth-code-value{
  font-size: 17px;
  line-height: 1.3;
  word-break: break-all;
}
.crate-reveal-art{
  width: 196px;
  height: 196px;
  margin: 0 auto 18px;
  background: rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 18px rgba(255,255,255,.08),
    0 0 48px rgba(255,245,214,.92);
}
@keyframes crateShake{
  0%{transform: translateX(0) rotate(0deg)}
  16%{transform: translateX(-16px) rotate(-5deg)}
  32%{transform: translateX(16px) rotate(5deg)}
  48%{transform: translateX(-12px) rotate(-4deg)}
  64%{transform: translateX(12px) rotate(4deg)}
  80%{transform: translateX(-6px) rotate(-2deg)}
  100%{transform: translateX(0) rotate(0deg)}
}
.crate-open-stage.shake{
  animation: crateShake .95s steps(6) 1;
}
@keyframes crateRayShift{
  0%{
    filter: hue-rotate(0deg) saturate(1);
    opacity: .92;
    transform: scale(1);
  }
  100%{
    filter: hue-rotate(34deg) saturate(1.18);
    opacity: 1;
    transform: scale(1.04);
  }
}

/* legal page typography */
.legal{
  background: var(--white);
  padding: 40px 44px;
  max-width: 820px; margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
}
.legal h1{ font-family:'PressStart', monospace; font-size: 22px; margin-bottom: 8px }
.legal h2{ font-family:'PressStart', monospace; font-size: 12px; margin: 28px 0 8px; color: var(--coral) }
.legal h3{ font-family:'PressStart', monospace; font-size: 10px; margin: 18px 0 6px }
.legal p{ margin-bottom: 12px }
.legal ul{ padding-left: 22px; margin-bottom: 12px }
.legal li{ margin-bottom: 4px }
.legal .meta{ font-family:'PressStart', monospace; font-size: 9px; color:#888 }
.contact-page{
  background:
    radial-gradient(circle at top right, rgba(168,222,255,.34), transparent 24%),
    radial-gradient(circle at bottom left, rgba(255,184,200,.28), transparent 26%),
    linear-gradient(180deg, #fff 0%, #fff7f2 100%);
}
.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.contact-card{
  padding: 18px;
  background: rgba(255,255,255,.9);
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 0 var(--coral);
}
.contact-card p{
  margin-bottom: 0;
  font-size: 26px;
}
.contact-card a,
.contact-page a{
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* avatar stage */
.stage{
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255,184,200,.6) 0%, transparent 50%),
    linear-gradient(to bottom, var(--sky) 0%, var(--pink-neon) 60%, var(--lemon) 100%);
  position:relative;
  overflow:hidden;
  min-height: 540px;
  display:flex; align-items:flex-end; justify-content:center;
}
.stage .star{
  position:absolute; width:8px; height:8px;
  background: var(--white);
  clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}

/* split view */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
}
@media (max-width: 800px){
  .split{ grid-template-columns: 1fr }
  .crate-detail-split{ grid-template-columns: 1fr; }
  .crate-detail-hero{ border-right: none; border-bottom: 4px solid var(--ink); min-height: 320px; }
  .crate-detail-open-wrap{ bottom: 56px; width: min(320px, calc(100% - 36px)); }
  .crate-legend{ grid-template-columns: 1fr; }
}

/* stat row */
.stat-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 0;
  border-bottom: 2px dotted var(--ink);
}
.stat-row:last-child{ border-bottom: none }
.stat-key{
  font-family:'PressStart', monospace;
  font-size: 10px; letter-spacing:.04em;
}
.stat-val{ font-size: 20px }

/* gridfloor */
.gridfloor{
  position:absolute; left:0; right:0; bottom:0; height: 60%;
  background:
    linear-gradient(to top, var(--coral) 0%, transparent 100%),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.4) 24px 26px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.4) 24px 26px);
  transform: perspective(400px) rotateX(60deg);
  transform-origin: top;
  opacity:.5;
}

/* badge ribbons */
.ribbon{
  position:absolute; top:-6px; right:-6px;
  background: var(--coral);
  color: var(--white);
  padding: 6px 8px;
  font-family:'PressStart', monospace; font-size:9px;
  z-index: 2;
  box-shadow: 0 0 0 3px var(--ink);
}
.ribbon.gold{ background: #F4C53C; color: var(--ink) }
.ribbon.purple{ background: var(--lavender); color: var(--ink) }
.ribbon.mint{ background: var(--mint); color: var(--ink) }

/* clickable rows */
.row-list{
  display:flex; flex-direction:column; gap:12px;
}
.row-list .row{
  display:grid; grid-template-columns: 60px 1fr auto; gap:14px; align-items:center;
  background: var(--white); padding: 12px;
  cursor:pointer;
}
.row-list .row:hover{ background: var(--paper-2) }
.row-list .row.active{ background: var(--ink); color: var(--white) }
.row-list .row.active .stat-key{ color: var(--coral-soft) }

/* tooltip */
.kbd{
  font-family:'PressStart', monospace; font-size:9px;
  border:2px solid var(--ink);
  padding: 3px 6px;
  background: var(--white);
  display:inline-block;
}

.monthly-top-shell{
  color: var(--ink);
  overflow: visible;
}

.avatar-orbit-stage{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 18px 16px 12px;
  overflow: hidden;
}

.avatar-orbit-track{
  display: flex;
  gap: 18px;
  width: max-content;
  animation: avatarOrbit 28s linear infinite;
}

.avatar-orbit-spacer{
  flex: 0 0 120px;
}

.avatar-orbit-card{
  width: 100%;
  max-width: 224px;
  margin: 0;
  padding: 16px;
  flex: 0 0 224px;
  background: rgba(255,247,242,.98);
}

.avatar-orbit-ribbon{
  top: -6px;
  right: -6px;
}

.avatar-orbit-thumb{
  aspect-ratio: 1 / 1.08;
  margin-bottom: 12px;
  background-color: var(--white);
  background-image: none;
}

.avatar-orbit-thumb img{
  display: block;
  width: auto;
  height: auto;
  max-width: 94%;
  max-height: 94%;
  object-fit: contain;
  background: var(--white);
  margin: 0 auto;
}

.avatar-orbit-name{
  font-size: 12px;
  margin-bottom: 6px;
}

.avatar-orbit-serial{
  font-size: 16px;
  opacity: .7;
  margin-bottom: 8px;
}

.avatar-orbit-meta{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

@keyframes avatarOrbit{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-50% - 9px)); }
}

@media (max-width: 900px){
  .avatar-orbit-stage{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 16px 12px 10px;
  }

  .avatar-orbit-spacer{
    flex-basis: 72px;
  }

  .avatar-orbit-card{
    flex-basis: 168px;
    max-width: 168px;
    padding: 12px;
  }

  .avatar-orbit-track{
    gap: 14px;
  }
}