/* ================================================================
   DRAGON BATTLE ONLINE — CHARACTER CREATION 2.0
   Mobile-first, sem molduras PNG. Toda a interface é CSS/HTML e
   mantém os IDs usados pela lógica de criação existente.
   ================================================================ */

#scr-create.cc-screen {
  --cc-accent:#ffc857;
  --cc-accent-rgb:255,200,87;
  --cc-energy:#ff6b2c;
  --cc-energy-rgb:255,107,44;
  --cc-cold:#55c7ff;
  --cc-ink:#05070c;
  --cc-panel:rgba(11,15,24,.72);
  --cc-panel-strong:rgba(9,13,21,.9);
  --cc-line:rgba(255,255,255,.11);
  --cc-text:#f7f8fb;
  --cc-muted:#9ca9ba;
  position:fixed;
  inset:0;
  display:block;
  padding:0;
  overflow:hidden;
  color:var(--cc-text);
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--cc-accent-rgb),.12), transparent 30%),
    radial-gradient(circle at 17% 23%, rgba(var(--cc-energy-rgb),.14), transparent 28%),
    radial-gradient(circle at 88% 15%, rgba(69,123,255,.14), transparent 25%),
    linear-gradient(145deg,#05070c 0%,#09101b 44%,#05070c 100%);
  isolation:isolate;
}

#scr-create[data-theme="mystic"] {
  --cc-accent:#8aeaff;
  --cc-accent-rgb:138,234,255;
  --cc-energy:#886cff;
  --cc-energy-rgb:136,108,255;
  --cc-cold:#b9a7ff;
}
#scr-create[data-theme="dark"] {
  --cc-accent:#ff70a9;
  --cc-accent-rgb:255,112,169;
  --cc-energy:#8e4cff;
  --cc-energy-rgb:142,76,255;
  --cc-cold:#e585ff;
}
#scr-create[data-theme="tech"] {
  --cc-accent:#68e7ff;
  --cc-accent-rgb:104,231,255;
  --cc-energy:#2c8cff;
  --cc-energy-rgb:44,140,255;
  --cc-cold:#8cf9df;
}
#scr-create[data-race="Majin"] {
  --cc-accent:#ff90d1;
  --cc-accent-rgb:255,144,209;
  --cc-energy:#d64dff;
  --cc-energy-rgb:214,77,255;
}
#scr-create[data-race="Demon"] {
  --cc-accent:#ff7b66;
  --cc-accent-rgb:255,123,102;
  --cc-energy:#d02f54;
  --cc-energy-rgb:208,47,84;
}
#scr-create[data-race="Puranto"] {
  --cc-accent:#7effa8;
  --cc-accent-rgb:126,255,168;
  --cc-energy:#2bc4aa;
  --cc-energy-rgb:43,196,170;
}

/* ---------- ambiente animado ---------- */
#scr-create .cc-atmosphere,
#scr-create .cc-atmosphere > span {
  position:absolute;
  inset:0;
  pointer-events:none;
}
#scr-create .cc-atmosphere {
  overflow:hidden;
  z-index:-1;
}
#scr-create .cc-nebula {
  width:60vmax;
  height:60vmax;
  margin:auto;
  border-radius:50%;
  filter:blur(55px);
  opacity:.22;
  mix-blend-mode:screen;
}
#scr-create .cc-nebula-a {
  left:-48vmax;
  top:-36vmax;
  background:radial-gradient(circle,rgba(var(--cc-energy-rgb),.7),transparent 63%);
  animation:ccNebulaA 15s ease-in-out infinite alternate;
}
#scr-create .cc-nebula-b {
  right:-48vmax;
  bottom:-42vmax;
  background:radial-gradient(circle,rgba(var(--cc-accent-rgb),.55),transparent 63%);
  animation:ccNebulaB 19s ease-in-out infinite alternate;
}
#scr-create .cc-energy-line {
  inset:-35%;
  opacity:.17;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg 10deg,
      rgba(var(--cc-accent-rgb),.26) 10.3deg 10.7deg,
      transparent 11deg 22deg
    );
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 20%, #000 42%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 20%, #000 42%, transparent 72%);
}
#scr-create .cc-energy-line-a { animation:ccSpin 42s linear infinite; }
#scr-create .cc-energy-line-b {
  opacity:.1;
  transform:scale(.74);
  animation:ccSpinReverse 55s linear infinite;
}
#scr-create .cc-particle-field {
  opacity:.52;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(var(--cc-accent-rgb),.72) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(var(--cc-energy-rgb),.5) 0 1px,transparent 1.6px);
  background-size:93px 93px,137px 137px,181px 181px;
  background-position:7px 19px,53px 11px,19px 71px;
  animation:ccStars 18s linear infinite;
}
@keyframes ccNebulaA {
  to { transform:translate3d(15vmax,8vmax,0) scale(1.16); opacity:.31; }
}
@keyframes ccNebulaB {
  to { transform:translate3d(-12vmax,-8vmax,0) scale(.9); opacity:.3; }
}
@keyframes ccSpin { to { transform:rotate(360deg); } }
@keyframes ccSpinReverse { to { transform:scale(.74) rotate(-360deg); } }
@keyframes ccStars {
  to { background-position:7px -74px,53px -126px,19px -110px; }
}

/* ---------- casca ---------- */
#scr-create .cc {
  width:100%;
  height:100dvh;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  padding:
    max(10px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(10px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
}

#scr-create .cc-topbar {
  min-height:64px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(210px,320px);
  align-items:center;
  gap:14px;
  padding:8px 12px;
  border:1px solid var(--cc-line);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(18,23,34,.75),rgba(8,12,20,.55));
  box-shadow:0 18px 45px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}
#scr-create .cc-back {
  position:relative;
  min-width:74px;
  min-height:42px;
  padding:0 14px 0 31px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:rgba(255,255,255,.045);
  color:#dfe6f1;
  font-weight:700;
}
#scr-create .cc-back::before {
  content:"‹";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-53%);
  font-size:25px;
  line-height:1;
  color:var(--cc-accent);
}
#scr-create .cc-back:hover {
  border-color:rgba(var(--cc-accent-rgb),.45);
  background:rgba(var(--cc-accent-rgb),.08);
}
#scr-create .cc-brand {
  min-width:0;
}
#scr-create .cc-kicker {
  display:block;
  margin-bottom:1px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.24em;
  color:var(--cc-accent);
  opacity:.9;
}
#scr-create .cc-title {
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(19px,2vw,30px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.025em;
  color:#fff;
  text-shadow:0 2px 15px rgba(var(--cc-accent-rgb),.18);
}
#scr-create .cc-step-status {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:3px 12px;
}
#scr-create .cc-step-copy small {
  display:block;
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--cc-muted);
}
#scr-create .cc-step-copy b {
  display:block;
  margin-top:1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:#fff;
}
#scr-create #cc-step-count {
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--cc-accent);
}
#scr-create .cc-step-track {
  grid-column:1/-1;
  height:4px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.07);
}
#scr-create .cc-step-track i {
  display:block;
  width:16.666%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cc-energy),var(--cc-accent));
  box-shadow:0 0 14px rgba(var(--cc-accent-rgb),.65);
  transition:width .35s cubic-bezier(.2,.75,.2,1);
}

/* ---------- workspace ---------- */
#scr-create .cc-workspace {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(300px,.86fr) minmax(390px,1.18fr);
  gap:10px;
}
#scr-create .cc-races,
#scr-create .cc-preview,
#scr-create .cc-editor {
  min-width:0;
  min-height:0;
  border:1px solid var(--cc-line);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 35%),
    var(--cc-panel);
  box-shadow:
    0 22px 55px rgba(0,0,0,.29),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}

/* ---------- raça ---------- */
#scr-create .cc-races {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px 10px 10px;
}
#scr-create .cc-section-head {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 4px 10px;
}
#scr-create .cc-section-head > span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid rgba(var(--cc-accent-rgb),.3);
  border-radius:10px;
  background:rgba(var(--cc-accent-rgb),.08);
  color:var(--cc-accent);
  font-size:10px;
  font-weight:900;
}
#scr-create .cc-section-head small,
#scr-create .cc-race-heading small,
#scr-create .cc-editor-head small {
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
  color:var(--cc-muted);
}
#scr-create .cc-section-head h2,
#scr-create .cc-editor-head h2 {
  margin:1px 0 0;
  font-size:13px;
  line-height:1.1;
  color:#f6f8fb;
}
#scr-create #race-list {
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:1px 3px 5px 1px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--cc-accent-rgb),.35) transparent;
}
#scr-create button.race {
  position:relative;
  min-height:57px;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:5px 10px 5px 5px;
  text-align:left;
  color:#d8e0ec;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
#scr-create button.race::after {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--cc-accent);
  box-shadow:0 0 16px rgba(var(--cc-accent-rgb),.8);
  opacity:0;
  transition:opacity .18s ease;
}
#scr-create button.race:hover {
  transform:translateX(2px);
  border-color:rgba(var(--cc-accent-rgb),.28);
  background:rgba(var(--cc-accent-rgb),.055);
}
#scr-create button.race.on {
  color:#fff;
  border-color:rgba(var(--cc-accent-rgb),.4);
  background:
    linear-gradient(90deg,rgba(var(--cc-accent-rgb),.14),rgba(var(--cc-accent-rgb),.03));
  box-shadow:inset 0 0 18px rgba(var(--cc-accent-rgb),.04);
}
#scr-create button.race.on::after { opacity:1; }
#scr-create button.race.closed {
  opacity:.38;
  filter:grayscale(.7);
}
#scr-create button.race canvas {
  width:48px;
  height:48px;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.55));
}
#scr-create button.race span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
}

/* ---------- herói / preview ---------- */
#scr-create .cc-preview {
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  align-items:start;
  justify-items:center;
  gap:6px;
  padding:14px 12px 11px;
  overflow:hidden;
}
#scr-create .cc-preview::before {
  content:"";
  position:absolute;
  left:50%;
  top:30%;
  width:62%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--cc-accent-rgb),.13),transparent 66%);
  filter:blur(12px);
  pointer-events:none;
}
#scr-create .cc-race-heading {
  position:relative;
  z-index:3;
  text-align:center;
}
#scr-create #race-name {
  display:block;
  margin-top:1px;
  font-size:clamp(18px,2.1vw,28px);
  line-height:1;
  font-weight:900;
  color:#fff;
  text-shadow:
    0 2px 10px rgba(0,0,0,.7),
    0 0 20px rgba(var(--cc-accent-rgb),.2);
}
#scr-create .cc-stage-wrap {
  position:relative;
  z-index:2;
  align-self:stretch;
  width:min(100%,430px);
  min-height:0;
  display:grid;
  place-items:center;
}
#scr-create .cc-stage {
  position:relative;
  z-index:4;
  width:min(100%,390px);
  height:100%;
  min-height:210px;
  max-height:50vh;
  display:grid;
  place-items:end center;
}
#scr-create #preview {
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  image-rendering:pixelated;
  object-fit:contain;
  border:0;
  background:none;
  filter:
    drop-shadow(0 16px 14px rgba(0,0,0,.58))
    drop-shadow(0 0 18px rgba(var(--cc-accent-rgb),.1));
  animation:ccCharacterFloat 4.6s ease-in-out infinite;
}
#scr-create .cc-stage-glow {
  position:absolute;
  z-index:0;
  width:68%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(var(--cc-accent-rgb),.18),rgba(var(--cc-energy-rgb),.06) 44%,transparent 69%);
  filter:blur(10px);
  animation:ccStagePulse 3s ease-in-out infinite;
}
#scr-create .cc-stage-ring {
  position:absolute;
  z-index:1;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(var(--cc-accent-rgb),.18);
  box-shadow:inset 0 0 24px rgba(var(--cc-accent-rgb),.04);
}
#scr-create .cc-stage-ring::before,
#scr-create .cc-stage-ring::after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cc-accent);
  box-shadow:0 0 14px var(--cc-accent),0 0 28px rgba(var(--cc-accent-rgb),.5);
}
#scr-create .cc-stage-ring::before { left:12%; top:18%; }
#scr-create .cc-stage-ring::after { right:9%; bottom:25%; }
#scr-create .cc-stage-ring-a { animation:ccOrbit 11s linear infinite; }
#scr-create .cc-stage-ring-b {
  width:78%;
  opacity:.48;
  border-style:dashed;
  animation:ccOrbitReverse 17s linear infinite;
}
#scr-create .cc-stage-spark {
  position:absolute;
  z-index:6;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px #fff,0 0 13px var(--cc-accent);
  animation:ccSpark 2.9s ease-in-out infinite;
}
#scr-create .cc-stage-spark-a { left:21%; top:30%; }
#scr-create .cc-stage-spark-b { right:18%; top:42%; animation-delay:-1.1s; }
#scr-create .cc-stage-spark-c { left:34%; bottom:18%; animation-delay:-2s; }
#scr-create .cc-platform {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:2%;
  width:62%;
  height:12%;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(var(--cc-accent-rgb),.3),rgba(var(--cc-energy-rgb),.08) 48%,transparent 70%);
  border:1px solid rgba(var(--cc-accent-rgb),.13);
  box-shadow:
    0 0 25px rgba(var(--cc-accent-rgb),.12),
    inset 0 0 20px rgba(var(--cc-accent-rgb),.08);
}
@keyframes ccCharacterFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-3px); }
}
@keyframes ccStagePulse {
  0%,100% { transform:scale(.94); opacity:.65; }
  50% { transform:scale(1.06); opacity:1; }
}
@keyframes ccOrbit { to { transform:rotate(360deg); } }
@keyframes ccOrbitReverse { to { transform:rotate(-360deg); } }
@keyframes ccSpark {
  0%,100% { opacity:0; transform:translateY(7px) scale(.4); }
  35% { opacity:1; transform:translateY(0) scale(1); }
  70% { opacity:.2; transform:translateY(-11px) scale(.65); }
}

#scr-create .cc-preview-controls {
  position:relative;
  z-index:5;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
#scr-create .cc-round-btn {
  width:40px;
  height:40px;
  flex:0 0 40px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--cc-accent-rgb),.23);
  border-radius:13px;
  background:rgba(var(--cc-accent-rgb),.07);
  color:#fff;
  font-size:18px;
}
#scr-create .cc-round-btn:hover {
  background:rgba(var(--cc-accent-rgb),.15);
  box-shadow:0 0 17px rgba(var(--cc-accent-rgb),.13);
}
#scr-create #pv-form,
#scr-create #pv-pose {
  min-width:82px;
  height:40px;
  padding:0 28px 0 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:#0d121d;
  color:#eef2f8;
  font-size:11px;
}
#scr-create .cc-aura-toggle {
  min-height:40px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#d9e0eb;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
#scr-create .cc-aura-toggle input {
  appearance:none;
  width:26px;
  height:15px;
  padding:0;
  border:0;
  border-radius:99px;
  background:#262d39;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  position:relative;
}
#scr-create .cc-aura-toggle input::after {
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  left:2px;
  top:2px;
  border-radius:50%;
  background:#aeb8c6;
  transition:transform .2s ease,background .2s ease;
}
#scr-create .cc-aura-toggle input:checked {
  background:rgba(var(--cc-accent-rgb),.3);
}
#scr-create .cc-aura-toggle input:checked::after {
  transform:translateX(11px);
  background:var(--cc-accent);
  box-shadow:0 0 9px rgba(var(--cc-accent-rgb),.8);
}
#scr-create .cc-fit-note {
  max-width:95%;
  min-height:0;
  text-align:center;
  font-size:9px;
  line-height:1.2;
}
#scr-create .cc-race-info {
  width:100%;
  max-height:118px;
  overflow-y:auto;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:13px;
  background:rgba(0,0,0,.18);
  font-size:9px;
  scrollbar-width:thin;
}
#scr-create .race-desc {
  margin:0 0 5px;
  color:#cbd4e1;
  line-height:1.35;
}
#scr-create .info-row {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:1px 0;
}
#scr-create .info-row span,
#scr-create .info-skills span { color:var(--cc-muted); }
#scr-create .info-row b { color:var(--cc-accent); }
#scr-create .info-skills { margin-top:4px; color:#e4eaf3; }

/* ---------- editor ---------- */
#scr-create .cc-editor {
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  padding:14px 12px 10px;
  overflow:hidden;
}
#scr-create .cc-editor-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:8px;
  padding:0 4px 9px;
}
#scr-create .cc-editor-head > div {
  display:flex;
  align-items:center;
  gap:8px;
}
#scr-create .cc-editor-head > div > small {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(var(--cc-accent-rgb),.26);
  border-radius:9px;
  color:var(--cc-accent);
  background:rgba(var(--cc-accent-rgb),.06);
  letter-spacing:0;
}
#scr-create .cc-editor-hint {
  font-size:8px;
  color:var(--cc-muted);
}
#scr-create .cc-tabs {
  display:flex;
  gap:5px;
  margin:0 0 8px;
  padding:2px 2px 5px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
#scr-create .cc-tabs::-webkit-scrollbar { display:none; }
#scr-create .cc-tabs button {
  position:relative;
  flex:1 0 auto;
  min-width:68px;
  min-height:37px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:#9da8b8;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  scroll-snap-align:center;
}
#scr-create .cc-tabs button::after {
  content:"";
  position:absolute;
  left:25%;
  right:25%;
  bottom:-1px;
  height:2px;
  border-radius:99px;
  background:var(--cc-accent);
  box-shadow:0 0 10px rgba(var(--cc-accent-rgb),.75);
  opacity:0;
  transform:scaleX(.35);
  transition:opacity .2s ease,transform .2s ease;
}
#scr-create .cc-tabs button.on {
  color:#fff;
  border-color:rgba(var(--cc-accent-rgb),.25);
  background:rgba(var(--cc-accent-rgb),.08);
}
#scr-create .cc-tabs button.on::after {
  opacity:1;
  transform:scaleX(1);
}
#scr-create .cc-pane-wrap {
  min-height:0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.055);
}
#scr-create .cc-pane {
  height:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 4px 14px 2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--cc-accent-rgb),.3) transparent;
}
#scr-create .cc-pane[hidden] { display:none; }
#scr-create .cc-pane-enter {
  animation:ccPaneIn .26s cubic-bezier(.2,.75,.2,1);
}
@keyframes ccPaneIn {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:translateY(0); }
}
#scr-create .cc-option-section {
  padding:0 2px 14px;
}
#scr-create .cc-option-section + .cc-option-section {
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.055);
}
#scr-create .cc-option-section h3,
#scr-create .cc-pane > h3 {
  margin:0 0 7px;
  color:#f4f7fb;
  font-size:11px;
  font-weight:850;
  letter-spacing:.01em;
}
#scr-create .small {
  margin:0 0 8px;
  color:var(--cc-muted);
  font-size:9px;
  line-height:1.35;
}
#scr-create .muted { color:var(--cc-muted); }

/* cards de aparência */
#scr-create .opts {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:7px;
}
#scr-create button.opt {
  position:relative;
  min-width:0;
  min-height:80px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  padding:5px 4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.065);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,255,255,.055),transparent 48%),
    rgba(255,255,255,.025);
  color:#cdd6e2;
  font-size:8px;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
#scr-create button.opt:hover {
  transform:translateY(-1px);
  border-color:rgba(var(--cc-accent-rgb),.25);
  background:rgba(var(--cc-accent-rgb),.055);
}
#scr-create button.opt.on {
  border-color:rgba(var(--cc-accent-rgb),.55);
  background:
    radial-gradient(circle at 50% 20%,rgba(var(--cc-accent-rgb),.15),transparent 50%),
    rgba(var(--cc-accent-rgb),.07);
  box-shadow:
    inset 0 0 18px rgba(var(--cc-accent-rgb),.06),
    0 0 16px rgba(var(--cc-accent-rgb),.06);
}
#scr-create button.opt.on::after {
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cc-accent);
  box-shadow:0 0 8px var(--cc-accent);
}
#scr-create button.opt.off {
  opacity:.35;
  filter:grayscale(.65);
}
#scr-create button.opt canvas {
  max-width:100%;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.42));
}
#scr-create #hairs canvas { width:54px; height:54px; }
#scr-create #bodies canvas { width:54px; height:63px; }
#scr-create #starter-clothes canvas { width:58px; height:66px; }
#scr-create #auras canvas { max-height:76px; }
#scr-create button.opt span {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 2px;
}

/* chips */
#scr-create .chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#scr-create button.chip {
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  color:#cbd4df;
  font-size:9px;
  font-weight:800;
}
#scr-create button.chip:hover {
  border-color:rgba(var(--cc-accent-rgb),.3);
}
#scr-create button.chip.on {
  border-color:rgba(var(--cc-accent-rgb),.55);
  background:rgba(var(--cc-accent-rgb),.12);
  color:#fff;
  box-shadow:inset 0 0 15px rgba(var(--cc-accent-rgb),.05);
}

/* paletas */
#scr-create .palette {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:3px;
}
#scr-create .palette .sw {
  position:relative;
  width:32px;
  height:32px;
  padding:0;
  border:2px solid #0b0f17;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  transition:transform .16s ease,box-shadow .16s ease;
}
#scr-create .palette .sw:hover { transform:scale(1.08); }
#scr-create .palette .sw.on {
  transform:scale(1.08);
  box-shadow:
    0 0 0 2px var(--cc-accent),
    0 0 14px rgba(var(--cc-accent-rgb),.55);
}
#scr-create .palette .sw.custom {
  display:grid;
  place-items:center;
  overflow:hidden;
  background:conic-gradient(#ff3b3b,#ffd83b,#43ee78,#45e8ff,#5d61ff,#ec4dff,#ff3b3b);
}
#scr-create .palette .sw.custom input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
#scr-create .palette .sw.custom span {
  pointer-events:none;
  color:#fff;
  font-weight:900;
  text-shadow:0 1px 3px #000;
}

/* inputs */
#scr-create .cc-search,
#scr-create #char-age {
  width:100%;
  min-height:39px;
  margin:0 0 9px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  outline:none;
  background:rgba(0,0,0,.24);
  color:#f5f7fa;
}
#scr-create .cc-search:focus,
#scr-create #char-age:focus {
  border-color:rgba(var(--cc-accent-rgb),.45);
  box-shadow:0 0 0 3px rgba(var(--cc-accent-rgb),.06);
}
#scr-create #char-age { width:140px; }

/* stats */
#scr-create .cc-points-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:3px;
}
#scr-create .cc-points-title h3 { margin:0; }
#scr-create .cc-points-title strong {
  min-width:42px;
  min-height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--cc-accent-rgb),.25);
  border-radius:10px;
  background:rgba(var(--cc-accent-rgb),.08);
  color:var(--cc-accent);
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
#scr-create #stat-dist {
  display:grid;
  gap:5px;
}
#scr-create .dist {
  display:grid;
  grid-template-columns:minmax(85px,1fr) 32px 55px 32px 43px;
  align-items:center;
  gap:5px;
  min-height:38px;
  padding:3px 5px 3px 9px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}
#scr-create .dist > span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dbe2ec;
  font-size:9px;
}
#scr-create .dist b {
  text-align:center;
  color:#fff;
  font-size:10px;
}
#scr-create .dist small {
  font-size:8px;
  color:var(--cc-muted);
}
#scr-create .dist button {
  width:28px;
  height:28px;
  padding:0;
  border:1px solid rgba(var(--cc-accent-rgb),.16);
  border-radius:9px;
  background:rgba(var(--cc-accent-rgb),.06);
  color:#fff;
  font-size:15px;
  font-weight:800;
}
#scr-create .dist button:disabled {
  opacity:.25;
  cursor:default;
}
#scr-create .btns {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  margin-top:9px;
}
#scr-create .btns button {
  min-height:35px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  color:#dfe5ee;
  font-size:9px;
  font-weight:800;
}

/* perks */
#scr-create #perks {
  display:grid;
  gap:6px;
}
#scr-create .perk {
  min-height:48px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
#scr-create .perk.on {
  border-color:rgba(var(--cc-accent-rgb),.4);
  background:rgba(var(--cc-accent-rgb),.07);
}
#scr-create .perk input { margin-top:2px; accent-color:var(--cc-accent); }
#scr-create .perk b { font-size:9px; color:#fff; }
#scr-create .perk small { font-size:8px; }

/* ---------- rodapé ---------- */
#scr-create .cc-footer {
  min-height:66px;
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(220px,auto);
  align-items:center;
  gap:12px;
  padding:8px 10px 8px 14px;
  border:1px solid var(--cc-line);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(18,23,34,.79),rgba(8,12,20,.63));
  box-shadow:0 -12px 38px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}
#scr-create .cc-name-field {
  display:grid;
  grid-template-columns:auto minmax(140px,360px);
  align-items:center;
  gap:11px;
}
#scr-create .cc-name-field > span {
  color:var(--cc-muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}
#scr-create #char-name {
  width:100%;
  min-height:42px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  outline:none;
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:12px;
  font-weight:700;
}
#scr-create #char-name:focus {
  border-color:rgba(var(--cc-accent-rgb),.5);
  box-shadow:0 0 0 3px rgba(var(--cc-accent-rgb),.07);
}
#scr-create .cc-footer-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
#scr-create #create-err {
  min-width:0;
  max-width:250px;
  min-height:0;
  color:#ff8f95;
  font-size:9px;
  text-align:right;
}
#scr-create .cc-create-btn {
  position:relative;
  min-width:150px;
  min-height:43px;
  overflow:hidden;
  border:1px solid rgba(var(--cc-accent-rgb),.7);
  border-radius:13px;
  background:linear-gradient(135deg,var(--cc-energy),var(--cc-accent));
  color:#0c1017;
  font-size:10px;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:
    0 8px 22px rgba(var(--cc-energy-rgb),.2),
    inset 0 1px 0 rgba(255,255,255,.32);
}
#scr-create .cc-create-btn::after {
  content:"";
  position:absolute;
  top:-80%;
  left:-30%;
  width:24%;
  height:260%;
  transform:rotate(19deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.54),transparent);
  animation:ccButtonSweep 3.2s ease-in-out infinite;
}
#scr-create .cc-create-btn:hover {
  filter:brightness(1.08);
  box-shadow:
    0 8px 28px rgba(var(--cc-energy-rgb),.3),
    0 0 18px rgba(var(--cc-accent-rgb),.16);
}
@keyframes ccButtonSweep {
  0%,55% { left:-35%; opacity:0; }
  65% { opacity:1; }
  82%,100% { left:115%; opacity:0; }
}

/* ---------- tablets / telas médias ---------- */
@media (max-width:1100px) {
  #scr-create .cc-workspace {
    grid-template-columns:minmax(145px,175px) minmax(250px,.78fr) minmax(330px,1.22fr);
    gap:7px;
  }
  #scr-create .cc-topbar,
  #scr-create .cc-footer {
    border-radius:17px;
  }
  #scr-create .cc-races,
  #scr-create .cc-preview,
  #scr-create .cc-editor {
    border-radius:18px;
  }
  #scr-create .cc-races { padding-inline:8px; }
  #scr-create button.race {
    grid-template-columns:41px minmax(0,1fr);
    min-height:50px;
  }
  #scr-create button.race canvas { width:41px; height:41px; }
  #scr-create .cc-stage { max-height:46vh; }
  #scr-create .cc-race-info { max-height:96px; }
}

/* ---------- MOBILE RETRATO ----------
   Uma única coluna rolável: raça -> guerreiro -> editor.
   Topo e botão de criar continuam visíveis. */
@media (max-width:780px) and (orientation:portrait) {
  #scr-create .cc {
    gap:7px;
    padding:
      max(7px,env(safe-area-inset-top))
      max(7px,env(safe-area-inset-right))
      max(7px,env(safe-area-inset-bottom))
      max(7px,env(safe-area-inset-left));
  }
  #scr-create .cc-topbar {
    min-height:57px;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    padding:6px 8px;
    border-radius:16px;
  }
  #scr-create .cc-back {
    min-width:43px;
    width:43px;
    min-height:43px;
    padding:0;
    font-size:0;
  }
  #scr-create .cc-back::before {
    left:50%;
    transform:translate(-50%,-53%);
    font-size:29px;
  }
  #scr-create .cc-kicker { font-size:7px; }
  #scr-create .cc-title { font-size:18px; }
  #scr-create .cc-step-status {
    grid-column:1/-1;
    grid-template-columns:1fr auto;
    padding:0 3px 2px;
  }
  #scr-create .cc-step-copy {
    display:flex;
    align-items:center;
    gap:6px;
  }
  #scr-create .cc-step-copy small { font-size:7px; }
  #scr-create .cc-step-copy b { margin:0; font-size:10px; }
  #scr-create #cc-step-count { font-size:10px; }

  #scr-create .cc-workspace {
    display:block;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:1px;
    scrollbar-width:none;
    scroll-behavior:smooth;
  }
  #scr-create .cc-workspace::-webkit-scrollbar { display:none; }

  #scr-create .cc-races,
  #scr-create .cc-preview,
  #scr-create .cc-editor {
    border-radius:17px;
    backdrop-filter:blur(14px);
  }

  #scr-create .cc-races {
    display:block;
    margin-bottom:7px;
    padding:9px 8px 8px;
  }
  #scr-create .cc-section-head {
    padding:0 2px 7px;
  }
  #scr-create .cc-section-head > span {
    width:27px;
    height:27px;
    flex-basis:27px;
  }
  #scr-create .cc-section-head h2 { font-size:11px; }
  #scr-create #race-list {
    display:flex;
    flex-direction:row;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 1px 3px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #scr-create #race-list::-webkit-scrollbar { display:none; }
  #scr-create button.race {
    flex:0 0 124px;
    grid-template-columns:39px minmax(0,1fr);
    min-height:48px;
    scroll-snap-align:center;
    border-radius:13px;
  }
  #scr-create button.race canvas {
    width:39px;
    height:39px;
  }
  #scr-create button.race span { font-size:9px; }

  #scr-create .cc-preview {
    min-height:410px;
    grid-template-rows:auto 275px auto auto auto;
    margin-bottom:7px;
    padding:11px 8px 9px;
  }
  #scr-create #race-name { font-size:21px; }
  #scr-create .cc-stage-wrap {
    width:min(100%,335px);
    height:275px;
  }
  #scr-create .cc-stage {
    width:min(100%,330px);
    height:275px;
    min-height:0;
    max-height:none;
  }
  #scr-create .cc-stage-ring-a { width:57%; }
  #scr-create .cc-stage-ring-b { width:72%; }
  #scr-create .cc-platform { width:55%; bottom:1%; }
  #scr-create .cc-preview-controls {
    gap:5px;
  }
  #scr-create .cc-round-btn {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  #scr-create #pv-form,
  #scr-create #pv-pose {
    min-width:75px;
    height:38px;
    font-size:10px;
  }
  #scr-create .cc-aura-toggle {
    min-height:38px;
    font-size:9px;
  }
  #scr-create .cc-race-info {
    max-height:88px;
    font-size:8px;
  }

  #scr-create .cc-editor {
    min-height:390px;
    display:block;
    padding:10px 8px 8px;
    overflow:visible;
  }
  #scr-create .cc-editor-head {
    padding:0 2px 7px;
  }
  #scr-create .cc-editor-head h2 { font-size:11px; }
  #scr-create .cc-editor-hint { font-size:7px; }
  #scr-create .cc-tabs {
    position:sticky;
    top:0;
    z-index:8;
    margin:0 -2px 7px;
    padding:2px 2px 6px;
    background:linear-gradient(180deg,rgba(8,12,20,.96) 0 78%,transparent);
  }
  #scr-create .cc-tabs button {
    flex:0 0 auto;
    min-width:76px;
    min-height:39px;
    font-size:9px;
  }
  #scr-create .cc-pane-wrap {
    min-height:300px;
    overflow:visible;
  }
  #scr-create .cc-pane {
    height:auto;
    min-height:300px;
    overflow:visible;
    padding-bottom:12px;
  }
  #scr-create .opts {
    grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  }
  #scr-create button.opt {
    min-height:78px;
    border-radius:13px;
  }
  #scr-create .palette .sw {
    width:36px;
    height:36px;
  }
  #scr-create button.chip { min-height:38px; }
  #scr-create .dist { min-height:42px; }
  #scr-create .dist button {
    width:32px;
    height:32px;
  }

  #scr-create .cc-footer {
    min-height:67px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    padding:7px;
    border-radius:16px;
  }
  #scr-create .cc-name-field {
    display:block;
  }
  #scr-create .cc-name-field > span {
    display:none;
  }
  #scr-create #char-name {
    min-height:45px;
    font-size:12px;
  }
  #scr-create .cc-footer-actions {
    gap:5px;
  }
  #scr-create #create-err {
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    max-width:none;
    padding:7px 9px;
    border-radius:9px;
    background:rgba(32,8,13,.92);
    text-align:center;
    pointer-events:none;
  }
  #scr-create #create-err:empty { display:none; }
  #scr-create .cc-create-btn {
    min-width:112px;
    min-height:45px;
    padding:0 10px;
    font-size:9px;
  }
}

/* ---------- MOBILE PAISAGEM ----------
   Três zonas reais: raças compactas / guerreiro / editor.
   Nada é empilhado por cima do jogo. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:620px) {
  #scr-create .cc {
    gap:5px;
    padding:
      max(4px,env(safe-area-inset-top))
      max(5px,env(safe-area-inset-right))
      max(4px,env(safe-area-inset-bottom))
      max(5px,env(safe-area-inset-left));
  }
  #scr-create .cc-topbar {
    min-height:44px;
    grid-template-columns:auto minmax(0,1fr) minmax(155px,220px);
    gap:8px;
    padding:4px 7px;
    border-radius:13px;
  }
  #scr-create .cc-back {
    min-width:60px;
    min-height:34px;
    padding:0 9px 0 25px;
    border-radius:10px;
    font-size:9px;
  }
  #scr-create .cc-back::before {
    left:9px;
    font-size:21px;
  }
  #scr-create .cc-kicker { font-size:6px; }
  #scr-create .cc-title { font-size:15px; }
  #scr-create .cc-step-copy small { font-size:6px; }
  #scr-create .cc-step-copy b { font-size:9px; }
  #scr-create #cc-step-count { font-size:9px; }
  #scr-create .cc-step-track { height:3px; }

  #scr-create .cc-workspace {
    grid-template-columns:minmax(105px,17%) minmax(205px,34%) minmax(300px,49%);
    gap:5px;
  }
  #scr-create .cc-races,
  #scr-create .cc-preview,
  #scr-create .cc-editor {
    border-radius:13px;
  }

  #scr-create .cc-races {
    padding:7px 5px 5px;
  }
  #scr-create .cc-section-head {
    gap:5px;
    padding:0 2px 5px;
  }
  #scr-create .cc-section-head > span {
    width:22px;
    height:22px;
    flex-basis:22px;
    border-radius:7px;
    font-size:7px;
  }
  #scr-create .cc-section-head small { display:none; }
  #scr-create .cc-section-head h2 { font-size:8px; }
  #scr-create #race-list { gap:3px; }
  #scr-create button.race {
    min-height:37px;
    grid-template-columns:31px minmax(0,1fr);
    gap:4px;
    padding:2px 4px 2px 2px;
    border-radius:10px;
  }
  #scr-create button.race canvas {
    width:31px;
    height:31px;
  }
  #scr-create button.race span { font-size:7px; }

  #scr-create .cc-preview {
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:2px;
    padding:7px 5px 5px;
  }
  #scr-create .cc-race-heading small { font-size:6px; }
  #scr-create #race-name { font-size:14px; }
  #scr-create .cc-stage-wrap {
    width:min(100%,245px);
  }
  #scr-create .cc-stage {
    width:min(100%,235px);
    min-height:115px;
    max-height:none;
  }
  #scr-create .cc-stage-ring-a { width:55%; }
  #scr-create .cc-stage-ring-b { width:69%; }
  #scr-create .cc-platform { width:52%; }
  #scr-create .cc-preview-controls { gap:3px; }
  #scr-create .cc-round-btn {
    width:29px;
    height:29px;
    flex-basis:29px;
    border-radius:8px;
    font-size:13px;
  }
  #scr-create #pv-form,
  #scr-create #pv-pose {
    min-width:61px;
    height:29px;
    padding:0 19px 0 6px;
    border-radius:8px;
    font-size:7px;
  }
  #scr-create .cc-aura-toggle {
    min-height:29px;
    padding:0 5px;
    border-radius:8px;
    font-size:7px;
  }
  #scr-create .cc-aura-toggle input {
    width:22px;
    height:13px;
  }
  #scr-create .cc-aura-toggle input::after {
    width:9px;
    height:9px;
  }
  #scr-create .cc-aura-toggle input:checked::after { transform:translateX(9px); }
  #scr-create .cc-fit-note {
    max-height:14px;
    overflow:hidden;
    font-size:6px;
  }
  #scr-create .cc-race-info {
    display:none;
  }

  #scr-create .cc-editor {
    padding:7px 6px 5px;
  }
  #scr-create .cc-editor-head {
    padding:0 2px 4px;
  }
  #scr-create .cc-editor-head > div { gap:5px; }
  #scr-create .cc-editor-head > div > small {
    width:21px;
    height:21px;
    border-radius:7px;
    font-size:6px;
  }
  #scr-create .cc-editor-head h2 { font-size:9px; }
  #scr-create .cc-editor-hint { font-size:6px; }
  #scr-create .cc-tabs {
    gap:3px;
    margin-bottom:4px;
    padding-bottom:3px;
  }
  #scr-create .cc-tabs button {
    min-width:56px;
    min-height:29px;
    padding:0 6px;
    border-radius:8px;
    font-size:7px;
  }
  #scr-create .cc-pane {
    padding:6px 2px 9px 1px;
  }
  #scr-create .cc-option-section {
    padding-bottom:8px;
  }
  #scr-create .cc-option-section + .cc-option-section {
    padding-top:7px;
  }
  #scr-create .cc-option-section h3,
  #scr-create .cc-pane > h3 {
    margin-bottom:4px;
    font-size:8px;
  }
  #scr-create .small {
    margin-bottom:5px;
    font-size:6px;
  }
  #scr-create .opts {
    grid-template-columns:repeat(auto-fill,minmax(57px,1fr));
    gap:4px;
  }
  #scr-create button.opt {
    min-height:59px;
    padding:3px;
    border-radius:9px;
    font-size:6px;
  }
  #scr-create #hairs canvas { width:43px; height:43px; }
  #scr-create #bodies canvas { width:42px; height:49px; }
  #scr-create #starter-clothes canvas { width:45px; height:51px; }
  #scr-create #auras canvas { max-height:57px; }
  #scr-create .chips { gap:4px; }
  #scr-create button.chip {
    min-height:28px;
    padding:0 8px;
    border-radius:8px;
    font-size:7px;
  }
  #scr-create .palette { gap:5px; }
  #scr-create .palette .sw {
    width:27px;
    height:27px;
  }
  #scr-create .cc-search,
  #scr-create #char-age {
    min-height:30px;
    margin-bottom:5px;
    border-radius:8px;
    font-size:8px;
  }
  #scr-create #char-age { width:100px; }
  #scr-create .dist {
    grid-template-columns:minmax(58px,1fr) 27px 43px 27px 35px;
    min-height:31px;
    gap:3px;
    padding:2px 3px 2px 6px;
    border-radius:8px;
  }
  #scr-create .dist > span,
  #scr-create .dist b { font-size:7px; }
  #scr-create .dist small { font-size:6px; }
  #scr-create .dist button {
    width:23px;
    height:23px;
    border-radius:7px;
    font-size:12px;
  }
  #scr-create .btns {
    gap:4px;
    margin-top:5px;
  }
  #scr-create .btns button {
    min-height:28px;
    padding:0 8px;
    border-radius:8px;
    font-size:7px;
  }
  #scr-create .perk {
    min-height:37px;
    padding:5px;
  }
  #scr-create .perk b { font-size:7px; }
  #scr-create .perk small { font-size:6px; }

  #scr-create .cc-footer {
    min-height:45px;
    grid-template-columns:minmax(170px,1fr) auto;
    gap:7px;
    padding:4px 5px 4px 8px;
    border-radius:13px;
  }
  #scr-create .cc-name-field {
    grid-template-columns:auto minmax(120px,270px);
    gap:7px;
  }
  #scr-create .cc-name-field > span { font-size:6px; }
  #scr-create #char-name {
    min-height:34px;
    padding:0 9px;
    border-radius:9px;
    font-size:9px;
  }
  #scr-create #create-err {
    max-width:180px;
    font-size:7px;
  }
  #scr-create .cc-create-btn {
    min-width:112px;
    min-height:34px;
    border-radius:9px;
    font-size:7px;
  }
}

/* celulares muito baixos: esconde só informações secundárias */
@media (pointer:coarse) and (orientation:landscape) and (max-height:340px) {
  #scr-create .cc-kicker,
  #scr-create .cc-editor-hint,
  #scr-create .cc-fit-note {
    display:none;
  }
  #scr-create .cc-stage-ring-b { display:none; }
}

/* feedback de toque */
@media (pointer:coarse) {
  #scr-create button,
  #scr-create input,
  #scr-create select,
  #scr-create label {
    -webkit-tap-highlight-color:transparent;
  }
  #scr-create button:active {
    transform:scale(.97);
  }
  #scr-create button.race:active,
  #scr-create button.opt:active {
    transform:scale(.98);
  }
}

/* acessibilidade/performance */
@media (prefers-reduced-motion:reduce) {
  #scr-create .cc-nebula,
  #scr-create .cc-energy-line,
  #scr-create .cc-particle-field,
  #scr-create #preview,
  #scr-create .cc-stage-glow,
  #scr-create .cc-stage-ring,
  #scr-create .cc-stage-spark,
  #scr-create .cc-create-btn::after,
  #scr-create .cc-pane-enter {
    animation:none!important;
  }
}


/* ================================================================
   CHARACTER CREATION 2.1 — PREMIUM CINEMATIC LAYER
   Profundidade extra, efeitos de troca de raça e acabamento visual.
   ================================================================ */

/* vinheta/scanline muito sutis para dar profundidade sem sujar a UI */
#scr-create.cc-screen::before,
#scr-create.cc-screen::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
#scr-create.cc-screen::before {
  z-index:-1;
  background:
    radial-gradient(ellipse at center, transparent 0 52%, rgba(0,0,0,.20) 78%, rgba(0,0,0,.48) 100%);
}
#scr-create.cc-screen::after {
  z-index:20;
  opacity:.08;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 3px,
      rgba(255,255,255,.045) 4px,
      transparent 5px 7px
    );
  mix-blend-mode:soft-light;
}

/* painéis com micro-reflexo nas bordas */
#scr-create .cc-topbar,
#scr-create .cc-races,
#scr-create .cc-preview,
#scr-create .cc-editor,
#scr-create .cc-footer {
  position:relative;
}
#scr-create .cc-topbar::after,
#scr-create .cc-races::after,
#scr-create .cc-preview::after,
#scr-create .cc-editor::after,
#scr-create .cc-footer::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 19% 75%, rgba(var(--cc-accent-rgb),.035));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}

/* pequena "assinatura" da raça no palco */
#scr-create .cc-race-code {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  margin-top:6px;
  padding:0 9px;
  border:1px solid rgba(var(--cc-accent-rgb),.22);
  border-radius:999px;
  background:rgba(var(--cc-accent-rgb),.055);
  color:rgba(255,255,255,.64);
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
  box-shadow:inset 0 0 14px rgba(var(--cc-accent-rgb),.04);
}

/* feixe vertical por trás do personagem */
#scr-create .cc-stage-beam {
  position:absolute;
  z-index:0;
  left:50%;
  top:2%;
  width:40%;
  height:88%;
  transform:translateX(-50%);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(var(--cc-accent-rgb),.025) 13%,
      rgba(var(--cc-accent-rgb),.15) 48%,
      rgba(var(--cc-energy-rgb),.08) 76%,
      transparent 100%
    );
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  filter:blur(3px);
  opacity:.9;
  animation:ccBeamBreathe 3.6s ease-in-out infinite;
}

/* grid de perspectiva no chão */
#scr-create .cc-stage-grid {
  position:absolute;
  z-index:1;
  left:50%;
  bottom:1%;
  width:88%;
  height:33%;
  transform:translateX(-50%) perspective(240px) rotateX(63deg);
  transform-origin:center bottom;
  opacity:.23;
  background-image:
    linear-gradient(rgba(var(--cc-accent-rgb),.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cc-accent-rgb),.22) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);
  filter:drop-shadow(0 0 5px rgba(var(--cc-accent-rgb),.18));
  animation:ccGridFlow 4.2s linear infinite;
}

/* núcleo do pedestal */
#scr-create .cc-platform-core {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:3.6%;
  width:31%;
  height:5.5%;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.72) 0 4%,
      var(--cc-accent) 5% 11%,
      rgba(var(--cc-accent-rgb),.28) 21%,
      transparent 68%);
  box-shadow:
    0 0 10px rgba(var(--cc-accent-rgb),.75),
    0 0 28px rgba(var(--cc-accent-rgb),.23);
  opacity:.66;
  animation:ccPlatformCore 2.4s ease-in-out infinite;
}

/* fragmentos de energia lentos */
#scr-create .cc-stage-shard {
  position:absolute;
  z-index:6;
  width:2px;
  height:18px;
  border-radius:99px;
  background:linear-gradient(180deg,transparent,var(--cc-accent),transparent);
  box-shadow:0 0 8px var(--cc-accent);
  opacity:.55;
}
#scr-create .cc-stage-shard-a {
  left:18%;
  top:57%;
  transform:rotate(24deg);
  animation:ccShardA 3.9s ease-in-out infinite;
}
#scr-create .cc-stage-shard-b {
  right:18%;
  top:34%;
  transform:rotate(-18deg);
  animation:ccShardB 4.6s ease-in-out -1.2s infinite;
}
#scr-create .cc-stage-shard-c {
  right:29%;
  bottom:21%;
  height:12px;
  transform:rotate(31deg);
  animation:ccShardC 3.2s ease-in-out -.8s infinite;
}

/* selected race card ganha uma linha de energia em movimento */
#scr-create button.race.on::before {
  content:"";
  position:absolute;
  left:-35%;
  top:0;
  width:28%;
  height:100%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:ccRaceSheen 3.3s ease-in-out infinite;
}

/* cards de cosmético com acabamento de vitrine */
#scr-create button.opt::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),transparent 36%);
  opacity:.8;
}
#scr-create button.opt.on {
  animation:ccSelectedCardPulse 2.4s ease-in-out infinite;
}

/* topo e footer entram com leve delay para dar entrada cinematográfica */
#scr-create.cc-opening .cc-topbar {
  animation:ccOpeningTop .52s cubic-bezier(.2,.78,.2,1) both;
}
#scr-create.cc-opening .cc-races {
  animation:ccOpeningPanel .58s .08s cubic-bezier(.2,.78,.2,1) both;
}
#scr-create.cc-opening .cc-preview {
  animation:ccOpeningHero .7s .12s cubic-bezier(.16,.84,.2,1) both;
}
#scr-create.cc-opening .cc-editor {
  animation:ccOpeningPanel .58s .18s cubic-bezier(.2,.78,.2,1) both;
}
#scr-create.cc-opening .cc-footer {
  animation:ccOpeningFooter .52s .24s cubic-bezier(.2,.78,.2,1) both;
}

/* troca de raça: "estouro" curto no centro, sem flash branco agressivo */
#scr-create.cc-race-switch .cc-stage-wrap::after {
  content:"";
  position:absolute;
  z-index:9;
  left:50%;
  top:48%;
  width:22%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.62) 0 3%,
      rgba(var(--cc-accent-rgb),.35) 8%,
      rgba(var(--cc-energy-rgb),.13) 35%,
      transparent 70%);
  animation:ccRaceBurst .72s cubic-bezier(.1,.8,.2,1) both;
}
#scr-create.cc-race-switch #preview {
  animation:ccRaceCharacterIn .58s cubic-bezier(.16,.84,.2,1) both;
}
#scr-create.cc-race-switch .cc-stage-ring-a {
  animation:ccRaceRingKick .72s cubic-bezier(.1,.8,.2,1) both;
}
#scr-create.cc-race-switch .cc-stage-ring-b {
  animation:ccRaceRingKickB .72s cubic-bezier(.1,.8,.2,1) both;
}
#scr-create.cc-race-switch .cc-race-code,
#scr-create.cc-race-switch #race-name {
  animation:ccRaceText .45s cubic-bezier(.2,.75,.2,1) both;
}

/* troca de etapa: pequeno pulso no editor */
#scr-create.cc-step-switch .cc-editor {
  box-shadow:
    0 22px 55px rgba(0,0,0,.29),
    0 0 22px rgba(var(--cc-accent-rgb),.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* botão final com pulso de energia extra */
#scr-create .cc-create-btn {
  isolation:isolate;
}
#scr-create .cc-create-btn::before {
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cc-energy),var(--cc-accent),var(--cc-energy));
  background-size:200% 100%;
  filter:blur(9px);
  opacity:.22;
  animation:ccCreateAura 2.7s ease-in-out infinite;
}

/* linhas verticais decorativas nos cantos do editor */
#scr-create .cc-editor::before {
  content:"";
  position:absolute;
  top:18px;
  right:8px;
  width:1px;
  height:34px;
  background:linear-gradient(180deg,transparent,var(--cc-accent),transparent);
  box-shadow:0 0 8px rgba(var(--cc-accent-rgb),.55);
  opacity:.38;
}

/* animações */
@keyframes ccBeamBreathe {
  0%,100% { opacity:.52; transform:translateX(-50%) scaleX(.92); }
  50% { opacity:.95; transform:translateX(-50%) scaleX(1.08); }
}
@keyframes ccGridFlow {
  to { background-position:0 18px,18px 0; }
}
@keyframes ccPlatformCore {
  0%,100% { opacity:.44; transform:translateX(-50%) scaleX(.94); }
  50% { opacity:.8; transform:translateX(-50%) scaleX(1.08); }
}
@keyframes ccShardA {
  0%,100% { opacity:.05; transform:translateY(8px) rotate(24deg) scaleY(.6); }
  45% { opacity:.8; transform:translateY(-10px) rotate(24deg) scaleY(1); }
}
@keyframes ccShardB {
  0%,100% { opacity:.05; transform:translateY(4px) rotate(-18deg) scaleY(.6); }
  55% { opacity:.68; transform:translateY(-14px) rotate(-18deg) scaleY(1.15); }
}
@keyframes ccShardC {
  0%,100% { opacity:.03; transform:translateY(4px) rotate(31deg); }
  40% { opacity:.72; transform:translateY(-8px) rotate(31deg); }
}
@keyframes ccRaceSheen {
  0%,58% { left:-38%; opacity:0; }
  66% { opacity:.9; }
  82%,100% { left:120%; opacity:0; }
}
@keyframes ccSelectedCardPulse {
  0%,100% { box-shadow:inset 0 0 18px rgba(var(--cc-accent-rgb),.06),0 0 15px rgba(var(--cc-accent-rgb),.04); }
  50% { box-shadow:inset 0 0 22px rgba(var(--cc-accent-rgb),.1),0 0 21px rgba(var(--cc-accent-rgb),.09); }
}
@keyframes ccOpeningTop {
  from { opacity:0; transform:translateY(-10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes ccOpeningPanel {
  from { opacity:0; transform:translateY(9px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ccOpeningHero {
  0% { opacity:0; transform:scale(.96); filter:blur(4px); }
  65% { opacity:1; transform:scale(1.012); filter:blur(0); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes ccOpeningFooter {
  from { opacity:0; transform:translateY(11px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes ccRaceBurst {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.25); }
  25% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(4.4); }
}
@keyframes ccRaceCharacterIn {
  0% { opacity:.15; transform:scale(.84) translateY(7px); filter:brightness(2); }
  55% { opacity:1; transform:scale(1.045) translateY(-2px); filter:brightness(1.12); }
  100% { opacity:1; transform:scale(1) translateY(0); filter:none; }
}
@keyframes ccRaceRingKick {
  0% { opacity:.15; transform:scale(.72) rotate(-25deg); }
  55% { opacity:1; transform:scale(1.08) rotate(160deg); }
  100% { opacity:1; transform:scale(1) rotate(250deg); }
}
@keyframes ccRaceRingKickB {
  0% { opacity:.05; transform:scale(.58) rotate(30deg); }
  55% { opacity:.55; transform:scale(1.11) rotate(-145deg); }
  100% { opacity:.48; transform:scale(1) rotate(-220deg); }
}
@keyframes ccRaceText {
  from { opacity:.15; transform:translateY(5px); letter-spacing:.04em; }
  to { opacity:1; transform:translateY(0); }
}
@keyframes ccCreateAura {
  0%,100% { opacity:.13; background-position:0 0; }
  50% { opacity:.34; background-position:100% 0; }
}

/* mobile: mantém o acabamento premium sem exagerar no custo visual */
@media (max-width:780px) and (orientation:portrait) {
  #scr-create .cc-race-code {
    min-height:18px;
    margin-top:4px;
    font-size:6px;
  }
  #scr-create .cc-stage-beam { width:46%; }
  #scr-create .cc-stage-grid {
    width:94%;
    height:28%;
    background-size:15px 15px;
  }
  #scr-create .cc-stage-shard { opacity:.42; }
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:620px) {
  #scr-create.cc-screen::after { opacity:.045; }
  #scr-create .cc-race-code {
    min-height:14px;
    margin-top:2px;
    padding-inline:6px;
    font-size:5px;
  }
  #scr-create .cc-stage-beam { width:42%; }
  #scr-create .cc-stage-grid {
    height:27%;
    background-size:13px 13px;
  }
  #scr-create .cc-stage-shard { height:11px; }
}

/* telas extremamente pequenas: prioriza fluidez */
@media (pointer:coarse) and (orientation:landscape) and (max-height:340px) {
  #scr-create .cc-stage-grid,
  #scr-create .cc-stage-shard,
  #scr-create.cc-screen::after {
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  #scr-create .cc-stage-beam,
  #scr-create .cc-stage-grid,
  #scr-create .cc-platform-core,
  #scr-create .cc-stage-shard,
  #scr-create button.race.on::before,
  #scr-create button.opt.on,
  #scr-create .cc-create-btn::before,
  #scr-create.cc-opening .cc-topbar,
  #scr-create.cc-opening .cc-races,
  #scr-create.cc-opening .cc-preview,
  #scr-create.cc-opening .cc-editor,
  #scr-create.cc-opening .cc-footer,
  #scr-create.cc-race-switch .cc-stage-wrap::after,
  #scr-create.cc-race-switch #preview,
  #scr-create.cc-race-switch .cc-stage-ring,
  #scr-create.cc-race-switch .cc-race-code,
  #scr-create.cc-race-switch #race-name {
    animation:none!important;
  }
}


/* ================================================================
   CHARACTER CREATION 2.2 — MAXIMUM ENERGY PASS
   Direção: mais cinematográfico, mais brilho, mais "wow", mantendo
   legibilidade e degradando efeitos pesados em telas muito pequenas.
   ================================================================ */

/* ---------- FUNDO CÓSMICO MAIS VIVO ---------- */
#scr-create .cc-cosmic-rift {
  position:absolute;
  inset:-18%;
  opacity:.56;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(var(--cc-energy-rgb),.16), transparent 24%),
    radial-gradient(ellipse at 74% 24%, rgba(var(--cc-accent-rgb),.15), transparent 22%),
    conic-gradient(from 215deg at 52% 52%,
      transparent 0 12%,
      rgba(var(--cc-accent-rgb),.12) 14%,
      transparent 18% 46%,
      rgba(var(--cc-energy-rgb),.1) 49%,
      transparent 54% 100%);
  filter:blur(16px) saturate(1.25);
  mix-blend-mode:screen;
  animation:ccCosmicRift 22s ease-in-out infinite alternate;
}
#scr-create .cc-energy-dust {
  position:absolute;
  inset:0;
  opacity:.52;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(var(--cc-accent-rgb),.85) 0 1.3px, transparent 2px),
    radial-gradient(circle, rgba(var(--cc-energy-rgb),.72) 0 1px, transparent 1.8px);
  background-size:47px 47px,83px 83px,127px 127px;
  background-position:13px 7px,24px 31px,77px 43px;
  filter:drop-shadow(0 0 5px rgba(var(--cc-accent-rgb),.25));
  animation:ccEnergyDust 13s linear infinite;
}
#scr-create .cc-comet {
  position:absolute;
  width:170px;
  height:2px;
  border-radius:99px;
  opacity:0;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.85) 64%,
      var(--cc-accent) 82%,
      transparent);
  filter:drop-shadow(0 0 6px rgba(var(--cc-accent-rgb),.95))
         drop-shadow(0 0 16px rgba(var(--cc-energy-rgb),.42));
  transform:rotate(-24deg);
}
#scr-create .cc-comet::after {
  content:"";
  position:absolute;
  right:7%;
  top:50%;
  width:4px;
  height:4px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 8px #fff,
    0 0 16px var(--cc-accent),
    0 0 28px rgba(var(--cc-energy-rgb),.8);
}
#scr-create .cc-comet-a {
  left:-15%;
  top:18%;
  animation:ccCometA 8.8s ease-in-out infinite;
}
#scr-create .cc-comet-b {
  right:-22%;
  top:63%;
  width:130px;
  transform:rotate(157deg);
  animation:ccCometB 11.5s 2.5s ease-in-out infinite;
}
#scr-create .cc-comet-c {
  left:20%;
  bottom:7%;
  width:110px;
  transform:rotate(-8deg);
  animation:ccCometC 13.5s 5.1s ease-in-out infinite;
}
#scr-create .cc-lensflare {
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
  opacity:.55;
  box-shadow:
    0 0 6px #fff,
    0 0 15px var(--cc-accent),
    0 0 34px rgba(var(--cc-accent-rgb),.82),
    0 0 70px rgba(var(--cc-energy-rgb),.36);
  animation:ccLensFlare 3.6s ease-in-out infinite;
}
#scr-create .cc-lensflare::before,
#scr-create .cc-lensflare::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
#scr-create .cc-lensflare::before {
  width:68px;
  height:1px;
}
#scr-create .cc-lensflare::after {
  width:1px;
  height:52px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.7),transparent);
}
#scr-create .cc-lensflare-a { left:36%; top:11%; }
#scr-create .cc-lensflare-b { right:18%; bottom:10%; animation-delay:-1.7s; }

/* ---------- CONTORNO ENERGIZADO DOS GRANDES PAINÉIS ---------- */
#scr-create .cc-topbar,
#scr-create .cc-races,
#scr-create .cc-preview,
#scr-create .cc-editor,
#scr-create .cc-footer {
  border-color:rgba(var(--cc-accent-rgb),.2);
  box-shadow:
    0 22px 58px rgba(0,0,0,.34),
    0 0 0 1px rgba(var(--cc-accent-rgb),.045),
    0 0 24px rgba(var(--cc-accent-rgb),.055),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 24px rgba(var(--cc-accent-rgb),.018);
}
#scr-create .cc-preview {
  border-color:rgba(var(--cc-accent-rgb),.31);
  box-shadow:
    0 24px 62px rgba(0,0,0,.38),
    0 0 0 1px rgba(var(--cc-accent-rgb),.07),
    0 0 30px rgba(var(--cc-accent-rgb),.10),
    inset 0 0 42px rgba(var(--cc-accent-rgb),.035);
}
#scr-create .cc-preview::after {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.1),
      transparent 17% 68%,
      rgba(var(--cc-accent-rgb),.09));
}
#scr-create .cc-workspace {
  position:relative;
}
#scr-create .cc-workspace::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-7px;
  border-radius:27px;
  pointer-events:none;
  background:
    radial-gradient(circle at 31% 48%,rgba(var(--cc-accent-rgb),.11),transparent 23%),
    radial-gradient(circle at 83% 26%,rgba(var(--cc-energy-rgb),.07),transparent 26%);
  filter:blur(13px);
  animation:ccWorkspaceAura 4.8s ease-in-out infinite;
}

/* pequenos pontos de ignição nas bordas */
#scr-create .cc-topbar::before,
#scr-create .cc-footer::before {
  content:"";
  position:absolute;
  z-index:3;
  left:9%;
  right:9%;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(var(--cc-accent-rgb),.08) 16%,
      rgba(255,255,255,.78) 50%,
      rgba(var(--cc-accent-rgb),.08) 84%,
      transparent);
  filter:drop-shadow(0 0 5px var(--cc-accent));
  opacity:.6;
}
#scr-create .cc-topbar::before { bottom:-1px; }
#scr-create .cc-footer::before { top:-1px; }

/* ---------- PALCO: MAIS AURA / MAGIA / ENERGIA ---------- */
#scr-create .cc-stage-wrap {
  isolation:isolate;
}
#scr-create .cc-stage-wrap::before {
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:48%;
  width:78%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.05) 0 4%,
      rgba(var(--cc-accent-rgb),.12) 18%,
      transparent 44%),
    conic-gradient(from 0deg,
      transparent 0 7%,
      rgba(var(--cc-accent-rgb),.25) 8%,
      transparent 10% 23%,
      rgba(var(--cc-energy-rgb),.21) 24%,
      transparent 27% 44%,
      rgba(var(--cc-accent-rgb),.23) 45%,
      transparent 49% 100%);
  filter:blur(.2px) drop-shadow(0 0 18px rgba(var(--cc-accent-rgb),.12));
  opacity:.68;
  animation:ccStageConstellation 16s linear infinite;
}
#scr-create .cc-stage-halo {
  position:absolute;
  z-index:2;
  left:50%;
  top:49%;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
}
#scr-create .cc-stage-halo-a {
  width:72%;
  transform:translate(-50%,-50%);
  border:
    1px solid rgba(var(--cc-accent-rgb),.28);
  box-shadow:
    0 0 8px rgba(var(--cc-accent-rgb),.2),
    inset 0 0 18px rgba(var(--cc-accent-rgb),.055);
  background:
    repeating-conic-gradient(
      transparent 0 14deg,
      rgba(var(--cc-accent-rgb),.32) 15deg 15.5deg,
      transparent 16deg 32deg
    );
  -webkit-mask:radial-gradient(circle,transparent 65%,#000 66% 68%,transparent 69%);
  mask:radial-gradient(circle,transparent 65%,#000 66% 68%,transparent 69%);
  animation:ccHaloSpin 9s linear infinite;
}
#scr-create .cc-stage-halo-b {
  width:88%;
  transform:translate(-50%,-50%);
  background:
    conic-gradient(
      from 20deg,
      transparent 0 10%,
      rgba(var(--cc-accent-rgb),.35) 11% 12%,
      transparent 13% 31%,
      rgba(var(--cc-energy-rgb),.28) 32% 33%,
      transparent 34% 59%,
      rgba(255,255,255,.25) 60% 60.8%,
      transparent 62% 100%
    );
  -webkit-mask:radial-gradient(circle,transparent 72%,#000 73% 74.5%,transparent 75.5%);
  mask:radial-gradient(circle,transparent 72%,#000 73% 74.5%,transparent 75.5%);
  filter:drop-shadow(0 0 8px rgba(var(--cc-accent-rgb),.2));
  opacity:.65;
  animation:ccHaloSpinReverse 15s linear infinite;
}
#scr-create .cc-electric-arc {
  position:absolute;
  z-index:7;
  left:50%;
  top:49%;
  width:67%;
  height:67%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:.58;
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 8px var(--cc-accent))
    drop-shadow(0 0 14px rgba(var(--cc-energy-rgb),.5));
}
#scr-create .cc-electric-arc::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border-top:2px solid rgba(255,255,255,.9);
  border-right:1px solid rgba(var(--cc-accent-rgb),.65);
  border-bottom:1px solid transparent;
  border-left:1px solid transparent;
  clip-path:polygon(0 0,100% 0,100% 38%,82% 34%,72% 42%,61% 30%,49% 43%,34% 29%,22% 38%,0 28%);
}
#scr-create .cc-electric-arc-a {
  animation:ccElectricArc 2.5s steps(2,end) infinite;
}
#scr-create .cc-electric-arc-b {
  width:59%;
  height:59%;
  opacity:.38;
  transform:translate(-50%,-50%) rotate(145deg);
  animation:ccElectricArcB 3.2s steps(2,end) infinite;
}
#scr-create .cc-energy-orb {
  position:absolute;
  z-index:8;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fffbe8;
  pointer-events:none;
  box-shadow:
    0 0 8px #fff,
    0 0 16px var(--cc-accent),
    0 0 28px rgba(var(--cc-accent-rgb),.85),
    0 0 44px rgba(var(--cc-energy-rgb),.35);
}
#scr-create .cc-energy-orb::after {
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(var(--cc-accent-rgb),.35);
  border-radius:50%;
  animation:ccOrbRing 1.7s ease-out infinite;
}
#scr-create .cc-energy-orb-a {
  left:17%;
  top:42%;
  animation:ccOrbFloatA 4.7s ease-in-out infinite;
}
#scr-create .cc-energy-orb-b {
  right:15%;
  top:31%;
  width:6px;
  height:6px;
  animation:ccOrbFloatB 5.5s -1.2s ease-in-out infinite;
}
#scr-create .cc-energy-orb-c {
  right:23%;
  bottom:16%;
  width:5px;
  height:5px;
  animation:ccOrbFloatC 3.9s -.7s ease-in-out infinite;
}
#scr-create .cc-stage-beam {
  width:47%;
  opacity:1;
  filter:
    blur(2px)
    drop-shadow(0 0 13px rgba(var(--cc-accent-rgb),.35))
    drop-shadow(0 0 28px rgba(var(--cc-energy-rgb),.16));
}
#scr-create .cc-stage-glow {
  width:78%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.10) 0 5%,
      rgba(var(--cc-accent-rgb),.29) 20%,
      rgba(var(--cc-energy-rgb),.13) 43%,
      transparent 72%);
  filter:blur(13px) saturate(1.2);
}
#scr-create .cc-platform {
  width:72%;
  height:15%;
  border-color:rgba(var(--cc-accent-rgb),.32);
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.23) 0 3%,
      rgba(var(--cc-accent-rgb),.55) 5% 14%,
      rgba(var(--cc-accent-rgb),.23) 29%,
      rgba(var(--cc-energy-rgb),.09) 49%,
      transparent 72%);
  box-shadow:
    0 0 10px rgba(var(--cc-accent-rgb),.55),
    0 0 30px rgba(var(--cc-accent-rgb),.28),
    0 0 60px rgba(var(--cc-energy-rgb),.15),
    inset 0 0 24px rgba(var(--cc-accent-rgb),.18);
  animation:ccPlatformSurge 2.8s ease-in-out infinite;
}
#scr-create .cc-platform-core {
  width:39%;
  opacity:.9;
  box-shadow:
    0 0 10px #fff,
    0 0 22px var(--cc-accent),
    0 0 48px rgba(var(--cc-accent-rgb),.55),
    0 0 72px rgba(var(--cc-energy-rgb),.20);
}
#scr-create #preview {
  filter:
    drop-shadow(0 18px 16px rgba(0,0,0,.66))
    drop-shadow(0 0 8px rgba(255,255,255,.10))
    drop-shadow(0 0 22px rgba(var(--cc-accent-rgb),.16))
    drop-shadow(0 0 35px rgba(var(--cc-energy-rgb),.07));
}

/* ---------- PARTÍCULAS INTERATIVAS ---------- */
#scr-create .cc-burst-particle {
  position:absolute;
  z-index:12;
  left:50%;
  top:50%;
  width:4px;
  height:9px;
  margin:-4px 0 0 -2px;
  border-radius:99px;
  pointer-events:none;
  background:linear-gradient(180deg,#fff,var(--cc-accent),transparent);
  box-shadow:
    0 0 6px #fff,
    0 0 12px var(--cc-accent),
    0 0 20px rgba(var(--cc-energy-rgb),.5);
  opacity:0;
  transform:rotate(var(--br)) scale(var(--bs));
  animation:ccBurstParticle .82s var(--bd) cubic-bezier(.15,.78,.15,1) forwards;
}
#scr-create .cc-burst-particle.major {
  width:5px;
  height:14px;
  background:linear-gradient(180deg,#fff9ce,var(--cc-accent),var(--cc-energy),transparent);
  animation-duration:1.15s;
}
#scr-create.cc-choice-flash .cc-stage-wrap::after {
  content:"";
  position:absolute;
  z-index:10;
  left:50%;
  top:52%;
  width:20%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.55),
      rgba(var(--cc-accent-rgb),.24) 20%,
      transparent 68%);
  filter:blur(2px);
  animation:ccChoiceFlash .42s ease-out both;
}

/* ---------- SELECTS / TABS / CARDS: GLOW MAIS INTENSO ---------- */
#scr-create button.race.on {
  border-color:rgba(var(--cc-accent-rgb),.72);
  background:
    radial-gradient(circle at 12% 50%,rgba(var(--cc-accent-rgb),.22),transparent 45%),
    linear-gradient(90deg,rgba(var(--cc-accent-rgb),.19),rgba(var(--cc-accent-rgb),.045));
  box-shadow:
    inset 0 0 22px rgba(var(--cc-accent-rgb),.075),
    0 0 0 1px rgba(var(--cc-accent-rgb),.13),
    0 0 15px rgba(var(--cc-accent-rgb),.16),
    0 0 28px rgba(var(--cc-energy-rgb),.07);
}
#scr-create button.race.on canvas {
  filter:
    drop-shadow(0 4px 7px rgba(0,0,0,.55))
    drop-shadow(0 0 7px rgba(var(--cc-accent-rgb),.28));
}
#scr-create .cc-tabs button.on {
  border-color:rgba(var(--cc-accent-rgb),.65);
  background:
    linear-gradient(180deg,rgba(var(--cc-accent-rgb),.18),rgba(var(--cc-accent-rgb),.08));
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(var(--cc-accent-rgb),.07),
    0 0 13px rgba(var(--cc-accent-rgb),.14),
    inset 0 0 15px rgba(var(--cc-accent-rgb),.07);
  text-shadow:0 0 9px rgba(var(--cc-accent-rgb),.35);
}
#scr-create .cc-tabs button.on::after {
  height:3px;
  left:18%;
  right:18%;
  box-shadow:
    0 0 6px #fff,
    0 0 11px var(--cc-accent),
    0 0 19px rgba(var(--cc-accent-rgb),.75);
}
#scr-create button.chip.on {
  border-color:rgba(var(--cc-accent-rgb),.72);
  background:
    linear-gradient(180deg,rgba(var(--cc-accent-rgb),.19),rgba(var(--cc-accent-rgb),.09));
  color:#fff;
  box-shadow:
    0 0 14px rgba(var(--cc-accent-rgb),.15),
    inset 0 0 17px rgba(var(--cc-accent-rgb),.08);
  text-shadow:0 0 8px rgba(var(--cc-accent-rgb),.22);
}
#scr-create button.opt.on {
  border-color:rgba(var(--cc-accent-rgb),.84);
  background:
    radial-gradient(circle at 50% 18%,rgba(var(--cc-accent-rgb),.24),transparent 51%),
    rgba(var(--cc-accent-rgb),.085);
  box-shadow:
    inset 0 0 23px rgba(var(--cc-accent-rgb),.12),
    0 0 0 1px rgba(var(--cc-accent-rgb),.10),
    0 0 17px rgba(var(--cc-accent-rgb),.18),
    0 0 33px rgba(var(--cc-energy-rgb),.08);
}
#scr-create button.opt.on::after {
  width:8px;
  height:8px;
  background:#fff8cf;
  box-shadow:
    0 0 5px #fff,
    0 0 10px var(--cc-accent),
    0 0 18px rgba(var(--cc-accent-rgb),.9);
  animation:ccSelectedDot 1.6s ease-in-out infinite;
}
#scr-create .palette .sw.on {
  box-shadow:
    0 0 0 2px var(--cc-accent),
    0 0 6px #fff,
    0 0 16px rgba(var(--cc-accent-rgb),.76),
    0 0 26px rgba(var(--cc-energy-rgb),.22);
}

/* ---------- PROGRESSO / BOTÃO FINAL MAIS "ENDGAME" ---------- */
#scr-create .cc-step-track {
  height:5px;
  overflow:visible;
}
#scr-create .cc-step-track i {
  position:relative;
  box-shadow:
    0 0 6px #fff,
    0 0 11px var(--cc-accent),
    0 0 22px rgba(var(--cc-accent-rgb),.58);
}
#scr-create .cc-step-track i::after {
  content:"";
  position:absolute;
  right:-3px;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff9da;
  box-shadow:
    0 0 5px #fff,
    0 0 12px var(--cc-accent),
    0 0 24px rgba(var(--cc-accent-rgb),.8);
}
#scr-create .cc-create-btn {
  border-color:rgba(255,247,199,.78);
  background:
    linear-gradient(135deg,#ff7a2d 0%,var(--cc-energy) 25%,var(--cc-accent) 70%,#fff0a4 115%);
  box-shadow:
    0 8px 24px rgba(var(--cc-energy-rgb),.34),
    0 0 13px rgba(var(--cc-accent-rgb),.36),
    0 0 30px rgba(var(--cc-accent-rgb),.16),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 18px rgba(255,255,255,.08);
  animation:ccCreateButtonPulse 2.3s ease-in-out infinite;
}
#scr-create .cc-create-btn:hover {
  filter:brightness(1.13) saturate(1.13);
  transform:translateY(-1px) scale(1.015);
  box-shadow:
    0 10px 30px rgba(var(--cc-energy-rgb),.42),
    0 0 17px rgba(255,255,255,.25),
    0 0 32px rgba(var(--cc-accent-rgb),.35),
    0 0 52px rgba(var(--cc-energy-rgb),.17);
}
#scr-create .cc-create-btn::before {
  opacity:.38;
  filter:blur(12px);
}

/* ---------- TROCA DE RAÇA MAIS DRAMÁTICA ---------- */
#scr-create.cc-race-switch .cc-stage-wrap::after {
  width:28%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.95) 0 2%,
      rgba(255,255,255,.55) 3% 6%,
      rgba(var(--cc-accent-rgb),.58) 9% 22%,
      rgba(var(--cc-energy-rgb),.22) 36%,
      transparent 72%);
  filter:
    blur(1px)
    drop-shadow(0 0 12px #fff)
    drop-shadow(0 0 27px var(--cc-accent));
  animation-duration:.92s;
}
#scr-create.cc-race-switch .cc-stage-beam {
  animation:ccRaceBeamBlast .92s cubic-bezier(.1,.82,.15,1) both;
}
#scr-create.cc-race-switch .cc-platform {
  animation:ccRacePlatformBlast .9s cubic-bezier(.1,.82,.15,1) both;
}
#scr-create.cc-race-switch .cc-energy-orb {
  filter:brightness(1.5);
}
#scr-create.cc-race-switch .cc-preview {
  box-shadow:
    0 24px 62px rgba(0,0,0,.38),
    0 0 0 1px rgba(var(--cc-accent-rgb),.1),
    0 0 45px rgba(var(--cc-accent-rgb),.16),
    inset 0 0 52px rgba(var(--cc-accent-rgb),.05);
}

/* ---------- KEYFRAMES ---------- */
@keyframes ccCosmicRift {
  0% { transform:rotate(-3deg) scale(1); opacity:.38; }
  50% { opacity:.66; }
  100% { transform:rotate(5deg) scale(1.06); opacity:.52; }
}
@keyframes ccEnergyDust {
  to { background-position:13px -40px,24px -52px,77px -84px; }
}
@keyframes ccCometA {
  0%,55% { opacity:0; transform:translate3d(-60px,20px,0) rotate(-24deg) scaleX(.65); }
  60% { opacity:.2; }
  67% { opacity:1; }
  79% { opacity:.15; transform:translate3d(115vw,-100px,0) rotate(-24deg) scaleX(1); }
  100% { opacity:0; transform:translate3d(115vw,-100px,0) rotate(-24deg); }
}
@keyframes ccCometB {
  0%,61% { opacity:0; transform:translate3d(50px,-10px,0) rotate(157deg) scaleX(.7); }
  66% { opacity:.9; }
  78% { opacity:.1; transform:translate3d(-105vw,120px,0) rotate(157deg); }
  100% { opacity:0; transform:translate3d(-105vw,120px,0) rotate(157deg); }
}
@keyframes ccCometC {
  0%,67% { opacity:0; transform:translate3d(-80px,20px,0) rotate(-8deg); }
  72% { opacity:.7; }
  82% { opacity:.08; transform:translate3d(82vw,-60px,0) rotate(-8deg); }
  100% { opacity:0; transform:translate3d(82vw,-60px,0) rotate(-8deg); }
}
@keyframes ccLensFlare {
  0%,100% { opacity:.18; transform:scale(.65); }
  45% { opacity:.76; transform:scale(1.15); }
  55% { opacity:.38; transform:scale(.92); }
}
@keyframes ccWorkspaceAura {
  0%,100% { opacity:.52; transform:scale(.99); }
  50% { opacity:1; transform:scale(1.012); }
}
@keyframes ccStageConstellation {
  to { transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes ccHaloSpin {
  to { transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes ccHaloSpinReverse {
  to { transform:translate(-50%,-50%) rotate(-360deg); }
}
@keyframes ccElectricArc {
  0%,100% { transform:translate(-50%,-50%) rotate(0deg) scale(1); opacity:.2; }
  28% { transform:translate(-50%,-50%) rotate(7deg) scale(1.015); opacity:.75; }
  46% { transform:translate(-50%,-50%) rotate(-4deg) scale(.995); opacity:.32; }
  68% { transform:translate(-50%,-50%) rotate(4deg) scale(1.01); opacity:.66; }
}
@keyframes ccElectricArcB {
  0%,100% { transform:translate(-50%,-50%) rotate(145deg) scale(.98); opacity:.12; }
  36% { transform:translate(-50%,-50%) rotate(157deg) scale(1.02); opacity:.52; }
  64% { transform:translate(-50%,-50%) rotate(136deg) scale(1); opacity:.24; }
}
@keyframes ccOrbFloatA {
  0%,100% { transform:translate(0,4px) scale(.7); opacity:.38; }
  45% { transform:translate(9px,-13px) scale(1.18); opacity:1; }
}
@keyframes ccOrbFloatB {
  0%,100% { transform:translate(-3px,0) scale(.8); opacity:.32; }
  55% { transform:translate(-13px,14px) scale(1.2); opacity:.9; }
}
@keyframes ccOrbFloatC {
  0%,100% { transform:translate(0,6px) scale(.7); opacity:.25; }
  50% { transform:translate(7px,-9px) scale(1.1); opacity:.84; }
}
@keyframes ccOrbRing {
  from { opacity:.7; transform:scale(.5); }
  to { opacity:0; transform:scale(2.8); }
}
@keyframes ccPlatformSurge {
  0%,100% { opacity:.62; transform:translateX(-50%) scaleX(.94); filter:brightness(.9); }
  50% { opacity:1; transform:translateX(-50%) scaleX(1.08); filter:brightness(1.25); }
}
@keyframes ccBurstParticle {
  0% {
    opacity:0;
    transform:translate(0,0) rotate(var(--br)) scale(calc(var(--bs) * .35));
  }
  16% { opacity:1; }
  100% {
    opacity:0;
    transform:translate(var(--bx),var(--by)) rotate(calc(var(--br) + 80deg)) scale(var(--bs));
  }
}
@keyframes ccChoiceFlash {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.25); }
  28% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(3.1); }
}
@keyframes ccSelectedDot {
  0%,100% { transform:scale(.75); opacity:.7; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes ccCreateButtonPulse {
  0%,100% { filter:brightness(1) saturate(1); }
  50% { filter:brightness(1.08) saturate(1.12); }
}
@keyframes ccRaceBeamBlast {
  0% { opacity:.28; transform:translateX(-50%) scaleX(.55); filter:brightness(2); }
  30% { opacity:1; transform:translateX(-50%) scaleX(1.4); filter:brightness(2.7); }
  100% { opacity:1; transform:translateX(-50%) scaleX(1); filter:brightness(1); }
}
@keyframes ccRacePlatformBlast {
  0% { opacity:.35; transform:translateX(-50%) scale(.6); }
  38% { opacity:1; transform:translateX(-50%) scale(1.18); filter:brightness(1.8); }
  100% { opacity:.76; transform:translateX(-50%) scale(1); filter:none; }
}

/* ---------- MOBILE: MANTÉM O WOW SEM VIRAR UMA GPU BENCHMARK ---------- */
@media (max-width:780px) and (orientation:portrait) {
  #scr-create .cc-preview {
    box-shadow:
      0 20px 48px rgba(0,0,0,.36),
      0 0 22px rgba(var(--cc-accent-rgb),.09),
      inset 0 0 30px rgba(var(--cc-accent-rgb),.03);
  }
  #scr-create .cc-stage-halo-b { opacity:.4; }
  #scr-create .cc-electric-arc { opacity:.42; }
  #scr-create .cc-energy-orb { transform:scale(.82); }
  #scr-create .cc-comet { filter:drop-shadow(0 0 5px rgba(var(--cc-accent-rgb),.7)); }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:620px) {
  #scr-create .cc-cosmic-rift { opacity:.38; filter:blur(13px); }
  #scr-create .cc-energy-dust { opacity:.32; }
  #scr-create .cc-stage-halo-b { opacity:.3; }
  #scr-create .cc-electric-arc-b { display:none; }
  #scr-create .cc-comet-c,
  #scr-create .cc-lensflare-b { display:none; }
  #scr-create .cc-burst-particle:nth-of-type(n+19) { display:none; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:340px) {
  #scr-create .cc-cosmic-rift,
  #scr-create .cc-energy-dust,
  #scr-create .cc-comet,
  #scr-create .cc-lensflare,
  #scr-create .cc-stage-halo-b,
  #scr-create .cc-electric-arc,
  #scr-create .cc-energy-orb-c {
    display:none;
  }
}

/* reduz animação sem perder a direção de arte */
@media (prefers-reduced-motion:reduce) {
  #scr-create .cc-cosmic-rift,
  #scr-create .cc-energy-dust,
  #scr-create .cc-comet,
  #scr-create .cc-lensflare,
  #scr-create .cc-workspace::before,
  #scr-create .cc-stage-wrap::before,
  #scr-create .cc-stage-halo,
  #scr-create .cc-electric-arc,
  #scr-create .cc-energy-orb,
  #scr-create .cc-platform,
  #scr-create .cc-create-btn,
  #scr-create button.opt.on::after,
  #scr-create .cc-burst-particle,
  #scr-create.cc-choice-flash .cc-stage-wrap::after,
  #scr-create.cc-race-switch .cc-stage-beam,
  #scr-create.cc-race-switch .cc-platform {
    animation:none!important;
  }
}