/* Aranyrév — kezelőfelület. Sötét, arany-kék fantasy hangulat. */
:root{
  --bg:#0b0e14; --panel:rgba(14,18,26,.86); --panel2:rgba(20,26,36,.94);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --txt:#e6ecf5; --dim:#93a0b4; --gold:#e8c96a; --acc:#6fb7ff;
  --hp:#e0475b; --hp2:#ff6a7c; --xp:#7dd87a; --shield:#9fd8ff;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font)}
canvas#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none !important}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ── overlayek ── */
#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:5}
#crosshair span{display:block;width:16px;height:16px;border:2px solid rgba(255,255,255,.75);border-radius:50%;box-shadow:0 0 6px #000}
#hurt{position:fixed;inset:0;pointer-events:none;z-index:6;box-shadow:inset 0 0 140px rgba(200,20,30,.0);transition:box-shadow .18s}
#hurt.on{box-shadow:inset 0 0 160px rgba(220,30,40,.55)}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s;z-index:40}
#fade.on{opacity:1}

/* ── HUD ── */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-size:13px}
#hud button{pointer-events:auto}
.frame{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  backdrop-filter:blur(6px);box-shadow:0 6px 26px rgba(0,0,0,.5);display:flex;gap:10px;align-items:center}
#playerFrame{left:14px;top:14px;width:330px;flex-wrap:wrap}
#targetFrame{left:50%;top:14px;transform:translateX(-50%);width:300px}
.portrait{width:44px;height:44px;border-radius:9px;background:linear-gradient(160deg,#2a3550,#141a26);
  border:1px solid var(--line2);display:grid;place-items:center;font-size:22px}
.finfo{flex:1;min-width:0}
.fname{display:flex;justify-content:space-between;font-weight:600;margin-bottom:3px}
.fname .lvl{color:var(--gold)}
.bar{position:relative;height:15px;border-radius:5px;background:rgba(0,0,0,.55);overflow:hidden;margin-bottom:3px;border:1px solid rgba(0,0,0,.6)}
.bar.small{height:12px}
.bar i{position:absolute;inset:0;width:0;display:block;border-radius:4px;transition:width .12s}
.bar b{position:absolute;inset:0;width:0;display:block;background:var(--shield);opacity:.55}
.bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;text-shadow:0 1px 2px #000;letter-spacing:.2px}
.bar.hp i{background:linear-gradient(90deg,var(--hp),var(--hp2))}
.bar.xp{height:8px}
.bar.xp i{background:linear-gradient(90deg,#4e9c4a,var(--xp))}
.bar.xp span{font-size:9px}
.buffs{display:flex;gap:4px;flex-wrap:wrap;width:100%}
.buff{position:relative;background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:6px;padding:2px 5px;font-size:13px}
.buff i{font-style:normal;font-size:9px;color:var(--gold);margin-left:3px}
.tstatus{font-size:13px;letter-spacing:2px;min-height:16px}

#zonePanel{position:absolute;right:14px;top:14px;width:196px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px;backdrop-filter:blur(6px);text-align:center}
.zname{font-weight:700;color:var(--gold)}
.zsub{font-size:11px;color:var(--dim);margin-bottom:6px}
#minimap{width:180px;height:180px;border-radius:50%;display:block}
.zfoot{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:5px}

#actionbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:18px;align-items:flex-end}
.slotrow{display:flex;gap:7px}
.slot{position:relative;width:54px;height:54px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);
  display:grid;place-items:center;overflow:hidden;pointer-events:auto;cursor:pointer;transition:transform .1s,border-color .15s}
.slot:hover{transform:translateY(-2px);border-color:var(--gold)}
.slot .ic{font-size:24px}
.slot .key{position:absolute;left:4px;top:2px;font-size:9px;color:var(--gold);font-weight:700}
.slot .cnt{position:absolute;right:4px;bottom:2px;font-size:10px;font-weight:700}
.slot .cd{position:absolute;left:0;bottom:0;width:100%;height:0;background:rgba(0,0,0,.62);pointer-events:none}
.slot .cdtxt{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:700;text-shadow:0 1px 3px #000}
.slot.empty{opacity:.45}
.slot.potion{width:44px;height:44px}
.slot.potion .ic{font-size:19px}
.slot.out{opacity:.35}

#menubar{position:absolute;right:14px;bottom:16px;display:flex;gap:6px}
#menubar button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:11.5px;color:var(--dim)}
#menubar button:hover{color:var(--txt);border-color:var(--gold)}
#menubar b{color:var(--gold);margin-left:4px}

#prompt{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:11;background:rgba(10,14,20,.86);
  border:1px solid var(--gold);border-radius:8px;padding:7px 14px;font-size:13px;color:var(--gold);pointer-events:none}

/* ── lebegő szövegek ── */
#floaters{position:fixed;inset:0;pointer-events:none;z-index:12}
.float{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:16px;text-shadow:0 2px 4px #000;white-space:nowrap}
.float.dmg{color:#ffe6b0}
.float.crit{color:#ffb347;font-size:23px}
.float.dot{color:#ff9a6a;font-size:14px}
.float.poison{color:#8ad04a;font-size:14px}
.float.taken{color:#ff6a7c;font-size:19px}
.float.heal{color:#7dd87a}
.float.block{color:#9fd8ff;font-size:13px}
.float.xp{color:#c9a6ff;font-size:14px}

/* ── napló ── */
#log{position:fixed;left:14px;bottom:96px;width:390px;z-index:11;pointer-events:none;font-size:12px}
#log .line{background:rgba(8,11,16,.72);border-left:2px solid var(--line2);padding:4px 8px;margin-top:3px;border-radius:0 5px 5px 0;
  transition:opacity .8s}
#log .line.good{border-color:var(--xp);color:#cfe9c9}
#log .line.warn{border-color:#e8a33a;color:#f0d6a8}
#log .line.loot{border-color:var(--gold)}
#log .line.fade{opacity:.25}

/* ── szintlépés ── */
.levelup{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);z-index:30;text-align:center;pointer-events:none;
  animation:lvl 2.6s ease-out forwards}
.levelup b{display:block;font-size:40px;color:var(--gold);text-shadow:0 0 24px rgba(232,201,106,.7),0 3px 8px #000;letter-spacing:3px}
.levelup span{display:block;font-size:17px;color:#fff;text-shadow:0 2px 6px #000}
@keyframes lvl{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}

/* ── halál ── */
.deathscreen{position:fixed;inset:0;z-index:35;background:rgba(30,4,8,.72);display:grid;place-items:center;text-align:center;backdrop-filter:blur(3px)}
.deathscreen h1{font-size:56px;margin:0;color:#ff6a7c;letter-spacing:6px;text-shadow:0 4px 22px #000}
.deathscreen p{color:var(--dim)}

/* ── ablakok ── */
#windows{position:fixed;inset:0;z-index:20;background:rgba(4,6,10,.55);display:grid;place-items:center;backdrop-filter:blur(3px)}
.window{position:relative;width:min(980px,92vw);max-height:86vh;overflow:auto;background:var(--panel2);
  border:1px solid var(--line2);border-radius:14px;padding:22px 26px;box-shadow:0 20px 70px rgba(0,0,0,.7)}
.window h2{margin:0 0 12px;font-size:22px;color:var(--gold)}
.window h2 small{color:var(--dim);font-size:12.5px;font-weight:400;margin-left:8px}
.window h3{margin:16px 0 8px;font-size:14px;color:var(--acc);border-bottom:1px solid var(--line);padding-bottom:4px}
.window h3 em{color:var(--dim);font-style:normal;font-size:12px}
.window h3 em.warn{color:#e8a33a}
.window .close{position:absolute;right:12px;top:12px;background:transparent;border:0;font-size:18px;color:var(--dim)}
.window .close:hover{color:#fff}
.dim{color:var(--dim);font-size:12.5px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.stat,.attr,.kv,.cinfo-row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:13px}
.stat b,.attr b,.kv b{color:#fff}
.attr .plus{background:var(--gold);color:#1a1408;border:0;border-radius:5px;width:22px;height:20px;font-weight:700;line-height:1}
.gold{color:var(--gold)}
.passive{background:rgba(255,255,255,.04);border-left:2px solid var(--gold);padding:8px 10px;border-radius:0 6px 6px 0;margin:6px 0}
.passive b{display:block;color:var(--gold)}
.passive span{font-size:12px;color:var(--dim)}
.btn{background:linear-gradient(160deg,#2b3550,#1a2230);
  border:1px solid var(--line2);border-radius:8px;padding:9px 14px;color:var(--txt);font-size:13px;margin-top:8px}
.btn:hover{border-color:var(--gold);color:#fff}
.btn.big{width:100%;padding:13px;font-size:15px;font-weight:600;background:linear-gradient(160deg,#3a4a2a,#22301a);border-color:#5f7a45}
.btn.big:hover{border-color:var(--xp)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:12px}
.btn.tiny{padding:3px 8px;font-size:11px;margin:0 2px}
.btn.tiny.on{background:var(--gold);color:#1a1408;border-color:var(--gold)}

.gearslot{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;margin-bottom:5px;cursor:pointer;font-size:12.5px}
.gearslot:hover{border-color:var(--gold)}
.gearslot .gname{color:var(--dim);min-width:78px}
.gearslot .iname.empty{color:#5a6474}
.gearslot .ilvl{color:var(--dim);font-size:11px}

.baggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.bagitem{position:relative;border:1px solid var(--line2);border-radius:8px;padding:7px 9px;cursor:pointer;background:rgba(255,255,255,.02)}
.bagitem:hover{background:rgba(255,255,255,.06)}
.bagitem .bn{display:block;font-size:12.5px;font-weight:600}
.bagitem .bs{display:block;font-size:11px;color:var(--dim)}
.bagitem .up,.shoprow .up{color:var(--xp);font-style:normal}
.tt{display:none;position:absolute;left:100%;top:0;margin-left:8px;width:250px;background:#0d1219;border:1px solid var(--line2);
  border-radius:8px;padding:10px;z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.7)}
.bagitem:hover .tt,.shoprow:hover .tt{display:block}
.tt .sub{display:block;color:var(--dim);font-size:11px;margin-bottom:5px}
.tl{display:flex;justify-content:space-between;font-size:12px;padding:1px 0}
.tl em{font-style:normal}
.tl em.up,.verdict.up{color:var(--xp)}
.tl em.down,.verdict.down{color:#ff6a7c}
.verdict{margin-top:6px;font-size:12px;font-weight:600}
.potrow{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
.pitem{background:rgba(255,255,255,.04);border-radius:7px;padding:6px 10px}

.slotblock{margin-bottom:6px}
.slotblock.locked{opacity:.45}
.skillopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.skillopt{position:relative;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:9px;cursor:pointer;background:rgba(255,255,255,.02)}
.skillopt:hover{border-color:var(--gold);background:rgba(255,255,255,.05)}
.skillopt.active{border-color:var(--xp);background:rgba(120,200,120,.08)}
.skillopt.dis{opacity:.5;cursor:not-allowed}
.skillopt .si{font-size:24px;width:32px;text-align:center}
.skillopt b{display:block;font-size:13px}
.skillopt span{display:block;font-size:11.5px;color:var(--dim);line-height:1.35}
.skillopt em{display:block;font-size:10.5px;color:var(--acc);font-style:normal;margin-top:3px}
.skillopt .tick{position:absolute;right:8px;top:8px;color:var(--xp)}

.zlist{display:flex;flex-direction:column;gap:7px}
.zrow{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px 12px;cursor:pointer}
.zrow:hover{border-color:var(--gold);background:rgba(255,255,255,.05)}
.zrow.locked{opacity:.45;cursor:not-allowed}
.zrow.here{border-color:var(--acc);background:rgba(90,160,255,.08);cursor:default}
.zrow .zi{font-size:22px}
.zrow .zt{flex:1}
.zrow .zt b{display:block}
.zrow .zt span{font-size:11.5px;color:var(--dim)}
.zrow .zl{text-align:right;font-size:12px;color:var(--gold)}
.zrow .zl em{display:block;font-style:normal;font-size:10.5px;color:var(--dim)}

.shoprow{position:relative;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;margin-bottom:6px;cursor:pointer}
.shoprow:hover{border-color:var(--gold);background:rgba(255,255,255,.05)}
.shoprow .bs{font-size:11.5px;color:var(--dim)}

/* ── karakterválasztó / alkotó ── */
#screen{position:fixed;inset:0;z-index:50;overflow:auto;
  background:radial-gradient(1100px 700px at 50% -10%,#1d2740,#080a10 70%)}
#screen.hidden{display:none}
.screenwrap{max-width:560px;margin:0 auto;padding:48px 20px;text-align:center}
.brand h1{font-size:46px;letter-spacing:12px;margin:0;color:var(--gold);text-shadow:0 0 40px rgba(232,201,106,.35)}
.brand p{color:var(--dim);margin:6px 0 30px;letter-spacing:1px;font-size:13px}
.charlist{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.charcard{position:relative;display:flex;gap:14px;align-items:center;text-align:left;background:var(--panel2);
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer}
.charcard:hover{border-color:var(--line2)}
.charcard.sel{border-color:var(--gold);background:rgba(232,201,106,.07)}
.cc-ic{width:46px;height:46px;border-radius:10px;background:#141a26;display:grid;place-items:center;font-size:24px;border:1px solid var(--line)}
.cc-t b{display:block}
.cc-t span{display:block;font-size:12px;color:var(--acc)}
.cc-t em{display:block;font-size:11px;color:var(--dim);font-style:normal}
.charcard .del{position:absolute;right:10px;top:10px;background:transparent;border:0;color:#5a6474;font-size:14px}
.charcard .del:hover{color:#ff6a7c}
.charcard.new{justify-content:flex-start;opacity:.85}
.hint{color:var(--dim);font-size:11.5px;margin-top:14px}

.createwrap{display:grid;grid-template-columns:1fr 400px 1fr;gap:22px;max-width:1400px;margin:0 auto;padding:28px 24px;min-height:100vh}
.cleft,.cright{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column}
.cmid{position:relative;display:grid;place-items:center}
#previewCanvas{width:100%;height:min(72vh,640px);border-radius:16px;background:linear-gradient(180deg,rgba(30,40,60,.5),rgba(8,10,16,.6));border:1px solid var(--line)}
.turnhint{position:absolute;bottom:14px;color:var(--dim);font-size:11px}
.cleft h2{margin:0 0 12px;color:var(--gold);font-size:22px}
.cleft h3,.cright h3{margin:14px 0 7px;font-size:13px;color:var(--acc);border-bottom:1px solid var(--line);padding-bottom:4px}
.fld{display:block;margin-bottom:8px;font-size:12.5px}
.fld>span{display:block;color:var(--dim);margin-bottom:4px}
.fld input[type=text],.fld input:not([type]){width:100%}
#cName{width:100%;background:#0d1219;border:1px solid var(--line2);border-radius:8px;padding:9px 11px;color:var(--txt);font-size:14px;font-family:inherit}
#cName.err{border-color:#ff6a7c}
input[type=range]{width:100%;accent-color:#e8c96a}
.row{display:flex;gap:8px}
.row.wrap{flex-wrap:wrap}
.opt{flex:1;background:#131a26;border:1px solid var(--line);border-radius:8px;padding:9px;font-size:13px}
.opt.sm{flex:none;padding:6px 10px;font-size:12px}
.opt.on{border-color:var(--gold);background:rgba(232,201,106,.12);color:#fff}
.sws{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.15);padding:0}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(232,201,106,.6)}
.classgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.classcard{background:#131a26;border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer}
.classcard:hover{border-color:var(--line2)}
.classcard.on{border-color:var(--gold);background:rgba(232,201,106,.10)}
.classcard .ci{font-size:24px;display:block}
.classcard b{display:block;font-size:12.5px;margin-top:3px}
.classcard em{display:block;font-size:10px;color:var(--dim);font-style:normal}
.classinfo{margin-top:12px;font-size:12.5px}
.classinfo p{color:var(--dim);margin:0 0 8px;line-height:1.45}
.spacer{flex:1}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#2a3040;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:1100px){
  .createwrap{grid-template-columns:1fr;padding:16px}
  #previewCanvas{height:46vh}
  .cols{grid-template-columns:1fr}
}

/* ── csevegés és névtáblák ── */
.chatinput{position:fixed;left:14px;bottom:200px;width:390px;z-index:22;background:rgba(8,11,16,.95);
  border:1px solid var(--gold);border-radius:8px;padding:9px 12px;color:var(--txt);font-size:13px;font-family:inherit;outline:none}
#log .line.chat{border-color:var(--acc);color:#cfe0f5}
#log .line.chat b{color:var(--acc)}
.nameplate{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:#cfe0ff;
  text-shadow:0 2px 4px #000;white-space:nowrap;pointer-events:none}

/* ── tárgykártyák (táska és bolt) ── */
.itemlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:8px}
.icard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-left:3px solid var(--rar,#888);border-radius:9px;padding:9px 12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--rar,#888) 9%,transparent),rgba(255,255,255,.02))}
.icard:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--rar,#888) 16%,transparent),rgba(255,255,255,.05))}
.ic-ic{width:38px;height:38px;border-radius:8px;background:rgba(0,0,0,.35);display:grid;place-items:center;font-size:20px}
.ic-main{min-width:0}
.ic-name{display:block;font-size:13.5px}
.ic-sub{display:block;font-size:11px;color:var(--dim);font-weight:400}
.ic-stats{display:flex;flex-wrap:wrap;gap:4px 10px;margin:3px 0 2px}
.ic-stats .st{font-size:11.5px;color:#cfd8e6}
.ic-stats em{font-style:normal;font-size:11px}
.ic-stats em.up{color:var(--xp)}
.ic-stats em.down{color:#ff6a7c}
.v{font-size:11.5px;color:var(--dim)}
.v.up{color:var(--xp)}
.v.down{color:#ff8a96}
.ic-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:112px}
.ic-act .btn{margin:0;width:100%;text-align:center}
.btn.poor{opacity:.45;cursor:not-allowed}
.wornlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:6px}
.wornrow{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px}
.wornrow .ic-stats{margin:0}
.pitem em{color:var(--gold);font-style:normal}

/* ── alapanyagok és fejlesztés ── */
.matrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px;margin-bottom:6px}
.mat{display:grid;grid-template-columns:auto auto 1fr;gap:6px;align-items:center;border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;font-size:12px;background:rgba(255,255,255,.03)}
.mat .mi{font-size:16px}
.mat b{color:var(--gold)}
.mat .mn{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat.zero{opacity:.4}
.mat.okmat{border-color:var(--xp)}
.mat.needmat{border-color:#ff6a7c}
.ic-stats .st.lack{color:#ff8a96}
.ic-stats .st b.up{color:var(--xp)}
.ic-stats .st b.down{color:#ff8a96}
.float.mat{color:#ffd76a;font-size:14px}

/* ── nagy térkép (M) ── */
.mapwrap{display:grid;place-items:center;margin:6px 0}
#bigmap{width:min(560px,80vh,86vw);height:auto;aspect-ratio:1;border-radius:12px;border:1px solid var(--line2);
  box-shadow:0 10px 40px rgba(0,0,0,.5);image-rendering:auto}
.maplegend{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--dim);flex-wrap:wrap}

/* ── névtábla életerő-csíkkal (más játékosok) ── */
.nameplate .np-name{display:block}
.nameplate .np-hp{display:block;width:64px;height:4px;margin:2px auto 0;background:rgba(0,0,0,.6);
  border-radius:2px;overflow:hidden}
.nameplate .np-hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e0475b,#ff6a7c)}
.nameplate.hurt .np-name{color:#ff9aa6}

/* ── küldetések ── */
#questTracker{position:absolute;right:14px;top:224px;width:206px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;backdrop-filter:blur(6px);font-size:12px}
#questTracker h4{margin:0 0 5px;font-size:11px;color:var(--gold);letter-spacing:.6px;text-transform:uppercase}
.qt{border-left:2px solid var(--acc);padding:2px 0 2px 7px;margin-bottom:5px}
.qt b{display:block;font-size:12px;font-weight:600}
.qt span{color:var(--dim);font-size:11px}
.qt.done{border-color:var(--xp)}
.qt.done span{color:var(--xp)}
.icard.quest .ic-stats .st{white-space:normal}
.icard.quest.qdone{box-shadow:0 0 0 1px rgba(125,216,122,.35) inset}

/* ── raktár ── */
.bankrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-bottom:5px;font-size:12.5px}
.bankrow .bs{color:var(--dim);font-size:11px}
.bankrow .btn{margin:0}
.bankmats{display:flex;flex-direction:column;gap:5px}
.bankmat{display:grid;grid-template-columns:auto 130px 1fr auto;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12px}
.bankmat .mi{font-size:16px}
.bankmat .cnt{color:var(--dim)}
.bankmat .cnt b{color:var(--gold)}
.bankmat .acts{display:flex;gap:4px}
.bankmat .acts .btn{margin:0}

/* ── kasztkötött fegyver / idegen oktató / zárolt küldetéshely ── */
.icard.unusable{opacity:.72;filter:saturate(.6)}
.icard.unusable .ic-ic{position:relative}
.icard.unusable .ic-ic::after{content:'🚫';position:absolute;right:-4px;bottom:-4px;font-size:13px}
.icard.quest.qcool{opacity:.75;border-style:dashed}
p.warnbox{background:rgba(232,163,58,.10);border-left:3px solid #e8a33a;border-radius:0 8px 8px 0;
  padding:9px 12px;color:#f0d6a8 !important;line-height:1.5}

/* ── különleges területek (Vadaskert hullámok / Kazamata szint) ── */
#zoneBanner{position:absolute;left:50%;top:96px;transform:translateX(-50%);z-index:11;
  background:rgba(10,14,20,.86);border:1px solid var(--line2);border-left:3px solid var(--gold);
  border-radius:8px;padding:7px 16px;font-size:13.5px;font-weight:600;letter-spacing:.2px;
  color:var(--txt);white-space:nowrap;pointer-events:none;backdrop-filter:blur(6px)}
#zoneBanner.good{border-left-color:var(--xp);color:#cfe9c9}
.icard.keeper .ic-stats .st{white-space:normal}

/* ── életelixír a tálcán ── */
.slot.elixir{border-color:rgba(255,95,109,.45)}
.slot.elixir.on{border-color:#ff5f6d;box-shadow:0 0 12px rgba(255,95,109,.45)}
.slot.elixir .fill{position:absolute;left:0;bottom:0;width:100%;height:0;
  background:linear-gradient(180deg,rgba(255,95,109,.15),rgba(255,95,109,.5));pointer-events:none}
.slot.elixir .pct{position:absolute;bottom:1px;left:0;width:100%;text-align:center;
  font-size:9.5px;font-weight:700;color:#ffd7dd;text-shadow:0 1px 2px #000}
.float.elixir{color:#ff9aa6}
.deathscreen .btn.city{background:linear-gradient(160deg,#2b3550,#1a2230);border-color:var(--line2);margin-top:10px}
.deathscreen .btn.city:hover{border-color:var(--gold)}


/* ── csillagozás (eladás elleni védelem) ── */
.btn.tiny.star{width:auto !important;min-width:30px;font-size:13px;line-height:1;padding:3px 7px;
  color:var(--dim);border-color:var(--line2)}
.btn.tiny.star.on{color:#ffd24a;border-color:rgba(255,210,74,.6);background:rgba(255,210,74,.10)}
.icard.locked{box-shadow:0 0 0 1px rgba(255,210,74,.35) inset}
.icard.locked .ic-name::after{content:' ★';color:#ffd24a}
.icard.petout{box-shadow:0 0 0 1px rgba(110,208,255,.45) inset;background:linear-gradient(90deg,rgba(110,208,255,.10),transparent)}

/* ── megerősítő ablak (értékes tárgy eladása) ── */
.confirmbox{position:fixed;inset:0;z-index:40;background:rgba(4,6,10,.6);display:grid;place-items:center;
  backdrop-filter:blur(3px)}
.confirmbox .cbox{width:min(460px,90vw);background:var(--panel2);border:1px solid var(--line2);
  border-radius:14px;padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.confirmbox h3{margin:0 0 10px;font-size:17px;color:var(--gold);border:0;padding:0}
.confirmbox p{margin:0 0 16px;color:var(--txt);font-size:13.5px;line-height:1.6}
.confirmbox .cbtns{display:flex;gap:10px;justify-content:flex-end}
.confirmbox .btn.danger{background:linear-gradient(160deg,#5a2230,#3a1620);border-color:#8a3b4a;color:#ffd7dd}
.confirmbox .btn.danger:hover{border-color:#ff6a7c}


/* ══════════ Társas rész: csapat, párbaj, értesítés, üzenet ══════════ */

/* csapatpanel a bal felső sarok alatt */
#partyPanel{position:absolute;left:14px;top:132px;z-index:12;min-width:158px;
  background:rgba(10,14,20,.78);border:1px solid var(--line2);border-radius:10px;padding:7px 10px;
  font-size:12px;backdrop-filter:blur(6px)}
#partyPanel .ptitle{color:var(--acc);font-weight:700;font-size:11px;letter-spacing:.4px;margin-bottom:4px}
#partyPanel .prow{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:var(--txt)}
#partyPanel .prow span{color:var(--dim);font-size:11px}
#partyPanel .prow.away{opacity:.55}
#partyPanel .prow.same span{color:#7dd87a}

/* párbajsáv középen felül */
#duelBanner{position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:13;
  background:rgba(40,8,14,.88);border:1px solid #8a3b4a;border-radius:9px;padding:7px 18px;
  font-size:14px;font-weight:700;color:#ffd7dd;white-space:nowrap;pointer-events:none;
  backdrop-filter:blur(6px);box-shadow:0 6px 26px rgba(0,0,0,.5)}

/* értesítések (barátkérés, meghívó, párbaj) jobb oldalt */
#notices{position:absolute;right:14px;top:214px;z-index:14;display:flex;flex-direction:column;gap:8px;
  width:290px;align-items:stretch}
.notice{background:rgba(10,14,20,.92);border:1px solid var(--line2);border-left:3px solid var(--gold);
  border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45;color:var(--txt);
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:noticeIn .18s ease-out}
.notice .nacts{display:flex;gap:6px;margin-top:8px}
.notice .nacts .btn{flex:1;margin:0}
@keyframes noticeIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* privát üzenetablakok jobb alul */
#whispers{position:absolute;right:14px;bottom:104px;z-index:14;display:flex;gap:10px;align-items:flex-end}
.whisper{width:250px;background:rgba(10,14,20,.94);border:1px solid var(--line2);border-radius:10px;
  overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.whisper .wtitle{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;
  background:rgba(255,255,255,.05);font-size:12px;font-weight:700;color:var(--gold)}
.whisper .wclose{background:transparent;border:0;color:var(--dim);font-size:13px;cursor:pointer}
.whisper .wclose:hover{color:#fff}
.whisper .wlog{height:132px;overflow:auto;padding:6px 10px;font-size:12px;line-height:1.5}
.whisper .wline b{color:var(--acc)}
.whisper .wline.mine b{color:var(--gold)}
.whisper .winput{width:100%;box-sizing:border-box;border:0;border-top:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--txt);padding:7px 10px;font:inherit;font-size:12px;outline:none}

/* játékosmenü és társak ablak */
.playeracts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.playeracts .btn{margin:0}
.playeracts .btn[disabled]{opacity:.45;pointer-events:none}
.playeracts .btn.danger{background:linear-gradient(160deg,#5a2230,#3a1620);border-color:#8a3b4a;color:#ffd7dd}
ul.dimlist{margin:6px 0 0;padding-left:18px;color:var(--dim);font-size:12.5px;line-height:1.7}
ul.dimlist b{color:var(--txt)}
.socrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;margin-bottom:6px;background:rgba(255,255,255,.02);font-size:13px}
.socrow .dot{width:8px;height:8px;border-radius:50%;background:#5b616e;flex:none}
.socrow.on .dot{background:#7dd87a;box-shadow:0 0 8px rgba(125,216,122,.7)}
.socrow .dim{font-size:12px}
.socrow .tag{margin-left:auto;font-size:11px;color:var(--dim)}
.socrow .acts{margin-left:auto;display:flex;gap:4px}
.socrow .acts .btn{margin:0}

/* kattintható névtábla a többi játékos feje fölött */
.nameplate.clickable{pointer-events:auto;cursor:pointer}
.nameplate.clickable:hover{color:var(--gold);text-shadow:0 0 10px rgba(216,180,90,.6)}


/* ── lerakható üzenetablakok (a képernyő alján sorakoznak) ── */
#whispers{right:14px;bottom:96px;align-items:flex-end}
.whisper .wtitle{cursor:pointer;user-select:none}
.whisper .wbtns{display:flex;gap:2px}
.whisper .wmin{background:transparent;border:0;color:var(--dim);font-size:14px;line-height:1;cursor:pointer;padding:0 4px}
.whisper .wmin:hover{color:#fff}
.whisper.min{width:186px}
.whisper.min .wlog,.whisper.min .winput{display:none}
.whisper.min .wtitle{background:rgba(255,255,255,.08)}
.whisper.blink .wtitle{animation:wblink 1s steps(2,start) infinite;background:rgba(216,180,90,.28);color:#fff}
@keyframes wblink{to{background:rgba(216,180,90,.06)}}

/* ── szövetség és piac ── */
.formrow{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.formrow input{flex:1;min-width:120px;background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:8px;
  color:var(--txt);padding:7px 10px;font:inherit;font-size:13px;outline:none}
.formrow input:focus{border-color:var(--gold)}
.formrow .btn{margin:0}
p.notice-txt{background:rgba(255,255,255,.04);border-left:3px solid var(--acc);border-radius:0 8px 8px 0;
  padding:9px 12px;margin:4px 0;font-size:13px;line-height:1.55}
.btn.danger{background:linear-gradient(160deg,#5a2230,#3a1620);border-color:#8a3b4a;color:#ffd7dd}

.sellform,.offerform{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mprice{width:88px;background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:7px;color:var(--txt);
  padding:4px 7px;font:inherit;font-size:12px;outline:none}
.mprice:focus{border-color:var(--gold)}
.icard.mine{box-shadow:0 0 0 1px rgba(143,183,255,.35) inset}
.icard .offers{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.offrow{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0;color:var(--dim)}
.offrow b{color:var(--txt)}
.offrow .btn{margin:0}


/* ── szövetségi háború ── */
#warBanner{position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:13;display:flex;
  align-items:center;gap:12px;background:rgba(24,10,16,.9);border:1px solid #8a3b4a;border-radius:10px;
  padding:7px 14px;font-size:14px;font-weight:700;color:#ffe6ea;backdrop-filter:blur(6px);
  box-shadow:0 6px 26px rgba(0,0,0,.55)}
#warBanner .wside{font-size:17px}
#warBanner .wside.me{color:#7dd87a}
#warBanner .wside.foe{color:#ff6a7c}
#warBanner .wvs{color:var(--dim)}
#warBanner .wtime{font-weight:500;font-size:12px;color:var(--dim)}
#warBanner .btn{margin:0}
.warscore{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;margin:6px 0 10px}
.warscore .me{color:#7dd87a}
.warscore .foe{color:#ff6a7c}
.warscore .dim{font-size:12px;font-weight:400;margin-left:8px}
.statrow{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--dim);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.statrow b{color:var(--txt);font-size:14px}
/* a csatatéren a névtábla mutatja, ki ellenség */
.nameplate.foe .np-name{color:#ff8a94}
.nameplate.foe{text-shadow:0 0 8px rgba(255,90,110,.5),0 2px 4px #000}

/* ── belépőképernyő ── */
.screenwrap.belepo{max-width:460px}
.belepokartya{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:20px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px;text-align:left}
.belepofulek{display:flex;gap:6px;margin-bottom:4px}
.belepofulek .ful{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--dim);
  border-radius:9px;padding:8px 0;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.belepofulek .ful.akt{background:linear-gradient(160deg,#2b3550,#1a2230);color:var(--gold);border-color:var(--gold)}
.belepokartya .fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--dim)}
.belepokartya .fld input{background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:9px;
  color:var(--txt);padding:10px 12px;font:inherit;font-size:14px;outline:none}
.belepokartya .fld input:focus{border-color:var(--gold)}
.belepokartya .btn.big{margin-top:2px}
.hint.hiba{background:rgba(255,90,110,.12);border-left:3px solid #ff6a7c;border-radius:0 8px 8px 0;
  padding:8px 11px;color:#ffd7dd !important;margin:0}