:root{
  --ink: #0a0b0a;
  --ink-2: #101210;
  --card: #131513;
  --card-line: #23261f;
  --paper: #f6f5f1;
  --green: #5eeb78;
  --green-dim: #2c5c37;
  --gold: #ffc94d;
  --ash: #8d938c;
  --ash-dim: #565b56;
  --white: #f4f4f0;

  --display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --body: 'Inter', ui-sans-serif, sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow-x:hidden;
  padding: 24px 16px 64px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.rings{ position:fixed; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ring{ position:absolute; border-radius:50%; border:1px solid rgba(94,235,120,0.07); }
.r1{ width:360px; height:360px; animation: breathe 7s ease-in-out infinite; }
.r2{ width:620px; height:620px; animation: breathe 7s ease-in-out infinite 0.6s; }
.r3{ width:900px; height:900px; animation: breathe 7s ease-in-out infinite 1.2s; }
.r4{ width:1220px; height:1220px; animation: breathe 7s ease-in-out infinite 1.8s; }
@keyframes breathe{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.02); } }

.foot{ position:relative; z-index:1; margin-top:22px; font-family: var(--mono); font-size:11px; letter-spacing:.03em; color: var(--ash-dim); display:flex; gap:8px; align-items:center; }
.foot a{ color:var(--ash); text-decoration:none; }
.foot a:hover{ color:var(--green); }
.foot .dot{ color:var(--ash-dim); }

.app{ position:relative; z-index:1; width:100%; max-width:460px; }

.card{
  background: var(--card); border:1px solid var(--card-line); border-radius:20px;
  padding:22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  animation: rise .4s cubic-bezier(.16,1,.3,1);
}
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.head-row{ display:flex; justify-content:space-between; align-items:center; font-family: var(--mono); font-size:11px; color: var(--ash); letter-spacing:.04em; margin-bottom:14px; }
.head-row .live{ display:inline-flex; align-items:center; gap:6px; color: var(--green); }
.pulse{ width:6px; height:6px; border-radius:50%; background: var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(94,235,120,.55); } 70%{ box-shadow:0 0 0 8px rgba(94,235,120,0); } 100%{ box-shadow:0 0 0 0 rgba(94,235,120,0); } }

.title{ font-family: var(--display); font-weight:700; text-align:center; font-size:20px; margin: 2px 0 4px; }
.sub{ text-align:center; color: var(--ash); font-size:12.5px; line-height:1.5; margin: 0 0 16px; }

/* ---- canvas ---- */
.canvas-wrap{ display:flex; justify-content:center; margin-bottom:16px; }
.pfp-canvas{
  position:relative; width:100%; max-width:340px; aspect-ratio:1/1;
  border-radius:20px; overflow:hidden; background:#111;
  touch-action:none;
}
.pfp-bg{ position:absolute; inset:0; }
.pfp-mascot{
  position:absolute; left:50%; top:52%; width:62%;
  transform: translate(-50%,-50%);
  pointer-events:none;
}
.pfp-mascot img{ width:100%; display:block; }

.pfp-accessory{
  position:absolute; width:120px; height:120px;
  transform: translate(-50%,-50%);
  cursor:grab; touch-action:none;
}
.pfp-accessory.dragging{ cursor:grabbing; }
.pfp-accessory svg{ width:100%; height:100%; overflow:visible; pointer-events:none; }
.pfp-accessory.hidden{ display:none; }

.pfp-badge{
  position:absolute; left:50%; bottom:14px; transform: translateX(-50%);
  font-family: var(--display); font-weight:700; font-size:13px;
  background: rgba(10,11,10,0.82); color:#fff; padding:6px 14px; border-radius:999px;
  white-space:nowrap; letter-spacing:.02em; border:1px solid rgba(255,255,255,0.15);
}
.pfp-badge.hidden{ display:none; }

/* frames (applied to .pfp-canvas) */
.frame-none{}
.frame-sticker{ border:8px solid #fff; }
.frame-glow{ box-shadow: 0 0 0 4px var(--green), 0 0 30px 6px rgba(94,235,120,.6); }
.frame-verified{ outline: 3px dashed var(--gold); outline-offset:-8px; }
.frame-shadow{ box-shadow: 0 20px 40px -10px rgba(0,0,0,.7); border:2px solid rgba(255,255,255,0.1); }

/* ---- controls ---- */
.section-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); margin: 16px 0 8px; }
.section-label:first-of-type{ margin-top:0; }

.opt-row{ display:flex; gap:9px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.opt-row::-webkit-scrollbar{ display:none; }

.opt-swatch{
  flex-shrink:0; width:46px; height:46px; border-radius:12px; cursor:pointer;
  border:2px solid var(--card-line); transition: border-color .15s ease, transform .1s ease;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.opt-swatch:hover{ transform: translateY(-1px); }
.opt-swatch.selected{ border-color: var(--green); }

.opt-chip{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  width:56px; cursor:pointer;
}
.opt-chip .chip-icon{
  width:46px; height:46px; border-radius:12px; background: var(--ink-2);
  border:2px solid var(--card-line); display:flex; align-items:center; justify-content:center;
  transition: border-color .15s ease, transform .1s ease;
}
.opt-chip:hover .chip-icon{ transform: translateY(-1px); }
.opt-chip.selected .chip-icon{ border-color: var(--green); background: rgba(94,235,120,0.07); }
.opt-chip .chip-icon svg{ width:26px; height:26px; }
.opt-chip .chip-label{ font-size:9px; color:var(--ash); font-family:var(--body); text-align:center; line-height:1.2; }
.opt-chip.selected .chip-label{ color: var(--green); }

.role-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.role-chip{
  font-family: var(--body); font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:999px;
  background: var(--ink-2); border:1px solid var(--card-line); color: var(--ash); cursor:pointer;
}
.role-chip.selected{ background: var(--green); border-color: var(--green); color:#06210c; }

label.field-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ash); margin: 14px 0 8px; font-family: var(--mono); }
.input-row{ display:flex; align-items:center; background: var(--ink-2); border:1px solid var(--card-line); border-radius:12px; padding:0 14px; }
.input-row input{ flex:1; background:transparent; border:0; outline:0; color:var(--white); font-size:14px; padding:12px 4px; font-family: var(--body); }

.slider-row{ margin: 14px 0 0; }
.slider-row .slider-top{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--ash); font-family:var(--mono); margin-bottom:6px; }
input[type=range]{ width:100%; accent-color: var(--green); }

.hint{ font-size:11px; color:var(--ash-dim); text-align:center; margin: 10px 0 4px; }

.btn{ width:100%; border:0; border-radius:12px; padding:14px 18px; font-family: var(--display); font-weight:600; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition: transform .12s ease, filter .15s ease; text-decoration:none; }
.btn:active{ transform: scale(.98); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{ background: var(--green); color: #06210c; }
.btn-primary:hover:not(:disabled){ filter:brightness(1.08); }
.btn-dark{ background:#111; color:#fff; }
.btn-row{ display:flex; gap:10px; margin-top:18px; }

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