:root{
  --bg:#050608;
  --panel:#0e1116;
  --panel2:#11151c;
  --text:#f4f6ff;
  --muted:#9aa4b2;
  --line:rgba(255,255,255,.10);

  /* New Accent Palette */
  --accent-orange:#ff7a18;
  --accent-cyan:#00e5ff;
  --accent-black:#000000;

  --accent-gradient: linear-gradient(135deg, #ff7a18 0%, #ffb347 25%, #00e5ff 70%, #0094ff 100%);

  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
  radial-gradient(1200px 600px at 15% 0%, rgba(255,122,24,.25), transparent 60%),
  radial-gradient(900px 500px at 85% 20%, rgba(0,229,255,.18), transparent 60%),
  linear-gradient(180deg, #050608 0%, #0a0d12 100%);
  color:var(--text);
}

a{color:inherit}
.container{width:min(1100px, 92vw); margin:0 auto}

.header{
  position:sticky; top:0; z-index:10;
  background: rgba(11,13,18,.7);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}

.brand{display:flex; gap:12px; align-items:center}
.brand__mark{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:14px;
  background: var(--accent-gradient);
}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px}

.hero{padding:46px 0 26px}
.hero__grid{display:grid; gap:22px; grid-template-columns: 1.25fr .95fr; align-items:start}
@media (max-width: 860px){ .hero__grid{grid-template-columns:1fr} }

h1{font-size: clamp(34px, 4vw, 56px); line-height:1.02; margin:0 0 10px}
h2{font-size: clamp(24px, 2.4vw, 34px); margin:0 0 12px}
h3{margin:0 0 8px}
.lead{font-size: 16px; color:var(--muted); margin:0 0 18px; max-width:52ch}
.accent{
  background: var(--accent-gradient);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 18px}

.pill-row{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  border:1px solid var(--line);
  background: rgba(18,22,34,.55);
  padding:10px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}
.pill strong{color:var(--text)}

.note{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255, 187, 0, .08);
  padding:12px 14px;
  border-radius: var(--radius);
  color: var(--text);
}
.note strong{color: var(--text)}

.card{
  background: linear-gradient(180deg, rgba(18,22,34,.92), rgba(15,19,32,.85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.card--flat{box-shadow:none}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.warn{color:#ffd38a}

.divider{height:1px; background:var(--line); margin:14px 0}

.ticket-box{margin-top:12px}
.ticket-box__row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0}
.ticket-box__total{padding-top:8px; border-top:1px solid var(--line); margin-top:12px}
.price{font-weight:800; font-size:18px}

.qty{display:flex; align-items:center; gap:8px}
.qty__btn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size:22px;
}
.qty__btn:active{transform: translateY(1px)}
input[type="number"]{
  width:92px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 0 12px;
  font-size: 16px;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px;
  border-radius: 14px;
  border:1px solid rgba(255,122,24,.6);
  background: var(--accent-gradient);
  color: #000;
  text-decoration:none;
  font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,229,255,.25); }

.btn--ghost{
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.btn--full{width:100%; margin-top:10px}

.section{padding:34px 0}
.section--alt{
  background: rgba(255,255,255,.03);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.preview-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start}
@media (max-width: 860px){ .preview-grid{grid-template-columns:1fr} }

.controls{display:grid; gap:10px; margin:12px 0}
.control{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; padding:10px 12px; background: rgba(18,22,34,.45)}
.control span{color: var(--muted); font-size: 13px}
.control input[type="range"]{width: 180px}
.control select{height:34px; border-radius:10px; border:1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); padding: 0 10px}

.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.canvas-wrap{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(0,0,0,.25);
}
canvas{width:100%; height:auto; display:block}

.steps{display:grid; gap:12px; grid-template-columns: repeat(4, 1fr)}
@media (max-width: 860px){ .steps{grid-template-columns:1fr; } }
.step{
  display:flex; gap:12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18,22,34,.55);
  padding:14px;
}
.step__num{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(124,92,255,.2);
  border:1px solid rgba(124,92,255,.35);
  font-weight:900;
}

.grid-2{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
@media (max-width: 860px){ .grid-2{grid-template-columns:1fr} }

.bullets{margin:8px 0 0; padding-left:18px; color:var(--muted)}
.faq details{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18,22,34,.45);
  padding:12px 14px;
  margin:10px 0;
}
.faq summary{cursor:pointer; font-weight:800}
.rules{border:1px solid var(--line); border-radius: var(--radius); padding:14px; background: rgba(18,22,34,.45)}

.footer{padding:18px 0 30px}
.footer__inner{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px}


.canvas-wrap--layered{ position: relative; }
#maskCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  display:block;
  touch-action:none;
  pointer-events:none; /* enabled only in edit mode */
}
.mask-tools{margin-top:14px}
.mask-tools__title{margin:6px 0 8px}
.mask-tools__row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 860px){ .mask-tools__row{grid-template-columns:1fr} }
.control--wide{justify-content:space-between}


.canvas-wrap--layered{ position: relative; }
.canvas-stage{
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}
#maskCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  display:block;
  touch-action:none;
  pointer-events:none; /* enabled only in edit mode */
}

.actionbar{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.actionbar__btn{ flex: 1 1 auto; min-width: 120px; }
.actionbar__primary{ flex: 2 1 180px; }

@media (max-width: 860px){
  .actionbar{
    position: sticky;
    bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(18,22,34,.88);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 60px rgba(0,0,0,.35);
    z-index: 5;
  }
  .actionbar__btn{ min-width: 0; }
}

/* Make file input look less ugly on mobile */
input[type="file"]{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

/* Bigger touch targets on mobile */
@media (max-width: 860px){
  .qty__btn{ width:52px; height:52px; font-size:24px }
  input[type="number"]{ height:52px }
  .btn{ height:52px }
}


/* DROP BANNER */
.drop-banner{
  text-align:center;
  padding:14px;
  font-weight:800;
  letter-spacing:1px;
  background: linear-gradient(90deg, #ff7a18, #00e5ff);
  color:#000;
}
.countdown{
  margin-top:6px;
  font-size:14px;
  font-weight:600;
}

/* Hero glow effect */
.hero h1{
  text-shadow: 0 0 24px rgba(0,229,255,.35);
}

/* Subtle floating animation */
@keyframes floatGlow{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}
.brand__mark{
  animation: floatGlow 4s ease-in-out infinite;
}

/* Card hover premium feel */
.card:hover{
  transform: translateY(-4px);
  transition: transform .25s ease;
}

/* Footer premium tightening */
.footer{
  background: #000;
}


/* Premium drop typography */
body{ letter-spacing: .1px; }
h1{ letter-spacing: -0.8px; }
.brand__name{ text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; opacity:.95 }
.brand__tag{ text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px; }

.lead{ font-size: 17px; line-height: 1.45; }
@media (max-width: 860px){
  .lead{ font-size: 16px; }
}

/* Splash */
.splash{
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 30%, rgba(0,229,255,.18), transparent 60%),
              radial-gradient(900px 500px at 50% 70%, rgba(255,122,24,.20), transparent 60%),
              rgba(0,0,0,.92);
  display: grid;
  place-items: center;
  z-index: 9999;
  animation: splashFade 1.2s ease forwards;
}
.splash__inner{ text-align:center; padding: 18px; }
.splash__mark{
  width: 72px; height: 72px; margin: 0 auto 12px;
  display:grid; place-items:center;
  border-radius: 22px;
  background: var(--accent-gradient);
  color:#000;
  font-size: 34px;
  box-shadow: 0 18px 70px rgba(0,229,255,.18);
}
.splash__title{
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 14px;
}
.splash__sub{
  margin-top: 8px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
@keyframes splashFade{
  0%{ opacity: 1; }
  70%{ opacity: 1; }
  100%{ opacity: 0; pointer-events:none; visibility:hidden; }
}

/* Drop metrics + progress */
.drop-metrics{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.drop-metrics__row{
  display:flex; justify-content:space-between; align-items:center;
  gap: 10px;
  margin: 6px 0;
}
.drop-metrics__row--tight{ margin-top: 8px; }
.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.progress__bar{
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  box-shadow: 0 0 18px rgba(0,229,255,.25);
}
.metric strong{ letter-spacing: .6px; }

/* Section header with badge */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 12px; flex-wrap:wrap;
}
.badge{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,.25);
  background: rgba(0,229,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Ticker */
.ticker{ padding: 14px; }
.ticker__title{
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}
.ticker__list{ display:grid; gap: 10px; }
.tick{
  display:flex; justify-content:space-between; gap: 10px; flex-wrap:wrap;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.tick__left{ color: rgba(255,255,255,.92); font-weight: 700; }
.tick__right{ color: rgba(255,255,255,.70); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; }


/* Modal (Zelle) */
.modal{ position: fixed; inset: 0; display:none; z-index: 9998; }
.modal--open{ display:block; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position: relative;
  width: min(720px, 94vw);
  margin: 8vh auto 0;
  background: rgba(12,14,18,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal__header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.modal__title{
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
}
.modal__sub{ font-size: 13px; margin-top: 4px; }
.modal__close{
  width: 44px; height: 44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 18px;
}
.modal__body{ padding: 14px 16px 18px; }
.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal__card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 12px;
}
.modal__card--wide{ grid-column: 1 / -1; }
.modal__value{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .6px;
  margin: 6px 0 10px;
}
.modal__value.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
}
.modal__row{ display:flex; gap:10px; flex-wrap:wrap; }
.modal__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.modal__actions .btn{ flex: 1 1 160px; }

@media (max-width: 860px){
  .modal__panel{ margin-top: 6vh; }
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__card--wide{ grid-column:auto; }
}


/* Entry form */
.entry-form{ display:grid; gap:10px; margin-top: 12px; }
.field{ display:grid; gap:6px; }
.field span{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.72); }
.field input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 0 12px;
  font-size: 15px;
}
.field-row{ display:grid; grid-template-columns: 1fr 120px; gap:10px; }
@media (max-width: 860px){ .field-row{ grid-template-columns: 1fr; } }