:root {
  color-scheme: dark;
  --bg: #07080b; --panel: #11141c; --panel2: #171b26; --line: #283044; --text: #e6e9ef; --muted: #8a93a6;
  --accent: #ffb347; --pl: #e0474c; --ki: #3fa9f5; --fat: #b98cff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 Tahoma, Verdana, sans-serif; overflow: hidden; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
button { cursor: pointer; }
button:hover { border-color: #3d4865; }
button.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: bold; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.err { color: #ff6b6b; min-height: 1.4em; }
.center { text-align: center; }

.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: radial-gradient(ellipse at top, #1b2233 0%, var(--bg) 70%); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 22px; width: min(360px, 100%); display: grid; gap: 12px; }
.card.wide { width: min(560px, 100%); }
.card.create { width: min(760px, 100%); }
h1 { margin: 0; font-size: 22px; color: var(--accent); letter-spacing: .5px; }
h3 { margin: 6px 0 4px; font-size: 13px; color: var(--accent); }

#slots { display: grid; gap: 10px; }
.slot { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.slot canvas { width: 64px; height: 64px; image-rendering: pixelated; background: #0b0d12; border-radius: 4px; }
.slot .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.create-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 640px) { .create-grid { grid-template-columns: 1fr; } }
.preview-col { display: grid; gap: 10px; justify-items: center; align-content: start; }
#preview { width: 192px; height: 192px; image-rendering: pixelated; background: #0b0d12; border: 1px solid var(--line); border-radius: 6px; }
.race-row, .skin-row { display: flex; align-items: center; gap: 8px; }
.race-row strong { min-width: 110px; text-align: center; color: var(--accent); }
.skin-row span { min-width: 90px; text-align: center; }
#race-stars { width: 100%; display: grid; gap: 3px; }
.star-row { display: flex; justify-content: space-between; gap: 8px; }
.star-row b { color: var(--accent); letter-spacing: 2px; }
.star-row .dim { color: #3a4256; }
#hairs { display: flex; flex-wrap: wrap; gap: 6px; }
#hairs button { display: grid; justify-items: center; gap: 2px; padding: 4px; min-width: 64px; font-size: 11px; }
#hairs button.on { border-color: var(--accent); }
#hairs canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#stat-dist { display: grid; gap: 6px; }
.dist { display: grid; grid-template-columns: 1fr 28px 30px 28px; align-items: center; gap: 6px; }
.dist b { text-align: center; }
.dist button { padding: 2px 0; }
.btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* diálogos */
#dialog { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 10; padding: 16px; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; width: min(380px, 100%); display: grid; gap: 10px; max-height: 90vh; overflow: auto; }
.dialog h3 { margin: 0; }
.dialog .list { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.dialog .list button { text-align: left; }
.dialog .list button.has-icon { display: flex; align-items: center; gap: 8px; }
.dialog .list button.has-icon img { width: 32px; height: 32px; flex: none; border-radius: 5px; box-shadow: 0 0 0 1px rgba(232,190,110,.55), 0 1px 3px rgba(0,0,0,.6); }

.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* refazer atributos (diálogo) */
.dialog .statdist { display: grid; gap: 4px; margin: 8px 0; }
.dialog .statdist .srow { display: grid; grid-template-columns: 1fr 28px 60px 28px; align-items: center; gap: 6px; }
.dialog .statdist .srow b { text-align: center; }


/* Monitor de performance (F10) */
#perf-monitor {
  position:absolute;
  /* Ao lado do painel do jogador; agora é filho da HUD, então nunca fica atrás dela. */
  top:calc(var(--u, 1px) * 62);
  left:calc(var(--u, 1px) * 680);
  right:auto;
  z-index:8;
  margin:0;
  min-width:190px;
  padding:6px 8px;
  pointer-events:none;
  color:#e7f7ff;
  background:rgba(3,8,15,.18);
  border:1px solid rgba(150,215,255,.10);
  border-radius:6px;
  box-shadow:none;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  font:clamp(10px, calc(var(--u, 1px) * 16), 12px)/1.28 Consolas,Monaco,monospace;
  white-space:pre;
  backdrop-filter:none;
}
#perf-monitor[hidden] { display:none !important; }


/* Pulso curto de câmera em finalizações/impactos decisivos. */
#map-wrap.combat-finisher-pulse canvas {
  animation: combatFinisherPulse 320ms cubic-bezier(.2,.75,.2,1);
  transform-origin: 50% 50%;
}
@keyframes combatFinisherPulse {
  0% { transform: scale(1); }
  28% { transform: scale(1.055); }
  58% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #map-wrap.combat-finisher-pulse canvas { animation: none; }
}


/* ================================================================
   DRAGON BATTLE ONLINE — TELA DE LOGIN
   Medidas tiradas da referência em 1500x844. --p vale 1px nessa
   resolução e escala junto com a tela, mantendo a mesma composição.
   ================================================================ */
#scr-login.dbo-login {
  --p: min(0.066667vw, 0.118483vh);
  --dbo-gold: #f4cc62;
  --dbo-panel: rgba(24, 26, 30, .88);
  --dbo-panel-line: rgba(176, 138, 88, .62);
  --dbo-field: #101216;
  --dbo-field-line: #36383c;
  --dbo-text: #f2f3f5;
  --dbo-muted: #acafb5;
  display: block;
  place-items: normal;
  padding: 0;
  overflow: hidden;
  color: var(--dbo-text);
  font-family: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Roboto, sans-serif;
  background: #0b0d12 url("../assets/login/background.webp?v=3") center / cover no-repeat;
}
#scr-login * { box-sizing: border-box; }

/* barra do topo */
#scr-login .dbo-login-topbar {
  position: absolute; inset: calc(14 * var(--p)) calc(24 * var(--p)) auto;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
#scr-login .dbo-server-badge,
#scr-login .dbo-lang {
  pointer-events: auto;
  height: calc(38 * var(--p));
  display: flex; align-items: center;
  background: rgba(19, 24, 31, .82);
  border: 1px solid rgba(160, 150, 120, .55);
  border-radius: calc(6 * var(--p));
  box-shadow: 0 calc(4 * var(--p)) calc(14 * var(--p)) rgba(0, 0, 0, .35);
}
#scr-login .dbo-server-badge {
  padding: 0 calc(14 * var(--p));
  gap: calc(10 * var(--p));
  font-size: calc(12 * var(--p)); font-weight: 600; white-space: nowrap;
}
#scr-login .dbo-server-badge i {
  width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%;
  background: #3be26a; box-shadow: 0 0 calc(6 * var(--p)) #3be26a;
}
#scr-login .dbo-server-badge small {
  font-size: calc(11 * var(--p)); font-weight: 700; color: #d8b85a;
  padding-left: calc(10 * var(--p)); border-left: 1px solid rgba(255, 255, 255, .18);
}
#scr-login .dbo-lang {
  position: relative;
  width: calc(131 * var(--p));
  padding: 0 calc(10 * var(--p)) 0 calc(14 * var(--p));
  gap: calc(8 * var(--p));
}
#scr-login .dbo-lang svg { width: calc(15 * var(--p)); height: calc(15 * var(--p)); flex: none; }
#scr-login .dbo-lang select {
  appearance: none; -webkit-appearance: none;
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0 calc(18 * var(--p)) 0 0;
  font-size: calc(12 * var(--p)); font-weight: 600; line-height: 1; color: var(--dbo-text); cursor: pointer;
}
#scr-login .dbo-lang select:focus { outline: none; }
#scr-login .dbo-lang select option { background: #16181c; color: var(--dbo-text); }
#scr-login .dbo-lang .dbo-chevron {
  position: absolute; right: calc(12 * var(--p)); pointer-events: none;
  width: calc(10 * var(--p)); height: calc(10 * var(--p));
}

/* painéis */
#scr-login .dbo-login-layout {
  position: absolute; left: 50%; top: calc(88 * var(--p));
  transform: translateX(-50%);
  display: grid; grid-template-columns: calc(524 * var(--p)) calc(378 * var(--p));
  column-gap: calc(133 * var(--p));
  align-items: stretch;
}
#scr-login .dbo-login-hero,
#scr-login .dbo-login-card {
  height: calc(417 * var(--p));
  background: var(--dbo-panel);
  border: 1px solid var(--dbo-panel-line);
  border-radius: calc(6 * var(--p));
  box-shadow: 0 calc(10 * var(--p)) calc(40 * var(--p)) rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(2px);
}

/* painel da esquerda */
#scr-login .dbo-login-hero { padding: calc(20 * var(--p)) calc(28 * var(--p)) 0; }
#scr-login .dbo-login-logo-energy {
  position: relative;
  width: calc(486 * var(--p)); height: calc(162 * var(--p));
  margin: 0 0 0 calc(-7 * var(--p));
  isolation: isolate;
}
#scr-login .dbo-login-logo {
  position: relative; z-index: 5;
  width: 100%; height: 100%;
  margin: 0;
  background: url("../assets/login/logo.webp?v=3") center / contain no-repeat;
  filter:
    drop-shadow(0 calc(4 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, .55))
    drop-shadow(0 0 calc(6 * var(--p)) rgba(255, 190, 68, .34))
    drop-shadow(0 0 calc(13 * var(--p)) rgba(255, 86, 20, .20))
    drop-shadow(0 0 calc(14 * var(--p)) rgba(50, 165, 255, .18));
  animation: dboLoginLogoBreathe 3.8s ease-in-out infinite;
}
#scr-login .dbo-login-logo-glow,
#scr-login .dbo-login-logo-ring {
  position: absolute; pointer-events: none;
}
#scr-login .dbo-login-logo-glow {
  z-index: 1; inset: 14% 1% 5%; border-radius: 48%; mix-blend-mode: screen;
}
#scr-login .dbo-login-logo-glow-gold {
  background: radial-gradient(ellipse at 47% 44%, rgba(255, 235, 137, .34), rgba(255, 137, 28, .20) 34%, rgba(255, 62, 11, .07) 58%, transparent 75%);
  filter: blur(calc(24 * var(--p)));
  animation: dboLoginGlowGold 3.2s ease-in-out infinite;
}
#scr-login .dbo-login-logo-glow-blue {
  inset: 38% 2% -1%;
  background: radial-gradient(ellipse at 50% 50%, rgba(105, 220, 255, .28), rgba(31, 125, 255, .17) 42%, transparent 74%);
  filter: blur(calc(21 * var(--p)));
  animation: dboLoginGlowBlue 4s ease-in-out -1.1s infinite;
}
#scr-login .dbo-login-logo-ring {
  z-index: 2; inset: 5% -1% 2%; border-radius: 48% 52% 49% 51%;
  padding: calc(1.1 * var(--p));
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 205, 78, .95) 12%, transparent 18% 37%, rgba(76, 194, 255, .92) 43%, transparent 50% 68%, rgba(255, 113, 29, .86) 73%, transparent 80% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 calc(5 * var(--p)) rgba(255, 164, 55, .42));
  opacity: .72;
}
#scr-login .dbo-login-logo-ring-a { animation: dboLoginRingSpin 13s linear infinite; }
#scr-login .dbo-login-logo-ring-b {
  inset: 9% 3% 5%; opacity: .43;
  filter: drop-shadow(0 0 calc(7 * var(--p)) rgba(67, 181, 255, .45));
  animation: dboLoginRingSpinReverse 17s linear infinite;
}
#scr-login .dbo-login-logo-spark {
  --ls: calc(3.2 * var(--p));
  position: absolute; z-index: 7;
  width: var(--ls); height: var(--ls); border-radius: 50%;
  background: #fff8cf;
  box-shadow: 0 0 calc(4 * var(--p)) #fff, 0 0 calc(9 * var(--p)) rgba(255, 186, 55, .95), 0 0 calc(18 * var(--p)) rgba(55, 166, 255, .52);
  opacity: 0; pointer-events: none;
  animation: dboLoginLogoSpark 3.1s ease-in-out infinite;
}
#scr-login .dbo-login-logo-spark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--ls) * 4.2); height: calc(1 * var(--p));
  transform: translate(-50%, -50%) rotate(var(--lr, 0deg));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
#scr-login .dbo-login-logo-spark.s1 { left: 5%; top: 39%; --lr:-28deg; animation-delay:-.2s; }
#scr-login .dbo-login-logo-spark.s2 { left: 15%; top: 19%; --lr:22deg; animation-delay:-1.2s; }
#scr-login .dbo-login-logo-spark.s3 { left: 28%; top: 70%; --lr:-55deg; animation-delay:-2s; }
#scr-login .dbo-login-logo-spark.s4 { left: 43%; top: 12%; --lr:42deg; animation-delay:-.7s; }
#scr-login .dbo-login-logo-spark.s5 { left: 58%; top: 75%; --lr:18deg; animation-delay:-1.7s; }
#scr-login .dbo-login-logo-spark.s6 { left: 72%; top: 21%; --lr:-36deg; animation-delay:-2.5s; }
#scr-login .dbo-login-logo-spark.s7 { left: 86%; top: 62%; --lr:64deg; animation-delay:-1s; }
#scr-login .dbo-login-logo-spark.s8 { left: 95%; top: 35%; --lr:-12deg; animation-delay:-2.8s; }

@keyframes dboLoginLogoBreathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
@keyframes dboLoginGlowGold {
  0%,100% { opacity:.56; transform:scale(.96); }
  50% { opacity:1; transform:scale(1.055); }
}
@keyframes dboLoginGlowBlue {
  0%,100% { opacity:.46; transform:scale(1.01); }
  50% { opacity:.88; transform:scale(1.07); }
}
@keyframes dboLoginRingSpin { to { transform:rotate(360deg); } }
@keyframes dboLoginRingSpinReverse { to { transform:rotate(-360deg); } }
@keyframes dboLoginLogoSpark {
  0%,100% { opacity:0; transform:translate3d(0,0,0) scale(.35); }
  17% { opacity:.95; }
  42% { opacity:.34; transform:translate3d(calc(8 * var(--p)), calc(-7 * var(--p)), 0) scale(1.15); }
  68% { opacity:.86; }
  88% { opacity:0; transform:translate3d(calc(14 * var(--p)), calc(-12 * var(--p)), 0) scale(.55); }
}
#scr-login .dbo-login-copy h1 {
  margin: calc(16 * var(--p)) 0 0;
  font-size: calc(39 * var(--p)); line-height: 1.1; font-weight: 700; letter-spacing: -.005em;
  color: #fff; text-shadow: 0 2px calc(8 * var(--p)) rgba(0, 0, 0, .5);
}
#scr-login .dbo-login-copy h1 strong { color: var(--dbo-gold); font-weight: 700; }
#scr-login .dbo-login-copy p {
  margin: calc(16 * var(--p)) 0 0; max-width: calc(470 * var(--p));
  font-size: calc(14.5 * var(--p)); line-height: 1.45; color: #d6d8dc;
}
#scr-login .dbo-login-steps {
  display: flex; align-items: center; gap: calc(26 * var(--p));
  margin-top: calc(22 * var(--p));
}
#scr-login .dbo-login-steps span { display: flex; align-items: center; gap: calc(14 * var(--p)); }
#scr-login .dbo-login-steps b {
  display: grid; place-items: center;
  width: calc(31 * var(--p)); height: calc(31 * var(--p)); border-radius: 50%;
  border: calc(1.6 * var(--p)) solid #c9a24a; color: var(--dbo-gold);
  font-size: calc(13 * var(--p)); font-weight: 600;
}
#scr-login .dbo-login-steps em { font-style: normal; font-size: calc(11.5 * var(--p)); font-weight: 600; color: #eceef1; }

/* painel de entrada */
#scr-login .dbo-login-card {
  display: flex; flex-direction: column;
  padding: calc(28 * var(--p)) calc(30 * var(--p)) 0 calc(35 * var(--p));
}
#scr-login .dbo-login-card-head h2 { margin: 0; font-size: calc(26 * var(--p)); line-height: 1.2; font-weight: 700; color: #fff; }
#scr-login .dbo-login-card-head p { margin: calc(9 * var(--p)) 0 0; font-size: calc(12.5 * var(--p)); color: var(--dbo-muted); }
#scr-login .dbo-field { display: block; margin-top: calc(22 * var(--p)); }
#scr-login .dbo-field + .dbo-field { margin-top: calc(11 * var(--p)); }
#scr-login .dbo-field > span:first-child {
  display: block; margin-bottom: calc(7 * var(--p));
  font-size: calc(11.5 * var(--p)); font-weight: 700; color: #eceef1;
}
#scr-login .dbo-field input {
  display: block; width: 100%; height: calc(42 * var(--p));
  padding: 0 calc(14 * var(--p));
  background: var(--dbo-field); border: 1px solid var(--dbo-field-line); border-radius: calc(4 * var(--p));
  font-size: calc(13.5 * var(--p)); color: #f4f5f7;
}
#scr-login .dbo-field input::placeholder { color: #5f636b; }
#scr-login .dbo-field input:focus { outline: none; border-color: #b8913f; box-shadow: 0 0 0 1px rgba(244, 204, 98, .25); }
#scr-login .dbo-password-wrap { position: relative; display: block; }
#scr-login .dbo-password-wrap input { padding-right: calc(46 * var(--p)); letter-spacing: .08em; }
#scr-login .dbo-show-pass {
  position: absolute; right: calc(6 * var(--p)); top: 50%; transform: translateY(-50%);
  width: calc(32 * var(--p)); height: calc(32 * var(--p)); padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; color: #e6e8eb; cursor: pointer;
}
#scr-login .dbo-show-pass svg { width: calc(17 * var(--p)); height: calc(17 * var(--p)); }
#scr-login .dbo-show-pass .eye-off { display: none; }
#scr-login .dbo-show-pass.is-on .eye-on { display: none; }
#scr-login .dbo-show-pass.is-on .eye-off { display: block; }
#scr-login .dbo-show-pass:hover { color: var(--dbo-gold); }
#scr-login .dbo-remember {
  display: flex; align-items: center; gap: calc(12 * var(--p));
  margin-top: calc(15 * var(--p));
  font-size: calc(11 * var(--p)); font-weight: 600; color: #eceef1; cursor: pointer;
}
#scr-login .dbo-remember input {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0;
  width: calc(17 * var(--p)); height: calc(17 * var(--p));
  border: 1px solid #6b6f77; border-radius: calc(3 * var(--p)); background: var(--dbo-field);
  display: grid; place-items: center; cursor: pointer;
}
#scr-login .dbo-remember input:checked { background: #f2c548; border-color: #f2c548; }
#scr-login .dbo-remember input:checked::after {
  content: ""; width: 28%; height: 52%; margin-top: -12%;
  border: solid #1b1608; border-width: 0 calc(2 * var(--p)) calc(2 * var(--p)) 0; transform: rotate(45deg);
}
#scr-login .dbo-login-submit {
  width: 100%; height: calc(38 * var(--p)); margin-top: calc(14 * var(--p)); padding: 0;
  background: linear-gradient(180deg, #efc75b 0%, #e5b74a 50%, #d9a43c 100%);
  border: 1px solid #c8962f; border-radius: calc(4 * var(--p));
  font-size: calc(13 * var(--p)); font-weight: 600; color: #17130a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
#scr-login .dbo-login-submit:hover { filter: brightness(1.06); }
#scr-login .dbo-login-secondary {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--p));
  margin-top: calc(14 * var(--p));
}
#scr-login .dbo-login-secondary button {
  height: calc(37 * var(--p)); padding: 0;
  background: #24252a; border: 1px solid #36373b; border-radius: calc(4 * var(--p));
  font-size: calc(11.5 * var(--p)); font-weight: 600; color: #eceef1;
}
#scr-login .dbo-login-secondary button:hover { border-color: #8b7240; }
#scr-login .err {
  min-height: 0; margin-top: calc(8 * var(--p));
  font-size: calc(11.5 * var(--p)); line-height: 1.3; color: #ff7a7a;
}

/* celular e telas estreitas: os painéis empilham com tamanho normal */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  #scr-login.dbo-login { --p: 1px; overflow-y: auto; background-position: 50% 70%; }
  #scr-login .dbo-login-topbar { position: static; padding: 14px 16px 0; }
  #scr-login .dbo-login-layout {
    position: static; transform: none;
    grid-template-columns: minmax(0, 480px); justify-content: center;
    row-gap: 16px; padding: 16px 16px 32px;
  }
  #scr-login .dbo-login-hero, #scr-login .dbo-login-card { height: auto; }
  #scr-login .dbo-login-hero { padding-bottom: 22px; }
  #scr-login .dbo-login-card { padding-bottom: 24px; }
  #scr-login .dbo-login-logo-energy { width: 100%; height: auto; aspect-ratio: 3 / 1; margin: 0; }
  #scr-login .dbo-login-logo { width: 100%; height: 100%; margin: 0; }
  #scr-login .dbo-login-copy h1 { font-size: 30px; }
  #scr-login .dbo-login-steps { flex-wrap: wrap; gap: 12px 20px; }
}

/* ================================================================
   SELEÇÃO DE PERSONAGEM — personagem grande no centro, lista à direita
   ================================================================ */
#scr-slots.char-select {
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  color: #ece6da;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background:
    linear-gradient(180deg, rgba(5, 7, 11, .55), rgba(5, 7, 11, .82) 70%, rgba(5, 7, 11, .95)),
    #0b0d12 url("../assets/login/background.webp?v=3") center / cover no-repeat;
}
#scr-slots.char-select[hidden] { display: none; }
#scr-slots .cs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 32px 10px;
}
#scr-slots .cs-top h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #f3dfaa; text-shadow: 0 2px 10px #000; }
#scr-slots .cs-top p { margin: 4px 0 0; color: #b3ab9c; font-size: 13px; }
#scr-slots #cs-logout {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(217, 184, 116, .4);
  border-radius: 2px;
  color: #d9b874;
  padding: 8px 16px;
}
#scr-slots #cs-logout:hover { border-color: #f3dfaa; color: #fff; }
#scr-slots .cs-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 360px);
  gap: 24px;
  padding: 10px 32px 20px;
  min-height: 0;
}
#scr-slots .cs-stage { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: end; min-height: 0; }
#scr-slots .cs-preview-wrap {
  position: relative;
  display: grid;
  place-items: end center;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}
#scr-slots .cs-preview-wrap::before {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 320px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 184, 116, .35), rgba(217, 184, 116, .08) 60%, transparent);
  box-shadow: 0 0 0 1px rgba(217, 184, 116, .18);
}
#scr-slots #cs-preview { position: relative; width: 420px; height: 400px; max-height: 52vh; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
#scr-slots .cs-info { text-align: center; margin-top: 8px; }
#scr-slots .cs-info h2 { margin: 0; font-size: 30px; font-weight: 600; color: #fff; letter-spacing: .05em; text-shadow: 0 2px 10px #000; }
#scr-slots .cs-info p { margin: 6px 0 0; color: #b3ab9c; }
#scr-slots .cs-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#scr-slots .cs-chips span { padding: 3px 12px; border: 1px solid rgba(217, 184, 116, .3); background: rgba(0, 0, 0, .45); font-size: 12px; }
#scr-slots .cs-bp { color: #d9b874 !important; font-weight: 600; letter-spacing: .06em; }
#scr-slots .cs-actions { display: flex; gap: 10px; margin-top: 16px; }
#scr-slots .cs-play {
  min-width: 240px;
  height: 46px;
  border: 1px solid #c8962f;
  border-radius: 2px;
  background: linear-gradient(180deg, #efc75b, #d9a43c);
  color: #17130a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(239, 199, 91, .25), inset 0 1px 0 rgba(255, 255, 255, .4);
}
#scr-slots .cs-play:hover:not(:disabled) { filter: brightness(1.08); }
#scr-slots .cs-delete {
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(224, 87, 87, .45);
  border-radius: 2px;
  background: rgba(0, 0, 0, .45);
  color: #e98a8a;
}
#scr-slots .cs-delete:hover:not(:disabled) { background: rgba(224, 87, 87, .16); color: #fff; }
#scr-slots button:disabled { opacity: .4; cursor: default; }
#scr-slots .cs-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(217, 184, 116, .3);
  background: linear-gradient(180deg, rgba(14, 16, 21, .88), rgba(8, 9, 12, .92));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
#scr-slots .cs-count { color: #d9b874; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
#scr-slots #slots { display: grid; gap: 6px; overflow: auto; min-height: 0; padding-right: 2px; }
#scr-slots .cs-slot {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .2));
  color: inherit;
  text-align: left;
}
#scr-slots .cs-slot:hover { border-color: rgba(217, 184, 116, .45); }
#scr-slots .cs-slot.on { border-color: rgba(217, 184, 116, .7); border-left-color: #efc75b; background: linear-gradient(90deg, rgba(217, 184, 116, .18), rgba(0, 0, 0, .2)); }
#scr-slots .cs-slot canvas { width: 56px; height: 56px; image-rendering: pixelated; background: radial-gradient(circle at 50% 70%, rgba(217, 184, 116, .16), rgba(0, 0, 0, .55)); border: 1px solid rgba(217, 184, 116, .25); }
#scr-slots .cs-slot b { display: block; font-size: 14px; color: #fff; }
#scr-slots .cs-slot small { display: block; color: #b3ab9c; font-size: 12px; }
#scr-slots .cs-slot em { display: block; font-style: normal; color: #d9b874; font-size: 11px; margin-top: 2px; }
#scr-slots .cs-slot.empty { opacity: .75; }
#scr-slots .cs-slot.empty:hover { opacity: 1; }
#scr-slots .cs-plus { display: grid; place-items: center; width: 56px; height: 56px; border: 1px dashed rgba(217, 184, 116, .4); color: #d9b874; font-size: 26px; }
#scr-slots #slots-err { text-align: center; padding: 0 0 12px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  #scr-slots.char-select { overflow-y: auto; }
  #scr-slots .cs-top { padding: 16px; }
  #scr-slots .cs-layout { grid-template-columns: 1fr; padding: 0 16px 20px; }
  #scr-slots #cs-preview { width: 300px; height: 286px; }
  #scr-slots .cs-preview-wrap::before { width: 240px; }
  #scr-slots .cs-play { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #scr-login .dbo-login-logo,
  #scr-login .dbo-login-logo-glow,
  #scr-login .dbo-login-logo-ring,
  #scr-login .dbo-login-logo-spark { animation: none !important; }
  #scr-login .dbo-login-logo-spark { display: none; }
  #scr-login .dbo-login-logo-ring { opacity: .28; }
}



/* ================================================================
   CHARACTER SELECT — MOBILE / TABLET V2
   Layout próprio para touch; desktop permanece inalterado.
   ================================================================ */
@media (pointer:coarse), (max-width:900px) {
  #scr-slots.char-select{
    --cs-safe-l:max(10px,env(safe-area-inset-left));
    --cs-safe-r:max(10px,env(safe-area-inset-right));
    --cs-safe-t:max(8px,env(safe-area-inset-top));
    --cs-safe-b:max(8px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
    padding:0;
    background:
      linear-gradient(180deg,rgba(5,7,11,.50),rgba(5,7,11,.70) 56%,rgba(4,6,9,.92)),
      #0b0d12 url("../assets/login/background.webp?v=3") center/cover no-repeat;
  }

  #scr-slots .cs-top{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:58px;
    padding:var(--cs-safe-t) var(--cs-safe-r) 6px var(--cs-safe-l);
    border-bottom:1px solid rgba(217,184,116,.12);
    background:linear-gradient(180deg,rgba(4,7,11,.62),rgba(4,7,11,.10));
  }
  #scr-slots .cs-top h1{
    margin:0;
    font-size:clamp(17px,4.4vw,23px);
    line-height:1.05;
    letter-spacing:.10em;
    white-space:nowrap;
  }
  #scr-slots .cs-top p{
    margin:3px 0 0;
    max-width:64vw;
    font-size:9px;
    line-height:1.2;
    color:#b8b0a1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #scr-slots #cs-logout{
    min-height:36px;
    padding:0 12px;
    border-radius:7px;
    background:rgba(7,9,13,.56);
    font-size:10px;
    white-space:nowrap;
  }

  #scr-slots .cs-layout{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:0;
    min-height:0;
    padding:0;
    overflow:hidden;
  }

  #scr-slots .cs-stage{
    position:relative;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    justify-items:stretch;
    align-items:stretch;
    min-height:0;
    padding:0 var(--cs-safe-r) 0 var(--cs-safe-l);
    overflow:hidden;
  }

  #scr-slots .cs-preview-wrap{
    position:relative;
    align-self:stretch;
    display:grid;
    place-items:center;
    width:100%;
    min-height:0;
    overflow:hidden;
  }
  #scr-slots .cs-preview-wrap::before{
    bottom:12%;
    width:min(52vw,310px);
    height:52px;
    opacity:.58;
    background:radial-gradient(closest-side,rgba(239,199,91,.34),rgba(217,184,116,.08) 62%,transparent);
  }
  #scr-slots #cs-preview{
    width:min(74vw,420px);
    height:min(48vh,330px);
    max-height:none;
    object-fit:contain;
    image-rendering:pixelated;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.62));
  }

  #scr-slots .cs-info{
    position:absolute;
    left:50%;
    bottom:66px;
    z-index:4;
    transform:translateX(-50%);
    width:min(78vw,420px);
    margin:0;
    padding:8px 12px;
    border:1px solid rgba(217,184,116,.19);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(8,11,16,.62),rgba(4,7,11,.28));
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    pointer-events:none;
  }
  #scr-slots .cs-info h2{
    font-size:clamp(20px,5vw,28px);
    line-height:1;
    letter-spacing:.04em;
  }
  #scr-slots .cs-chips{
    gap:4px;
    margin-top:6px;
  }
  #scr-slots .cs-chips span{
    padding:2px 7px;
    border-radius:999px;
    font-size:9px;
    background:rgba(0,0,0,.38);
  }
  #scr-slots .cs-info p{margin:5px 0 0;font-size:10px}

  #scr-slots .cs-actions{
    position:absolute;
    left:50%;
    bottom:10px;
    z-index:6;
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:minmax(170px,1fr) 72px;
    gap:7px;
    width:min(88vw,430px);
    margin:0;
  }
  #scr-slots .cs-play,
  #scr-slots .cs-delete{
    height:44px;
    min-height:44px;
    border-radius:7px;
    font-size:11px;
  }
  #scr-slots .cs-play{
    min-width:0;
    box-shadow:0 6px 20px rgba(239,199,91,.20),inset 0 1px 0 rgba(255,255,255,.35);
  }
  #scr-slots .cs-delete{padding:0 10px}

  /* lista vira carrossel horizontal touch */
  #scr-slots .cs-list{
    position:relative;
    z-index:7;
    display:grid;
    grid-template-rows:auto 1fr;
    gap:4px;
    min-height:88px;
    padding:6px var(--cs-safe-r) var(--cs-safe-b) var(--cs-safe-l);
    border:0;
    border-top:1px solid rgba(217,184,116,.18);
    background:linear-gradient(180deg,rgba(5,8,12,.62),rgba(5,8,12,.90));
    box-shadow:0 -12px 28px rgba(0,0,0,.24);
  }
  #scr-slots .cs-count{
    margin:0;
    font-size:8px;
    line-height:12px;
    letter-spacing:.12em;
    opacity:.85;
  }
  #scr-slots #slots{
    display:flex;
    gap:6px;
    min-height:0;
    padding:0 2px 2px 0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #scr-slots #slots::-webkit-scrollbar{display:none}

  #scr-slots .cs-slot{
    flex:0 0 148px;
    scroll-snap-align:center;
    grid-template-columns:42px 1fr;
    gap:7px;
    min-height:56px;
    padding:5px 7px 5px 5px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.23));
  }
  #scr-slots .cs-slot.on{
    border-color:rgba(239,199,91,.70);
    border-left-color:#efc75b;
    background:linear-gradient(135deg,rgba(217,184,116,.20),rgba(0,0,0,.20));
    box-shadow:0 0 0 1px rgba(239,199,91,.09),0 4px 12px rgba(0,0,0,.24);
  }
  #scr-slots .cs-slot canvas,
  #scr-slots .cs-plus{
    width:42px;
    height:42px;
  }
  #scr-slots .cs-plus{font-size:22px}
  #scr-slots .cs-slot b{
    max-width:88px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
  }
  #scr-slots .cs-slot small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #scr-slots .cs-slot em{font-size:8px;margin-top:1px}
  #scr-slots #slots-err{
    position:absolute;
    left:50%;
    bottom:var(--cs-safe-b);
    transform:translateX(-50%);
    z-index:20;
    padding:5px 10px;
    pointer-events:none;
  }
}

/* Landscape baixo: pensado para celulares como 560x278 / 640x360. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:420px),
       (orientation:landscape) and (max-height:340px) and (max-width:900px) {
  #scr-slots.char-select{
    grid-template-rows:44px minmax(0,1fr);
  }
  #scr-slots .cs-top{
    min-height:44px;
    padding:max(3px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) 3px max(7px,env(safe-area-inset-left));
  }
  #scr-slots .cs-top h1{font-size:15px;letter-spacing:.09em}
  #scr-slots .cs-top p{font-size:7.5px;margin-top:1px}
  #scr-slots #cs-logout{min-height:30px;height:30px;padding:0 9px;font-size:8px}

  #scr-slots .cs-layout{
    grid-template-rows:minmax(0,1fr) 64px;
  }
  #scr-slots .cs-stage{
    padding:0 max(5px,env(safe-area-inset-right)) 0 max(5px,env(safe-area-inset-left));
  }
  #scr-slots #cs-preview{
    width:min(44vw,245px);
    height:min(44vh,150px);
  }
  #scr-slots .cs-preview-wrap{
    place-items:center;
    padding-bottom:2px;
  }
  #scr-slots .cs-preview-wrap::before{
    width:min(34vw,190px);
    height:34px;
    bottom:20px;
  }

  #scr-slots .cs-info{
    left:max(8px,env(safe-area-inset-left));
    bottom:14px;
    transform:none;
    width:min(31vw,180px);
    padding:6px 8px;
    text-align:left;
    border-radius:7px;
  }
  #scr-slots .cs-info h2{font-size:16px}
  #scr-slots .cs-chips{justify-content:flex-start;gap:3px;margin-top:4px}
  #scr-slots .cs-chips span{padding:1px 5px;font-size:6.5px}
  #scr-slots .cs-info p{font-size:7px;margin-top:3px}

  #scr-slots .cs-actions{
    left:auto;
    right:max(8px,env(safe-area-inset-right));
    bottom:12px;
    transform:none;
    width:min(35vw,205px);
    grid-template-columns:minmax(128px,1fr) 56px;
    gap:5px;
  }
  #scr-slots .cs-play,
  #scr-slots .cs-delete{
    height:36px;
    min-height:36px;
    font-size:8px;
  }
  #scr-slots .cs-delete{padding:0 6px}

  #scr-slots .cs-list{
    min-height:64px;
    padding:4px max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  }
  #scr-slots .cs-count{
    position:absolute;
    right:max(8px,env(safe-area-inset-right));
    top:-14px;
    font-size:6.5px;
    line-height:10px;
    opacity:.68;
  }
  #scr-slots #slots{gap:4px}
  #scr-slots .cs-slot{
    flex-basis:118px;
    grid-template-columns:34px 1fr;
    gap:5px;
    min-height:48px;
    padding:4px;
    border-radius:6px;
  }
  #scr-slots .cs-slot canvas,
  #scr-slots .cs-plus{
    width:34px;
    height:34px;
  }
  #scr-slots .cs-plus{font-size:18px}
  #scr-slots .cs-slot b{max-width:70px;font-size:9px}
  #scr-slots .cs-slot small{font-size:7px}
  #scr-slots .cs-slot em{font-size:6.5px}
}

/* Portrait: card central + preview maior, mantendo o carrossel no rodapé. */
@media (pointer:coarse) and (orientation:portrait) {
  #scr-slots.char-select{grid-template-rows:64px minmax(0,1fr)}
  #scr-slots .cs-top{min-height:64px}
  #scr-slots .cs-layout{grid-template-rows:minmax(0,1fr) 104px}
  #scr-slots #cs-preview{
    width:min(88vw,440px);
    height:min(48vh,390px);
  }
  #scr-slots .cs-info{bottom:72px;width:min(88vw,430px)}
  #scr-slots .cs-actions{bottom:12px;width:min(90vw,430px)}
  #scr-slots .cs-list{min-height:104px}
  #scr-slots .cs-slot{flex-basis:164px}
}


/* ================================================================
   CHARACTER SELECT — MOBILE HERO V3
   O guerreiro vira o foco; painéis não atravessam mais o preview.
   ================================================================ */
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px),
       (orientation:landscape) and (max-height:500px) and (max-width:1100px) {
  #scr-slots.char-select{
    grid-template-rows:48px minmax(0,1fr)!important;
    background:
      linear-gradient(180deg,rgba(4,6,10,.34),rgba(4,6,10,.48) 58%,rgba(3,5,8,.82)),
      #0b0d12 url("../assets/login/background.webp?v=3") center/cover no-repeat!important;
  }

  #scr-slots .cs-top{
    min-height:48px!important;
    padding:max(4px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) 4px max(9px,env(safe-area-inset-left))!important;
    background:linear-gradient(180deg,rgba(4,7,11,.50),rgba(4,7,11,.04))!important;
    border-bottom-color:rgba(217,184,116,.08)!important;
  }
  #scr-slots .cs-top h1{
    font-size:clamp(15px,2.25vw,22px)!important;
    letter-spacing:.12em!important;
  }
  #scr-slots .cs-top p{
    font-size:clamp(7px,1vw,9px)!important;
    opacity:.78!important;
  }
  #scr-slots #cs-logout{
    min-height:32px!important;
    height:32px!important;
    padding:0 11px!important;
    font-size:8px!important;
    background:rgba(7,9,13,.42)!important;
  }

  #scr-slots .cs-layout{
    grid-template-rows:minmax(0,1fr) 72px!important;
    min-height:0!important;
  }
  #scr-slots .cs-stage{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:0 max(7px,env(safe-area-inset-right)) 0 max(7px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }

  /* Centro reservado exclusivamente ao guerreiro. */
  #scr-slots .cs-preview-wrap{
    position:absolute!important;
    left:50%!important;
    top:0!important;
    bottom:0!important;
    width:min(48vw,390px)!important;
    transform:translateX(-50%)!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
    pointer-events:none!important;
    z-index:2!important;
  }
  #scr-slots .cs-preview-wrap::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    bottom:8px!important;
    width:min(34vw,250px)!important;
    height:48px!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    opacity:.78!important;
    background:radial-gradient(closest-side,rgba(239,199,91,.32),rgba(217,184,116,.10) 58%,transparent 76%)!important;
    box-shadow:0 0 24px rgba(239,199,91,.08)!important;
  }
  #scr-slots .cs-preview-wrap::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:8%!important;
    bottom:8%!important;
    width:min(30vw,230px)!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    background:radial-gradient(ellipse at center,rgba(243,211,132,.105),rgba(239,199,91,.035) 42%,transparent 72%)!important;
    filter:blur(8px)!important;
    pointer-events:none!important;
    z-index:-1!important;
  }
  #scr-slots #cs-preview{
    position:relative!important;
    width:min(42vw,350px)!important;
    height:min(68vh,285px)!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    filter:
      drop-shadow(0 14px 14px rgba(0,0,0,.72))
      drop-shadow(0 0 8px rgba(239,199,91,.08))!important;
    z-index:2!important;
  }

  /* Dados ficam à esquerda, fora do corpo. */
  #scr-slots .cs-info{
    position:absolute!important;
    left:max(10px,env(safe-area-inset-left))!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:min(24vw,195px)!important;
    margin:0!important;
    padding:9px 10px!important;
    text-align:left!important;
    border:1px solid rgba(217,184,116,.13)!important;
    border-radius:9px!important;
    background:linear-gradient(135deg,rgba(5,8,13,.48),rgba(5,8,13,.18))!important;
    box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important;
    z-index:4!important;
  }
  #scr-slots .cs-info h2{
    margin:0!important;
    font-size:clamp(17px,2.5vw,24px)!important;
    line-height:1!important;
    text-shadow:0 2px 8px #000!important;
  }
  #scr-slots .cs-chips{
    justify-content:flex-start!important;
    gap:3px!important;
    margin-top:6px!important;
  }
  #scr-slots .cs-chips span{
    padding:2px 6px!important;
    font-size:7px!important;
    background:rgba(0,0,0,.28)!important;
    border-color:rgba(217,184,116,.20)!important;
  }
  #scr-slots .cs-info p{
    margin:5px 0 0!important;
    font-size:8px!important;
  }

  /* Ações ficam à direita, sem atravessar o preview. */
  #scr-slots .cs-actions{
    position:absolute!important;
    left:auto!important;
    right:max(10px,env(safe-area-inset-right))!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:min(25vw,225px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 62px!important;
    gap:6px!important;
    margin:0!important;
    z-index:5!important;
  }
  #scr-slots .cs-play,
  #scr-slots .cs-delete{
    height:40px!important;
    min-height:40px!important;
    font-size:8px!important;
    border-radius:7px!important;
  }
  #scr-slots .cs-play{
    min-width:0!important;
    box-shadow:0 5px 18px rgba(239,199,91,.16),inset 0 1px rgba(255,255,255,.28)!important;
  }
  #scr-slots .cs-delete{
    padding:0 7px!important;
    background:rgba(5,8,12,.36)!important;
  }

  /* Carrossel permanece pequeno no rodapé, sem roubar o palco. */
  #scr-slots .cs-list{
    min-height:72px!important;
    height:72px!important;
    padding:5px max(7px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important;
    background:linear-gradient(180deg,rgba(5,8,12,.48),rgba(4,7,10,.82))!important;
    border-top-color:rgba(217,184,116,.12)!important;
    box-shadow:0 -8px 22px rgba(0,0,0,.17)!important;
  }
  #scr-slots .cs-count{
    position:absolute!important;
    right:max(10px,env(safe-area-inset-right))!important;
    top:-13px!important;
    margin:0!important;
    font-size:6.5px!important;
    opacity:.64!important;
  }
  #scr-slots #slots{gap:5px!important}
  #scr-slots .cs-slot{
    flex:0 0 128px!important;
    grid-template-columns:36px 1fr!important;
    gap:5px!important;
    min-height:52px!important;
    padding:4px!important;
    border-radius:7px!important;
  }
  #scr-slots .cs-slot canvas,
  #scr-slots .cs-plus{
    width:36px!important;
    height:36px!important;
  }
  #scr-slots .cs-slot b{max-width:78px!important;font-size:9px!important}
  #scr-slots .cs-slot small{font-size:7px!important}
  #scr-slots .cs-slot em{font-size:6.5px!important}
}

/* Portrait também ganha um preview mais hero e um card menos invasivo. */
@media (pointer:coarse) and (orientation:portrait) {
  #scr-slots .cs-preview-wrap::before{
    opacity:.72!important;
    box-shadow:0 0 26px rgba(239,199,91,.08)!important;
  }
  #scr-slots #cs-preview{
    width:min(92vw,460px)!important;
    height:min(52vh,410px)!important;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(239,199,91,.06))!important;
  }
  #scr-slots .cs-info{
    background:linear-gradient(180deg,rgba(8,11,16,.48),rgba(4,7,11,.20))!important;
    border-color:rgba(217,184,116,.14)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* cadastro (Criar conta): mesmo cartão do login, um pouco mais alto e com campos mais juntos */
#scr-login .dbo-signup-card { height: auto; min-height: calc(417 * var(--p)); padding-bottom: calc(16 * var(--p)); }
#scr-login .dbo-signup-card[hidden], #scr-login #login-form[hidden] { display: none; }
#scr-login .dbo-signup-card .dbo-field { margin-top: calc(12 * var(--p)); }
#scr-login .dbo-signup-card .dbo-field + .dbo-field { margin-top: calc(9 * var(--p)); }
#scr-login .dbo-signup-card .dbo-field input { height: calc(36 * var(--p)); }
#scr-login .dbo-field-note { display: block; margin-top: calc(4 * var(--p)); font-size: calc(10.5 * var(--p)); color: var(--dbo-muted); }
#scr-login .dbo-field-note.ok { color: #6fd38a; }
#scr-login .dbo-field-note.bad { color: #ff7a7a; }
#scr-login .dbo-strength { display: block; height: calc(4 * var(--p)); margin-top: calc(6 * var(--p)); background: #2a2b30; border-radius: 2px; overflow: hidden; }
#scr-login .dbo-strength i { display: block; height: 100%; width: 0; background: #ff7a7a; transition: width .2s, background .2s; }
#scr-login .dbo-signup-card .dbo-remember a { color: var(--dbo-gold, #f2c548); }
#scr-login .dbo-signup-back { grid-template-columns: 1fr; }