/* ====== STAG DO HERO (STREAMLINED) ====== */
:root{
  --bg0:#090a10;
  --bg1:#0c0f1a;
  --card:#0f1322;
  --card2:#0c1020;
  --text:#f3f4f6;
  --muted:rgba(243,244,246,.72);
  --line:rgba(255,255,255,.10);

  --pink:#ff33cc;
  --green:#65ff4a;

  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,51,204,.18), transparent 55%),
    radial-gradient(900px 520px at 80% 45%, rgba(101,255,74,.14), transparent 60%),
    radial-gradient(700px 420px at 55% 95%, rgba(120,120,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap{ width:min(980px, 92vw); margin:0 auto; padding:22px 0 34px; }
.hidden{ display:none !important; }

h1,h2{ margin:0 0 12px; }
h1{ font-size:28px; letter-spacing:.5px; }
h2{ font-size:18px; opacity:.9; }
.muted{ color:var(--muted); }

/* ====== UI SURFACE ====== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
  backdrop-filter: blur(6px);
}

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

input,select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
input::placeholder{ color: rgba(243,244,246,.55); }
select option{ color:#111; }

button{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.3px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
button:active{ transform: scale(.98); }
button:disabled{ opacity:.45; cursor:not-allowed; }

.btn-pink{
  border-color: rgba(255,51,204,.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(255,51,204,.35), rgba(255,51,204,.12));
}
.btn-pink:hover{ box-shadow: 0 0 22px rgba(255,51,204,.25); }

.btn-green{
  border-color: rgba(101,255,74,.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 45%),
    linear-gradient(180deg, rgba(101,255,74,.30), rgba(101,255,74,.10));
}
.btn-green:hover{ box-shadow: 0 0 22px rgba(101,255,74,.22); }

/* ====== LOBBY STRIP ====== */
.deck-strip{
  display:flex; gap:12px; overflow-x:auto;
  padding:10px 4px; scroll-snap-type:x mandatory;
}
.deck-tile{
  flex:0 0 220px; scroll-snap-align:start;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  padding:14px; cursor:pointer; user-select:none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.deck-tile:active{ transform: scale(.98); }
.deck-tile.selected{ border-color: rgba(255,51,204,.7); box-shadow: 0 0 22px rgba(255,51,204,.18); }
.deck-name{ font-weight:1000; font-size:20px; text-align:center; margin:6px 0 2px; }
.deck-sub{ text-align:center; font-size:13px; opacity:.75; margin-bottom:10px; }
.deck-votes{ text-align:center; font-size:14px; opacity:.9; }
.deck-votes strong{ font-size:18px; }

/* ====== GAME CARD STAGE ====== */
.stage-center{ width:100%; display:flex; justify-content:center; align-items:center; margin:28px 0 18px; }

.card-3d{
  width:min(520px, 100%);
  aspect-ratio: 2.5 / 3.5;
  perspective:1200px;
  max-height:68vh;
}
.card-shell{ width:100%; height:100%; display:block; transform-style:preserve-3d; }

/* =========================================================
   FLIP CARD (BULLETPROOF: NO MIRRORED TEXT / NO BLEED-THRU)
   ========================================================= */
.playing-card{
  width:100%;
  height:100%;
  border-radius:18px;
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  overflow:hidden;

  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2,.8,.2,1);

  /* compositor isolation (Chrome/Edge fix) */
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint;
  isolation: isolate;
}
.playing-card.is-flipped{ transform: rotateY(180deg) translateZ(0); }
.playing-card.no-trans{ transition:none !important; }

.card-face{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;

  /* KEY: hide face AND its children */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* make each face its own layer */
  transform: translateZ(0);
  will-change: transform;

  /* fully opaque base so nothing shows through */
  background: var(--card);
}
.card-face *{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform: translateZ(0); /* forces text onto same isolated layer */
}

/* separate planes */
.card-front{ transform: rotateY(0deg) translateZ(2px); }
.card-back { transform: rotateY(180deg) translateZ(2px); }

/* FRONT look */
.card-front{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)),
    linear-gradient(180deg, var(--card), var(--card2));
}
.card-front::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,51,204,0.10), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(101,255,74,0.08), transparent 45%),
    radial-gradient(circle at 40% 90%, rgba(255,255,255,0.04), transparent 50%);
  pointer-events:none;
  opacity:.55;
}

/* BACK (static deck back) */
.card-back{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,51,204,.16), transparent 55%),
    radial-gradient(900px 520px at 80% 45%, rgba(101,255,74,.12), transparent 60%),
    linear-gradient(180deg, var(--card2), #070812);
}

/* if old back markup exists anywhere, hide it */
.card-back .back-inner{ display:none !important; }

/* Back branding (works with your current HTML too) */
.deck-back{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center;
  padding:22px;
}
.deck-logo{
  font-weight:1100;
  letter-spacing:1.6px;
  line-height:.95;
  font-size: clamp(34px, 6vw, 54px);
  text-transform:uppercase;
  color: var(--text);
}
.deck-logo .pink{
  display:block;
  color: var(--pink);
  text-shadow: 0 0 28px rgba(255,51,204,.28);
}
.deck-sub{
  margin-top:14px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color: rgba(243,244,246,.70);
}
.deck-back::before{
  content:"";
  position:absolute; inset:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 45%),
    linear-gradient(45deg, rgba(255,255,255,0.03), transparent 60%);
  pointer-events:none;
}

/* FRONT content */
.card-inner{
  height:100%;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  position:relative;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  border-radius:999px;
  padding:6px 10px;
  width:fit-content;
  opacity:.95;
}
.card-title{ font-size:18px; font-weight:900; opacity:.85; margin-top:6px; }
.card-text{ font-size: clamp(18px, 3vw, 28px); font-weight:1100; line-height:1.15; }

/* ====== THEMES (glow) ====== */
.playing-card.theme-mild{
  box-shadow:
    0 0 0 1px rgba(101,255,74,.35),
    0 18px 40px rgba(0,0,0,.5),
    0 0 28px rgba(101,255,74,.18);
}
.playing-card.theme-medium{
  box-shadow:
    0 0 0 1px rgba(255,176,32,.35),
    0 18px 40px rgba(0,0,0,.5),
    0 0 28px rgba(255,176,32,.18);
}
.playing-card.theme-savage{
  box-shadow:
    0 0 0 1px rgba(255,51,204,.45),
    0 18px 40px rgba(0,0,0,.5),
    0 0 32px rgba(255,51,204,.28);
}

/* ===== CINEMATIC DRAW ===== */
.card-shell.cinematic{
  animation: cinematicDraw 650ms cubic-bezier(.2,.9,.2,1);
  transform-origin:center;
}
@keyframes cinematicDraw{
  0%{ transform: translateY(10px) rotateX(10deg) scale(0.98); }
  55%{ transform: translateY(-6px) rotateX(0deg) scale(1.02); }
  100%{ transform: translateY(0px) rotateX(0deg) scale(1); }
}

/* ===== REVEAL FLASH ===== */
.playing-card.reveal-hit{ animation: revealFlash 350ms ease; }
@keyframes revealFlash{ 0%{ filter: brightness(1.8); } 100%{ filter: brightness(1); } }

/* ================================
   RARITY (3s)
   ================================ */
body.fx-rare{ animation: fxRare .60s ease-out; }
body.fx-legendary{ animation: fxLegendary .95s ease-out; }

@keyframes fxRare{
  0%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.00); }
  18%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.18); }
  100%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.00); }
}
@keyframes fxLegendary{
  0%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.00); transform: translateZ(0) scale(1); }
  16%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.26); transform: translateZ(0) scale(1.01); }
  38%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.14); transform: translateZ(0) scale(1.00); }
  100%{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.00); transform: translateZ(0) scale(1); }
}

.playing-card.rarity-rare{
  filter: saturate(1.10) brightness(1.08);
  animation: rareHold 3000ms cubic-bezier(.18,.85,.22,1);
}
.playing-card.rarity-rare::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius:22px; pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.95),
    rgba(185,195,210,0.70),
    rgba(255,255,255,0.85),
    rgba(160,170,185,0.70)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:3px;
  box-shadow: 0 0 16px rgba(255,255,255,0.14), 0 0 30px rgba(185,195,210,0.10);
  animation: rareRing 3000ms cubic-bezier(.18,.85,.22,1);
  opacity:0;
}
.playing-card.rarity-rare::after{
  content:"";
  position:absolute; inset:-45%;
  border-radius:26px; pointer-events:none;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.00) 70%,
    transparent 100%
  );
  transform: translateX(-60%) rotate(10deg);
  animation: rareShimmer 3000ms cubic-bezier(.18,.85,.22,1);
  opacity:0;
}
@keyframes rareHold{ 0%{ transform: scale(0.995); } 35%{ transform: scale(1.01); } 100%{ transform: scale(1.00); } }
@keyframes rareRing{
  0%{ opacity:0; transform: scale(0.98); filter: brightness(1.60); }
  18%{ opacity:1; transform: scale(1.01); filter: brightness(1.14); }
  55%{ opacity:.85; transform: scale(1.015); filter: brightness(1.04); }
  100%{ opacity:0; transform: scale(1.03); filter: brightness(1.00); }
}
@keyframes rareShimmer{
  0%{ opacity:0; transform: translateX(-70%) rotate(10deg); }
  22%{ opacity:.95; }
  60%{ opacity:.88; }
  100%{ opacity:0; transform: translateX(70%) rotate(10deg); }
}

.playing-card.rarity-legendary{
  filter: saturate(1.20) brightness(1.10);
  animation: legendaryHold 3000ms cubic-bezier(.12,.9,.2,1);
}
.playing-card.rarity-legendary::before{
  content:"";
  position:absolute; inset:-4px;
  border-radius:24px; pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,244,200,0.98),
    rgba(255,200,70,0.78),
    rgba(255,240,180,0.92),
    rgba(255,176,32,0.82)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:4px;
  box-shadow: 0 0 22px rgba(255,176,32,0.22), 0 0 55px rgba(255,176,32,0.12);
  animation: legendaryRing 3000ms cubic-bezier(.12,.9,.2,1);
  opacity:0;
}
.playing-card.rarity-legendary::after{
  content:"";
  position:absolute; inset:-60%;
  border-radius:30px; pointer-events:none;
  background: conic-gradient(from 10deg,
    rgba(255,220,120,0.00) 0deg,
    rgba(255,220,120,0.00) 10deg,
    rgba(255,220,120,0.22) 18deg,
    rgba(255,220,120,0.00) 26deg,
    rgba(255,220,120,0.00) 40deg,
    rgba(255,220,120,0.18) 48deg,
    rgba(255,220,120,0.00) 56deg,
    rgba(255,220,120,0.00) 72deg,
    rgba(255,220,120,0.20) 80deg,
    rgba(255,220,120,0.00) 88deg,
    rgba(255,220,120,0.00) 110deg,
    rgba(255,220,120,0.16) 118deg,
    rgba(255,220,120,0.00) 126deg,
    rgba(255,220,120,0.00) 150deg,
    rgba(255,220,120,0.22) 158deg,
    rgba(255,220,120,0.00) 166deg,
    rgba(255,220,120,0.00) 190deg,
    rgba(255,220,120,0.18) 198deg,
    rgba(255,220,120,0.00) 206deg,
    rgba(255,220,120,0.00) 232deg,
    rgba(255,220,120,0.20) 240deg,
    rgba(255,220,120,0.00) 248deg,
    rgba(255,220,120,0.00) 275deg,
    rgba(255,220,120,0.16) 283deg,
    rgba(255,220,120,0.00) 291deg,
    rgba(255,220,120,0.00) 320deg,
    rgba(255,220,120,0.22) 328deg,
    rgba(255,220,120,0.00) 336deg
  );
  filter: drop-shadow(0 0 18px rgba(255,176,32,0.22));
  transform: scale(0.45) rotate(-8deg);
  opacity:0;
  animation: legendaryBurst 3000ms cubic-bezier(.12,.95,.2,1);
}
@keyframes legendaryHold{
  0%{ transform: scale(0.992); }
  25%{ transform: scale(1.02); }
  55%{ transform: scale(1.01); }
  100%{ transform: scale(1.00); }
}
@keyframes legendaryRing{
  0%{ opacity:0; transform: scale(0.965); filter: brightness(1.60); }
  16%{ opacity:1; transform: scale(1.02); filter: brightness(1.18); }
  52%{ opacity:.95; transform: scale(1.03); filter: brightness(1.05); }
  100%{ opacity:0; transform: scale(1.05); filter: brightness(1.00); }
}
@keyframes legendaryBurst{
  0%{ opacity:0; transform: scale(0.35) rotate(-10deg); }
  18%{ opacity:1; transform: scale(0.75) rotate(-4deg); }
  45%{ opacity:.95; transform: scale(1.12) rotate(4deg); }
  80%{ opacity:.85; transform: scale(1.28) rotate(6deg); }
  100%{ opacity:0; transform: scale(1.55) rotate(12deg); }
}

/* ===== MOBILE ===== */
@media (max-width:520px){
  .wrap{ width:94vw; padding:16px 0 26px; }
  h1{ font-size:22px; }
  .card{ padding:14px; border-radius:16px; }
  button,input,select{ padding:14px; border-radius:14px; font-size:16px; }
  .row{ gap:12px; }
  .row.space{ gap:12px; align-items:stretch; }
  .game-controls{ flex-direction:column; align-items:stretch; }
  .game-controls > *{ width:100%; }
}

/* ====== LANDING PAGE (RESTORE OLD LOOK) ====== */
.topbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 22px;
}

.brand{
  font-weight: 1000;
  letter-spacing: .8px;
  color: #fff; /* ✅ STAG is white */
}
.brand .pink{
  color: var(--pink); /* ✅ DO HERO stays pink if wrapped */
  text-shadow: 0 0 18px rgba(255,51,204,.25);
}

.hero{
  text-align:center;
  padding: 34px 12px 22px;
}

.hero h1{
  font-size: clamp(36px, 6vw, 62px);
  font-weight: 1000;
  letter-spacing: 1.2px;
  margin: 0 0 10px;
}

.hero .big{
  display:block;
  font-size: clamp(46px, 7vw, 78px);
  font-weight: 1100;
  letter-spacing: 1.6px;
  color: var(--pink);
  text-shadow: 0 0 28px rgba(255,51,204,.25);
}

.hero p{
  margin: 10px auto 18px;
  max-width: 720px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .6px;
}

.cta{
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.footer-note{
  text-align:center;
  margin-top: 20px;
  color: rgba(243,244,246,.55);
  font-size: 13px;
}
/* ===== EFFECTIVE DECK HIGHLIGHT ===== */

.deck-tile.effective{
  border-color: rgba(255,51,204,.85);
  box-shadow:
    0 0 0 1px rgba(255,51,204,.55),
    0 0 28px rgba(255,51,204,.25),
    0 10px 28px rgba(0,0,0,.35);

  transform: translateY(-2px) scale(1.02);
}

/* subtle breathing glow */
.deck-tile.effective::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  pointer-events:none;

  box-shadow: 0 0 32px rgba(255,51,204,.25);
  opacity:.6;

  animation: effectivePulse 2.4s ease-in-out infinite;
}

@keyframes effectivePulse{
  0%   { opacity:.35; }
  50%  { opacity:.75; }
  100% { opacity:.35; }
}