/* ============================================================
   MuPlay.ro - Tema "Taram de Basm" (mistica, magica)
   ============================================================ */
:root{
  /* noapte vrajita */
  --bg0:#070512; --bg1:#0c0a1e; --bg2:#120e28; --ink:#0a0818;
  /* aur magic */
  --gold:#e9c46a; --gold2:#f6e3a8; --gold3:#c9a14a; --gold-soft:#7a653a;
  /* magie eterica */
  --cyan:#74ead8; --violet:#a07bff; --blue:#6fb8ff; --rose:#ff9ec7;
  /* text */
  --txt:#e7e3f5; --txt2:#c3bcdf; --muted:#8a83ad; --line:#2a2350;
  --up:#5fe3a3; --down:#ff6f86;
  --glass:rgba(20,16,44,.62);
  --glow-gold:0 0 22px rgba(233,196,106,.35);
  --frame: 1px solid rgba(201,161,74,.45);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  color:var(--txt);
  font-family:"Spectral",Georgia,serif;
  font-size:16.5px; line-height:1.7; min-height:100vh; position:relative; overflow-x:hidden;
  background:
    radial-gradient(1100px 600px at 50% -8%, #241a4d 0%, transparent 62%),
    radial-gradient(900px 500px at 12% 18%, #1a2c5e44 0%, transparent 60%),
    radial-gradient(900px 600px at 92% 30%, #3a1f5c44 0%, transparent 60%),
    linear-gradient(180deg,#0c0a1e 0%, #070512 70%, #05030d 100%);
}

/* ---- straturi de fundal magice ---- */
.sky,.fog,.embers{position:fixed;inset:0;pointer-events:none;z-index:0}
.sky{
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff6d8aa, transparent),
    radial-gradient(1.4px 1.4px at 75% 18%, #cfe3ffaa, transparent),
    radial-gradient(1.2px 1.2px at 40% 70%, #ffffffaa, transparent),
    radial-gradient(1.6px 1.6px at 88% 60%, #ffe9b0aa, transparent),
    radial-gradient(1px 1px at 60% 42%, #ffffff88, transparent),
    radial-gradient(1.2px 1.2px at 10% 80%, #bfe0ff99, transparent),
    radial-gradient(1.5px 1.5px at 32% 12%, #fff2c899, transparent);
  background-repeat:repeat; background-size:auto;
  animation:twinkle 6s ease-in-out infinite alternate; opacity:.85;
}
@keyframes twinkle{0%{opacity:.5}100%{opacity:.95}}
.fog{
  background:
    radial-gradient(60% 40% at 20% 100%, rgba(120,90,200,.10), transparent 70%),
    radial-gradient(60% 40% at 80% 95%, rgba(80,160,200,.09), transparent 70%);
  filter:blur(6px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{0%{transform:translateX(-3%)}100%{transform:translateX(3%)}}
#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative;z-index:2}

a{color:var(--gold);text-decoration:none;transition:.18s}
a:hover{color:var(--gold2);text-shadow:0 0 10px rgba(246,227,168,.5)}

h1,h2,h3{font-family:"Cinzel",Georgia,serif;color:var(--gold2);letter-spacing:.5px;margin:.2em 0 .55em;font-weight:700}
h1{font-size:clamp(28px,4vw,42px);text-shadow:0 0 24px rgba(233,196,106,.3),0 2px 0 #000}
h2{font-size:21px}
.brand-text,.hero h1{font-family:"Cinzel Decorative","Cinzel",serif}
.muted{color:var(--muted)}

/* ---- divider ornamental ---- */
.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 22px;color:var(--gold3)}
.divider::before,.divider::after{content:"";height:1px;width:min(220px,28vw);
  background:linear-gradient(90deg,transparent,var(--gold3));}
.divider::after{background:linear-gradient(270deg,transparent,var(--gold3))}
.divider .gem{font-size:14px;filter:drop-shadow(0 0 6px var(--gold))}

/* ============ HEADER ============ */
.site-head{position:sticky;top:0;z-index:90;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(201,161,74,.6),transparent) 1;
}
/* blur mutat pe ::before ca backdrop-filter sa NU taie dropdown-ul care iese sub header */
.site-head::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,8,24,.92),rgba(10,8,24,.66));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.head-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{font-size:25px;color:var(--gold);filter:drop-shadow(0 0 12px rgba(233,196,106,.7));animation:floaty 4s ease-in-out infinite}
.brand-logo{height:42px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(233,196,106,.5));transition:filter .25s,transform .25s}
.brand:hover .brand-logo{filter:drop-shadow(0 0 20px rgba(246,227,168,.8));transform:translateY(-1px)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
.brand-text{display:flex;flex-direction:column;line-height:1;font-size:20px;color:var(--gold2);
  text-shadow:0 0 18px rgba(233,196,106,.4)}
.brand-text small{font-family:"Cinzel",serif;font-size:9.5px;color:var(--gold-soft);letter-spacing:2.5px;text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-family:"Cinzel",serif;font-size:13px;padding:6px 9px;border-radius:8px;color:var(--txt2);position:relative}
.nav a::after{content:"";position:absolute;left:50%;bottom:5px;width:0;height:1px;background:var(--gold);transition:.25s;transform:translateX(-50%);box-shadow:0 0 8px var(--gold)}
.nav a:hover{color:var(--gold2)}
.nav a:hover::after,.nav a.on::after{width:60%}
.nav-drop{position:relative}
.nav-drop .drop-t{cursor:pointer;font-family:"Cinzel",serif;font-size:13px;padding:6px 9px;border-radius:8px;color:var(--txt2)}
.nav-drop:hover .drop-t{color:var(--gold2)}
.nav-drop .drop-m{display:none;position:absolute;right:0;top:100%;min-width:180px;background:linear-gradient(180deg,#140e28,#0c0a1e);
  border:1px solid var(--gold3);border-radius:10px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.55);z-index:60}
.nav-drop:hover .drop-m{display:block}
/* bridge invizibil ca sa NU se piarda hover-ul intre buton si submeniu */
.nav-drop:hover::after{content:'';position:absolute;right:0;top:100%;width:240px;height:22px;z-index:59}
/* bridge ancorat de submeniu: umple golul exact deasupra lui (exista doar cand meniul e deschis) */
.nav-drop .drop-m::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-drop .drop-m a{display:block;padding:8px 12px;border-radius:7px;font-size:13px;color:var(--txt2);font-family:"Cinzel",serif}
.nav-drop .drop-m a:hover{background:rgba(233,196,106,.1);color:var(--gold2)}
.nav-drop .drop-m a::after{display:none}
.nav a.on{color:var(--gold2)}
.btn-gold,.btn-ghost{border-radius:10px}
.btn-gold{background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#241a06!important;font-weight:700;
  padding:9px 16px!important;box-shadow:var(--glow-gold);border:1px solid rgba(246,227,168,.6)}
.btn-gold:hover{filter:brightness(1.1);text-shadow:none}
.btn-ghost{border:1px solid var(--line);color:var(--txt2)}
.btn-ghost:hover{border-color:var(--gold3);color:var(--gold2)}

.status-bar{display:flex;align-items:center;gap:8px;padding:4px 20px;font-family:"Cinzel",serif;font-size:11px;color:var(--muted);
  background:linear-gradient(90deg,rgba(201,161,74,.06),transparent,rgba(160,123,255,.06));
  border-top:1px solid rgba(201,161,74,.12)}
.btn-gold,.nav .btn-ghost{padding:6px 12px!important}
.status-bar strong{color:var(--gold2)}
.sep{opacity:.35}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;position:relative}
.dot.up{background:var(--up);box-shadow:0 0 12px var(--up);animation:pulse 2s infinite}
.dot.down{background:var(--down);box-shadow:0 0 12px var(--down)}
@keyframes pulse{0%,100%{box-shadow:0 0 6px var(--up)}50%{box-shadow:0 0 16px var(--up),0 0 26px var(--up)}}

/* ============ PAGE ============ */
.page{padding:30px 20px 50px;min-height:55vh}
.flash{font-family:"Cinzel",serif;padding:13px 18px;border-radius:12px;margin-bottom:16px;border:1px solid var(--line);backdrop-filter:blur(4px);font-size:14px}
.flash.ok{background:rgba(20,50,34,.6);border-color:#2f7a54;color:#a6f0c8;box-shadow:0 0 18px rgba(95,227,163,.15)}
.flash.err{background:rgba(54,18,28,.6);border-color:#8a3346;color:#ffb3c2}
.flash.warn{background:rgba(54,44,18,.6);border-color:#8a6f24;color:#f3d79a}

/* ---- HERO ---- */
.hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:30px;
  border:var(--frame);
  background:
    radial-gradient(700px 280px at 80% 0%, rgba(160,123,255,.28), transparent 65%),
    linear-gradient(110deg, rgba(10,8,24,.92) 0%, rgba(10,8,24,.62) 45%, rgba(10,8,24,.35) 100%),
    url('../img/hero.jpg') center 30%/cover no-repeat,
    linear-gradient(120deg,#160f33,#0c0a1e);
  box-shadow:0 22px 60px rgba(0,0,0,.55), inset 0 0 60px rgba(160,123,255,.08)}
.hero::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px);pointer-events:none}
.hero-in{padding:54px 44px;position:relative;z-index:1}
.hero h1{font-size:clamp(30px,5vw,50px);margin:0 0 12px;line-height:1.1;
  background:linear-gradient(180deg,#fff6dd,#e9c46a 60%,#b98a36);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(233,196,106,.35))}
.hero p{font-size:18px;color:#d7d0ee;max-width:640px}
.hero .cta{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}

/* ---- butoane ---- */
.btn{position:relative;display:inline-block;padding:13px 26px;border-radius:12px;font-family:"Cinzel",serif;font-weight:700;font-size:15px;
  border:1px solid var(--line);color:var(--txt);overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:.6s}
.btn:hover::after{left:130%}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#231906;border:1px solid rgba(246,227,168,.7);
  box-shadow:0 8px 26px rgba(233,196,106,.4), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.primary:hover{filter:brightness(1.08);text-shadow:none}
.btn.alt{background:rgba(160,123,255,.12);color:var(--txt);border:1px solid rgba(160,123,255,.4)}
.btn.alt:hover{border-color:var(--violet);color:#fff;box-shadow:0 0 22px rgba(160,123,255,.3)}

/* ---- GRID / PANELS (grimoar) ---- */
.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:1.6fr 1fr}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.panel{position:relative;background:var(--glass);backdrop-filter:blur(8px);
  border:var(--frame);border-radius:var(--r);padding:22px;
  box-shadow:0 16px 44px rgba(0,0,0,.45), inset 0 0 40px rgba(120,90,200,.05)}
/* colturi ornate aurii */
.panel::before,.panel::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;opacity:.8}
.panel::before{top:7px;left:7px;border-top:2px solid var(--gold3);border-left:2px solid var(--gold3);border-top-left-radius:6px}
.panel::after{bottom:7px;right:7px;border-bottom:2px solid var(--gold3);border-right:2px solid var(--gold3);border-bottom-right-radius:6px}
.panel h2{margin-top:0;padding-bottom:12px;position:relative}
.panel h2::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--gold3),transparent)}
.panel:hover{box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 46px rgba(160,123,255,.09), 0 0 0 1px rgba(201,161,74,.25)}

.stat{text-align:center;padding:22px 14px}
.stat .v{font-family:"Cinzel",serif;font-size:34px;font-weight:700;color:var(--gold2);text-shadow:0 0 20px rgba(233,196,106,.4)}
.stat .l{font-family:"Cinzel",serif;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}

/* ---- stiri ---- */
.news-item{border-bottom:1px solid var(--line);padding:16px 0}
.news-item:last-child{border-bottom:none}
.news-item .date{font-family:"Cinzel",serif;font-size:11.5px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:1.5px}
.news-item h3{margin:5px 0 7px;font-size:18px}
.news-item p{margin:0;color:var(--txt2)}

/* ---- tabele ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
table.tbl th,table.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
table.tbl th{font-family:"Cinzel",serif;color:var(--gold-soft);text-transform:uppercase;font-size:11px;letter-spacing:.8px}
table.tbl tr{transition:.15s}
table.tbl tbody tr:hover td,table.tbl tr:hover td{background:linear-gradient(90deg,rgba(233,196,106,.07),rgba(160,123,255,.05))}
.rank-no{font-family:"Cinzel",serif;font-weight:700;color:var(--muted);width:46px;text-align:center}
.rank-no.t1{color:#ffdf7e;text-shadow:0 0 14px rgba(255,223,126,.7)}
.rank-no.t2{color:#dfe6f2;text-shadow:0 0 12px rgba(223,230,242,.5)}
.rank-no.t3{color:#e0a062;text-shadow:0 0 12px rgba(224,160,98,.5)}
.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.4px;
  background:rgba(160,123,255,.12);color:#cdbfff;border:1px solid rgba(160,123,255,.3)}
.pill.cls{background:linear-gradient(180deg,rgba(116,234,216,.14),rgba(111,184,255,.1));color:#9ff0e4;border:1px solid rgba(116,234,216,.35)}

/* ---- tabs (runestone) ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs a{font-family:"Cinzel",serif;font-size:13.5px;padding:10px 18px;border-radius:11px;color:var(--txt2);
  background:rgba(20,16,44,.6);border:1px solid var(--line)}
.tabs a:hover{border-color:var(--gold3);color:var(--gold2)}
.tabs a.on{background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#231906;font-weight:700;border:1px solid rgba(246,227,168,.6);box-shadow:var(--glow-gold)}

/* ---- forme (pergament fermecat) ---- */
.form{max-width:460px;margin:0 auto}
.form .panel{padding:30px}
label{display:block;font-family:"Cinzel",serif;font-size:12px;color:var(--muted);margin:14px 0 6px;letter-spacing:.5px;text-transform:uppercase}
input[type=text],input[type=password],input[type=email]{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
  background:rgba(7,5,18,.7);color:var(--txt);font-size:15px;font-family:"Spectral",serif;transition:.2s}
input:focus{outline:none;border-color:var(--gold3);box-shadow:0 0 0 3px rgba(233,196,106,.14),0 0 22px rgba(233,196,106,.18)}
button.submit{width:100%;margin-top:20px;padding:13px;border:none;border-radius:12px;cursor:pointer;
  font-family:"Cinzel",serif;font-weight:700;font-size:15px;color:#231906;
  background:linear-gradient(180deg,var(--gold2),var(--gold3));box-shadow:0 8px 24px rgba(233,196,106,.35);transition:.2s}
button.submit:hover{filter:brightness(1.1)}
button.submit:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.form .alt-link{text-align:center;margin-top:16px;font-size:14px;color:var(--muted)}

/* ---- diverse ---- */
.section-title{display:flex;align-items:center;justify-content:space-between;margin:8px 0 16px}
.lore{font-style:italic;color:#cfc6ec;border-left:3px solid var(--gold3);padding:8px 0 8px 18px;margin:16px 0;
  background:linear-gradient(90deg,rgba(233,196,106,.06),transparent)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;padding:14px 0 14px 52px;position:relative;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(s);position:absolute;left:0;top:11px;width:34px;height:34px;border-radius:50%;
  font-family:"Cinzel",serif;background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#231906;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(233,196,106,.45)}

/* ============ FOOTER ============ */
.site-foot{margin-top:40px;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(201,161,74,.5),transparent) 1;
  background:linear-gradient(180deg,transparent,rgba(10,8,24,.7))}
.foot-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 20px 10px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;font-family:"Cinzel",serif;font-size:14px}
.copyright{font-family:"Cinzel",serif;text-align:center;color:var(--gold-soft);font-size:12px;padding:8px 20px 26px;letter-spacing:.6px}

/* ---- responsive ---- */
@media(max-width:880px){
  .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c2{grid-template-columns:1fr}
  .hero-in{padding:36px 24px}
  .nav a{padding:7px 9px;font-size:13px}
  .brand-text{font-size:20px}
}
@media(max-width:520px){ .grid.c3,.grid.c4{grid-template-columns:1fr} .head-inner{flex-direction:column;gap:10px} }
/* ---- carduri eveniment animate ---- */
.ev-card{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);min-height:172px;
  background-size:cover;background-position:center;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px;transition:.2s}
.ev-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,24,.55),rgba(10,8,24,.9));z-index:0}
.ev-card .ev-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--ev) 40%, transparent), transparent 62%);opacity:.55;animation:evbreath 4s ease-in-out infinite}
@keyframes evbreath{0%,100%{opacity:.4}50%{opacity:.75}}
.ev-card>*{position:relative;z-index:1}
.ev-card .ev-ic{font-size:36px;color:var(--ev);filter:drop-shadow(0 0 12px var(--ev));animation:floaty 4s ease-in-out infinite}
.ev-card h3{margin:6px 0 2px;color:#fff}
.ev-card .ev-desc{font-size:12px;color:#c4cfdd;min-height:30px;margin:0}
.ev-card .ev-count{font-family:"Cinzel",serif;font-size:27px;font-weight:700;letter-spacing:1px;color:var(--ev);text-shadow:0 0 16px var(--ev);animation:evpulse 2s ease-in-out infinite;margin-top:4px}
@keyframes evpulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.ev-card .ev-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.ev-card.soon .ev-count{color:#5fe3a3;text-shadow:0 0 18px #5fe3a3}
.ev-card:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 0 1px var(--ev)}
.ev-card.mini{min-height:128px;padding:12px}
.ev-card.mini .ev-ic{font-size:26px}.ev-card.mini .ev-count{font-size:20px}.ev-card.mini h3{font-size:15px}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---- toasts ---- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{display:flex;align-items:center;gap:10px;font-family:"Cinzel",serif;font-size:13.5px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(20,16,44,.96),rgba(12,10,30,.96));border:1px solid var(--gold3);color:var(--txt);
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(233,196,106,.18);transform:translateX(120%);opacity:0;transition:.35s}
.toast.show{transform:translateX(0);opacity:1}
.toast .t-ic{font-size:14px}
.toast.ok{border-color:#2f7a54}.toast.ok .t-ic{color:#5fe3a3}
.toast.err{border-color:#8a3346}.toast.err .t-ic{color:#ff6f86}
.toast.warn{border-color:#8a6f24}.toast.warn .t-ic{color:#f3d79a}
.loading{opacity:.45;pointer-events:none}

/* ---- mesaje form + validare live ---- */
.form-msg{display:none;padding:10px 14px;border-radius:10px;margin-bottom:8px;font-size:13.5px;font-family:"Cinzel",serif}
.form-msg.ok{display:block;background:rgba(20,50,34,.6);border:1px solid #2f7a54;color:#a6f0c8}
.form-msg.err{display:block;background:rgba(54,18,28,.6);border:1px solid #8a3346;color:#ffb3c2}
.field-hint{display:block;font-size:12px;margin-top:5px;font-family:"Spectral",serif}
.field-hint.ok{color:#7fe3ab}.field-hint.err{color:#ff9eb0}
input.val{border-color:#2f7a54!important}
input.inv{border-color:#8a3346!important}

/* ---- buton mic (folosit si public) ---- */
.btn-sm{display:inline-block;padding:6px 12px;border-radius:8px;font-family:"Cinzel",serif;font-size:12.5px;border:1px solid var(--line);color:var(--txt2);cursor:pointer;background:rgba(20,16,44,.6);text-decoration:none;transition:.15s}
.btn-sm:hover{border-color:var(--gold3);color:var(--gold2)}
.btn-sm.gold{background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#231906;border:none;font-weight:700}
.btn-sm.danger:hover{border-color:#ff6f86;color:#ffb3c0}

/* ---- inventar vizual (ca in joc) ---- */
.inv-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.inv-sect{background:rgba(7,5,18,.4);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.inv-sect.equip-sect{border-color:var(--gold-soft);background:linear-gradient(180deg,rgba(233,196,106,.05),rgba(7,5,18,.4))}
.inv-sect-h{font-family:"Cinzel",serif;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold-soft);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.inv-sect-h span{background:#1d2738;border:1px solid var(--line);border-radius:20px;padding:1px 9px;font-size:11px;color:var(--gold2)}
.c-img{width:100%;height:100%;object-fit:contain;display:block}
.equip{display:grid;grid-template-columns:repeat(3,72px);grid-auto-rows:72px;gap:6px;flex:none}
.eq-slot{border:1px solid var(--line);border-radius:8px;background:radial-gradient(circle at 50% 30%,#1a1430,#0c0a1e);position:relative;overflow:visible}
.eq-slot.empty{display:flex;align-items:center;justify-content:center}
.eq-slot.empty span{font-family:"Cinzel",serif;font-size:9.5px;color:#4b4470;text-transform:uppercase;letter-spacing:.5px;text-align:center}
.inv-grid{display:grid;grid-template-columns:repeat(8,46px);grid-auto-rows:46px;gap:3px;flex:none}
.inv-grid.vault{grid-template-columns:repeat(8,46px)}
.cell{position:relative;border:1px solid var(--line);border-radius:6px;background:linear-gradient(160deg,#1c1638,#100c24);
  display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2px;overflow:visible;cursor:help;min-width:0}
.cell.exc{border-color:#3a7a52;box-shadow:inset 0 0 14px rgba(95,227,163,.18)}
.cell.high{border-color:var(--gold3);box-shadow:inset 0 0 14px rgba(233,196,106,.16)}
.cell .c-lbl{font-size:8.5px;line-height:1.05;text-align:center;color:#c9c2e6;overflow:hidden;max-height:28px;word-break:break-word}
.cell.exc .c-lbl{color:#9be7bd}
.cell .c-lvl{position:absolute;top:1px;right:3px;font-size:9px;font-weight:700;color:#ffd76a;text-shadow:0 0 4px #000}
.cell .c-ex{position:absolute;bottom:1px;right:2px;font-size:8px;color:#5fe3a3}
.eq-slot .cell{position:absolute;inset:0;border:none;background:transparent}
.eq-slot .cell .c-lbl{font-size:9px;max-height:46px}
/* tooltip */
.cell .tip{display:none;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:8px;z-index:80;
  width:248px;background:linear-gradient(180deg,#140e28,#0a0818);border:1px solid var(--gold3);border-radius:10px;padding:11px 13px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);text-align:left;pointer-events:none;cursor:default}
.cell:hover{z-index:90}
.cell:hover .tip{display:block}
.tip .t-name{font-family:"Cinzel",serif;font-size:13.5px;margin-bottom:6px}
.tip .t-name.exc{color:#7fe3ab}.tip .t-name.high{color:var(--gold2)}.tip .t-name.norm{color:#e7e3f5}
.tip .t-l{font-size:12px;color:#c3bcdf}
.tip .t-cls{font-size:11.5px;color:#9fe9c7;margin:6px 0;border-top:1px solid var(--line);padding-top:6px}
.tip .t-luck{font-size:11.5px;color:#6fb8ff}
.tip .t-exc{font-size:11.5px;color:#a07bff}
.tip .t-exp{font-size:11px;color:#ff9eb0;margin-top:6px;border-top:1px solid var(--line);padding-top:5px}
@media(max-width:560px){.inv-grid{grid-template-columns:repeat(8,34px);grid-auto-rows:34px}.equip{grid-template-columns:repeat(3,56px);grid-auto-rows:56px}}

/* ===== Showcase comori / iteme oficiale (homepage + wcoin) ===== */
.treasures{position:relative;margin-bottom:26px;padding:26px 20px;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%,rgba(233,196,106,.09),rgba(10,8,18,0) 60%),linear-gradient(180deg,rgba(20,16,30,.5),rgba(10,8,18,.22));
  border:1px solid rgba(201,161,74,.28)}
.treasures::before{content:"";position:absolute;inset:0;background:url('../img/wz_fire.png') no-repeat right -40px bottom/auto 130%;opacity:.10;pointer-events:none;mix-blend-mode:screen}
.treasures-head{text-align:center;margin-bottom:18px;position:relative;z-index:1}
.treasures-head .kick{font-family:"Cinzel",serif;text-transform:uppercase;letter-spacing:3px;font-size:11px;color:var(--gold-soft)}
.treasures-head h2{font-family:"Cinzel Decorative",serif;font-size:26px;color:#e8dcc2;margin:4px 0 0;text-shadow:0 0 18px rgba(233,196,106,.35)}
.tre-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.tre-item{position:relative;width:150px;padding:18px 12px 14px;text-align:center;border-radius:14px;
  background:linear-gradient(180deg,rgba(233,196,106,.06),rgba(0,0,0,0));border:1px solid rgba(201,161,74,.22);transition:transform .2s,box-shadow .2s,border-color .2s}
.tre-item:hover{transform:translateY(-5px);border-color:rgba(233,196,106,.55);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 26px rgba(233,196,106,.14)}
.tre-item .tre-pic{height:104px;display:flex;align-items:flex-end;justify-content:center}
.tre-item img{max-height:104px;max-width:120px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));transition:transform .35s}
.tre-item:hover img{transform:translateY(-4px) scale(1.06)}
.tre-item .nm{font-family:"Cinzel",serif;font-size:13px;color:var(--gold2);margin-top:12px;letter-spacing:.5px}
.tre-item .sub{font-size:11px;color:var(--txt2);margin-top:2px}
@media(max-width:640px){.tre-item{width:42%}.tre-item img{max-height:80px}}

/* iconite reale de joc (inlocuiesc emoji) */
.gicon{height:auto;vertical-align:middle;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));image-rendering:auto}