:root { 
--radius: 10px;
--card-w: min(180px);
--card-h: min(250px);
--stack-visible: 128px;
--stack-start: 256px;
--stack-step: 48px;
--shadow: 0 35px 70px rgba(0, 0, 0, 0.30);
--shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.15);}

/* BLOQUEAR SELEÇÃO DE TEXTO - VIABILIZA O EFEITO DE ARRASTAR CARTAS NO DESKTOP - MOBILE */
.demo-cards-overlay,
.demo-cards-overlay * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

/* TAMANHO */
.demo-cards-overlay,
.demo-cards-overlay *,
.demo-cards-overlay *::before, .demo-cards-overlay *::after {box-sizing: border-box;}
.demo-cards-overlay .deck-stage{width:100%; height:100%; position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden;}

/* CARTAS DO JOGADOR */
.demo-cards-overlay{position:absolute; inset:0; display:none; padding:5px; background:var(--bg3); z-index:999; flex-direction:column; justify-content:flex-start; align-items:center;}
.demo-cards-overlay.active{display:flex;}

/* BOTÃO DE FECHAR DAS CARTAS */
.demo-cards-close{
  width:36px;
  height:36px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:var(--lightred);
  color:var(--tx1);
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  font-size:1.2rem;
  transition:.2s;}
.demo-cards-close:hover{transform:scale(1.08);}

/* TÍTULO EMBAIXO DO BOTÃO FECHAR */
.demo-cards-instruction{
  margin:7px;
  color: var(--tx1);
  text-align:center;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;}

.deck-stage::after {
content: "";
position: absolute;
left: 50%;
top: 8px;
width: min(90%, 400px);
height: 10%;
transform: translateX(-50%);
border-radius: 30px;
background:linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05) 40%),  radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.10), transparent 50%);
filter: blur(10px);
pointer-events: none;}

/* CARTA */
.card {position: absolute; left: 50%; top: 0; width: var(--card-w); height: var(--card-h); border-radius: var(--radius); overflow: hidden; transform-origin: center top;
transform: translate3d(calc(-50% + var(--x, 0px)), calc(var(--y, 0px) + var(--dragY, 0px)), 0) scale(var(--scale, 1)) rotate(var(--rot, 0deg));
transition: transform 700ms cubic-bezier(0.18, 0.86, 0.20, 1), box-shadow 700ms cubic-bezier(0.18, 0.86, 0.20, 1), filter 700ms cubic-bezier(0.18, 0.86, 0.20, 1);
will-change: transform; box-shadow: var(--shadow-soft); border: 1px solid rgba(255, 255, 255, 0.32);}

/* CARTA EM EVIDÊNCIA / EM TRANSIÇÃO */
.card.is-main {animation: glowPulse 3s ease-in-out infinite; z-index: 50; pointer-events: auto; cursor: grab; box-shadow: var(--shadow); filter: saturate(1.05) brightness(1.03);}
.card.is-main.is-dragging {cursor: grabbing; transition: none !important;}
.card.is-stack {pointer-events: none; clip-path: inset(0 0 calc(100% - var(--stack-visible)) 0 round var(--radius)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.50); filter: saturate(0.92) brightness(0.98);}
.card.is-leaving {pointer-events: none; z-index: 999; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.40);}
.card::before {content: ""; position: absolute; inset: -30% -40%; background: linear-gradient( 115deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.03) 50%, transparent 50%); transform: translateX(-140%) skewX(-18deg); animation: sheen 5s linear infinite; pointer-events: none;}
.card::after {content: ""; position: absolute; inset: 12px; border-radius: calc(var(--radius) - 12px); border: 3px solid rgba(255, 255, 255, 0.64);pointer-events: none;}

/* CARTA EM EVIDÊNCIA / INTERNO */
.card-inner {
position: relative;
width: 100%;
height: 100%;
padding: 10px 10px 10px;
display: flex;
flex-direction: column;
gap: 5px;
transform: translateY(0);}
.card.is-main .card-inner {animation: floatCard 5s ease-in-out infinite;}

/* CARTA TÍTULO*/
.card-head {
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
text-align: center;}

/* CARTA / CONTEÚDO */
.card-chip {
display: inline-flex; align-items: center; justify-content: center;
margin-top:12px; padding: 5px; border-radius: 800px;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.80);
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);}
.card-title {color: #ffffff; text-transform: uppercase; margin: 0; font-size: 1rem; line-height: 1; font-weight: 900; letter-spacing: 0.10em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);}
.card-description{margin:12px; font-size:0.7rem; font-weight:500;  color:rgba(255,255,255,.82); line-height:1.35; text-align:center;}
.card-divider {height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.50), transparent);}
.card-body {flex: 1; display: grid; place-items: center; min-height: 0;}
.card-emoji {font-size: 2.5rem; line-height: 1;filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.20)); user-select: none;  transform: translateY(-2px);}

/* CARTA / CORES DE FUNDO */
.card[data-theme="gold"] {background: linear-gradient(160deg, #f6d75e 0%, #d3941b 54%, #8b5308 100%);}
.card[data-theme="violet"] {background: linear-gradient(160deg, #d86ef8 0%, #8e49ff 52%, #44207f 100%);}
.card[data-theme="cyan"] {background: linear-gradient(160deg, #6fe6ff 0%, #2699d7 52%, #0d4d7a 100%);}
.card[data-theme="time"] {background: linear-gradient(160deg, #8ee2b1 0%, #2ab37c 54%, #0a6049 100%);}
.card[data-theme="light"] {background: linear-gradient(160deg, #ffd86d 0%, #ff9f3d 50%, #c05b09 100%);}
.card[data-theme="shield"] {background: linear-gradient(160deg, #9fc2ff 0%, #4d78db 52%, #183a84 100%);}

@keyframes floatCard {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}

@keyframes glowPulse {
0%, 100% { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34), 0 0 0 rgba(255, 255, 255, 0);  }
50% { box-shadow: 0 30px 78px rgba(0, 0, 0, 0.40), 0 0 42px rgba(255, 255, 255, 0.12);  }
}

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

@media (max-width: 520px) {
:root { --stack-visible: 120px; --stack-start: 240px;  --stack-step: 42px;}
.deck-stage {height: min(300px); }
.card-inner {padding: 10px 10px 10px;}
.card-head {min-height: 80px;}
}