/* =====================================================================
   Mythic TCG - sötét, navy TCG felület (a videó alapján)
   ===================================================================== */
:root{
  --bg-0:#070b14; --bg-1:#0d1526; --bg-2:#131d33; --panel:#16223b;
  --panel-2:#1d2c4a; --line:#26344f; --line-2:#33456b;
  --text:#e7ecf5; --muted:#8ba0c2; --muted-2:#5e7299;
  --accent:#3b82f6; --accent-2:#60a5fa;
  --gold:#f5c542; --green:#3fb950; --red:#f85149; --blue:#388bfd;
  --atk:#2f6fed; --hp:#e1424a;
  --common:#9ca3af; --uncommon:#22c55e; --rare:#3b82f6; --mythic:#f59e0b;
  --radius:10px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Dizájn-rendszer (lásd includes/themes.php) — a háttér-ragyogás színei téma szerint cserélődnek. */
  --bg-glow-1:#1b2742; --bg-glow-2:#14233f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--text); min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-glow-1) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, var(--bg-glow-2) 0%, transparent 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{color:#9cc4ff}
img{max-width:100%}
h1,h2,h3{margin:.2em 0 .5em}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none!important}

/* ---------- Top navigation (mint a videóban) ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:10px 20px; background:linear-gradient(180deg,#0f1a30,#0b1426);
  border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50;
}
.brand-coins{display:flex;align-items:center;gap:12px;min-width:180px}
.avatar-chip{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;
  font-size:24px;border:2px solid var(--line-2);background:#0c1424;flex:none}
.brand-coins .who{line-height:1.15}
.brand-coins .name{font-weight:700}
.brand-coins .coins{color:var(--gold);font-size:13px;font-weight:700}
.brand-coins .coins:before{content:"⛃ "}
.nav{display:flex;gap:6px;margin:0 auto}
.nav a{
  color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:14px;padding:14px 18px;border-bottom:3px solid transparent;
}
.nav a:hover{color:var(--text)}
.nav a.active{color:#fff;border-bottom-color:var(--accent)}
.nav-deck-icon{font-size:24px;opacity:.8}
.premium-chip{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:13px;
  color:#e6c86b;background:rgba(230,200,107,.1);border:1px solid rgba(230,200,107,.35);
  padding:6px 10px;border-radius:999px;text-decoration:none;flex:none;white-space:nowrap}
.premium-chip:hover{background:rgba(230,200,107,.2)}
.lang-switch{display:flex;gap:4px;flex:none}
.lang-switch a{font-size:11px;font-weight:800;padding:4px 7px;border-radius:6px;color:var(--muted);
  text-decoration:none;border:1px solid var(--line-2)}
.lang-switch a.active{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---------- Tooltip / súgó-buborék (help_tip()) ---------- */
.help-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:#26375c;color:#9fb4d8;font-size:11px;font-weight:800;
  cursor:help;position:relative;margin-left:4px;vertical-align:middle;line-height:1}
.help-tip:hover,.help-tip:focus{background:var(--accent);color:#fff;outline:none}
.help-tip:hover::after,.help-tip:focus::after{
  content:attr(data-tip);position:absolute;left:50%;top:130%;bottom:auto;transform:translateX(-50%);
  background:#0c1526;border:1px solid var(--line-2);color:var(--text);padding:8px 10px;
  border-radius:8px;font-size:12px;font-weight:400;line-height:1.4;
  width:max-content;max-width:min(260px,80vw);white-space:normal;z-index:200;
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.help-tip:hover::before,.help-tip:focus::before{
  content:'';position:absolute;left:50%;top:120%;bottom:auto;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#0c1526;z-index:200}
/* Ha a buborék az oldal tetejéhez közel nyílna felfelé (nincs hely fölötte), inkább lefelé nyit —
   ez az alapértelmezett irány már lefelé nyit, hogy sose vágódjon le a nézet tetején. */

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px}
.grid{display:grid;gap:18px}
.panel{background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

/* ---------- Gombok ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid var(--line-2);background:linear-gradient(180deg,#21304f,#172645);
  color:var(--text);font-weight:700;padding:11px 18px;border-radius:8px;font-size:14px;
  transition:.15s;text-transform:uppercase;letter-spacing:.04em;
}
.btn:hover{border-color:var(--accent);background:linear-gradient(180deg,#26385c,#1b2c4f)}
.btn.primary{background:linear-gradient(180deg,#2f6fed,#1f57c8);border-color:#3b82f6}
.btn.primary:hover{background:linear-gradient(180deg,#3b82f6,#2563eb)}
.btn.danger{background:linear-gradient(180deg,#b3343c,#8f2228);border-color:#e1424a}
.btn.ghost{background:transparent}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:6px 10px;font-size:12px}

/* ---------- Form ---------- */
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:11px 12px;background:#0c1526;border:1px solid var(--line-2);
  border-radius:8px;color:var(--text);font-size:15px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.auth-card{max-width:420px;margin:7vh auto;}
.auth-card h1{text-align:center}
.auth-logo{text-align:center;font-size:40px;margin-bottom:4px}
.alert{padding:10px 14px;border-radius:8px;margin:10px 0;font-size:14px}
.alert.error{background:#3a1416;border:1px solid #7a2227;color:#ffb4b4}
.alert.success{background:#0f2e18;border:1px solid #1f6b34;color:#a8f0bd}
.alert.info{background:#10243f;border:1px solid #2a4a7a;color:#bcd6ff}
.formlink{text-align:center;margin-top:14px;font-size:14px}

/* ---------- PLAY képernyő ---------- */
.play-grid{display:grid;grid-template-columns:1fr 360px;gap:22px}
.mode-card{position:relative;height:150px;border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:800;letter-spacing:.04em;text-shadow:0 2px 8px #000;margin-bottom:16px}
.mode-card .ico{font-size:64px;position:absolute;left:24px;opacity:.85}
.mode-card.solo{background:linear-gradient(120deg,#16324a,#0c2438)}
.mode-card.multi{background:linear-gradient(120deg,#2a1c3a,#1a2740)}
.mode-card:hover{border-color:var(--accent);transform:translateY(-2px);transition:.15s}

/* Gyakorló mód: tétmentes csata választható AI-nehézséggel — a többi mode-card-tól
   eltérően nem egy nagy link, hanem egy kártya 3 kis nehézség-gombbal (a kattintás így
   egyből eldönti, milyen AI-val játszunk, nem kell külön oldal a nehézség-választáshoz). */
.mode-card.practice{background:linear-gradient(120deg,#1c3a24,#0c2418);flex-direction:column;
  justify-content:center;gap:2px;font-size:22px;cursor:default;text-align:center;padding:12px}
.mode-card.practice .ico{position:static;font-size:32px;opacity:1;margin-right:6px}
.practice-diffs{display:flex;gap:8px}
.practice-diffs a{background:#0c1526cc;border:1px solid var(--line-2);border-radius:8px;padding:6px 14px;
  color:var(--text);text-decoration:none;font-size:13px;font-weight:700;text-shadow:none}
.practice-diffs a:hover{border-color:var(--green);color:var(--green)}
.deck-pick h3{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.deck-preview{display:flex;justify-content:center;margin-top:14px;height:150px;position:relative}
.deck-preview .mini{width:74px;height:104px;position:absolute;top:0;
  border-radius:8px;border:1px solid var(--line-2);box-shadow:var(--shadow)}

/* ---------- Kártya (collection / deckbuilder) ---------- */
.card{
  width:150px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;
  background:#0c1526;border:1px solid var(--line-2);transition:.12s;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent);z-index:2}
.card .cost{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffb648,#c9821a);color:#241200;
  display:grid;place-items:center;font-weight:800;z-index:3;border:2px solid #ffd98a}
.card .qty{position:absolute;top:6px;right:6px;background:#0a0f1c;border:1px solid var(--line-2);
  border-radius:6px;font-size:11px;font-weight:700;padding:2px 6px;z-index:3}
.card .art{height:96px;display:grid;place-items:center;font-size:54px;
  border-bottom:1px solid var(--line)}
.card .body{padding:6px 8px 26px}
.card .cname{font-weight:800;font-size:12.5px;line-height:1.1}
.card .desc{font-size:10.5px;color:var(--muted);margin-top:3px;min-height:30px}
.card .stat{position:absolute;bottom:6px;width:26px;height:26px;border-radius:6px;
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.card .atk{left:6px;background:linear-gradient(180deg,#3f7cff,#2059d6)}
.card .hp{right:6px;background:linear-gradient(180deg,#ff5560,#cf2a35)}
.card .rar{position:absolute;bottom:0;left:0;right:0;height:3px}
.card.type-spell .art,.card.type-secret .art,.card.type-artifact .art{filter:saturate(1.2)}

/* ---------- Replay ---------- */
.replay-panel{max-width:900px;margin:0 auto}
.replay-board{background:#0a0f1c;border:1px solid var(--line-2);border-radius:12px;padding:16px;margin-top:14px}
.replay-side{padding:10px 0}
.replay-side + .replay-side{border-top:1px solid var(--line);margin-top:10px;padding-top:14px}
.replay-hero{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15px}
.replay-hero-icon{font-size:26px;width:32px;height:32px;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;flex:none}
.replay-row{min-height:110px}
.replay-card{cursor:default}
.replay-card:hover{transform:none}
/* .log.replay-log (2 osztály) — magasabb specificitás, mint a lentebb definiált
   .log{position:fixed;...} globális szabály, különben az felülírja ezt (forrás-sorrend
   dönt azonos specificitásnál), és a napló fixen a bal-alsó sarokban lebegve eltakarja
   a visszajátszás scrub-vezérlőit. */
.log.replay-log{position:static;left:auto;bottom:auto;width:auto;max-height:260px;margin-top:10px}
.replay-scrub{background:#0a0f1c;border:1px solid var(--line-2);border-radius:12px;padding:12px 16px;margin-top:14px}
.replay-scrub-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.replay-turn-badge{background:#1c2740;border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--gold,#e3b341)}
.replay-slider{width:100%;margin-top:10px;accent-color:var(--accent,#3f7cff);cursor:pointer}
.replay-log div{cursor:pointer;border-radius:4px;padding:2px 4px}
.replay-log div:hover{background:#ffffff0d}
.replay-log .rep-future{opacity:.32}
.replay-log .rep-current{background:#3f7cff26;box-shadow:inset 0 0 0 1px #3f7cff55;font-weight:700}

/* ---------- Draft ---------- */
.draft-offer{justify-content:center;gap:24px;padding:10px 0}
.draft-pick-btn{background:none;border:0;padding:0;cursor:pointer;transition:.15s}
.draft-pick-btn:hover{transform:translateY(-6px) scale(1.03)}
.draft-pick-btn .card:hover{transform:none}

/* ---------- Kampány ---------- */
.campaign-row{display:grid;grid-template-columns:36px 1fr 90px 110px;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.campaign-row:last-child{border-bottom:0}
.campaign-row.locked{opacity:.45}
.campaign-num{width:36px;height:36px;border-radius:50%;background:#0c1526;border:1px solid var(--line-2);
  display:grid;place-items:center;font-weight:800}
.campaign-name{font-weight:800;font-size:15px}
.campaign-stars{text-align:center;letter-spacing:2px;color:#3a4152}
.campaign-stars .star.on{color:#fbbf24}
.campaign-action{text-align:right}
@media (max-width:640px){.campaign-row{grid-template-columns:30px 1fr;grid-template-areas:"num info" ". stars" ". action"}
  .campaign-stars,.campaign-action{text-align:left}}

/* ---------- Küldetések ---------- */
.quest-row{display:grid;grid-template-columns:1fr 140px 70px 150px;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.quest-row:last-child{border-bottom:0}
.quest-desc{font-size:14px}
.quest-bar{height:8px;border-radius:4px;background:#0a0f1c;border:1px solid var(--line-2);overflow:hidden}
.quest-bar-fill{height:100%;background:linear-gradient(90deg,#3fb950,#22c55e)}
.quest-progress-num{font-size:12px;color:var(--muted);text-align:center}
.quest-reward{text-align:right}
.quest-ready .quest-bar-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.quest-claimed{opacity:.55}
@media (max-width:640px){.quest-row{grid-template-columns:1fr;text-align:left;gap:6px}}

/* ---------- Fúzió ---------- */
.fusion-layout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.fusion-recipe{position:sticky;top:16px}
.recipe-target{display:flex;justify-content:center;margin-bottom:10px}
.sac-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.sac-item .sac-name{flex:1;font-size:13px}
.sac-item input[type=number]{width:54px;background:#0a0f1c;border:1px solid var(--line-2);
  color:#fff;border-radius:6px;padding:4px 6px;text-align:center}
.card.selected-target{border-color:#f59e0b;box-shadow:0 0 14px #f59e0b88}

/* ---------- Collection layout ---------- */
.collection{display:grid;grid-template-columns:170px 1fr 250px;gap:18px}
.filters .fgroup{margin-bottom:16px}
.filters .ftitle{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:6px}
.filters .fopt{display:block;padding:5px 8px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:14px}
.filters .fopt:hover{background:var(--panel-2);color:var(--text)}
.filters .fopt.active{background:var(--panel-2);color:#fff;font-weight:700}
.filters .elines{display:flex;gap:8px}
.filters .el{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:18px;
  cursor:pointer;border:2px solid transparent;background:#0c1526}
.filters .el.active{border-color:#fff}
.card-grid{display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}
.deckbuild{position:sticky;top:80px;align-self:start}
.deckbuild h3{display:flex;justify-content:space-between;align-items:center}
.deckrow{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);margin-bottom:6px;background:#0c1526}
.deckrow:hover{border-color:var(--red)}
.deckrow .ric{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;font-size:18px}
.deckrow .rcost{width:22px;height:22px;border-radius:50%;background:#c9821a;color:#241200;
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.deckrow .rname{flex:1;font-size:13px;font-weight:600}
.deckrow .rqty{font-size:12px;color:var(--gold);font-weight:800}
.deck-count{font-size:13px;color:var(--muted)}
.deck-count b{color:#fff}

/* ---------- Packs ---------- */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.pack{position:relative;border-radius:12px;border:1px solid var(--line-2);overflow:hidden;
  background:linear-gradient(160deg,#1a2742,#0e1830);text-align:center;padding:22px 16px;cursor:pointer}
.pack:hover{border-color:var(--accent);transform:translateY(-3px);transition:.15s}
.pack:target{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}
.pack .pico{font-size:72px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));width:96px;height:96px;margin:0 auto;display:grid;place-items:center;border-radius:12px;overflow:hidden}
.pack .pname{font-weight:800;margin-top:8px}
.pack .pdesc{font-size:12px;color:var(--muted);min-height:32px;margin:6px 0}
.pack .pprice{color:var(--gold);font-weight:800}
.pack .pprice:before{content:"⛃ "}
.pack .pcards{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:6px 0}
.pack .pcard-chip{display:flex;align-items:center;gap:4px;background:#0008;border:1px solid var(--line-2);
  border-radius:8px;padding:3px 6px;font-size:11px;text-align:left}
.pack .pcard-chip img{width:20px;height:20px;object-fit:cover;border-radius:4px}
.pack .pcard-chip .pcc-emoji{width:20px;height:20px;display:grid;place-items:center;font-size:14px}
.pack .pcard-chip .pcc-qty{color:var(--gold);font-weight:700}
.pack .pcards-pool{max-height:160px;overflow-y:auto;padding:2px}
.pack .pcard-chip.pcc-more{color:var(--muted);font-style:italic;border-style:dashed}

/* Pack opening reveal */
.reveal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:18px}
.reveal .card{animation:flip .5s ease both}
@keyframes flip{from{transform:rotateY(90deg);opacity:0}to{transform:rotateY(0);opacity:1}}
.reveal .card.new::after{content:"ÚJ";position:absolute;top:32px;right:6px;background:var(--gold);
  color:#241200;font-size:10px;font-weight:800;padding:1px 5px;border-radius:4px;z-index:4}

/* ---------- Leaderboard ---------- */
table.lb{width:100%;border-collapse:collapse}
table.lb th,table.lb td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
table.lb th{color:var(--muted-2);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
table.lb tr:hover td{background:var(--panel-2)}
.rank{font-weight:800;color:var(--gold);width:40px}
.lb .me td{background:#14233f}
.lb-player{display:inline-flex;align-items:center;color:var(--text);font-weight:600}
.lb-player:hover{color:var(--accent-2);text-decoration:underline}

/* ---------- Profile / friends ---------- */
.profile-head{display:flex;gap:20px;align-items:center}
.profile-head .big-av{width:96px;height:96px;border-radius:14px;display:grid;place-items:center;
  font-size:56px;border:3px solid var(--line-2);background:#0c1424}
.stat-row{display:flex;gap:26px;margin-top:8px}
.stat-row .s b{font-size:22px}
.stat-row .s span{display:block;font-size:12px;color:var(--muted)}
.av-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.av-grid .av{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;font-size:34px;
  cursor:pointer;border:2px solid var(--line-2);background:#0c1424}
.av-grid .av.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.friend-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);
  border-radius:8px;margin-bottom:8px;background:#0c1526}
.friend-row .fname{flex:1;font-weight:700}
.friend-row .fname:hover{text-decoration:underline;color:var(--accent-2)}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:700}
.badge.on{background:#0f2e18;color:#6ee787}
.badge.pending{background:#3a2c10;color:#f5c542}

/* ---------- Battle board ---------- */
.board{min-height:100vh;background:
  radial-gradient(900px 500px at 50% 0%, #14233f88 0%, transparent 55%);
  display:flex;flex-direction:column;position:relative;z-index:1}

/* ---------- Animált csata-háttér ---------- */
body.in-battle{background:linear-gradient(180deg,#0a1322,#060a12)}
.battle-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.battle-bg::before{content:"";position:absolute;inset:-60%;
  background:conic-gradient(from 0deg at 50% 50%,#0a1322 0%,#12234400 20%,#1b2f5a22 35%,#0a132200 55%,#2a1c3a22 75%,#0a1322 100%);
  animation:bgSpin 60s linear infinite}
@keyframes bgSpin{to{transform:rotate(360deg)}}
.bg-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.32;
  animation:orbFloat 18s ease-in-out infinite alternate}
.bg-orb.o1{width:440px;height:440px;background:#1d3a6e;top:-130px;left:-90px}
.bg-orb.o2{width:380px;height:380px;background:#3b1f5e;bottom:-110px;right:-70px;animation-duration:24s}
.bg-orb.o3{width:300px;height:300px;background:#0e4a4a;top:38%;left:58%;animation-duration:15s}
@keyframes orbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,45px) scale(1.18)}}
.bg-particle{position:absolute;bottom:-12px;border-radius:50%;background:#7dd3fc;
  box-shadow:0 0 6px currentColor;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.75}85%{opacity:.5}100%{transform:translateY(-108vh);opacity:0}}
.hero-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;position:relative;z-index:10;
  background:#0a0f1ce6}
.hero-bar.enemy{justify-content:flex-end}
.hero{display:flex;align-items:center;gap:10px}
.hero .hp{font-size:26px;font-weight:800}
.hero .hp small{font-size:14px;color:var(--muted)}
.hero .av{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-size:26px;
  border:2px solid var(--line-2);background:#0c1424}
.mana{display:flex;gap:3px}
.crystal{width:13px;height:13px;border-radius:50%;background:#1a2740;border:1px solid #2a3c60}
.crystal.full{background:radial-gradient(circle at 35% 30%,#7dd3fc,#2563eb);border-color:#7dd3fc;
  box-shadow:0 0 6px #3b82f6}
.lane{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:6px 16px}

/* ---------- Csatatér-nézet: alap (flat) / 2.5D / 3D — a játékos állítja (settings.php) ---------- */
.board-3d-wrap{position:relative;flex:1;display:flex}
.board-3d-wrap .lane{width:100%}
.view-reset-btn{position:absolute;top:6px;right:16px;z-index:20;opacity:.75}
.view-reset-btn:hover{opacity:1}

body[data-battle-view="2.5d"] .board-3d-wrap{perspective:1800px;perspective-origin:50% 20%}
body[data-battle-view="3d"] .board-3d-wrap{perspective:1000px;perspective-origin:50% 15%}

body[data-battle-view="2.5d"] .lane,
body[data-battle-view="3d"] .lane{
  transform-style:preserve-3d;
  will-change:transform;
  transform:rotateX(var(--board-rx,32deg)) rotateY(var(--board-ry,0deg));
}
body[data-battle-view="2.5d"] .board-3d-wrap.dragging .lane,
body[data-battle-view="3d"] .board-3d-wrap.dragging .lane{transition:none;cursor:grabbing}
body[data-battle-view="2.5d"] .lane,
body[data-battle-view="3d"] .lane{transition:transform .18s ease-out}
body[data-battle-view="2.5d"] .board-3d-wrap,
body[data-battle-view="3d"] .board-3d-wrap{cursor:grab}
body[data-battle-view="2.5d"] .row,
body[data-battle-view="3d"] .row{transform-style:preserve-3d}
body[data-battle-view="2.5d"] .bcard,
body[data-battle-view="3d"] .bcard{transform-style:preserve-3d;box-shadow:0 14px 22px -10px #000a}
.row{display:flex;gap:10px;justify-content:center;min-height:120px;align-items:center}
.bcard{width:96px;height:120px;border-radius:10px;background:#0c1526;border:1px solid var(--line-2);
  position:relative;cursor:pointer;transition:.12s;display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-4px)}
.bcard.selectable{box-shadow:0 0 0 2px var(--green)}
.bcard.selected{box-shadow:0 0 0 3px var(--gold);transform:translateY(-6px)}
.bcard.target{box-shadow:0 0 0 3px var(--red);cursor:crosshair}
.bcard.frozen{filter:grayscale(.6) brightness(.8)}
.bcard.frozen::after{content:"❄️";position:absolute;inset:0;display:grid;place-items:center;font-size:30px}
.bcard.just-played{animation:justPlayed .7s ease}
/* Tárgy (artifact) — enélkül egy aktív aura-kártya pontosan úgy nézett ki, mint egy
   üres/törött lény (nincs táma/élet-szám), ami könnyen "nem is működik" benyomást keltett. */
.bcard.type-artifact{border-color:#a855f7;box-shadow:0 0 0 1px #a855f755,0 0 10px -2px #a855f766}
.bcard.type-artifact .bart{background:radial-gradient(circle,#a855f722,transparent 70%)}
@keyframes justPlayed{
  0%{transform:scale(.4) translateY(-18px);opacity:0;box-shadow:0 0 0 3px var(--gold)}
  55%{transform:scale(1.08) translateY(0);opacity:1;box-shadow:0 0 22px 4px var(--gold)}
  100%{transform:scale(1);box-shadow:0 0 0 0px transparent}
}
.bcard .bart{flex:1;display:grid;place-items:center;font-size:40px}
.bcard .cost{top:4px;left:4px;width:22px;height:22px;font-size:12px}
.bcard .stat{position:absolute;bottom:4px;width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.bcard .atk{left:4px;background:linear-gradient(180deg,#3f7cff,#2059d6)}
.bcard .hp{right:4px;background:linear-gradient(180deg,#ff5560,#cf2a35)}
.bcard .kw{position:absolute;top:4px;right:4px;font-size:12px}
.bcard .cname{font-size:10px;text-align:center;padding:2px;color:var(--muted)}
.hand{display:flex;gap:8px;justify-content:center;padding:8px;min-height:130px}
.hand .bcard{cursor:grab}
.hand .bcard.playable{box-shadow:0 0 10px var(--green)}

/* Titkok (csapdák) az asztalon: kisebb sáv a lény-sorok mellett, "lepakolt" kártyaként,
   nem csak egy számláló-ikonként. A sajátjaink arccal felfelé (mine), az ellenfélé
   kizárólag lefordítva (hidden) — lásd assets/js/battle.js renderSecrets(). */
.secrets-row{min-height:64px;gap:8px}
.secrets-row:empty,.secrets-row[style*="display: none"]{min-height:0}
.secret-slot{width:64px;height:64px;border-radius:8px}
.secret-slot.mine{background:#0c1526;border:1px solid #a855f7;
  box-shadow:0 0 0 1px #a855f733,0 0 10px -3px #a855f766}
.secret-slot.mine .cost{top:2px;left:2px;width:18px;height:18px;font-size:10px}
.secret-slot.mine .bart{font-size:22px}
.secret-slot.mine .cname{font-size:8px;padding:1px}
.secret-slot.hidden{background:repeating-linear-gradient(135deg,#1d2c4a,#1d2c4a 6px,#16223b 6px,#16223b 12px);
  border:1px solid var(--line-2);cursor:default;display:flex;align-items:center;justify-content:center}
.secret-slot.hidden:hover{transform:none}
.secret-slot .secret-back{font-size:24px;opacity:.85}

/* ---------- HUD-elrendezés (admin/design.php) ---------- */
.mana-num{display:none;margin-left:4px;font-size:12px;color:var(--muted);align-self:center}
body[data-hud-extra="1"] .mana-num{display:inline-block}

body[data-card-size="sm"] .bcard{width:76px;height:98px}
body[data-card-size="sm"] .bcard .bart{font-size:30px}
body[data-card-size="lg"] .bcard{width:118px;height:148px}
body[data-card-size="lg"] .bcard .bart{font-size:48px}

body[data-board-density="compact"] .row{gap:6px;min-height:100px}
body[data-board-density="compact"] .lane{gap:8px;padding:4px 10px}
body[data-board-density="compact"] .hand{gap:4px;padding:4px}
body[data-board-density="spacious"] .row{gap:18px}
body[data-board-density="spacious"] .lane{gap:22px;padding:10px 22px}
body[data-board-density="spacious"] .hand{gap:14px;padding:14px}
.side-controls{position:fixed;right:16px;bottom:30%;text-align:center}
.turn-badge{background:#0c1526;border:1px solid var(--line-2);border-radius:8px;padding:8px 12px;
  margin-bottom:10px;font-weight:700}
.end-turn{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3b82f6,#1d4ed8);
  border:3px solid #60a5fa;color:#fff;font-weight:800;cursor:pointer;font-size:13px;box-shadow:0 0 20px #2563eb88}
.end-turn:disabled{opacity:.5;cursor:wait}
.hero-power-btn{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f59e0b,#b45309);
  border:3px solid #fbbf24;color:#fff;font-weight:800;cursor:pointer;font-size:22px;box-shadow:0 0 16px #f59e0b77;
  display:flex;align-items:center;justify-content:center;position:relative;margin-left:auto}
.hero-power-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.hero-power-btn .hp-cost{position:absolute;bottom:-6px;right:-6px;background:#0a0f1c;border:2px solid #fbbf24;
  border-radius:50%;width:20px;height:20px;font-size:11px;display:flex;align-items:center;justify-content:center;color:#fbbf24}
.log{position:fixed;left:16px;bottom:16px;width:280px;max-height:160px;overflow:auto;z-index:1;
  background:#0a0f1ccc;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:12px;color:var(--muted)}
.log div{padding:1px 0;border-bottom:1px solid #ffffff08}
.float-dmg{position:fixed;font-size:40px;font-weight:900;color:#ff5560;text-shadow:0 2px 6px #000;
  pointer-events:none;animation:floatup 1s ease forwards;z-index:99}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}
.float-dmg.small{font-size:20px}

/* Lény halál-animáció: a valódi .bcard elem a render() innerHTML-cseréjével azonnal
   eltűnik, ezért egy fixpozíciós klónon (lásd battle.js playDeathAnim()) játsszuk le az
   elhalványulást/"törést", a valós DOM-tól függetlenül, annak tetején. */
.dying-clone{position:fixed;z-index:145;pointer-events:none;animation:cardDeath .6s ease forwards}
@keyframes cardDeath{
  0%{opacity:1;transform:scale(1) rotate(0deg);filter:grayscale(0) brightness(1)}
  40%{opacity:.9;transform:scale(1.05) rotate(-4deg);filter:grayscale(.6) brightness(1.3)}
  100%{opacity:0;transform:scale(.45) rotate(14deg) translateY(24px);filter:grayscale(1) brightness(.35)}
}

/* Kártya-lerakás repülő animáció: egy klón "repül" a forrás (hős-portré/kéz) helyéről a
   végleges tábla-pozícióra (lásd battle.js flyCardToBoard()) — a kezdő állapot itt, a
   mozgást (transform) a JS indítja el, hogy a transition lejátszódjon. */
.fly-clone{position:fixed;z-index:150;pointer-events:none;opacity:.2;transform:scale(.35);
  transition:transform .32s cubic-bezier(.2,.8,.25,1.15),opacity .32s ease;
  box-shadow:0 0 26px var(--gold),0 0 50px var(--gold)}

/* ---------- Mitikus kártya bemutató animáció ---------- */
#mythicReveal{position:fixed;inset:0;z-index:270;display:none;align-items:center;justify-content:center;
  background:radial-gradient(700px 500px at 50% 45%,#3a2a05ee,#06090ff8);backdrop-filter:blur(6px);
  pointer-events:none}
#mythicReveal.show{display:flex;animation:mythicBgFade .3s ease both}
@keyframes mythicBgFade{from{opacity:0}to{opacity:1}}
#mythicReveal .mythic-card{text-align:center;animation:mythicPop .55s cubic-bezier(.2,1.6,.35,1) both}
@keyframes mythicPop{0%{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
#mythicReveal .mythic-art{width:160px;height:200px;margin:0 auto 14px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#f59e0b44,#0c1526);border:3px solid var(--mythic);
  box-shadow:0 0 40px var(--mythic),0 0 90px #f59e0b66;display:grid;place-items:center;font-size:80px}
#mythicReveal .mythic-art img{width:100%;height:100%;object-fit:cover}
#mythicReveal .mythic-name{font-size:26px;font-weight:800;color:#fff;text-shadow:0 0 20px var(--mythic)}
#mythicReveal .mythic-label{font-size:14px;font-weight:900;letter-spacing:.2em;color:var(--mythic);margin-top:4px}
#mythicReveal .mythic-card.foe .mythic-label{color:#ff8a8a}

/* ---------- Match result ---------- */
.result-screen{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% 40%,#13233fee,#06090ff5);backdrop-filter:blur(5px);
  animation:resultFade .45s ease both}
@keyframes resultFade{from{opacity:0}to{opacity:1}}
.result-screen h1{font-size:72px;letter-spacing:.06em;
  animation:resultPop .8s cubic-bezier(.2,1.5,.4,1) .15s both;text-shadow:0 0 34px currentColor}
@keyframes resultPop{0%{transform:scale(.2) rotate(-7deg);opacity:0}60%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.result-screen.win h1{color:#6ee787}
.result-screen.loss h1{color:#ff7b81}
.result-screen .vs-row,.result-screen .reward-line,.result-screen .btn{animation:resultRise .5s ease .45s both}
@keyframes resultRise{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.redirect-msg{color:var(--muted);font-size:14px;margin-top:16px;animation:resultRise .5s ease .7s both}
.confetti{position:fixed;top:-16px;z-index:260;width:9px;height:14px;border-radius:2px;pointer-events:none;
  animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(106vh) rotate(720deg)}}
.vs-row{display:flex;align-items:center;gap:40px;margin:20px 0}
.vs-row .pp{text-align:center}
.vs-row .pp .av{width:150px;height:150px;border-radius:16px;display:grid;place-items:center;font-size:90px;
  border:3px solid var(--line-2);background:#0c1424}
.vs-row .vs{font-size:60px;font-weight:900;color:var(--muted);font-style:italic}

/* ---------- Admin ---------- */
.admin-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.admin-side{background:#0a1120;border-right:1px solid var(--line);padding:16px}
.admin-side h2{font-size:16px;color:var(--accent-2)}
.admin-side a{display:block;padding:10px 12px;border-radius:8px;color:var(--muted);margin-bottom:4px;font-weight:600}
.admin-side a:hover,.admin-side a.active{background:var(--panel-2);color:#fff}
.admin-main{padding:24px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat-cards .sc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.stat-cards .sc b{font-size:28px;display:block}
.stat-cards .sc span{color:var(--muted);font-size:13px}
table.data{width:100%;border-collapse:collapse;background:var(--panel);border-radius:10px;overflow:hidden}
table.data th,table.data td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
table.data th{background:#0e1830;color:var(--muted);font-size:12px;text-transform:uppercase}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;font-weight:700}

footer{padding:16px 20px;color:var(--muted-2);font-size:12px;text-align:right}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .play-grid,.collection{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;row-gap:8px}
  .nav{width:100%;order:3;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;
    margin:0;scrollbar-width:thin}
  .nav a{padding:10px 12px;font-size:11px;white-space:nowrap;flex:none}
  .admin-shell{grid-template-columns:1fr}
  .deckbuild{position:static}
}

@media(max-width:640px){
  .wrap{padding:16px 12px}
  .brand-coins{min-width:0}
  .nav-deck-icon{display:none} /* a Collection már elérhető a nav-sávból */

  /* Keskeny nézeten a tooltip-buborék a képernyő közepén jelenik meg rögzítve,
     így sosem vágódik le sem oldalt, sem a nézet tetején/alján, bárhol is van az ikon. */
  .help-tip:hover::after,.help-tip:focus::after{
    position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
    max-width:86vw;max-height:70vh;overflow:auto;font-size:13px}
  .help-tip:hover::before,.help-tip:focus::before{display:none}

  /* Csata: a fix méretű sorok helyett vízszintes görgetés + kisebb lapok */
  .row{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:2px 4px;min-height:104px}
  .hand{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;min-height:112px}
  .bcard{width:76px;height:98px;flex:none}
  .bcard .bart{font-size:30px}
  .bcard .cname{font-size:9px}

  .hero-bar{padding:6px 10px;gap:8px}
  .hero-bar .hero-info{font-size:11px}
  .board .hero-info .hp-num{font-size:18px}
  .portrait{width:48px;height:48px;font-size:28px}
  .end-turn{width:60px;height:60px;font-size:11px}
  .hero-power-btn{width:46px;height:46px;font-size:18px}
  .crystal{width:10px;height:10px}

  /* A napló ne fixált overlay legyen, hanem a folyásba illeszkedjen — nem takar ki mást */
  .log{position:static;width:auto;max-height:100px;margin:6px 10px}

  .battle-tools{bottom:8px;right:8px;gap:6px}
  .battle-tools .tool-btn{padding:8px 10px;font-size:12px}
  .side-panel{width:calc(100vw - 24px);right:12px;left:12px;bottom:56px}

  .campaign-row,.quest-row{font-size:13px}
}

/* ---------- Csata: kiegészítő elemek ---------- */
body.in-battle{overflow:hidden}
.board .hero-info{display:flex;flex-direction:column;gap:2px;font-size:13px}
.board .hero-info .hp-num{font-size:22px;font-weight:800}
.board .hero-info .hero-name{color:var(--muted)}
.board .hero-info .hand-count{font-size:11px;color:#5d6e8c}
.board .hero-info .secret-count{font-size:11px;color:#c084fc;font-weight:700}
.hero-bar.enemy .hero-info{text-align:right;align-items:flex-end}
.portrait{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;font-size:38px;
  background:#0c1526;border:2px solid var(--line-2);cursor:default}
.portrait.target{box-shadow:0 0 0 3px var(--red);cursor:crosshair}
.crystal.empty{opacity:.5}
.turn-divider{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted);
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:2px 0}
.turn-divider .timer{font-weight:800;color:#7dd3fc}
.battle-exit{position:fixed;top:12px;right:14px;z-index:20}
.battle-exit a{color:#8ba0c2;text-decoration:none;font-size:13px;background:#0c1526aa;
  padding:6px 10px;border-radius:8px;border:1px solid var(--line-2)}
.battle-exit a:hover{color:#ff7b81}
.reward-line{color:var(--muted);margin:6px 0 22px;font-size:16px}
.btn.lg{font-size:18px;padding:14px 38px}
.log .lg-good{color:#6ee787}
.log .lg-bad{color:#ff7b81}
.log .lg-sys{color:#8ba0c2}
.float-dmg.heal{color:#6ee787}

/* ---------- Admin: űrlapok és avatar rács ---------- */
.card-form label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
.card-form input,.card-form select,.card-form textarea{
  width:100%;margin-top:4px;padding:9px 11px;border-radius:8px;background:#0c1526;
  border:1px solid var(--line-2);color:var(--text);font-size:14px}
.card-form input:focus,.card-form select:focus,.card-form textarea:focus{outline:none;border-color:var(--accent)}
.card-form.panel{padding:18px}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.avatar-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.avatar-tile .av-ico{font-size:46px;line-height:1;width:64px;height:64px;margin:0 auto;display:grid;place-items:center;border-radius:12px;overflow:hidden}
.avatar-tile .av-name{margin-top:6px;font-size:13px;font-weight:600}

/* ===================== PvP / chat / üzenetek — Phase 2 ===================== */

/* Nav értesítő jelvény */
.nav-badge{display:inline-block;min-width:16px;padding:0 5px;border-radius:9px;background:var(--red);
  color:#fff;font-size:11px;font-weight:800;text-align:center;line-height:16px;vertical-align:top}

/* Matchmaking overlay */
.mm-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,18,.86);backdrop-filter:blur(4px)}
.mm-card{background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:34px 40px;
  text-align:center;max-width:360px}
.mm-card h2{margin:14px 0 4px}
.mm-spinner{width:54px;height:54px;border-radius:50%;margin:0 auto;border:5px solid var(--line-2);
  border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Drag nyíl */
.drag-arrow{position:fixed;inset:0;z-index:150;pointer-events:none}
.drag-arrow line{filter:drop-shadow(0 0 6px #ff5d62);animation:dashMove .4s linear infinite}
@keyframes dashMove{to{stroke-dashoffset:-10}}
@keyframes panelUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Tooltip */
.card-tip{position:fixed;z-index:300;pointer-events:none;width:220px;background:#0b1322;
  border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:13px}
.tip-top{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.tip-cost{background:linear-gradient(180deg,#7dd3fc,#2563eb);color:#fff;font-weight:800;border-radius:50%;
  width:24px;height:24px;display:grid;place-items:center;font-size:13px}
.tip-type{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin:2px 0 6px}
.tip-desc{color:var(--text);margin-bottom:6px;line-height:1.35}
.tip-kws{display:flex;flex-wrap:wrap;gap:4px}
.tip-kw{background:#16223b;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:11px;color:var(--accent-2)}
.tip-stats{margin-top:6px;font-weight:700}

/* Kép-nagyítás (lightbox) + képesség-mutató hover panel — gyűjtemény/fúzió
   (assets/js/card-popup.js). Külön id/osztály-készlet a csata #tooltip/.card-tip
   elemétől, hogy a két rendszer ne ütközzön, ha valaha egy oldal mindkettőt betöltené. */
#cardPopupTip{position:fixed;z-index:300;pointer-events:none;max-width:260px;display:none;
  background:#0b1322;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:13px}
#cardPopupTip .kw-row{margin-bottom:8px}
#cardPopupTip .kw-row:last-child{margin-bottom:0}
#cardPopupTip .kw-name{font-weight:700;color:var(--accent-2)}
#cardPopupTip .kw-desc{color:var(--muted);margin-top:2px;line-height:1.35}
.card-art-img:hover{filter:brightness(1.12)}
#cardLightbox{position:fixed;inset:0;background:rgba(2,6,15,.88);z-index:400;cursor:zoom-out;
  display:none;align-items:center;justify-content:center}
#cardLightbox.open{display:flex}
#cardLightbox img{max-width:min(80vw,480px);max-height:80vh;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid var(--line-2)}

/* Kör állapot jelző */
.turn-state{font-size:12px;font-weight:800;padding:2px 10px;border-radius:20px}
.turn-state.mine{background:#0f2e18;color:#6ee787}
.turn-state.theirs{background:#2a1a10;color:#f5a742}

/* Csata eszköztár — jobb alsó sarok */
.battle-tools{position:fixed;bottom:14px;right:14px;z-index:120;display:flex;gap:8px}
.tool-btn{background:var(--panel);border:1px solid var(--line-2);color:var(--text);border-radius:8px;
  padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer}
.tool-btn:hover{border-color:var(--accent)}
.tool-btn.danger{color:#ffb4ad;border-color:#5a2d2d}
.chat-badge{display:inline-block;min-width:16px;padding:0 4px;border-radius:9px;background:var(--red);
  color:#fff;font-size:11px;font-weight:800;text-align:center}

/* Oldalsó panel (súgó + chat) — alulról nyílik */
.side-panel{position:fixed;bottom:62px;right:14px;z-index:130;width:300px;max-height:72vh;display:flex;flex-direction:column;
  animation:panelUp .22s ease;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5);overflow:hidden}
.sp-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#0e1830}
.sp-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.sp-body{padding:12px 14px;overflow-y:auto;font-size:13px;line-height:1.45}
.sp-body p{margin:0 0 8px}
.kw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.kw-list li{font-size:12px;color:var(--text)}

/* Küldetés-panel (battle.php) — a .quest-row alapból 4 oszlopos rács (760px-es
   quests.php oldalhoz méretezve), a 300px-es side-panel-be ez nem fér el, ezért itt
   egysoros helyett stackelt elrendezést kap, ugyanúgy mint a mobil nézetben. */
#questsPanel .quest-row{grid-template-columns:1fr;text-align:left;gap:4px;padding:8px 0}
#questsPanel .quest-reward{text-align:left}
#questsPanel h4{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}

/* Chat */
.chat-body{flex:1;display:flex;flex-direction:column;gap:6px;min-height:140px}
.chat-msg{max-width:85%;padding:6px 10px;border-radius:10px;font-size:13px;word-wrap:break-word}
.chat-msg .cm-name{display:block;font-size:10px;color:var(--muted);margin-bottom:1px}
.chat-msg.mine{align-self:flex-end;background:#16365e}
.chat-msg.theirs{align-self:flex-start;background:#1d2c4a}
.chat-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:#0b1322;border:1px solid var(--line-2);border-radius:8px;color:var(--text);padding:7px 10px}

/* Támadás-animációk */
.lunge-clone{position:fixed;z-index:140;pointer-events:none;transition:transform .18s cubic-bezier(.5,-0.4,.6,1.4);margin:0;
  box-shadow:0 0 20px #ff5d62aa,0 0 40px #ff5d6244}
.shake{animation:shake .28s ease}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-3px,1px)}}
.scr-shake{animation:scrShake .3s ease}
@keyframes scrShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
.hit-ring{position:fixed;z-index:146;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid #ffd36e;
  border-radius:50%;pointer-events:none;animation:ringOut .45s ease-out forwards}
@keyframes ringOut{from{transform:scale(.4);opacity:1}to{transform:scale(4);opacity:0}}
.hit-p{position:fixed;z-index:146;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
  animation:pfly .55s ease-out forwards}
@keyframes pfly{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.hit-spark{position:fixed;z-index:145;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffd36e 35%,rgba(255,93,98,0) 70%);animation:spark .4s ease-out forwards}
@keyframes spark{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.bcard.drop-hot,.portrait.drop-hot{box-shadow:0 0 0 3px #ff5d62,0 0 18px #ff5d62 !important}
body.not-your-turn .player-row,body.not-your-turn .hand{opacity:.85}
body.not-your-turn #endTurn{filter:grayscale(.6)}

/* Játékos lista */
.search-row{display:flex;gap:8px;margin:14px 0}
.search-row input{flex:1;background:#0b1322;border:1px solid var(--line-2);border-radius:8px;color:var(--text);padding:9px 12px}
.players-table .mini-av,.mini-av{width:34px;height:34px;border-radius:9px;background:#0c1424;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:18px}
.row-actions .btn{margin-right:4px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot.off{background:#42506e}
.incoming-ch{background:#13233f;border:1px solid var(--accent);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.incoming-ch .btn{margin-left:6px}
.challenge-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;
  background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:12px 18px;box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* Küldetés-teljesítés toast (csata közben) */
.quest-toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-24px);z-index:210;
  background:linear-gradient(135deg,#1b2f16,#0f2412);border:1px solid #3fb950;border-radius:10px;
  padding:10px 18px;box-shadow:0 12px 30px rgba(0,0,0,.5);text-align:center;opacity:0;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.quest-toast.show{opacity:1;transform:translate(-50%,0)}
.quest-toast b{color:#6ee787;font-size:14px}
.quest-toast div{color:var(--text);font-size:13px;margin-top:2px}
.quest-toast .qt-coins{display:inline-block;margin-top:4px;color:#ffd36e;font-weight:700;font-size:13px}

/* Privát üzenetek */
.pm-layout{display:flex;gap:16px;height:66vh;margin-top:10px}
.pm-threads{width:260px;flex:none;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.pm-thread{display:block;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--text)}
.pm-thread:hover{background:#0e1830}
.pm-thread.active{background:#16365e}
.pm-th-top{display:flex;justify-content:space-between;align-items:center}
.pm-th-prev{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-unread{background:var(--red);color:#fff;border-radius:9px;min-width:16px;padding:0 5px;font-size:11px;font-weight:800;text-align:center}
.pm-conv{flex:1;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pm-conv-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0e1830}
.pm-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.pm-msg{max-width:70%;padding:8px 12px;border-radius:12px;font-size:14px;position:relative;word-wrap:break-word}
.pm-msg.mine{align-self:flex-end;background:#16365e}
.pm-msg.theirs{align-self:flex-start;background:#1d2c4a}
.pm-time{display:block;font-size:10px;color:var(--muted);text-align:right;margin-top:2px}
.pm-compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.pm-compose input{flex:1;background:#0b1322;border:1px solid var(--line-2);border-radius:8px;color:var(--text);padding:10px 12px}
.pm-empty{padding:40px;text-align:center}
@media(max-width:720px){.pm-layout{flex-direction:column;height:auto}.pm-threads{width:auto;max-height:180px}.pm-messages{min-height:300px}}

/* =====================================================================
   Dizájn-rendszer: minden oldalon megjelenő, témánként más animált
   háttérréteg (.site-fx), plusz globális "élénkebb" mozgás a panelekre,
   gombokra és a navigációra. A színek maguktól a fenti :root CSS-
   változókból jönnek, amiket admin/themes.php ír felül témánként —
   ez a réteg csak a mozgást (animáció) adja hozzá.
   ===================================================================== */
.site-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.site-fx .fx1,.site-fx .fx2,.site-fx .fx3{position:absolute}

/* --- Modern: lebegő, elmosódott fényfoltok (aurora) --- */
[data-anim="aurora"] .fx1{width:420px;height:420px;border-radius:50%;filter:blur(80px);opacity:.28;
  background:var(--accent);top:-120px;left:-80px;animation:fxFloat 20s ease-in-out infinite alternate}
[data-anim="aurora"] .fx2{width:360px;height:360px;border-radius:50%;filter:blur(80px);opacity:.22;
  background:var(--gold);bottom:-100px;right:-60px;animation:fxFloat 26s ease-in-out infinite alternate-reverse}
[data-anim="aurora"] .fx3{width:300px;height:300px;border-radius:50%;filter:blur(80px);opacity:.2;
  background:var(--green);top:40%;left:60%;animation:fxFloat 16s ease-in-out infinite alternate}
@keyframes fxFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}

/* --- Futurisztikus: finom rácsvonalak + végigfutó pásztázó fénysáv --- */
[data-anim="scan"]::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:42px 42px;opacity:.16}
[data-anim="scan"] .fx1{left:0;right:0;top:-20%;height:120px;
  background:linear-gradient(180deg,transparent,var(--accent) 50%,transparent);opacity:.16;
  animation:fxScan 7s linear infinite}
@keyframes fxScan{from{top:-20%}to{top:120%}}

/* --- Anime: csillogó pontok --- */
[data-anim="sparkle"]::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 10% 20%,#fff9,transparent),
                    radial-gradient(2px 2px at 80% 12%,#fff7,transparent),
                    radial-gradient(2px 2px at 62% 68%,#fff9,transparent),
                    radial-gradient(2px 2px at 28% 82%,#fff6,transparent),
                    radial-gradient(2px 2px at 92% 55%,#fff8,transparent);
  animation:fxTwinkleBg 5s ease-in-out infinite alternate}
@keyframes fxTwinkleBg{from{opacity:.35}to{opacity:.9}}
[data-anim="sparkle"] .fx1,[data-anim="sparkle"] .fx2,[data-anim="sparkle"] .fx3{
  width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px currentColor;
  animation:fxTwinkle 2.4s ease-in-out infinite}
[data-anim="sparkle"] .fx1{top:15%;left:20%;color:var(--accent-2)}
[data-anim="sparkle"] .fx2{top:60%;left:75%;color:var(--gold);animation-delay:.8s}
[data-anim="sparkle"] .fx3{top:35%;left:52%;color:var(--red);animation-delay:1.5s}
@keyframes fxTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.5)}}

/* --- Synthwave / Vaporwave: retro perspektíva-rács + izzó napkorong --- */
[data-anim="grid"]::before{content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:55%;
  background-image:linear-gradient(var(--accent-2) 1px,transparent 1px),linear-gradient(90deg,var(--accent-2) 1px,transparent 1px);
  background-size:60px 40px;opacity:.3;transform:perspective(320px) rotateX(62deg);transform-origin:bottom;
  animation:fxGridMove 3s linear infinite}
[data-anim="grid"] .fx1{left:50%;top:10%;width:180px;height:180px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle,var(--gold),var(--red) 70%,transparent 72%);opacity:.5;filter:blur(2px);
  animation:fxPulse 4s ease-in-out infinite}
@keyframes fxGridMove{from{background-position-y:0}to{background-position-y:40px}}
@keyframes fxPulse{0%,100%{opacity:.35}50%{opacity:.65}}

/* --- Rusztikus / Loft: meleg vinyetta + lassan hulló porszemek --- */
[data-anim="grain"]::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 40%,#00000055 100%)}
[data-anim="grain"] .fx1,[data-anim="grain"] .fx2,[data-anim="grain"] .fx3{
  width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.45;top:-5%;
  animation:fxDrift linear infinite}
[data-anim="grain"] .fx1{left:15%;animation-duration:14s}
[data-anim="grain"] .fx2{left:55%;animation-duration:19s;animation-delay:4s}
[data-anim="grain"] .fx3{left:80%;animation-duration:16s;animation-delay:8s}
@keyframes fxDrift{from{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.5}90%{opacity:.3}to{transform:translateY(110vh) translateX(30px);opacity:0}}

/* --- Solarpunk: lassan hulló, forgó levelek --- */
[data-anim="leaves"] .fx1,[data-anim="leaves"] .fx2,[data-anim="leaves"] .fx3{
  width:14px;height:14px;background:var(--green);opacity:.5;border-radius:0 70% 0 70%;top:-8%;
  animation:fxLeafFall linear infinite}
[data-anim="leaves"] .fx1{left:20%;animation-duration:12s}
[data-anim="leaves"] .fx2{left:55%;background:var(--gold);animation-duration:16s;animation-delay:3s}
[data-anim="leaves"] .fx3{left:80%;animation-duration:14s;animation-delay:6s}
@keyframes fxLeafFall{from{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}10%{opacity:.6}90%{opacity:.4}to{transform:translateY(110vh) translateX(-60px) rotate(340deg);opacity:0}}

/* --- Globális "élő" mozgás: panelek belépő animációja, gomb- és nav-hover --- */
.panel{animation:fxPanelIn .35s ease both}
@keyframes fxPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.btn:active:not(:disabled){transform:translateY(0)}
.nav a{transition:color .15s ease,border-color .2s ease}
.avatar-chip,.mini-av,.big-av,.portrait,.av-grid .av,.avatar-tile .av-ico{transition:transform .15s ease,box-shadow .15s ease}
.avatar-chip:hover,.av-grid .av:hover,.avatar-tile:hover .av-ico{transform:scale(1.06)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);transition:box-shadow .15s ease,border-color .15s ease}

.theme-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.theme-swatch{cursor:pointer;text-align:center;width:110px}
.theme-swatch-preview{width:110px;height:72px;border-radius:12px;border:2px solid var(--line-2);
  display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-bottom:8px;transition:transform .15s ease,box-shadow .15s ease}
.theme-swatch-preview span{width:10px;height:10px;border-radius:50%;box-shadow:0 0 6px currentColor}
.theme-swatch:hover .theme-swatch-preview{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.theme-swatch.active .theme-swatch-preview{box-shadow:0 0 0 3px var(--accent)}
.theme-swatch-name{margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}
.theme-swatch.active .theme-swatch-name{color:var(--text)}

.theme-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
.theme-color-field{display:flex;flex-direction:column;gap:4px;font-size:11px;text-transform:none;letter-spacing:0}
.theme-color-field input[type="color"]{width:100%;height:34px;padding:2px;border-radius:6px;border:1px solid var(--line-2);background:transparent;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  .site-fx *,.site-fx::before,.site-fx::after{animation:none!important}
  .panel{animation:none!important}
  .btn,.nav a,.avatar-chip,.mini-av,.big-av,.portrait,.av-grid .av,.avatar-tile .av-ico{transition:none!important}
}

/* Bevezető / tutorial spotlight-túra (assets/js/tutorial.js) — play.php + battle.php */
.tut-overlay{position:fixed;inset:0;z-index:500;background:rgba(2,6,15,.6);pointer-events:auto}
.tut-hole{position:fixed;z-index:501;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(2,6,15,.72);border:2px solid var(--accent,#3b82f6);
  transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.tut-card{position:fixed;z-index:502;background:var(--panel,#16223b);border:1px solid var(--line-2,#33456b);
  border-radius:var(--radius,10px);padding:16px 18px;box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:left .25s ease,top .25s ease}
.tut-card-title{font-weight:800;font-size:16px;margin-bottom:6px;color:var(--text,#e7ecf5)}
.tut-card-text{font-size:13px;color:var(--muted,#8ba0c2);line-height:1.5}
.tut-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.tut-card-progress{font-size:11px;color:var(--muted-2,#5e7299);font-weight:700;letter-spacing:.02em}
.tut-card-btns{display:flex;gap:6px}
@media (max-width:520px){
  .tut-card{max-width:calc(100vw - 32px)}
}

/* Varázslat/csapda/titok effektek: füst (erdő), tűz (tűz), elektromosság (víz) +
   pajzs-villanás (jég-fala blokk) — lásd assets/js/battle.js elementFX()/shieldFX()
   és társai. Ugyanaz a "spawn pár tucat rövid életű div-et document.body-ra" minta,
   mint a támadás-becsapódás .hit-ring/.hit-p/.hit-spark effektjeinél (140-150 z-index
   sáv), csak más színpalettával és mozgással minden elemhez. */
.smoke-p{position:fixed;z-index:148;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(225,225,230,.85),rgba(180,180,190,.4) 60%,transparent 75%);
  animation:smokeRise .9s ease-out forwards}
@keyframes smokeRise{
  0%{transform:translate(0,0) scale(.5);opacity:.9}
  100%{transform:translate(var(--dx),calc(var(--dy) - 60px)) scale(2.2);opacity:0}
}
.fire-p{position:fixed;z-index:148;width:10px;height:14px;margin:-7px 0 0 -5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  pointer-events:none;background:linear-gradient(0deg,#ff5d1a,#ffb648 60%,#fff6cc);
  box-shadow:0 0 8px #ff8a3daa;animation:fireFlick .55s ease-out forwards}
@keyframes fireFlick{
  0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1}
  100%{transform:translate(var(--dx),calc(var(--dy) - 40px)) scale(.2) rotate(var(--rot));opacity:0}
}
.fire-flash{position:fixed;z-index:147;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff6cc,#ff8a3d 40%,rgba(255,93,26,0) 72%);animation:spark .45s ease-out forwards}
.electric-p{position:fixed;z-index:148;width:3px;height:26px;pointer-events:none;background:linear-gradient(#eafcff,#5fe0ff);
  box-shadow:0 0 6px #7ff0ffcc,0 0 12px #3fd6ffaa;transform-origin:top center;animation:electricZap .35s ease-out forwards}
@keyframes electricZap{
  0%{opacity:1;transform:rotate(var(--rot)) scaleY(0)}
  30%{opacity:1;transform:rotate(var(--rot)) scaleY(1)}
  100%{opacity:0;transform:rotate(var(--rot)) scaleY(1) translateY(4px)}
}
.electric-flash{position:fixed;z-index:147;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff,#7ff0ff 45%,rgba(63,214,255,0) 72%);animation:spark .3s ease-out forwards}
.shield-flash{position:fixed;z-index:147;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;
  border:4px solid #7ecbff;box-shadow:0 0 16px #7ecbffcc;animation:ringOut .5s ease-out forwards}