/* Interfata noua, dupa pozele din referinte/chatgpt. Fiecare ecran e o scena de 1672x941 sau 941x1672, scalata intreaga, deci coordonatele sunt cele din poza. */
:root{--crem:#F6F2CF;--aur1:#FDE63B;--aur2:#FDCA17;--aur3:#F49F0C;--bronz:#C89A52;--cyan:#1BDDEB;--p1:#332963;--p2:#2A2353;--p3:#1B1938;--u:min(calc(100vw/1672),calc(100vh/941))}
.ecr{position:fixed;inset:0;overflow:hidden;z-index:5}
.fer{z-index:30}
#final{z-index:20}
.fundal{position:absolute;inset:0;background:#120e2a center/cover no-repeat}
[data-f="lobby"].fundal{background-image:url(ui/f_lobby_3d_3.jpg)}
@media (orientation:portrait){[data-f="lobby"].fundal{background-image:url(ui/f_lobby.jpg)}}
[data-f="camera"].fundal{background-image:url(ui/f_camera.jpg)}
[data-f="profil"].fundal{background-image:url(ui/f_profil.jpg)}
[data-f="setari"].fundal{background-image:url(ui/f_setari.jpg)}
[data-f="iteme"].fundal{background-image:url(ui/f_iteme.jpg)}
[data-f="peti"].fundal{background-image:url(ui/f_peti.jpg)}
[data-f="cum"].fundal{background-image:linear-gradient(#110d2490,#110d24b8),url(ui/f_camera.jpg)}
[data-f="magazin"].fundal{background-image:url(ui/f_magazin.jpg)}
#magazin.dulap .fundal{background-image:url(ui/f_dulap.jpg)}
[data-f="final"].fundal{background-image:url(ui/f_final.jpg)}
body.port #magazin .fundal{background-position:24% center}
body.port #camera .fundal{background-position:23% center}
.scn{position:absolute;left:50%;top:50%;width:1672px;height:941px;transform-origin:center;color:var(--crem);font-family:var(--corp);font-weight:900}
.scn.port{width:941px;height:1672px}
.scn>*{position:absolute}
.scn button{font-family:inherit;cursor:pointer}
.scn button:focus-visible{outline:4px solid #fff;outline-offset:3px}
.ecr h1,.ecr h2,.ecr h3{margin:0;font-weight:400}

/* buton auriu cu colturi taiate si nituri */
.bAur{--t:26px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:16px;border:0;padding:0;background:none;color:#24140A;font:400 44px var(--titlu);text-shadow:0 1px 0 #ffffff55;filter:drop-shadow(0 7px 0 #0000006b) drop-shadow(0 12px 14px #0000006e)}
.bAur::before,.bAur::after{content:'';position:absolute;z-index:-1;clip-path:polygon(var(--t) 0,calc(100% - var(--t)) 0,100% var(--t),100% calc(100% - var(--t)),calc(100% - var(--t)) 100%,var(--t) 100%,0 calc(100% - var(--t)),0 var(--t))}
.bAur::before{inset:0;background:linear-gradient(#FFF6A8,#F2B21C 34%,#C9730A 78%,#8C4A08)}
.bAur::after{inset:7px;--t:22px;background:radial-gradient(90% 60% at 30% 22%,#ffffff40,#fff0 60%),radial-gradient(70% 90% at 85% 80%,#e0860a44,#0000 70%),linear-gradient(#FFEC52,#FDCA17 46%,#F49F0C)}
.bAur:hover{filter:drop-shadow(0 7px 0 #0000006b) drop-shadow(0 12px 14px #0000006e) brightness(1.06)}
.bAur:active{transform:translateY(4px)}
.bAur:disabled{filter:grayscale(.75) brightness(.8)}
.bAur .nit{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFF3B0,#E0A030 52%,#8C5A10);box-shadow:0 1px 2px #0007}
.bAur .nit:nth-of-type(1){left:26px}
.bAur .nit:nth-of-type(2){right:26px}

/* inapoi, patrat cu colturi taiate */
.bInapoi{width:104px;height:78px;border:0;background:none;position:relative;isolation:isolate;color:var(--crem);display:grid;place-items:center}
.bInapoi::before,.bInapoi::after{content:'';position:absolute;z-index:-1;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.bInapoi::before{inset:0;background:linear-gradient(#F0CE7C,#B47F2E 60%,#7A5018)}
.bInapoi::after{inset:5px;background:linear-gradient(#2C2347,#17132B)}
.bInapoi svg{width:40px;height:46px}

/* titlu cu bara */
.tit{font:400 60px/1 var(--titlu);background:linear-gradient(#FFFBE6 18%,#FBE3A6 62%,#EFC06A);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #4A2A10) drop-shadow(0 5px 6px #0009)}
.titBara{left:0;top:0;width:100%;height:96px;background:linear-gradient(#0D0A1Fd8,#17122Cc8);border-bottom:2px solid #6B5A7A66}
.romb{width:230px;height:18px;background:linear-gradient(90deg,#0000,#E8B34A 30%,#E8B34A 70%,#0000) center/100% 3px no-repeat}
.romb::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;background:linear-gradient(135deg,#FFE9A0,#D89A2C);transform:rotate(45deg) scale(.86)}

/* rama de panou: fundal inchis, linie aurie, colturi de bronz cu nit */
.rama{background:linear-gradient(#211B3E,#191430);border:3px solid #7E6A58;box-shadow:inset 0 0 0 2px #0a0816,0 8px 20px #0007}
.colt{position:absolute;width:92px;height:92px;background:no-repeat center/contain;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F4D488'/%3E%3Cstop offset='.5' stop-color='%23B8863A'/%3E%3Cstop offset='1' stop-color='%236E4A1C'/%3E%3C/linearGradient%3E%3CradialGradient id='n' cx='.36' cy='.3'%3E%3Cstop offset='0' stop-color='%23FFF3B0'/%3E%3Cstop offset='.55' stop-color='%23E0A030'/%3E%3Cstop offset='1' stop-color='%237A4E10'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 10 10 0h82L78 14H34L14 34v44L0 92z' fill='url(%23g)' stroke='%234A2F10' stroke-width='2'/%3E%3Ccircle cx='17' cy='17' r='7.5' fill='url(%23n)' stroke='%234A2F10' stroke-width='1.2'/%3E%3C/svg%3E")}
.colt.c1{left:-8px;top:-8px}
.colt.c2{right:-8px;top:-8px;transform:scaleX(-1)}
.colt.c3{left:-8px;bottom:-8px;transform:scaleY(-1)}
.colt.c4{right:-8px;bottom:-8px;transform:scale(-1)}

/* dala: butoanele mov din lobby si patratele din dulap */
.dala{background:linear-gradient(#332963,#231F44 55%,#1B1938);border:3px solid #94806E;border-radius:26px;color:var(--crem);box-shadow:0 5px 0 #0000006b,inset 0 2px 0 #ffffff14}
.dala:hover{border-color:#E8C47A}
.neon{background:linear-gradient(#0A2C40,#0B4258 60%,#0A5A72);border:4px solid var(--cyan);box-shadow:0 0 14px #1BDDEBa0,0 0 34px #1BDDEB44,inset 0 0 22px #1BDDEB33}

/* pastila cu aur si diamante */
.portofel{display:flex;align-items:center;gap:24px;margin:0;color:var(--crem);font:400 40px var(--titlu)}
.portofel span{display:inline-flex;align-items:center;gap:12px}
.portofel .ico{width:48px;height:48px;flex:none}
.ico{width:18px;height:18px;flex:none}

/* ---------- lobby ---------- */
#lProfil{left:24px;top:14px;width:362px;height:124px;padding:0;border:0;background:none;color:var(--crem)}
#lAv{position:absolute;left:0;top:0;width:124px;height:124px;border-radius:50%;background:radial-gradient(#3A2FA0,#1C1548);border:6px solid #E8B85A;box-shadow:0 0 0 3px #4A2E10,0 6px 12px #0007;overflow:hidden;z-index:1;box-sizing:border-box}
#lAvatar{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
#lNivelP{position:absolute;left:96px;top:24px;right:4px;height:76px;display:flex;align-items:center;padding-left:48px;border-radius:40px;background:linear-gradient(#262047,#171330);border:3px solid #C89A52;font:400 38px var(--titlu)}
#lNivel{font-style:normal}
#sold{left:416px;top:36px;width:392px;height:76px;box-sizing:border-box;justify-content:center;gap:0;border-radius:40px;background:linear-gradient(#262047,#171330);border:3px solid #C89A52}
#sold span:first-child{padding-right:26px;border-right:2px solid #ffffff2a;margin-right:26px}
#bSetari{left:830px;top:32px;width:88px;height:86px;border-radius:22px;border:3px solid #C89A52;background:linear-gradient(#332963,#1B1938);color:var(--crem);display:grid;place-items:center;padding:0}
#bSetari svg{width:56px;height:56px}
#lErou{left:120px;top:318px;width:700px;height:520px}
#lScena{position:absolute;inset:0;touch-action:none}
#lScena canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#lEN{left:338px;top:824px;width:264px;height:74px;box-sizing:border-box;border-radius:30px;border:4px solid #C89A52;background:linear-gradient(#2A2353,#17132B);color:var(--crem);font:400 44px var(--titlu);padding:0;box-shadow:0 5px 8px #0008}
#lPutere{left:350px;top:904px;width:240px;height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:32px;background:linear-gradient(#FFE650,#F7B41A);border:3px solid #A8660C;color:#24140A;font:900 34px var(--corp);box-shadow:0 4px 0 #0006}
#lMod{left:50px;top:996px;width:840px;height:186px;box-sizing:border-box;border-radius:36px;padding:0;color:var(--crem);display:block;overflow:hidden}
#lMod[data-tip="echipa"] i{background-image:url(ui/mod_echipa.jpg)}
#lMod[data-tip="lupta"] i{background-image:url(ui/mod_lupta.jpg)}
#lMod i{position:absolute;left:0;top:0;bottom:0;width:250px;background:url(ui/mod_pvp.jpg) center/cover;-webkit-mask-image:linear-gradient(90deg,#000 62%,#0000);mask-image:linear-gradient(90deg,#000 62%,#0000)}
#lModT{position:absolute;left:266px;top:18px;font:400 72px/1 var(--titlu)}
#lModS{position:absolute;left:266px;top:100px;font:900 46px/1.1 var(--corp)}
#lMod svg{position:absolute;right:42px;top:66px;width:60px;height:50px;color:var(--cyan)}
#lMod::after{content:'';position:absolute;right:146px;top:30px;bottom:30px;width:2px;background:#ffffff2e}
#lAlege{left:50px;top:560px;width:840px;box-sizing:border-box;padding:24px;border-radius:32px;display:grid;gap:16px;z-index:5}
#lTip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#lModuri{display:grid;gap:12px}
#lDif{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#lTip button,#lModuri button,#lDif button{display:flex;flex-direction:column;align-items:flex-start;padding:14px 22px;border-radius:22px;text-align:left}
#lAlege b{font:400 38px var(--titlu)}
#lAlege span{font-size:26px;color:#D9D3F5}
#lAlege button.sel{background:linear-gradient(#0A2C40,#0B4258);border-color:var(--cyan);box-shadow:0 0 12px #1BDDEBa0}
#bStart{left:64px;top:1212px;width:808px;height:176px;font-size:108px;--t:34px}
#bStart::after{--t:30px}
#stare{left:64px;top:1392px;width:808px;text-align:center;margin:0;font-size:26px;color:#fff;text-shadow:0 2px 4px #000}
#stare:empty{display:none}
#lNav{left:30px;top:1440px;width:880px;height:166px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
#lNav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;font:900 38px var(--corp)}
#lNav img{width:82px;height:82px;object-fit:contain;pointer-events:none}
#pers{display:none}
/* pe calculator: aceleasi piese, asezate in lat */
body:not(.port) #sold{left:1020px;top:18px;width:430px}
body:not(.port) #bSetari{left:1500px;top:14px}
body:not(.port) #lErou{left:330px;top:40px;width:640px;height:700px}
body:not(.port) #lEN{left:520px;top:738px}
body:not(.port) #lPutere{left:532px;top:822px}
body:not(.port) #lMod{left:1000px;top:360px;width:620px;height:176px}
body:not(.port) #lMod i{width:200px}
body:not(.port) #lModT{left:214px;font-size:64px}
body:not(.port) #lModS{left:214px;top:96px;font-size:38px}
body:not(.port) #lMod svg{right:24px;width:48px}
body:not(.port) #lMod::after{right:96px}
body:not(.port) #bStart{left:1000px;top:572px;width:620px;height:170px;font-size:100px}
body:not(.port) #stare{left:1000px;top:748px;width:620px}
body:not(.port) #lAlege{left:1000px;top:200px;width:620px;padding:18px}
body:not(.port) #lNav{left:24px;top:190px;width:230px;height:640px;grid-template-columns:1fr;gap:16px}

/* În format lat, eroul stă pe platforma din ilustrație. */
#ecran>.fundal::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#07041cb0,#07041c00 22%,#07041c00 70%,#07041ca8)}
body:not(.port) #lErou{left:calc(531px + var(--dx,0px)/2);top:59px;width:610px;height:680px}
body:not(.port) #lEN{left:668px;top:20px;width:336px}
body:not(.port) #lPutere{left:836px;top:104px;transform:translateX(-50%);white-space:nowrap}
body:not(.port) #sold{left:1090px;top:18px;width:430px}
body:not(.port) #bSetari{left:1536px;top:14px}
body:not(.port) #lNav{display:contents}
body:not(.port) #lNav button{position:absolute;width:128px;height:128px;font-size:26px}
body:not(.port) #lNav img{width:64px;height:64px}
body:not(.port) #bInv{left:30px;top:190px}   /* 11.11 (bro): Profil scos din stanga (se deschide din iconita de sus); in locul lui Inventarul */
body:not(.port) #bCum{left:30px;top:334px}
body:not(.port) #bIteme{left:1514px;top:478px}
body:not(.port) #bPeti{left:30px;top:478px}
body:not(.port) #bMag{left:1514px;top:190px}
body:not(.port) #bDulap{left:1514px;top:334px}
body:not(.port) #lMod{left:800px;top:786px;width:470px;height:128px}
body:not(.port) #lMod i{width:150px}
body:not(.port) #lModT{left:164px;top:14px;font-size:46px}
body:not(.port) #lModS{left:164px;top:70px;font-size:27px;white-space:nowrap}
body:not(.port) #lMod svg{right:16px;top:44px;width:36px}
body:not(.port) #lMod::after{display:none}
body:not(.port) #bStart{left:1286px;top:770px;width:362px;height:150px;font-size:86px}
body:not(.port) #stare{left:1286px;top:736px;width:362px}
body:not(.port) #bStart:not(:disabled)~#stare{display:none}
body:not(.port) #lAlege{left:800px;top:96px;width:848px;padding:16px;gap:10px}

/* ---------- animalute ---------- */
#petInapoi{left:34px;top:14px}
#petTitlu{left:170px;top:14px;font-size:70px}
#tPeti{right:34px;top:18px;left:auto;display:flex;align-items:center;gap:10px;font:400 40px var(--titlu);color:var(--crem)}
#tPeti i{width:42px;height:42px;background:center/contain no-repeat}

/* ---------- iteme ---------- */
#iInapoi{left:34px;top:14px}
#iTitlu{left:170px;top:14px;font-size:70px}
#iGrila{left:34px;top:108px;width:1130px;height:806px;box-sizing:border-box;padding:12px 20px;border-radius:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 12px;align-content:space-between}
#iGrila h3{grid-column:1/-1;margin:0;font:400 34px var(--titlu)}
#iGrila button{display:flex;flex-direction:column;align-items:center;gap:1px;height:200px;padding:6px 8px;border-radius:20px;text-align:center}
#iGrila img{width:88px;height:88px;object-fit:contain}
#iGrila button.lipsa img{filter:grayscale(1) brightness(.5)}
#iGrila b{font:400 27px var(--titlu)}
#iGrila span{font-size:20px;line-height:1.15;color:#D9D3F5}
#iGrila button.sel{background:linear-gradient(#0A2C40,#0B4258);border-color:var(--cyan);box-shadow:0 0 12px #1BDDEBa0}
#iGrila button.lipsa{opacity:.7}
#iStat{left:1182px;top:108px;width:456px;height:806px;box-sizing:border-box;padding:18px 24px;border-radius:26px;color:var(--crem)}
#iStat h3{margin:6px 0 6px;font:400 38px var(--titlu)}
#iStat p{margin:4px 0;font:700 25px/1.25 var(--corp)}
#iStat table{width:100%;border-collapse:collapse;font:700 23px var(--corp)}
#iStat th{text-align:left;font-weight:700;padding:3px 0}
#iStat td{text-align:right;padding:3px 0 3px 8px}

/* ---------- magazin si dulap ---------- */
#magazin .titBara{height:96px}
#mInapoi{left:34px;top:10px;z-index:5}   /* in dulap scena eroului urca pana sus si acoperea butonul (09.11, bro: „back de la dulap nu merge”) */
#mTitlu{left:180px;top:10px;font-size:70px}
#mRomb{left:512px;top:37px}
#mBani{right:28px;top:10px;height:70px;gap:32px}
#mBani span{height:68px;box-sizing:border-box;padding:0 28px 0 12px;border-radius:36px;border:3px solid #C89A52;background:linear-gradient(#262047,#171330)}
#mScena{left:40px;top:96px;width:610px;height:740px;touch-action:none}
#magazin.dulap .scn:not(.port) #mScena{top:7px}
#mScena canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#mSchimba{left:226px;top:798px;width:430px;height:80px;display:flex;align-items:center;justify-content:space-between}
#mSchimba b{position:absolute;left:70px;right:70px;top:8px;height:64px;display:grid;place-items:center;background:linear-gradient(#2A2353,#17132B);border-top:3px solid #C89A52;border-bottom:3px solid #C89A52;font:400 44px var(--titlu)}
#mPrev,#mNext{position:relative;z-index:1;width:84px;height:80px;border:0;background:none;color:var(--crem);isolation:isolate;display:grid;place-items:center}
#mPrev::before,#mNext::before{content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);background:linear-gradient(#F0CE7C,#B47F2E);box-shadow:none}
#mPrev::after,#mNext::after{content:'';position:absolute;inset:5px;z-index:-1;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);background:linear-gradient(#2C2347,#17132B)}
#mPrev svg,#mNext svg{width:34px;height:40px}
#mPanou{left:652px;top:92px;width:1016px;height:823px;box-sizing:border-box;border-radius:30px}
#magazin.dulap #mPanou{left:785px;top:40px;width:855px;height:866px;border-radius:14px}
#magazin.dulap .titBara{display:none}
#magazin.dulap #mTitlu{left:180px;top:10px;font-size:64px}
#magazin.dulap #mTBara{position:absolute;left:0;top:0;width:450px;height:96px;background:linear-gradient(#0D0A1Fd8,#17122Cc8);border-bottom:4px solid #C89A52;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
#magazin.dulap #mRomb,#magazin.dulap #mBani{display:none}
#mPutere{display:none;position:absolute;left:72px;top:44px;width:742px;height:130px;box-sizing:border-box;border-radius:18px;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px)}
#magazin.dulap #mPutere{display:block}
#mPutere svg{position:absolute;left:26px;top:12px;width:106px;height:106px;color:var(--cyan)}
#mPutere b{position:absolute;left:196px;top:12px;font:400 50px var(--titlu)}
#mPutere span{position:absolute;left:200px;top:70px;font:900 36px var(--corp)}
#mTaburi{position:absolute;left:60px;top:24px;right:30px;height:82px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#magazin.dulap #mTaburi{display:none}
#mTaburi button{border-radius:22px;border:3px solid #54476E;background:linear-gradient(#332963,#231F44);color:var(--crem);font:400 42px var(--titlu);padding:0}
#mTaburi button[aria-selected=true]{background:linear-gradient(#3DF0F6,#14C4D8);border-color:#8FF8FF;color:#07161A;box-shadow:0 0 14px #1BDDEBb0}
#mLocuri{position:absolute;left:30px;right:30px;top:112px;height:42px;display:none;gap:8px;justify-content:center}
#magazin.piese #mLocuri{display:flex}
#mLocuri button{padding:0 16px;border-radius:16px;border:2px solid #54476E;background:#1B1938;color:var(--crem);font:900 24px var(--corp)}
#mLocuri button.sel{border-color:var(--cyan);color:var(--cyan)}
#mGrila{position:absolute;left:30px;right:26px;top:134px;height:488px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:236px;gap:16px;overflow-y:auto;scrollbar-width:none;padding:2px 2px}
#magazin.piese #mGrila{top:164px;height:458px}
#mGrila::-webkit-scrollbar{display:none}
.obiect{--c:#7A5BC4;position:relative;display:block;padding:0;border-radius:26px;border:3px solid #6A4FA8;background:linear-gradient(#2C2150,#1F1838);color:var(--crem);overflow:hidden}
.obiect canvas,.obiect img,.obiect .nimic{position:absolute;left:18px;top:18px;width:200px;height:200px;object-fit:contain}
.obiect img{object-fit:cover;object-position:50% 12%;border-radius:18px}
.obiect .nume{position:absolute;left:236px;right:14px;top:48px;font:900 36px/1.16 var(--corp);text-align:left}
.obiect .pret{position:absolute;left:236px;bottom:24px;min-width:176px;height:60px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:20px;background:linear-gradient(#0A2C40,#0B4258);border:2px solid #2A8CA0;font:400 36px var(--titlu)}
.obiect .pret span{display:inline-flex;align-items:center;gap:8px}
.obiect .pret .ico{width:40px;height:40px}
.obiect.sel{border:4px solid #FFD23F;box-shadow:0 0 16px #FFD23F99}
.obiect.pus::after{content:'✓';position:absolute;left:14px;top:10px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--cyan);color:#07161A;font:900 28px var(--corp)}
.obiect .nimic{display:grid;place-items:center;font:400 96px var(--titlu);color:#ffffff55}
#mDetalii{position:absolute;left:24px;right:24px;bottom:18px;height:142px;box-sizing:border-box;border-radius:24px;background:linear-gradient(#2C2150,#1F1838);border:2px solid #4A3C72}
#mInfo{position:absolute;left:34px;top:30px;width:340px;text-align:center}
#mNume{display:block;font:400 34px/1.1 var(--titlu)}
#mDesc{display:block;margin-top:6px;font-size:22px;line-height:1.15;color:#D9D3F5;max-height:56px;overflow:hidden}
#mAct{position:absolute;right:24px;top:18px;width:538px;height:106px;font-size:46px}
#mAct .ico{width:52px;height:52px}
#mAct.scump{filter:grayscale(.8) drop-shadow(0 7px 0 #0000006b)}
#mAct span{display:inline-flex;align-items:center;gap:8px}
#mAct2{position:absolute;right:574px;top:30px;height:80px;padding:0 22px;border-radius:20px;font:400 28px var(--titlu)}
/* dulap: sase locuri, trei tinute */
#magazin.dulap #mGrila{left:50px;right:30px;top:204px;height:446px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:212px;gap:23px 22px}
#magazin.dulap .obiect{border-radius:20px;border:4px solid #7E7468;background:linear-gradient(#262846,#1B1A33);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}
#magazin.dulap .obiect canvas,#magazin.dulap .obiect .nimic{left:50%;top:14px;width:150px;height:150px;margin-left:-75px}
#magazin.dulap .obiect .nume{left:0;right:0;top:156px;text-align:center;font-size:32px}
#magazin.dulap .obiect .pret{display:none}
#magazin.dulap #mDetalii{left:46px;right:26px;bottom:44px;height:112px;background:none;border:0}
#magazin.dulap #mInfo{display:none}
#mSalv{display:none;position:absolute;left:0;top:0;gap:12px}
#magazin.dulap #mSalv{display:flex}
#mSalv button{width:104px;height:104px;border-radius:22px;border:3px solid #7E7468;background:linear-gradient(#262846,#1B1A33);color:var(--crem);font:400 56px var(--titlu);padding:0}
#mSalv button.sel{border:4px solid var(--cyan);background:linear-gradient(#0A2C40,#0B4258);box-shadow:0 0 14px #1BDDEBb0}
#magazin.dulap #mAct{right:0;top:0;width:434px;height:112px;font-size:46px}
#magazin.dulap #mAct2{display:none}

/* ---------- camera ---------- */
#cInchide{left:34px;top:20px}
#cTitlu{left:182px;top:16px;font-size:72px}
#cCard{left:112px;top:160px;width:640px;height:302px;box-sizing:border-box;border-radius:30px;background:#0B1830c8;border:3px solid var(--cyan);box-shadow:0 0 14px #1BDDEB66}
#cTip{left:172px;top:128px;width:524px;height:84px;display:flex;align-items:center;justify-content:center;gap:18px;box-sizing:border-box;font:400 50px var(--titlu);clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,30px 100%,0 50%);background:linear-gradient(#0A2C40,#0B4258)}
#cTip svg{width:74px;height:52px;color:var(--cyan)}
#cCodE{left:112px;top:228px;width:640px;text-align:center;font:900 32px var(--corp)}
#cCod{left:112px;top:262px;width:640px;text-align:center;font:400 118px/1 var(--titlu);letter-spacing:2px;color:#FFF9E4;text-shadow:0 5px 0 #0008;user-select:text;-webkit-user-select:text}
#cCopiaza{left:282px;top:384px;width:306px;height:62px;border-radius:30px;background:linear-gradient(#0A2C40,#0B4258);border:3px solid #2AA8C0;color:var(--crem);font:900 32px var(--corp);display:flex;align-items:center;justify-content:center;gap:14px}
#cCopiaza svg{width:42px;height:42px}
#cIntra{left:112px;top:160px;width:640px;height:302px;box-sizing:border-box;padding:96px 34px 0;display:grid;grid-template-columns:1fr auto;gap:16px;align-content:start}
#cNoua{grid-column:1/-1;height:84px;font-size:40px}
#cCodIn{height:70px;box-sizing:border-box;width:100%;text-align:center;font:400 40px var(--titlu);letter-spacing:6px;color:#fff;background:#0a0720;border:3px solid #54476E;border-radius:18px;user-select:text;-webkit-user-select:text}
#cIntraB{height:70px;padding:0 30px;border-radius:18px;border:3px solid #C89A52;background:linear-gradient(#332963,#1B1938);color:var(--crem);font:400 34px var(--titlu)}
#cPanou{left:826px;top:54px;width:820px;height:854px;box-sizing:border-box;border-radius:24px}
#cAntet{left:834px;top:56px;width:804px;height:102px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 62px;clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px),0 28px);background:linear-gradient(#2A2353,#17132B);border-bottom:3px solid #C89A52;font:400 58px var(--titlu)}
#cLista{left:866px;top:184px;width:730px;height:500px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;scrollbar-width:none}
#cLista::-webkit-scrollbar{display:none}
#cLista li{flex:none;position:relative;height:112px;box-sizing:border-box;border-radius:30px;background:linear-gradient(#1E2245,#171A38);border:2px solid #3A3F6E;display:flex;align-items:center;padding-left:18px;gap:26px;font:900 44px var(--corp)}
#cLista li.gazda{border:4px solid var(--cyan);box-shadow:0 0 14px #1BDDEB88}
#cLista li.gol{background:#20234Ad0;color:#9A96B8;font-size:34px;height:100px}
#cLista img{width:100px;height:100px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#2A1C8B;border:4px solid #E8B85A;box-sizing:border-box}
#cLista em{margin-left:auto;margin-right:18px;font:900 30px var(--corp);padding:8px 24px;border-radius:30px;border:3px solid var(--cyan);color:var(--cyan)}
#cLista i{font-size:44px;color:#FFD23F;font-style:normal}
#cStart{left:854px;top:720px;width:762px;height:158px;font-size:76px;--t:30px}
#cStare{left:826px;top:690px;width:820px;text-align:center;margin:0;font-size:26px}
#cStare.rau{color:#ff9aa8}

/* ---------- final ---------- */
#fPanou{left:40px;top:62px;width:884px;height:832px;box-sizing:border-box;border-radius:20px}
#fNit{left:360px;top:14px;width:244px;height:90px;background:linear-gradient(#E8C47A,#8C6A30);clip-path:polygon(22% 0,78% 0,100% 40%,100% 100%,0 100%,0 40%)}
#fTitlu{left:70px;top:144px;width:824px;text-align:center;font:400 118px/1 var(--titlu);background:linear-gradient(#FFF3A8 12%,#FFD238 54%,#F49F0C 92%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #5A300C) drop-shadow(0 9px 8px #000b)}
#fMesaj{left:84px;top:266px;width:796px;text-align:center;margin:0;font-size:26px;color:#E8E3FF}
.fTile{left:80px;top:306px;width:806px;height:238px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fTile div{position:relative;border-radius:24px;border:3px solid #94806E;background:linear-gradient(#262846,#1B1A33);clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px)}
.fTile svg{position:absolute;left:50%;top:18px;width:150px;height:130px;margin-left:-75px}
.fTile b{position:absolute;left:0;right:0;bottom:20px;text-align:center;font:400 38px var(--titlu)}
#fXp{left:146px;top:570px;width:680px;height:96px}
#fXp i{position:absolute;left:0;top:0;width:100px;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE9A0'/%3E%3Cstop offset='1' stop-color='%23C88A28'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232C7FD0'/%3E%3Cstop offset='1' stop-color='%23123A78'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 2 96 18v44c0 26-22 40-46 48C26 102 4 88 4 62V18z' fill='url(%23a)' stroke='%235A3A10' stroke-width='3'/%3E%3Cpath d='M50 13 86 25v36c0 20-17 32-36 39-19-7-36-19-36-39V25z' fill='url(%23b)'/%3E%3Ctext x='50' y='70' text-anchor='middle' font-family='Lilita One,sans-serif' font-size='40' fill='%23FFEFA8'%3EXP%3C/text%3E%3C/svg%3E") center/contain no-repeat;z-index:1}
#fXp u{position:absolute;left:92px;top:22px;right:170px;height:50px;background:#17132B;border:3px solid #54476E;border-radius:0 26px 26px 0;overflow:hidden;text-decoration:none}
#fXp s{display:block;height:100%;background:linear-gradient(#8FF8FF,#1BDDEB 50%,#0FA8C8);box-shadow:0 0 12px #1BDDEB;border-radius:0 24px 24px 0;text-decoration:none}
#fXp b{position:absolute;right:0;top:22px;width:170px;height:50px;box-sizing:border-box;display:grid;place-items:center;background:#1E1B38;border:3px solid #54476E;border-left:0;border-radius:0 26px 26px 0;font:400 34px var(--titlu)}
#bReia{left:88px;top:702px;width:498px;height:136px;font-size:60px}
#bLobby{left:608px;top:708px;width:268px;height:122px;font:400 56px var(--titlu);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);background:linear-gradient(#262847,#17132B);border:4px solid #C89A52;color:var(--crem)}
#fScena{left:930px;top:100px;width:730px;height:820px;pointer-events:none}
#fScena canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#fLista{left:70px;top:0;display:none}

/* ---------- profil ---------- */
#pInapoi{left:24px;top:28px;width:96px;height:92px}
#pTitlu{left:0;top:70px;width:100%;text-align:center;font-size:96px;background:linear-gradient(#FFF7CC 14%,#FFD848 58%,#F4A516);-webkit-background-clip:text;background-clip:text}
#pCard{left:42px;top:298px;width:856px;height:420px;box-sizing:border-box;border-radius:34px}
#pAvR{left:118px;top:328px;width:268px;height:268px;box-sizing:border-box;border-radius:50%;background:radial-gradient(#59C8E8,#1A5A9A);border:8px solid #E8B85A;box-shadow:0 0 0 3px #4A2E10;overflow:hidden}
#pAvatar{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
#pNumeIn{left:416px;top:326px;width:440px;height:82px;background:none;border:0;color:#FFF9E4;font:400 76px var(--titlu);padding:0;text-shadow:0 4px 0 #0008;user-select:text;-webkit-user-select:text}
#pRang{left:418px;top:414px;margin:0;font:900 38px var(--corp);display:flex;align-items:center;gap:14px}
#pRang svg{width:64px;height:38px}
#pNivelE{left:416px;top:480px;width:240px;height:78px;box-sizing:border-box;display:grid;place-items:center;border-radius:32px;border:4px solid #C89A52;background:linear-gradient(#2A2353,#17132B);font:400 46px var(--titlu)}
#pBara{left:108px;top:610px;width:724px;height:62px;box-sizing:border-box;border-radius:32px;border:4px solid #C89A52;background:#17132B;overflow:hidden}
#pXp{display:block;height:100%;background:linear-gradient(#7FF0FF,#25B3DD 60%,#1890C0)}
#pXpT{left:108px;top:610px;width:724px;height:62px;display:grid;place-items:center;font:400 36px var(--titlu);text-shadow:0 2px 0 #000a}
#pStat{left:38px;top:750px;width:866px;height:284px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#pStat div{position:relative;border-radius:34px;border:3px solid #C89A52;background:linear-gradient(#2E2558,#1E1838)}
#pStat svg{position:absolute;left:50%;top:18px;width:124px;height:112px;margin-left:-62px}
#pStat b{position:absolute;left:0;right:0;top:128px;text-align:center;font:400 84px/1 var(--titlu)}
#pStat span{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:900 38px var(--corp)}
#pTitluR{left:0;top:1078px;width:100%;text-align:center;font-size:74px;background:linear-gradient(#FFF7CC 14%,#FFD848 58%,#F4A516);-webkit-background-clip:text;background-clip:text}
#pLinii{left:90px;top:1122px;width:760px;height:6px;background:linear-gradient(90deg,#E8B34A 0 21%,#0000 21% 79%,#E8B34A 79%)}
#pReal{left:42px;top:1184px;width:858px;height:400px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:24px;overflow-y:auto;scrollbar-width:none}
#pReal::-webkit-scrollbar{display:none}
#pReal li{flex:none;position:relative;height:172px;box-sizing:border-box;border-radius:44px;border:3px solid #C89A52;background:linear-gradient(#2E2558,#1E1838)}
#pReal li.ok{border:5px solid var(--cyan);background:linear-gradient(#0A2C40,#0B4258);box-shadow:0 0 14px #1BDDEB99}
#pReal svg.pi{position:absolute;left:30px;top:22px;width:170px;height:124px}
#pReal li::after{content:'';position:absolute;left:228px;top:28px;bottom:28px;width:2px;background:#ffffff2a}
#pReal b{position:absolute;left:254px;top:26px;font:400 50px var(--titlu)}
#pReal li.ok b{top:52px}
#pReal u{position:absolute;left:250px;right:44px;bottom:26px;height:56px;box-sizing:border-box;border-radius:28px;border:3px solid #C89A52;background:#17132B;overflow:hidden;text-decoration:none}
#pReal s{display:block;height:100%;background:linear-gradient(#7FF0FF,#25B3DD 60%,#1890C0);text-decoration:none}
#pReal em{position:absolute;left:250px;right:44px;bottom:26px;height:56px;display:grid;place-items:center;font:400 36px var(--titlu);font-style:normal;text-shadow:0 2px 0 #000a}
#pReal li.ok i.bifa{position:absolute;right:30px;top:50px;width:90px;height:70px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70'%3E%3Cpath d='M8 36 32 60 82 10' fill='none' stroke='%2359F2FF' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#pAlege{display:none}

/* ---------- setari ---------- */
#sPanou{left:28px;top:320px;width:886px;height:1220px;box-sizing:border-box;border-radius:44px;border:5px solid #3E3F86;background:linear-gradient(#1F2354,#181A40);box-shadow:0 0 22px #1BDDEB33}
#sChip{left:210px;top:282px;width:520px;height:154px;box-sizing:border-box;display:grid;place-items:center;font:400 96px var(--titlu);clip-path:polygon(44px 0,calc(100% - 44px) 0,100% 42%,100% 58%,calc(100% - 44px) 100%,44px 100%,0 58%,0 42%);background:linear-gradient(#2A2353,#17132B)}
#sChip span{background:linear-gradient(#FFF3A8,#FFD238 54%,#F49F0C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5A300C)}
#sInchide{left:784px;top:334px;width:98px;height:96px;font-size:0}
.rSet{left:72px;width:800px;box-sizing:border-box;border-radius:36px;border:3px solid var(--cyan);background:linear-gradient(#171A40,#111435);box-shadow:0 0 10px #1BDDEB55;color:var(--crem);padding:0;display:block}
.rSet svg.pi{position:absolute;left:38px;top:50%;width:92px;height:92px;margin-top:-46px;color:var(--crem)}
.rSet::after{content:'';position:absolute;left:168px;top:22px;bottom:22px;width:2px;background:#ffffff2a}
.rSet b{position:absolute;left:192px;font:900 44px/1.1 var(--corp)}
#rMuz{top:486px;height:156px}
#rMuz b,#rVib b{top:54px}
#rEf{top:668px;height:182px}
#rEf b{top:26px}
#rCal{top:878px;height:182px}
#rCal b{top:38px;width:230px}
#rVib{top:1086px;height:158px}
.comut{position:absolute;right:38px;top:32px;width:172px;height:88px;box-sizing:border-box;border-radius:44px;border:5px solid #2AE8F0;background:linear-gradient(#0FE0E8,#07C8D8);padding:0;transition:background .15s}
.comut::after{content:'';position:absolute;right:6px;top:6px;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 40% 34%,#fff,#EDE8D0);box-shadow:0 2px 4px #0007;transition:right .15s}
.comut.stins{border-color:#54588A;background:#2A2C50}
.comut.stins::after{right:92px}
#sVol{position:absolute;left:204px;top:100px;width:556px;height:60px;-webkit-appearance:none;appearance:none;background:none;margin:0}
#sVol::-webkit-slider-runnable-track{height:34px;border-radius:17px;background:linear-gradient(90deg,#0FE0E8 var(--v,62%),#141636 var(--v,62%));border:3px solid #54588A}
#sVol::-moz-range-track{height:30px;border-radius:17px;background:linear-gradient(90deg,#0FE0E8 var(--v,62%),#141636 var(--v,62%));border:3px solid #54588A}
#sVol::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:64px;margin-top:-18px;border-radius:50%;background:radial-gradient(circle at 42% 36%,#fff,#E8E0D0 58%,#C8B8A0);border:6px solid #E8A030}
#sVol::-moz-range-thumb{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 42% 36%,#fff,#E8E0D0 58%,#C8B8A0);border:6px solid #E8A030}
#sCal{position:absolute;right:24px;top:44px;width:344px;height:92px;box-sizing:border-box;padding:0 26px;border-radius:26px;border:4px solid #E8A030;background:linear-gradient(#2A2353,#1C1838);color:var(--crem);font:900 36px var(--corp)}
#sGata{left:100px;top:1288px;width:740px;height:176px;font-size:80px;--t:34px}

/* ---------- cum se joaca ---------- */
#cumInapoi{left:34px;top:12px}
#cumTitlu{left:176px;top:10px;font-size:68px}
#cumRomb{left:644px;top:37px}
#cumNr{right:30px;top:14px;width:172px;height:66px;display:grid;place-items:center;border-radius:34px;border:3px solid #C89A52;background:#16122B;font:400 42px var(--titlu)}
#cumPanou{left:1046px;top:100px;width:622px;height:812px;box-sizing:border-box;border-radius:30px;border:4px solid #C89A52;background:linear-gradient(#2A2150,#1C1636)}
#cumT{left:1046px;top:148px;width:622px;text-align:center;font-size:92px}
#cumLin{left:1130px;top:260px;width:456px}
#cumText{left:1090px;top:296px;width:534px;text-align:center;margin:0;font:900 40px/1.18 var(--corp)}
#cumText p{margin:0 0 24px}
#cumUrm{left:1086px;top:664px;width:544px;height:166px;font-size:64px;--t:30px}
#cumArta{left:38px;top:196px;width:960px;height:552px;box-sizing:border-box;object-fit:cover;border:3px solid #987451;border-radius:20px;box-shadow:0 10px 36px #080610a8}

/* ---------- joc: tot ce sta peste scena ---------- */
#hud{--hm:max(150px,calc(300*var(--u)))}   /* 12.11 (bro: harta mai vizibila): marimea ramei hartii; pe telefon minim 150 px */
#harta{left:calc(16*var(--u) + var(--hm)*.039);top:calc(16*var(--u) + var(--hm)*.039);width:calc(var(--hm)*.922);height:calc(var(--hm)*.922);border-radius:calc(22*var(--u));border:0;box-shadow:none}
/* 12.11 (bro: „caseta de bonusuri sa arate mult mai profi”): sub harta, in stilul ramei ei: rama aurie dubla, titlu auriu, randuri
   cu iconita desenata, numele in stanga si valoarea mare in dreapta; marginea ia culoarea celui mai rar item din cufere */
#bonusuri{position:absolute;left:calc(16*var(--u));top:calc(16*var(--u) + var(--hm) + 12*var(--u));width:var(--hm);pointer-events:none}
#bonusuri .bPanou{position:relative;padding:calc(6*var(--u)) calc(12*var(--u)) calc(9*var(--u));border-radius:calc(16*var(--u));background:radial-gradient(120% 90% at 50% 0%,#3a2876f2,#1a1040f2 60%,#0e0826f5);border:calc(5*var(--u)) solid #E0B04A;box-shadow:0 0 0 calc(2*var(--u)) #4A2E10,inset 0 0 0 calc(2*var(--u)) #6E4A1C,0 calc(6*var(--u)) calc(16*var(--u)) #000b}
#bonusuri .bTitlu{margin:calc(-2*var(--u)) 0 calc(5*var(--u));padding-bottom:calc(5*var(--u));text-align:center;font:400 max(12px,calc(21*var(--u)))/1 var(--titlu);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(#FFF5B8 10%,#FFD84A 50%,#F4A516 90%);-webkit-background-clip:text;background-clip:text;color:transparent;border-bottom:calc(2*var(--u)) solid;border-image:linear-gradient(90deg,#E0B04A00,#E0B04A,#E0B04A00) 1}
#bonusuri ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(4*var(--u))}
#bonusuri li{display:grid;grid-template-columns:calc(26*var(--u)) 1fr auto;align-items:center;gap:calc(7*var(--u));min-height:calc(26*var(--u))}
#bonusuri svg{width:calc(24*var(--u));height:calc(24*var(--u));min-width:12px;min-height:12px;fill:currentColor;filter:drop-shadow(0 1px 1px #000c)}
#bonusuri span{font:800 max(10px,calc(16*var(--u)))/1.15 var(--corp);color:#efe6cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bonusuri li b{font:400 max(11.5px,calc(19*var(--u)))/1 var(--titlu);color:currentColor;text-shadow:0 1px 2px #000c}
#bonusuri .s-dmg{color:#ff8a5c}#bonusuri .s-rez{color:#7fc8ff}#bonusuri .s-hp{color:#ff5f7e}#bonusuri .s-vit{color:#59f2d0}
#bonusuri .s-cd{color:#ffd23f}#bonusuri .s-noroc{color:#7dff8a}#bonusuri .s-scut{color:#c3a2ff}
#bonusuri .b-roz{border-color:#ff7ad8;box-shadow:0 0 0 calc(2*var(--u)) #4a1036,inset 0 0 0 calc(2*var(--u)) #8a2a66,0 0 calc(16*var(--u)) #ff6ad566,0 calc(6*var(--u)) calc(16*var(--u)) #000b}
#bonusuri .b-auriu{border-color:#ffd23f;box-shadow:0 0 0 calc(2*var(--u)) #4A2E10,inset 0 0 0 calc(2*var(--u)) #8a6a1c,0 0 calc(20*var(--u)) #ffc23a99,0 calc(6*var(--u)) calc(16*var(--u)) #000b}
#bonusuri .b-verde{border-color:#6fe08a;box-shadow:0 0 0 calc(2*var(--u)) #123a20,inset 0 0 0 calc(2*var(--u)) #2a6a3c,0 calc(6*var(--u)) calc(16*var(--u)) #000b}
#hRama{position:absolute;left:calc(16*var(--u));top:calc(16*var(--u));width:var(--hm);height:var(--hm);box-sizing:border-box;border:calc(var(--hm)*.035) solid #E0B04A;border-radius:calc(28*var(--u));box-shadow:0 0 0 calc(2*var(--u)) #4A2E10,inset 0 0 0 calc(2*var(--u)) #6E4A1C;pointer-events:none}
#hRama::before,#hRama::after{content:'';position:absolute;left:50%;width:calc(26*var(--u));height:calc(26*var(--u));margin-left:calc(-13*var(--u));background:linear-gradient(135deg,#8FF2FF,#1BA8C8);border:calc(3*var(--u)) solid #E0B04A;box-sizing:border-box;transform:rotate(45deg)}
#hRama::before{top:calc(-18*var(--u))}
#hRama::after{bottom:calc(-18*var(--u))}
#sus{left:calc(282*var(--u));right:calc(16*var(--u));top:calc(18*var(--u));display:flex;gap:calc(44*var(--u));align-items:center;flex-wrap:nowrap;width:auto;justify-content:flex-start;transform:none}
#sus .pil{height:calc(66*var(--u));box-sizing:border-box;display:inline-flex;align-items:center;font:400 calc(46*var(--u)) var(--titlu);color:var(--crem);text-shadow:0 2px 0 #000a}
#pTimp,#pCuf,#pDia{border:calc(3*var(--u)) solid #C89A52;background:linear-gradient(#1E1832e8,#100C20e8);border-radius:calc(34*var(--u))}
#pTimp{width:calc(238*var(--u));padding-left:calc(100*var(--u));position:relative}
#pTimp::before{content:'';position:absolute;left:calc(26*var(--u));top:calc(8*var(--u));width:calc(46*var(--u));height:calc(46*var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44' fill='none' stroke='%23F6F2CF' stroke-width='3.4'%3E%3Ccircle cx='20' cy='25' r='16'/%3E%3Cpath d='M15 3h10M20 3v6M20 25V15M33 11l3 3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
#pPortal{padding:0 calc(52*var(--u));color:#8FF8F8!important;border-radius:calc(30*var(--u));border:calc(3*var(--u)) solid var(--cyan);background:linear-gradient(#0A2230e8,#061420e8);box-shadow:0 0 calc(12*var(--u)) #1BDDEBb0;font-size:calc(40*var(--u))!important;position:relative}
#pPortal::before,#pPortal::after{content:'';position:absolute;top:50%;width:calc(20*var(--u));height:calc(20*var(--u));margin-top:calc(-10*var(--u));background:#59F2FF;transform:rotate(45deg)}
#pPortal::before{left:calc(16*var(--u))}
#pPortal::after{right:calc(16*var(--u))}
#pCuf{margin-left:auto;padding:0 calc(26*var(--u)) 0 calc(96*var(--u));position:relative;min-width:calc(148*var(--u));justify-content:flex-end}
#pCuf::before{content:'';position:absolute;left:calc(6*var(--u));top:calc(-8*var(--u));width:calc(80*var(--u));height:calc(76*var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 76'%3E%3Cpath d='M8 34C8 16 22 8 40 8s32 8 32 26z' fill='%23A63A22' stroke='%23FFC93A' stroke-width='5'/%3E%3Crect x='8' y='32' width='64' height='36' rx='4' fill='%238A2A1A' stroke='%23FFC93A' stroke-width='5'/%3E%3Cpath d='M26 10v58M54 10v58' stroke='%23FFC93A' stroke-width='6'/%3E%3Crect x='32' y='28' width='16' height='20' rx='3' fill='%23FFD84A' stroke='%238A5A10' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
#pDia{margin-left:calc(-24*var(--u));padding:0 calc(26*var(--u)) 0 calc(14*var(--u));gap:calc(16*var(--u));min-width:calc(144*var(--u));justify-content:space-between}
#pDia svg{width:calc(54*var(--u));height:calc(46*var(--u))}
#pRam,#pArma,#bMuzH{display:none!important}
#stick{left:calc(30*var(--u));bottom:calc(38*var(--u));width:calc(242*var(--u));height:calc(242*var(--u));opacity:1;border:calc(3*var(--u)) solid #ffffff55;background:radial-gradient(#ffffff12,#ffffff24 70%,#ffffff3a);box-shadow:inset 0 0 calc(30*var(--u)) #ffffff1c}
#buton{width:40%;height:40%;margin:-20%;background:radial-gradient(circle at 42% 34%,#fff,#DCE4F4 45%,#8C98C4);box-shadow:0 calc(6*var(--u)) calc(12*var(--u)) #0008,0 0 calc(10*var(--u)) #ffffff66;border:0}
#buton svg{display:none}
.bt{border:calc(7*var(--u)) solid #E0B04A;box-shadow:0 0 0 calc(2*var(--u)) #4A2E10,0 calc(6*var(--u)) calc(10*var(--u)) #0009;box-sizing:border-box;background:radial-gradient(circle at 50% 36%,#5A3A1E,#2E1C10)}
#bDes{right:calc(425*var(--u));bottom:calc(46*var(--u));width:calc(150*var(--u));height:calc(150*var(--u))}
#bSuper{--sb:calc(150*var(--u));right:calc(252*var(--u));bottom:calc(46*var(--u));width:calc(150*var(--u));height:calc(150*var(--u))}
#bAtac{right:calc(25*var(--u));bottom:calc(34*var(--u));width:calc(204*var(--u));height:calc(204*var(--u));background:radial-gradient(circle at 50% 36%,#E8503A,#A81E18)}
#atacBila{background:none;border:0;box-shadow:none}
#bPune{right:calc(252*var(--u));bottom:calc(216*var(--u));width:calc(120*var(--u));height:calc(120*var(--u))}
#bCheie{right:calc(590*var(--u));bottom:calc(46*var(--u))}
#bTr{right:calc(425*var(--u));bottom:calc(46*var(--u))}
/* 13.11 abilitatea armei (deasupra butonului de lovit) si magia (deasupra cufarului) */
#bAbil{--sb:max(48px,calc(130*var(--u)));right:calc(62*var(--u));bottom:calc(272*var(--u))}
#bMagie{--sb:max(48px,calc(124*var(--u)));right:calc(438*var(--u));bottom:calc(220*var(--u))}
#bApar{--sb:max(48px,calc(116*var(--u)));right:max(calc(586*var(--u)),calc(438*var(--u) + max(48px,calc(124*var(--u))) + 8px));bottom:calc(224*var(--u))}   /* pe telefonul tinut drept butoanele au 48px minim: bula sta mereu la stanga magiei */
#mesaj{top:calc(116*var(--u))}

/* a doua trecere: mai aproape de poze */
.bAur{-webkit-text-stroke:1.5px #24140A;font-weight:400;text-shadow:0 2px 0 #FFE58A}
.bAur::before{background:linear-gradient(#FFF9C0,#F7BC2C 26%,#D8860E 70%,#8C4A08)}
.bAur::after{inset:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .78 0 0 0 0 .3 0 0 0 .55 -.14'/%3E%3C/filter%3E%3Crect width='300' height='120' filter='url(%23n)'/%3E%3C/svg%3E") center/100% 100%,linear-gradient(#FFEC52,#FDCA17 46%,#F49F0C)}
#fTitlu{filter:drop-shadow(3px 0 0 #5A2E08) drop-shadow(-3px 0 0 #5A2E08) drop-shadow(0 -3px 0 #5A2E08) drop-shadow(0 6px 0 #3A1E08) drop-shadow(0 10px 8px #000c)}
.portofel img.ico{width:50px;height:50px;object-fit:contain}
#bSetari svg{display:none}
#bSetari{background:url(ui/i_roata.png) center/60px no-repeat,linear-gradient(#332963,#1B1938)}
#lAv{border-width:7px}
#lMod{border-width:5px;box-shadow:0 0 18px #1BDDEBc0,0 0 44px #1BDDEB55,inset 0 0 26px #1BDDEB33}
#lPutere{font-size:36px}
#stare{top:1396px;font-size:22px}
.dala{border-color:#B08A5A}
#lNav button{font-size:40px}
#mSchimba{display:none}
#magazin.dulap #mSchimba{display:flex}
#mRot{left:512px;top:795px;width:96px;height:92px;border:0;padding:0;background:url(ui/b_rot.png) center/contain no-repeat}
#magazin.dulap #mRot{display:none}
#mInfo{left:40px;top:34px;width:290px;height:72px;text-align:center}
#mNume{display:grid;place-items:center;height:72px;margin:0 38px;font:900 36px/1 var(--corp);background:#17132Bd0;border-radius:14px}
#mInfo::before,#mInfo::after{content:'';position:absolute;top:-8px;width:52px;height:84px;background:url(ui/l_st.png) center/contain no-repeat}
#mInfo::before{left:-8px}
#mInfo::after{right:-8px;background-image:url(ui/l_dr.png)}
#mDesc{display:none}
#mPanou{background:linear-gradient(#2A2050,#1C1636)}
#mPanou .colt{display:none}
#magazin.dulap #mPanou .colt{display:block;z-index:2}
#magazin.dulap #mPanou{background:linear-gradient(#241E3C,#161325)}
.obiect canvas{left:8px;top:8px;width:220px;height:220px}
#magazin.dulap .obiect{border-color:#8A8070}
.fTile i{position:absolute;left:0;right:0;top:12px;height:136px;background:center/contain no-repeat}
#fNit{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 244 90'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E8C47A'/%3E%3Cstop offset='1' stop-color='%23946A2C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 62 10 46h52L78 16 96 4h52l18 12 16 30h52l10 16v28H0z' fill='url(%23g)' stroke='%234A2F10' stroke-width='3'/%3E%3Ccircle cx='122' cy='36' r='15' fill='%231A1228'/%3E%3Cpath d='M112 42l-8 34h36l-8-34z' fill='%231A1228'/%3E%3C/svg%3E") center/contain no-repeat;clip-path:none}
#fXp i{background:url(ui/i_xp.png) center/contain no-repeat}
#pStat i{position:absolute;left:0;right:0;top:12px;height:118px;background:center/contain no-repeat}
#pReal i.pi{position:absolute;left:26px;top:18px;width:180px;height:132px;background:center/contain no-repeat}
#pRang img{width:66px;height:42px;object-fit:contain}
#sPanou{border:12px solid #3A3F8E;box-shadow:0 0 0 2px #1E2258,0 0 26px #1BDDEB66,inset 0 0 0 2px #5A60B8}
#sCufar{left:340px;top:118px;width:270px;height:172px}
#sChip{border:0;background:linear-gradient(#E8C47A,#8C6228);padding:6px;box-sizing:border-box}
#sChip span{display:grid;place-items:center;width:100%;height:100%;clip-path:polygon(40px 0,calc(100% - 40px) 0,100% 42%,100% 58%,calc(100% - 40px) 100%,40px 100%,0 58%,0 42%);background:linear-gradient(#2A2353,#17132B);filter:none}
#sChip b{font:400 96px var(--titlu);background:linear-gradient(#FFF3A8,#FFD238 54%,#F49F0C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5A300C)}
.comut{font-size:0;color:transparent}
#sCal{-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M3 4l12 12L27 4' fill='none' stroke='%23F6F2CF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 26px center/34px no-repeat,linear-gradient(#2A2353,#1C1838)}
#sVol{top:96px}
#bDes,#bAtac{background:center/100% no-repeat;border:0;box-shadow:0 6px 10px #0008}
#bDes{background-image:url(ui/b_cufar.png)}
#bAtac{background-image:url(ui/b_tinta.png)}
#bDes svg,#bAtac svg,#atacBila{display:none}
#bSuper{border:calc(7*var(--u)) solid #E0B04A;background:radial-gradient(circle at 50% 36%,#5A3A1E,#2E1C10);box-shadow:0 0 0 calc(2*var(--u)) #4A2E10,0 calc(6*var(--u)) calc(10*var(--u)) #0009}
#bSuper.sprint{background:url(ui/b_fulger.png) center/100% no-repeat;border:0;box-shadow:0 6px 10px #0008}
#bSuper.sprint svg{display:none}
#pCuf::before{background:url(ui/h_cufar.png) center/contain no-repeat}
#pDia svg{display:none}
#pDia::before{content:'';width:calc(58*var(--u));height:calc(50*var(--u));background:url(ui/h_dia.png) center/contain no-repeat}
#stick{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='%23ffffffb0'%3E%3Cpath d='M120 14l12 18h-24zM120 226l-12-18h24zM14 120l18-12v24zM226 120l-18 12v-24z'/%3E%3C/svg%3E") center/100% no-repeat,radial-gradient(#ffffff10,#ffffff22 70%,#ffffff40)}
.eti s{display:none}
.eti u{display:none}
.eti b{height:calc(16*var(--u));margin:0 calc(6*var(--u));border:calc(2*var(--u)) solid #0a0a14;border-radius:calc(8*var(--u));background:#0a0a14;overflow:hidden;box-sizing:border-box}
.eti b em{display:none}
/* Paznicul are armura deasupra vietii, peste cap */
.eti.boss{width:calc(190*var(--u));margin-left:calc(-95*var(--u))}
.eti.boss s{display:block;height:auto;color:#ffc98a;font-size:calc(17*var(--u));margin-bottom:calc(3*var(--u))}
.eti.boss b{height:calc(14*var(--u));margin-bottom:calc(3*var(--u))}
.eti.boss b.ar i{background:linear-gradient(#e4ecff,#6f86cc)}
/* 13.11 armura scutului de pe spate: bara subtire deasupra vietii */
.eti b.ar{height:calc(10*var(--u));margin-bottom:calc(2*var(--u))}
.eti b.ar i{background:linear-gradient(#e4ecff,#6f86cc)}
.eti.eu b i{background:linear-gradient(#9CFF7A,#3FC82E)}

/* in scene, butoanele stau exact unde spun coordonatele */
.scn>.bAur,.scn>.bInapoi{position:absolute}

.bt:disabled{filter:brightness(.78)}

#bSchimba{--sb:clamp(60px,calc(130*var(--u)),86px);left:calc(30*var(--u) + (242*var(--u) - var(--sb))/2);bottom:calc(290*var(--u))}

/* puterile au nume de lungimi diferite: pastila creste in jurul mijlocului si textul ramane pe un rand */
#lPutere{left:470px;width:auto;min-width:240px;padding:0 28px;white-space:nowrap;transform:translateX(-50%)}
body:not(.port) #lPutere{left:836px}

/* deschiderea cufarului cu animalute */
/* 09.11 (bro: „cand apas pe cufar lumineaza ecranul”): Chrome pe Android coloreaza tot ce atingi; fereastra cufarului acopera ecranul */
*{-webkit-tap-highlight-color:transparent}
#dezv{z-index:40;background:radial-gradient(ellipse at center,#120b2c1a,#090617ba),url(ui/f_dezv.jpg) center/cover #120b2c;touch-action:none;user-select:none;-webkit-user-select:none}
#dezv.ascuns{display:none}
#dezv .scn{cursor:pointer}
#dzRaze,#dzAura,#dzAura2{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;opacity:0}
#dzRaze{width:1500px;height:1500px;margin:-790px 0 0 -750px;background:repeating-conic-gradient(from 0deg,var(--l) 0 5deg,#0000 11deg 19deg,var(--l) 25deg 27deg,#0000 33deg 40deg);-webkit-mask:radial-gradient(closest-side,#000 12%,#0000 72%);mask:radial-gradient(closest-side,#000 12%,#0000 72%);animation:dzRoata 46s linear infinite}
#dzAura{width:1000px;height:1000px;margin:-540px 0 0 -500px;background:radial-gradient(closest-side,#FFD27A90,#FFB34A30 46%,#0000)}
#dzAura2{width:1120px;height:1120px;margin:-620px 0 0 -560px;background:radial-gradient(closest-side,color-mix(in srgb,var(--l) 85%,#0000),color-mix(in srgb,var(--l) 34%,#0000) 38%,color-mix(in srgb,var(--l) 9%,#0000) 68%,#0000)}
@keyframes dzRoata{to{transform:rotate(360deg)}}
#dzUmbra{position:absolute;left:50%;top:712px;width:600px;height:70px;margin-left:-300px;border-radius:50%;background:radial-gradient(closest-side,#000a,#0000);transition:opacity .5s}
#dzCufar{position:absolute;left:50%;top:150px;width:680px;height:680px;margin-left:-340px;background:url(ui/cufar_cadre.webp) 0 0/400% 300% no-repeat;transform-origin:50% 88%;transition:opacity .45s,filter .5s;will-change:transform}
#dzPet{position:absolute;left:50%;top:92px;width:500px;height:500px;margin-left:-250px;opacity:0;will-change:transform}
#dzPoza{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(1)}
#dzPet.umbra #dzPoza{filter:brightness(0) drop-shadow(0 0 16px var(--l)) drop-shadow(0 0 3px #fff6)}
#dzPet.lumina #dzPoza{filter:brightness(1) drop-shadow(0 0 10px color-mix(in srgb,var(--l) 55%,#0000));transition:filter 1s ease-in}
#dzLuciu{position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,#0000 40%,#fffb 50%,#0000 60%) 120% 0/300% 100% no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
#dzPet.lumina #dzLuciu{opacity:1;animation:dzLuciu 1.3s .25s ease-in-out both}
@keyframes dzLuciu{from{background-position:120% 0}to{background-position:-20% 0}}
#dzFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#dzBlit{position:absolute;inset:0;background:radial-gradient(26% 30% at 50% 62%,#FFF3D0,#FFE2A060 45%,#0000);pointer-events:none;opacity:0}   /* doar lumina din gura cufarului, nu tot ecranul */
#dzHint{position:absolute;left:0;right:0;top:64px;margin:0;text-align:center;font:400 64px var(--titlu);color:var(--crem);text-shadow:0 4px 0 #0008;animation:dzPuls 1s ease-in-out infinite;transition:opacity .3s}
#dzHint.stins{opacity:0;animation:none}
@keyframes dzPuls{50%{transform:scale(1.06)}}
#dzBara{position:absolute;left:50%;top:826px;width:520px;height:22px;margin-left:-260px;border-radius:12px;background:#0007;border:2px solid #E8C47A80;overflow:hidden;transition:opacity .25s}
#dzBara.stins{opacity:0}
#dzBara i{display:block;width:0;height:100%;background:linear-gradient(90deg,#FFD23F,#FFF3B0);box-shadow:0 0 12px #FFD23F;transition:width .09s}
#dzInfo{position:absolute;left:0;right:0;top:606px;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s;pointer-events:none}
#dzInfo.vazut{opacity:1;transform:none}
#dzNume{font:400 78px/1 var(--titlu);color:var(--crem);text-shadow:0 0 20px var(--l),0 4px 0 #0009}
#dzText{margin:10px 0 0;font:800 34px var(--corp);color:#E6DFFF}
#dzBut{position:absolute;left:0;right:0;top:770px;display:flex;justify-content:center;gap:26px}
#dzBut.ascuns{display:none}
#dzBut button{width:370px;height:104px;font-size:42px}
#dzBut button.ascuns{display:none}
#dzBut .ico{width:44px;height:44px}
#dzBut span{display:inline-flex;align-items:center;gap:6px}
#mGrila .obiect .pret{padding:0 12px;white-space:nowrap}

/* ---------- 07.11 (bro: „ferestrele sa fie exact ca meniul principal”): aceleasi ferestre si pe verticala ----------
   Pe verticala fiecare ecran e o scena de 941x1672 (.scn.port), ca lobby-ul si Profilul: Inapoi sus stanga,
   titlul centrat dedesubt (ca la Profil), banii intr-o pastila centrata, panourile pe toata latimea, margini 30-42 px.
   Pe orizontala nu se schimba nimic. */
.port #petInapoi,.port #iInapoi,.port #mInapoi,.port #cumInapoi,.port #cInchide{left:24px;top:28px;width:96px;height:92px}
.port #petTitlu,.port #iTitlu,.port #mTitlu,.port #cumTitlu,.port #cTitlu,#magazin.dulap .port #mTitlu{left:0;top:70px;width:100%;text-align:center;font-size:96px;white-space:nowrap}
.port>.titBara,.port #mRomb,.port #cumRomb,#magazin.dulap .port #mTBara{display:none}
.port #tPeti{left:274px;right:auto;top:196px;width:392px;height:76px;box-sizing:border-box;justify-content:center;border-radius:40px;background:linear-gradient(#262047,#171330);border:3px solid #C89A52}
.port #mBani{left:0;right:0;top:190px;justify-content:center}

/* animalute: doua coloane, dragonul pe tot randul de jos */

/* iteme: grila sus, statusul dedesubt pe doua coloane */
.port #iGrila{left:42px;top:290px;width:856px;height:968px}
.port #iGrila button{height:236px}
.port #iGrila b{font-size:24px;line-height:1.05}
.port #iGrila span{font-size:18px;line-height:1.12}
.port #iGrila img{width:80px;height:80px}
.port #iStat{left:42px;top:1276px;width:856px;height:360px;overflow-y:auto;scrollbar-width:none;columns:2;column-gap:30px}
.port #iStat::-webkit-scrollbar{display:none}
.port #iStat h3,.port #iStat table{break-inside:avoid}

/* magazin: eroul sus, panoul jos pe toata latimea; detaliile pe doua randuri */
.port #mScena{left:185px;top:262px;width:570px;height:440px}
.port #mRot{left:700px;top:618px}
.port #mSchimba{left:255px;top:646px}
.port #mPanou{left:30px;top:736px;width:881px;height:914px}
.port #mGrila{height:auto;bottom:278px}
.port #magazin.piese #mGrila,#magazin.piese .port #mGrila{top:164px;height:auto;bottom:278px}
.port .obiect canvas{left:8px;top:8px;width:200px;height:200px}
.port .obiect img{width:190px;height:190px}
.port .obiect .nume{left:222px;font-size:32px}
.port .obiect .pret{left:222px;min-width:150px}
.port #mDetalii{height:244px}
.port #mInfo{left:40px;top:22px}
.port #mAct2{right:24px;top:30px}
.port #mAct{left:24px;right:24px;top:118px;width:auto;height:106px}
#magazin.dulap .port #mPanou{left:30px;top:736px;width:881px;height:914px}
#magazin.dulap .port #mPutere{left:70px}
#magazin.dulap .port #mGrila{top:204px;bottom:auto;height:446px}
#magazin.dulap .port #mDetalii{left:46px;right:46px;bottom:44px;height:112px}

/* cum se joaca: poza sus, panoul cu text jos */
.port #cumNr{left:384px;right:auto;top:190px}
.port #cumArta{left:38px;top:282px;width:865px;height:520px}
.port #cumPanou{left:42px;top:930px;width:856px;height:700px}
.port #cumT{left:42px;top:972px;width:856px}
.port #cumLin{left:242px;top:1084px}
.port #cumText{left:92px;top:1122px;width:756px}
.port #cumUrm{left:198px;top:1440px}

/* cu prietenii: cartea cu codul sus, lista de jucatori jos */
.port #cCard,.port #cIntra{left:150px;top:300px}
.port #cTip{left:208px;top:268px}
.port #cCodE,.port #cCod{left:150px}
.port #cCodE{top:368px}
.port #cCod{top:402px}
.port #cCopiaza{left:318px;top:524px}
.port #cPanou{left:42px;top:660px;width:856px;height:960px}
.port #cAntet{left:50px;top:662px;width:840px}
.port #cLista{left:84px;top:790px;width:772px;height:500px}
.port #cStare{left:42px;top:1310px;width:856px}
.port #cStart{left:89px;top:1356px}

/* deschiderea cufarului: tot ce era in banda de 941 coboara in mijlocul ecranului; canvasul cu efecte ramane 1672x941, centrat */
#dezv .port #dzFx{inset:auto;left:-365.5px;top:365.5px;width:1672px;height:941px}
#dezv .port #dzHint{top:300px}
#dezv .port #dzCufar{top:515px}
#dezv .port #dzPet{top:457px}
#dezv .port #dzUmbra{top:1077px}
#dezv .port #dzBara{top:1191px}
#dezv .port #dzInfo{top:1000px}
#dezv .port #dzBut{top:1240px}

/* Profilul pe orizontala (07.11): cartea si cifrele in stanga, realizarile in dreapta, Inapoi + titlu ca la celelalte ferestre */
.scn:not(.port) #pInapoi{left:34px;top:14px;width:104px;height:78px}
.scn:not(.port) #pTitlu{left:170px;top:14px;width:auto;text-align:left;font-size:70px}
.scn:not(.port) #pCard{left:34px;top:116px;width:800px;height:420px}
.scn:not(.port) #pAvR{left:90px;top:146px}
.scn:not(.port) #pNumeIn{left:388px;top:144px;width:420px}
.scn:not(.port) #pRang{left:390px;top:232px}
.scn:not(.port) #pNivelE{left:388px;top:298px}
.scn:not(.port) #pBara,.scn:not(.port) #pXpT{left:80px;top:438px;width:708px}
.scn:not(.port) #pStat{left:34px;top:566px;width:800px;height:330px}
.scn:not(.port) #pTitluR{left:870px;top:110px;width:768px;font-size:64px}
.scn:not(.port) #pLinii{left:920px;top:150px;width:668px}
.scn:not(.port) #pReal{left:870px;top:200px;width:768px;height:706px}

/* pe telefoanele mai lungi decat 16:9 bara de sus merge pana la marginile ecranului, nu doar ale scenei */
.scn:not(.port)>.titBara{left:-700px;width:calc(100% + 1400px)}

/* 07.11 ecran plin pe telefon: zona sigura (decupajul camerei) si latimea in plus pe telefoanele mai lungi decat 16:9.
   --dx vine din meniu.js (potriveste): piesele din dreapta se muta cu --dx, cele din mijloc cu jumatate, cele late se intind. */
:root{--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px)}
.scn:not(.port) #sold,.scn:not(.port) #bSetari,.scn:not(.port) #bMag,.scn:not(.port) #bDulap,.scn:not(.port) #bIteme,
.scn:not(.port) #lMod,.scn:not(.port) #bStart,.scn:not(.port) #stare,.scn:not(.port) #lAlege,
.scn:not(.port) #mPanou,.scn:not(.port) #iStat,
.scn:not(.port) #cumPanou,.scn:not(.port) #cumT,.scn:not(.port) #cumLin,.scn:not(.port) #cumText,.scn:not(.port) #cumUrm,
.scn:not(.port) #cPanou,.scn:not(.port) #cAntet,.scn:not(.port) #cLista,.scn:not(.port) #cStart,.scn:not(.port) #cStare,
.scn:not(.port) #pTitluR,.scn:not(.port) #pLinii,.scn:not(.port) #pReal,.scn:not(.port) #fScena{margin-left:var(--dx,0px)}
.scn:not(.port) #lEN,.scn:not(.port) #lPutere{margin-left:calc(var(--dx,0px) / 2)}
.scn:not(.port) #iGrila{width:calc(1130px + var(--dx,0px))}
.scn:not(.port) #petFisa{width:calc(862px + var(--dx,0px))}
.scn:not(.port) #cumArta{width:calc(960px + var(--dx,0px))}
#dezv .scn:not(.port) #dzFx{inset:auto;left:calc(var(--dx,0px) / 2);top:0;width:1672px;height:941px}
/* in meci: controalele si harta mica stau in zona sigura, etichetele de deasupra jucatorilor raman pe ecranul intreg */
#hud{left:var(--sa-l);right:var(--sa-r)}
#etichete{left:calc(-1 * var(--sa-l));right:calc(-1 * var(--sa-r))}
body:not(.port) #lModS{font-size:24px}

#pCheie img{display:block;width:calc(62*var(--u));height:calc(55*var(--u));object-fit:contain}

/* 07.11 vitrina 3D din Iteme: itemul ales se invarte (modele/Ech_<id>), numele si bonusul dedesubt; statusul trece sub ea */
#iVit{left:1182px;top:108px;width:456px;height:380px;box-sizing:border-box;border-radius:26px;background:radial-gradient(70% 70% at 50% 42%,#3A2F6A,#191430 72%)}
#iVit3d{position:absolute;left:10px;right:10px;top:10px;bottom:98px}
#iVit3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#iVitN{position:absolute;left:0;right:0;bottom:54px;text-align:center;font:400 34px var(--titlu)}
#iVitT{position:absolute;left:16px;right:16px;bottom:12px;text-align:center;font:700 20px/1.15 var(--corp);color:#D9D3F5}
#iStat{top:504px;height:410px;overflow-y:auto;scrollbar-width:none}
#iGrila button.blocat{cursor:pointer}
#iGrila button.vazut{outline:4px solid #FFD23F;outline-offset:-4px}
.scn:not(.port) #iVit{margin-left:var(--dx,0px)}
.port #iVit{left:42px;top:290px;width:856px;height:340px}
.port #iGrila{top:646px;height:780px}
.port #iGrila button{height:200px}
.port #iStat{top:1442px;height:196px}

/* ---------- Drumul Comorii (Battle Pass) 09.11 ---------- */
[data-f="pass"].fundal{background-image:url(ui/f_pass.jpg)}
#psInapoi{left:34px;top:14px}
#psTitlu{left:170px;top:14px;font-size:70px}
#psBani{right:34px;top:18px;left:auto;display:flex;align-items:center;gap:10px;font:400 40px var(--titlu);color:var(--crem)}
#psBani i{width:42px;height:42px;background:center/contain no-repeat}
#psCap{left:34px;top:112px;width:1604px;height:124px;border-radius:26px;display:flex;align-items:center;gap:26px;padding:0 22px;box-sizing:border-box}
#psNiv{flex:none;width:112px;height:112px;margin-top:-4px;display:grid;place-items:center;align-content:center;border-radius:50%;background:radial-gradient(#3b2f78,#1b1636);border:4px solid var(--aur2);box-shadow:0 0 18px #FDCA1766,inset 0 0 14px #0008;color:var(--crem)}
#psNiv small{font:800 18px var(--corp);opacity:.8;margin-bottom:-6px}
#psNiv b{font:400 54px/1 var(--titlu);color:var(--aur1);text-shadow:0 3px 0 #4A2A10}
#psXpBox{flex:1;display:flex;flex-direction:column;gap:8px;color:var(--crem)}
#psXpT{font:400 32px var(--titlu)}
#psXp{height:26px;border-radius:14px;background:#0d0a1e;border:2px solid #7E6A58;overflow:hidden}
#psXp i{display:block;height:100%;width:0;border-radius:12px;background:linear-gradient(#FFF0A0,var(--aur2) 55%,var(--aur3));box-shadow:0 0 12px #FDCA17aa;transition:width .5s}
#psTimp{font:700 22px var(--corp);color:#D9D3F5}
#psPrem{flex:none;width:420px;height:96px;font-size:36px;gap:10px}
#psPrem img{width:58px;height:58px;object-fit:contain}
#psPrem span{display:inline-flex;align-items:center;gap:4px;margin-left:8px}
#psPrem span img{width:40px;height:40px}
#psPrem.activ{filter:saturate(.75) drop-shadow(0 7px 0 #0000006b);font-size:28px}
#psDrum{left:34px;top:252px;width:1604px;height:432px;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 6px 12px;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#C89A52 #0000;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.psEt{position:sticky;left:-6px;z-index:2;flex:0 0 96px;display:grid;grid-template-rows:1fr 54px 1fr;gap:8px;background:linear-gradient(90deg,#120e26 80%,#120e2600);margin-left:-6px;padding-left:6px}
.psEt b{display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font:400 32px var(--titlu);color:var(--crem);border-radius:18px;background:#211B3E;border:3px solid #7E6A58}
.psEt b.pr{color:#2a1505;background:linear-gradient(90deg,var(--aur1),var(--aur3));border-color:#fff3b0}
.psCol{flex:0 0 152px;display:grid;grid-template-rows:1fr 54px 1fr;gap:8px}
.psNr{display:grid;place-items:center;font:400 30px var(--titlu);font-style:normal;color:#9d93c9;border-radius:27px;background:#1b1636;border:3px solid #4a3f74;position:relative}
.psCol.atins .psNr{color:#2a1505;background:linear-gradient(var(--aur1),var(--aur3));border-color:#fff3b0}
.psCol.urm .psNr{color:var(--crem);border-color:var(--aur2);box-shadow:0 0 12px #FDCA1788}
.psR{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;border-radius:20px;border:3px solid #5a4d86;background:linear-gradient(#2b2458,#1b1638);color:var(--crem);overflow:hidden;box-shadow:inset 0 -18px 30px -18px var(--rc,#0000)}
.psR.p{background:linear-gradient(#3d2a12,#1f1508);border-color:#8a6a2a}
.psR img,.psR canvas{width:96px;height:96px;object-fit:contain;pointer-events:none}
.psR b{font:800 21px/1.1 var(--corp);text-align:center;max-width:136px;pointer-events:none}
.psR .plus{display:flex;align-items:center;gap:2px;font:800 19px var(--corp);font-style:normal;color:var(--aur1);pointer-events:none}
.psR .plus img,.psR .plus canvas{width:34px;height:34px}
.psR.gata{border-color:var(--aur1);box-shadow:0 0 0 2px #fff3b088,0 0 22px #FDCA17aa;animation:psPuls 1.2s ease-in-out infinite}
.psR.gata::after{content:"Ia";position:absolute;top:6px;right:8px;font:400 22px var(--titlu);color:#2a1505;background:var(--aur1);border-radius:10px;padding:0 9px}
.psR.luat{opacity:.55}
.psR.luat .bifa{position:absolute;inset:0;display:grid;place-items:center;font:900 70px var(--corp);color:#3df28a;text-shadow:0 3px 0 #0008;font-style:normal}
.psR.blocat:not(.p){filter:saturate(.6) brightness(.8)}
.psR.p.blocat{filter:saturate(.7) brightness(.72)}
.psR .lacat{position:absolute;top:6px;right:8px;width:30px;height:34px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M6 12V8a6 6 0 0 1 12 0v4' fill='none' stroke='%23FDCA17' stroke-width='3'/%3E%3Crect x='3' y='12' width='18' height='14' rx='3' fill='%23FDCA17' stroke='%234A2A10' stroke-width='1.5'/%3E%3C/svg%3E")}
@keyframes psPuls{50%{transform:translateY(-3px)}}
#psJos{left:34px;top:700px;width:1604px;height:222px;display:grid;grid-template-columns:1fr 330px 300px;gap:16px}
#psMis{border-radius:24px;padding:10px 18px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;color:var(--crem)}
#psMis h3{margin:0;font:400 30px var(--titlu);color:var(--aur1)}
.psM{display:grid;grid-template-columns:1fr 330px 150px;align-items:center;gap:14px;font:800 24px var(--corp)}
.psMb{position:relative;height:30px;border-radius:15px;background:#0d0a1e;border:2px solid #4a3f74;overflow:hidden}
.psMb i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#5ff7ff,#16b8c8)}
.psMb em{position:absolute;inset:0;display:grid;place-items:center;font:800 20px var(--corp);font-style:normal;text-shadow:0 1px 2px #000}
.psM button{height:46px;font:400 24px var(--titlu);border-radius:14px}
.psM button:disabled{opacity:.45}
.psM.gata button{border-color:var(--aur1);box-shadow:0 0 14px #FDCA17aa}
.psM.luat{opacity:.6}
#psBonus{border-radius:24px;display:flex;align-items:center;gap:12px;padding:0 14px;color:var(--crem)}
#psBonus img{width:120px;height:120px;object-fit:contain}
#psBonus b{display:block;font:400 32px var(--titlu)}
#psBonus span{font:700 22px var(--corp);color:#D9D3F5}
#psTot{height:150px;align-self:center;font-size:56px}
#psTot:disabled{filter:grayscale(.8) brightness(.7)}
#psMsg{left:50%;top:600px;transform:translateX(-50%);margin:0;padding:14px 30px;border-radius:20px;background:#1b1636ee;border:3px solid var(--aur2);font:400 34px var(--titlu);color:var(--crem);white-space:nowrap;z-index:5;pointer-events:none}
#psMsg.ascuns{display:none}
.punct{position:absolute;top:-8px;right:-8px;min-width:34px;height:34px;padding:0 6px;box-sizing:border-box;border-radius:17px;background:#ff3b5c;border:3px solid #fff;color:#fff;font:900 20px/28px var(--corp);font-style:normal;text-align:center;box-shadow:0 2px 6px #0008}
.punct.ascuns{display:none}
.scn:not(.port) #psCap,.scn:not(.port) #psDrum,.scn:not(.port) #psJos{width:calc(1604px + var(--dx,0px))}
.port #psInapoi{left:24px;top:28px;width:96px;height:92px}
.port #psTitlu{left:0;top:70px;width:100%;text-align:center;font-size:96px;white-space:nowrap}
.port #psBani{left:274px;right:auto;top:196px;width:392px;height:76px;box-sizing:border-box;justify-content:center;border-radius:40px;background:linear-gradient(#262047,#171330);border:3px solid #C89A52}
.port #psCap{left:30px;top:290px;width:880px;height:230px;flex-wrap:wrap;gap:12px 18px;padding:14px 18px}
.port #psXpBox{flex:1 1 600px}
.port #psPrem{width:100%;height:84px}
.port #psDrum{left:30px;top:540px;width:880px;height:500px}
.port #psJos{left:30px;top:1060px;width:880px;height:560px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 150px}
.port #psMis{grid-column:1/-1}
.port .psM{grid-template-columns:1fr 200px 130px;font-size:22px}
.port #psMsg{top:980px}
#lNav button{position:relative}

/* butonul Pass: langa nivel, fara fundal (09.11, bro) */
#bPass{left:30px;top:146px;width:132px;height:132px;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;filter:drop-shadow(0 4px 4px #000a)}
#bPass img{width:96px;height:96px;object-fit:contain;pointer-events:none}
#bPass b{margin-top:-10px;font:400 32px var(--titlu);color:var(--crem);-webkit-text-stroke:1.5px #24140A;text-shadow:0 3px 0 #24140A;pointer-events:none}
#bPass .punct{top:4px;right:6px}
body:not(.port) #bPass{left:396px;top:8px}

/* 09.11: eroul sta pe o platforma 3D adevarata → cutia scenei se lateste si coboara pana jos (camera din meniu.js pastreaza eroul pe loc) */
#lViata{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#lErou{left:0;top:318px;width:941px;height:760px}
body:not(.port) #lErou{left:calc(186px + var(--dx,0px)/2);top:59px;width:1300px;height:882px}
#lProfil,#bPass,#sold{z-index:3}

/* 09.11: pe orizontala panza eroului acopera toata scena (fundalul din Blender are aceeasi camera); piesele de dinainte raman deasupra */
body:not(.port) #lErou{left:0;top:0;width:calc(1672px + var(--dx,0px));height:941px}
#lProfil,#bPass,#sold,#bSetari,#lNume{z-index:3}
body:not(.port) #ecran>.fundal::after{background:linear-gradient(#07041c80,#07041c00 18%,#07041c00 78%,#07041c70)}

/* 09.11: lumina din usa de pe cer umple ecranul cand pornesti meciul */
#lAlb{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;background:radial-gradient(circle at 65% 21%,#fffef4,#fff4d6 40%,#ffe9b8)}

/* ---------- 11.11 inventar v3 (bro: „gandeste-te ca e pe telefon, butoanele mai mari si vizibile”; cercetari/2026-11-11_inventar_mobil.md) ----------
   Pe un telefon de 915x412 (si 412x915) scena se micsoreaza la ~0,44: tot ce se apasa are minim ~110 px aici (~48 puncte pe ecran,
   Apple 44 pt / Material 48 dp), iar scrisul minim ~25 px aici (~11 puncte). Stanga: eroul 3D cu locurile in jur, bonus, seturi.
   Dreapta: tab-uri cu iconita, sacul (Greu → Usor; raritatea si prin semn ● ◆ ★), fisa cu comparatia si un singur buton mare. */
#inventar{--uL:#9fe07a;--mL:#59c7ff;--gL:#ff9d3c}
#invInapoi{left:30px;top:10px;width:124px;height:100px}
#invTitlu{left:176px;top:20px;font-size:68px}
#invErouSel{left:500px;top:12px;height:96px;display:flex;align-items:center;gap:12px}
#invErouSel b{min-width:290px;height:88px;box-sizing:border-box;display:grid;place-items:center;padding:0 24px;border-radius:44px;background:linear-gradient(#2A2353,#17132B);border:3px solid var(--bronz);font:400 42px var(--titlu)}
#invErouSel button{width:104px;height:92px;border-radius:24px;border:3px solid var(--bronz);background:linear-gradient(#3B3070,#1B1938);color:var(--crem);font:900 62px/1 var(--corp);box-shadow:0 5px 0 #0000006b}
#invBest{left:1238px;top:12px;width:400px;height:96px;font-size:38px;--t:20px;z-index:3}
#invPapusa{left:30px;top:122px;width:604px;height:804px;box-sizing:border-box;border-radius:28px;background:radial-gradient(60% 46% at 50% 32%,#3A2F6A,#191430 76%)}
#invErou{position:absolute;left:152px;top:6px;width:300px;height:400px}
#invErou canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#invLocuri .loc{position:absolute;width:150px;height:170px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;border-radius:24px;border:4px solid #6E5E8E;background:linear-gradient(#2B2450,#1B1734);color:var(--crem);text-align:center;box-shadow:0 5px 0 #0000006b}
#invLocuri .loc img{width:96px;height:96px;object-fit:contain;pointer-events:none}
#invLocuri .loc b{font:400 26px/1.05 var(--titlu)}
#invLocuri .loc small{font:800 21px/1.1 var(--corp);color:#C8C0EC}
#invLocuri .loc.gol{border-style:dashed;border-color:#5A4E86}
#invLocuri .loc.gol img{opacity:.25;filter:grayscale(1)}
#invLocuri .loc.gol b{color:#B5ACDD}
#invLocuri .loc.ales{box-shadow:0 0 0 5px #FDE63B,0 0 22px #FDE63BB0}
#invLocuri .l-arma{left:14px;top:18px}
#invLocuri .l-armura{left:14px;top:206px}
#invLocuri .l-talisman{left:434px;top:18px}
#invLocuri .l-cizme{left:434px;top:206px}
#invLocuri .l-pet{left:227px;top:396px}
#inventar .rar-Usor{border-color:var(--uL);background:linear-gradient(#24402A,#16251B)}
#inventar .rar-Mediu{border-color:var(--mL);background:linear-gradient(#1C3550,#121F31)}
#inventar .rar-Greu{border-color:var(--gL);background:linear-gradient(#4A2E16,#28180C)}
#inventar .rar-pet{border-color:#E7B3FF;background:linear-gradient(#3B2557,#21152F)}
#inventar .semn{position:absolute;left:9px;top:6px;font:900 28px/1 var(--corp);text-shadow:0 2px 0 #000;font-style:normal}
#inventar .rar-Usor .semn,#inventar .r-Usor{color:var(--uL)}
#inventar .rar-Mediu .semn,#inventar .r-Mediu{color:var(--mL)}
#inventar .rar-Greu .semn,#inventar .r-Greu{color:var(--gL)}
#inventar .rar-pet .semn,#inventar .r-pet{color:#E7B3FF}
#invBonus{position:absolute;left:14px;top:580px;width:576px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#invBonus span{height:62px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:16px;background:#120F24;border:3px solid #3A3160;font:800 26px var(--corp);color:#E2DCFA;white-space:nowrap}
#invBonus span img{width:40px;height:40px;object-fit:contain}
#invBonus span b{margin-left:auto;font-size:28px;color:#7CF29A}
#invBonus span.zero b{color:#9C93C4}
#invSeturi{position:absolute;left:14px;top:716px;width:576px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#invSeturi button{height:74px;box-sizing:border-box;padding:6px 10px;border-radius:16px;background:#120F24;border:3px solid #3A3160;color:#E2DCFA;text-align:left;font:800 24px/1.1 var(--corp);box-shadow:0 4px 0 #0000006b}
#invSeturi button.ales{box-shadow:0 0 0 5px #FDE63B,0 0 18px #FDE63BB0}
#invSeturi button em{float:right;font-style:normal}
#invSeturi u{display:block;height:10px;margin-top:8px;border-radius:5px;background:#2A2448;text-decoration:none;overflow:hidden}
#invSeturi u s{display:block;height:100%;border-radius:5px}
#invDreapta{left:650px;top:122px;width:988px;height:804px;box-sizing:border-box;border-radius:28px}
#invTaburi{position:absolute;left:14px;top:12px;width:954px;height:108px;display:flex;gap:8px}
#invTaburi button{position:relative;flex:1;min-width:0;height:108px;padding:4px 2px 0;border-radius:20px;border:4px solid #4A4070;background:linear-gradient(#2B2450,#1B1734);color:#D0C8F0;font:800 23px/1 var(--corp);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 0 #0000006b}
#invTaburi button img{width:52px;height:52px;object-fit:contain;pointer-events:none}
#invTaburi button i{position:absolute;right:6px;top:4px;min-width:30px;height:30px;box-sizing:border-box;padding:0 6px;border-radius:15px;background:#0E0B1E;font:900 20px/30px var(--corp);font-style:normal;color:#C8C0EC;text-align:center}
#invTaburi button[aria-selected="true"]{border-color:var(--aur2);color:#FFF6D6;background:linear-gradient(#5A4520,#2A2010);box-shadow:0 0 14px #FDCA17A0}
#invSac{position:absolute;left:14px;top:132px;width:954px;height:318px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:153px;gap:12px;overflow-y:auto;scrollbar-width:none;align-content:start}
#invSac::-webkit-scrollbar{display:none}
#invSac .carte{position:relative;display:flex;align-items:center;justify-content:center;border-radius:22px;border:4px solid #6E5E8E;padding:0;color:var(--crem);box-shadow:0 4px 0 #0000006b}
#invSac .carte img{width:104px;height:104px;object-fit:contain;pointer-events:none}
#invSac .carte small{position:absolute;right:10px;bottom:6px;font:900 28px var(--corp);text-shadow:0 2px 0 #000}
#invSac .carte em{position:absolute;right:6px;top:6px;font:900 20px var(--corp);font-style:normal;color:#0B1F2A;background:var(--cyan);border-radius:10px;padding:2px 8px}
#invSac .carte.blocat{opacity:.5}
#invSac .carte.ales{box-shadow:0 0 0 5px #FDE63B,0 0 22px #FDE63BB0}
#invSac i.gol{border-radius:22px;background:#120F24;border:3px dashed #2E2850}
#invSac p{grid-column:1/-1;margin:30px 0 0;text-align:center;font:800 30px/1.35 var(--corp);color:#D0C8F0}
#invFisa{position:absolute;left:14px;top:462px;width:954px;height:326px;box-sizing:border-box;padding:16px 18px;border-radius:24px;background:#120F24;border:3px solid #3A3160;display:grid;grid-template-columns:210px 1fr 330px;gap:20px;align-items:center}
#invFisa .poza{position:relative;width:210px;height:210px;box-sizing:border-box;border-radius:26px;border:4px solid #6E5E8E;display:grid;place-items:center}
#invFisa .poza img{width:160px;height:160px;object-fit:contain}
#invFisa h4{margin:0;font:400 46px/1.05 var(--titlu)}
#invFisa .tip{margin:6px 0 10px;font:800 26px var(--corp);color:#B5ACDD}
#invFisa table{border-collapse:collapse;font:800 25px var(--corp);color:#E2DCFA}
#invFisa th{padding:0 14px 4px 0;text-align:left;font:800 20px var(--corp);color:#9C93C4}
#invFisa td{padding:3px 14px 3px 0;white-space:nowrap}
#invFisa .sus{color:#7CF29A}
#invFisa .jos{color:#FF7A7A}
#invFisa .egal{color:#9C93C4}
#invFisa .lipsa{display:flex;gap:10px;margin-top:6px}
#invFisa .lipsa img{width:62px;height:62px;object-fit:contain;filter:grayscale(1) brightness(.6)}
#invFisa .act{display:flex;flex-direction:column;align-items:stretch;gap:12px}
#invFisa .act .bAur{position:relative;height:120px;font-size:44px;--t:24px}
#invFisa .act .bAur:disabled{filter:grayscale(1) brightness(.7)}
#invFisa .act span{font:800 22px/1.25 var(--corp);color:#B5ACDD;text-align:center}
#invFisa.gol{display:flex;justify-content:center;text-align:center;font:800 30px/1.35 var(--corp);color:#B5ACDD}
/* vertical: aceleasi marimi de deget, panourile unul sub altul */
.port #invInapoi{left:20px;top:20px;width:124px;height:104px}
.port #invTitlu{left:0;top:52px;width:100%;text-align:center;font-size:92px;white-space:nowrap}
.port #invErouSel{left:26px;top:172px}
.port #invErouSel b{min-width:250px}
.port #invBest{left:556px;top:172px;width:360px;height:96px}
.port #invPapusa{left:26px;top:284px;width:888px;height:704px}
.port #invErou{left:294px;top:6px;width:300px;height:380px}
.port #invLocuri .l-arma{left:28px;top:16px}
.port #invLocuri .l-armura{left:28px;top:200px}
.port #invLocuri .l-talisman{left:710px;top:16px}
.port #invLocuri .l-cizme{left:710px;top:200px}
.port #invLocuri .l-pet{left:369px;top:368px}
.port #invLocuri .loc{height:166px}
.port #invBonus{left:16px;top:550px;width:856px;grid-template-columns:repeat(4,1fr);gap:8px}
.port #invBonus span{height:62px;font-size:23px;padding:0 10px;gap:6px}
.port #invBonus span img{width:34px;height:34px}
.port #invBonus span b{font-size:25px}
.port #invSeturi{left:16px;top:622px;width:856px}
.port #invSeturi button{height:70px}
.port #invDreapta{left:26px;top:1002px;width:888px;height:656px}
.port #invTaburi{left:12px;top:10px;width:864px;height:104px}
.port #invTaburi button{height:104px;font-size:21px}
.port #invTaburi button img{width:46px;height:46px}
.port #invSac{left:12px;top:124px;width:864px;height:282px;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:135px}
.port #invSac .carte img{width:92px;height:92px}
.port #invFisa{left:12px;top:416px;width:864px;height:228px;grid-template-columns:150px 1fr 280px;gap:14px;padding:10px 14px}
.port #invFisa .poza{width:150px;height:150px}
.port #invFisa .poza img{width:114px;height:114px}
.port #invFisa h4{font-size:36px}
.port #invFisa .tip{font-size:23px;margin:4px 0 6px}
.port #invFisa table{font-size:22px}
.port #invFisa .act .bAur{height:110px;font-size:38px}
.port #invFisa .act span{font-size:20px}
/* 11.11 (bro: „pe tot ecranul”): pe telefoanele lungi inventarul umple ecranul. Orizontal: partea din dreapta se intinde cu --dx
   (sacul primeste coloane in plus, fisa se lateste); vertical: sacul se lungeste cu --dy (meniu.js potriveste). */
.scn:not(.port) #invBest{left:calc(1238px + var(--dx,0px))}
.scn:not(.port) #invDreapta{width:calc(988px + var(--dx,0px))}
.scn:not(.port) #invTaburi{width:calc(954px + var(--dx,0px))}
.scn:not(.port) #invSac{width:calc(954px + var(--dx,0px));grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.scn:not(.port) #invFisa{width:calc(954px + var(--dx,0px));grid-template-columns:210px 1fr 360px}
.scn:not(.port) #invErouSel{left:calc(500px + var(--dx,0px)/2)}
.port #invDreapta{height:calc(656px + var(--dy,0px))}
.port #invSac{height:calc(236px + var(--dy,0px))}
.port #invFisa{top:calc(370px + var(--dy,0px));height:276px}

/* 11.11 GRUPA (bro: „sa se poata face grupa, max 4”): fereastra cu codul si membrii, ca fereastra „Cu prietenii”, dar cu butoane
   de telefon (>= 110 px de scena ≈ 48 pt la scara .44). In lobby: nume + nivel deasupra eroilor din grupa, + pe locurile goale. */
#gInchide{left:34px;top:20px}
#gTitlu{left:182px;top:16px;font-size:72px}
#gCard{left:112px;top:160px;width:640px;height:440px;box-sizing:border-box;border-radius:30px;background:#0B1830c8;border:3px solid var(--cyan);box-shadow:0 0 14px #1BDDEB66}
#gTip{left:172px;top:128px;width:524px;height:84px;display:flex;align-items:center;justify-content:center;gap:18px;box-sizing:border-box;font:400 44px var(--titlu);clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,30px 100%,0 50%)}
#gTip svg{width:74px;height:52px;color:var(--cyan)}
#gCodR{left:112px;top:160px;width:640px;height:440px;box-sizing:border-box;padding-top:80px;display:flex;flex-direction:column;align-items:center}
#gCodE{font:900 32px var(--corp)}
#gCod{font:400 124px/1.05 var(--titlu);letter-spacing:4px;color:#FFF9E4;text-shadow:0 5px 0 #0008;user-select:text;-webkit-user-select:text}
#gButCod{display:flex;gap:20px;margin-top:22px}
#gButCod button{height:116px;padding:0 32px;border-radius:30px;background:linear-gradient(#0A2C40,#0B4258);border:3px solid #2AA8C0;color:var(--crem);font:900 36px var(--corp);display:flex;align-items:center;gap:14px}
#gButCod svg{width:46px;height:46px}
#gCopiaza.copiat{border-color:#7CF29A;background:linear-gradient(#0F3A26,#14583A)}
#gIntra{left:112px;top:160px;width:640px;height:440px;box-sizing:border-box;padding:98px 34px 0;display:grid;grid-template-columns:1fr auto;gap:22px;align-content:start}
#gNoua{grid-column:1/-1;height:124px;font-size:54px}
#gCodIn{height:116px;box-sizing:border-box;width:100%;min-width:0;text-align:center;font:400 52px var(--titlu);letter-spacing:8px;color:#fff;background:#0a0720;border:3px solid #54476E;border-radius:22px;user-select:text;-webkit-user-select:text}
#gIntraB{height:116px;padding:0 40px;border-radius:22px;border:3px solid #C89A52;background:linear-gradient(#332963,#1B1938);color:var(--crem);font:400 46px var(--titlu)}
#gPanou{left:826px;top:54px;width:820px;height:854px;box-sizing:border-box;border-radius:24px}
#gAntet{left:834px;top:56px;width:804px;height:102px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 62px;font:400 46px var(--titlu)}
#gLista{left:866px;top:176px;width:730px;height:540px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
#gLista li{flex:none;position:relative;height:126px;box-sizing:border-box;border-radius:30px;background:linear-gradient(#1E2245,#171A38);border:2px solid #3A3F6E;display:flex;align-items:center;padding:0 16px;gap:22px}
#gLista li.lider{border:4px solid #FFD23F;box-shadow:0 0 14px #FFD23F66}
#gLista li.eu{background:linear-gradient(#233064,#1B2350)}
#gLista li.plecat{opacity:.55}
#gLista li.gol{background:#20234Ad0;color:#9A96B8;font-size:34px;justify-content:center;border-style:dashed}
#gLista img{width:100px;height:100px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#2A1C8B;border:4px solid #E8B85A;box-sizing:border-box}
#gLista span{display:flex;flex-direction:column;min-width:0;flex:1}
#gLista b{font:400 42px/1.1 var(--titlu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gLista small{font:900 26px var(--corp);color:#B9B3D8}
#gLista em{flex:none;font:900 28px var(--corp);font-style:normal;padding:8px 20px;border-radius:30px;border:3px solid var(--cyan);color:var(--cyan)}
#gLista em.cor{border-color:#FFD23F;color:#FFD23F}
.gScoate{flex:none;height:96px;padding:0 24px;border-radius:24px;border:3px solid #E0646E;background:linear-gradient(#4A1A26,#2E1018);color:#FFD9DD;font:900 30px var(--corp)}
#gStare{left:826px;top:726px;width:820px;text-align:center;margin:0;font-size:28px;padding:0 30px;box-sizing:border-box}
#gStare.rau{color:#ff9aa8}
#gPleaca{left:1010px;top:776px;width:452px;height:116px;border-radius:30px;border:3px solid #E0646E;background:linear-gradient(#4A1A26,#2E1018);color:#FFD9DD;font:400 44px var(--titlu)}
#gPleaca.ascuns,#gIntra.ascuns,#gCodR.ascuns,#gTrimite.ascuns{display:none}
.scn:not(.port) #gPanou,.scn:not(.port) #gAntet,.scn:not(.port) #gLista,.scn:not(.port) #gStare,.scn:not(.port) #gPleaca{margin-left:var(--dx,0px)}
.port #gInchide{left:24px;top:28px;width:96px;height:92px}
.port #gTitlu{left:0;top:70px;width:100%;text-align:center;font-size:96px;white-space:nowrap}
.port #gCard,.port #gCodR,.port #gIntra{left:150px;top:300px}
.port #gTip{left:208px;top:268px}
.port #gPanou{left:42px;top:780px;width:856px;height:860px}
.port #gAntet{left:50px;top:782px;width:840px}
.port #gLista{left:84px;top:900px;width:772px}
.port #gStare{left:42px;top:1450px;width:856px}
.port #gPleaca{left:244px;top:1500px}
/* lobby: etichetele grupei si plusurile (asezate din meniu.js dupa pozitia 3D, translate(-50%,-100%) = varful capului) */
#gSloturi{position:absolute;inset:0;pointer-events:none;z-index:2}
#gSloturi.ascuns{display:none}
#gSloturi>button{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform;border:0;padding:0;background:none;color:var(--crem)}
.gEt{display:flex;flex-direction:column;align-items:center;min-width:150px;padding:8px 26px 10px!important;border-radius:28px!important;background:#120C26d8!important;border:3px solid #7E6A58!important;box-shadow:0 6px 14px #0008;margin-top:-14px}
.gEt b{font:400 36px/1.05 var(--titlu);white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.gEt small{font:900 24px var(--corp);color:#C8C2E6}
.gEt.lider{border-color:#FFD23F!important;box-shadow:0 0 14px #FFD23F77,0 6px 14px #0008}
.gEt.eu{border-color:var(--cyan)!important}
.gEt.plecat{opacity:.55}
.gEt .cor{position:absolute;top:-38px;left:50%;width:62px;height:42px;transform:translateX(-50%);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 42'%3E%3Cpath d='M4 38 1 9l15 12L31 2l15 19 15-12-3 29z' fill='%23FFD23F' stroke='%237A4A08' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='31' cy='26' r='5' fill='%23E0464E'/%3E%3C/svg%3E")}
.gPlus{display:flex;flex-direction:column;align-items:center;gap:6px}
.gPlus i{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;font:400 96px/1 var(--titlu);font-style:normal;color:#FFE9A8;background:radial-gradient(#2A1F55e0,#140E2Ee0);border:5px solid #E8B85A;box-shadow:0 0 18px #FFD23F66,inset 0 0 18px #FFD23F33;animation:gPuls 2.4s ease-in-out infinite}
.gPlus span{font:400 34px var(--titlu);text-shadow:0 2px 0 #000,0 0 8px #000}
@keyframes gPuls{50%{filter:drop-shadow(0 0 7px #FFD23Fa0)}}   /* 13.11 seara: pe filter (placa video); pe box-shadow redesena meniul la fiecare cadru */
/* membrul nu porneste meciul: butonul spune ca asteapta liderul; mesajul scurt se vede si pe orizontala */
#bStart.astept{font-size:52px;filter:saturate(.55) brightness(.9)}
body:not(.port) #bStart.astept{font-size:44px}
#lMod.blocat{filter:saturate(.6)}
body:not(.port) #bStart:not(:disabled)~#stare.vazut{display:block}
#stare.vazut{background:#120C26e0;border:3px solid #E8B85A;border-radius:24px;padding:10px 14px;box-sizing:border-box}
.gEt.jos,.gEt.sus{margin-top:0}   /* distanta fata de cap/picioare o pune meniu.js (ca sa poata tine eticheta in ecran) */
.gEt u{text-decoration:none;color:var(--cyan)}
#ecran.gMembru #lEN,#ecran.gMembru #lPutere{display:none}
#lMod.blocat svg{display:none}

/* 12.11 PRIETENI SI BREASLA (bro: „adauga lista de prieteni si guild”): ca fereastra Grupa, butoane de telefon (>= 104 px de scena),
   o singura actiune la vedere pe rand, restul in meniul ⋯ (#sAct). Butonul din lobby sta langa Pass. */
#bSocial{left:30px;top:290px;width:132px;height:132px;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;filter:drop-shadow(0 4px 4px #000a);z-index:3}
#bSocial img{width:92px;height:92px;object-fit:contain;pointer-events:none}
#bSocial b{margin-top:-8px;font:400 30px var(--titlu);color:var(--crem);-webkit-text-stroke:1.5px #24140A;text-shadow:0 3px 0 #24140A;pointer-events:none}
#bSocial .punct{top:4px;right:6px}
body:not(.port) #bSocial{left:540px;top:8px}
#socInchide{left:34px;top:20px}
#sTitlu{left:182px;top:16px;font-size:72px}
#sTaburi{left:826px;top:22px;width:820px;display:flex;gap:16px;justify-content:center}
#sTaburi button{flex:1;height:112px;border-radius:30px;border:3px solid #54476E;background:linear-gradient(#262047,#171330);color:var(--crem);font:400 44px var(--titlu);display:flex;align-items:center;justify-content:center;gap:14px}
#sTaburi button img{width:70px;height:70px;object-fit:contain}
#sTaburi button.sel{border-color:#FFD23F;background:linear-gradient(#4A3A12,#2A1E08);box-shadow:0 0 14px #FFD23F66}
#sCard{left:112px;top:150px;width:640px;height:760px;box-sizing:border-box;border-radius:30px;background:#0B1830c8;border:3px solid var(--cyan);box-shadow:0 0 14px #1BDDEB66}
#socPanou{left:826px;top:150px;width:820px;height:760px;box-sizing:border-box;border-radius:24px}
#sPr,#sBr{position:absolute;inset:0;pointer-events:none}
#sPr>*,#sBr>*{position:absolute;pointer-events:auto}
#sPr.ascuns,#sBr.ascuns,#bFara.ascuns,#bCu.ascuns,#bCautR.ascuns,#sAct.ascuns,#bDeschide.ascuns,#sTrimite.ascuns{display:none}
#sStanga,#bFara,#bCu{left:112px;top:150px;width:640px;height:760px;box-sizing:border-box;padding:34px 34px;display:flex;flex-direction:column;align-items:center;gap:16px}
#social .et{font:900 32px var(--corp);color:#C8C2E6}
#sCod{font:400 108px/1.05 var(--titlu);letter-spacing:4px;color:#FFF9E4;text-shadow:0 5px 0 #0008;user-select:text;-webkit-user-select:text}
#social .rand{display:flex;gap:18px;width:100%;justify-content:center}
#sCopiaza,#sTrimite,#sAdauga,#bCautB{height:112px;padding:0 30px;border-radius:30px;background:linear-gradient(#0A2C40,#0B4258);border:3px solid #2AA8C0;color:var(--crem);font:900 34px var(--corp);display:flex;align-items:center;gap:12px}
#sCopiaza svg,#sTrimite svg{width:44px;height:44px}
#sAdauga{border-color:#C89A52;background:linear-gradient(#332963,#1B1938);font:400 42px var(--titlu)}
#sCodIn,#bNume,#bCaut{height:112px;box-sizing:border-box;min-width:0;flex:1;text-align:center;font:400 44px var(--titlu);letter-spacing:4px;color:#fff;background:#0a0720;border:3px solid #54476E;border-radius:22px;user-select:text;-webkit-user-select:text}
#bNume{flex:none;width:100%;letter-spacing:1px}
#sStanga .et:nth-of-type(2){margin-top:40px}
.sAntet{left:834px;top:152px;width:804px;height:100px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 54px;font:400 46px var(--titlu)}
.sLista{left:862px;top:262px;width:748px;height:630px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;scrollbar-width:none}
.sLista::-webkit-scrollbar{display:none}
#bCautR{left:862px;top:262px;width:748px;height:112px;display:flex;gap:16px}
#sBr:not(.cu) #bLista{top:390px;height:502px}
.sLista li{flex:none;position:relative;min-height:126px;box-sizing:border-box;border-radius:30px;background:linear-gradient(#1E2245,#171A38);border:2px solid #3A3F6E;display:flex;align-items:center;padding:0 12px 0 14px;gap:16px}
.sLista li.cerere{border:4px solid #FFD23F;box-shadow:0 0 12px #FFD23F55}
.sLista li.eu{background:linear-gradient(#233064,#1B2350)}
.sLista li.plecat>img,.sLista li.plecat>span,.sLista li.trimisa>span{opacity:.6}
.sLista li.gol{justify-content:center;text-align:center;color:#9A96B8;font:900 30px var(--corp);padding:20px 30px;border-style:dashed}
.sLista img{width:100px;height:100px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#2A1C8B;border:4px solid #E8B85A;box-sizing:border-box}
.sLista img.emb{border-radius:22px;object-fit:contain;padding:8px;background:#141032}
.sLista li>span{display:flex;flex-direction:column;min-width:0;flex:1}
.sLista b{font:400 40px/1.1 var(--titlu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sLista small{font:900 25px var(--corp);color:#B9B3D8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sLista small.st_meniu{color:#7CF29A}
.sLista small.st_meci{color:#FFB35C}
.sLista em{flex:none;font:900 26px var(--corp);font-style:normal;padding:8px 18px;border-radius:30px;border:3px solid #9A96B8;color:#C8C2E6}
.sLista em.r2{border-color:#FFD23F;color:#FFD23F}
.sLista em.r1{border-color:var(--cyan);color:var(--cyan)}
.sLista button{flex:none;height:104px;border-radius:26px;font:900 30px var(--corp);color:var(--crem)}
.sDa{padding:0 26px;border:3px solid #4FD07A;background:linear-gradient(#155A2E,#0E3A1E)}
.sInv{padding:0 26px;border:3px solid #2AA8C0;background:linear-gradient(#0A2C40,#0B4258)}
.sNu{width:104px;border:3px solid #E0646E;background:linear-gradient(#4A1A26,#2E1018);font-size:40px!important}
.sMai{width:104px;border:3px solid #54476E;background:linear-gradient(#262047,#171330);font-size:52px!important;line-height:1}
#bEmb{display:grid;grid-template-columns:repeat(4,118px);gap:14px}
#bEmb button{width:118px;height:118px;border-radius:24px;border:3px solid #54476E;background:#141032;padding:10px}
#bEmb button img{width:100%;height:100%;object-fit:contain}
#bEmb button.sel,#bTip button.sel{border-color:#FFD23F;box-shadow:0 0 12px #FFD23F77}
#bTip{display:flex;gap:16px;width:100%}
#bTip button{flex:1;height:104px;border-radius:26px;border:3px solid #54476E;background:linear-gradient(#262047,#171330);color:var(--crem);font:400 38px var(--titlu)}
#bFa{width:100%;height:124px;font-size:54px;margin-top:auto}
#bCap{display:flex;align-items:center;gap:22px;width:100%}
#bEmbB{width:150px;height:150px;flex:none;border-radius:30px;border:4px solid #E8B85A;background:#141032;padding:14px}
#bEmbB img{width:100%;height:100%;object-fit:contain}
#bEmbB.poate{box-shadow:0 0 14px #FFD23F77}
#bCap span{display:flex;flex-direction:column;min-width:0}
#bNumeM{font:400 52px/1.1 var(--titlu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bInfoM{font:900 26px var(--corp);color:#C8C2E6}
#bDeschide{align-self:flex-end;height:96px;margin-top:-10px;padding:0 24px;border-radius:24px;border:3px solid #C89A52;background:linear-gradient(#332963,#1B1938);color:var(--crem);font:900 28px var(--corp)}
#bFeed{width:100%;flex:1;min-height:120px;box-sizing:border-box;padding:14px 20px;border-radius:22px;background:#0a0720c0;border:2px solid #3A3F6E;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
#bFeed p{margin:0;font:900 27px/1.25 var(--corp);color:#E8E4FF}
#bFeed p b{color:#FFD23F;margin-right:8px}
#bFeed p.gol{color:#9A96B8}
#bRapide{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
#bRapide button{height:96px;border-radius:22px;border:3px solid #2AA8C0;background:linear-gradient(#0A2C40,#0B4258);color:var(--crem);font:900 24px/1.1 var(--corp);padding:0 6px}
#bPleaca{width:100%;height:104px;border-radius:26px;border:3px solid #E0646E;background:linear-gradient(#4A1A26,#2E1018);color:#FFD9DD;font:400 40px var(--titlu)}
#sStare{left:112px;top:908px;width:1534px;margin:0;text-align:center;font-size:26px}
#sStare.rau{color:#ff9aa8}
#sAct{position:absolute;inset:-200px;background:#05031099;display:flex;align-items:center;justify-content:center;z-index:5}
#sAct>div{width:680px;box-sizing:border-box;padding:30px;border-radius:30px;background:linear-gradient(#211B3E,#191430);border:3px solid #E8B85A;display:flex;flex-direction:column;gap:16px}
#sAct b{font:400 44px/1.15 var(--titlu);text-align:center;margin-bottom:6px}
#sAct button{height:116px;border-radius:28px;border:3px solid #2AA8C0;background:linear-gradient(#0A2C40,#0B4258);color:var(--crem);font:400 42px var(--titlu)}
#sAct button.rau{border-color:#E0646E;background:linear-gradient(#4A1A26,#2E1018);color:#FFD9DD}
#sAct button[data-i="x"]{border-color:#54476E;background:linear-gradient(#262047,#171330)}
.scn:not(.port) #sTaburi,.scn:not(.port) #socPanou,.scn:not(.port) .sAntet,.scn:not(.port) .sLista,.scn:not(.port) #bCautR{margin-left:var(--dx,0px)}
.scn:not(.port) #sStare{width:calc(1534px + var(--dx,0px))}
/* vertical: codul si breasla sus, lista dedesubt */
.port #socInchide{left:24px;top:28px;width:96px;height:92px}
.port #sTitlu{left:0;top:36px;width:100%;text-align:center;font-size:84px;white-space:nowrap}
.port #sTaburi{left:42px;top:150px;width:856px}
.port #sCard,.port #sStanga,.port #bFara,.port #bCu{left:42px;top:278px;width:856px;height:840px}
.port #socPanou{left:42px;top:1134px;width:856px;height:506px}
.port .sAntet{left:50px;top:1136px;width:840px}
.port .sLista{left:72px;top:1244px;width:796px;height:386px}
.port #bCautR{left:72px;top:1244px;width:796px}
.port #sBr:not(.cu) #bLista{top:1370px;height:260px}
/* butoanele din coloana (breasla, prieteni) nu se strivesc; doar fluxul de mesaje se micsoreaza daca e nevoie */
#sStanga>*,#bFara>*,#bCu>*{flex-shrink:0}
#bCu>#bFeed{flex-shrink:1}
.port #sStare{left:42px;top:1644px;width:856px}
/* invitatia in grupa: banda sus, peste orice ecran din meniu (in pixeli de ecran, nu de scena) */
#sInvit{position:fixed;left:50%;top:calc(var(--sa-t,0px) + 8px);transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:8px 10px 8px 8px;border-radius:18px;background:#1A1438f0;border:2px solid #E8B85A;box-shadow:0 6px 20px #000a;color:var(--crem);font:900 15px var(--corp)}
#sInvit.ascuns{display:none}
#sInvit img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:2px solid #E8B85A;background:#2A1C8B}
#sInvit b{color:#FFD23F}
#sInvit button{height:44px;padding:0 16px;border-radius:12px;font:400 18px var(--titlu)}
#sInvit .sIntra{border:2px solid #7A4A08;background:linear-gradient(#FFE58A,#F2B53A);color:#24140A;font-size:20px}
#sInvit button[data-nu]{border:2px solid #54476E;background:#262047;color:var(--crem)}
.sLista li[data-id]:not(.cerere):not(.trimisa):not(.eu){cursor:pointer}
.sLista li[data-id]:not(.cerere):not(.trimisa):not(.eu):active{filter:brightness(1.25)}
/* 12.11 lista de invitatii din fereastra Grupa (bro: „cand fac o grupa sa imi apara si lista de prieteni”) */
#gLista li.inv{cursor:pointer;color:var(--cyan);border:3px dashed #2AA8C0;background:#0B1830b0;font:400 38px var(--titlu)}
#gLista li.inv b{font-size:52px;margin-right:12px}
#gInv{position:absolute;inset:-200px;background:#05031099;display:flex;align-items:center;justify-content:center;z-index:5}
#gInv.ascuns{display:none}
#gInv>div{width:900px;max-height:820px;box-sizing:border-box;padding:28px 30px 30px;border-radius:30px;background:linear-gradient(#211B3E,#191430);border:3px solid #E8B85A;display:flex;flex-direction:column;gap:16px}
#gInv>div>b{font:400 52px/1.1 var(--titlu);text-align:center}
#gInvLista{position:static!important;left:auto!important;top:auto!important;margin:0!important;width:100%!important;height:auto!important;max-height:560px;flex:1 1 auto;min-height:0}   /* nu mosteneste asezarea listelor din fereastra Prieteni (left/top/--dx) */
#gInvGata{flex:none;height:112px;border-radius:28px;border:3px solid #54476E;background:linear-gradient(#262047,#171330);color:var(--crem);font:400 44px var(--titlu)}
#gInvLista em{border-color:#4FD07A;color:#7CF29A}

/* 12.11 ECRANUL „ALEGE MODUL” (bro: „meniu intr-o camera separata, animat, sa se prezinte profi”): lista cu cele 3 moduri in stanga,
   clipul din jocul real mare in dreapta cu numele si cum castigi peste el, dificultatea doar la Zombi (blocata pana la nivel). */
#mdInapoi{left:34px;top:20px}
#mdTitlu{left:182px;top:16px;font-size:72px}
#mdLista{left:40px;top:140px;width:470px;display:flex;flex-direction:column;gap:18px}
#mdLista button{position:relative;height:178px;border-radius:30px;border:3px solid #54476E;background:linear-gradient(#262047,#171330);color:var(--crem);display:grid;grid-template-columns:150px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:20px;padding:0 18px;text-align:left}
#mdLista button i{grid-row:1/3;width:150px;height:140px;border-radius:22px;background:center/cover;box-shadow:inset 0 0 0 3px #0006}
#mdLista button b{font:400 52px/1.05 var(--titlu)}
#mdLista button span{font:900 26px var(--corp);color:#C8C2E6}
#mdLista button.sel{border-color:#FFD23F;background:linear-gradient(#4A3A12,#2A1E08);box-shadow:0 0 18px #FFD23F77}
#mdScena{left:540px;top:130px;width:1090px;height:613px;border-radius:30px;overflow:hidden;border:4px solid #E8B85A;box-shadow:0 10px 30px #000a;background:#0a0720}
#mdVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#mdUmbra{position:absolute;inset:0;background:linear-gradient(0deg,#05031ee6 0%,#05031e99 32%,#0000 62%),linear-gradient(90deg,#05031e99 0%,#0000 55%);pointer-events:none}
#mdText{position:absolute;left:40px;right:40px;bottom:30px}
#mdNume{margin:0;font:400 84px/1 var(--titlu);background:linear-gradient(#FFFBE6 18%,#FBE3A6 62%,#EFC06A);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #4A2A10)}
#mdSub{margin:6px 0 14px;font:900 32px var(--corp);color:var(--cyan)}
#mdRanduri{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#mdRanduri li{position:relative;padding-left:40px;font:900 30px/1.25 var(--corp);color:#FFF6E0;text-shadow:0 2px 4px #000}
#mdRanduri li::before{content:'';position:absolute;left:6px;top:12px;width:14px;height:14px;background:#FFD23F;transform:rotate(45deg);box-shadow:0 0 8px #FFD23F}
#mdDif{left:540px;top:768px;width:700px;height:150px;display:flex;align-items:center;gap:16px}
#mdDif.ascuns{display:none}
#mdDif span{font:400 34px var(--titlu);margin-right:6px}
#mdDif button{flex:1;height:120px;border-radius:28px;border:3px solid #54476E;background:linear-gradient(#262047,#171330);color:var(--crem);display:flex;flex-direction:column;align-items:center;justify-content:center}
#mdDif button b{font:400 36px var(--titlu);white-space:nowrap}
#mdDif button small{font:900 22px var(--corp);color:#ff9aa8}
#mdDif button.sel{border-color:#FFD23F;box-shadow:0 0 14px #FFD23F77;background:linear-gradient(#4A3A12,#2A1E08)}
#mdDif button.blocat{filter:grayscale(.7);opacity:.8}
#mdDif button.blocat b::before{content:'';display:inline-block;width:26px;height:30px;margin-right:10px;vertical-align:-2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Crect x='2' y='13' width='22' height='16' rx='3' fill='%23E8B85A'/%3E%3Cpath d='M7 13V9a6 6 0 0 1 12 0v4' fill='none' stroke='%23E8B85A' stroke-width='3.4'/%3E%3C/svg%3E")}
#mdAlege{left:1270px;top:764px;width:360px;height:150px;font-size:84px;--t:32px}
#mdMesaj{left:540px;top:900px;width:1090px;margin:0;text-align:center;font-size:26px;color:#ff9aa8}
.scn:not(.port) #mdScena,.scn:not(.port) #mdDif,.scn:not(.port) #mdMesaj{margin-left:calc(var(--dx,0px) / 2)}
.scn:not(.port) #mdAlege{margin-left:var(--dx,0px)}
/* vertical: clipul sus, modurile pe un rand dedesubt, apoi dificultatea si butonul */
.port #mdInapoi{left:24px;top:28px;width:96px;height:92px}
.port #mdTitlu{left:140px;right:140px;width:auto;top:50px;text-align:center;font-size:84px;white-space:nowrap}
.port #mdScena{left:30px;top:190px;width:881px;height:640px}
.port #mdNume{font-size:72px}
.port #mdRanduri li{font-size:28px}
.port #mdLista{left:30px;top:860px;width:881px;flex-direction:row;gap:14px}
.port #mdLista button{flex:1;height:250px;grid-template-columns:1fr;grid-template-rows:140px auto auto;justify-items:center;text-align:center;padding:14px 10px;row-gap:4px}
.port #mdLista button i{grid-row:auto;width:100%;height:140px}
.port #mdLista button b{font-size:44px}
.port #mdLista button span{font-size:22px}
.port #mdDif{left:30px;top:1140px;width:881px;height:140px}
.port #mdAlege{left:190px;top:1320px;width:560px;height:160px}
.port #mdMesaj{left:30px;top:1500px;width:881px}

/* ---------- 12.11 ANIMALUTE v2 (bro: „meniul de upgrade mai diferit, cele pe care nu le am cu rosu, mult mai usor de inteles cand le
   creste nivelul”): stanga dalele, dreapta fisa, acum → urmatorul, butonul mare. 12.11 v3: EVOLUTIE cu copii (fara aur), drumul
   evolutiei cu cele 3 accesorii deasupra treptelor 3/6/9, insigna de evolutie mov (bro: „mult mai profi si alta culoare”) ---------- */
#peti{--rosu:#E2453C;--verde:#7CF29A}
#petLista{left:34px;top:120px;width:724px;height:800px;box-sizing:border-box;padding:16px;border-radius:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
#petLista .petD{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px;border-radius:22px;background:linear-gradient(#2C2558,#1C1838);border:4px solid #6E5E8E;color:var(--crem);box-shadow:0 5px 0 #0000006b}
#petLista .petD img{width:150px;height:150px;object-fit:contain}
#petLista .petD b{font:400 32px var(--titlu);white-space:nowrap}
#petLista .petD.sel{border-color:var(--cyan);box-shadow:0 0 0 3px #1BDDEB66,0 0 22px #1BDDEBa0}
/* insigna de evolutie: hexagon mov cu rama aurie (rama = hexagonul din spate, miezul = hexagonul din fata) */
#peti .petEv{position:absolute;top:6px;right:6px;width:58px;height:64px;display:grid;place-items:center;font-style:normal;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#FFF1B8,#E2A93A 55%,#8A5A12)}
#peti .petEv b{width:calc(100% - 8px);height:calc(100% - 9px);display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(circle at 50% 28%,#E9C6FF,#9B4DF5 48%,#4C138F);color:#fff;font:400 32px/1 var(--titlu);text-shadow:0 2px 0 #2A0656,0 0 10px #E9C6FF}
#petLista em.copii{position:absolute;top:10px;left:8px;padding:2px 12px;border-radius:16px;background:linear-gradient(#2E9E52,#1B6B35);border:2px solid #9DF5B4;color:#fff;font:900 24px var(--corp);animation:petCopie 1.8s ease-in-out infinite}
#petLista .accP{display:flex;gap:9px;height:18px;align-items:center}
#petLista .accP i{width:13px;height:13px;transform:rotate(45deg);background:#1A1636;border:2px solid #6E5E8E}
#petLista .accP i.da{background:linear-gradient(#FFE27A,#E8A21E);border-color:#FFF1B8;box-shadow:0 0 6px #FFD23F}
#petLista em{font:800 22px var(--corp);font-style:normal;padding:4px 14px;border-radius:20px}
#petLista em.cu{background:#0B4258;color:#9FF4FF;border:2px solid var(--cyan)}
/* cele pe care nu le ai: rosii */
#peti .lipsa{border-color:var(--rosu)!important;background:linear-gradient(#4E1519,#2A0B0E)!important}
#petLista .petD.lipsa img,#petFisa.lipsa .poza img{filter:grayscale(1) brightness(.55) sepia(1) hue-rotate(-50deg) saturate(3)}
#petLista .petD.lipsa b{color:#FFB4AE}
#petLista em.nu{background:var(--rosu);color:#fff;border:2px solid #FF9C94}
#peti .lacat{position:absolute;top:10px;right:10px;width:44px;height:52px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M6 12V8a6 6 0 0 1 12 0v4' fill='none' stroke='%23FDCA17' stroke-width='3'/%3E%3Crect x='3' y='12' width='18' height='14' rx='3' fill='%23FDCA17' stroke='%234A2A10' stroke-width='1.5'/%3E%3C/svg%3E")}
#petLista .petD.lipsa.sel{box-shadow:0 0 0 3px #E2453C88,0 0 22px #E2453Ca0}
/* fisa din dreapta */
#petFisa{left:776px;top:120px;width:862px;height:800px;box-sizing:border-box;padding:20px 24px;border-radius:28px;display:flex;flex-direction:column;gap:12px;color:var(--crem)}
#petFisa .sus1{display:flex;gap:26px;align-items:center}
#petFisa .poza{position:relative;flex:none;width:240px;height:240px;box-sizing:border-box;border-radius:30px;border:4px solid #E7B3FF;background:radial-gradient(circle,#4B2E6E,#21152F 70%);display:grid;place-items:center}
#petFisa.lipsa .poza{border-color:var(--rosu);background:radial-gradient(circle,#5E1C20,#2A0B0E 70%)}
#petFisa .poza img{width:205px;height:205px;object-fit:contain}
#petFisa .poza .petEv{width:80px;height:88px;top:-16px;right:-16px}
#petFisa .poza .petEv b{font-size:44px}
#petFisa .cap{flex:1;min-width:0}
#petFisa h3{margin:0;font:400 60px/1.05 var(--titlu)}
#petFisa .cap p{margin:6px 0 0;font:800 30px/1.25 var(--corp);color:#D9D3F5}
#petFisa .cap p b{color:#FFD23F;font-size:36px}
#petFisa .cap p.nuAi{display:inline-block;margin-top:10px;padding:6px 20px;border-radius:24px;background:var(--rosu);color:#fff;font-size:30px}
/* drumul evolutiei: 9 trepte, accesoriul (iconita rotunda) deasupra treptei 3, 6 si 9 */
#petFisa .drum{position:relative;margin-top:74px}
#petFisa .drum .trepte{display:flex;gap:6px}
#petFisa .drum .trepte i{flex:1;height:28px;border-radius:14px;background:#120F24;border:3px solid #3A3160}
#petFisa .drum .trepte i.plin{background:linear-gradient(#E9C6FF,#9B4DF5);border-color:#F3DEFF;box-shadow:0 0 10px #B57BFF90}
#petFisa .drum .trepte i.urm{border-color:#C79BFF;animation:petUrm 1.4s ease-in-out infinite}
#petFisa .drum .accI{position:absolute;bottom:40px;width:66px;height:66px;transform:translateX(-50%);box-sizing:border-box;border-radius:50%;background:#120F24;border:3px solid #3A3160;display:grid;place-items:center}
#petFisa .drum .accI img{width:54px;height:54px;object-fit:contain;filter:grayscale(1) brightness(.45)}
#petFisa .drum .accI.are{border-color:#FFD23F;background:radial-gradient(circle,#4B2E6E,#21152F);box-shadow:0 0 14px #FFD23F90}
#petFisa .drum .accI.are img{filter:none}
#petFisa .drum .accI .lacat{top:auto;bottom:-6px;right:-6px;width:26px;height:30px}
#petFisa .drum .accI.nou{animation:petLumina 1.2s ease-out 2}
#petFisa .bonus{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#petFisa .bonus li{display:flex;align-items:center;gap:14px;height:72px;box-sizing:border-box;padding:0 20px;border-radius:20px;background:#120F24;border:3px solid #3A3160}
#petFisa .bonus li.antet{height:34px;background:none;border:0;font:800 24px var(--corp);color:#9C93C4}
#petFisa .bonus li.antet span{margin-left:70px}
#petFisa .bonus li.antet b{font:800 24px var(--corp);color:#9C93C4}
#petFisa .bonus .ic{flex:none;width:56px;height:56px;box-sizing:border-box;border-radius:14px;display:grid;place-items:center;font:900 30px var(--corp);font-style:normal}
#petFisa .bonus .ic.r{background:#4A2E16;color:#ff9d3c;border:3px solid #ff9d3c}
#petFisa .bonus .ic.d{background:#1C3550;color:#59c7ff;border:3px solid #59c7ff;font-size:26px}
#petFisa .bonus span{flex:1;min-width:0;font:800 30px var(--corp);white-space:nowrap}
#petFisa .bonus b{width:130px;text-align:center;font:900 38px var(--corp)}
#petFisa .bonus em{width:40px;text-align:center;font:900 32px var(--corp);font-style:normal;color:#9C93C4}
#petFisa .bonus b.sus{color:var(--verde)}
#petFisa .info{margin:0;font:700 24px/1.3 var(--corp);color:#CFC8EE}
#petFisa .act{display:flex;gap:16px;margin-top:auto}
#petFisa .act .bAur{flex:1;height:112px;flex-direction:column;gap:2px;font-size:40px}
#petFisa .act .bAur small{display:flex;align-items:center;gap:8px;font:400 32px var(--titlu)}
#petFisa .act .bAur small img{width:36px;height:36px}
#petFisa .act .bAur:disabled{opacity:.5;filter:grayscale(.6)}
#petFisa .act .dala{flex:none;width:290px;height:112px;font:400 34px var(--titlu)}
#petFisa .act .dala.sel{background:linear-gradient(#0A2C40,#0B4258);border-color:var(--cyan)}
#petFisa .act .max{flex:1;height:112px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(#3B2557,#21152F);border:4px solid #FFD23F;font:400 44px var(--titlu);color:#FFD23F}
#petFisa .msg{margin:0;min-height:36px;font:800 28px/1.25 var(--corp);color:var(--verde)}
#petFisa .msg.rau{color:#FF8A80}
/* cand creste nivelul: „Nivel 4!” peste poza, punctul nou se aprinde, cifrele noi clipesc verde */
#petFisa .petSus{position:absolute;left:50%;top:140px;z-index:2;white-space:nowrap;font:400 76px var(--titlu);color:#FFE27A;-webkit-text-stroke:3px #5A3A10;text-shadow:0 0 24px #FFD23F;pointer-events:none;animation:petSus 1.6s ease-out forwards}
#petFisa.urcat .poza{animation:petLumina 1.2s ease-out}
#petFisa .drum .trepte i.nou{animation:petFlash .8s ease-out 2}
#petFisa .bonus b.acum{color:var(--verde);animation:petPop .7s ease-out 2}
#petLista .petD.urcat .petEv{animation:petPop .7s ease-out 2}
@keyframes petCopie{50%{filter:drop-shadow(0 0 5px #7CF29Ac0)}}
#petFisa .act .bAur.urca small{font:800 26px var(--corp);color:#3A2410}
@keyframes petUrm{50%{filter:drop-shadow(0 0 5px #FFD23Fb0)}}
@keyframes petSus{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}55%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-110%) scale(1);opacity:0}}
@keyframes petLumina{0%{box-shadow:0 0 0 #FFD23F}30%{box-shadow:0 0 60px 16px #FFD23Fcc}100%{box-shadow:0 0 0 #FFD23F00}}
@keyframes petFlash{0%{transform:scaleY(1);filter:brightness(2.4)}50%{transform:scaleY(1.4)}100%{transform:scaleY(1);filter:none}}
@keyframes petPop{40%{transform:scale(1.35)}}
/* vertical: dalele sus (4 x 2), fisa dedesubt */
.port #petLista{left:42px;top:296px;width:856px;height:560px;padding:14px;gap:12px}
.port #petLista .petD img{width:120px;height:120px}
.port #petLista .petD b{font-size:30px}
.port #petLista em{font-size:20px;padding:3px 10px}
.port #peti .petEv{width:50px;height:56px;top:5px;right:5px}
.port #peti .petEv b{font-size:28px}
.port #petLista em.copii{font-size:20px;padding:1px 9px}
.port #peti .lacat{width:36px;height:42px;top:8px;right:8px}
.port #petFisa{left:42px;top:876px;width:856px;height:760px;padding:16px 20px;gap:10px}
.port #petFisa .poza{width:190px;height:190px}
.port #petFisa .poza img{width:160px;height:160px}
.port #petFisa .poza .petEv{width:66px;height:74px;top:-12px;right:-12px}
.port #petFisa .poza .petEv b{font-size:38px}
.port #petFisa .drum{margin-top:66px}
.port #petFisa .drum .accI{width:58px;height:58px;bottom:36px}
.port #petFisa .drum .accI img{width:46px;height:46px}
.port #petFisa h3{font-size:56px}
.port #petFisa .cap p{font-size:28px}
.port #petFisa .bonus li{height:66px;padding:0 16px}
.port #petFisa .bonus span{font-size:27px}
.port #petFisa .bonus b{width:110px;font-size:34px}
.port #petFisa .bonus li.antet b{font-size:20px;white-space:nowrap}
.port #petFisa .info{font-size:24px}
.port #petFisa .act .bAur{height:104px;font-size:36px}
.port #petFisa .msg{font-size:24px}
.port #petFisa .petSus{top:110px;font-size:66px}
.port #petFisa .act .dala{width:250px;height:104px;font-size:30px}

/* 12.11 limbi (bro: „vreau multilingv sa fie peste tot”): randul Limba in Setari; randurile stranse putin ca sa incapa in panou */
#rMuz{top:470px;height:140px}
#rMuz b,#rVib b{top:46px}
#rMuz .comut,#rVib .comut{top:21px}
#rEf{top:628px;height:170px}
#rEf b{top:20px}
#sVol{top:92px}
#rCal{top:816px;height:150px}
#rCal b{top:22px}
#sCal{top:24px}
#rLimba{top:984px;height:150px}
#rLimba b{top:48px}
#sLimba{position:absolute;right:24px;top:24px;width:344px;height:92px;box-sizing:border-box;padding:0 60px 0 26px;border-radius:26px;border:4px solid #E8A030;color:var(--crem);font:900 36px var(--corp);-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M3 4l12 12L27 4' fill='none' stroke='%23F6F2CF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 26px center/34px no-repeat,linear-gradient(#2A2353,#1C1838)}
#rVib{top:1152px;height:140px}
#sGata{top:1316px;height:160px}

/* 12.11 prima pornire: „Alege-ți numele” (nume.js), in stilul Setarilor */
#nPanou{left:28px;top:470px;width:886px;height:860px;box-sizing:border-box;border-radius:44px;border:12px solid #3A3F8E;background:linear-gradient(#1F2354,#181A40);box-shadow:0 0 0 2px #1E2258,0 0 26px #1BDDEB66,inset 0 0 0 2px #5A60B8}
#nChip{left:110px;top:410px;width:720px;height:154px;box-sizing:border-box;padding:6px;clip-path:polygon(44px 0,calc(100% - 44px) 0,100% 42%,100% 58%,calc(100% - 44px) 100%,44px 100%,0 58%,0 42%);background:linear-gradient(#E8C47A,#8C6228)}
#nChip span{display:grid;place-items:center;width:100%;height:100%;clip-path:polygon(40px 0,calc(100% - 40px) 0,100% 42%,100% 58%,calc(100% - 40px) 100%,40px 100%,0 58%,0 42%);background:linear-gradient(#2A2353,#17132B)}
#nChip b{font:400 78px var(--titlu);white-space:nowrap;background:linear-gradient(#FFF3A8,#FFD238 54%,#F49F0C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5A300C)}
#nText{left:80px;top:610px;width:780px;margin:0;text-align:center;font:900 46px/1.2 var(--corp);color:var(--crem)}
#nNume{left:92px;top:730px;width:590px;height:136px;box-sizing:border-box;border-radius:36px;border:5px solid #E8A030;background:linear-gradient(#141636,#1C1838);color:#fff;font:400 66px var(--titlu);text-align:center;padding:0 24px;outline:none}
#nNume:focus{border-color:#FFD238;box-shadow:0 0 18px #FFD23866}
#nZar{left:706px;top:730px;width:140px;height:136px;box-sizing:border-box;border-radius:36px;border:5px solid #2AE8F0;background:linear-gradient(#1F2A5C,#141A40);color:var(--crem);display:grid;place-items:center;padding:0}
#nZar svg{width:84px;height:84px}
#nZar:active{transform:translateY(3px)}
#nEroare{left:80px;top:884px;width:780px;margin:0;min-height:48px;text-align:center;font:900 36px/1.3 var(--corp);color:#FF8A8A}
#nGata{left:100px;top:960px;width:740px;height:176px;font-size:80px;--t:34px}
#nInfo{left:80px;top:1176px;width:780px;margin:0;text-align:center;font:900 34px/1.3 var(--corp);color:#C8C4E8}
/* 12.11 limbi: dalele de jos raman egale oricat de lung e cuvantul (meniu.js potrivesteTexte il micsoreaza) */
#lNav{grid-template-columns:repeat(6,minmax(0,1fr))}
#lNav button{min-width:0;overflow:hidden;white-space:nowrap}