:root{
  --bg-sand-1:#120b06; /* deep shadow */
  --bg-sand-2:#24140b;
  --bg-sand-3:#3b2214;
  --bg-sunrise-1:#b4571f;
  --bg-sunrise-2:#e37d2a;
  --bg-sunrise-3:#ffb15e;
  --glow-warm:#ff7a1a;
  --accent-warm:#ff9b3b;
  --accent-cool:#9ec7ff;
  --accent-myth:#b08cff;
  --accent-gold:#ffb84d;

  --text:#f6efe7;
  --muted:#c9b9a8;
  --shadow:rgba(0,0,0,0.35);

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;

  --card-w: 360px;
  --card-h: 560px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:#0c0806;
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
}
.bg-sky{
  position:absolute; inset:-10%;
  background:
    radial-gradient(1200px 600px at 80% 90%, rgba(255,184,77,0.3), transparent 70%),
    radial-gradient(900px 500px at 10% 10%, rgba(176,140,255,0.15), transparent 70%),
    linear-gradient(180deg, #1a0f0a 0%, #2a160e 35%, #3a1e12 60%, #1b100a 100%);
  filter:saturate(105%);
  animation: skyShift 18s ease-in-out infinite alternate;
}
@keyframes skyShift{
  0%{transform:translateY(0)}
  100%{transform:translateY(-1.5%)}
}
.bg-sun{
  position:absolute; width:32vmin; height:32vmin; border-radius:50%;
  left:60%; top:15%;
  background:
    radial-gradient(circle at 50% 50%, #ffd9a6 0%, #ffb15e 45%, rgba(255,155,59,0.0) 70%);
  filter: blur(8px) saturate(110%);
  opacity:.65;
  animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

.bg-dune{
  position:absolute; inset-inline:-10%; height:40%;
  bottom:0; background-repeat:repeat-x; background-size:auto 100%;
  opacity:.9;
}
.bg-dune.layer1{
  height:46%;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'>\
  <path d='M0,200 C200,150 400,250 600,210 C800,170 1000,230 1200,200 L1200,300 L0,300 Z' fill='%232c1a10'/>\
  </svg>");
  animation: dune1 40s linear infinite;
  filter: drop-shadow(0 -6px 18px rgba(255,149,58,.08));
}
.bg-dune.layer2{
  height:38%;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'>\
  <path d='M0,210 C250,180 400,220 600,200 C800,180 1000,210 1200,190 L1200,300 L0,300 Z' fill='%23322114'/>\
  </svg>");
  animation: dune2 60s linear infinite reverse;
  opacity:.85;
}
.bg-dune.layer3{
  height:30%;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'>\
  <path d='M0,220 C200,240 400,200 600,230 C800,260 1000,220 1200,240 L1200,300 L0,300 Z' fill='%233c2316'/>\
  </svg>");
  animation: dune3 80s linear infinite;
  opacity:.8;
}
@keyframes dune1{ from{background-position:0 0} to{background-position:1200px 0} }
@keyframes dune2{ from{background-position:0 0} to{background-position:1200px 0} }
@keyframes dune3{ from{background-position:0 0} to{background-position:1200px 0} }

.bg-grain{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,153,64,.05), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(255,210,140,.04), transparent 40%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0 1px, transparent 1px 2px);
  mix-blend-mode:soft-light;
  pointer-events:none;
  animation: grainShift 12s steps(2,end) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-1%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Layout */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px 28px; position:sticky; top:0; z-index:4;
  background:linear-gradient(to bottom, rgba(20,12,9,0.9), rgba(20,12,9,0.4) 60%, transparent);
  backdrop-filter:saturate(120%) blur(4px);
  border-bottom:1px solid rgba(255,153,64,0.08);
}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:44px; height:44px; object-fit:contain; filter: drop-shadow(0 0 8px rgba(255,122,26,.35));}
.brand-text h1{margin:0; font-weight:800; letter-spacing:.3px}
.brand-text .subtitle{margin:2px 0 0; color:var(--muted); font-weight:400; font-size:.95rem}

.content{max-width:1200px; margin:0 auto; padding:28px; display:grid; gap:28px}
.hero{
  display:grid; place-items:center; padding:60px; min-height:60vh;
  background:linear-gradient(145deg, rgba(255,176,94,0.06), rgba(176,140,255,0.04) 50%, rgba(255,153,64,0.05));
  border:1px solid rgba(255,176,94,0.12);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 0 40px rgba(255,153,64,0.03);
  position:relative; overflow:hidden;
}
.hero .hero-center{ display:grid; place-items:center; gap:16px }
.hero::before{
  content:""; position:absolute; inset:-20%;
  background: conic-gradient(from 120deg at 50% 50%, rgba(255,153,64,.08), rgba(176,140,255,.06), rgba(255,177,94,.08));
  filter: blur(40px); animation: rotateConic 24s linear infinite;
}
@keyframes rotateConic{
  to{transform:rotate(360deg)}
}
.hero-copy h2{margin:0 0 8px; font-weight:800; font-size:2rem}
.hero-copy p{margin:0; color:var(--muted); max-width:50ch}

.card-stage{
  position:relative; display:flex; justify-content:center; align-items:center;
  min-height: 70vh; padding:40px 0; overflow:visible;
}
.card-mount{position:relative; min-height:var(--card-h); display:flex; align-items:center; justify-content:center}

/* Buttons */
.btn{
  --btn-bg: rgba(255,153,64,.1);
  --btn-bd: rgba(255,153,64,.35);
  --btn-fg: var(--text);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid var(--btn-bd); cursor:pointer; isolation:isolate;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  will-change: transform;
}
.btn .btn-glow{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120px 40px at var(--x,50%) var(--y,50%), rgba(255,153,64,.25), rgba(176,140,255,.2), transparent 60%);
  opacity:.0; transition:opacity .25s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:hover .btn-glow{opacity:.7}
.btn.primary{
  --btn-bg: linear-gradient(180deg, rgba(255,153,64,.18), rgba(255,153,64,.12));
  --btn-bd: rgba(255,153,64,.6);
  box-shadow: 0 8px 20px rgba(255,153,64,.15), inset 0 0 12px rgba(255,153,64,.12);
}
.btn.ghost{
  --btn-bg: rgba(255,255,255,.02);
  --btn-bd: rgba(255,255,255,.12);
}
.btn.cta-big{ padding:20px 32px; font-size:1.35rem; border-radius:16px; }
.btn.cta-big{ animation: ctaPulse 3.2s ease-in-out infinite }
.btn.cta-big .btn-glow{ background: radial-gradient(180px 60px at var(--x,50%) var(--y,50%), rgba(255,153,64,.28), rgba(176,140,255,.24), transparent 60%); }

@keyframes ctaPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }

/* Modal */
.modal{ border:0; border-radius:16px; padding:0; background:transparent; }
.modal::backdrop{
  background: radial-gradient(circle at 30% 10%, rgba(255,153,64,.25), rgba(0,0,0,.75));
  animation: backdropIn .3s ease;
}
@keyframes backdropIn{ from{opacity:0} to{opacity:1} }
.modal-inner{
  width:min(720px, 92vw); background:rgba(30,18,12,.85);
  border:1px solid rgba(255,153,64,.25); border-radius:16px; overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 40px rgba(255,153,64,.05);
}
.modal-header, .modal-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; }
.modal-header{ border-bottom:1px solid rgba(255,153,64,.12) }
.modal-footer{ border-top:1px solid rgba(255,153,64,.12) }
.modal-body{ padding:20px; display:grid; gap:18px }
.field label{ display:block; margin:0 0 8px; color:var(--muted) }
.field input[type="text"], .field input[type="file"]{
  width:100%; padding:12px 14px; border-radius:10px; color:var(--text);
  border:1px solid rgba(255,153,64,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  outline:none;
}
.field input[type="text"]:focus{
  border-color: rgba(255,153,64,.55); box-shadow: 0 0 0 4px rgba(255,153,64,.15);
}
.upload-hint{ margin-top:6px; color:var(--muted); font-size:.9rem }
.preview{
  display:grid; place-items:center; min-height:120px; border-radius:12px;
  border:1px dashed rgba(255,153,64,.25);
  background: rgba(255,255,255,.02);
}
.preview img{ max-width:200px; max-height:160px; border-radius:10px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }

.icon-btn{
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:var(--text); border-radius:10px; width:36px; height:36px; cursor:pointer;
}
.icon-btn:hover{ border-color: rgba(255,153,64,.6) }

/* Card */
.card{
  width:var(--card-w); height:var(--card-h); border-radius:18px; position:relative;
  background: radial-gradient(140% 140% at 80% 20%, rgba(255,153,64,.08), rgba(176,140,255,.06) 40%, rgba(20,12,9,.7) 85%);
  border:1px solid rgba(255,153,64,.35);
  box-shadow:
    0 10px 40px rgba(0,0,0,.55),
    inset 0 0 60px rgba(255,153,64,.06);
  backdrop-filter: blur(6px) saturate(120%);
  transform-style: preserve-3d;
  overflow:hidden; isolation:isolate; transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover{ transform: translateY(-4px) rotateX(2deg) rotateY(-2deg) }
.card::before, .card::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
}
.card::before{
  background: conic-gradient(from var(--conic-angle,0deg), rgba(255,153,64,.28), rgba(176,140,255,.22), rgba(255,177,94,.28));
  filter: blur(22px); opacity:.35; mix-blend-mode:screen;
  animation: conicSpin 10s linear infinite;
}
.card::after{
  background: linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 30%);
  mask: linear-gradient(90deg, transparent 0 15%, black 50% 70%, transparent 85% 100%);
  animation: shineSweep 6s ease-in-out infinite;
  opacity:.35;
}
@keyframes conicSpin{ to{ --conic-angle: 360deg } }
@keyframes shineSweep{
  0%{ transform:translateX(-60%) }
  50%{ transform:translateX(20%) }
  100%{ transform:translateX(120%) }
}

.card-inner{
  position:absolute; inset:0; padding:18px; display:grid; grid-template-rows:auto 1fr auto; gap:14px;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.badge{
  font-family: "Space Mono", monospace;
  padding:6px 10px; border-radius:999px; font-size:.8rem; letter-spacing:.6px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25);
  text-transform:uppercase;
}
.brand-mark{
  display:flex; align-items:center; gap:8px; opacity:.9;
}
.brand-mark img{ width:22px; height:22px }
.brand-mark span{ font-family:"Space Mono", monospace; font-size:.8rem; letter-spacing:.4px; color:var(--muted) }

.avatar-wrap{
  position:relative; display:grid; place-items:center; padding:10px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 30px rgba(255,255,255,.03);
}
.avatar{
  width: 82%; aspect-ratio: 1/1; object-fit: cover; border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.15), 0 0 24px var(--r-glow);
}

.info{
  display:grid; gap:4px; text-align:center;
}
.name{ font-size:1.35rem; font-weight:800; letter-spacing:.3px }
.quote{ color:var(--muted) }

.fx-stars, .fx-dust, .fx-streak{
  position:absolute; inset:0; pointer-events:none;
}
.fx-streak{
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  width:40%; height:2px; top:20%; left:-50%;
  filter: blur(1px); transform: rotate(8deg);
  animation: streakMove 5.5s ease-in-out infinite;
  opacity:.6;
}
@keyframes streakMove{
  0%{ transform:translateX(0) rotate(8deg); left:-50% }
  60%{ left:110% }
  100%{ left:110% }
}

/* Rarity themes */
.card.common{
  --r-main: #d7c3a6; --r-glow: rgba(214,190,160,.35); --r-edge: rgba(255,235,205,.5);
  border-color: rgba(214,190,160,.6);
  box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 50px var(--r-glow);
  animation: commonFade 6s ease-in-out infinite;
}
@keyframes commonFade{
  0%,100%{ filter:saturate(105%) }
  50%{ filter:saturate(95%) }
}
.card.rare{
  --r-main: #9ec7ff; --r-glow: rgba(158,199,255,.35); --r-edge: rgba(158,199,255,.6);
  border-color: rgba(158,199,255,.6);
  box-shadow: 0 10px 50px rgba(0,0,0,.55), inset 0 0 60px var(--r-glow);
}
.card.rare::after{ opacity:.55; animation-duration: 4.5s }
.card.mythic{
  --r-main: #b08cff; --r-glow: rgba(176,140,255,.5); --r-edge: rgba(176,140,255,.9);
  border-color: rgba(176,140,255,.7);
  box-shadow: 0 10px 60px rgba(0,0,0,.6), inset 0 0 80px var(--r-glow);
  animation: mythPulse 2.6s ease-in-out infinite;
}
@keyframes mythPulse{
  0%,100%{ box-shadow: 0 10px 60px rgba(0,0,0,.6), inset 0 0 60px var(--r-glow) }
  50%{ box-shadow: 0 10px 60px rgba(0,0,0,.6), inset 0 0 110px var(--r-glow) }
}
.card.legendary{
  --r-main: #ffcc73; --r-glow: rgba(255,204,115,.6); --r-edge: rgba(255,204,115,1);
  border-color: rgba(255,204,115,.9);
  box-shadow: 0 14px 80px rgba(255,184,77,.2), 0 10px 60px rgba(0,0,0,.5), inset 0 0 120px var(--r-glow);
}
.card .badge{ border-color: var(--r-edge); color:var(--r-edge) }

/* Ambient particles canvas */
.ambient-particles{
  position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.75;
}

/* Footer */
.foot{ padding:24px; color:var(--muted) }
.foot-inner{ max-width:1200px; margin:0 auto; display:flex; gap:10px; align-items:center; justify-content:center; }
.sep{ opacity:.4 }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .card-stage{ min-height: 60vh }
  :root{ --card-w: 320px; --card-h: 520px; }
}
.name{
  background: linear-gradient(90deg, var(--r-edge), #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}