/* =========================================================
   Digi Idle — Auth / Start gate (Digital World)
   Completely restyles .start + .start-inner.auth-inner
   ========================================================= */

.start{
  --dd-orange:#ff9a2e;
  --dd-orange-2:#ff6b1a;
  --dd-cyan:#4fd6ff;
  --dd-cyan-2:#1aa7d6;
  --dd-bg:#060b14;
  --dd-panel:#0c1422;
  --dd-text:#eaf2ff;
  --dd-muted:#8b9bb3;
  --dd-line:rgba(79,214,255,.22);
  --dd-font:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --dd-display:"Orbitron","Rajdhani",system-ui,sans-serif;
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  overflow-y:auto;
  padding:28px 16px;
  color:var(--dd-text);
  font-family:var(--dd-font);
  background:
    radial-gradient(70% 55% at 50% 18%,rgba(255,154,46,.16),transparent 58%),
    radial-gradient(55% 45% at 82% 78%,rgba(79,214,255,.12),transparent 60%),
    radial-gradient(50% 40% at 12% 70%,rgba(61,255,160,.06),transparent 55%),
    linear-gradient(180deg,#0a1220 0%,var(--dd-bg) 55%,#04070e 100%) !important;
}

/* Digital grid */
.start::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.35;
  background-image:
    linear-gradient(rgba(79,214,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,214,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
}

/* Floating Digimon ornaments */
.start::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    url("/sprites/dex/agumon.gif") 8% 78% / 96px no-repeat,
    url("/sprites/dex/palmon.gif") 92% 72% / 96px no-repeat,
    url("/sprites/dex/gomamon.gif") 50% 92% / 72px no-repeat;
  opacity:.55;
  filter:drop-shadow(0 0 18px rgba(79,214,255,.25));
  animation:ddFloat 6s ease-in-out infinite;
}
@keyframes ddFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.start > *{position:relative;z-index:1}

/* —— Panel shell —— */
.start-inner.auth-inner{
  margin:auto;
  width:min(440px,100%);
  max-width:440px;
  text-align:left;
  padding:0 !important;
  border-radius:18px !important;
  border:1px solid var(--dd-line) !important;
  background:
    linear-gradient(180deg,rgba(255,154,46,.1),transparent 28%),
    linear-gradient(180deg,#121c2e 0%,var(--dd-panel) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,154,46,.08) inset,
    0 28px 64px rgba(0,0,0,.55),
    0 0 40px rgba(79,214,255,.08) !important;
  backdrop-filter:blur(18px) saturate(1.15);
  overflow:hidden;
  animation:ddGateIn .45s ease;
}
@keyframes ddGateIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}

/* Digivice-like top bar */
.start-inner.auth-inner::before{
  content:"D-GATE  //  LINK ESTABLISHED";
  display:block;
  padding:9px 18px;
  font-family:var(--dd-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--dd-cyan);
  background:linear-gradient(90deg,rgba(79,214,255,.12),rgba(255,154,46,.06));
  border-bottom:1px solid var(--dd-line);
  text-shadow:0 0 12px rgba(79,214,255,.35);
}

.start-inner.auth-inner > *{
  padding-left:28px;
  padding-right:28px;
}
.start-inner.auth-inner > .start-kicker{padding-top:22px}
.start-inner.auth-inner > .auth-tabs,
.start-inner.auth-inner > .auth-form,
.start-inner.auth-inner > .char-grid,
.start-inner.auth-inner > .char-create,
.start-inner.auth-inner > .auth-logout,
.start-inner.auth-inner > .char-create-title,
.start-inner.auth-inner > .char-create-note{
  /* keep horizontal pad via parent children rule */
}
.start-inner.auth-inner > .auth-logout{
  margin:0 28px 22px;
  width:calc(100% - 56px);
  padding-left:10px;
  padding-right:10px;
}
.start-inner.auth-inner > .auth-form,
.start-inner.auth-inner > .char-create{
  padding-bottom:8px;
}
.start-inner.auth-inner > .char-grid{
  padding-bottom:8px;
}

/* —— Brand —— */
.start-inner.auth-inner .start-kicker{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 6px;
  text-align:center;
}
.start-inner.auth-inner .kicker-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  line-height:1;
}
.start-inner.auth-inner .kicker-brand-main{
  font-family:var(--dd-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--dd-orange);
  text-shadow:0 0 18px rgba(255,154,46,.4);
}
.start-inner.auth-inner .kicker-brand-sub{
  font-family:var(--dd-display);
  font-size:8px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--dd-cyan);
  opacity:.9;
}

/* Digi-core (replaces pokéball) */
.start-inner.auth-inner .kicker-ball,
.start .kicker-ball{
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 50% 50%,#fff6e8 0 18%,var(--dd-orange) 19% 42%,#1a2436 43% 100%) !important;
  box-shadow:
    0 0 0 2px rgba(79,214,255,.45),
    0 0 16px rgba(255,154,46,.55),
    inset 0 0 8px rgba(255,255,255,.25) !important;
  animation:ddPulse 2.4s ease-in-out infinite;
}
.start-inner.auth-inner .kicker-ball:after,
.start .kicker-ball:after{
  display:none !important;
}
@keyframes ddPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(79,214,255,.45),0 0 14px rgba(255,154,46,.45),inset 0 0 8px rgba(255,255,255,.2)}
  50%{box-shadow:0 0 0 3px rgba(79,214,255,.7),0 0 22px rgba(255,154,46,.75),inset 0 0 10px rgba(255,255,255,.3)}
}

.start-inner.auth-inner .start-title{
  text-align:center !important;
  font-family:var(--dd-display) !important;
  font-size:clamp(22px,4.5vw,28px) !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  line-height:1.2 !important;
  margin:8px 0 6px !important;
  color:var(--dd-text) !important;
  text-wrap:balance;
}
.start-inner.auth-inner .start-sub{
  text-align:center !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--dd-muted) !important;
  margin:0 0 20px !important;
  line-height:1.4;
}

/* —— Tabs —— */
.start-inner.auth-inner .auth-tabs{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:6px !important;
  margin:0 0 18px !important;
  padding:5px !important;
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
  width:auto;
}
.start-inner.auth-inner .auth-tab{
  border-radius:9px !important;
  padding:11px 8px !important;
  font-family:var(--dd-display) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
  color:var(--dd-muted) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  transition:color .15s,background .15s,border-color .15s,box-shadow .15s !important;
}
.start-inner.auth-inner .auth-tab:hover{
  color:var(--dd-text) !important;
  border-color:rgba(79,214,255,.25) !important;
}
.start-inner.auth-inner .auth-tab.on{
  color:#0a101c !important;
  background:linear-gradient(180deg,#ffb456,var(--dd-orange)) !important;
  border-color:transparent !important;
  box-shadow:0 6px 18px rgba(255,154,46,.28) !important;
}

/* —— Form —— */
.start-inner.auth-inner .auth-form{
  gap:13px !important;
}
.start-inner.auth-inner .field span{
  font-family:var(--dd-display) !important;
  font-size:9px !important;
  letter-spacing:.14em !important;
  color:var(--dd-cyan) !important;
}
.start-inner.auth-inner .field input,
.start-inner.auth-inner .field select{
  background:#08101c !important;
  border:1px solid rgba(79,214,255,.18) !important;
  border-radius:11px !important;
  color:var(--dd-text) !important;
  padding:12px 13px !important;
  font-size:14px !important;
  font-family:var(--dd-font) !important;
  font-weight:600;
}
.start-inner.auth-inner .field input:hover,
.start-inner.auth-inner .field select:hover{
  border-color:rgba(79,214,255,.35) !important;
}
.start-inner.auth-inner .field input:focus,
.start-inner.auth-inner .field select:focus{
  outline:none !important;
  border-color:rgba(255,154,46,.55) !important;
  box-shadow:0 0 0 3px rgba(255,154,46,.12) !important;
  background:#0a1424 !important;
}
.start-inner.auth-inner .field input.field-invalid{
  border-color:rgba(255,93,108,.55) !important;
}

.start-inner.auth-inner .auth-login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.start-inner.auth-inner .auth-remember{
  color:var(--dd-muted) !important;
  font-size:12px !important;
}
.start-inner.auth-inner .auth-forgot{
  color:var(--dd-cyan) !important;
  font-size:12px !important;
  font-weight:700;
  background:none;
  border:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.start-inner.auth-inner .auth-forgot:hover{color:#9ae8ff !important}

.start-inner.auth-inner .auth-submit{
  margin-top:8px !important;
  padding:14px 16px !important;
  border:0 !important;
  border-radius:12px !important;
  font-family:var(--dd-display) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase;
  color:#0a101c !important;
  background:linear-gradient(180deg,#ffb456,var(--dd-orange) 55%,var(--dd-orange-2)) !important;
  box-shadow:0 10px 28px rgba(255,154,46,.32),0 0 0 1px rgba(255,255,255,.12) inset !important;
  transition:transform .12s,box-shadow .12s,filter .12s !important;
}
.start-inner.auth-inner .auth-submit:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 14px 34px rgba(255,154,46,.42),0 0 0 1px rgba(255,255,255,.16) inset !important;
}
.start-inner.auth-inner .auth-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.start-inner.auth-inner .auth-error{
  border-radius:10px !important;
  border:1px solid rgba(255,93,108,.4) !important;
  background:rgba(255,93,108,.1) !important;
  color:#ffb4b4 !important;
}

.start-inner.auth-inner .auth-logout{
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:var(--dd-muted) !important;
  background:rgba(255,255,255,.03) !important;
  font-family:var(--dd-display) !important;
  font-size:10px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
}
.start-inner.auth-inner .auth-logout:hover{
  color:#ff8a96 !important;
  border-color:rgba(255,93,108,.4) !important;
}

/* —— Character select —— */
.start-inner.auth-inner.char-select{
  width:min(520px,100%);
  max-width:520px;
}
.start-inner.auth-inner .char-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px !important;
  margin-bottom:14px;
}
.start-inner.auth-inner .char-card-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.start-inner.auth-inner .char-card{
  border-radius:14px !important;
  border:1px solid rgba(79,214,255,.18) !important;
  background:#08101c !important;
  overflow:hidden;
  transition:transform .15s,border-color .15s,box-shadow .15s !important;
  width:100%;
}
.start-inner.auth-inner .char-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,154,46,.5) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 20px rgba(255,154,46,.15) !important;
}
.start-inner.auth-inner .char-card:disabled{
  opacity:.55;
  transform:none;
  cursor:wait;
}
.start-inner.auth-inner .char-card img{
  filter:saturate(1.05) contrast(1.04);
}
.start-inner.auth-inner .char-card-label{
  padding:10px 11px 12px !important;
  background:linear-gradient(180deg,rgba(79,214,255,.06),transparent);
}
.start-inner.auth-inner .char-card-name{
  font-family:var(--dd-display) !important;
  font-size:12px !important;
  letter-spacing:.06em;
  color:var(--dd-text) !important;
}
.start-inner.auth-inner .char-delete{
  appearance:none;
  width:100%;
  margin:0;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,93,108,.35);
  background:rgba(255,93,108,.08);
  color:#ff8a96;
  font-family:var(--dd-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.start-inner.auth-inner .char-delete:hover:not(:disabled){
  background:rgba(255,93,108,.18);
  border-color:rgba(255,93,108,.55);
  color:#ffc0c6;
}
.start-inner.auth-inner .char-delete:disabled{
  opacity:.6;
  cursor:wait;
}
.start-inner.auth-inner .char-create-title{
  font-family:var(--dd-display) !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:var(--dd-cyan) !important;
  margin:6px 28px 10px !important;
  padding:0 !important;
}

/* Discord / extras if present */
.start-inner.auth-inner .auth-discord{
  margin:8px 28px 22px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

/* Ainda sem convite público — mostra "Em breve..." em vez de link clicável */
.auth-discord.is-soon{
  cursor:default !important;
  opacity:.55;
}
.auth-discord.is-soon:hover,
.auth-discord.is-soon:hover .auth-discord-icon{
  color:var(--muted) !important;
}

/* Starter screen (non-auth start-inner) also gets Digimon gate vibe lightly */
.start-inner:not(.auth-inner){
  font-family:var(--dd-font);
}
.start-inner:not(.auth-inner) .start-title{
  font-family:var(--dd-display);
  letter-spacing:.04em;
  color:var(--dd-text);
}
.start-inner:not(.auth-inner) .start-kicker .kicker-brand-main{
  font-family:var(--dd-display);
  letter-spacing:.2em;
  color:var(--dd-orange);
}
.start-inner:not(.auth-inner) .start-kicker .kicker-brand-sub{
  font-family:var(--dd-display);
  font-size:8px;
  letter-spacing:.24em;
  color:var(--dd-cyan);
}

@media (max-width:640px){
  .start::after{
    background-size:64px,64px,52px;
    opacity:.35;
  }
  .start-inner.auth-inner{
    width:100%;
    max-width:100%;
  }
  .start-inner.auth-inner > *{
    padding-left:18px;
    padding-right:18px;
  }
  .start-inner.auth-inner .auth-tabs{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .start-inner.auth-inner > .auth-logout{
    margin:0 18px 18px;
    width:calc(100% - 36px);
  }
  .start-inner.auth-inner .start-title{
    font-size:22px !important;
  }
}

@media (max-height:700px){
  .start{padding:14px 12px}
  .start::after{opacity:.22}
  .start-inner.auth-inner::before{padding:7px 14px;font-size:8px}
  .start-inner.auth-inner > .start-kicker{padding-top:14px}
  .start-inner.auth-inner .start-title{margin:4px 0 !important}
  .start-inner.auth-inner .start-sub{margin-bottom:12px !important}
}