:root{
  --bg:#0c0f14; /* page */
  --bg-elev:#0f1420; /* card */
  --bg-elev-2:#0f1320;
  --text:#e7e9f3;
  --muted:#9aa3b2;
  --primary:#7c4dff; /* Luna-ish purple */
  --primary-2:#a78bfa;
  --accent:#00e7f0;
  --success:#22c55e;
  --danger:#ef4444;
  --chip-new:#ffb020;
  --chip-hot:#ff5a8a;
  --surface:#121827;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;
  --shadow:0 10px 30px rgba(2,6,23,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  --ring:0 0 0 2px rgba(124,77,255,.3), 0 0 40px rgba(124,77,255,.15);
   --primary-color: #6d57ff;
    --accent-color: #00ffbd;
    --purple-color: #a855f7;
    --dark-bg: #000000;
    --dark-card-bg: #0a0a0a;
    --dark-input-bg: #131313;
    --text-color: #ffffff;
    --text-secondary: #999999;
    --border-color: #333333;
    --shadow-color: rgba(109, 87, 255, 0.3);
    --gradient-blue: linear-gradient(45deg, #3b82f6, #6d57ff);
    --gradient-purple: linear-gradient(45deg, #6d57ff, #a855f7);
    --moon-text-color: #a29dff;
    --border-highlight: #1F2030;
}

@keyframes stars {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 500px 500px, 300px 300px, 200px 200px, 100px 100px;
    }
}
a {
  text-decoration: none;
  color: inherit;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 40px 60px, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 20px 50px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 30px 100px, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 70px 150px, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0));
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-attachment: fixed;
    animation: stars 15s infinite linear;
    z-index: -1;
    opacity: 0.6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,77,255,.2), transparent),
              radial-gradient(800px 500px at 20% 120%, rgba(0,231,240,.15), transparent),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}
.container{max-width:1200px;margin:0 auto;padding:20px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#642cff);box-shadow:var(--ring);font-weight:800}
.logo-text{font-weight:700;letter-spacing:.3px}
.nav{display:flex;align-items:center;gap:12px}
.nav-link{color:var(--muted);text-decoration:none;padding:10px;border-radius:10px;transition:color .25s ease, background-color .25s ease, box-shadow .25s ease}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* Buttons */
.btn{--b:var(--primary);--bg:linear-gradient(180deg,#7c4dff,#5d35ff);--txt:#fff;cursor:pointer;border:none;border-radius:14px;padding:12px 16px;font-weight:600;color:var(--txt);transition:.25s transform,.25s opacity, .25s box-shadow;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--bg)}
.btn-secondary{background:#1a2235;color:#d7dbec}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:12px}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;padding:60px 20px;position:relative;overflow:hidden}
.hero > *{position:relative;z-index:1}
.particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-particles{position:fixed;inset:0;z-index:0;pointer-events:none}
header.site-header, main, footer.site-footer{position:relative;z-index:1}
.hero-title{font-size:48px;line-height:1.05;margin:0 0 12px;font-weight:900}
.grad{background:linear-gradient(90deg, var(--primary) 0%, #9b5cff 50%, var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);max-width:50ch;margin:0 0 16px}
.hero-ctas{display:flex;gap:12px;margin:18px 0}
.hero-points{display:flex;gap:18px;color:#b9c0cf;padding:0;margin:16px 0 0;list-style:none}
.hero-art{position:relative;height:320px}
.crate{position:absolute;right:10%;top:10%;width:320px;height:260px;filter:drop-shadow(0 30px 50px rgba(124,77,255,.2))}
.crate-body{position:absolute;inset:0;border-radius:20px;background:linear-gradient(145deg,#12182a,#151c32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px rgba(0,0,0,.35)}
.crate-face{position:absolute;inset:20px;border-radius:16px;background:radial-gradient(120px 120px at 50% 50%, rgba(124,77,255,.4), transparent), #0f1528}
.crate-glow{position:absolute;inset:-8px;border-radius:28px;background:conic-gradient(from 90deg at 50% 50%, rgba(124,77,255,.35), rgba(0,231,240,.25), rgba(124,77,255,.35));filter:blur(24px);opacity:.9;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* Filters */
.filters{display:grid;grid-template-columns:1.2fr .5fr .5fr .7fr auto;gap:12px;align-items:center;background:rgba(255,255,255,.03);padding:14px;border-radius:16px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.input{display:flex;align-items:center;gap:10px;background:#0f1526;border:1px solid rgba(255,255,255,.06);padding:10px 12px;border-radius:12px;color:#d5dbeb}
.input input,.input select{background:transparent;border:none;color:#d5dbeb;outline:none;width:100%;font-size:14px;transition:color .25s ease, background .25s ease, border-color .25s ease}
.input span.icon{opacity:.7}
.input .icon{width:18px;height:18px;color:#98a2b3;flex:0 0 18px}
.input:focus-within{border-color:rgba(124,77,255,.6);box-shadow:var(--ring)}

/* Custom select caret */
.input.select{position:relative}
.input.select::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-right:2px solid #9aa3b2;border-bottom:2px solid #9aa3b2;rotate:45deg;transition:.25s ease;pointer-events:none}
.input.select:focus-within::after{border-color:#cbd5e1}
.input select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:20px;cursor:pointer}

/* Number inputs: remove spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]{ -webkit-appearance: none; -moz-appearance: textfield; appearance: none; }
.chip-toggle{display:inline-flex;align-items:center;gap:8px;background:#121a2f;border:1px solid rgba(255,255,255,.06);padding:8px 10px;border-radius:9999px;color:#d7dbec;cursor:pointer}
.chip-toggle input{appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:inline-block;position:relative}
.chip-toggle input:checked{background:var(--primary);border-color:var(--primary)}
.chip-toggle{transition:background .25s ease, border-color .25s ease, transform .2s ease}
.chip-toggle:hover{background:#16213a;border-color:rgba(255,255,255,.12);transform:translateY(-1px)}


/* Cases Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.case-card{position:relative;background:linear-gradient(180deg,#0f1526,#0b1020);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.25s transform,.25s box-shadow}
.case-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(124,77,255,.15)}
.case-media{height:150px;display:grid;place-items:center;position:relative}
.case-media::after{content:"";position:absolute;inset:0;background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.03%22%3E%3Cpath d=%22M20 0L40 20 20 40 0 20z%22/%3E%3C/g%3E%3C/svg%3E');opacity:.3}
.case-img{height: auto; width: auto;max-width:140px; max-height:140px;filter:drop-shadow(0 10px 25px rgba(0,0,0,.4));transform:translateY(0);transition:transform .35s ease}
.case-card:hover .case-img{transform:translateY(-4px)}
.case-body{padding:14px}
.case-title{font-weight:700;margin:6px 0 12px}
.price-row{display:flex;justify-content:space-between;align-items:center}
.price-chip{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#2a3865,#1b2547);padding:10px 12px;border-radius:12px;color:#e6ecff;cursor:pointer;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.price-chip .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(0,231,240,.6)}
.price-chip:hover{box-shadow:var(--ring)}
.label{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:#0f1220;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.label.hot{background:var(--chip-hot)}
.label.new{background:var(--chip-new)}
.hide{display:none}

/* Label on case image (case page) */
.case-thumb .label{z-index:2}

/* Footer */
.site-footer{display:flex;justify-content:space-between;align-items:center;color:#9aa3b2;padding:40px 20px}
.site-footer a{color:#9aa3b2;transition:color .25s ease, opacity .25s ease}
.site-footer a:hover{color:#c9cfde}

/* Case page */
.case-page .case-header{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:center;margin:20px 0 30px}
.case-thumb{height:240px;border-radius:18px;background:linear-gradient(145deg,#0f1528,#0c1020);box-shadow:var(--shadow);position:relative}
.case-info h1{margin:0}
.muted{color:var(--muted)}
.center{text-align:center}
.price-cta{margin-top:10px}

/* Roulette */
.roulette-wrap{margin:20px 0 32px}
.roulette-window{position:relative;height:160px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0f1526,#0b1020);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.roulette-marker{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);background:linear-gradient(to bottom, transparent, rgba(124,77,255,.9), transparent);box-shadow:0 0 24px rgba(124,77,255,.6)}
.roulette-strip{display:flex;gap:12px;align-items:center;height:100%;padding:12px;will-change:transform}
.roulette-item{flex:0 0 140px;height:100%;border-radius:14px;position:relative;background:#121a2f;border:1px solid rgba(255,255,255,.07);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.roulette-item .meta{position:absolute;bottom:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#d7dbec}
.roulette-item img{height: 60px;position:absolute;top:14px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transition:transform .2s ease;will-change:transform}
.rarity-bg{position:absolute;inset:-20px;filter:blur(30px);opacity:.55}
.roulette-item{will-change:transform}
.roulette-item.active{outline:2px solid rgba(124,77,255,.45)}
.roulette-item.active img{transform:translateX(-50%) scale(1.03)}
input,label {
  max-height: 40px !important;
}
/* Items Grid */
.items-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.item-card{position:relative;background:linear-gradient(180deg,#0f1526,#0b1020);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
.item-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(124,77,255,.12)}
.item-card .rarity-bg{inset:-30px}
.item-card img{width:100%;height:100px;object-fit:contain;display:block;margin:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transition:transform .25s ease}
.item-card:hover img{transform:translateY(-2px)}
.item-card .title{font-weight:600;margin:6px 0 2px}
.item-card .price{color:#cfd6ea;font-weight:600}

/* Modal */
.modal{position:fixed;inset:0;pointer-events:none;z-index:1002}
.modal.open{pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:rgba(5,8,15,.6);opacity:0;backdrop-filter:blur(0px);transition:opacity .35s ease, backdrop-filter .35s ease;will-change:opacity,backdrop-filter}
.modal.open .modal-backdrop{opacity:1;backdrop-filter:blur(10px)}
.modal-dialog{position:relative;z-index:1;max-width:800px;margin:8vh auto;background:linear-gradient(180deg,#0f1526,#0c1222);border:1px solid rgba(255,255,255,.07);border-radius:16px;box-shadow:var(--shadow);padding:24px;transform:translateY(16px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.22,.82,.22,1), opacity .35s ease;will-change:transform,opacity}
.modal.open .modal-dialog{transform:none;opacity:1}
.modal-close{position:absolute;top:8px;right:8px;border:none;background:transparent;color:#b9c0cf;font-size:22px;cursor:pointer}
.result-card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;margin-top:8px}
.result-card .rarity-bg{inset:-26px}
.modal-actions{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}

/* Prevent background scroll while modal is open */
body.modal-open{overflow:hidden}

/* Global overlay for any open modal */
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:0;
  background:rgba(5,8,15,.5);
  backdrop-filter:blur(8px);
  transition:opacity .35s ease, backdrop-filter .35s ease;
  z-index:1000;
}
body.modal-open::after{opacity:1}

/* Global interactive hover transitions */
:where(a, button, .btn, .chip-toggle, .price-chip, .nav-link, .case-card, .item-card, .input, select, input, .label){
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease;
}

/* Rarity gradients */
.rar-common{background:radial-gradient(60% 60% at 30% 30%, rgba(148,163,184,.4), transparent), radial-gradient(60% 60% at 70% 70%, rgba(71,85,105,.5), transparent)}
.rar-rare{background:radial-gradient(60% 60% at 30% 30%, rgba(59,130,246,.5), transparent), radial-gradient(60% 60% at 70% 70%, rgba(99,102,241,.5), transparent)}
.rar-epic{background:radial-gradient(60% 60% at 30% 30%, rgba(168,85,247,.55), transparent), radial-gradient(60% 60% at 70% 70%, rgba(236,72,153,.55), transparent)}
.rar-legendary{background:radial-gradient(60% 60% at 30% 30%, rgba(250,204,21,.6), transparent), radial-gradient(60% 60% at 70% 70%, rgba(244,63,94,.55), transparent)}

/* Wallet Modal Styles */
.wallet-content {
  padding: 0;
}

.wallet-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wallet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.wallet-row:last-child {
  border-bottom: none;
}

.wallet-label {
  color: var(--muted);
  font-weight: 500;
}

.wallet-value {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

.address-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-address {
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: rgba(255,255,255,.03);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--muted);
  transition: all .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--primary);
  color: var(--primary);
}

.copy-btn.copied {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.copy-icon {
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}

.copy-btn:hover .copy-icon {
  transform: scale(1.1);
}

/* Modal Layout */
.modal-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.modal-left {
  flex: 1;
  min-width: 0;
}

.modal-right {
  flex: 1;
  min-width: 0;
}

/* QR Code Section */
.qr-section {
  margin: 20px 0;
  text-align: center;
}

.qr-container {
  display: flex;
  justify-content: center;
  margin: 15px 0;
  padding: 15px;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
}

.qr-code {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

/* Special Offer Section */
.special-offer {
  margin-top: 25px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(124,77,255,.1), rgba(0,231,240,.1));
  border-radius: 16px;
  border: 1px solid rgba(124,77,255,.2);
  position: relative;
}


@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.offer-badge {
  position: absolute;
  top: -8px;
  right: 20px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(255,107,107,.3);
}

.offer-title {
  margin: 0 0 15px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}

.offer-content {
  text-align: center;
}

.offer-text {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--muted);
}

.highlight {
  color: var(--accent);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(0,231,240,.3);
}

.offer-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  transition: all .25s ease;
}

.tier:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.tier-amount {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.tier-arrow {
  color: var(--accent);
  font-size: 18px;
  font-weight: bold;
}

.tier-bonus {
  font-weight: 800;
  color: var(--success);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(34,197,94,.3);
}

/* Responsive Design */
@media (min-width: 1200px) {
  .modal-dialog {
    max-width: 900px;
    padding: 28px;
  }
}

@media (max-width: 1200px) {
  .container {
    padding: 15px;
  }
  
  .hero {
    padding: 40px 15px;
  }
  
  .hero-title {
    font-size: 42px;
  }
}

@media (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .items-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .hero {
    grid-template-columns: 1fr;
    padding: 30px 15px;
  }
  
  .hero-art {
    order: -1;
    height: 240px;
  }
  
  .case-page .case-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .filters {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .filter-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  .site-header {
    padding: 15px 10px 0;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .nav {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .nav-link {
    padding: 8px;
    font-size: 14px;
  }
  
  .hero {
    padding: 20px 10px;
  }
  
  .hero-title {
    font-size: 36px;
    line-height: 1.1;
  }
  
  .hero-sub {
    font-size: 16px;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero-points {
    flex-direction: column;
    gap: 8px;
  }
  
  .hero-art {
    height: 200px;
  }
  
  .crate {
    width: 280px;
    height: 220px;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .case-page .case-header {
    margin: 15px 0 20px;
  }
  
  .case-thumb {
    height: 200px;
  }
  
  .roulette-wrap {
    margin: 15px 0 25px;
  }
  
  .roulette-window {
    height: 140px;
  }
  
  .roulette-item {
    flex: 0 0 120px;
  }
  
  .filters {
    padding: 12px;
  }
  
  .input {
    padding: 8px 10px;
  }
  
  .input span {
    font-size: 13px;
  }
  
  .chip-toggle {
    padding: 6px 8px;
    font-size: 13px;
  }
  
  .modal-dialog {
    margin: 5vh auto;
    max-width: 95%;
    padding: 20px;
  }
  
  .modal-layout {
    flex-direction: column;
    gap: 15px;
  }
  
  .wallet-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .address-container {
    width: 100%;
    justify-content: space-between;
  }
  
  .wallet-address {
    max-width: none;
    flex: 1;
  }
  
  .result-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  
  .result-card > div:first-child {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
  
  .modal-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .btn {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .site-footer {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 30px 10px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }
  
  .hero-sub {
    font-size: 14px;
  }
  
  .case-title {
    font-size: 18px;
  }
  
  .items-grid {
    grid-template-columns: 1fr;
  }
  
  .roulette-item {
    flex: 0 0 100px;
  }
  
  .roulette-item .meta {
    font-size: 11px;
  }
  
  .item-card {
    padding: 8px;
  }
  
  .item-card .title {
    font-size: 13px;
  }
  
  .item-card .price {
    font-size: 12px;
  }
  
  .wallet-content h2 {
    font-size: 20px;
  }
  
  .wallet-address {
    font-size: 12px;
    padding: 4px 8px;
  }
  
  .copy-btn {
    padding: 6px;
  }
  
  .copy-icon {
    width: 14px;
    height: 14px;
  }
  
  .qr-code {
    width: 120px;
    height: 120px;
  }
  
  .special-offer {
    padding: 15px;
    margin-top: 20px;
  }
  
  .offer-title {
    font-size: 18px;
  }
  
  .offer-text {
    font-size: 14px;
  }
  
  .tier {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .tier-amount, .tier-bonus {
    font-size: 13px;
  }
  
  .tier-arrow {
    font-size: 16px;
  }
  
  .modal-layout {
    flex-direction: column;
    gap: 20px;
  }
  
  .modal-left, .modal-right {
    flex: none;
  }
}

/* Recent Drops Section */
.recent-drops {
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 15px 0;
}

.recent-drops-container {
  overflow: hidden;
}

.recent-drops-items {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 5px 0;
}

.recent-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 200px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* New drop item animation */
.recent-drop-item.new-drop-item {
  animation: newDropPulse 1.2s ease-out;
}

@keyframes newDropPulse {
  0% {
    transform: scale(0.8) rotateY(-15deg);
    opacity: 0;
    filter: blur(2px);
  }
  50% {
    transform: scale(1.05) rotateY(0deg);
    opacity: 1;
    filter: blur(0px);
  }
  70% {
    transform: scale(0.98) rotateY(0deg);
  }
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow effect for new items */
.recent-drop-item.new-drop-item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #7c4dff, #9b5cff, #7c4dff);
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  animation: glowPulse 1s ease-out;
}

@keyframes glowPulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Shimmer effect for new items */
.recent-drop-item.new-drop-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 1.5s ease-out;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Bounce effect for rarity indicator */
.recent-drop-item.new-drop-item .rarity-indicator {
  animation: rarityBounce 0.8s ease-out 0.3s;
}

@keyframes rarityBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.recent-drop-item:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-2px);
}

.recent-item-image {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.recent-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.rarity-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.rarity-common { background: #6c757d; }
.rarity-rare { background: #007bff; }
.rarity-epic { background: #6f42c1; }
.rarity-legendary { background: #fd7e14; }

.recent-item-info {
  flex: 1;
  min-width: 0;
}

.recent-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-item-price {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

.recent-item-case {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-item-time {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive Recent Drops */
@media (max-width: 768px) {
  .recent-drops {
    padding: 12px 0;
  }
  
  .recent-drops-items {
    gap: 8px;
    padding: 3px 0;
  }
  
  .recent-drop-item {
    min-width: 160px;
    padding: 6px 10px;
    gap: 8px;
  }
  
  .recent-item-image {
    width: 28px;
    height: 28px;
  }
  
  .recent-item-name {
    font-size: 0.8rem;
  }
  
  .recent-item-price {
    font-size: 0.7rem;
  }
  
  .recent-item-case {
    font-size: 0.65rem;
  }
  
  .recent-item-time {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .recent-drops-items {
    gap: 6px;
    padding: 2px 0;
  }
  
  .recent-drop-item {
    min-width: 140px;
    padding: 5px 8px;
    gap: 6px;
  }
  
  .recent-item-image {
    width: 24px;
    height: 24px;
  }
  
  .recent-item-name {
    font-size: 0.75rem;
  }
  
  .recent-item-price {
    font-size: 0.65rem;
  }
  
  .recent-item-case {
    font-size: 0.6rem;
  }
  
  .recent-item-time {
    font-size: 0.6rem;
  }
}

/* Content Pages */
.content-page {
  padding: 40px 0;
  max-width: 800px;
  margin: 0 auto;
}

.content-page h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 30px;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content-section {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 20px;
}

.content-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 25px 0 15px;
  color: var(--text);
}

.content-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 20px 0 10px;
  color: var(--text);
}

.content-section h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 15px 0 8px;
  color: var(--text);
}

.content-section p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.content-section ul {
  margin: 15px 0;
  padding-left: 20px;
}

.content-section li {
  margin-bottom: 8px;
  line-height: 1.6;
  color: var(--muted);
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.contact-method {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
}

.contact-link:hover {
  text-decoration: underline;
}

.commission-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.tier {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.tier h4 {
  color: var(--accent);
  margin-bottom: 10px;
}

.faq-section {
  margin: 20px 0;
}

.faq-item {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
}

.faq-item h4 {
  color: var(--text);
  margin-bottom: 10px;
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    padding: 20px 15px;
  }
  
  .hero-art {
    height: 150px;
  }
  
  .crate {
    width: 200px;
    height: 150px;
  }
  
  .modal-dialog {
    margin: 2vh auto;
  }
}

/* Mobile-first improvements */
@media (max-width: 768px) {
  .hero-points li {
    font-size: 14px;
  }
  
  .case-card {
    border-radius: 14px;
  }
  
  .case-img {
    width: 70%;
  }
  
  .price-chip {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .roulette-item img {
    height: 60px;
  }
  
  .item-card img {
    height: 80px;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .copy-btn, .chip-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  
  .roulette-item {
    min-height: 120px;
  }
  
  .item-card {
    min-height: 140px;
  }
}

/* Subtle entrances */
[data-anim="fade-up"]{opacity:0;transform:translateY(10px);animation:fadeup .6s ease forwards;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes fadeup{to{opacity:1;transform:none}}

#rouletteStrip{
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
input {
  outline: none;
  border: none;
}

.input span {
  white-space: nowrap;
}
.crate-face img {
  height: 100%;
  width: 100%;

  }
  .logo img {
    width: 100%;
    height: 100%;
    max-width: 80px;
    max-height: 80px;
  }

/* Withdraw Modal Styles */
.withdraw-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.error-message {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.error-message.show {
  display: block;
}

.withdraw-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: flex-end;
}

  .withdraw-actions .btn {
    min-width: 100px;
  }

  @media (max-width: 768px) {
    .withdraw-actions {
      flex-direction: column;
      gap: 8px;
    }
    
    .withdraw-actions .btn {
      width: 100%;
      min-width: auto;
    }
    
    .form-input {
      font-size: 16px; /* Prevent zoom on iOS */
    }
  }

/* Mobile-first improvements */
@media (max-width: 768px) {
  .hero-points li {
    font-size: 14px;
  }
  
  .case-card {
    border-radius: 14px;
  }
  
  .case-img {
    width: 70%;
  }
  
  .price-chip {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .roulette-item img {
    height: 60px;
  }
  
  .item-card img {
    height: 80px;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .copy-btn, .chip-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  
  .roulette-item {
    min-height: 120px;
  }
  
  .item-card {
    min-height: 140px;
  }
}

/* Subtle entrances */
[data-anim="fade-up"]{opacity:0;transform:translateY(10px);animation:fadeup .6s ease forwards;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes fadeup{to{opacity:1;transform:none}}

#rouletteStrip{
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
input {
  outline: none;
  border: none;
}

.input span {
  white-space: nowrap;
}
.crate-face {
  height: 100%;
  width: 100%;

  }