/* Space Frog X Cardverse — Shell V3
   Interface de lobby/progressão com material comic-tech original.
   Carregar DEPOIS de style.css. A mesa de partida fica fora deste escopo. */

.shell-v3 {
  --v3-void: #030714;
  --v3-deep: #071629;
  --v3-panel: rgba(7, 20, 39, .92);
  --v3-panel-strong: rgba(4, 12, 25, .97);
  --v3-steel: #183a59;
  --v3-line: rgba(102, 197, 255, .30);
  --v3-line-hot: rgba(92, 220, 255, .72);
  --v3-cyan: #54dcff;
  --v3-blue: #287cff;
  --v3-lime: #a8f522;
  --v3-orange: #ff7a22;
  --v3-violet: #a94cff;
  --v3-cream: #f3f5ed;
  --v3-muted: #92aac0;
  --v3-red: #ff4d54;
  --v3-cut: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  color: var(--v3-cream);
  background:
    radial-gradient(70% 62% at 70% 8%, rgba(35, 103, 165, .30), transparent 70%),
    linear-gradient(145deg, #061326 0%, var(--v3-void) 72%);
}

.shell-v3 button,
.shell-v3 input,
.shell-v3 select { font-family: var(--ft); }

.shell-v3 h1,
.shell-v3 h2,
.shell-v3 h3,
.shell-v3 h4,
.shell-card-detail-v3 .ficha-nome { font-family: var(--fd); font-style: italic; font-weight: 900; }

.shell-v3 .painel {
  border: 1px solid var(--v3-line);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(84, 220, 255, .08), transparent 28%),
    linear-gradient(180deg, rgba(12, 36, 64, .94), rgba(4, 14, 28, .96));
  clip-path: var(--v3-cut);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 35px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}

.shell-v3 .chip {
  min-height: 29px;
  border-radius: 0;
  border-color: var(--v3-line);
  background: rgba(8, 28, 48, .84);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  color: #c4d8e8;
  font: 800 12px/1 var(--fd);
}

.shell-v3 .chip.verde { color: var(--v3-lime); border-color: rgba(168,245,34,.48); }
.shell-v3 .chip.ouro { color: #ffd364; border-color: rgba(255,199,72,.42); }
.shell-v3 .chip.roxo { color: #dda1ff; border-color: rgba(169,76,255,.48); }

.shell-v3 .btn {
  border: 1px solid rgba(111, 203, 255, .32);
  clip-path: var(--v3-cut);
  font: italic 900 16px/1 var(--fd);
  letter-spacing: .035em;
}

.shell-v3 .btn-verde {
  color: #071006;
  background: linear-gradient(180deg, #d6ff5b, var(--v3-lime) 45%, #69b918);
  border-color: #eaffad;
  box-shadow: inset 0 2px rgba(255,255,255,.55), inset 0 -5px rgba(29,67,5,.35), 0 0 24px rgba(168,245,34,.22);
}

.shell-v3 .btn-fantasma {
  color: #dbeeff;
  background: linear-gradient(180deg, rgba(28,75,116,.8), rgba(7,24,45,.96));
}

.shell-v3 .btn-roxo {
  color: white;
  background: linear-gradient(180deg, #cf72ff, var(--v3-violet) 48%, #5921a4);
  border-color: #e7adff;
}

.shell-v3 .btn-icone {
  color: #bfe7ff;
  background: linear-gradient(145deg, #153d62, #071528);
  border: 1px solid var(--v3-line);
  clip-path: polygon(50% 0, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
}

/* --------------------------------------------------------------------------
   Lobby — abre como jogo, não como landing page
   -------------------------------------------------------------------------- */

.lobby-v3 {
  position: relative;
  height: 100dvh;
  min-height: 0;
  padding: 0 0 0 112px;
  overflow: hidden;
  background: #020910;
}

.lobby-v3 .lobby-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 18px clamp(20px, 3vw, 48px) 18px;
  display: grid;
  grid-template-rows: 68px minmax(250px, 1fr) 68px auto;
  gap: 10px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(2,10,19,.96) 0%, rgba(2,10,19,.73) 28%, rgba(2,10,19,.06) 65%),
    linear-gradient(0deg, #020a13 0%, transparent 42%),
    url('assets/ui/command-center-desktop-v1.webp');
  background-size: cover;
  background-position: center;
}

.lobby-v3 .lobby-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 42%, rgba(84,220,255,.08) 42.2%, transparent 42.5%),
    radial-gradient(circle at 68% 64%, rgba(84,220,255,.13), transparent 27%);
  mix-blend-mode: screen;
}

.lobby-v3 .lobby-topbar {
  position: relative;
  z-index: 5;
  height: 68px;
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 0;
  border: 0;
}

.lobby-v3 .lobby-settings,
.lobby-v3 .lobby-inbox {
  position: relative;
  width: 54px;
  flex: none;
  display: grid;
  place-items: center;
  color: #c5eaff;
  border: 1px solid var(--v3-line);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  background: rgba(5,21,38,.88);
}

.lobby-v3 .lobby-inbox { order: 4; }
.lobby-v3 .lobby-inbox.has-alert { color: var(--v3-lime); }
.lobby-v3 .lobby-inbox > span {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--v3-red);
  border-radius: 9px;
  font: 900 11px var(--fd);
}

.lobby-v3 .lobby-pilot {
  order: 3;
  margin-left: auto;
  min-width: 240px;
  height: 68px;
  padding: 7px 18px 7px 72px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--v3-cream);
  border: 1px solid var(--v3-line);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 20px);
  background: linear-gradient(110deg, rgba(18,59,91,.94), rgba(5,20,38,.92));
  text-align: left;
}

.lobby-v3 .lobby-pilot .pilot-avatar {
  position: absolute;
  left: 7px;
  top: 4px;
  width: 58px;
  height: 60px;
  overflow: hidden;
  border: 2px solid rgba(168,245,34,.62);
  clip-path: polygon(50% 0, 95% 23%, 95% 77%, 50% 100%, 5% 77%, 5% 23%);
  background: #061524;
}

.lobby-v3 .pilot-copy { display: grid; min-width: 0; }
.lobby-v3 .pilot-copy b {
  overflow: hidden;
  color: #f6fbff;
  font: italic 900 20px/1 var(--fd);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.lobby-v3 .pilot-copy small { margin-top: 5px; color: var(--v3-cyan); font: 800 11px/1 var(--ft); text-transform: uppercase; }

.lobby-v3 .lobby-resources {
  order: 2;
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.lobby-v3 .resource-pill {
  min-width: 112px;
  height: 100%;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--v3-cyan);
  border: 1px solid var(--v3-line);
  background: rgba(5,21,38,.88);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.lobby-v3 .resource-pill.gems { color: #d88dff; }
.lobby-v3 .resource-pill span { display: grid; text-align: left; }
.lobby-v3 .resource-pill small { color: #7f9bad; font: 700 8px/1 var(--ft); letter-spacing: .11em; text-transform: uppercase; }
.lobby-v3 .resource-pill b { margin-top: 4px; color: #f1f7f8; font: italic 900 20px/1 var(--fd); }

.lobby-v3 .lobby-feature {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 3vh, 34px) 0;
}

.lobby-v3 .lobby-feature-copy {
  width: min(570px, 46vw);
  padding: 24px 30px 24px 25px;
  border-left: 4px solid var(--v3-lime);
  background: linear-gradient(90deg, rgba(2,10,19,.93), rgba(2,10,19,.55) 76%, transparent);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.28));
}

.lobby-v3 .season-ribbon {
  display: inline-block;
  padding: 6px 15px 6px 10px;
  color: #061006;
  background: var(--v3-lime);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font: italic 900 12px/1 var(--fd);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lobby-v3 .lobby-feature h1 {
  margin: 10px 0 4px;
  color: #f6f3e9;
  font-size: clamp(48px, 5.8vw, 92px);
  line-height: .84;
  letter-spacing: -.03em;
  text-shadow: 4px 5px 0 #09111d, 0 0 24px rgba(84,220,255,.15);
}

.lobby-v3 .lobby-feature p {
  max-width: 480px;
  margin: 12px 0 16px;
  color: #bfd0d8;
  font-size: 14px;
  line-height: 1.45;
}

.lobby-v3 .lobby-event-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--v3-cyan);
  font: italic 900 14px var(--fd);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lobby-v3 .lobby-event-stamp {
  position: absolute;
  right: 2%;
  bottom: 7%;
  width: 116px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  color: var(--v3-lime);
  border: 2px solid rgba(168,245,34,.54);
  border-radius: 50%;
  background: rgba(3,13,20,.64);
  box-shadow: 0 0 0 7px rgba(3,13,20,.5), 0 0 35px rgba(168,245,34,.15);
  text-align: center;
  transform: rotate(-7deg);
}
.lobby-v3 .lobby-event-stamp b { font: italic 900 34px/1 var(--fd); }
.lobby-v3 .lobby-event-stamp small { font: 800 8px/1.2 var(--ft); letter-spacing: .1em; }

.lobby-v3 .lobby-mission {
  position: relative;
  min-width: 0;
  height: 68px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: inherit;
  border: 1px solid var(--v3-line);
  background: linear-gradient(100deg, rgba(12,46,75,.94), rgba(6,22,40,.96));
  clip-path: var(--v3-cut);
  text-align: left;
}

.lobby-v3 .lobby-mission-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--v3-lime);
  border: 1px solid rgba(168,245,34,.4);
  transform: rotate(45deg);
}
.lobby-v3 .lobby-mission-icon svg { transform: rotate(-45deg); }
.lobby-v3 .lobby-mission-copy { min-width: 0; display: grid; gap: 3px; }
.lobby-v3 .lobby-mission-copy small { color: var(--v3-cyan); font: 800 9px var(--ft); letter-spacing: .12em; text-transform: uppercase; }
.lobby-v3 .lobby-mission-copy b { overflow: hidden; font: italic 900 17px/1 var(--fd); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.lobby-v3 .lobby-mission-copy .rank-track { width: min(460px, 70%); height: 5px; background: rgba(255,255,255,.09); }
.lobby-v3 .lobby-mission-copy .rank-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--v3-blue), var(--v3-cyan)); }
.lobby-v3 .lobby-mission > em { color: var(--v3-lime); font: italic 900 20px var(--fd); }

.lobby-v3 .lobby-launch {
  position: relative;
  inset: auto;
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lobby-v3 .mode-switch {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--v3-line);
  clip-path: var(--v3-cut);
  background: var(--v3-panel-strong);
}
.lobby-v3 .mode-switch button {
  position: relative;
  min-height: 64px;
  padding: 8px;
  display: grid;
  place-content: center;
  color: #7891a8;
}
.lobby-v3 .mode-switch button + button { border-left: 1px solid var(--v3-line); }
.lobby-v3 .mode-switch button.ativo { color: var(--v3-lime); background: linear-gradient(180deg, rgba(168,245,34,.13), rgba(168,245,34,.04)); }
.lobby-v3 .mode-switch button.ativo::after { content: ''; position: absolute; inset: auto 13px 0; height: 3px; background: var(--v3-lime); box-shadow: 0 0 10px var(--v3-lime); }
.lobby-v3 .mode-switch b { font: italic 900 16px/1 var(--fd); text-transform: uppercase; }
.lobby-v3 .mode-switch small { margin-top: 4px; font-size: 9px; }

.lobby-v3 .lobby-launch-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(250px, 1.15fr) minmax(170px, .65fr);
  gap: 10px;
}

.lobby-v3 .lobby-deck,
.lobby-v3 .lobby-rank-core {
  min-width: 0;
  min-height: 78px;
  color: inherit;
  border: 1px solid var(--v3-line);
  background: linear-gradient(160deg, rgba(14,45,72,.96), rgba(4,15,29,.98));
  clip-path: var(--v3-cut);
}

.lobby-v3 .lobby-deck { padding: 7px 12px; display: flex; align-items: center; gap: 11px; text-align: left; }
.lobby-v3 .lobby-deck .deck-fan { width: 88px; height: 58px; flex: none; position: relative; display: block; }
.lobby-v3 .lobby-deck .deck-fan .carta { --w: 42px; position: absolute; top: 8px; left: 18px; }
.lobby-v3 .lobby-deck .deck-fan .carta:nth-child(1) { transform: translateX(-17px) rotate(-11deg); }
.lobby-v3 .lobby-deck .deck-fan .carta:nth-child(2) { transform: translateX(-6px) rotate(-4deg); }
.lobby-v3 .lobby-deck .deck-fan .carta:nth-child(3) { transform: translateX(7px) rotate(4deg); }
.lobby-v3 .lobby-deck .deck-fan .carta:nth-child(4) { transform: translateX(19px) rotate(11deg); }
.lobby-v3 .lobby-deck-copy { min-width: 0; display: grid; }
.lobby-v3 .lobby-deck-copy small { color: var(--v3-cyan); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.lobby-v3 .lobby-deck-copy b { overflow: hidden; margin-top: 3px; font: italic 900 16px/1 var(--fd); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.lobby-v3 .lobby-deck-copy em { margin-top: 5px; color: var(--v3-muted); font-size: 9px; font-style: normal; }

.lobby-v3 .lobby-play {
  position: relative;
  min-height: 78px;
  display: grid;
  place-content: center;
  color: #091205;
  border: 2px solid #dcff87;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  background: linear-gradient(180deg, #dcff65 0%, var(--v3-lime) 46%, #63b516 100%);
  box-shadow: inset 0 3px rgba(255,255,255,.55), inset 0 -7px rgba(32,74,6,.32), 0 0 32px rgba(168,245,34,.30);
  text-transform: uppercase;
  transition: transform .16s var(--mola-toque), filter .2s;
}
.lobby-v3 .lobby-play::before,
.lobby-v3 .lobby-play::after { content: ''; position: absolute; top: 50%; width: 10px; height: 22px; background: rgba(8,24,8,.22); transform: translateY(-50%); }
.lobby-v3 .lobby-play::before { left: 7px; }
.lobby-v3 .lobby-play::after { right: 7px; }
.lobby-v3 .lobby-play:hover { filter: brightness(1.1); }
.lobby-v3 .lobby-play:active { transform: scale(.975); }
.lobby-v3 .lobby-play span { font: italic 900 clamp(28px, 3vw, 44px)/.85 var(--fd); letter-spacing: .03em; }
.lobby-v3 .lobby-play small { margin-top: 6px; font: 800 9px/1 var(--ft); letter-spacing: .11em; }

.lobby-v3 .lobby-rank-core { padding: 8px 12px; display: flex; align-items: center; justify-content: center; gap: 11px; }
.lobby-v3 .rank-orbit {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--v3-cyan) var(--rank-progress), rgba(84,220,255,.12) 0);
  box-shadow: 0 0 20px rgba(84,220,255,.22);
}
.lobby-v3 .rank-orbit::before { content: ''; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #07162a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lobby-v3 .rank-orbit strong { position: relative; font: italic 900 26px var(--fd); }
.lobby-v3 .lobby-rank-core > span:last-child { min-width: 0; display: grid; text-align: left; }
.lobby-v3 .lobby-rank-core b { font: italic 900 15px/1 var(--fd); text-transform: uppercase; }
.lobby-v3 .lobby-rank-core small { margin-top: 4px; color: var(--v3-cyan); font-size: 9px; }

/* --------------------------------------------------------------------------
   Dock — rail no desktop, controle de polegar no mobile
   -------------------------------------------------------------------------- */

.shell-v3 .frog-dock-v3 {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 112px;
  height: 100dvh;
  margin: 0;
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-right: 1px solid rgba(84,220,255,.18);
  background: linear-gradient(180deg, rgba(5,20,38,.98), rgba(2,9,18,.99));
  box-shadow: 15px 0 40px rgba(0,0,0,.24);
}
.shell-v3 .frog-dock-v3::before,
.shell-v3 .frog-dock-v3::after { display: none; }
.shell-v3 .frog-dock-v3 .dock-brand { height: 112px; display: grid; place-items: center; border-bottom: 1px solid rgba(84,220,255,.15); }
.shell-v3 .frog-dock-v3 .dock-logo { font-size: 27px; }
.shell-v3 .frog-dock-v3 .dock-items { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.shell-v3 .frog-dock-v3 .dock-item {
  position: relative;
  flex: none;
  width: 100%;
  min-height: 68px;
  padding: 8px 3px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: #6f879a;
  border: 1px solid transparent;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.shell-v3 .frog-dock-v3 .dock-item.ativo {
  color: var(--v3-lime);
  border-color: rgba(168,245,34,.24);
  background: linear-gradient(90deg, rgba(168,245,34,.14), rgba(168,245,34,.025));
  box-shadow: inset 3px 0 var(--v3-lime);
}
.shell-v3 .frog-dock-v3 .di-forma { width: 34px; height: 30px; display: grid; place-items: center; background: none; filter: none; transform: none; }
.shell-v3 .frog-dock-v3 .di-rotulo { font: italic 900 10px/1 var(--fd); letter-spacing: .06em; text-transform: uppercase; }
.shell-v3 .frog-dock-v3 .di-aviso { position: absolute; top: 5px; right: 8px; min-width: 18px; height: 18px; display: grid; place-items: center; color: white; background: var(--v3-red); border-radius: 9px; font: 900 10px var(--fd); }

/* --------------------------------------------------------------------------
   Matchmaking cinematográfico
   -------------------------------------------------------------------------- */

.matchmaking-v3 {
  position: relative;
  isolation: isolate;
  height: 100dvh;
  padding: max(16px, var(--safe-t)) 18px max(16px, var(--safe-b));
  overflow: hidden;
  background-image:
    radial-gradient(circle at 50% 45%, rgba(127,59,255,.20), transparent 28%),
    linear-gradient(90deg, rgba(2,8,18,.72), rgba(3,7,16,.18), rgba(2,8,18,.72)),
    url('assets/ui/orbital-theater-background-v1.webp');
  background-size: cover;
  background-position: center;
}
.matchmaking-v3::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: .58;
  background: repeating-conic-gradient(from 0deg at 50% 46%, transparent 0 9deg, rgba(84,220,255,.08) 9.4deg 9.8deg, transparent 10.2deg 18deg);
  animation: v3-orbit 32s linear infinite;
}
@keyframes v3-orbit { to { transform: rotate(360deg); } }

.matchmaking-v3 .matchmaking-stage {
  position: relative;
  width: min(1120px, 100%);
  height: 100%;
  margin: auto;
  padding: 20px clamp(10px, 4vw, 44px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  overflow: hidden;
}
.matchmaking-v3 .matchmaking-title { text-align: center; }
.matchmaking-v3 .matchmaking-title h1 { margin-top: 3px; font-size: clamp(38px,5vw,66px); line-height: .9; }
.matchmaking-v3 .matchmaking-title .module-kicker { color: var(--v3-cyan); letter-spacing: .18em; }
.matchmaking-v3 .matchmaking-versus {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  align-items: center;
  gap: clamp(15px,4vw,54px);
}
.matchmaking-v3 .matchmaking-player {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.matchmaking-v3 .matchmaking-player .avatar-grande {
  width: clamp(150px,18vw,220px);
  height: clamp(165px,20vw,240px);
  overflow: hidden;
  border: 3px solid var(--v3-cyan);
  clip-path: polygon(50% 0, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
  background: #07172c;
  box-shadow: 0 0 0 8px rgba(7,29,53,.8), 0 0 42px rgba(84,220,255,.25);
}
.matchmaking-v3 .matchmaking-player.is-searching .avatar-grande { border-color: var(--v3-orange); box-shadow: 0 0 0 8px rgba(48,19,9,.7), 0 0 42px rgba(255,122,34,.24); }
.matchmaking-v3 .opponent-scan img { filter: grayscale(.75) contrast(1.1) brightness(.48); animation: v3-scan-pulse 1.5s ease-in-out infinite; }
@keyframes v3-scan-pulse { 50% { filter: grayscale(.3) contrast(1.15) brightness(.78); } }
.matchmaking-v3 .vs-tag {
  width: min(360px, 100%);
  min-height: 74px;
  padding: 12px 20px;
  border: 1px solid var(--v3-line-hot);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(100deg, rgba(24,79,125,.96), rgba(6,21,41,.96));
  text-align: center;
}
.matchmaking-v3 .is-searching .vs-tag { border-color: rgba(255,122,34,.7); background: linear-gradient(100deg, rgba(114,41,18,.94), rgba(33,12,12,.96)); }
.matchmaking-v3 .vs-nome { overflow: hidden; font: italic 900 clamp(21px,2.2vw,31px)/1 var(--fd); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.matchmaking-v3 .vs-sub { margin-top: 6px; color: #abd9f5; font-size: 11px; text-transform: uppercase; }
.matchmaking-v3 .matchmaking-deck,
.matchmaking-v3 .matchmaking-scan-copy { display: flex; align-items: center; gap: 7px; color: var(--v3-muted); font: 800 10px var(--ft); letter-spacing: .08em; text-transform: uppercase; }
.matchmaking-v3 .matchmaking-scan-copy .peq { color: var(--v3-cyan); }
.matchmaking-v3 .matchmaking-core {
  position: relative;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(180,120,255,.7);
  border-radius: 50%;
  background: radial-gradient(circle, #182e58 0 25%, #7e35dc 28%, #101b36 32% 54%, rgba(51,22,92,.6) 56% 62%, transparent 64%);
  box-shadow: 0 0 45px rgba(169,76,255,.5), inset 0 0 24px rgba(84,220,255,.45);
}
.matchmaking-v3 .matchmaking-core span { font: italic 900 35px var(--fd); text-shadow: 0 3px #060814, 0 0 14px white; }
.matchmaking-v3 .matchmaking-core i { position: absolute; inset: -10px; border: 2px dashed rgba(84,220,255,.5); border-radius: 50%; animation: v3-orbit 8s linear infinite reverse; }
.matchmaking-v3 .matchmaking-note { max-width: 520px; margin: 0 0 12px; color: var(--v3-muted); font-size: 11px; text-align: center; }
.matchmaking-v3 .btn-cancelar {
  min-width: 240px;
  min-height: 58px;
  padding: 12px 30px;
  color: #fff;
  border: 2px solid rgba(255,97,105,.68);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
  background: linear-gradient(180deg, #c74450, #711827);
  font: italic 900 18px var(--fd);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cabeçalhos, coleção e decks
   -------------------------------------------------------------------------- */

.shell-v3.collection-screen,
.shell-v3.decks-screen,
.shell-v3.deck-editor-screen,
.shell-v3.progression-screen {
  width: auto;
  height: 100dvh;
  min-height: 0;
  margin: 0 0 0 112px;
  padding: 18px clamp(18px,3vw,44px) 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3,10,21,.28), rgba(3,10,21,.92)),
    radial-gradient(90% 55% at 50% 0, rgba(37,112,179,.22), transparent 72%),
    #030915;
}

.shell-v3.profile-screen,
.shell-v3.decks-screen,
.shell-v3.deck-editor-screen { margin-left: 0; padding-inline: max(18px, calc((100vw - 1180px) / 2)); }

.shell-v3 .shell-header-v3,
.shell-v3 .progression-header {
  position: relative;
  min-height: 70px;
  padding: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--v3-line);
}
.shell-v3 .shell-header-v3::after,
.shell-v3 .progression-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 130px; height: 3px; background: linear-gradient(90deg, var(--v3-cyan), transparent); }
.shell-v3 .shell-heading-v3 { min-width: 0; display: grid; }
.shell-v3 .shell-heading-v3 small,
.shell-v3 .progression-eyebrow { color: var(--v3-cyan); font: 800 9px/1 var(--ft); letter-spacing: .17em; text-transform: uppercase; }
.shell-v3 .shell-heading-v3 h2,
.shell-v3 .progression-title { margin: 2px 0 0; padding: 0; color: var(--v3-cream); font-size: clamp(32px,3.3vw,50px); line-height: .92; letter-spacing: -.015em; }
.shell-v3 .progression-subtitle { color: var(--v3-muted); }

.shell-v3.collection-screen { display: flex; flex-direction: column; }
.shell-v3 .collection-deck-rail {
  flex: none;
  height: 100px;
  margin: 10px -2px 7px;
  padding: 4px 2px 8px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.shell-v3 .collection-deck-chip {
  position: relative;
  min-width: 220px;
  height: 82px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 8px;
  color: #bfd3e3;
  border: 1px solid var(--v3-line);
  clip-path: var(--v3-cut);
  background: linear-gradient(150deg, rgba(17,52,82,.95), rgba(5,17,32,.98));
  text-align: left;
}
.shell-v3 .collection-deck-chip.is-active { color: var(--v3-lime); border-color: rgba(168,245,34,.65); background: linear-gradient(150deg, rgba(52,83,22,.7), rgba(5,22,27,.98)); box-shadow: inset 4px 0 var(--v3-lime); }
.shell-v3 .collection-deck-chip > span:last-child { min-width: 0; display: grid; }
.shell-v3 .collection-deck-chip b { overflow: hidden; font: italic 900 16px/1 var(--fd); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.shell-v3 .collection-deck-chip small { margin-top: 5px; color: var(--v3-muted); font-size: 9px; text-transform: uppercase; }
.shell-v3 .collection-deck-stack { position: relative; width: 78px; height: 62px; }
.shell-v3 .collection-deck-stack .carta { --w: 43px; position: absolute; left: 18px; top: 2px; }
.shell-v3 .collection-deck-stack .carta:nth-child(1) { transform: translateX(-16px) rotate(-10deg); }
.shell-v3 .collection-deck-stack .carta:nth-child(2) { transform: rotate(0); }
.shell-v3 .collection-deck-stack .carta:nth-child(3) { transform: translateX(16px) rotate(10deg); }
.shell-v3 .collection-deck-chip.is-new { grid-template-columns: 48px 1fr; min-width: 180px; }
.shell-v3 .collection-deck-add { width: 44px; height: 44px; display: grid; place-items: center; color: var(--v3-cyan); border: 1px dashed var(--v3-line-hot); transform: rotate(45deg); }
.shell-v3 .collection-deck-add svg { transform: rotate(-45deg); }

.shell-v3 .collection-expansion-v3 {
  position: relative;
  flex: none;
  min-height: 82px;
  margin-bottom: 7px;
  padding: 8px 18px;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  color: #eef8fa;
  border: 1px solid rgba(169,76,255,.55);
  clip-path: var(--v3-cut);
  background:
    radial-gradient(circle at 17% 50%, rgba(84,220,255,.22), transparent 24%),
    linear-gradient(105deg, rgba(42,25,92,.97), rgba(9,35,62,.98) 54%, rgba(39,14,71,.97));
  text-align: left;
}
.shell-v3 .collection-expansion-v3::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 48%,rgba(255,255,255,.08) 48.2%,transparent 48.6%); }
.shell-v3 .collection-expansion-art { position: relative; width: 145px; height: 65px; }
.shell-v3 .collection-expansion-art .carta { --w: 47px; position: absolute; left: 49px; top: 1px; }
.shell-v3 .collection-expansion-art .carta:nth-child(1) { transform: translateX(-39px) rotate(-11deg); }
.shell-v3 .collection-expansion-art .carta:nth-child(2) { transform: translateX(-14px) rotate(-4deg); }
.shell-v3 .collection-expansion-art .carta:nth-child(3) { transform: translateX(14px) rotate(4deg); }
.shell-v3 .collection-expansion-art .carta:nth-child(4) { transform: translateX(39px) rotate(11deg); }
.shell-v3 .collection-expansion-copy { min-width: 0; display: grid; }
.shell-v3 .collection-expansion-copy small { color: var(--v3-cyan); font: 800 8px var(--ft); letter-spacing: .15em; text-transform: uppercase; }
.shell-v3 .collection-expansion-copy b { margin-top: 2px; font: italic 900 27px/.9 var(--fd); text-transform: uppercase; }
.shell-v3 .collection-expansion-copy em { margin-top: 5px; color: #b9cce0; font-size: 10px; font-style: normal; }
.shell-v3 .collection-expansion-cta { display: flex; align-items: center; gap: 7px; color: var(--v3-lime); font: italic 900 13px var(--fd); text-transform: uppercase; }

.shell-v3 .collection-account-strip { flex: none; min-height: 34px; gap: 6px; padding: 0 !important; overflow-x: auto; }
.shell-v3 .collection-toolbar-v3 {
  flex: none;
  margin: 7px 0 2px !important;
  padding: 9px 12px !important;
  display: grid;
  grid-template-columns: auto minmax(280px,1fr) auto;
  align-items: end;
  gap: 8px 14px;
}
.shell-v3 .collection-tabs-v3 { display: flex; flex-wrap: nowrap !important; gap: 3px; }
.shell-v3 .aba {
  min-height: 40px;
  padding: 8px 15px;
  color: #8298ad;
  border: 1px solid var(--v3-line);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: rgba(4,17,32,.9);
  font: italic 900 13px var(--fd);
  text-transform: uppercase;
}
.shell-v3 .aba.ativa { color: var(--v3-lime); border-color: rgba(168,245,34,.48); background: rgba(91,133,25,.22); box-shadow: inset 0 -3px var(--v3-lime); }
.shell-v3 .collection-filter-row { display: grid; grid-template-columns: minmax(180px,1fr) minmax(130px,.5fr); gap: 7px; }
.shell-v3 .collection-search-v3,
.shell-v3 .collection-rarity-v3 { display: grid; gap: 4px; color: var(--v3-muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.shell-v3 .collection-search-v3 > span { display: flex; align-items: center; gap: 5px; }
.shell-v3 .collection-toolbar-v3 .campo {
  min-height: 40px !important;
  padding: 8px 11px;
  color: #e8f5fb;
  border: 1px solid var(--v3-line) !important;
  border-radius: 0;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: rgba(1,10,20,.9) !important;
}
.shell-v3 .collection-toolbar-v3 > .peq { align-self: center; white-space: nowrap; }

.shell-v3.collection-screen > .rolavel { padding: 8px 3px 100px; }
.shell-v3 .grade-cartas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 28px 15px;
  padding: 10px 7px 30px;
}
.shell-v3 .collection-card-item { position: relative; min-width: 0; padding: 0 1px 22px; display: flex; justify-content: center; }
.shell-v3 .collection-card-item .carta {
  --w: min(100%, 188px);
  width: var(--w);
  max-width: 188px;
  font-size: clamp(8px,.75vw,11px);
  cursor: pointer;
}
.shell-v3 .collection-card-item .carta .moldura { background: #030813; }
.shell-v3 .collection-card-item .carta .arte { position: absolute; inset: .2em; }
.shell-v3 .collection-card-item .carta .arte::after { height: 54%; background: linear-gradient(180deg, transparent, rgba(3,8,19,.98)); }
.shell-v3 .collection-card-item .carta .rodape { position: absolute; z-index: 2; left: .25em; right: .25em; bottom: .28em; padding: 1.6em .45em .55em; background: linear-gradient(180deg, transparent, rgba(2,7,16,.95) 38%); }
.shell-v3 .collection-card-item .carta .nome { font-size: 1.52em; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.8); }
.shell-v3 .collection-card-item .carta .texto,
.shell-v3 .collection-card-item .carta .sub,
.shell-v3 .collection-card-item .carta .raridade { display: none; }
.shell-v3 .collection-card-item .carta .hex { top: -.3em; width: 2.7em; height: 3em; font-size: 1.45em; }
.shell-v3 .collection-card-item:hover .carta { transform: translateY(-7px) scale(1.025); }
.shell-v3 .collection-card-item.is-locked .carta { opacity: .78; filter: grayscale(.35) brightness(.76); }
.shell-v3 .collection-card-item.is-nova-orbita .carta { filter: drop-shadow(0 0 .55em rgba(169,76,255,.56)) drop-shadow(0 .5em .8em rgba(0,0,0,.45)); }
.shell-v3 .collection-card-item.is-nova-orbita.is-locked .carta { opacity: .88; filter: saturate(.72) brightness(.78) drop-shadow(0 0 .6em rgba(169,76,255,.46)); }
.shell-v3 .collection-expansion-badge {
  position: absolute;
  z-index: 7;
  top: 36px;
  right: 0;
  padding: 3px 7px;
  color: white;
  background: linear-gradient(90deg,#6d27c5,var(--v3-violet));
  clip-path: polygon(6px 0,100% 0,100% 100%,0 100%);
  font: italic 900 8px/1 var(--fd);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(169,76,255,.45);
}
.shell-v3 .collection-card-status {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: min(96%, 180px);
  min-height: 28px;
  padding: 4px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c9e0ef;
  border: 1px solid var(--v3-line);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: rgba(5,20,36,.98);
  font: italic 900 10px var(--fd);
  text-transform: uppercase;
  transform: translateX(-50%);
}
.shell-v3 .collection-card-status .nivel { position: static; padding: 0; color: var(--v3-cyan); border: 0; background: none; }
.shell-v3 .collection-card-status .boost-count { color: #d8a2ff; }
.shell-v3 .collection-card-status .lock-mark { color: #7990a4; }

/* decks e editor */
.shell-v3 .deck-list-v3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.shell-v3 .deck-card-v3 { margin: 0 !important; padding: 12px !important; }
.shell-v3 .deck-card-v3.is-active { border-color: rgba(168,245,34,.55); box-shadow: inset 4px 0 var(--v3-lime), 0 15px 30px rgba(0,0,0,.22); }
.shell-v3 .deck-card-v3 .deck-atual { border-color: var(--v3-line); background: rgba(1,8,17,.7); }
.shell-v3 .deck-card-v3 .deck-atual .carta { --w: 60px; }
.shell-v3.deck-editor-screen .deck-atual { min-height: 104px; border: 1px solid var(--v3-line); }
.shell-v3.deck-editor-screen .grade-cartas { grid-template-columns: repeat(auto-fill,minmax(136px,1fr)); }

/* --------------------------------------------------------------------------
   Progressão, missões, ranking, loja e perfil
   -------------------------------------------------------------------------- */

.shell-v3 .progression-scroll { padding: 14px 3px 96px 0; }
.shell-v3 .progression-summary { margin-top: 12px; border-color: var(--v3-line); }
.shell-v3 .progression-meter { height: 8px; background: rgba(255,255,255,.08); clip-path: polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%); }
.shell-v3 .progression-meter i { background: linear-gradient(90deg, var(--v3-blue), var(--v3-cyan)); box-shadow: 0 0 12px rgba(84,220,255,.55); }

.shell-v3 .mission-reward-track {
  min-height: 166px;
  grid-template-columns: minmax(220px,.8fr) minmax(340px,1.5fr) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 50%, rgba(169,76,255,.18), transparent 34%),
    linear-gradient(110deg, rgba(20,65,104,.95), rgba(9,26,48,.98));
}
.shell-v3 .reward-nodes {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.shell-v3 .reward-nodes::before { content: ''; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; background: linear-gradient(90deg,var(--v3-cyan),rgba(84,220,255,.18)); transform: translateY(-50%); }
.shell-v3 .reward-node { position: relative; z-index: 1; display: grid; place-items: center; gap: 5px; color: #7590a5; }
.shell-v3 .reward-node i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid #52677d;
  clip-path: polygon(50% 0, 95% 23%, 95% 77%, 50% 100%, 5% 77%, 5% 23%);
  background: #08172a;
}
.shell-v3 .reward-node.is-collected { color: var(--v3-cyan); }
.shell-v3 .reward-node.is-collected i { border-color: var(--v3-cyan); background: #0b3951; }
.shell-v3 .reward-node.is-ready { color: var(--v3-lime); }
.shell-v3 .reward-node.is-ready i { border-color: var(--v3-lime); background: #29420f; box-shadow: 0 0 22px rgba(168,245,34,.35); animation: v3-reward 1.3s ease-in-out infinite; }
@keyframes v3-reward { 50% { transform: translateY(-4px) scale(1.06); } }
.shell-v3 .reward-node small { font: 900 10px var(--fd); }
.shell-v3 .mission-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.shell-v3 .mission-card { min-height: 164px; border-left: 3px solid var(--v3-blue); }
.shell-v3 .mission-card.is-ready { border-left-color: var(--v3-lime); background: linear-gradient(115deg, rgba(99,141,27,.25), rgba(5,20,37,.97)); }
.shell-v3 .mission-index { color: var(--v3-cyan); font-size: 19px; }
.shell-v3 .mission-title { color: #eef5f5; font-size: clamp(19px,1.5vw,25px); }

.shell-v3 .ranking-self { min-height: 145px; background: linear-gradient(110deg, rgba(17,70,103,.92), rgba(7,25,44,.98)); }
.shell-v3 .ranking-self-position { color: var(--v3-cyan); text-shadow: 0 0 25px rgba(84,220,255,.35); }
.shell-v3 .ranking-podium { align-items: end; }
.shell-v3 .ranking-entry-podium { min-height: 148px; border-top: 3px solid var(--v3-cyan); }
.shell-v3 .ranking-entry-podium:nth-child(1) { min-height: 172px; border-top-color: #ffd75f; background: linear-gradient(160deg,rgba(125,83,14,.30),rgba(6,22,39,.98)); }
.shell-v3 .ranking-entry-podium:nth-child(2) { border-top-color: #b7d2e2; }
.shell-v3 .ranking-entry-podium:nth-child(3) { border-top-color: #d98954; }
.shell-v3 .ranking-entry.is-me { border-color: rgba(168,245,34,.48); box-shadow: inset 4px 0 var(--v3-lime); }
.shell-v3 .ranking-score strong { color: var(--v3-cyan); }

.shell-v3 .store-trust-note { border-left: 4px solid var(--v3-orange); }
.shell-v3 .store-sections { gap: 28px; }
.shell-v3 .store-section-header { padding: 0 4px 8px; border-bottom: 1px solid var(--v3-line); }
.shell-v3 .store-section-heading h3 { color: #f2f4ed; font-size: 27px; }
.shell-v3 .store-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.shell-v3 .store-item { min-height: 132px; border-left: 3px solid var(--v3-violet); }
.shell-v3 .store-item-variantes,
.shell-v3 .store-item-variante { border-left-color: var(--v3-cyan); }
.shell-v3 .store-item-passe { border-left-color: var(--v3-orange); background: linear-gradient(120deg,rgba(122,54,18,.25),rgba(6,21,39,.98)); }
.shell-v3 .store-buy-button.is-coming-soon { opacity: .62; color: #c9b7d7; filter: grayscale(.2); }

.shell-v3 .profile-identity-card { min-height: 152px; background: linear-gradient(105deg,rgba(20,72,105,.92),rgba(7,24,43,.98)); }
.shell-v3 .profile-avatar-shell { width: 92px; height: 104px; border: 2px solid var(--v3-cyan); clip-path: polygon(50% 0,95% 23%,95% 77%,50% 100%,5% 77%,5% 23%); }
.shell-v3 .profile-identity-copy h3 { color: #f4f7f1; font-size: 38px; }
.shell-v3 .profile-stat { border-left-color: var(--v3-line); background: rgba(84,220,255,.035); }
.shell-v3 .profile-stat.is-positive dd { color: var(--v3-lime); }
.shell-v3 .profile-stat.is-rank dd { color: var(--v3-cyan); }

/* configurações */
.shell-v3.settings-screen .settings-scroll { width: min(900px,100%); margin: 0 auto; }
.shell-v3 .settings-panel { margin-bottom: 12px; border: 1px solid var(--v3-line); background: linear-gradient(150deg,rgba(15,49,79,.92),rgba(5,18,34,.97)); clip-path: var(--v3-cut); }
.shell-v3 .settings-panel > header { min-height: 64px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; color: var(--v3-cyan); border-bottom: 1px solid var(--v3-line); }
.shell-v3 .settings-panel > header h2 { color: #eef4f3; font-size: 24px; }
.shell-v3 .settings-row { min-height: 88px; padding: 15px 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid rgba(84,220,255,.12); }
.shell-v3 .settings-row:last-child { border-bottom: 0; }
.shell-v3 .settings-copy h3 { color: #eaf2f3; font-size: 18px; font-style: normal; }
.shell-v3 .settings-copy p { max-width: 540px; margin: 4px 0 0; color: var(--v3-muted); font-size: 11px; line-height: 1.45; }
.shell-v3 .settings-switch { position: relative; width: 58px; height: 32px; border: 1px solid var(--v3-line); clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); background: #071526; }
.shell-v3 .settings-switch i { position: absolute; left: 5px; top: 5px; width: 20px; height: 20px; background: #7890a3; transition: transform .2s var(--mola), background .2s; }
.shell-v3 .settings-switch.is-on { border-color: rgba(168,245,34,.55); background: rgba(71,107,19,.38); }
.shell-v3 .settings-switch.is-on i { background: var(--v3-lime); transform: translateX(26px); box-shadow: 0 0 12px rgba(168,245,34,.45); }
.shell-v3 .settings-segments { display: flex; border: 1px solid var(--v3-line); }
.shell-v3 .settings-segments button { min-height: 38px; padding: 7px 12px; color: #829bb0; border-left: 1px solid var(--v3-line); font: italic 900 12px var(--fd); text-transform: uppercase; }
.shell-v3 .settings-segments button:first-child { border-left: 0; }
.shell-v3 .settings-segments button.is-active { color: #071106; background: var(--v3-lime); }
.shell-v3 .settings-footnote { margin: 16px; color: var(--v3-muted); font-size: 10px; text-align: center; }

/* login */
.shell-v3.login-v3 { background-image: linear-gradient(90deg,rgba(2,9,18,.96),rgba(2,9,18,.25)), url('assets/ui/command-center-desktop-v1.webp'); background-size: cover; background-position: center; }
.shell-v3.login-v3 .login-panel { border: 1px solid var(--v3-line); background: rgba(3,14,27,.90); box-shadow: 0 25px 80px rgba(0,0,0,.45); }
.shell-v3.login-v3 .login-brand h1 { color: var(--v3-cream); }
.shell-v3.login-v3 .login-form-panel { border-color: var(--v3-line); background: rgba(5,24,42,.84); }

/* --------------------------------------------------------------------------
   Ficha grande de carta
   -------------------------------------------------------------------------- */

.shell-card-detail-v3 {
  background:
    radial-gradient(circle at 50% 36%, rgba(83,184,229,.24), transparent 30%),
    rgba(2,7,16,.94);
  backdrop-filter: blur(18px);
}
.shell-card-detail-v3 .ficha-palco { filter: drop-shadow(0 22px 35px rgba(0,0,0,.55)); }
.shell-card-detail-v3 .ficha-carta { transform: perspective(900px) rotateY(-2deg); }
.shell-card-detail-v3 .ficha-nome { color: #fffbea; border-color: rgba(84,220,255,.55); background: linear-gradient(90deg,rgba(2,8,17,.96),rgba(13,44,70,.94),rgba(2,8,17,.96)); text-shadow: 2px 3px #02050a; }
.shell-card-detail-v3 .ficha-efeito { color: #d8e5ea; border-color: rgba(84,220,255,.35); border-radius: 0; background: linear-gradient(145deg,rgba(14,48,78,.95),rgba(4,16,31,.98)); clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.shell-card-detail-v3 .ficha-efeito b { color: var(--v3-lime, #a8f522); }
.shell-card-detail-v3 .ficha-x { color: white; border: 2px solid #ff6b72; background: linear-gradient(180deg,#b93645,#671421); box-shadow: 0 0 22px rgba(255,77,84,.24); }

/* --------------------------------------------------------------------------
   Mobile — composição própria, não um desktop espremido
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .lobby-v3 {
    padding: 0 0 calc(72px + var(--safe-b));
  }
  .lobby-v3 .lobby-stage {
    position: absolute;
    inset: 0 0 calc(72px + var(--safe-b)) 0;
    height: auto;
    padding: calc(6px + var(--safe-t)) 8px 7px;
    grid-template-rows: 64px minmax(250px,1fr) 62px auto;
    gap: 7px;
    background-image:
      linear-gradient(0deg, #020a13 0 12%, transparent 50%),
      linear-gradient(90deg, rgba(2,9,17,.18), rgba(2,9,17,.04)),
      url('assets/ui/command-center-mobile-v1.webp');
    background-position: center top;
  }
  .lobby-v3 .lobby-topbar { height: 64px; gap: 5px; }
  .lobby-v3 .lobby-settings,
  .lobby-v3 .lobby-inbox { width: 42px; }
  .lobby-v3 .lobby-resources { order: 1; gap: 4px; }
  .lobby-v3 .lobby-settings { order: 0; }
  .lobby-v3 .lobby-pilot {
    order: 2;
    min-width: 0;
    width: 62px;
    height: 64px;
    margin-left: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    clip-path: none;
  }
  .lobby-v3 .lobby-pilot .pilot-avatar { left: 3px; top: 0; width: 56px; height: 60px; }
  .lobby-v3 .lobby-pilot .pilot-copy { position: absolute; left: 50%; top: 49px; width: 90px; padding: 3px 5px; color: white; background: #09203a; clip-path: polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); transform: translateX(-50%); text-align: center; }
  .lobby-v3 .pilot-copy b { font-size: 11px; }
  .lobby-v3 .pilot-copy small { display: none; }
  .lobby-v3 .lobby-inbox { order: 3; }
  .lobby-v3 .resource-pill { min-width: 61px; height: 48px; padding: 5px 7px; gap: 4px; }
  .lobby-v3 .resource-pill svg { width: 14px; }
  .lobby-v3 .resource-pill small { display: none; }
  .lobby-v3 .resource-pill b { margin: 0; font-size: 17px; }
  .lobby-v3 .lobby-feature { padding: 8px 5px 12px; align-items: flex-end; }
  .lobby-v3 .lobby-feature-copy { width: min(92%,390px); padding: 14px 16px 13px; border-left-width: 3px; background: linear-gradient(90deg,rgba(2,10,19,.91),rgba(2,10,19,.52),transparent); }
  .lobby-v3 .season-ribbon { padding: 4px 11px 4px 7px; font-size: 9px; }
  .lobby-v3 .lobby-feature h1 { max-width: 290px; margin-top: 8px; font-size: clamp(39px,13vw,56px); line-height: .83; }
  .lobby-v3 .lobby-feature p { max-width: 290px; margin: 9px 0 8px; font-size: 10px; line-height: 1.35; }
  .lobby-v3 .lobby-event-action { font-size: 11px; }
  .lobby-v3 .lobby-event-stamp { right: 5px; bottom: 8px; width: 72px; }
  .lobby-v3 .lobby-event-stamp b { font-size: 22px; }
  .lobby-v3 .lobby-event-stamp small { font-size: 5px; }
  .lobby-v3 .lobby-mission { height: 62px; padding: 8px 10px; grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; }
  .lobby-v3 .lobby-mission-icon { width: 31px; height: 31px; }
  .lobby-v3 .lobby-mission-icon svg { width: 17px; }
  .lobby-v3 .lobby-mission-copy small { font-size: 7px; }
  .lobby-v3 .lobby-mission-copy b { font-size: 13px; }
  .lobby-v3 .lobby-mission > em { font-size: 15px; }
  .lobby-v3 .lobby-launch { grid-template-columns: 1fr; gap: 5px; }
  .lobby-v3 .mode-switch { height: 36px; }
  .lobby-v3 .mode-switch button { min-height: 36px; padding: 3px; display: flex; align-items: center; justify-content: center; gap: 5px; }
  .lobby-v3 .mode-switch b { font-size: 12px; }
  .lobby-v3 .mode-switch small { margin: 0; font-size: 7px; }
  .lobby-v3 .lobby-launch-row { grid-template-columns: minmax(72px,.62fr) minmax(148px,1.35fr) minmax(66px,.55fr); gap: 5px; }
  .lobby-v3 .lobby-deck,
  .lobby-v3 .lobby-rank-core,
  .lobby-v3 .lobby-play { min-height: 76px; height: 76px; }
  .lobby-v3 .lobby-deck { padding: 4px; display: grid; justify-items: center; }
  .lobby-v3 .lobby-deck .deck-fan { width: 63px; height: 43px; }
  .lobby-v3 .lobby-deck .deck-fan .carta { --w: 31px; left: 15px; top: 3px; }
  .lobby-v3 .lobby-deck .deck-fan .carta:nth-child(1) { transform: translateX(-11px) rotate(-10deg); }
  .lobby-v3 .lobby-deck .deck-fan .carta:nth-child(2) { transform: translateX(-4px) rotate(-3deg); }
  .lobby-v3 .lobby-deck .deck-fan .carta:nth-child(3) { transform: translateX(5px) rotate(4deg); }
  .lobby-v3 .lobby-deck .deck-fan .carta:nth-child(4) { transform: translateX(13px) rotate(10deg); }
  .lobby-v3 .lobby-deck-copy { width: 100%; text-align: center; }
  .lobby-v3 .lobby-deck-copy small,
  .lobby-v3 .lobby-deck-copy em { display: none; }
  .lobby-v3 .lobby-deck-copy b { font-size: 9px; }
  .lobby-v3 .lobby-play span { font-size: clamp(27px,9vw,38px); }
  .lobby-v3 .lobby-play small { margin-top: 4px; font-size: 6px; }
  .lobby-v3 .lobby-rank-core { padding: 4px; display: grid; place-items: center; gap: 1px; }
  .lobby-v3 .rank-orbit { width: 44px; height: 44px; }
  .lobby-v3 .rank-orbit::before { width: 36px; height: 36px; }
  .lobby-v3 .rank-orbit strong { font-size: 20px; }
  .lobby-v3 .lobby-rank-core > span:last-child { text-align: center; }
  .lobby-v3 .lobby-rank-core b { font-size: 8px; }
  .lobby-v3 .lobby-rank-core small { display: none; }

  .shell-v3 .frog-dock-v3 {
    inset: auto 0 0;
    width: 100%;
    height: calc(72px + var(--safe-b));
    padding: 0 4px var(--safe-b);
    display: block;
    border: 0;
    border-top: 1px solid rgba(84,220,255,.34);
    background: linear-gradient(180deg,rgba(12,38,66,.98),rgba(3,12,25,.995));
    box-shadow: 0 -15px 35px rgba(0,0,0,.35);
  }
  .shell-v3 .frog-dock-v3 .dock-brand { display: none; }
  .shell-v3 .frog-dock-v3 .dock-items { height: 100%; display: grid; grid-template-columns: repeat(5,1fr); gap: 0; }
  .shell-v3 .frog-dock-v3 .dock-item { height: 100%; min-height: 0; padding: 7px 2px 5px; gap: 2px; clip-path: none; }
  .shell-v3 .frog-dock-v3 .dock-item.ativo { margin-top: -9px; padding-top: 5px; border: 1px solid rgba(84,220,255,.45); border-bottom: 0; background: linear-gradient(180deg,#174c77,#081c35); box-shadow: 0 -7px 22px rgba(84,220,255,.18); clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 16px,100% 100%,0 100%,0 16px); }
  .shell-v3 .frog-dock-v3 .di-forma { width: 30px; height: 29px; }
  .shell-v3 .frog-dock-v3 .di-forma svg { width: 21px; }
  .shell-v3 .frog-dock-v3 .di-rotulo { font-size: 8px; }
  .shell-v3 .frog-dock-v3 .di-aviso { top: 2px; right: 13%; }

  .matchmaking-v3 { padding: calc(8px + var(--safe-t)) 8px calc(8px + var(--safe-b)); background-position: center; }
  .matchmaking-v3 .matchmaking-stage { padding: 8px 4px; grid-template-rows: auto 1fr auto auto; }
  .matchmaking-v3 .matchmaking-title h1 { font-size: 39px; }
  .matchmaking-v3 .matchmaking-versus { grid-template-columns: 1fr; grid-template-rows: 1fr 76px 1fr; gap: 5px; }
  .matchmaking-v3 .matchmaking-player { grid-template-columns: 96px minmax(0,1fr); justify-items: stretch; align-items: center; width: min(360px,100%); }
  .matchmaking-v3 .matchmaking-player.is-searching { direction: rtl; }
  .matchmaking-v3 .matchmaking-player.is-searching > * { direction: ltr; }
  .matchmaking-v3 .matchmaking-player .avatar-grande { width: 92px; height: 104px; }
  .matchmaking-v3 .vs-tag { min-height: 64px; padding: 10px 12px; }
  .matchmaking-v3 .vs-nome { font-size: 19px; }
  .matchmaking-v3 .matchmaking-deck,
  .matchmaking-v3 .matchmaking-scan-copy { grid-column: 1 / -1; justify-content: center; font-size: 8px; }
  .matchmaking-v3 .matchmaking-core { width: 72px; height: 72px; justify-self: center; }
  .matchmaking-v3 .matchmaking-core span { font-size: 24px; }
  .matchmaking-v3 .matchmaking-note { margin: 4px 0 7px; font-size: 9px; }
  .matchmaking-v3 .btn-cancelar { min-width: 210px; min-height: 50px; }

  .shell-v3.collection-screen,
  .shell-v3.decks-screen,
  .shell-v3.deck-editor-screen,
  .shell-v3.progression-screen,
  .shell-v3.profile-screen {
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: calc(8px + var(--safe-t)) 8px calc(76px + var(--safe-b));
  }
  .shell-v3.profile-screen,
  .shell-v3.decks-screen,
  .shell-v3.deck-editor-screen,
  .shell-v3.settings-screen { padding-bottom: calc(10px + var(--safe-b)); }
  .shell-v3 .shell-header-v3,
  .shell-v3 .progression-header { min-height: 58px; padding-bottom: 8px; align-items: center; }
  .shell-v3 .shell-heading-v3 h2,
  .shell-v3 .progression-title { font-size: clamp(29px,9vw,39px); }
  .shell-v3 .progression-subtitle { max-width: 250px; font-size: 9px; }
  .shell-v3 .progression-header-actions { position: static; margin-left: auto; }
  .shell-v3 .collection-deck-rail { height: 88px; margin-block: 6px 4px; gap: 6px; }
  .shell-v3 .collection-deck-chip,
  .shell-v3 .collection-deck-chip.is-new {
    flex: 0 0 calc((100% - 6px) / 2);
    min-width: 0;
    height: 74px;
    padding: 6px 7px;
  }
  .shell-v3 .collection-deck-chip { grid-template-columns: 56px minmax(0,1fr); gap: 5px; }
  .shell-v3 .collection-deck-chip.is-new { grid-template-columns: 42px minmax(0,1fr); }
  .shell-v3 .collection-deck-stack { width: 62px; height: 55px; }
  .shell-v3 .collection-deck-stack .carta { --w: 36px; left: 13px; }
  .shell-v3 .collection-deck-chip b { font-size: 13px; line-height: 1.25; }
  .shell-v3 .collection-expansion-v3 { min-height: 72px; padding: 5px 8px; grid-template-columns: 88px minmax(0,1fr) auto; gap: 7px; }
  .shell-v3 .collection-expansion-art { width: 84px; height: 57px; }
  .shell-v3 .collection-expansion-art .carta { --w: 36px; left: 24px; top: 2px; }
  .shell-v3 .collection-expansion-art .carta:nth-child(1) { transform: translateX(-18px) rotate(-10deg); }
  .shell-v3 .collection-expansion-art .carta:nth-child(2) { transform: translateX(-6px) rotate(-3deg); }
  .shell-v3 .collection-expansion-art .carta:nth-child(3) { transform: translateX(7px) rotate(4deg); }
  .shell-v3 .collection-expansion-art .carta:nth-child(4) { transform: translateX(20px) rotate(10deg); }
  .shell-v3 .collection-expansion-copy b { font-size: 19px; }
  .shell-v3 .collection-expansion-copy em { max-width: 155px; font-size: 8px; line-height: 1.15; }
  .shell-v3 .collection-expansion-cta { font-size: 0; }
  .shell-v3 .collection-expansion-cta svg { width: 19px; }
  .shell-v3 .collection-account-strip { min-height: 31px; }
  .shell-v3 .collection-account-strip .chip { min-height: 25px; padding: 3px 7px; font-size: 9px; }
  .shell-v3 .collection-toolbar-v3 { margin-top: 3px !important; padding: 6px !important; grid-template-columns: 1fr; gap: 5px; }
  .shell-v3 .collection-tabs-v3 { overflow-x: auto; }
  .shell-v3 .aba { flex: 1; min-height: 34px; padding: 5px 9px; font-size: 11px; }
  .shell-v3 .collection-filter-row { grid-template-columns: 1fr 112px; }
  .shell-v3 .collection-search-v3 > span,
  .shell-v3 .collection-rarity-v3 > span { display: none; }
  .shell-v3 .collection-toolbar-v3 .campo { min-height: 44px !important; font-size: 12px; }
  .shell-v3 .collection-toolbar-v3 > .peq { font-size: 9px; }
  .shell-v3.collection-screen > .rolavel { padding: 5px 1px 20px; }
  .shell-v3 .grade-cartas { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 23px 7px; padding: 8px 2px 24px; }
  .shell-v3 .collection-card-item { padding-bottom: 19px; }
  .shell-v3 .collection-card-item .carta { --w: 100%; max-width: none; font-size: clamp(7px,2.35vw,9px); }
  .shell-v3 .collection-card-status { min-height: 24px; padding: 3px 6px; font-size: 8px; }
  .shell-v3 .deck-list-v3 { grid-template-columns: 1fr; }
  .shell-v3.deck-editor-screen .grade-cartas { grid-template-columns: repeat(3,minmax(0,1fr)); }

  .shell-v3 .mission-reward-track { min-height: 190px; grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .shell-v3 .mission-reward-track .progression-summary-stats { display: none; }
  .shell-v3 .reward-node i { width: 42px; height: 42px; }
  .shell-v3 .mission-list { grid-template-columns: 1fr; }
  .shell-v3 .mission-card { min-height: 150px; }
  .shell-v3 .ranking-podium { grid-template-columns: 1fr; }
  .shell-v3 .ranking-entry-podium,
  .shell-v3 .ranking-entry-podium:nth-child(1) { min-height: 88px; }
  .shell-v3 .store-grid { grid-template-columns: 1fr; }
  .shell-v3 .profile-settings-link { width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .shell-v3 .profile-settings-link svg { width: 18px; }
  .shell-v3 .settings-row { grid-template-columns: 1fr; gap: 10px; }
  .shell-v3 .settings-segments { width: 100%; }
  .shell-v3 .settings-segments button { flex: 1; padding-inline: 6px; font-size: 10px; }
}

@media (max-width: 340px) {
  .lobby-v3 .lobby-settings { display: none; }
  .lobby-v3 .resource-pill { min-width: 56px; }
  .lobby-v3 .lobby-feature h1 { font-size: 38px; }
  .lobby-v3 .lobby-feature p { display: none; }
  .lobby-v3 .lobby-event-action { margin-top: 7px; }
  .lobby-v3 .mode-switch small { display: none; }
  .lobby-v3 .lobby-launch-row { grid-template-columns: 64px minmax(140px,1fr) 58px; }
  .shell-v3 .collection-deck-chip { grid-template-columns: 51px minmax(0,1fr); gap: 4px; padding-inline: 6px; }
  .shell-v3 .collection-deck-chip.is-new { grid-template-columns: 40px minmax(0,1fr); }
  .shell-v3 .collection-deck-stack { width: 51px; }
  .shell-v3 .collection-deck-stack .carta { --w: 32px; left: 9px; }
  .shell-v3 .collection-deck-stack .carta:nth-child(1) { transform: translateX(-11px) rotate(-10deg); }
  .shell-v3 .collection-deck-stack .carta:nth-child(3) { transform: translateX(11px) rotate(10deg); }
  .shell-v3 .collection-deck-add { width: 40px; height: 40px; }
  .shell-v3 .collection-deck-chip b {
    font-size: 11px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }
  .shell-v3 .collection-deck-chip small { margin-top: 3px; font-size: 8px; line-height: 1.05; }
  .shell-v3 .grade-cartas,
  .shell-v3.deck-editor-screen .grade-cartas { grid-template-columns: repeat(2,minmax(0,1fr)); gap-inline: 8px; }
}

@media (max-height: 690px) and (max-width: 899px) {
  .lobby-v3 .lobby-stage { grid-template-rows: 58px minmax(205px,1fr) 54px auto; }
  .lobby-v3 .lobby-topbar { height: 58px; }
  .lobby-v3 .lobby-pilot { height: 58px; }
  .lobby-v3 .lobby-pilot .pilot-avatar { width: 50px; height: 54px; }
  .lobby-v3 .lobby-feature p { display: none; }
  .lobby-v3 .lobby-feature h1 { font-size: 38px; }
  .lobby-v3 .lobby-mission { height: 54px; }
  .lobby-v3 .lobby-deck,
  .lobby-v3 .lobby-rank-core,
  .lobby-v3 .lobby-play { min-height: 66px; height: 66px; }
}

body.sfx-reduced-motion .shell-v3 *,
body.sfx-reduced-motion .shell-v3 *::before,
body.sfx-reduced-motion .shell-v3 *::after { animation: none !important; transition-duration: .01ms !important; }
body[data-sfx-quality='baixa'] .shell-v3 { backdrop-filter: none !important; }
body[data-sfx-quality='baixa'] .shell-v3 *,
body[data-sfx-quality='baixa'] .shell-v3 *::before,
body[data-sfx-quality='baixa'] .shell-v3 *::after { box-shadow: none !important; filter: none !important; }
body[data-sfx-quality='media'] .shell-v3 .matchmaking-stage::before,
body[data-sfx-quality='media'] .shell-v3 .lobby-stage::before { opacity: .45; }
