:root {
  --upi-ink: #17324d;
  --upi-muted: #5e7485;
  --upi-blue: #3b82d0;
  --upi-blue-light: #65b9e9;
  --upi-green: #35b779;
  --upi-green-light: #78dab9;
  --upi-sky: #eaf7ff;
  --upi-mint: #dcf3ed;
  --upi-line: rgba(43, 102, 129, .18);
}

body {
  background-color: #dff5ff;
  background-image: url('/assets/brand/ultimate-poke-idle/login-hero-eeveelutions.webp');
}

/* Entrada e cadastro: vidro azul-petróleo sobre a nova paisagem 3D. */
#auth-screen {
  background: #dff5ff url('/assets/brand/ultimate-poke-idle/login-hero-eeveelutions.webp') center / cover no-repeat;
  color: #f6fcff;
}
#auth-screen .scrim {
  background:
    linear-gradient(90deg, rgba(7, 43, 61, .96) 0%, rgba(8, 55, 72, .90) 18%, rgba(12, 75, 87, .67) 34%, rgba(13, 91, 95, .16) 52%, transparent 64%),
    linear-gradient(0deg, rgba(7, 48, 61, .72) 0%, rgba(7, 48, 61, .12) 18%, transparent 36%);
}
#auth-screen .lang {
  color: #eafcff;
  background: rgba(19, 81, 94, .62);
  border-color: rgba(130, 226, 216, .35);
}
#auth-screen .lang svg { color: #dff9ff; }
#auth-screen .lang .chev { color: var(--upi-green-light); }
#auth-screen .ip-logo { width: 370px; }
#auth-screen .ip-logo img {
  filter: drop-shadow(0 8px 18px rgba(4, 39, 55, .56));
}
#auth-screen .tag {
  background: linear-gradient(180deg, #f8ffff, #9debd5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#auth-screen .card {
  background: linear-gradient(155deg, rgba(11, 66, 82, .92), rgba(9, 42, 63, .92));
  border-color: rgba(121, 221, 196, .42);
  box-shadow: 0 30px 70px rgba(3, 39, 54, .46), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(207, 255, 245, .22), 0 0 55px -22px rgba(101, 185, 233, .72);
  backdrop-filter: blur(14px);
}
#auth-screen .hd .pb { filter: drop-shadow(0 2px 5px rgba(101, 185, 233, .5)); }
#auth-screen .hd h1 { color: #8fe4ff; }
#auth-screen .hd2 { color: #b9dce4; }
#auth-screen .field .ic,
#auth-screen .eye { color: #9bc8d0; }
#auth-screen .field input {
  color: #f8feff;
  background: rgba(239, 253, 255, .09);
  border-color: rgba(174, 232, 235, .28);
}
#auth-screen .field input::placeholder { color: #a8c8cf; }
#auth-screen .field input:focus {
  border-color: var(--upi-blue-light);
  background: rgba(239, 253, 255, .14);
  box-shadow: 0 0 0 3px rgba(101, 185, 233, .23);
}
#auth-screen .field:focus-within .ic { color: var(--upi-green-light); }
#auth-screen .row label { color: #c7e1e6; }
#auth-screen .row input { border-color: #7db5bd; }
#auth-screen .row input:checked { background: var(--upi-green); border-color: var(--upi-green); }
#auth-screen .row a { color: #9ce6d0; }
#auth-screen .btn.enter,
#auth-screen .btn.create:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--upi-blue), #38a8cd 54%, var(--upi-green));
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(30, 135, 169, .35), inset 0 1px 0 rgba(255,255,255,.26);
}
#auth-screen .btn.create {
  color: #e5fbff;
  background: rgba(224, 250, 251, .06);
  border-color: rgba(128, 218, 203, .38);
}
#auth-screen .divx { color: #9abfc5; }
#auth-screen .divx::before,
#auth-screen .divx::after { background: rgba(161, 226, 220, .22); }
#auth-screen .abar {
  background: linear-gradient(180deg, rgba(20, 87, 99, .72), rgba(8, 51, 68, .82));
  border-color: rgba(151, 229, 222, .22);
}
#auth-screen .abar .mid,
#auth-screen .abar .right,
#auth-screen .abar .right a { color: #d3eef1 !important; }

/* Criação de personagem e carregamento seguem a mesma direção visual. */
#create-char-screen,
#boot-overlay {
  background: #dff5ff url('/assets/brand/ultimate-poke-idle/login-hero-eeveelutions.webp') center / cover no-repeat;
}
#create-char-screen .scrim {
  background: linear-gradient(0deg, rgba(7, 48, 61, .78), rgba(7, 48, 61, .18)), radial-gradient(72% 72% at 50% 44%, transparent, rgba(8, 63, 77, .42));
}
#create-char-screen .cc-logo { width: 290px; }
.char-box {
  background: linear-gradient(155deg, rgba(11, 66, 82, .93), rgba(9, 42, 63, .94));
  border-color: rgba(121, 221, 196, .42);
  box-shadow: 0 30px 70px rgba(3, 39, 54, .46), inset 0 1px 0 rgba(207, 255, 245, .22), 0 0 55px -22px rgba(101, 185, 233, .72);
}
.char-header { color: #8fe4ff; }
.char-header svg { filter: drop-shadow(0 2px 5px rgba(101,185,233,.5)); }
.char-sub,
.char-hint { color: #b9dce4; }
.char-field .ic { color: #9bc8d0; }
.char-input { border-color: rgba(174,232,235,.28); background: rgba(239,253,255,.09); }
.char-input::placeholder { color: #a8c8cf; }
.char-input:focus { border-color: var(--upi-blue-light); box-shadow: 0 0 0 3px rgba(101,185,233,.23); }
.char-box .auth-btn {
  background: linear-gradient(135deg, var(--upi-blue), #38a8cd 54%, var(--upi-green));
  box-shadow: 0 12px 26px rgba(30,135,169,.35), inset 0 1px 0 rgba(255,255,255,.26);
}
#boot-overlay::after {
  background: radial-gradient(72% 72% at 50% 52%, transparent 28%, rgba(5,53,68,.54)), linear-gradient(0deg, rgba(4,43,59,.86), rgba(7,64,78,.18) 52%, rgba(5,55,70,.28));
}
#boot-overlay .boot-embers i {
  background: radial-gradient(circle, #efffff 12%, #6bd8d0 52%, transparent 74%);
  box-shadow: 0 0 12px 3px rgba(94, 208, 211, .48);
}
#boot-gif {
  width: 180px;
  height: 180px;
  object-fit: contain;
  animation: upi-mark-float 1.8s ease-in-out infinite;
  filter: drop-shadow(0 12px 30px rgba(41, 153, 181, .5));
}
#boot-title { color: #d9fff5; text-shadow: 0 2px 12px rgba(0,0,0,.55), 2px 2px 0 #17647d; }
@keyframes upi-mark-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.035); } }

/* Launcher/dashboard: base clara, cards brancos e acentos azul + verde. */
#dashboard-screen {
  --bg: #eaf7ff;
  --bg2: #dcf3ed;
  --panel: #f7fcff;
  --panel2: #edf9fb;
  --card: #ffffff;
  --line: rgba(43, 102, 129, .16);
  --line2: rgba(43, 102, 129, .28);
  --red: #3b82d0;
  --red2: #35b779;
  --text: #17324d;
  --muted: #5e7485;
  --muted2: #7a91a0;
  --green: #28ad72;
  --blue: #3b82d0;
  background: var(--bg);
}
#dashboard-screen ::-webkit-scrollbar-thumb { background: #bad9df; }
#dashboard-screen .sidebar {
  background: linear-gradient(180deg, #e1f7f0, #d9eef8);
  box-shadow: 10px 0 36px rgba(55,111,133,.08);
}
#dashboard-screen .sb-logo { width: 170px; margin-bottom: 22px; }
#dashboard-screen .nav a { color: #506e80; }
#dashboard-screen .nav a:hover { background: rgba(59,130,208,.09); color: var(--upi-ink); }
#dashboard-screen .nav a.on {
  background: linear-gradient(135deg, var(--upi-blue), #45a8cf 52%, var(--upi-green));
  color: #fff;
  box-shadow: 0 8px 20px -7px rgba(45,139,171,.55);
}
#dashboard-screen .sb-event,
#dashboard-screen .mon,
#dashboard-screen .panel,
#dashboard-screen .pcard,
#dashboard-screen .rk { box-shadow: 0 10px 26px rgba(47,105,126,.07); }
#dashboard-screen .sb-event .pic { background-color: #d8f1f5; }
#dashboard-screen .sb-event .btn { color: #366278; border-color: rgba(59,130,208,.25); }
#dashboard-screen .sb-event .btn:hover { color: #1c5972; border-color: var(--upi-green); background: rgba(53,183,121,.09); }
#dashboard-screen .topbar {
  background: rgba(247,252,255,.94);
  box-shadow: 0 8px 28px rgba(55,111,133,.06);
}
#dashboard-screen .av,
#dashboard-screen .pcard .av2 { border-color: var(--upi-green); background-color: #dceff3; }
#dashboard-screen .cur,
#dashboard-screen .iconbtn { color: #456b7e; background: rgba(255,255,255,.68); }
#dashboard-screen .iconbtn:hover { color: var(--upi-blue); background: #fff; }
#dashboard-screen .hero { border-color: rgba(43,102,129,.22); box-shadow: 0 18px 38px rgba(27,91,113,.17); }
#dashboard-screen .hero .bg {
  background: #bfeafa url('/assets/brand/ultimate-poke-idle/dashboard-hero-eeveelutions-user.webp') center 62% / cover no-repeat;
}
#dashboard-screen .hero .sc {
  background: linear-gradient(90deg, rgba(7,48,66,.95) 0%, rgba(8,65,80,.82) 36%, rgba(7,82,89,.26) 68%, transparent 100%), linear-gradient(0deg, rgba(5,49,67,.72), transparent 62%);
}
#dashboard-screen .rank .l1,
#dashboard-screen .hero p { color: #d8eef2; }
#dashboard-screen .rank .l2 { color: #dffcff; }
#dashboard-screen .rank .l2 svg { color: #7de0ca; }
#dashboard-screen .hero h1 { color: #fff; }
#dashboard-screen .hero p b { color: #83edce; }
#dashboard-screen .hero .sub2 { color: #b9dce4; }
#dashboard-screen .play {
  background: linear-gradient(135deg, var(--upi-blue), #42a7cb 55%, var(--upi-green));
  box-shadow: 0 12px 28px -6px rgba(35,135,164,.58);
}
#dashboard-screen .srv { color: #cce5e9; }
#dashboard-screen .srv b { color: #fff; }
#dashboard-screen .mon .top,
#dashboard-screen .pstats .s { background: radial-gradient(circle at 50% 60%, rgba(101,185,233,.14), transparent 70%); }
#dashboard-screen .mon .lab b,
#dashboard-screen .act p,
#dashboard-screen .act p b { color: var(--upi-ink); }
#dashboard-screen .news .ic,
#dashboard-screen .act .ic,
#dashboard-screen .erow .ic { background: #eaf7fa; }
#dashboard-screen .news .ic.r { box-shadow: inset 0 0 0 1px rgba(53,183,121,.28); }
#dashboard-screen .news .nv { background: linear-gradient(135deg, var(--upi-blue), var(--upi-green)); }
#dashboard-screen .rightcol { background: #f2fbfd; }
#dashboard-screen .xpbar,
#dashboard-screen .bar { background: #d9e9ed; }
#dashboard-screen .morelink,
#dashboard-screen .section-h a { color: var(--upi-green); }
#dashboard-screen .sb-admin a:hover { background: rgba(59,130,208,.09); color: #2d718c; }
#dashboard-screen .nav-backdrop { background: rgba(13,53,68,.58); }

/* Ações neutras de conta acompanham a marca; mensagens de erro continuam vermelhas. */
#fp-ov button,
#ac-ov .ac-go,
#rdm-ov .go {
  background: linear-gradient(135deg, var(--upi-blue), var(--upi-green));
}

@media (max-width: 820px) {
  #auth-screen { background-position: 62% center; }
  #auth-screen .scrim { background: linear-gradient(0deg, rgba(6,45,61,.97) 38%, rgba(7,63,77,.72) 68%, rgba(8,81,89,.12)); }
  #auth-screen .ip-logo { width: 280px; }
}

/* --------------------------------------------------------------------------
   Auth sprite skin v3
   As placas abaixo sao imagens originais em pixel art. O border-image mantem
   os cantos nitidos quando login e cadastro usam alturas diferentes.
   -------------------------------------------------------------------------- */
#auth-screen {
  --upi-sprite-panel: url('/assets/ui/auth-ornaments/panel-ornament.png');
  --upi-sprite-field: url('/assets/ui/auth-ornaments/field-ornament.png');
  --upi-sprite-primary: url('/assets/ui/auth-ornaments/button-primary-ornament.png');
  --upi-sprite-secondary: url('/assets/ui/auth-ornaments/button-secondary-ornament.png');
  --upi-sprite-language: url('/assets/ui/auth-ornaments/language-ornament.png');
  --upi-sprite-status: url('/assets/ui/auth-ornaments/status-ornament.png');
  font-family: Aptos, "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-kerning: normal;
  font-optical-sizing: auto;
}

#auth-screen .ip-panel {
  width: min(92vw, 430px);
  transform: translateY(-12px);
}

#auth-screen .card {
  background: transparent;
  border: solid transparent;
  border-width: 45px 32px 40px;
  border-image: var(--upi-sprite-panel) 52 stretch;
  border-radius: 0;
  padding: 8px 13px 10px;
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(3, 44, 63, .42));
  image-rendering: pixelated;
}

#auth-screen .hd {
  gap: 9px;
  margin: -2px 0 5px;
}

#auth-screen .hd .pb { display: none; }
#auth-screen .hd::before {
  content: "";
  width: 44px;
  height: 28px;
  flex: 0 0 44px;
  background: url('/assets/ui/auth-ornaments/crest-ornament.png') center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0, 8, 31, .8));
}

#auth-screen .hd h1 {
  color: #f8e7a5;
  font-family: inherit;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.012em;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(3, 35, 51, .72);
}

#auth-screen .hd2 {
  color: #c4e8ee;
  margin: 0 2px 13px;
  font-size: 12px;
}

#auth-screen .field {
  height: 58px;
  margin-bottom: 7px;
  background: transparent;
  border: solid transparent;
  border-width: 13px 21px;
  border-image: var(--upi-sprite-field) 42 55 stretch;
  image-rendering: pixelated;
  transition: filter .12s, transform .12s;
}

#auth-screen .field:focus-within {
  filter: brightness(1.17) drop-shadow(0 0 6px rgba(75, 225, 216, .46));
  transform: translateX(2px);
}

#auth-screen .field > .ic { display: none; }
#auth-screen .field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 52px 0 61px;
  color: #f3fbff;
  font-size: 13px;
  box-shadow: none;
}

#auth-screen .field input:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#auth-screen .field input::placeholder { color: #a9cbd7; }
#auth-screen .eye {
  right: 18px;
  z-index: 2;
  color: #8be4e2;
  padding: 3px;
  filter: drop-shadow(1px 1px 0 #061a39);
}
#auth-screen .eye:hover { color: #fff1a9; }

#auth-screen .row {
  margin: 2px 4px 11px;
  color: #c8e6ec;
}
#auth-screen .row label { color: #c8e6ec; }
#auth-screen .row a { color: #7ee1c6; }
#auth-screen .row input {
  border: 2px solid #74dbe0;
  border-radius: 0;
  box-shadow: 2px 2px 0 #061a39;
}
#auth-screen .row input:checked {
  background: #49c68f;
  border-color: #b9ffe5;
}

#auth-screen .btn {
  min-height: 60px;
  border: solid transparent;
  border-radius: 0;
  padding: 0 36px;
  background: transparent;
  color: #f7fbff;
  font-family: inherit;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: .045em;
  text-shadow: 0 1px 4px rgba(2, 26, 40, .8);
  box-shadow: none;
  image-rendering: pixelated;
  transition: filter .12s, transform .08s;
}

#auth-screen .btn svg { display: none; }
#auth-screen .btn.enter {
  border-width: 14px 18px;
  border-image: var(--upi-sprite-primary) 58 51 stretch;
  background: transparent;
  box-shadow: none;
}
#auth-screen .btn.create {
  border-width: 12px 17px;
  border-image: var(--upi-sprite-secondary) 42 44 stretch;
  background: transparent;
  color: #e8fbff;
}
#auth-screen .btn.enter:hover,
#auth-screen .btn.create:hover {
  color: #fff8c3;
  background: transparent;
  border-color: transparent;
  filter: brightness(1.18) drop-shadow(0 5px 0 rgba(1, 16, 42, .72));
}
#auth-screen .btn.enter:active,
#auth-screen .btn.create:active {
  transform: translateY(3px);
  filter: brightness(.98);
}
#auth-screen .btn:disabled { filter: grayscale(.55); }

#auth-screen .divx {
  gap: 9px;
  margin: 8px 7px;
  color: #92cdd8;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: .12em;
}
#auth-screen .divx::before,
#auth-screen .divx::after {
  height: 2px;
  background: repeating-linear-gradient(90deg, #56cbd1 0 5px, transparent 5px 9px);
  opacity: .58;
}
#auth-screen .auth-err {
  color: #ffb0a0;
  margin-top: 5px;
  text-shadow: 1px 1px 0 #2b0810;
}

#auth-screen .lang {
  width: 142px;
  height: 50px;
  justify-content: center;
  gap: 0;
  padding: 0 28px;
  background: var(--upi-sprite-language) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  color: #f0fbff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .025em;
  text-shadow: 0 1px 4px rgba(2, 32, 46, .72);
  box-shadow: none;
  backdrop-filter: none;
  filter: drop-shadow(0 7px 8px rgba(1, 22, 47, .52));
  image-rendering: pixelated;
}
#auth-screen .lang svg { display: none; }
#auth-screen .lang:hover { filter: brightness(1.16) drop-shadow(0 7px 8px rgba(1, 22, 47, .52)); }

#auth-screen .abar {
  left: clamp(16px, 2vw, 30px);
  right: clamp(16px, 2vw, 30px);
  bottom: clamp(14px, 2vh, 24px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
  font-family: inherit;
}

#auth-screen .abar .mid,
#auth-screen .abar .right {
  position: relative;
  min-height: 58px;
  width: auto;
  min-width: 250px;
  padding: 8px 14px 8px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #244e61;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,250,250,.86));
  border: 1px solid rgba(91, 183, 190, .28);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(3, 52, 71, .16), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
  pointer-events: auto;
}

#auth-screen .abar .mid { min-width: 260px; }
#auth-screen .abar .right { color: #315d6c; }
#auth-screen .abar-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 7px rgba(20, 106, 132, .2));
}
#auth-screen .abar-copy,
#auth-screen .abar .right a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#auth-screen .abar small {
  color: #7594a2;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#auth-screen .abar-state { display: flex; align-items: center; gap: 7px; min-width: 0; }
#auth-screen .abar #auth-online {
  color: #1f5262;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
#auth-screen .abar .right a {
  color: #1d5367 !important;
  text-decoration: none !important;
}
#auth-screen .abar .right a strong {
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1.3;
}
#auth-screen .abar .right a:hover { color: #1b9f78 !important; }
#auth-screen .abar-brand {
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(70, 135, 153, .18);
  color: #7895a0;
  font-size: 11.5px;
  white-space: nowrap;
}
#auth-screen .abar .dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 0;
  border-radius: 50%;
  background: #37c889;
  box-shadow: 0 0 0 4px rgba(55, 200, 137, .12), 0 0 10px rgba(55, 200, 137, .52);
  transform: none;
}

@media (max-width: 820px) {
  #auth-screen .ip-panel {
    width: min(94vw, 414px);
    transform: translateY(-8px);
  }
  #auth-screen .card {
    border-width: 40px 25px 35px;
    padding: 6px 8px 9px;
  }
  #auth-screen .lang {
    top: 12px;
    right: 10px;
    width: 122px;
    height: 43px;
    font-size: 11px;
  }
  #auth-screen .abar { left: 10px; right: 10px; bottom: 9px; justify-content: center; }
  #auth-screen .abar .mid { width: min(94vw, 390px); min-width: 0; min-height: 54px; }
  #auth-screen .abar .right { display: none; }
}

@media (max-width: 460px) {
  #auth-screen .ip-logo { width: 235px; }
  #auth-screen .tag { margin-bottom: 9px; font-size: 10.5px; }
  #auth-screen .hd::before { width: 36px; flex-basis: 36px; }
  #auth-screen .hd h1 { font-size: 16px; }
  #auth-screen .hd2 { font-size: 11px; }
  #auth-screen .field { height: 53px; }
  #auth-screen .field input { padding-left: 54px; }
  #auth-screen .btn { min-height: 55px; font-size: 12px; }
}

@media (max-height: 720px) {
  #auth-screen .ip-panel {
    justify-content: flex-start;
    padding: 14px 0 70px;
    overflow-y: auto;
    transform: none;
  }
  #auth-screen .ip-logo { width: 220px; }
  #auth-screen .tag { margin-bottom: 7px; }
}