/* ══════════════════════════════════════════════════════
   CardVault v3  —  base.css
   Global layout, lobby, carousel, pack-rip, summary,
   utility animations. Card-specific styles → cards.css
══════════════════════════════════════════════════════ */

:root {
  --bg:#060812; --surface:#111827; --border:#1e2d4a;
  --text:#e8eaf6; --text-dim:#6b7a99; --accent:#4f8ef7; --gold:#f5c842;
  --common:#9ca3af; --uncommon:#34d399; --rare:#60a5fa;
  --epic:#a855f7; --special:#f97316; --legendary:#f5c842;
  --mythical:#ec4899; --secret:#ffffff;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:'Rajdhani',sans-serif; }

/* ── Canvases & overlays ── */
#particleCanvas { position:fixed; inset:0; pointer-events:none; z-index:0; }
#epicBurst      { position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0; transition:opacity .3s; }
#epicBurst.active { opacity:1; }
#setFxCanvas    { position:fixed; inset:0; pointer-events:none; z-index:2; }

/* ── Ambient orbs ── */
.orb { position:fixed; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:1; animation:orbFloat var(--dur) ease-in-out infinite alternate; }
@keyframes orbFloat { from{transform:translate(0,0)} to{transform:translate(var(--tx),var(--ty))} }

/* ── Screens ── */
.screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; transition:opacity .6s ease, transform .6s ease; }
.screen.hidden { opacity:0; pointer-events:none; transform:scale(.96); }

/* ════════════════════════════════
   LOBBY
════════════════════════════════ */
#lobby {
  justify-content:stretch; padding:0;
  display:grid; grid-template-rows:auto auto 1fr auto; gap:0; overflow:hidden;
}

.lobby-header {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:clamp(18px,3.5vh,36px) 0 clamp(6px,1.2vh,14px); flex-shrink:0;
}
.lobby-title {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(2rem,5vw,4rem); font-weight:900; text-align:center;
  background:linear-gradient(135deg,#fff 0%,var(--gold) 40%,#f97316 80%,#ec4899 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(245,200,66,.4));
  letter-spacing:.06em; line-height:1.1;
}
.lobby-sub {
  font-family:'Orbitron',monospace; font-size:.72rem;
  letter-spacing:.3em; color:var(--text-dim); text-transform:uppercase;
}

.set-info-panel {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex-shrink:0; padding-bottom:clamp(6px,1.2vh,14px);
}
.set-name-display {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1rem,2.2vw,1.5rem); font-weight:700; text-align:center;
  transition:color .5s, text-shadow .5s;
}
.set-tag-display {
  font-family:'Orbitron',monospace; font-size:.6rem;
  letter-spacing:.22em; color:var(--text-dim); text-transform:uppercase;
  transition:color .5s;
}

/* ── Carousel ── */
.carousel-wrapper {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; min-height:0; perspective:1000px;
  cursor:grab; user-select:none; touch-action:none;
}
.carousel-wrapper:active { cursor:grabbing; }
.carousel-stage {
  position:relative; width:180px; height:260px; transform-style:preserve-3d;
}
.carousel-item {
  position:absolute; width:clamp(150px,20vw,210px); height:100%;
  top:0; left:50%; transform-origin:center center;
  border-radius:16px; overflow:hidden; backface-visibility:hidden;
  transition:opacity .35s ease, filter .35s ease;
}
.pack-face {
  width:100%; height:100%; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden; border:2px solid transparent;
}
.pack-shine {
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  animation:packShine 3s infinite;
}
@keyframes packShine { 0%{transform:translateX(-100%) rotate(5deg)} 100%{transform:translateX(200%) rotate(5deg)} }
.pack-logo-text { font-family:'Cinzel Decorative',serif; font-size:1.05rem; font-weight:700; text-align:center; z-index:1; }
.pack-set-tag   { font-family:'Orbitron',monospace; font-size:.48rem; letter-spacing:.18em; z-index:1; }
.pack-icon      { font-size:2.4rem; z-index:1; line-height:1; }
.pack-pattern-overlay { position:absolute; inset:0; opacity:.45; }

.carousel-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:50%; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.85rem; transition:background .2s, transform .15s; flex-shrink:0;
}
.carousel-arrow:hover { background:rgba(255,255,255,.15); transform:translateY(-50%) scale(1.1); }
#arrowLeft  { left:10px; }
#arrowRight { right:10px; }

/* ── Bottom strip ── */
.lobby-bottom {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  flex-shrink:0; padding:clamp(10px,2vh,22px) 0 clamp(16px,3vh,32px);
}
.pack-count-badge { font-family:'Orbitron',monospace; font-size:.62rem; color:var(--text-dim); letter-spacing:.1em; }
.pack-count-badge span { color:var(--accent); }
.open-btn {
  padding:14px 52px; font-family:'Orbitron',monospace;
  font-size:.85rem; font-weight:700; letter-spacing:.15em;
  color:#000; border:none; border-radius:50px; cursor:pointer;
  box-shadow:0 0 30px rgba(245,200,66,.4), 0 4px 20px rgba(0,0,0,.5);
  transition:all .3s ease; position:relative; overflow:hidden;
}
.open-btn:hover  { transform:translateY(-2px); }
.open-btn:active { transform:translateY(0); }

/* ════════════════════════════════
   PACK RIPPING
════════════════════════════════ */
#packOpenScreen { background:radial-gradient(ellipse at 50% 50%,#0a0f2e 0%,var(--bg) 70%); }
.pack-open-container { position:relative; width:240px; height:350px; }
.pack-rip-top, .pack-rip-bottom {
  position:absolute; left:0; right:0; height:50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:2px solid transparent;
  transition:transform .9s cubic-bezier(.34,1.56,.64,1), opacity .9s ease;
}
.pack-rip-top    { top:0;    border-radius:16px 16px 0 0; transform-origin:top center; }
.pack-rip-bottom { bottom:0; border-radius:0 0 16px 16px; transform-origin:bottom center; }
.pack-rip-top.ripped    { transform:translateY(-130%) rotate(-6deg); opacity:0; }
.pack-rip-bottom.ripped { transform:translateY(130%)  rotate(6deg);  opacity:0; }
.pack-rip-label { font-family:'Cinzel Decorative',serif; font-size:.95rem; }
.pack-rip-sub   { font-family:'Orbitron',monospace; font-size:.55rem; letter-spacing:.2em; }

/* ════════════════════════════════
   CARD VIEWER WRAPPER
════════════════════════════════ */
#cardViewer { background:radial-gradient(ellipse at 50% 50%,#08102a 0%,var(--bg) 70%); }
.card-viewer-inner {
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.card-stack {
  position:relative;
  /* Standard TCG card ratio: 63mm × 88mm ≈ 1 : 1.4
     Use vh as the primary driver so the card fills available vertical space,
     then clamp width from the computed height to maintain ratio.
     This ensures both back (unrevealed) and front (revealed) faces
     occupy the same generous space. */
  height: clamp(340px, 62vh, 520px);
  width:  calc(clamp(340px, 62vh, 520px) / 1.4);
  max-width: 88vw;
  perspective:1200px;
}
.card-counter  { position:absolute; top:24px; left:50%; transform:translateX(-50%); font-family:'Orbitron',monospace; font-size:.75rem; letter-spacing:.15em; color:var(--text-dim); }
.card-counter span { color:var(--text); }

.drag-hint { position:absolute; bottom:-54px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; transition:opacity .4s ease; }
.drag-hint.hidden { opacity:0; pointer-events:none; }
.drag-hint-arrow { width:22px; height:22px; border-left:2px solid var(--text-dim); border-top:2px solid var(--text-dim); transform:rotate(45deg); animation:arrowBounce 1.5s infinite; }
.drag-hint-text  { font-family:'Orbitron',monospace; font-size:.6rem; letter-spacing:.2em; color:var(--text-dim); }
@keyframes arrowBounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(-6px)} }

/* ════════════════════════════════
   SUMMARY
════════════════════════════════ */
#summaryScreen {
  background:radial-gradient(ellipse at 50% 20%,#0d1a3a 0%,var(--bg) 60%);
  padding:20px; overflow-y:auto; justify-content:flex-start;
  padding-top:50px; align-items:center;
}
#summaryScreen::-webkit-scrollbar       { width:4px; }
#summaryScreen::-webkit-scrollbar-track { background:transparent; }
#summaryScreen::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.summary-title {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.2rem,3vw,2.2rem); font-weight:700;
  color:var(--gold); text-shadow:0 0 30px rgba(245,200,66,.4);
  margin-bottom:6px; text-align:center;
}
.summary-sub { font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:.2em; margin-bottom:28px; text-align:center; }

.summary-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:12px; width:100%; max-width:800px; margin-bottom:28px;
}
.summary-card {
  border-radius:10px; overflow:hidden;
  border:1.5px solid var(--rarity-color,var(--common));
  box-shadow:0 0 18px var(--rarity-glow,transparent);
  display:flex; flex-direction:column;
  animation:summaryReveal .5s ease both;
  cursor:pointer; transition:transform .2s, box-shadow .2s;
  position:relative;
}
.summary-card:hover { transform:translateY(-4px) scale(1.04); }
@keyframes summaryReveal { from{opacity:0;transform:translateY(20px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} }

.summary-card-art {
  width:100%; aspect-ratio:1/1;
  background:linear-gradient(135deg,#1e2d4a,#0f172a);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; position:relative; overflow:hidden;
}
.summary-card-type-icon {
  position:absolute; bottom:3px; right:4px;
  font-size:1.1rem; opacity:.85;
}
.summary-card-info    { padding:5px 7px; background:rgba(0,0,0,.7); }
.summary-card-name    { font-family:'Orbitron',monospace; font-size:.44rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-card-meta    { display:flex; justify-content:space-between; align-items:center; gap:4px; margin-top:2px; }
.summary-card-rarity  { font-family:'Rajdhani',sans-serif; font-size:.58rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.summary-card-hp      { font-family:'Orbitron',monospace; font-size:.48rem; font-weight:700; white-space:nowrap; }

/* Summary card border-tier overrides */
.summary-card.border-foil         { outline:2px solid #a78bfa; border-color:transparent; animation:foilShift 4s linear infinite; }
.summary-card.border-hollow-foil  { outline:2px solid #00cfff; border-color:transparent; animation:hollowSpin 3s linear infinite; }
.summary-card.border-special      { outline:2px solid #ffd700; border-color:transparent; animation:specialGold 2.5s ease-in-out infinite alternate; }
.summary-card.border-special-foil { outline:2px solid #ff0080; border-color:transparent; animation:sfAurora 2s linear infinite, sfPulse 1.5s ease-in-out infinite alternate; }

.summary-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; flex-shrink:0; }
.summary-btn {
  padding:12px 36px; font-family:'Orbitron',monospace;
  font-size:.78rem; font-weight:700; letter-spacing:.13em;
  border:none; border-radius:50px; cursor:pointer; transition:all .25s ease; flex-shrink:0;
}
.summary-btn-primary  { color:#000; background:linear-gradient(135deg,var(--gold),#f97316); box-shadow:0 0 30px rgba(245,200,66,.4); }
.summary-btn-primary:hover  { transform:translateY(-2px); box-shadow:0 0 50px rgba(245,200,66,.6); }
.summary-btn-secondary { color:var(--text-dim); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.summary-btn-secondary:hover { background:rgba(255,255,255,.13); color:var(--text); transform:translateY(-2px); }

/* ── Misc UI ── */
.nav-back {
  position:absolute; top:20px; left:20px; z-index:30;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:24px; padding:7px 16px;
  font-family:'Orbitron',monospace; font-size:.6rem; letter-spacing:.1em;
  color:var(--text-dim); cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.nav-back:hover { background:rgba(255,255,255,.13); color:var(--text); }

#muteBtn {
  position:fixed; top:16px; right:16px; z-index:200;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:50%; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; transition:background .2s;
}
#muteBtn:hover { background:rgba(255,255,255,.12); }

.rarity-announce {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  font-family:'Cinzel Decorative',serif; font-size:clamp(1.5rem,4vw,3.2rem);
  font-weight:700; pointer-events:none; z-index:100; opacity:0;
  text-align:center; text-shadow:0 0 40px currentColor; white-space:nowrap;
}
.rarity-announce.pop { animation:rarityPop 2.2s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes rarityPop {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-5deg); }
  20%  { opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(2deg); }
  35%  { transform:translate(-50%,-50%) scale(.95) rotate(0); }
  50%  { transform:translate(-50%,-50%) scale(1); opacity:1; }
  80%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.9) translateY(-30px); }
}

.screen-flash { position:fixed; inset:0; background:white; opacity:0; pointer-events:none; z-index:200; animation:flashOut .7s ease-out forwards; }
@keyframes flashOut { 0%{opacity:.9} 100%{opacity:0} }