#cardsView .card-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;width:100%;min-width:0;}

/* CARTAS - Regras ocupa toda a linha */
#cardsView .card-grid>article:first-child{grid-column:1/-1;min-width:0;}

/* CARTAS - Carrossel */
#cardsView #cardDeck{display:flex;width:100%;min-width:0;max-width:100%;height:230px;align-items:center;gap:14px;padding:10px 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-sizing:border-box;}

/* CARTAS - Esconder scrollbar */
#cardsView #cardDeck::-webkit-scrollbar{display:none;}

/* CARTAS - Botões */
#cardsView .cards-rule-actions{display:flex;justify-content:center;align-items:center;gap:10px;margin:20px;}

/* CARTAS - Botões iguais */
#cardsView .cards-rule-actions .btn{flex:1;width:auto;margin:0;}

/* CARTAS - Informações */
#cardsView .card-grid>article:nth-child(2){grid-column:1;min-width:0;}

/* CARTAS - Efeitos */
#cardsView .card-grid>article:nth-child(3){grid-column:2;min-width:0;}

/* CARTAS — Responsividade */
@media(max-width:800px){
  #cardsView .card-grid{grid-template-columns:1fr;}
  #cardsView .card-grid>article:first-child{grid-column:auto;}
  #cardsView .cards-rule-actions{flex-direction:column;}
  #cardsView .cards-rule-actions .btn{width:100%;}}

/* CARTAS — Área de EFEITOS */
.question-card-effect{width:min(100%,650px);max-width:650px;margin:12px auto 0;overflow:hidden;border-radius:20px;background:rgba(0,0,0,.20);}

/* CARTAS — Imagem de EFEITOS */
.question-card-effect img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;border-radius:18px;}

/* CARTAS — Responsividade da imagem */
@media(max-width:800px){
.question-card-effect{max-width:100%;}
.question-card-effect img{max-height:280px;}
}

/* CARTAS - Contorno interno universal */
.question-card{position:relative;overflow:hidden;}

/* CARTAS - Borda interna universal */
.question-card::after{
 margin:5px; content:"";position:absolute;inset:0;border:5px solid rgba(255,255,255,.70);border-radius:inherit;pointer-events:none;z-index:20;box-sizing:border-box;}

/* CARTAS - Descrição da carta selecionada */
.question-card-description{color:var(--purple)!important;}

/* CARTAS - Carta selecionada */
.question-card-selected{color:var(--purple)!important;}

/* CARTAS - Conteúdo da carta selecionada */
.question-card-selected-info{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--purple);}

/* CARTAS - Ícone da carta selecionada */
.question-card-selected-info i{color:var(--purple);font-size:1.8rem;}

/* CARTAS - Título da carta selecionada */
.question-card-selected-info strong{color:var(--purple);font-size:1rem;}



/* DECKS - Container */
.question-player-hands{width:100%;max-width:100%;display:grid;gap:10px;overflow:hidden;}

/* DECKS - Linha do jogador */
.question-player-hand-row{width:100%;min-width:0;display:grid;gap:6px;overflow:hidden;}

/* DECKS - Nome do jogador */
.question-player-hand-row>strong{color:var(--white);font-size:var(--font-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* DECKS - Área horizontal das cartas */
.question-player-hand-scroll{width:100%;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px;scrollbar-width:none;touch-action:pan-x;}

/* DECKS - Esconder scrollbar WebKit */
.question-player-hand-scroll::-webkit-scrollbar{display:none;}

/* ------------------------------------------------------------
   QUESTIONS — Grade das cartas de resposta
   ------------------------------------------------------------ */
.question-card-choice {width:100%;display: inline-flex;  align-items: center;  gap: var(--gap); margin-bottom: 10px; padding: 10px; background: var(--panel-purple);
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: var(--border-radius-small);
  font-size: var(--font-small);
  font-weight: 700;
}

.question-card-choice span {font-size: var(--font-small);}
.question-cards {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.question-card {display: grid; min-height: 64px; align-items: center; justify-items: center;
  gap: 5px; background: var(--panel); color: var(--white); border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  font: inherit;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;}
.question-card:hover {transform: translateY(-3px); border-color: var(--purple);}
.question-card i {font-size: var(--font-small); color: var(--white);}
.question-card span {
  color: var(--white);
  font-size: var(--font-micro);
  text-align: center;}
.question-card.selected {background: rgba(166, 70, 234, .30); border-color: var(--purple); box-shadow: 0 0 20px rgba(166, 70, 234, .30);}
.question-card.selected i,
.question-card.selected span {
  color: var(--purple);}
/* ------------------------------------------------------------
   QUESTIONS — Preview da carta e mão dos jogadores
   ------------------------------------------------------------ */

.question-card-preview {display: flex; width: 100%;
  min-height: 64px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: var(--panel-purple);
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: var(--border-radius-small);}

.question-card-preview i {font-size: 20px; color: var(--purple);}
.question-card-preview > i {color: var(--purple);}
.question-card-preview span {color: var(--purple); font-size: var(--font-small); font-weight: 800;}
.question-player-hand {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

.question-player-hand > strong {color: var(--text);font-size: var(--font-small);}

.question-hand-cards {
  display: flex;
  height: 54px;
  padding: 0 6px;
  align-items: flex-end;
  justify-content: center;}
.question-card-back {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);}
.question-card-back:first-child {margin-left: 0;}

/* ------------------------------------------------------------
   QUESTIONS — Mini-baralho horizontal
   ------------------------------------------------------------ */
/* Deck - Scroll horizontal */
.question-card-deck{width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;touch-action:pan-x;-webkit-overflow-scrolling:touch;}
.question-card-deck::-webkit-scrollbar {display: none;}

/* Deck - Trilha interna horizontal */
.question-card-deck-track{display:flex;align-items:center;gap:20px;width:max-content;padding:10px 10px 10px;}

/* Minicarta base */
.question-mini-card {
  position: relative;
  flex: 0 0 var(--question-mini-card-width);
  width: var(--question-mini-card-width);
  height: var(--question-mini-card-height);
  overflow: hidden;
  background: var(--panel);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: var(--border-radius-small);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .20);
  cursor: pointer;
  transition:
    transform .35s ease,
    filter .35s ease,
    opacity .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.question-mini-card:hover {
  transform: translateY(-5px);
}

/* Reflexo */
.question-mini-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, .22) 49%,
    rgba(255, 255, 255, .04) 51%,
    transparent 62%
  );
  transform: translateX(-140%) skewX(-18deg);
  animation: questionCardSheen 7s linear infinite;
}

/* Conteúdo da minicarta */
.question-mini-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

.question-mini-card-inner strong {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.question-mini-card-inner span {font-size: 30px;}

/*
  O FA-SOLID foi retirado do minicard.
  O elemento abaixo não precisa mais existir no HTML:
  .question-mini-icon
  .question-mini-card i
*/

/* Deck - Carta inativa Estado de Carta INATIVA */
.question-mini-card.used{filter:grayscale(1);opacity:.35;background:#555!important;color:#aaa;box-shadow:none;}
/* Deck - Hover da carta inativa */
.question-mini-card.used:hover{transform:none;filter:grayscale(1);opacity:.35;}
.question-mini-card.used::before {animation: none; opacity: 0;}

/* ------------------------------------------------------------
   QUESTIONS — Temas individuais das minicartas
   ------------------------------------------------------------ */
.question-mini-card[data-theme="gold"]{
    background:
        linear-gradient(
            160deg,
            #f6d75e 0%,
            #d3941b 54%,
            #8b5308 100%
        );
}

.question-mini-card[data-theme="help"]{
    background:
        linear-gradient(
            160deg,
            #f86e6e 0%,
            #e74a4a 52%,
            #501313 100%
        );
}

.question-mini-card[data-theme="cyan"]{
    background:
        linear-gradient(
            160deg,
            #6fe6ff 0%,
            #2699d7 52%,
            #0d4d7a 100%
        );
}

.question-mini-card[data-theme="time"]{
    background:
        linear-gradient(
            160deg,
            #8ee2b1 0%,
            #2ab37c 60%,
            #0a6049 100%
        );
}

.question-mini-card[data-theme="light"]{
    background:
        linear-gradient(
            160deg,
            #ffd86d 0%,
            #ff9f3d 50%,
            #c05b09 100%
        );
}

.question-mini-card[data-theme="shield"]{
    background:
        linear-gradient(
            160deg,
            #9fc2ff 0%,
            #4d78db 50%,
            #183a84 100%
        );
}

.question-mini-card[data-theme="ia"]{
    background:
        linear-gradient(
            160deg,
            #f49fff 0%,
            #db4db8 50%,
            #84185b 100%
        );
}

.question-mini-card[data-theme="partner"]{
    background:
        linear-gradient(
            160deg,
            #d5b8ff 0%,
            #9254d8 52%,
            #3a145f 100%
        );
}

/* ------------------------------------------------------------
   ANIMAÇÕES
   ------------------------------------------------------------ */

@keyframes questionCardSheen {
  0% {transform: translateX(-140%) skewX(-18deg);
  }

  100% {
    transform: translateX(140%) skewX(-18deg);
  }
}