:root{
  --bg:#0b0f17; --panel:#121829; --panel2:#0e1422; --glass:rgba(255,255,255,.06);
  --text:#e9eeff; --muted:#a9b2cf; --accent:#7aa2ff; --accent2:#5ef0ff; --ok:#65e28a; --danger:#ff6b7a;
  --r-common:#ffffff; --r-uncommon:#76e0a1; --r-rare:#5bc0ff; --r-epic:#c47eff; --r-legendary:#ffcf5b;
  --radius-xl:18px; --radius-lg:14px; --radius:12px; --shadow:0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 500px at 10% -10%, #1a2440 0%, transparent 60%), linear-gradient(180deg,#0b0f17,#080c13);
  color:var(--text); font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.shell{min-height:100vh; display:flex; flex-direction:column}
header{
  position:sticky; top:0; z-index:5; backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(10,15,24,.9), rgba(10,15,24,.65));
  border-bottom:1px solid #1c2438; padding:10px 14px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.logo{font-weight:800; letter-spacing:.5px; cursor:pointer; text-decoration:none; color:var(--text)}
.age-note{font-size:12px; color:var(--muted)}
.topnav{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  background:linear-gradient(180deg,#17223a,#121a2f); border:1px solid #1e2a47; color:var(--text);
  padding:10px 12px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-block; transition:.15s;
}
.btn:hover{transform:translateY(-1px); background:#15213a}
.btn.active{outline:2px solid #7aa2ff; background:#16243f}
.btn.link{padding:8px 10px}
/* Coin icon (header pill) – helyes relatív útvonal a CSS fájlhoz képest */
.pill[title="Coin"] span{
  display:inline-block;
  width:18px; height:18px;
  background: url('../images/coin.png') center/contain no-repeat;
  font-size:0; line-height:0;
}


/* Nagy coin a pack-nyitás kártyán */
.coinbig{
  width:72px; height:72px;
  object-fit:contain; display:block; margin:0 auto;
}

main{padding:16px}

/* Panels / Inputs */
input, select{background:#0f1627; border:1px solid #213055; color:var(--text); padding:10px; border-radius:10px; outline:none}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.panel{background:#0f1627; border:1px solid #213055; padding:12px; border-radius:12px}
.statchip{background:#0c1427; border:1px solid #213055; border-radius:999px; padding:6px 10px; font-size:12px}
.shopcard{background:#0f1627; border:1px solid #223055; border-radius:14px; padding:12px}
.small{font-size:12px; color:var(--muted)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grow{flex:1}
.empty{opacity:.7; text-align:center; padding:20px}
.disabled{filter:grayscale(100%) brightness(.6); opacity:.6; pointer-events:none}
.neutral{background:#1a233a; border:1px solid #29406a}
.ok{background:#123224; border:1px solid #1e6645}
.warn{background:#31191d; border:1px solid #6a2a34}
.danger{background:#31191d; border:1px solid #6a2a34}

/* Cards grid */
.grid{display:grid; gap:12px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* ===== Card with edge-only rarity gradient ===== */
.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
  border:3px solid transparent;
  background: linear-gradient(180deg,#0f1627,#0b1220) padding-box, var(--ring, #1c2742) border-box;
  transition:transform .12s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px) }
.zoomable{ cursor:zoom-in }
.no-zoom{ cursor:default }
.r-Common   { --ring:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.45)); box-shadow:0 0 10px rgba(255,255,255,.14) }
.r-Uncommon { --ring:linear-gradient(180deg, rgba(118,224,161,1),  rgba(118,224,161,.34)); box-shadow:0 0 14px rgba(118,224,161,.20) }
.r-Rare     { --ring:linear-gradient(180deg, rgba(91,192,255,1),   rgba(91,192,255,.38));   box-shadow:0 0 16px rgba(91,192,255,.26) }
.r-Epic     { --ring:linear-gradient(180deg, rgba(196,126,255,1),  rgba(196,126,255,.40));  box-shadow:0 0 18px rgba(196,126,255,.28) }
.r-Legendary{ --ring:linear-gradient(180deg, rgba(255,165,0,1),    rgba(255,165,0,.45));    box-shadow:0 0 22px rgba(255,165,0,.34); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 14px rgba(255,165,0,.18)} 100%{box-shadow:0 0 28px rgba(255,165,0,.40)} }

.card .img{aspect-ratio:3/4; background:#0a1020}
.card .img img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.03)}
.card .body{padding:12px; display:flex; flex-direction:column; gap:8px}
.title-row{display:flex; align-items:center; gap:8px}
.title-row .title{font-size:14px; line-height:1.2; letter-spacing:.2px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rar-badge{font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid currentColor; background:rgba(255,255,255,.04); text-transform:capitalize; white-space:nowrap; user-select:none}
.rar-badge.Common{color:#e6ecff} .rar-badge.Uncommon{color:var(--r-uncommon)} .rar-badge.Rare{color:var(--r-rare)} .rar-badge.Epic{color:var(--r-epic)} .rar-badge.Legendary{color:var(--r-legendary)}
.stats{display:flex; gap:6px; flex-wrap:wrap}
.stats .chip{font-size:11px; padding:4px 6px; border-radius:8px; background:#0c1427; border:1px solid #213055; color:#cfd6ef}
.meta{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px}
.meta .grow{flex:1}

/* Edge shimmer */
.card::after{
  content:""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none; padding:2px;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 20%, rgba(255,255,255,.65) 28%, transparent 36% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transform:rotate(0deg);
}
.r-Rare::after{ animation:shine 2.8s linear infinite }
.r-Epic::after{ animation:shine 2.4s linear infinite }
.r-Legendary::after{ animation:shine 1.8s linear infinite }
@keyframes shine{ 0%{opacity:.0; transform:rotate(0)} 10%{opacity:.55} 50%{opacity:.15} 100%{opacity:.0; transform:rotate(360deg)} }

.gray{ filter:grayscale(100%) brightness(.82); opacity:.8 }
.card.gray{ --ring:#1c2742; box-shadow:none; animation:none }
.card.gray::after{ display:none }
.card.gray .rar-badge{ color:#9aa3bd; border-color:#2a345a }

/* Viewer (zoom) */
.viewer-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.75); z-index:35}
.viewer-box{width:min(980px,95vw); max-height:90vh; overflow:auto; background:linear-gradient(180deg,#121a2f,#0f1627); border:1px solid #23345f; border-radius:18px; box-shadow:var(--shadow); padding:16px}
.viewer-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.viewer-head h2{margin:0; font-size:20px}
.viewer-head .grow{flex:1}
.viewer-grid{display:grid; grid-template-columns: minmax(260px, 420px) 1fr; gap:16px}
.viewer-img{border-radius:16px; overflow:hidden; border:3px solid transparent; background:linear-gradient(180deg,#0f1627,#0b1220) padding-box, var(--ring, #1c2742) border-box}
.viewer-img img{width:100%; height:auto; display:block}
.viewer-info{display:flex; flex-direction:column; gap:10px}
.viewer-row{display:flex; gap:8px; flex-wrap:wrap}
.viewer-chip{background:#0c1427; border:1px solid #213055; border-radius:999px; padding:6px 10px; font-size:12px; color:#cfd6ef}

/* Admin modal */
.admin-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.7); z-index:40}
.admin-box{width:min(680px, 94vw); background:linear-gradient(180deg,#121a2f,#0f1627); border:1px solid #23345f; border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.admin-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:10px}
.admin-card{background:#0f1627; border:1px solid #223055; border-radius:14px; padding:12px}
.admin-row{display:flex; align-items:center; gap:8px}
.admin-row > input{flex:1}
.admin-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px}

/* Age gate modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:10}
.modal .box{width:min(560px, 92vw); background:linear-gradient(180deg,#121a2f,#0f1627); border:1px solid #23345f; border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.modal .row{justify-content:flex-end}

/* Toast */
.toast{position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; z-index:20}
.toast .t{min-width:260px; max-width:420px; background:#0e1526; border:1px solid #223055; padding:10px; border-radius:12px}
.toast .t.ok{border-color:#2d6c4e} .toast .t.warn{border-color:#6a2a34}

/* City */
.city-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.loc{background:#0e1526; border:1px solid #223055; padding:10px; border-radius:14px; display:flex; flex-direction:column}
.loc h3{margin:6px 0}
.npc{display:flex; flex-direction:column; align-items:center; gap:8px; background:#0b1222; border:1px solid #1b2748; padding:10px; border-radius:12px}
.npc img{width:100%; height:auto; max-height: clamp(220px, 30vh, 360px); object-fit: contain; background:#091021; border-radius:12px; border:1px solid #1b2748}
.npc-info{text-align:center}
.npc-actions{display:flex; gap:8px; justify-content:center; width:100%; flex-wrap:wrap}
.npc-hero{display:flex; flex-direction:column; align-items:center; gap:10px}
.npc-hero img{width:min(100%, 520px); height:auto; max-height:65vh; object-fit: contain; border-radius:14px; background:#091021; border:1px solid #1b2748}
.npc-hero .row{justify-content:center; width:100%}

/* Mining */
.bigclick{display:grid; place-items:center; aspect-ratio:1/1; border-radius:16px; background:radial-gradient(220px 220px at 30% 30%, rgba(122,162,255,.25), transparent 60%), #0b1222; border:2px dashed #2a3f6a; cursor:pointer; user-select:none; transition:.1s; font-size:22px; font-weight:700}
.bigclick:hover{transform:translateY(-1px); border-color:#3b5ea8}

/* Pack Opening */
.pack-modal{position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:30}
.pack-box{width:min(980px,94vw); background:linear-gradient(180deg,#121a2f,#0f1627); border:1px solid #23345f; border-radius:18px; box-shadow:var(--shadow); padding:16px; overflow:hidden}
.pack-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.pack-head h2{margin:0; font-size:20px}
.pack-head .grow{flex:1}
.pack-slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.flip{position:relative; height:340px; perspective:1100px; cursor:pointer; border-radius:16px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.flip-inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1); border-radius:16px; overflow:visible}
.flip.revealed .flip-inner{ transform:rotateY(180deg) }
.face{position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; overflow:hidden; display:grid; place-items:stretch; padding:0; border:none; background:none}
.face.back{background: radial-gradient(180px 120px at 50% -10%, rgba(122,162,255,.24), transparent 60%), linear-gradient(180deg,#0d1530,#0a1126); border:1px dashed #2a3f6a; padding:10px}
.card-back{border-radius:14px; display:grid; place-items:center; padding:12px; border:1px solid #2a3f6a; background: linear-gradient(180deg,#0f1627,#0b1220) padding-box, radial-gradient(100% 100% at 30% 10%, #7aa2ff55, transparent) border-box; position:relative}
.card-back::after{content:""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none; opacity:.65; background: conic-gradient(from 0deg, #9ad3ff33, #ffd3fd33, #fff7c833, #9ad3ff33); mix-blend-mode:screen; animation:foil 3.5s linear infinite; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:2px}
@keyframes foil { to{ transform:rotate(360deg) } }
.back-logo{font-size:42px; opacity:.9}
.back-sub{font-size:12px; color:#a9b2cf; opacity:.9}
.face.front{ transform:rotateY(180deg) }
.packcard{ height:100%; display:flex; flex-direction:column }
.flip.r-Common.revealed    { box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 0 16px rgba(255,255,255,.15) }
.flip.r-Uncommon.revealed  { box-shadow:0 0 0 2px rgba(118,224,161,.55), 0 0 20px rgba(118,224,161,.22) }
.flip.r-Rare.revealed      { box-shadow:0 0 0 2px rgba(91,192,255,.6),   0 0 22px rgba(91,192,255,.26) }
.flip.r-Epic.revealed      { box-shadow:0 0 0 2px rgba(196,126,255,.7),  0 0 24px rgba(196,126,255,.30) }
.flip.r-Legendary.revealed { box-shadow:0 0 0 2px rgba(255,165,0,.8),    0 0 28px rgba(255,165,0,.35), 0 10px 30px rgba(0,0,0,.35) }


/* --- Top-right currency pills: keep items on one line --- */
header .coins{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* A pillen belül se törjön a sor */
header .coins .pill{
  display:inline-flex;         /* fontos */
  align-items:center;          /* függőleges közép */
  gap:8px;
  white-space:nowrap;
}

/* Coin ikon a pillben – pontos méret és igazítás */
.pill[title="Coin"] span{
  display:inline-block;
  width:18px; height:18px;
  background:url('../images/coin.png') center/contain no-repeat; /* ha inline <style>, akkor 'images/coin.png' */
  vertical-align:middle;
}

/* extra: ha az img-es fallbacket használtad, az is illeszkedjen középre */
.pill[title="Coin"] span img{
  display:block;
  width:18px; height:18px;
  object-fit:contain;
}



/* Shop pack images */
.packimg{
  width:100%;
  height: clamp(220px, 30vh, 380px);
  object-fit: contain;
  background:#0a1020; border:1px solid #223055; border-radius:12px;
}
.packheadimg{
  width:72px; height:72px; object-fit:contain;
  background:#0a1020; border:1px solid #223055; border-radius:10px;
}

/* === Fix: oversized cards in Duel hands === */
/* Duel elrendezés – 2 oszlop egymás mellett */
.duel-grid{
  display: grid;                /* <<< EZ HIÁNYZOTT */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* Mobilon mehet egymás alá */
@media (max-width: 900px){
  .duel-grid{
    grid-template-columns: 1fr;
  }
}

/* --- Kisebb lapok a párbajban --- */
.duel-grid .card,
.duel-pairs .card {
  transform: scale(0.8);     /* 80%-ra kicsinyítve */
  transform-origin: center;
  margin: 4px auto;
}

/* Ha túl szoros, állíthatod például így: 0.7 vagy 0.9 */
.duel-grid .card:hover,
.duel-pairs .card:hover {
  transform: scale(0.9);     /* Hoverre kicsit nagyobb */
  z-index: 10;
}



.hand{
  display: grid;
  /* a kártyák 150–220px szélesek, több oszlopba törnek */
  grid-template-columns: repeat(auto-fill, minmax(150px, 220px));
  justify-content: center; /* középre igazítás */
  gap: 10px;
}

.hand .card{
  width: 100%;
  max-width: 220px;      /* felső korlát */
  justify-self: center;  /* oszlopon belül középre */
}

@media (max-width: 700px){
  .hand{
    grid-template-columns: repeat(auto-fill, minmax(130px, 180px));
  }
  .hand .card{
    max-width: 180px;
  }
}

/* === Duel: paired rows (player left, enemy right) === */
/* === Duel: paired rows (player left, enemy right) === */
.duel-pairs{ display:grid; gap:12px; }
.duel-pairs .pair-row{
  display:grid; gap:12px; align-items:start;
  grid-template-columns: 1fr 1fr;    /* egymás mellett */
}
.duel-pairs .card{
  width:100%; max-width:220px; justify-self:center;
}
@media (max-width: 800px){
  .duel-pairs .card{ max-width:180px; }
}

/* --- DUEL: pontosan 5 kártya egy sorban --- */
.duel-col .hand{
  display: grid;
  grid-template-columns: repeat(5, max-content); /* 5 oszlop, nem törik le */
  gap: 10px;
  justify-content: center;         /* középre igazítva a sor */
}

/* A kártya tényleges dobozméretét is szabályozzuk,
   ne csak transzformmal kicsinyítsünk (mert az nem változtatja a tördelést) */
.duel-col .hand .card{
  width: 160px;     /* ha még így is szűk, próbáld 150px-re vagy 140px-re */
}

/* (opcionális) Ha volt "transform: scale(...)" a duelre,
   kapcsold ki, hogy a skálázás ne borítsa a tördelést */
.duel-grid .card,
.duel-pairs .card{
  transform: none !important;
}
.duel-grid .card:hover,
.duel-pairs .card:hover{
  transform: none !important;
}

/* ===== Duel: 5 kártya egy sorban (mindkét oldalon) ===== */
.duel-grid .hand{
  display:grid !important;
  grid-template-columns: repeat(5, 160px); /* PONT 5 oszlop */
  gap: 10px;
  justify-content: center;
}
.duel-grid .hand .card{
  width:160px !important;
  max-width:160px !important;
  justify-self:center;
}

/* ===== Duel: szebb Round Log + Scoreboard ===== */
.duel-head{
  display:flex;
  align-items:center;
  gap:16px;
}
.duel-head .npc-hero img{
  width:72px; height:72px; object-fit:cover; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
}
.duel-head .grow{ flex:1 }

.scoreboard{
  display:flex; align-items:center; gap:18px;
  padding:8px 12px; border-radius:12px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
}
.scoreboard .side{ display:flex; flex-direction:column; align-items:center; }
.scoreboard h4{ margin:0; font-size:14px; color:var(--text); }
.scoreboard .score-num{ font-size:26px; font-weight:800; color:var(--accent2); line-height:1; }
.scoreboard .divider{ font-size:20px; color:var(--muted); }

.scoredots{ display:flex; align-items:center; gap:6px; }
.score-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
}
.score-dot.on{ background:var(--ok); border-color:transparent; }
.score-dot.enemy.on{ background:var(--danger); }

.duel-statbox{ margin:6px 0 8px 0; }

.round-log, .duel-log{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 16px;
  width: 420px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.25);
}
.round-log h3{ 
  font-size: 16px; color: var(--text); text-align: center;
  margin: 0 0 8px 0; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.round-log-entry{
  margin: 4px 0; padding: 6px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
/* ===== DUEL OLDALSÁVOS ELRENDEZÉS ===== */

/* Fő rács: balra a két kéz, jobbra az oldalsáv */
.duel-layout{
  display: grid;
  grid-template-columns: 1fr 380px; /* oldalsáv fix ~380px */
  gap: 20px;
  align-items: start;
}

/* Bal oldal: játékos/ellenfél kéz 2 oszlopban */
.duel-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Kézcímek */
.duel-col h2{
  margin: 0 0 8px 0;
  text-align: center;
  font-size: 18px;
}

/* PONTOSAN 5 kártya egy sorban mindkét oldalon */
.duel-grid .hand{
  display: grid;
  grid-template-columns: repeat(5, 160px);
  gap: 10px;
  justify-content: center;
}
.duel-grid .hand .card{
  width: 160px !important;
  max-width: 160px !important;
  justify-self: center;
}

/* ===== Oldalsáv ===== */
.duel-sidebar{
  display: grid;
  grid-template-rows: auto auto 1fr; /* NPC / Score / Log (log kapja a maradékot) */
  gap: 12px;
  position: sticky; top: 10px; /* kényelmes, nem ugrál */
}

/* NPC kártya – nagyobb, nem vágjuk le a tetejét/alját */
.npc-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px;
}
.npc-portrait{
  width: 100%;
  aspect-ratio: 3 / 4;              /* álló, 3:4 */
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.npc-portrait img{
  width: 98%;
  height: 98%;
  object-fit: contain;              /* <<< TELJES KÉP LÁTSZIK, NINCS LEVÁGÁS */
  image-rendering: auto;
}
.npc-name{
  text-align: center;
  margin-top: 6px;
  font-weight: 700;
}

/* Pöttyös SCOREBOARD (csak pontok, nincs szám) */
.scoreboard{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 12px;
}
.scoreboard .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
}
.scoreboard .label{
  font-size: 14px; color: var(--text); margin-right: 10px;
  min-width: 90px;
}
.scoredots{
  display: flex; align-items: center; gap: 8px;
}
.score-dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
}
.score-dot.on{ background: var(--ok); border-color: transparent; }
.score-dot.enemy.on{ background: var(--danger); border-color: transparent; }

/* Round log – oldalsávban görgethető */
.round-log{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 160px;
  max-height: 520px;   /* 1080p-n kényelmes */
  overflow: auto;
  font-size: 14px;
  line-height: 1.45;
}
.round-log h3{
  font-size: 16px; color: var(--text); text-align: center;
  margin: 0 0 8px 0; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.round-log-entry{
  margin: 4px 0; padding: 6px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

/* Biztonság kedvéért a duelnél NINCS transform-os kicsinyítés,
   hogy a tördelést ne zavarja. Ha korábban volt scale, kapcsoljuk ki itt. */
.duel-grid .card,
.duel-pairs .card{
  transform: none !important;
}

/* ===== RESPONSZÍV FINOMHANGOLÁS: hogy 1920×1080-on is kiférjen ===== */

/* 1920px és alatta: kicsit szűkebb oldalsáv + kisebb kártyák + kisebb rések */
@media (max-width: 1920px){
  .duel-layout{
    grid-template-columns: 1fr 340px; /* oldalsáv keskenyebb */
    gap: 16px;
    max-width: 100%;
  }
  .duel-grid{ gap: 12px; }

  /* Pontosan 5 kártya/oszlop, de szűkebb szélességgel és gap-pel */
  .duel-grid .hand{
    grid-template-columns: repeat(5, 148px);
    gap: 6px;
  }
  .duel-grid .hand .card{
    width: 148px !important;
    max-width: 148px !important;
  }

  /* Oldalsáv elemek kis igazítása, hogy ne lógjanak */
  .round-log{ max-height: 460px; }
  .npc-portrait{ aspect-ratio: 3/4; }
}

/* 1680px és alatta: még egy fokkal szűkebbre vesszük */
@media (max-width: 1680px){
  .duel-layout{ grid-template-columns: 1fr 320px; }
  .duel-grid .hand{
    grid-template-columns: repeat(5, 140px);
    gap: 6px;
  }
  .duel-grid .hand .card{
    width: 140px !important;
    max-width: 140px !important;
  }
  .duel-col h2{ font-size: 17px; }
}

/* 1440px és alatta (ha valaki kisebb monitoron próbálja) */
@media (max-width: 1440px){
  .duel-grid .hand{
    grid-template-columns: repeat(5, 132px);
    gap: 5px;
  }
  .duel-grid .hand .card{
    width: 132px !important;
    max-width: 132px !important;
  }
  .duel-col h2{ font-size: 16px; }
  .scoreboard .label{ min-width: 80px; }
}
/* ===== Oldalsáv + egymás alatt a két kéz ===== */
:root{
  --cardw: 150px;   /* kártya szélesség – ha szűk, vedd le 146/142-re */
  --hand-gap: 8px;  /* kártyák közti rés */
  --lane-gap: 14px; /* a két kéz közötti rés */
  --sidebar-w: 340px;
}

.duel-layout{
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 18px;
  align-items: start;
  max-width: 100%;
}

/* Bal oszlop: két kéz egymás alatt */
.duel-left{
  display: grid;
  grid-auto-rows: auto;
  gap: var(--lane-gap);
}

/* Egy kéz címe */
.duel-col h2{
  margin: 0 0 6px 0;
  text-align: center;
  font-size: 18px;
}

/* Pontosan 5 kártya egy sorban minden kéznél */
.duel-left .hand{
  display: grid;
  grid-template-columns: repeat(5, var(--cardw));
  gap: var(--hand-gap);
  justify-content: center;
}
.duel-left .hand .card{
  width: var(--cardw) !important;
  max-width: var(--cardw) !important;
  justify-self: center;
}

/* Oldalsáv marad, csak a szélesség lett kisebb */
.duel-sidebar{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  position: sticky; top: 10px;
}

/* NPC – teljes kép objektum, ne vágjuk le */
.npc-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 10px;
}
.npc-portrait{
  width: 100%;
  aspect-ratio: 3/4;
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
}
.npc-portrait img{ width: 98%; height: 98%; object-fit: contain; }
.npc-name{ text-align: center; margin-top: 6px; font-weight: 700; }

/* Pöttyös scoreboard (nincs szám) */
.scoreboard{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 10px 12px;
}
.scoreboard .row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0; }
.scoreboard .label{ font-size:14px; color:var(--text); margin-right:10px; min-width:90px; }
.scoredots{ display:flex; align-items:center; gap:8px; }
.score-dot{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); }
.score-dot.on{ background:var(--ok); border-color:transparent; }
.score-dot.enemy.on{ background:var(--danger); border-color:transparent; }

/* Round log az oldalsávban */
.round-log{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 160px; max-height: 520px; overflow: auto;
  font-size: 14px; line-height: 1.45;
}
.round-log h3{
  font-size: 16px; color: var(--text); text-align: center;
  margin: 0 0 8px 0; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.round-log-entry{
  margin: 4px 0; padding: 6px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

/* Biztonság: a duelben NE legyen transform:scale, hogy a tördelést ne zavarja */
.duel-grid .card, .duel-pairs .card{ transform: none !important; }

/* Finomhangolás 1680–1920 között is kényelmes legyen */
@media (max-width: 1920px){
  :root{ --cardw: 148px; --sidebar-w: 330px; --hand-gap: 6px; }
}
@media (max-width: 1680px){
  :root{ --cardw: 142px; --sidebar-w: 320px; --hand-gap: 6px; }
  .duel-col h2{ font-size: 17px; }
}

/* =======================
   DUEL – Oldalsáv + két kéz egymás alatt
   ======================= */

:root{
  --cardw: 150px;   /* kártya szélesség – ha kell, 146/144-re vedd le */
  --hand-gap: 8px;  /* kártyák közötti rés */
  --lane-gap: 14px; /* a két kéz közötti távolság */
  --sidebar-w: 340px;
}

/* Fő layout: bal (kezek) + jobb (oldalsáv) */
.duel-layout{
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 18px;
  align-items: start;
  max-width: 100%;
}

/* Fejléccsík a kör infóknak */
.duel-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px 0;
}
.statchip{
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

/* Bal oszlop: két kéz egymás alatt */
.duel-left{
  display: grid;
  grid-auto-rows: auto;
  gap: var(--lane-gap);
}

.duel-col h2{
  margin: 0 0 6px 0;
  text-align: center;
  font-size: 18px;
}

/* Mindig 5 kártya egy sorban, nem törik le az 5. sem */
.duel-left .hand{
  display: grid;
  grid-template-columns: repeat(5, var(--cardw));
  gap: var(--hand-gap);
  justify-content: center;
}
.duel-left .hand .card{
  width: var(--cardw) !important;
  max-width: var(--cardw) !important;
  justify-self: center;
}

/* Oldalsáv (NPC + scoreboard + log) */
.duel-sidebar{
  display: grid;
  grid-template-rows: auto auto 1fr; /* NPC / Score / Log */
  gap: 12px;
  position: sticky;
  top: 10px;
}

/* NPC – NEM vágjuk le a tetejét/alját (contain) */
.npc-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px;
}
.npc-portrait{
  width: 100%;
  aspect-ratio: 3 / 4;
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.npc-portrait img{
  width: 98%;
  height: 98%;
  object-fit: contain; /* ← TELJES kép látszik */
}
.npc-name{
  text-align: center;
  margin-top: 6px;
  font-weight: 700;
}

/* Pöttyös scoreboard – nincsenek számok */
.scoreboard{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 12px;
}
.scoreboard .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
}
.scoreboard .label{
  font-size: 14px;
  color: var(--text);
  margin-right: 10px;
  min-width: 90px;
}
.scoredots{
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
}
.score-dot.on{ background: var(--ok); border-color: transparent; }
.score-dot.enemy.on{ background: var(--danger); border-color: transparent; }

/* Round log – oldalsávban görgethető */
.round-log{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 160px;
  max-height: 520px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.45;
}
.round-log h3{
  font-size: 16px;
  color: var(--text);
  text-align: center;
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.round-log-entry{
  margin: 4px 0;
  padding: 6px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

/* Biztonság: a duelben NE legyen transform-os kicsinyítés, hogy a tördelést ne zavarja */
.duel-grid .card,
.duel-pairs .card{
  transform: none !important;
}

/* Responszív finomhangolás 1920-on is kényelmesre */
@media (max-width: 1920px){
  :root{ --cardw: 148px; --sidebar-w: 330px; --hand-gap: 6px; }
}
@media (max-width: 1680px){
  :root{ --cardw: 142px; --sidebar-w: 320px; --hand-gap: 6px; }
  .duel-col h2{ font-size: 17px; }
}


/* === DUEL (override): két kéz egymás alatt + oldalsáv, fix 5-5 kártya === */
.duel-layout{
  display:grid !important;
  grid-template-columns: 1fr 340px !important;  /* bal: kezek, jobb: oldalsáv */
  gap:18px !important;
  align-items:start !important;
}
.duel-left{
  display:grid !important;
  grid-auto-rows:auto !important;
  gap:14px !important;
}
/* Mindkét kézben pontosan 5 kártya egy sorban */
.duel-left .hand{
  display:grid !important;
  grid-template-columns: repeat(5, 148px) !important; /* ha szűk: 146/144 */
  gap:8px !important;
  justify-content:center !important;
}
.duel-left .hand .card{
  width:148px !important;
  max-width:148px !important;
  justify-self:center !important;
}
/* Bármely korábbi .duel-grid elrendezést némítsunk el ezen a nézeten */
.duel-layout .duel-grid{ display:contents !important; }

/* Oldalsáv alapok (ha fentebb már vannak, ez csak biztosíték) */
.duel-sidebar{
  display:grid !important;
  grid-template-rows:auto auto 1fr !important; /* NPC / Score / Log */
  gap:12px !important;
  position:sticky; top:10px;
}
/* NPC kép: teljes egészében látszódjon, ne vágjuk le */
.npc-card{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:10px; }
.npc-portrait{ width:100%; aspect-ratio:3/4; background:rgba(0,0,0,.35); border-radius:10px; display:grid; place-items:center; overflow:hidden; }
.npc-portrait img{ width:98%; height:98%; object-fit:contain; }
.npc-name{ text-align:center; margin-top:6px; font-weight:700; }

/* Pöttyös scoreboard */
.scoreboard{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:10px 12px; }
.scoreboard .row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0; }
.scoreboard .label{ font-size:14px; color:var(--text); margin-right:10px; min-width:90px; }
.scoredots{ display:flex; align-items:center; gap:8px; }
.score-dot{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); }
.score-dot.on{ background:var(--ok); border-color:transparent; }
.score-dot.enemy.on{ background:var(--danger); border-color:transparent; }

/* Round log az oldalsávban */
.round-log{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:12px 14px; min-height:160px; max-height:520px; overflow:auto; font-size:14px; line-height:1.45; }
.round-log h3{ font-size:16px; color:var(--text); text-align:center; margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.08); }
.round-log-entry{ margin:4px 0; padding:6px 8px; border-left:3px solid var(--accent); background:rgba(255,255,255,0.03); border-radius:6px; }

/* Kapcsold ki a régi scale-ozást és minden, tördelést zavaró transformot a duelben */
.duel-grid .card, .duel-pairs .card, .duel-left .card{ transform:none !important; }

/* --- DUEL: húzzuk közelebb az oldalsávot a lapokhoz --- */

/* 1) A bal oszlop ne legyen 1fr széles: csak akkora legyen, amekkora a kártyák szélessége. */
.duel-layout{
  grid-template-columns: max-content 320px !important;  /* volt: 1fr 340px */
  gap: 12px !important;                                  /* volt: 18px */
}

/* 2) A bal oszlop tartalma (cím + kéz) igazodjon jobbra, a sáv felé. */
.duel-left > .duel-col{
  justify-self: end !important;
  width: max-content !important;
}
.duel-left .hand{
  justify-content: end !important;  /* a 5×kártya rács jobbra zár */
}

/* 3) 1920p-n még kicsit szűkebb oldalsáv és gap (ha szeretnéd még közelebb). */
@media (max-width: 1920px){
  .duel-layout{
    grid-template-columns: max-content 300px !important;
    gap: 10px !important;
  }
}

/* --- DUEL: finom távolság a bal oszlop és az oldalsáv között --- */
:root{
  --duel-gap: 16px;      /* távolság a két oszlop között (12 túl közel volt) */
  --sidebar-w: 320px;    /* oldalsáv szélesség (tetszés szerint 300–340) */
}

.duel-layout{
  grid-template-columns: max-content var(--sidebar-w) !important;
  gap: var(--duel-gap) !important;
}

/* a bal oszlop ne tapadjon rá: maradjon jobbra igazítva, de ne “toljuk” rá a sávra */
.duel-left > .duel-col{
  justify-self: end !important;
}

/* a kéz rácsát állítsuk vissza középre, hogy a gap adja a fő távolságot */
.duel-left .hand{
  justify-content: center !important;
}

/* 1920p-n kicsit kényelmesebb */
@media (max-width: 1920px){
  :root{ --duel-gap: 16px; --sidebar-w: 320px; }
}

/* ha még mindig túl közelnek érzed, próbáld:
   --duel-gap: 18px; vagy 20px; */
/* --- DUEL: oldalsáv még jobbra --- */
:root{
  --duel-gap: 18px;          /* oszlopköz a gridben */
  --sidebar-offset: 20px;    /* plusz távolság a kártyáktól */
}

.duel-layout{
  gap: var(--duel-gap) !important;
}

/* plusz bal margó a sávnak → még jobbra tolja */
.duel-sidebar{
  margin-left: var(--sidebar-offset) !important;
}

/* 1920p-n nyugodtan lehet még nagyobb */
@media (min-width: 1800px){
  :root{ --duel-gap: 100px; --sidebar-offset: 24px; }
}


/* === DUEL: a lapok jobbra tolása (állítható) === */
:root{
  /* mennyivel menjen jobbra? állítsd tetszés szerint */
  --hands-offset: 16px;     /* az egész bal oszlop (cím + kéz) eltolása */
  --cards-offset:  0px;     /* csak a kártyarácsok extra eltolása */
}

/* A teljes bal oszlop (címek + kezek) jobbra */
.duel-left{
  margin-left: var(--hands-offset) !important;
}

/* Csak a kártyák jobbra (ha a cím maradjon a helyén) */
.duel-left .hand{
  margin-left: var(--cards-offset) !important;
}

/* Ha csak a játékos vagy csak az ellenfél kezét tolnád: */
.duel-left .duel-col:first-child .hand{ /* Játékos keze */
  /* például: margin-left: 10px !important; */
}
.duel-left .duel-col:last-child .hand{  /* Ellenfél keze */
  /* például: margin-left: 6px !important; */
}

/* Finom médiaszabályok (opcionális) – nagyobb kijelzőn kicsit több eltolás */
@media (min-width: 1800px){
  :root{ --hands-offset: 400px; --cards-offset: 0px; }
}
@media (max-width: 1680px){
  :root{ --hands-offset: 400px; --cards-offset: 0px; }
}
/* === Globális 21+ figyelmeztetés (CSS-only) === */
header::after{
  content: "All characters depicted are 21 years of age or older.";
  grid-column: 1 / -1;              /* terüljön ki a teljes header szélességére (grid) */
  display: block;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
  text-align: center;
  color: var(--muted, #a9b2cf);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}


/* === Catalog: blur a kártyaképeken === */
.catalog-blur .card .img{
  overflow: hidden;              /* a blur miatt ne lógjon ki */
}
.catalog-blur .card .img img{
  filter: blur(12px);            /* állítsd 8–16px között ízlés szerint */
  transform: scale(1.04);        /* pici nagyítás, hogy a blur széleket eltakarja */
  will-change: filter, transform;
}

/* Ha inkább csak a NEM birtokolt kártyákat bluröznéd:
.catalog-blur .card.gray .img img{ filter: blur(12px); transform: scale(1.04); }
*/
/* === Catalog: csak a MISSING (gray) kártyák legyenek blur-özve, az owned tiszta marad === */
.catalog-blur .card.gray .img{
  overflow: hidden; /* a blur széleit rejtsük el */
}
.catalog-blur .card.gray .img img{
  filter: blur(12px);
  transform: scale(1.04);  /* kicsit nagyítjuk, hogy a blur szélek ne látszanak */
  will-change: filter, transform;
}

/* Biztosítsuk, hogy az owned NEM blur-öződik */
.catalog-blur .card:not(.gray) .img img{
  filter: none;
  transform: none;
}

/* Vizuális jelzés: owned-ön ne legyen "zoom" kurzor */
.catalog-blur .card.no-zoom,
.catalog-blur .card.no-zoom .img{
  cursor: default !important;
}
/* --- Catalog: csak a hiányzó (gray) kártyák legyenek blur-özve --- */
.catalog-blur .card.gray .img{ overflow: hidden; }
.catalog-blur .card.gray .img img{
  filter: blur(12px);
  transform: scale(1.04);
  will-change: filter, transform;
}

/* Owned kártyákon ne legyen blur */
.catalog-blur .card:not(.gray) .img img{
  filter: none;
  transform: none;
}

/* Interakció: csak owned legyen nagyítható/kattintható */
.catalog-blur .card.no-zoom,
.catalog-blur .card.no-zoom *{
  cursor: default !important;
}
.catalog-blur .card.no-zoom .img{
  pointer-events: none;      /* hiányzón ne lehessen képre kattintani */
}

/* (opcionális) vizuális jelzés: owned kártyán zoom-kurzor */
.catalog-blur .card.zoomable{ cursor: zoom-in; }