/* Telas de menu da fatia (e): a escolha do deck (sobre a demonstração, como o início) e o Acervo só
   leitura (tela inteira, com rolagem nativa: touch-action pan-y na lista e nas cartas, porque a página
   bloqueia o gesto para a partida) com a folha do detalhe da carta. Tamanhos da grade vêm de
   src/ui/collection-model.js (gridLayout) por variáveis CSS. */

.game:is([data-screen="setup"], [data-screen="collection"], [data-screen="decks"], [data-screen="editor"], [data-screen="howto"]) :is(.topbar, .hud) {
  visibility: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(124, 58, 237, 0.2), transparent 70%),
    linear-gradient(#191c30, #0d0f1a);
}

/* Sobre a demonstração, escurecida como o início. */
.screen--over {
  align-items: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, rgba(26, 16, 54, 0.55), rgba(10, 8, 22, 0.9)),
    linear-gradient(rgba(10, 8, 22, 0.35), rgba(10, 8, 22, 0.6));
}

.screen-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(460px, 100%);
  height: 100%;
  min-height: 0;
  padding: 10px 16px 16px;
}

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

/* Barra do Acervo: o conteúdo alinhado com a coluna da lista (até 1000 px) no desktop. */
.screen-head--bar {
  flex: 0 0 auto;
  padding: 6px max(16px, calc((100% - 1000px) / 2 + 16px));
  border-bottom: 2px solid #2b2546;
  background: rgba(16, 12, 32, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.act-btn.screen-back {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 12px 0 10px;
  font-size: 16px;
}

.icon-back {
  width: 11px;
  height: 11px;
  border-left: 4px solid #f5f3ff;
  border-bottom: 4px solid #f5f3ff;
  transform: translateX(2px) rotate(45deg);
  filter: drop-shadow(0 0 1px var(--outline));
}

.screen-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-stroke: 4px var(--outline);
  paint-order: stroke fill;
}

.screen-count {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Conteúdo que rola sozinho quando não cabe (celular baixo); centralizado quando sobra altura. */
.screen-scroll {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Folga para a sombra e o brilho do deck escolhido. */
  padding: 6px 4px 10px;
  margin: 0 -4px;
}

.screen-scroll::-webkit-scrollbar {
  display: none;
}

.screen-foot {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ escolha do deck */
.deck-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.deck-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 10px 12px;
  border: 3px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(#3a3356, #231e3a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #0c0a16;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
}

.deck-option:active {
  transform: translateY(2px);
}

.deck-option:focus-visible {
  outline: 3px solid #d9c6ff;
  outline-offset: 2px;
}

.deck-option.is-selected {
  background: linear-gradient(#6a4cc0, #3b2a7a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px #d9c6ff, 0 4px 0 #0c0a16, 0 0 22px rgba(154, 102, 255, 0.6);
}

.deck-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Marca de escolha (rádio). */
.deck-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 3px solid var(--outline);
  border-radius: 50%;
  background: #2a2147;
  box-shadow: inset 0 0 0 2px #6e6496;
}

.deck-option.is-selected .deck-radio {
  background: radial-gradient(circle, #fff 0 34%, #b58bff 36% 100%);
  box-shadow: 0 0 8px rgba(220, 200, 255, 0.9);
}

.deck-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-stroke: 3px var(--outline);
  paint-order: stroke fill;
}

.deck-average {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
}

.deck-average b {
  font-weight: 400;
  -webkit-text-stroke: 3px var(--outline);
  paint-order: stroke fill;
}

.deck-average small {
  color: #d6ccf3;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
}

.deck-gem {
  width: 11px;
  height: 14px;
  background: linear-gradient(115deg, #f0e4ff 0 20%, #b58bff 21%, #7c3aed 70%);
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
}

.deck-cards {
  display: flex;
  gap: 4px;
  /* Folga para o cristal do custo, que sai do canto. */
  padding-top: 3px;
}

.deck-card {
  position: relative;
  flex: 0 0 var(--mini-w, 36px);
  height: var(--mini-h, 46px);
  border-radius: 4px;
  background: #1c1530;
  box-shadow: 0 2px 0 #0c0a16;
}

.deck-card canvas {
  display: block;
  border-radius: 4px;
}

.mini-cost {
  position: absolute;
  left: -3px;
  top: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 19px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 22%, transparent 23%),
    linear-gradient(#c7a6ff, #8b4dff 45%, #5b21b6);
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  -webkit-text-stroke: 2px var(--outline);
  paint-order: stroke fill;
}

.setup-note {
  margin: 0 0 auto;
  color: #c9bfe6;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

/* ------------------------------------------------------------------ Acervo */
.collection-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.collection-hint {
  margin: 12px 16px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.collection-list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px max(28px, env(safe-area-inset-bottom));
}

.collection-domain {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  -webkit-text-stroke: 3px var(--outline);
  paint-order: stroke fill;
}

.collection-domain small {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  -webkit-text-stroke: 0;
}

.domain-gem {
  flex: 0 0 auto;
  align-self: center;
  width: 13px;
  height: 13px;
  border: 2px solid var(--outline);
  border-radius: 3px;
  background: var(--domain, #8f9ab5);
  box-shadow: 0 0 8px var(--domain, #8f9ab5);
  transform: rotate(45deg);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--tile-w, 88px));
  gap: var(--gap, 8px);
}

/* Carta da grade: o retrato do motor de arte com a placa do nome, o nome e o cristal do custo, como a
   carta da mão. Tocar abre o detalhe; o dedo que arrasta em cima dela rola a lista. */
.card.card--tile {
  position: relative;
  width: var(--tile-w, 88px);
  height: var(--tile-h, 113px);
  touch-action: pan-y;
  cursor: pointer;
}

.card--tile .card-name {
  font-size: var(--name-size, 12px);
}

.card--tile:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0c0a16;
}

.card--tile:focus-visible {
  outline: 3px solid #d9c6ff;
  outline-offset: 2px;
}

/* Folha do detalhe por cima da grade; a ficha rola sozinha quando não cabe e Fechar fica sempre à vista. */
.sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(9, 7, 20, 0.74);
}

.sheet-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, 100%);
  max-height: 100%;
  min-height: 0;
}

.card-detail.card-detail--sheet {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: auto;
  flex: 0 1 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  padding: 14px 14px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transform: none;
  pointer-events: auto;
}

.card-detail--sheet .detail-name {
  font-size: 24px;
}

.card-detail--sheet .detail-type {
  font-size: 14px;
}

.card-detail--sheet .detail-rules,
.card-detail--sheet .detail-chip {
  font-size: 14px;
}

.card-detail--sheet .detail-tooltip,
.card-detail--sheet .detail-facts,
.card-detail--sheet .detail-flavor {
  font-size: 13px;
}

.detail-roles {
  color: #e8dcff;
  font-size: 12px;
  font-weight: 700;
}

.detail-roles[hidden] {
  display: none;
}

.sheet-close {
  flex: 0 0 auto;
  min-height: 48px;
  font-size: 20px;
}

@media (max-height: 680px) {
  .card-detail--sheet .detail-name {
    font-size: 20px;
  }

  .card-detail--sheet .detail-rules,
  .card-detail--sheet .detail-chip {
    font-size: 13px;
  }

  .card-detail--sheet .detail-tooltip,
  .card-detail--sheet .detail-facts,
  .card-detail--sheet .detail-flavor {
    font-size: 12px;
  }

  .screen-title {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-detail.card-detail--sheet {
    animation: none;
  }
}

/* Nível do bot (Fácil, Normal, Difícil), acima dos decks. */
.level-pick {
  display: flex;
  align-items: center;
  gap: 6px;
}

.level-title {
  flex: 0 0 auto;
  margin-right: 2px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  -webkit-text-stroke: 3px var(--outline);
  paint-order: stroke fill;
}

.level-option {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 6px 4px;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: linear-gradient(#3a3356, #231e3a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 3px 0 #0c0a16;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  -webkit-text-stroke: 3px var(--outline);
  paint-order: stroke fill;
  cursor: pointer;
  touch-action: manipulation;
}

.level-option:active {
  transform: translateY(2px);
}

.level-option:focus-visible {
  outline: 3px solid #d9c6ff;
  outline-offset: 2px;
}

.level-option.is-selected {
  background: linear-gradient(#6a4cc0, #3b2a7a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px #d9c6ff, 0 3px 0 #0c0a16, 0 0 16px rgba(154, 102, 255, 0.6);
}