/* Rubik — self-hosted (sesiunea 103, 2026-09-06). Era încărcat de la Google Fonts cu display=swap ⇒ FOUT: la hard-refresh (cache golit) textul se randa în Tahoma până ajungea Rubik de la Google, apoi sărea, iar placa HUD (lățime shrink-to-fit) se re-așeza vizibil. Acum: 2 fișiere same-origin (latin + latin-ext), font variabil 400–700, preload în ⇒ e gata înainte de primul paint, fără salt. Fișiere: assets/fonts/rubik-latin*.woff2. */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/rubik-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/rubik-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* TEST: bold doar pe tab-uri și titluri — șterge blocul când ai decis */ * { font-weight: 400 !important; } .ui-tab, .ui-title, .ui-section, .dock-tab, .chat-tab, .inv-tab, .gang-tab, .auction-tab, .gchat-tab, .inv-action-tab, .profile-tab, .pp-tab, .auth-tab-btn, .cs-tab, .bank-tab, .admin-tab, .sf-main-tab, .brothel-main-tab, .panel-title, .dock-panel-title, .modal-title { font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════ DESIGN TOKENS — modifică DOAR aici, se aplică peste tot ═══════════════════════════════════════════════════════════ */ :root { /* Font */ --font: 'Rubik', 'Tahoma', Arial, sans-serif; /* Mărimi text */ --text-xs: 12px; /* labels, badges, meta */ --text-sm: 12px; /* informații secundare, timestamps */ --text-base: 13px; /* text normal, valori, butoane */ --text-md: 15px; /* username-uri, titluri mici */ --text-lg: 18px; /* titluri paneluri */ /* Culori text */ --color-text: #cbd5e1; /* text normal */ --color-text-muted: #6b7280; /* labels, subtitluri */ --color-text-strong: #e2e8f0; /* valori importante */ --color-accent: #e8c97a; /* auriu — titluri, taburi active */ --color-accent-dim: #d4b96a; /* auriu mai slab — vânzător, meta */ --color-positive: #4ade80; /* verde — success, liber */ --color-negative: #f87171; /* roșu — pericol, atac */ --color-info: #60a5fa; /* albastru — info */ /* Border radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* Spațieri comune */ --gap-xs: 4px; --gap-sm: 6px; --gap-md: 10px; --gap-lg: 14px; } /* Prag de lățime îngustă (zoom Android peste minim, sau telefoane foarte mici) — text mai mic, fix pe o treaptă, NU fluid cu clamp()/cqw. Încercat azi clamp()+cqw pe taburi: a rupt lățimea la un flex item care avea nevoie de dimensiune naturală (#topCatTabs, panoul TOP) și a micșorat text și pe ecrane normale, unde n-ar fi trebuit. Verificat cum rezolvă un joc similar (mafieromana.ro) aceeași problemă: NU are un sistem fluid — are un prag fix la 387.98px unde textul scade direct la o valoare mai mică, fără nimic „continuu" între. Adoptăm exact același model — o treaptă, testată manual, fără risc de coliziune cu container-type/flexbox (nu ține de layout deloc, doar schimbă valoarea variabilelor). */ @media (max-width: 390px) { :root { --text-xs: 10px; --text-sm: 10px; --text-base: 11px; --text-md: 13px; --text-lg: 15px; } } /* ── Alert universal ── */ .ui-alert { display: flex; align-items: flex-start; gap: var(--gap-sm); padding: var(--gap-sm) var(--gap-md); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; border-left: 3px solid; } .ui-alert > img:first-child { align-self: center; flex-shrink: 0; } /* Info — auriu */ .ui-alert--info { background: rgba(212,185,106,0.08); border-left-color: var(--color-accent-dim); color: var(--color-accent-dim); } /* Warning — portocaliu */ .ui-alert--warning { background: rgba(251,146,60,0.08); border-left-color: #fb923c; color: #fb923c; } /* Success — verde */ .ui-alert--success { background: rgba(74,222,128,0.08); border-left-color: var(--color-positive); color: var(--color-positive); } /* Danger — roșu */ .ui-alert--danger { background: rgba(248,113,113,0.08); border-left-color: var(--color-negative); color: var(--color-negative); } .ui-alert-icon { flex-shrink: 0; width: 20px; height: 20px; object-fit: contain; margin-top: 1px; } .ui-alert-list { margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 2px; } .ui-alert-list li { list-style: disc; } /* Casetă de reguli pliabilă (model 2 - fâșie subțire), cerere user 2026-08-19 - pastila preia exact stilul deja existent .profile-uid-chip, ca să fie consecventă vizual */ .ui-alert--collapsible { flex-direction: column; background: none; border-left: none; padding: 0; width: 100%; align-self: stretch; } .ui-alert-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 12px; background: rgba(200,146,74,0.1); border: 1px solid rgba(200,146,74,0.3); border-radius: 99px; color: #d4a656; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; user-select: none; } .ui-alert-pill:hover { background: rgba(200,146,74,0.18); border-color: rgba(200,146,74,0.5); color: #f5c542; } .ui-alert-pill .ui-alert-icon { width: 19px; height: 19px; margin: 0; } .ui-alert-pill-label { white-space: nowrap; } .ui-alert-chevron { transition: transform 0.2s ease; margin-left: 2px; font-size: 15px; opacity: 0.9; } .ui-alert--collapsible.open .ui-alert-chevron { transform: rotate(180deg); } .ui-alert--collapsible .ui-alert-list { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; padding: 0 var(--gap-md) 0 22px; width: 100%; box-sizing: border-box; transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease, padding 0.25s ease; } .ui-alert--collapsible.open .ui-alert-list { max-height: 300px; opacity: 1; margin-top: var(--gap-xs); padding: var(--gap-xs) var(--gap-md) var(--gap-xs) 22px; background: rgba(212,185,106,0.08); border-left: 3px solid var(--color-accent-dim); border-radius: var(--radius-md); } /* Liste mai lungi (ex. avantaje VIP, 11+ rânduri) depășesc 300px și ar fi tăiate de overflow:hidden */ .ui-alert--collapsible.ui-alert--tall.open .ui-alert-list { max-height: 800px; } /* ── Input universal ── */ .ui-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); color: var(--color-text-strong); font-size: var(--text-base); font-family: var(--font); font-weight: 600; padding: 8px 10px; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.15s, background 0.15s; } .ui-input:focus { border-color: rgba(180,130,20,0.5); background: rgba(255,255,255,0.08); } .ui-input::placeholder { color: rgba(255,255,255,0.25); font-weight: 400; } .ui-input::-webkit-outer-spin-button, .ui-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ui-input[type=number] { -moz-appearance: textfield; } /* ── Checkbox universal (înlocuiește checkbox-ul nativ al browserului) ── */ .ui-checkbox-wrap { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .ui-checkbox-wrap input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ui-checkbox-box { position: relative; flex-shrink: 0; width: 16px; height: 16px; background: #1a1200; border: 1px solid rgba(200,146,74,0.4); border-radius: 4px; transition: background 0.15s, border-color 0.15s; } .ui-checkbox-box::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #1a1200; opacity: 0; transition: opacity 0.1s; } .ui-checkbox-wrap input[type="checkbox"]:checked + .ui-checkbox-box { background: var(--color-accent); border-color: var(--color-accent); } .ui-checkbox-wrap input[type="checkbox"]:checked + .ui-checkbox-box::after { opacity: 1; } .ui-checkbox-wrap input[type="checkbox"]:focus-visible + .ui-checkbox-box { border-color: var(--color-accent); } .ui-checkbox-label { font-size: var(--text-xs); color: var(--color-text); } /* Bifă vizibilă dar nefolosibilă — ex. târnăcop special la stoc 0, ca jucătorul să știe că obiectul există chiar dacă nu deține unul acum (cerere user 2026-08-22). */ .ui-checkbox-wrap input[type="checkbox"]:disabled { cursor: default; } .ui-checkbox-wrap input[type="checkbox"]:disabled ~ * { opacity: 0.45; } .ui-checkbox-wrap:has(input[type="checkbox"]:disabled) { cursor: default; } /* ── Field universal (label + input) ── */ .ui-field { display: flex; flex-direction: column; gap: var(--gap-xs); } .ui-field-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } /* ── Clase semantice universale ── */ .ui-title { font-size: var(--text-lg); color: var(--color-accent); font-weight: 700; letter-spacing: 0.5px; } .ui-section { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; } .ui-tab { font-size: var(--text-base); color: var(--color-text-muted); font-weight: 700; } .ui-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; } .ui-value { font-size: var(--text-base); color: var(--color-text-strong); font-weight: 700; } .ui-meta { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; } * { box-sizing: border-box; } /* ── Scrollbar custom golden — global ── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(139,105,20,0.45); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(180,140,30,0.7); } ::-webkit-scrollbar-corner { background: transparent; } /* html — nu doar body — ca fundalul să rămână corect și în zona de "elastic overscroll" a iOS Safari (tragere peste marginea paginii), unde poate apărea fundalul lui . overscroll-behavior pe AMBELE — dezactivează „pull-to-refresh" pe Android/Chrome. */ html, body { background: #0c0802; overscroll-behavior-y: none; } /* Fix real pentru iOS Safari (Safari suportă overscroll-behavior abia parțial/din versiuni recente, deci regula de mai sus nu e suficientă acolo): height:100%+overflow:hidden pe , nu doar pe (.game-body avea deja overflow:hidden, dar nu) — dacă orice element iese chiar și cu 1px peste marginea ecranului, tot documentul devine „scrollabil" și Safari permite elastic-bounce/gestul de refresh la vârf, indiferent de overscroll-behavior. Scopat STRICT la pagina de joc (.game-html, pus doar pe din index.php) — NU global pe html/body, ca să nu rupă scroll-ul normal de pe login/register/ termeni și condiții, care au conținut mai înalt decât ecranul și au nevoie să scroleze. */ .game-html { height: 100%; overflow: hidden; /* Strat suplimentar la nivel de document: harta (.game-map-bg) face scroll nativ, iar un overscroll orizontal care ajunge la document poate declanșa gestul de navigare înapoi/înainte (pe iOS în PWA = arată ca un „refresh") — completează overscroll-behavior-y de pe html/body cu ambele axe, doar pe pagina de joc. */ overscroll-behavior: none; } body { margin: 0; font-family: var(--font); font-size: var(--text-base); font-weight: 700; color: var(--color-text); /* Elimină flash-ul albastru implicit al browserului la atingerea oricărui element clicabil pe telefon (cerere user 2026-09-05, „de ce e tenta aia de albastru la select") — nefiind suprascris nicăieri, orice tap pe un card/rând arăta highlight-ul gri-albăstrui de sistem, în loc de feedback-ul propriu al jocului (hover/active state). */ -webkit-tap-highlight-color: transparent; } /* Selecția de text (drag pe ecran) folosea implicit albastrul de sistem — aliniată la tema aurie a jocului, aceeași cerere. */ ::selection { background: rgba(200,168,74,0.35); color: #fff; } /* Font universal — orice element moștenește automat */ input, button, select, textarea { font-family: var(--font); font-size: var(--text-base); } a { color: #ffcc66; text-decoration: none; } /* Jocul e o aplicație, nu un site de conținut — dezactivăm meniul nativ iOS/Android (Partajați/Salvați în Poze/Copiați) care apare la apăsare lungă pe orice imagine, plus tragerea nativă a imaginii în afara paginii. */ img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .auth-page { position: relative; min-height: 100vh; display: flex; align-items: stretch; overflow: hidden; background: linear-gradient(135deg, #1a1206 0%, #0c0802 100%); } /* Gloanțe/tuburi împrăștiate pe fundal, în spatele cardului — decor pur, fără interacțiune */ .auth-bullets { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .auth-bullet { position: absolute; width: 46px; height: auto; opacity: 0.4; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); } .auth-form-wrap { position: relative; z-index: 1; } /* ── Panou hero — cast de personaje + tagline + descriere ── */ .auth-hero { flex: 1 1 58%; position: relative; display: flex; align-items: flex-end; min-height: 100vh; overflow: hidden; background: linear-gradient(160deg, rgba(36,26,8,0.7) 0%, rgba(12,8,2,0.88) 100%), url('../img/auth/hero_bg_city.webp') center / cover no-repeat, linear-gradient(160deg, #241a08 0%, #0c0802 100%); } /* Cei 3 personaje — transparent cutout, aliniați jos, mafiotul central mai mare */ .auth-hero-cast { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } .auth-hero-cast img { width: 36%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)); } /* Fiecare poză are alt spațiu gol sub picioare în interiorul canvas-ului — translateY compensează diferența (calculat din spațiul gol real măsurat pe fiecare fișier), ca toate 3 să calce pe aceeași linie de jos */ .auth-hero-cast img[data-role="mafia"] { width: 42%; z-index: 1; margin: 0 -26px; transform: translateY(0.2%); } .auth-hero-cast img[data-role="police"] { margin-right: -22px; transform: translateY(17.2%); } .auth-hero-cast img[data-role="business"] { margin-left: -22px; transform: translateY(9%); } /* Gradient peste personaje, ca textul de jos să rămână lizibil */ .auth-hero::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(12,8,2,0.05) 0%, rgba(12,8,2,0.55) 55%, rgba(12,8,2,0.98) 100%); pointer-events: none; } .auth-hero-content { position: relative; z-index: 3; padding: 48px 56px; width: 100%; /* fără asta, fiind singurul copil flex al .auth-hero fără flex-grow, se micșora la conținutul lui natural (shrink-to-fit) — cardurile de mai jos (flex:1 1 0) nu aveau atunci o lățime REALĂ de la care să crească, rămâneau la fel de strâmte indiferent cât măream max-width (bug găsit 2026-08-16). */ max-width: 780px; /* +120px (cerere user 2026-08-16) — cardurile de personaj aveau nevoie de mai mult loc pentru bonusul mărit cu 15%, era destul spațiu liber în .auth-hero nefolosit (verificat: 223px slack la 1440px). */ box-sizing: border-box; animation: authFadeUp .6s ease-out both; } .auth-hero-title { font-size: 60px; /* +15% (cerere user 2026-08-16), de la 52px */ font-weight: 800 !important; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(180deg, #f5dfa0 0%, #c8924a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px rgba(201,150,0,0.35); margin: 0 0 8px; } .auth-hero-tagline { font-size: 22px; /* +15% (cerere user 2026-08-16), de la 19px */ color: var(--color-accent); font-weight: 600 !important; margin: 0 0 16px; } .auth-hero-desc { font-size: 17px; /* +15% (cerere user 2026-08-16), de la 15px */ color: var(--color-text); line-height: 1.7; max-width: 500px; margin: 0 0 28px; } .auth-hero-chars { display: flex; gap: var(--gap-sm); flex-wrap: nowrap; } .auth-hero-char { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-sm); background: rgba(12,8,2,0.55); border: 1px solid rgba(180,130,20,0.4); border-radius: var(--radius-md); transition: border-color .15s, background .15s; flex: 1 1 0; min-width: 0; } .auth-hero-char:hover { border-color: rgba(201,150,0,0.7); background: rgba(20,14,4,0.7); } .auth-hero-char img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(201,150,0,0.5); flex-shrink: 0; } .auth-hero-char-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .auth-hero-char-info strong { font-size: 15px; /* +15% (cerere user 2026-08-16), de la 13px */ color: var(--color-text-strong); font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auth-hero-char-info span { font-size: 13px; color: var(--color-text-muted); } /* +15%, de la 11px */ /* Culori pe tip personaj — identice cu Forță(roșu)/Apărare(verde)/Viteză(albastru) din joc */ .auth-hero-char--police { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.3); } .auth-hero-char--mafia { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); } .auth-hero-char--business { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.3); } .auth-hero-char--police:hover { border-color: rgba(96,165,250,0.6); background: rgba(96,165,250,0.14); } .auth-hero-char--mafia:hover { border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.14); } .auth-hero-char--business:hover { border-color: rgba(74,222,128,0.6); background: rgba(74,222,128,0.14); } .auth-hero-char--police img { border-color: rgba(96,165,250,0.6); } .auth-hero-char--mafia img { border-color: rgba(248,113,113,0.6); } .auth-hero-char--business img { border-color: rgba(74,222,128,0.6); } .auth-hero-char--police .auth-hero-char-info strong { color: #60a5fa; } .auth-hero-char--mafia .auth-hero-char-info strong { color: #f87171; } .auth-hero-char--business .auth-hero-char-info strong { color: #4ade80; } /* ── Panou formular ── */ .auth-form-wrap { flex: 1 1 42%; min-width: 340px; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card p.auth-terms-link { margin: 4px 0 0; text-align: center; font-size: var(--text-xs); } .auth-terms-link a { color: var(--color-text-muted); } .auth-terms-link a:hover { color: var(--color-accent); } .auth-card p.auth-forgot-link { margin: -6px 0 0; text-align: right; font-size: var(--text-xs); } .auth-forgot-link a { color: var(--color-text-muted); } .auth-forgot-link a:hover { color: var(--color-accent); } /* „Am uitat PIN-ul" — caseta de Setări + modalul de PIN de cont (același efect ca .auth-forgot-link de la parolă, dar aplicat direct pe , fără element-părinte dedicat) */ .account-pin-forgot-link { color: var(--color-text-muted); } .account-pin-forgot-link:hover { color: var(--color-accent); } @media (max-width: 860px) { /* Fundal continuu (cerere user 2026-08-30, „prea sec, dinamitează-l puțin" — mockup-uri A+B aprobate): pe desktop, .auth-hero are propriul fundal (oraș+gradient), confinat la cutia lui de 58% lățime/100vh. Pe mobil, stivuit, .auth-hero se strânge la o bandă mică (vezi mai jos) — dacă păstra fundalul DOAR acolo, restul paginii (formularul) rămânea pe negru plat, fără nicio atmosferă, exact „golul" reclamat de user. Fix: mutăm fundalul la nivel de PAGINĂ (.auth-page), doar pe mobil — .auth-hero devine transparent și lasă fundalul paginii să se vadă prin el, iar formularul de dedesubt moștenește aceeași scenă, nu una separată. Gradientul e mai lung/mai întunecat decât cel de pe desktop (trebuie să acopere o pagină mult mai înaltă, stivuită, nu doar o bandă de 220px) — ajunge aproape opac cu mult înainte de zona formularului, ca tranziția de la banda hero (care are propriul ei gradient, .auth-hero::before) să nu aibă „cusătură" vizibilă. .auth-crest/.auth-crest-guns — NEATINSE, poziția rămâne exact ca înainte (cerere user explicită, „nu vreau sa-l modificam deloc"). */ /* Corecție 2026-08-30 („când dăm pe Înregistrare, imaginea din spate își face zoom") — fundalul stătea direct pe .auth-page, a cărui înălțime CREȘTE odată cu formularul (Înregistrare are mai multe câmpuri decât Autentificare) — cu `background-size:cover`, o cutie mai înaltă obligă imaginea să se scaleze din nou ca să acopere noua înălțime, exact „zoom"-ul urât reclamat de user. Fix: fundalul trece pe un strat separat, .auth-page::before, cu `position:fixed; inset:0` — dimensiunea lui e mereu exact viewport-ul (100vw×100vh), complet decuplată de cât de lungă e pagina/formularul activ, deci nu se mai recalculează NICIODATĂ la schimbarea de tab. z-index:0 pe .auth-page (alături de position:relative, deja moștenit) îl ține în contextul de stivuire local, sub tot restul (hero/card, toate cu z-index ≥1). */ .auth-page { position: relative; z-index: 0; flex-direction: column; } .auth-page::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,14,5,0.12) 0px, rgba(16,11,3,0.4) 260px, rgba(10,7,2,0.85) 420px, rgba(8,5,1,1) 620px), url('../img/auth/hero_bg_city.webp') center top / cover no-repeat, linear-gradient(135deg, #1a1206 0%, #0c0802 100%); } /* Aceeași cauză ca la fundal (mai sus) — .auth-bullets (gloanțele decorative) e position:absolute; inset:0 relativ la .auth-page, iar fiecare glonț e poziționat cu top/left în PROCENTE (u-t-dXXp/u-l-dXXp) din cutia lui. Cum .auth-page crește la Înregistrare (mai multe câmpuri), procentele se recalculează pe o cutie mai înaltă și gloanțele se împrăștie mai la distanță unele de altele — „se lungesc" (cerere user 2026-08-30). Fix identic: fixat la viewport, decuplat complet de lungimea formularului. */ .auth-bullets { position: fixed; } /* Tuburile de gloanțe aproape că nu se mai vedeau (cerere user 2026-08-30) — opacitatea individuală (~30-40%, clase utilitare u-op-*) era gândită pt. un fundal mult mai gol; acum, lângă personajele mari + oraș, se pierdeau complet. Suprascriere uniformă, doar pe mobil — .auth-bullets .auth-bullet (2 clase) bate specificitatea claselor u-op-* (1 clasă), indiferent de ordinea din fișier. */ .auth-bullets .auth-bullet { opacity: 0.55; } .auth-hero { flex: none; min-height: 260px; background: none; align-items: flex-start; } /* Cerere user 2026-08-30 — text mutat sus (15px de la vârful benzii, nu jos unde cădea implicit din align-items:flex-end de mai sus) + centrat, „ca să vedem cum se vede" pe toate telefoanele (experiment vizual, nu decizie finală). .auth-hero-chars primește justify-content:center separat mai jos, lângă restul regulilor lui de pe mobil. */ .auth-hero-content { padding: 15px 22px 22px; max-width: none; text-align: center; } .auth-hero-title { font-size: 35px; } /* +15% (cerere user 2026-08-16), de la 30px */ .auth-hero-tagline { font-size: 18px; } /* micșorat pe mobil (cerere user 2026-08-30), de la 22px */ .auth-hero-desc { display: none; } /* Personajele/orașul erau aproape invizibile pe telefon (cerere user 2026-08-30, „de ce la mockup se văd mult mai bine?") — cauza reală: .auth-hero::before (gradientul care întunecă personajele pentru lizibilitatea textului) e calibrat pentru banda de 100vh de pe desktop; comprimat în banda de doar 220px de pe mobil, ajungea aproape opac (0,98) la doar ~120px de la vârf — îngropa personajele în negru înainte să apuce să se vadă. Bandă + personaje mărite puțin (260px, de la 220px; 36-42% → 42-50% lățime). Prima corecție (gradient mult mai discret) tot lăsa o umbrire vizibilă sus, peste chiar orașul/personajele pe care voiam să le arătăm — user a cerut explicit eliminarea ei ("elimina fundalul ala negru transparent din partea de sus"). Eliminat complet pe mobil: gradientul de PAGINĂ (.auth-page, mai sus în acest fișier) tot întunecă progresiv spre formular, suficient pt. lizibilitatea titlului (are propriul text-shadow/glow auriu) și a tagline-ului — fără alt strat suplimentar peste banda cu orașul. */ .auth-hero::before { display: none; } .auth-hero-cast img { width: 42%; } .auth-hero-cast img[data-role="mafia"] { width: 50%; } /* Cerere user 2026-08-30 — „mai coboară personajele până în spatele ferestrei de login, să pice picioarele": .auth-hero avea overflow:hidden (regula de bază), care tăia strict la marginea de jos a benzii de 260px — exact acolo unde translateY-ul fiecărui personaj (compensează spațiul gol din canvas, vezi .auth-hero-cast img[data-role] mai sus) îi împinge, de fapt, picioarele SUB acea margine. Fără clipping, picioarele continuă natural în josul paginii (pe fundalul deja întunecat de .auth-page, mai sus) până ajung sub cardul de login — care primește z-index mai mare ca să rămână deasupra, „înghițind" vizual picioarele, nu invers. .auth-page (părintele) își păstrează propriul overflow:hidden — simplă plasă de siguranță la marginea paginii, nu intervine aici (personajele rămân cu mult în interiorul paginii). .auth-crest/.auth-crest-guns — tot neatinse. */ .auth-hero { overflow: visible; } /* overflow:visible singur nu era de-ajuns — translateY-ul fiecărui personaj (0,2%-17,2%) fusese calculat doar ca să compenseze spațiul gol din canvas, nu ca să împingă picioarele până în josul paginii; efectiv picioarele se opreau tot cam pe unde era vechea tăietură, cu mult deasupra cardului (care începe abia la +80px sub bandă, din .auth-form-wrap padding-top). Împins acum și .auth-hero-cast (cutia lor de referință) 110px mai jos — toate 3 personajele coboară proporțional cu asta, PESTE translateY-ul lor propriu (care rămâne neatins) — suficient ca picioarele să ajungă vizibil în spatele cardului. Mărit la -190px (cerere user 2026-08-30, „ce ai mai modifica" — golul dintre tagline și crest + capul mafiotului lipit de „CARTELLUM"): coborând tot stratul mai mult, (a) capul mafiotului (cel mai mare/central, translateY propriu aproape 0) se depărtează de titlu, (b) toate 3 umplu vizual golul de skyline gol de deasupra cardului. Valoare estimată, nu verificată live (nu pot testa vizual pe acest proiect) — posibil de ajustat fin după ce userul confirmă cum arată. */ .auth-hero-cast { bottom: -190px; } .auth-form-wrap { position: relative; z-index: 4; } /* Rândul de personaje (chip-urile Polițist/Mafiot/Om de afaceri, concept B) — eliminat de pe mobil (cerere user 2026-08-30, „pare că nu sunt de aici"): acum că personajele mari (concept A) coboară vizibil în spatele cardului, chip-urile mici deveneau redundante/ nepotrivite vizual. Markup-ul (.auth-hero-chars) rămâne în DOM — doar ascuns — desktop-ul (cardul lat cu avatar+nume+bonus) rămâne complet neatins. */ .auth-hero-chars { display: none; } /* align-items:center (regula de bază, gândită pt. desktop — hero+formular alături, pe toată înălțimea ecranului) centrează caseta VERTICAL în .auth-form-wrap; pe mobil (stivuit), o casetă mult mai înaltă (Înregistrare, cu mai multe câmpuri decât Autentificare) împinsă din centrare urcă suficient cât să se suprapună cu secțiunea hero de deasupra — emblema de sus a cardului (.auth-crest) ajungea vizual „sub" imaginea cu cei 3 (cerere user 2026-07-19). Aliniată sus, o casetă mai înaltă doar se întinde în jos (mai mult scroll), nu mai urcă în zona hero-ului. Padding-top de 72px (nu doar cei 20px de bază): emblema (.auth-crest) atârnă intenționat DEASUPRA marginii de sus a cardului (translateY -58%, ~87px din propria ei înălțime) — fără acest spațiu suplimentar, chiar și aliniată sus, caseta pornea prea aproape de hero și emblema tot intra peste imaginea cu cei 3. Verificat live (getBoundingClientRect): 72px e pragul minim de neatingere. */ .auth-form-wrap { padding: 80px 16px 40px; align-items: flex-start; } } @keyframes authFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .auth-card { width: 100%; max-width: 420px; background: linear-gradient(160deg, rgba(28,18,5,0.99) 0%, rgba(12,8,2,1) 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(201,150,0,0.08); padding: 44px 24px 0; overflow: visible; position: relative; animation: authFadeUp .6s ease-out .1s both; } .auth-card::after { content: ''; display: block; height: 10px; margin: 24px -24px 0; border-radius: 0 0 15px 15px; background: linear-gradient(90deg, transparent 0%, rgba(180,130,20,0.5) 20%, rgba(201,150,0,0.7) 50%, rgba(180,130,20,0.5) 80%, transparent 100%); } /* ── Emblemă decorativă — 2 pistoale încrucișate, "călare" pe marginea de sus a cardului ── */ .auth-crest { position: absolute; top: 0; left: 50%; transform: translate(-50%, -58%); z-index: 5; pointer-events: none; } .auth-crest-guns { width: 128px; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 5px rgba(201,150,0,0.22)); } .auth-card .auth-tabs { margin: 0 0 20px; border-bottom: none; } .auth-tab-btn { font-size: 15px; padding: 8px 20px; } .auth-panel { display: none; } .auth-panel.active { display: block; animation: authFadeUp .35s ease-out both; } .auth-form { display: flex; flex-direction: column; gap: var(--gap-lg); padding-bottom: 24px; } .auth-field { display: flex; flex-direction: column; gap: 4px; } .auth-field-hint { font-size: var(--text-xs); min-height: 14px; padding: 0 2px; } .auth-field-hint--checking { color: var(--color-text-muted); } .auth-field-hint--ok { color: #4ade80; } .auth-field-hint--taken { color: #f87171; } .auth-form input, .auth-form select, .auth-form textarea { width: 100%; padding: 14px; border: 1px solid rgba(180,130,20,0.3); border-radius: 10px; background: rgba(0,0,0,0.35); color: #ffffff; /* 16px FIX — sub 16px, Safari pe iOS face auto-zoom la focus pe câmp (comportament nativ); la ≥16px nu se mai întâmplă deloc (cerere user 2026-09-06: „eliminăm complet"). */ font-size: 16px; font-family: var(--font); box-sizing: border-box; resize: vertical; transition: border-color .15s, background .15s; } .auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { outline: none; border-color: rgba(201,150,0,0.6); background: rgba(0,0,0,0.5); } /* Câmpurile autocompletate de browser (email/parolă salvate) — Chrome/Edge suprascriu fundalul cu propria nuanță (albăstruie pe teme întunecate), imun la background: normal din CSS. Singura metodă care funcționează e un box-shadow inset uriaș, care "acoperă" vizual fundalul impus de browser cu culoarea noastră (user 2026-07-21, "de ce e fundalul ala cu nuanta aia de albastru"). */ .auth-form input:-webkit-autofill, .auth-form input:-webkit-autofill:hover { -webkit-text-fill-color: #ffffff; caret-color: #ffffff; -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.35) inset; transition: background-color 9999s ease-in-out 0s; } .auth-form input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; caret-color: #ffffff; -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.5) inset; transition: background-color 9999s ease-in-out 0s; } .auth-form select option { background-color: #150f08; color: #ffffff; } .auth-form input::placeholder, .auth-form textarea::placeholder { color: #7a6a4a; } /* ── Dropdown județ/tip caracter — reutilizează componenta .gym-turbo-dropdown (aceeași folosită la filtrele din Căutare) — full width, ca să se potrivească cu restul câmpurilor din formular ── */ .auth-form .auth-turbo-dropdown { width: 100%; } .auth-turbo-dropdown .gym-turbo-selected { width: 100%; box-sizing: border-box; justify-content: space-between; padding: 14px; border-radius: 10px; background: rgba(0,0,0,0.35); border-color: rgba(180,130,20,0.3); font-size: var(--text-md); font-weight: 400; color: var(--color-accent); } .auth-turbo-dropdown.open .gym-turbo-selected { border-color: rgba(201,150,0,0.6); background: rgba(0,0,0,0.5); } .auth-turbo-dropdown.auth-turbo-error .gym-turbo-selected { border-color: #f87171; } .auth-turbo-dropdown .gym-turbo-options { width: 100%; max-height: 240px; background: #150f08; border-color: rgba(180,130,20,0.4); box-shadow: 0 16px 34px rgba(0,0,0,0.6); } .auth-turbo-dropdown .gym-turbo-option { font-size: var(--text-base); font-weight: 400; padding: 10px 14px; color: var(--color-accent); } .auth-form button { padding: 14px; border: none; border-radius: 10px; background: linear-gradient(135deg, #c8a84a, #f0d060); color: #1a1008; font-weight: bold; font-size: var(--text-md); cursor: pointer; transition: opacity .15s; } .auth-form button:hover { opacity: 0.88; } .auth-checkbox { display: flex; align-items: flex-start; gap: var(--gap-sm); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; cursor: pointer; } .auth-checkbox input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #c8a84a; flex-shrink: 0; cursor: pointer; } .auth-checkbox a { color: var(--color-accent-dim); } .auth-checkbox a:hover { color: var(--color-accent); } .auth-card p { text-align: center; color: var(--color-text-muted); font-size: var(--text-base); } .auth-terms-link .auth-link-sep { margin: 0 6px; opacity: .5; } /* ── Modal Termeni / Contact — deschis din login, fără navigare ── */ .auth-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .auth-modal-overlay.open { opacity: 1; pointer-events: all; } .auth-modal-box { width: 100%; max-width: 560px; max-height: calc(100vh - 48px); background: linear-gradient(160deg, rgba(28,18,5,0.99) 0%, rgba(12,8,2,1) 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(201,150,0,0.08); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.96); transition: transform 0.2s; } .auth-modal-overlay.open .auth-modal-box { transform: scale(1); } .auth-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(180,130,20,0.25); flex-shrink: 0; } .auth-modal-title { font-size: 18px; font-weight: 700 !important; color: #e8c97a; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 0 10px rgba(201,150,0,0.35); margin: 0; } .auth-modal-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(180,130,20,0.4); background: rgba(0,0,0,0.3); color: var(--color-text-muted); font-size: 16px; cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; } .auth-modal-close:hover { color: var(--color-accent); border-color: rgba(201,150,0,0.6); } .auth-modal-body { padding: 20px 22px 24px; overflow-y: auto; overscroll-behavior: contain; /* vezi comentariul de la .dock-panel-body — fix pull-to-refresh pe telefon */ } .auth-modal-body .terms-intro { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(180,130,20,0.2); } .auth-modal-body .terms-section { margin-bottom: 16px; } .auth-modal-body .terms-section h3 { font-size: var(--text-md); color: var(--color-accent-dim); margin: 0 0 4px; } .auth-modal-body .terms-section p { font-size: var(--text-base); color: var(--color-text); line-height: 1.6; margin: 0; } .auth-modal-body .auth-form { padding-bottom: 0; gap: var(--gap-md); } @media (max-width: 480px) { .auth-card { padding: 36px 18px 0; border-radius: 12px; } .auth-card::after { margin: 20px -18px 0; } .auth-crest-guns { width: 100px; } .auth-form input, .auth-form select, .auth-form textarea { font-size: 16px; /* rămâne 16px și pe telefon — vezi FIX-ul de auto-zoom iOS de mai sus */ padding: 13px; } .auth-form button { font-size: var(--text-md); padding: 13px; } } /* ── Pagină Termeni și Condiții ── */ .terms-page { min-height: 100vh; display: flex; justify-content: center; padding: 48px 16px; background: linear-gradient(135deg, #1a1206 0%, #0c0802 100%); } .terms-card { width: 100%; max-width: 720px; background: linear-gradient(160deg, rgba(28,18,5,0.99) 0%, rgba(12,8,2,1) 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(201,150,0,0.08); padding: 32px 36px 26px; height: fit-content; } .terms-card h1 { margin: 0 0 6px; color: #e8c97a; font-size: 28px; letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(201,150,0,0.35); } .terms-intro { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(180,130,20,0.2); } .terms-section { margin-bottom: 20px; } .terms-section h2 { font-size: var(--text-md); color: var(--color-accent-dim); margin: 0 0 6px; } .terms-section p { font-size: var(--text-base); color: var(--color-text); line-height: 1.7; margin: 0; } .terms-back { display: inline-block; margin-top: 8px; font-size: var(--text-base); color: var(--color-accent-dim); } .terms-back:hover { color: var(--color-accent); } .auth-form label { font-size: var(--text-base); color: var(--color-text); } /* Alert messages */ .alert { padding: var(--gap-lg) 16px; border-radius: 10px; margin-bottom: var(--gap-lg); font-size: var(--text-base); font-weight: 500; } .alert-error { background: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.4); color: #ff6b7a; } .alert-success { background: rgba(40, 167, 69, 0.15); border: 1px solid rgba(40, 167, 69, 0.4); color: #5dd87a; } /* ══════════════════════════════════════════════ HUD PANEL — stânga sus ══════════════════════════════════════════════ */ .hud-panel { position: relative; z-index: 10; display: flex; align-items: flex-start; gap: var(--gap-lg); /* Vinietă radială (cerere user 2026-08-16, varianta „B — Placă de bandă" din 4 direcții testate cu machetă live) — înlocuiește gradientul liniar plat, mai multă adâncime pe colțul stânga-sus, unde e mereu avatarul. */ background: radial-gradient(circle at 30% 20%, rgba(40,26,8,0.97) 0%, rgba(12,8,2,0.99) 75%); border: 1px solid rgba(180,130,20,0.45); padding: var(--gap-lg) 18px var(--gap-lg) var(--gap-lg); clip-path: polygon( 14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px ); box-shadow: 0 4px 24px rgba(0,0,0,0.6); } /* Textură art-deco (romburi aurii) și, ulterior, o imagine decorativă (pod+apă+clădiri) peste tot panoul — ambele ÎNCERCATE și REVENITE (cerere user 2026-09-05: „tot mi se pare puțin ciudat, parcă nu e ceea ce-mi doream" — patch-uri succesive peste structura veche, nu un design unitar ca referința arătată). În locul lor: fum de țigară asimetric (mockup „T", ales de user dintr-un set de 18+ variante) — 3 pete radiale discrete, concentrate jos-dreapta (zona liberă a panoului, nu peste avatar/nume), NU un tipar repetat ca încercările anterioare. Moștenește octogonul lui .hud-panel. Gloanțele (.hud-bullets, markup index.php) sunt DEASUPRA acestui strat dar SUB conținutul real (.hud-panel-body) — vezi z-index-urile de mai jos. */ .hud-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 140px 70px at 80% 30%, rgba(220,220,225,0.1), transparent 70%), radial-gradient(ellipse 100px 55px at 65% 60%, rgba(220,220,225,0.07), transparent 70%), radial-gradient(ellipse 70px 40px at 90% 70%, rgba(220,220,225,0.05), transparent 70%); clip-path: polygon( 14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px ); z-index: 0; pointer-events: none; } /* Gloanțe decorative — reutilizează EXACT assets-urile deja existente (assets/img/auth/bullet_*, folosite identic pe pagina de login, .auth-bullets/.auth-bullet) — cerere user 2026-09-05, „folosim gloanțele pe care le am eu deja ca imagini". Scop mic (12-22px) + opacitate joasă (u-op-15, aceeași clasă utilitară), scopate DOAR pe zona liberă (dreapta/jos), nu peste avatar/text — poziții/rotații din clasele utilitare deja existente (u-t-*p/u-l-*p/u-tf-rotate-*), nicio clasă nouă. */ .hud-bullets { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hud-bullet { position: absolute; height: auto; } /* Accent lines la colțuri — auriu vintage */ .hud-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(201,150,0,0.85) 22px, transparent 22px) top left / 100% 2px no-repeat, linear-gradient(to left, rgba(201,150,0,0.85) 22px, transparent 22px) top right / 100% 2px no-repeat, linear-gradient(to right, rgba(201,150,0,0.85) 22px, transparent 22px) bottom left / 100% 2px no-repeat, linear-gradient(to left, rgba(201,150,0,0.85) 22px, transparent 22px) bottom right / 100% 2px no-repeat, linear-gradient(to bottom, rgba(201,150,0,0.85) 22px, transparent 22px) top left / 2px 100% no-repeat, linear-gradient(to top, rgba(201,150,0,0.85) 22px, transparent 22px) bottom left / 2px 100% no-repeat, linear-gradient(to bottom, rgba(201,150,0,0.85) 22px, transparent 22px) top right / 2px 100% no-repeat, linear-gradient(to top, rgba(201,150,0,0.85) 22px, transparent 22px) bottom right / 2px 100% no-repeat; clip-path: polygon( 14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px ); pointer-events: none; } /* Wrapper fără clip-path în jurul .hud-panel — vezi comentariul din markup (index.php). Înălțimea lui = înălțimea reală a panoului (butonul e absolute, nu contribuie la ea). */ .hud-panel-wrap { position: relative; } /* Stivă (bandă mini bani/aur + buton rotund de minimizare) — DOAR pe telefon; pe browser rămâne complet ascunsă, panoul se comportă exact ca înainte. Stânga: 12px de la marginea ecranului, ca la butoanele de zoom pe telefon (.map-zoom-controls) — .hud-panel-wrap (părintele relativ) începe mereu la var(--gap-lg)=14px de la marginea ecranului, deci left:calc(12px - var(--gap-lg)) aduce stiva exact la 12px absolut, indiferent de lățime. flex-direction:column, ca banda de bani să stea DEASUPRA butonului. top implicit (panou deschis): sub panou (top:100% + margin-top:10px), la aceeași distanță ca între bula de chat și bara de jos — banda de bani e oricum ascunsă atunci (vezi mai jos), deci doar butonul contează, corect poziționat sub panoul înalt. top când panoul e colapsat (regula de mai jos, mai specifică): 0, adică exact la aceeași distanță de marginea de sus ca și caseta HUD (cerere user) — banda de bani e vizibilă atunci, aliniată cu panoul; butonul rămâne dedesubt, prin gap-ul de flex, nu suprapus. */ .hud-panel-toggle-stack { display: none; position: absolute; top: 100%; margin-top: 10px; left: calc(12px - var(--gap-lg)); z-index: 15; flex-direction: column; align-items: flex-start; gap: 10px; } .hud-panel.is-collapsed ~ .hud-panel-toggle-stack { top: 0; margin-top: 0; } .hud-panel-toggle-btn { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; padding: 0; /* Auriu, la fel ca la casetele de bani (.hud-mini-resource) — nu mai e albastru */ border: 2px solid rgba(180,130,20,0.45); cursor: pointer; flex-shrink: 0; /* Fundal identic cu .stat-card (Viață/Energie/etc.) — cerere user 2026-08-08, fostul #10141c avea o nuanță ușor albăstruie */ background: linear-gradient(135deg, rgba(28,18,5,0.97), rgba(18,12,3,0.97)); box-shadow: 0 2px 10px rgba(0,0,0,0.5); } .hud-panel-toggle-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Wrapper buton Misiuni mobil — oglindă exactă a .hud-panel-toggle-stack (poziție, dimensiune), doar în dreapta în loc de stânga (cerere user 2026-08-08). Ascuns complet pe desktop — la fel ca .hud-panel-toggle-stack, doar vizibil în media query-ul de telefon. Preia poziționarea absolută de la buton (mutată aici din .hud-missions-btn-mobile, sesiunea 2026-08-09), ca să poată servi drept ancoră (position:relative) pentru caseta de misiuni — vezi .missions-panel. */ .hud-missions-wrap-mobile { display: none; position: absolute; top: 100%; margin-top: 10px; /* right: calc(12px - var(--gap-lg)) părea oglinda formulei de stânga, dar .hud-panel-wrap (părintele relativ) nu are lățime fixă/predictibilă ca să ancorezi de marginea lui DREAPTĂ — spre deosebire de marginea stângă (mereu la var(--gap-lg) de ecran). Folosim left calculat din lățimea ecranului, ca butonul să ajungă la EXACT 12px de marginea dreaptă REALĂ a ecranului, indiferent de lățimea containerului. */ left: calc(100vw - 58px - var(--gap-lg)); z-index: 15; width: 46px; height: 46px; } .hud-missions-btn-mobile { position: static; display: flex; width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 2px solid rgba(180,130,20,0.45); cursor: pointer; flex-shrink: 0; /* Fundal identic cu .stat-card (Viață/Energie/etc.) — cerere user 2026-08-08 */ background: linear-gradient(135deg, rgba(28,18,5,0.97), rgba(18,12,3,0.97)); box-shadow: 0 2px 10px rgba(0,0,0,0.5); align-items: center; justify-content: center; transition: transform 0.15s; } .hud-missions-btn-mobile:hover { transform: scale(1.08); } .hud-missions-btn-mobile img { width: 30px; height: 30px; object-fit: contain; display: block; pointer-events: none; } /* top:66px = 56px (înălțimea benzii de bani, .hud-mini-slot colapsat) + 10px (gap-ul din .hud-panel-toggle-stack) — aliniază marginea de sus a acestui buton cu marginea de sus a avatarului din stânga (care e AL DOILEA element din stiva, sub banda de bani), nu cu marginea de sus a benzii de bani înseși. */ /* Wrapper buton Misiuni — desktop, sub regenerare (vezi comentariul din markup, index.php). Preia align-self:flex-end de la buton (mutat aici din .hud-missions-btn, sesiunea 2026-08-09) + position:relative, ca să servească drept ancoră pentru caseta de misiuni — vezi .missions-panel. Ascuns pe telefon — acolo folosește propria variantă mobilă. */ .hud-missions-wrap-desktop { display: flex; align-self: flex-end; margin-top: 2px; position: relative; } /* Buton Misiuni — desktop. Aceeași temă vizuală ca .hud-missions-btn-mobile (rotund, fundal gradient ca .stat-card, bordură aurie). */ .hud-missions-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 2px solid rgba(180,130,20,0.45); cursor: pointer; flex-shrink: 0; background: linear-gradient(135deg, rgba(28,18,5,0.97), rgba(18,12,3,0.97)); box-shadow: 0 2px 10px rgba(0,0,0,0.5); transition: transform 0.15s; } .hud-missions-btn:hover { transform: scale(1.08); } .hud-missions-btn img { width: 30px; height: 30px; object-fit: contain; display: block; pointer-events: none; } /* Efect „misiune gata de revendicat" — puls auriu în jurul butonului rotund, aplicat la ambele variante (desktop/telefon) prin aceeași clasă (cerere user 2026-08-09). Border-ul auriu de bază rămâne neschimbat — pulsul e doar box-shadow-ul animat, ca la .building-prod-timer--ready (aceeași rețetă), dar în tonul auriu al butonului, nu verde. */ .hud-missions-btn--ready { animation: missionsBtnReadyPulse 1.2s ease-in-out infinite; } @keyframes missionsBtnReadyPulse { 0%, 100% { box-shadow: 0 0 8px rgba(245,197,66,0.6), 0 0 0 2px rgba(245,197,66,0.3); } 50% { box-shadow: 0 0 18px rgba(245,197,66,1), 0 0 0 3px rgba(245,197,66,0.7); } } /* Puls roșu pe butonul de Misiuni când apare o misiune NOUĂ, încă necitită (panoul n-a fost deschis pentru ea) — cerere user 2026-08-10: „prima dată pulsația să apară pe misiune, ca jucătorul să citească misiunea, să știe ce face", ÎNAINTE ca ghidul să sară direct pe ținta reală de pe hartă. Aceeași culoare roșie ca .mission-guide-highlight (missionGuidePulse), dar tehnica box-shadow de la .hud-missions-btn--ready (cele două nu apar niciodată simultan — vezi missionsRenderPanel(): auriu = misiune gata de revendicat, roșu = misiune nouă, încă nedeschisă). */ .hud-missions-btn--guide-pulse { animation: missionsBtnGuidePulse 1.1s ease-in-out infinite; } @keyframes missionsBtnGuidePulse { 0%, 100% { box-shadow: 0 0 8px rgba(255,30,30,0.6), 0 0 0 2px rgba(255,30,30,0.3); } 50% { box-shadow: 0 0 18px rgba(255,30,30,1), 0 0 0 3px rgba(255,30,30,0.7); } } /* Battle Pass — punct de intrare lângă caseta de profil, feature inactiv implicit (cerere user 2026-08-21, design provizoriu — „revenim la design" mai târziu). Desktop: wrapper absolut sub #hudPanelWrap, oglindă exactă a .hud-panel-toggle-stack (același top/left), doar ascuns pe telefon în loc de arătat. Telefon: buton simplu, copil direct al .hud-panel-toggle-stack — se stivuiește gratis sub .hud-panel-toggle-btn prin flex-direction:column+gap deja existent acolo, fără poziționare proprie. */ .battlepass-hud-btn-wrap-desktop { display: flex; /* flex-direction:column + gap — cerere user 2026-08-23: containerul găzduiește acum ȘI butonul Ruletă (frate, sub Battle Pass), stivuire gratuită prin flexbox, la fel ca .hud-panel-toggle-stack pe telefon. Aditiv — fără efect vizual cât timp are un singur copil vizibil (poziția absolută/left rămâne neschimbată). */ flex-direction: column; gap: 10px; position: absolute; top: 100%; margin-top: 10px; /* 24px absolut de marginea ecranului — aceeași distanță ca .map-zoom-controls (butonul Wiki), cerere user 2026-08-21. #hudPanelWrap (părintele relativ) pornește la var(--gap-lg) de margine, deci scădem diferența, exact formula deja folosită la .hud-panel-toggle-stack pentru 12px. */ left: calc(24px - var(--gap-lg)); z-index: 15; } /* Stil identic cu .map-zoom-btn (butoanele Wiki/Zoom/Magazin de pe hartă) — cerere user 2026-08-21 „fa butonul precum cele de jos": fără cerc/fundal/bordură proprii, doar iconița (deja auto-suficientă vizual, are propriul chenar auriu în imagine). Reguli identice pentru .roulette-hud-btn (buton nou, cerere user 2026-08-23) — duplicat cu nume separat în loc de redenumire, aceeași convenție deja stabilită în proiect (.map-pin-lock-icon vs .bodyguard-lock-icon, sesiunea 89), ca să nu riscăm butonul Battle Pass deja funcțional. */ .battlepass-hud-btn, .roulette-hud-btn { position: relative; width: auto; height: auto; background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s; box-shadow: none; flex-shrink: 0; } .battlepass-hud-btn:hover, .roulette-hud-btn:hover { opacity: 0.75; } .battlepass-hud-btn img, .roulette-hud-btn img { /* 56x56 — aceeași dimensiune ca .map-zoom-btn img (Wiki/Zoom/Magazin), cerere user 2026-08-21. */ width: 56px; height: 56px; object-fit: contain; display: block; pointer-events: none; } @media (max-width: 768px) { .hud-missions-wrap-desktop { display: none; } .battlepass-hud-btn-wrap-desktop { display: none; } } /* Panou Ruletă (cerere user 2026-08-23) — roata cu 6 camere, portată direct din mockup-ul interactiv deja aprobat în conversație (varianta A: toate premiile vizibile, se ascund la tragere, reapar la final cu cea câștigătoare evidențiată). Poziții FIXE pe clase (nu inline style, regula 9 CLAUDE.md) — cele 6 camere sunt mereu la aceleași 6 unghiuri (0/60/120/180/ 240/300°), calculate pe un cerc de 150x150 cu camere de 30x30. */ .roulette-ticket-row { display: flex; justify-content: center; margin-bottom: 16px; } /* Jeton de cazinou (nu doar o pastilă plată) — mockup aprobat de user 2026-08-25. */ .roulette-ticket-chip { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; border-radius: 30px; background: radial-gradient(circle at 30% 30%, #2a1f10, #17110a); border: 2px solid #caa23f; box-shadow: 0 0 10px rgba(202,162,63,0.45), inset 0 0 6px rgba(255,220,140,0.15); } .roulette-ticket-icon { width: 20px; height: 20px; object-fit: contain; } .roulette-ticket-label { color: #a89a78; font-size: 12px; } .roulette-ticket-badge { color: #ffe9a8; font-size: 15px; font-weight: 900; } .roulette-wheel-pointer-wrap { display: flex; justify-content: center; margin-bottom: -4px; position: relative; z-index: 2; } .roulette-wheel-pointer { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #f0c040; filter: drop-shadow(0 0 4px rgba(240,192,64,0.8)); } .roulette-cylinder-wrap { display: flex; justify-content: center; margin: 4px 0 20px; } /* Bezel metalic FIX (nu se rotește) — doar .roulette-cylinder (chambers) se rotește la tragere; nituri + butucul central rămân nemișcate, ca pe un revolver real (cerere user 2026-08-25). */ .roulette-bezel { position: relative; width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #4a4a50, #1c1c1f 70%); border: 3px solid #8a8a90; box-shadow: 0 0 0 2px #0a0a0c, 0 6px 14px rgba(0,0,0,0.55), inset 0 2px 5px rgba(255,255,255,0.08); } .roulette-rivet { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8e0c8, #8a8060); box-shadow: 0 0 3px rgba(0,0,0,0.6); z-index: 3; } .roulette-rivet-top { top: 6px; left: 50%; margin-left: -3px; } .roulette-rivet-bottom { bottom: 6px; left: 50%; margin-left: -3px; } .roulette-rivet-left { left: 6px; top: 50%; margin-top: -3px; } .roulette-rivet-right { right: 6px; top: 50%; margin-top: -3px; } /* Cameră/tambur mărite la cererea user 2026-08-25 ("cerculetele cu premii putin mai mari") — 180x180 (de la 150x150), camere 36x36 (de la 30x30), rază 60px (de la 50px). Pozițiile de mai jos sunt recalculate pe aceeași metodă ca la dimensiunea veche (centru = (outer-2*border)/2, unghiuri 0/60/120/180/240/300° din ROULETTE_CHAMBER_ANGLES), nu doar scalate vizual din ochi. */ .roulette-cylinder { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2c18, #1a1208 70%); border: 3px solid #6b4a1e; position: relative; transition: transform 0.9s cubic-bezier(.2,.8,.3,1); } .roulette-cyl-hub { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f5d98a, #b8862f 75%); box-shadow: 0 0 10px rgba(245,197,66,0.5), inset 0 2px 3px rgba(255,255,255,0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; } .roulette-chamber { width: 36px; height: 36px; border-radius: 50%; background: #0d0904; border: 2px solid #55401f; position: absolute; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s, border-color 0.3s; } /* Inel colorat pe fiecare cameră, după VALOAREA premiului (nu șansa lui — cerere user 2026-08-23, „nu e treaba jucatorului cat este sansa") — doar semnal vizual „ăsta e premiul mare", consecvent cu accentul de pe rândurile din listă de mai jos. */ .roulette-chamber--dim { box-shadow: 0 0 0 2px rgba(140,140,140,0.5); } .roulette-chamber--mid { box-shadow: 0 0 6px rgba(205,127,50,0.6), 0 0 0 2px rgba(205,127,50,0.7); } .roulette-chamber--top { box-shadow: 0 0 10px rgba(245,197,66,0.9), 0 0 0 2px rgba(245,197,66,0.9); animation: roulette-chamber-pulse 1.8s ease-in-out infinite; } @keyframes roulette-chamber-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .roulette-chamber.winner { border-color: #f0c040; box-shadow: 0 0 10px rgba(240,192,64,0.7); animation: none; } /* Poziții recalculate — bug real găsit de user 2026-08-23 („nu sunt centrate perfect... se vede urat cand se invarte"): .roulette-cylinder are box-sizing:border-box + bordură de 3px, iar copiii poziționați absolut se raportează la marginea INTERIOARĂ a bordurii (padding box), nu la colțul vizual real (border box) — centrul folosit e (180-2*3)/2 = 87px, nu 90px. Rază 60px, unghiuri 0/60/120/180/240/300°; poziția fiecărei camere = centru + rază×(sin θ, -cos θ), minus jumătate din camera (18px), NU doar scalate vizual din vechile valori (150px→180px). */ .roulette-chamber-0 { top: 9px; left: 69px; } .roulette-chamber-1 { top: 39px; left: 120.96px; } .roulette-chamber-2 { top: 99px; left: 120.96px; } .roulette-chamber-3 { top: 129px; left: 69px; } .roulette-chamber-4 { top: 99px; left: 17.04px; } .roulette-chamber-5 { top: 39px; left: 17.04px; } .roulette-chamber-icon { width: 27px; height: 27px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; transition: opacity 0.25s; object-fit: contain; } .roulette-cylinder.hide-icons .roulette-chamber-icon { opacity: 0; } .roulette-pull-btn { display: block; width: 100%; text-align: center; background: linear-gradient(180deg, #f5d060, #c8941f); color: #2b1a04; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; border: none; border-radius: 10px; padding: 12px; box-shadow: 0 3px 0 #8a6212; cursor: pointer; position: relative; overflow: hidden; } .roulette-pull-btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: roulette-btn-shine 3s ease-in-out infinite; } @keyframes roulette-btn-shine { 0% { left: -40%; } 100% { left: 110%; } } .roulette-pull-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; } .roulette-pull-btn:disabled::after { animation: none; } /* Chip la lățimea conținutului (nu mai full-width) — cerere user 2026-08-25, mesajul s-a scurtat la doar iconiță+cantitate, o bară întinsă pe tot panoul arăta goală. display:table + margin:auto centrează un element shrink-to-fit indiferent de layout-ul părintelui. */ .roulette-result-msg { display: table; margin: 10px auto 0; text-align: center; font-size: 16px; font-weight: 700; padding: 8px 16px; border-radius: 20px; min-height: 16px; opacity: 0; transform: scale(0.85); transition: opacity 0.2s, transform 0.25s ease-out; } .roulette-result-msg.show { opacity: 1; transform: scale(1); } .roulette-result-msg.win { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); } .roulette-result-msg.lose { background: rgba(216,90,48,0.12); color: #e8865a; border: 1px solid rgba(216,90,48,0.35); } .roulette-result-icon { width: 24px; height: 24px; object-fit: contain; vertical-align: -6px; } .roulette-reward-table { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; } .roulette-reward-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-left: 4px solid transparent; border-radius: 4px 8px 8px 4px; padding: 8px 10px; font-size: 12px; transition: background 0.3s, border-color 0.3s; } .roulette-reward-row.flash { background: rgba(240,192,64,0.18); border-color: rgba(240,192,64,0.5); } /* Accent de valoare pe margine, ca pe camerele roții — Nimic estompat, restul pe 2 trepte (bani/aur vs. premiile rare) — cerere user 2026-08-25, mockup aprobat. */ .roulette-reward-row--dim { border-left-color: #5a5a5a; opacity: 0.6; } .roulette-reward-row--mid { border-left-color: #cd7f32; } .roulette-reward-row--top { border-left-color: #f5c542; background: rgba(245,197,66,0.06); } .roulette-reward-name { display: flex; align-items: center; gap: 10px; } .roulette-reward-icon-wrap { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .roulette-reward-row--dim .roulette-reward-icon-wrap { background: rgba(140,140,140,0.15); } .roulette-reward-row--mid .roulette-reward-icon-wrap { background: rgba(205,127,50,0.18); } .roulette-reward-row--top .roulette-reward-icon-wrap { background: rgba(245,197,66,0.18); } .roulette-reward-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* Slotul „Nimic" — „—" e un , nu . Ascundem caracterul (offset de baseline) și desenăm liniuța cu ::after → centrată perfect în cercul de 26px (cerere user 2026-08-31). */ span.roulette-reward-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 0; } span.roulette-reward-icon::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.55; } .roulette-reward-val { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; } .roulette-reward-row--top .roulette-reward-val { color: #f5c542; font-weight: 700; } /* Panou Tombolă (cerere user 2026-08-30) — urnă/cufăr centrate deasupra listelor de provocări/ premii, reutilizează .battlepass-challenge-row/.roulette-reward-row/.espionage-dossier-row pentru conținut, doar acest bloc mic e nou. */ .tombola-ticket-chip-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 16px; } /* Totalul de bilete înscrise la tombolă (cerere user 2026-08-31) — rând mic, șters, sub pastila cu biletele proprii. Aceeași filtrare ca pool-ul tragerii (doar jucători eligibili). */ .tombola-pool-total { font-size: 11px; color: #a89a78; } /* Rândul propriu din lista de câștigători recenți — evidențiat auriu (cerere user 2026-08-31, lista e globală, ale tale ies în evidență). Reutilizează .espionage-dossier-row. */ .espionage-dossier-row.tombola-winner-row--mine { border-color: rgba(255, 224, 138, 0.6); background: rgba(255, 224, 138, 0.12); } .tombola-winner-row--mine .espionage-dossier-label { color: #ffe08a; font-weight: 700; } .tombola-drum-wrap { display: flex; justify-content: center; margin: 12px 0; } .tombola-drum-img { display: block; max-width: 160px; width: 100%; height: auto; } /* Panoul Tombolă în fereastra de rezultate (1h după tragere) — pilulă „Extragere finalizată" deasupra listei de câștigători (cerere user 2026-08-31). */ .tombola-draw-done-badge { width: fit-content; max-width: 100%; margin: 0 auto 4px; padding: 5px 16px; border-radius: 999px; background: linear-gradient(135deg, #ffe9a8, #e0b84a 55%, #c9962f); border: 1px solid #8a6a22; color: #2a1c06; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 0 12px rgba(224, 184, 74, 0.5); } /* Cufărul Tombolă = premiul (cerere user 2026-08-31). Titlu „PREMIU TOMBOLĂ", cufărul cu sigiliu „?" + badge „N câștigători", apoi countdown-ul. Fără chenar/fundal — doar conținutul, centrat (cerere user 2026-08-31: „eliminăm chenarul, lăsăm tot așa cum este"). */ .tombola-prize-card { width: fit-content; max-width: 100%; margin: 4px auto 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 26px 8px; text-align: center; } .tombola-prize-card-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; } /* Câți câștigători trage sezonul — badge dinamic (valoarea vine din Panou Admin), auriu „luminos", pe DIAGONALĂ peste colțul cufărului (ca o etichetă/panglică), cu puls de glow. Cerere user 2026-08-31. */ .tombola-winners-badge { position: absolute; bottom: 10px; left: -21px; z-index: 2; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, #ffe9a8, #e0b84a 55%, #c9962f); border: 1px solid #8a6a22; color: #2a1c06; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; transform: rotate(-11deg); animation: tombolaWinnersGlow 2s ease-in-out infinite; } @keyframes tombolaWinnersGlow { 0%, 100% { box-shadow: 0 0 7px rgba(255, 210, 110, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 17px rgba(255, 228, 155, 0.95), 0 1px 3px rgba(0, 0, 0, 0.45); } } .tombola-prize-chest-wrap { position: relative; width: fit-content; } .tombola-prize-chest { display: block; max-width: 128px; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); animation: tombolaPrizeFloat 3.4s ease-in-out infinite; } @keyframes tombolaPrizeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .tombola-prize-seal { position: absolute; top: -6px; right: -10px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #caa23f 70%, #8a6a22); border: 2px solid #3a2c10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(255, 255, 255, 0.35); color: #2a1c06; font-size: 19px; font-weight: 900; line-height: 1; } /* Countdown-ul de tragere, mutat ÎN caseta de premiu (cerere user 2026-08-31: „prea multe casete") — rând separat cu linie de despărțire în partea de jos a cardului. */ .tombola-prize-draw { align-self: stretch; margin-top: 4px; padding-top: 9px; border-top: 1px solid rgba(202, 162, 63, 0.3); display: flex; flex-direction: column; align-items: center; gap: 1px; } .tombola-prize-draw-label { color: #a89a78; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .tombola-prize-draw-time { color: #ffe08a; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 9px rgba(255, 200, 90, 0.5); } .tombola-prize-draw--live .tombola-prize-draw-time { color: #ff7a5c; text-shadow: 0 0 11px rgba(255, 90, 60, 0.6); animation: tombolaDrawLivePulse 0.9s ease-in-out infinite; } @keyframes tombolaDrawLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Animația de tragere LIVE (tombolaEnterDrawMode/tombolaDrawRun, index.php) — la 0h0m0s întregul panou e înlocuit cu un „tambur de loto": physics JS pur + rAF, bile aurii cu „C", cascadă, apoi o tură per câștigător (rotire → oprire → bila trasă → nume dedesubt → pauză 3s). Cerere user 2026-08-31, prototip aprobat. transform-ul per-cadru al bilelor e setat din JS (excepția legitimă de stil dinamic, ca la roata Ruletei). */ .tombola-draw { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 14px; } .tombola-draw-title { font-size: 12px; letter-spacing: 0.1em; color: #e0b84a; text-transform: uppercase; font-weight: 800; min-height: 15px; text-align: center; } .tombola-draw-count { font-size: 44px; font-weight: 900; color: #ffe9a8; text-shadow: 0 0 16px rgba(255,210,110,0.6); min-height: 0; display: flex; align-items: center; transition: transform 0.2s; } .tombola-draw-count.tick { transform: scale(1.6); } .tombola-draw-drum-outer { position: relative; width: 200px; height: 200px; } .tombola-draw-drum { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 38% 30%, rgba(255,240,210,0.13), rgba(20,14,6,0.5) 60%, rgba(8,5,2,0.82)); border: 4px solid #e0b84a; box-shadow: 0 0 18px rgba(224,184,74,0.4), inset 0 0 26px rgba(0,0,0,0.65), inset 0 6px 14px rgba(255,240,210,0.13); } .tombola-draw-spokes { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; will-change: transform; background: conic-gradient(from 0deg, rgba(224,184,74,0.16) 0 3deg, transparent 3deg 90deg, rgba(224,184,74,0.16) 90deg 93deg, transparent 93deg 180deg, rgba(224,184,74,0.16) 180deg 183deg, transparent 183deg 270deg, rgba(224,184,74,0.16) 270deg 273deg, transparent 273deg 360deg); } .tombola-draw-glare { position: absolute; left: 12%; top: 7%; width: 38%; height: 24%; border-radius: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.24), transparent); filter: blur(2px); } .tombola-draw-ball { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; will-change: transform; background: radial-gradient(circle at 34% 30%, #ffe9a8, #e0b84a 58%, #8a6a22); border: 1px solid #3a2c10; box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 0 3px rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #2a1c06; } .tombola-draw-ball.win { box-shadow: 0 0 14px 4px rgba(255,225,150,0.95), inset 0 0 4px rgba(255,255,255,0.6); z-index: 5; } .tombola-draw-ball img { width: 100%; height: 100%; object-fit: contain; } .tombola-draw-progress { font-size: 11px; font-weight: 700; color: #a89a78; min-height: 13px; } .tombola-draw-winners { width: 100%; display: flex; flex-direction: column; gap: 8px; } /* Rând de câștigător revelat în animația de tragere — același rând BOGAT ca lista persistentă (.espionage-dossier-row înăuntru), doar cu intrare „pop". Frame-ul final al animației = pagina de rezultate (cerere user 2026-08-31), deci rândurile astea chiar rămân pe ecran. */ .tombola-draw-winner-reveal { width: 100%; opacity: 0; transform: translateY(10px) scale(0.92); animation: tombolaDrawWinPop 0.45s cubic-bezier(0.2,1.5,0.4,1) forwards; } @keyframes tombolaDrawWinPop { to { opacity: 1; transform: translateY(0) scale(1); } } /* Rândul de câștigător: nivel peste avatar, tag bandă lângă nume, numele premiului evidențiat, iconița premiului în dreapta de tot (cerere user 2026-08-31). */ .tombola-winner-av-wrap { position: relative; flex: none; line-height: 0; } /* Aliniat la modelul unificat de badge de nivel (cerere user 2026-09-05, „aceeași machetă peste tot") — folosea un gradient auriu strălucitor propriu, diferit de restul jocului (.player-lvl-badge: fond închis #1a1005, bordură subțire aurie, text auriu simplu, folosit la profil/chat/bandă etc.). Mărimea rămâne cea de aici (context de listă compactă), doar culorile/bordura s-au aliniat. */ .tombola-winner-lvl { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: #1a1005; color: #f5c542; font-size: 9px; font-weight: 700 !important; line-height: 14px; padding: 0 4px; border-radius: 8px; border: 1px solid rgba(200,146,74,0.5); white-space: nowrap; } .tombola-winner-prize-name { color: #ffe08a; font-weight: 700; } .tombola-winner-prize-icon { width: 26px; height: 26px; object-fit: contain; flex: none; margin-left: 8px; } .tombola-draw-burst { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .tombola-draw-burst.on { animation: tombolaDrawBurst 0.7s ease-out; } @keyframes tombolaDrawBurst { 0% { opacity: 0; box-shadow: inset 0 0 0 rgba(255,220,140,0); } 30% { opacity: 1; box-shadow: inset 0 0 60px rgba(255,220,140,0.85); } 100% { opacity: 0; box-shadow: inset 0 0 90px rgba(255,220,140,0); } } /* Panou Supremația (cerere user 2026-08-25) — medalionul central + 3 bare de facțiune (culorile sunt DINAMICE, calculate din charColors în JS — excepția explicită de la regula 9 CLAUDE.md, valori runtime, nu fixe) + zona de atac (buton SAU cronometru de cooldown, workProgressBoxHtml deja existent, reutilizat identic ca la Producție/Bancă/Mina de Aur). */ .supremacy-target-img { display: block; max-width: 220px; width: 100%; height: auto; margin: 0 auto 16px; } /* Premiul facțiunii câștigătoare, afișat deasupra bării (cerere user 2026-08-25). */ .supremacy-reward-heading { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin-bottom: 6px; } .supremacy-reward-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; } .supremacy-reward-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: rgba(245,197,66,0.1); border: 1px solid rgba(245,197,66,0.35); border-radius: 20px; padding: 4px 10px 4px 6px; color: #f5c542; } .supremacy-reward-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* Bară unică segmentată (înlocuiește vechile 3 bare separate, cerere user 2026-08-25 — 3 bare într-un track parțial gol se citeau ca "progres spre un prag", deși nu există un asemenea prag, e strict cota fiecărei facții din pagubă). Segmentele însumează mereu 100% din lățime. */ .supremacy-track { display: flex; width: 100%; height: 26px; border-radius: 13px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.35); margin-bottom: 12px; } .supremacy-seg { position: relative; height: 100%; transition: width 0.4s ease; } .supremacy-seg:not(:last-child) { border-right: 2px solid rgba(0,0,0,0.35); } .supremacy-seg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.18) 100%); } .supremacy-seg--police { background: linear-gradient(90deg, #2e5f96, #60a5fa); } .supremacy-seg--business { background: linear-gradient(90deg, #2f7a4d, #4ade80); } .supremacy-seg--mafia { background: linear-gradient(90deg, #9c3a3a, #f87171); } .supremacy-legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; align-items: center; } .supremacy-leg-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 240px; font-size: 12px; font-weight: 700; } .supremacy-leg-name { display: flex; align-items: center; gap: 6px; } .supremacy-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .supremacy-leg-dot--police { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.7); } .supremacy-leg-dot--business { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.7); } .supremacy-leg-dot--mafia { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.7); } .supremacy-leg-val { color: var(--color-text-muted); font-weight: 400; } .supremacy-attacks-progress { text-align: center; font-size: 12px; font-weight: 700; color: #f5c542; margin-bottom: 6px; } .supremacy-cost-note { text-align: center; font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; } /* ── VENDETA — eveniment pe benzi (dock panel, 2 taburi) ── */ /* Caseta de număr din admin (puncte misiune / sumă premiu): lățime-țintă fixă, se poate MICȘORA pe ecrane înguste dar nu crește — restul rândului rămâne pentru combo. */ .vendetta-num-box { flex: 0 1 90px; min-width: 46px; box-sizing: border-box; } /* Bandă-antet: imaginea evenimentului (emblemă în dreapta, oraș noir + fum) sub un gradient care întunecă stânga, ca textul rundei/countdown-ului să rămână lizibil. Restul panoului (premii/ misiuni/clasament) stă pe fundalul curat dedesubt. Cerere user 2026-09-07. */ .vendetta-hero { position: relative; width: 100%; /* aspect-ratio = raportul imaginii → imaginea încape TOATĂ la orice lățime de panou (telefon îngust ↔ desktop lat). Fără height fix (bug: pe desktop panoul e mai lat → banda ieșea mai „pătrată" și tăia pistoalele). */ aspect-ratio: 1000 / 347; max-height: 184px; min-height: 116px; margin-bottom: 10px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(200,168,74,0.28); background: #0a0603; } /* imaginea ca (nu background) — ca să poată fi versionată cu ?v=filemtime din index.php; url() din app.css nu se poate cache-busta (bug: browserul servea o versiune veche, decupată). */ .vendetta-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; } .vendetta-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; /* întunecă stânga (runda) + jumătatea de jos (countdown + premii, care pică peste emblemă) */ background: linear-gradient(90deg, rgba(8,5,2,0.95) 0%, rgba(8,5,2,0.5) 40%, rgba(8,5,2,0.05) 72%), linear-gradient(to top, rgba(8,5,2,0.92) 0%, rgba(8,5,2,0.55) 34%, rgba(8,5,2,0) 60%); } .vendetta-hero-overlay { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .vendetta-round { font-size: 15px; font-weight: 800; color: #f5c542; text-transform: uppercase; letter-spacing: 0.3px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .vendetta-round-timer { font-size: 12px; font-weight: 700; color: #f0c862; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.85); } .vendetta-section-title { font-size: 12px; font-weight: 700; color: #f5c542; margin: 10px 0 5px; } .vendetta-collapsible { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; padding: 4px 0; } .vendetta-collapsible > span:first-child { font-size: 13px; } .vendetta-collapse-chevron { font-size: 14px; line-height: 1; color: #f5c542; flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(200,168,74,0.4); border-radius: 7px; background: rgba(200,168,74,0.12); transition: transform 0.15s ease; } .vendetta-collapsible.is-collapsed .vendetta-collapse-chevron { transform: rotate(-90deg); } .vendetta-collapsible.is-collapsed { margin-bottom: 5px; } .vendetta-missions { display: flex; flex-direction: column; gap: 4px; } .vendetta-mission { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid rgba(200,168,74,0.18); border-radius: 8px; background: rgba(255,255,255,0.02); } .vendetta-mission-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .vendetta-mission-label { flex: 1; font-size: 12px; min-width: 0; } .vendetta-mission-pts { font-size: 11px; font-weight: 700; color: #e8b84a; white-space: nowrap; } /* Premii — un singur rând de 3 chip-uri cu medaliile de rang 1/2/3, în interiorul benzii-antet */ .vendetta-podium { width: 100%; } .vendetta-podium-label { display: block; font-size: 10px; font-weight: 700; color: #cbb78a; margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); } .vendetta-podium-chips { display: flex; flex-wrap: wrap; gap: 5px; } .vendetta-podium-chip { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border: 1px solid rgba(200,168,74,0.35); border-radius: 999px; background: linear-gradient(160deg, rgba(26,18,6,0.85), rgba(12,8,3,0.9)); font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } .vendetta-podium-medal { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .vendetta-chip-ic { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; } .vendetta-chip-sep { color: var(--color-text-muted); font-weight: 400; margin: 0 1px; } /* Clasamentul: înălțime plafonată + scroll intern — misiunile de deasupra rămân mereu vizibile chiar și cu multe bande în listă (cerere user 2026-09-07) */ .vendetta-tab-body { max-height: 250px; overflow-y: auto; } .vendetta-tabs { display: flex; gap: 4px; margin: 10px 0 6px; } .vendetta-tab { flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 700; border: 1px solid rgba(200,168,74,0.25); border-radius: 7px; background: rgba(255,255,255,0.02); color: var(--color-text-muted); cursor: pointer; } .vendetta-tab.active { background: rgba(200,168,74,0.16); color: #f5c542; border-color: rgba(200,168,74,0.5); } .vendetta-rank-list { display: flex; flex-direction: column; gap: 4px; } .vendetta-rank-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,0.02); font-size: 12px; } .vendetta-rank-row.is-mine { background: rgba(200,168,74,0.14); border: 1px solid rgba(200,168,74,0.4); } .vendetta-rank-num { font-weight: 800; color: #f5c542; min-width: 22px; text-align: center; flex-shrink: 0; } .vendetta-rank-medal { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } /* rând bandă în clasament — stil ca la TOP, compact, fără nr. de membri */ .vendetta-gang-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); } .vendetta-gang-row.is-mine { border-color: rgba(200,168,74,0.5); background: rgba(200,168,74,0.13); } .vendetta-gang-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; } .vendetta-gang-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid #6b4a1e; display: block; } .vendetta-gang-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vendetta-vip-ic { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; } .vendetta-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vendetta-rank-pts { font-weight: 700; color: #e8b84a; white-space: nowrap; } .vendetta-mygang-total { font-size: 12px; font-weight: 700; color: #f5c542; margin-bottom: 6px; } .hud-panel.is-collapsed ~ .hud-missions-wrap-mobile { top: 66px; margin-top: 0; } /* Caseta „Misiune" — se deschide sub butonul rotund (desktop sau mobil), la 5px distanță, aliniată la marginea dreaptă a butonului (right:0, relativ la wrapper — care are exact lățimea butonului, deci „aceeași distanță de margine ca butonul" vine din aliniere, fără nicio formulă duplicată). Dimensiune AUTOMATĂ, cerere user 2026-08-09 (rundă 3) — width/height fixe (156x233, alese inițial ca placeholder pt. caseta goală) înlocuite cu fit-content/auto, ca fereastra să se adapteze la câte misiuni/text sunt efectiv randate în interior. Plafoane (min/max) doar ca plasă de siguranță — text foarte scurt nu strânge caseta absurd de mult, text/listă foarte lungă capătă scroll propriu pe .missions-panel-body, nu împinge fereastra la nesfârșit în jos peste hartă. */ .missions-panel { /* display:flex constant (nu mai comutat none/flex) — necesar ca tranziția de mai jos să poată anima (display nu se poate tranziționa în CSS clasic); vizibilitatea reală vine din opacity/visibility/pointer-events, exact convenția deja folosită la .dock-panel. */ display: flex; position: absolute; top: calc(100% + 5px); right: 0; width: fit-content; min-width: 140px; max-width: 220px; height: auto; max-height: 320px; background: linear-gradient(160deg, rgba(28,18,5,0.99) 0%, rgba(12,8,2,1) 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(201,150,0,0.08); z-index: 20; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; /* Deschidere „dintr-un punct mic din dreptul butonului" (cerere user 2026-08-09, efectul discutat anterior, gen iOS) — colțul sus-dreapta e chiar acolo unde stă butonul rotund (panoul e ancorat exact acolo, vezi top/right de mai sus), deci scale() cu acel colț ca origine dă senzația că fereastra „crește" din buton, fără nicio urmărire JS de coordonate (spre deosebire de un container-transform real — inutil aici, originea e mereu fixă). */ transform-origin: top right; transform: scale(0.15); transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .missions-panel.open { opacity: 1; visibility: visible; pointer-events: all; transform: scale(1); } .missions-panel-header { display: flex; align-items: center; /* Titlu centrat, fără buton „✕" — reapăsarea butonului rotund închide caseta (același toggle), cerere user 2026-08-09. */ justify-content: center; padding: 0 8px; height: 30px; flex-shrink: 0; background: rgba(15,10,3,0.95); border-bottom: 1px solid rgba(201,150,0,0.25); } .missions-panel-title { font-size: var(--text-xs); font-weight: 700; color: #e8c97a; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 10px rgba(201,150,0,0.35); } .missions-panel-body { /* flex:0 1 auto (nu flex:1) — cu înălțimea panoului acum auto, corpul nu mai trebuie să „umple" spațiul rămas (nu mai există unul de umplut), doar să-și ia înălțimea din conținut; max-height+overflow rămân plasa de siguranță pentru conținut foarte lung. */ flex: 0 1 auto; overflow-y: auto; padding: 8px; } /* O misiune — fără casetă/chenar (cerere user 2026-08-09, rundă 3: „hai să eliminăm caseta, să rămână doar fereastra mare și totul acolo unul sub altul"). .mission-block e simplul wrapper vertical: icon, titlu, progres, recompensă, buton — toate în flux normal, centrate, fără fundal/bordură proprii. (viitor: mai multe misiuni s-ar stivui vertical, cu scroll propriu pe .missions-panel-body). */ .mission-block { display: flex; flex-direction: column; align-items: center; gap: 6px; } .mission-icon { width: 38px; height: 38px; object-fit: contain; } .mission-title { font-size: var(--text-xs); color: var(--color-text); line-height: 1.25; text-align: center; } .mission-progress { font-size: var(--text-xs); color: #a08040; } .mission-block--guidable { cursor: pointer; } .mission-guide-hint { font-size: 10px; color: #6b9bdf; font-style: italic; } /* Efect de ghidare — glow pulsatoriu aplicat DINAMIC (JS, missionGuideHighlight()) pe ținta pasului curent: iconița Magazinului de pe hartă, tab-ul „Cufere" sau butonul „Gratuit" — niciodată mai mult de un element deodată. Funcționează pe orice formă (rotund/dreptunghiular) fiindcă box-shadow urmează border-radius-ul propriu al elementului țintă. */ @keyframes missionGuidePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,30,30,0.65), 0 0 0 0 rgba(255,30,30,0.35); } 50% { box-shadow: 0 0 0 5px rgba(255,30,30,0.35), 0 0 0 12px rgba(255,30,30,0.12); } } .mission-guide-highlight { position: relative; z-index: 40; animation: missionGuidePulse 1.1s ease-in-out infinite; } /* Pe hartă (sloturi goale SAU clădiri plasate), aceeași rază de 5-12px e aproape invizibilă — un slot are ~200px lățime la zoom normal, spre deosebire de un buton de 46px unde halo-ul e proporțional uriaș — cerere user 2026-08-09, „nu se vede ca pe Învârte". Inel dedicat, mult mai gros/opac, plus un contur solid (nu doar blur), ca să iasă clar în evidență indiferent de fundalul hărții (pădure/clădiri vecine). NOTĂ: .map-slot are deja aspect-ratio 1/0.6 — border-radius:50% pe un dreptunghi produce o elipsă care urmărește exact forma slotului, nu un cerc perfect, e intenționat. */ @keyframes missionGuidePulseMap { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,30,30,0.9), 0 0 0 10px rgba(255,30,30,0.45), 0 0 24px 8px rgba(255,30,30,0.5); } 50% { box-shadow: 0 0 0 6px rgba(255,30,30,0.9), 0 0 0 22px rgba(255,30,30,0.25), 0 0 40px 16px rgba(255,30,30,0.35); } } .map-slot.mission-guide-highlight { border-radius: 50%; /* !important obligatoriu — cauza reală a bug-ului „nu se vede pe clădire" (user 2026-08-09): .map-slot--filled resetează global animation:none!important (mai jos în acest fișier), ca să blocheze orice animație moștenită nedorită pe clădirile plasate; o regulă normală, oricât de specifică, nu poate bate un !important — trebuie contracarat tot cu !important (specificitatea mai mare a acestui selector — 2 clase vs 1 — decide între cele 2 !important). */ animation: missionGuidePulseMap 1.1s ease-in-out infinite !important; } .mission-reward { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: #f5c542; font-weight: 700; } .mission-reward-icon { width: 16px; height: 16px; object-fit: contain; } /* Suprascrie .btn-game (definit mult mai jos în fișier, cu aceeași specificitate — fără ambele clase în selector, cascada l-ar fi bătut pe cel de aici, indiferent de ordine în HTML) — cerere de spațiu: butonul trebuie să încapă lângă recompensă, în caseta îngustă. */ .btn-game.mission-claim-btn { display: inline-block; width: auto; margin-inline: 0; padding: 6px 10px; font-size: var(--text-xs); } /* Bara de progres a SEZONULUI (header-ul panoului, sub "Nivel X/10 — Z Exp.") — mai elaborată decât .hud-xp-bar simplă din HUD, cerere user 2026-08-21 ("mi se pare cam simpluță"): mai înaltă, gradient auriu animat (se mișcă încet, nu doar static) + luciu sticlos deasupra + glow în jurul umplerii + marcaje verticale la fiecare treaptă (10 trepte = 9 marcaje), ca să se vadă clar unde se termină fiecare nivel, nu doar procentul total. */ .battlepass-season-bar { position: relative; width: 100%; height: 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(200,146,74,0.35); border-radius: 99px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); } .battlepass-season-bar-fill { position: relative; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a9722c, #f5c542, #ffe9a8, #f5c542, #a9722c); background-size: 250% 100%; box-shadow: 0 0 10px rgba(245,197,66,0.75), 0 0 2px rgba(255,255,255,0.5); transition: width 0.6s ease; animation: battlepassSeasonBarShine 3.5s linear infinite; } .battlepass-season-bar-fill::after { /* Luciu sticlos — bandă deschisă pe jumătatea de sus a umpluturii */ content: ''; position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 55%, transparent 60%); } @keyframes battlepassSeasonBarShine { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } } .battlepass-season-bar-ticks { position: absolute; inset: 0; display: flex; pointer-events: none; } .battlepass-season-bar-ticks span { flex: 1; border-right: 1px solid rgba(0,0,0,0.45); } .battlepass-season-bar-ticks span:last-child { border-right: none; } /* Battle Pass — rând de tier (2 track-uri: Free + Premium, unul lângă altul), listă verticală cu spațiere între rânduri. Premium dimmat (nu ascuns) când jucătorul nu are Premium cumpărat pentru sezonul curent — aceeași convenție de „previzualizare dimmată" ca la Gardă de Corp/Mina de Aur, doar la scară mică (rând compact, nu casetă de panou întreagă). */ .battlepass-tier-list { display: flex; flex-direction: column; gap: 6px; } .battlepass-tier-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(200,146,74,0.25); border-radius: 8px; } .battlepass-tier-row--locked { filter: grayscale(1) opacity(0.5); } .battlepass-tier-num { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(245,197,66,0.15); font-weight: 700; font-size: 12px; color: #f5c542; } .battlepass-tier-track { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 11px; min-width: 0; } .battlepass-tier-track--locked { filter: grayscale(1) opacity(0.6); } /* Provocări Battle Pass — listă compactă (nu grid de cutii centrate ca .mission-block, folosit în continuare de Misiunile normale), cerere user 2026-08-21: icon mare în stânga, cât înălțimea celor 2 rânduri (titlu+recompensă sus, bară+x/y jos) din .battlepass-challenge-body, dreapta. Bara de progres = 70% din lățimea corpului, restul de 30% pentru x/y. Bordură/radius identice cu .battlepass-tier-row, ca cele 2 liste ale panoului să se citească drept aceeași familie. */ .battlepass-challenge-list { display: flex; flex-direction: column; gap: 8px; } .battlepass-challenge-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(200,146,74,0.25); border-radius: 8px; } .battlepass-challenge-icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } .battlepass-challenge-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .battlepass-challenge-row-top, .battlepass-challenge-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .battlepass-challenge-title { font-size: 12px; color: var(--color-text); line-height: 1.25; min-width: 0; } .battlepass-challenge-reward { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #f5c542; font-weight: 700; flex-shrink: 0; white-space: nowrap; } .battlepass-challenge-bar { width: 70%; } .battlepass-challenge-progress { font-size: 11px; color: #a08040; font-weight: 600; flex-shrink: 0; } /* Provocare deja revendicată (auto, fără buton) — trebuie să iasă în evidență, nu să se estompeze (cerere user 2026-08-22, corectează varianta veche cu opacity redus — aia o făcea să pară "moartă" în loc de "câștigată"): bordură + fundal verzui plin, bara de progres colorată la fel, eticheta cu bifă. Rândurile astea coboară mereu la finalul listei (vezi sortedChallenges mai sus), deci contrastul e ce le semnalează, nu poziția. */ .battlepass-challenge-row--claimed { border-color: rgba(74,222,128,0.55); background: rgba(74,222,128,0.08); } .battlepass-challenge-row--claimed .hud-xp-fill { background: linear-gradient(to right, #22a35a, #4ade80); } .battlepass-challenge-progress--claimed { color: #4ade80; font-weight: 700; } .battlepass-challenge-progress--claimed::before { content: '✓ '; } /* Bandă mini bani/aur — vizibilă doar cât panoul e colapsat (dacă e deschis, banii se văd deja în panou). Stil propriu (cutii întunecate, ca restul HUD-ului), inspirat de layout-ul orizontal cu butoane „+" dintr-un joc de referință, nu o copie 1:1 a stilului lui. Fontul valorilor e identic cu al cartonașelor de luptă de sub Aur (var(--text-sm)) — cerere user. Formulă lățimi (cerere user, totul relativ la lățimea ECRANULUI — vw, nu % din părinte): 100% ecran − 0,5% stânga − 0,5% dreapta (= 99vw, identic cu marginile casetei HUD) − 2vw gap între fiecare pereche de elemente (4 elemente = 3 goluri, aplicat o singură dată prin proprietatea flex „gap", browserul îl repetă automat) − 8vw butonul fără acțiune = 85vw rămase, împărțite egal la cele 3 casete (calc(85vw/3) fiecare) — de-aia sunt uniforme. Rândul e mutat să se alinieze cu marginea stângă a panoului (0,5vw), nu cu cei 12px ai stivei (aliniați cu zoom-ul) — .hud-panel-toggle-stack rămâne la 12px doar pentru buton. */ /* Slot comun bani/statusuri reîncărcabile — vezi comentariul din markup (index.php). Ascuns complet implicit (display:none, nu doar height:0) — altfel, chiar la înălțime 0, tot ar consuma gap-ul de 10px din .hud-panel-toggle-stack (flex „gap" se aplică între orice elemente PREZENTE în flux, chiar la mărime zero, doar display:none le scoate cu adevărat din calcul). Devine vizibil, cu 56px înălțime (cât un rând), DOAR cât panoul e colapsat. */ .hud-mini-slot { display: none; position: relative; /* .hud-stats (copil, mai jos) are `transform` pentru animația de glisare bani↔statusuri — transform creează propriul context de stivuire, care „prinde" tooltip-ul de Viață (z-index:300) în interior, izolat de restul .hud-panel-toggle-stack. Fără z-index aici, .hud-mini-slot concura la egalitate (auto) cu butoanele de eveniment de mai jos din DOM (battlepass-hud-btn/roulette-hud-btn) — mai jos în DOM câștigă implicit, tooltip-ul ajungea sub iconițele de eveniment (bug real raportat de user 2026-08-26, captură mobil). */ z-index: 2; } .hud-panel.is-collapsed ~ .hud-panel-toggle-stack .hud-mini-slot { display: block; height: 56px; } .hud-mini-resources { position: absolute; top: 0; display: flex; align-items: center; gap: 1vw; width: 99vw; margin-left: calc(0.5vw - 12px); } /* .hud-stats, când e mutat aici (doar telefon, vezi relocateHudStatsForMobile), trebuie să pornească din același loc — dar formula lui de margine (calc(0,5vw - var(--gap-lg)), din vremea când stătea direct sub padding-ul .game-hud) nu se mai potrivește: aici originea e cei 12px ai stivei, nu cei var(--gap-lg)=14px ai .game-hud. Selector descendent (specificitate mai mare), suprascrie sigur regula veche indiferent de ordinea din fișier. */ .hud-mini-slot .hud-stats { position: absolute; top: 0; margin-left: calc(0.5vw - 12px); } /* Vizibilitate: cât panoul e colapsat, AMBELE rânduri rămân display:flex (nu se mai comută instant) — switch-ul bani ↔ statusuri se face prin glisare (transform + opacity, mai jos), ceea ce are nevoie ca ambele să rămână randate simultan cât durează tranziția. Cu panoul deschis, ambele rămân ascunse instant (display:none), exact ca înainte — nu are sens să anime ceva ce nu se vede oricum. */ .hud-panel.is-collapsed ~ .hud-panel-toggle-stack .hud-mini-slot .hud-mini-resources, .hud-panel.is-collapsed ~ .hud-panel-toggle-stack .hud-mini-slot .hud-stats { display: flex; } .hud-panel:not(.is-collapsed) ~ .hud-panel-toggle-stack .hud-mini-slot .hud-mini-resources, .hud-panel:not(.is-collapsed) ~ .hud-panel-toggle-stack .hud-mini-slot .hud-stats { display: none; } /* Glisare bani ↔ statusuri reîncărcabile (cerere user) — banii sunt „tab-ul din stânga": implicit la locul lor (translateX:0), ies spre stânga când se activează statusurile. Statusurile sunt „tab-ul din dreapta": parcate în afara ecranului spre dreapta implicit, intră la loc când .showing-stats e activ. pointer-events:none pe varianta ascunsă, ca să nu fure click-uri cât timp stă transparentă/deplasată în timpul tranziției. */ .hud-mini-resources, .hud-mini-slot .hud-stats { transition: transform 0.25s ease, opacity 0.25s ease; } .hud-mini-resources { transform: translateX(0); opacity: 1; } .hud-mini-slot.showing-stats .hud-mini-resources { transform: translateX(-40px); opacity: 0; pointer-events: none; } .hud-mini-slot .hud-stats { transform: translateX(40px); opacity: 0; pointer-events: none; } .hud-mini-slot.showing-stats .hud-stats { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Icon sus, sumă jos — la fel ca .stat-card (Viață/Energie/Maiestrie). Lățime: (99vw − 8vw buton − 3 goluri×1vw) / 3 = calc(88vw / 3) fiecare — vezi gap-ul de la .hud-mini-resources (mărite, cerere user 2026-07-21: gol 2vw→1vw, spațiul eliberat dat casetelor). Înălțimea rămâne 56px ca înainte — doar lățimea trebuia mărită, nu și înălțimea (user 2026-07-21, revenit după prima încercare). flex-shrink:0 ca să nu se strângă sub această lățime dacă suma e foarte lungă (ar da overflow vizual, nu ar rupe layout-ul celorlalte casete). */ /* container-type:inline-size — mirror exact pe tehnica deja folosită la .inv-slot/.inv-pet-slot (Inventar): conținutul din interior era la px FICȘI, în timp ce cutia se micșora proporțional (calc(88vw/3)) la zoom Android — iconițele nu se strângeau odată cu cutia, se înghesuiau/suprapuneau vizual (bug găsit de user). Bază de conversie: cutie 110px la 375px viewport (formula calc(88vw/3) de mai sus) − 2×1px border = 108px content-box = 100cqw (1px ≈ 0,9259cqw) — aceeași metodă ca la .inv-slot (98px content-box). */ .hud-mini-resource { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: calc(88vw / 3); flex-shrink: 0; height: 56px; background: linear-gradient(135deg, rgba(28,18,5,0.97) 0%, rgba(18,12,3,0.97) 100%); border: 1px solid rgba(180,130,20,0.45); border-radius: 8px; padding: 4px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); container-type: inline-size; } /* Doar casetele cu acțiune reală (au un .hud-mini-resource-plus în interior) devin cursor:pointer — caseta de bani murdari nu are nicio acțiune, rămâne neutră. */ .hud-mini-resource:has(.hud-mini-resource-plus) { cursor: pointer; } /* Aceeași dimensiune ca inima de la Viață (.hud-stat-icon img) — 28px/108px×100 = 25,93cqw */ .hud-mini-resource-icon { width: 25.93cqw; height: 25.93cqw; object-fit: contain; flex-shrink: 0; } .hud-mini-resource-val { /* Fix, nu cqw (cerere user 2026-08-27) — trebuie să arate identic cu .stat-value (Viață/ Energie/Curaj/Maiestrie, tot var(--text-base)), aceeași casetă HUD, doar comutată prin toggle bani/statusuri; cu cqw, la ecran îngust ajungea vizibil mai mic decât Viața (măsurat live: 8,9px vs 13px la 320px), deși ambele stau în cutii de aceeași mărime. */ font-size: var(--text-base); font-weight: 700; line-height: 1; color: #e8e8e8; white-space: nowrap; } /* „+" stânga-sus, FIX aceeași dimensiune și poziție ca cel de la Viață/Energie/Maiestrie (.stat-plus-btn) — cerere user 2026-08-29. .stat-plus-btn e 26.92cqw / 5.77cqw dintr-un .stat-card lat de calc(86vw/5) pe telefon, adică 4.63vw / 0.99vw în valoare absolută. Le exprimăm aici direct în vw (nu cqw), fiindcă .hud-mini-resource are altă lățime de container (calc(88vw/3)) — cqw ar da alt px. pointer-events:none + opacity:1: imagine decorativă, click-ul e pe toată caseta .hud-mini-resource. */ .hud-mini-resource-plus { position: absolute; top: 0.99vw; left: 0.99vw; width: 4.63vw; height: 4.63vw; pointer-events: none; opacity: 1; z-index: 2; } /* 8vw — la fel ca lățimea celorlalte casete, exprimat tot în vw (vezi formula de mai sus). Fără fundal/bordură/umbră — cerere user: doar imaginea (100% din buton), nimic altceva. */ /* Fundal/bordură/umbră puse la loc (cerere user) — imaginea rămâne la 100% din buton (padding:0), fiindcă noile imagini au fost refăcute să se potrivească deja cu fundalul. */ .hud-mini-extra-btn { width: 8vw; height: 8vw; border-radius: 50%; padding: 0; background: linear-gradient(135deg, rgba(28,18,5,0.97) 0%, rgba(18,12,3,0.97) 100%); border: 1px solid rgba(180,130,20,0.45); box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: pointer; flex-shrink: 0; } .hud-mini-extra-btn img { width: 100%; height: 100%; object-fit: contain; display: block; } .hud-panel-body { /* relative + z-index:1 — conținutul real trebuie să stea DEASUPRA fumului (.hud-panel::before) și gloanțelor (.hud-bullets), care sunt poziționate absolut, cu z-index:0. */ position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--gap-lg); } /* Duplicat Forță/Apărare/Viteză sub Aur — ascuns pe browser, vizibil doar pe telefon (mai jos) */ .hud-info-combat-mobile { display: none; } @media (max-width: 768px) { /* Doar padding-top — restul (stânga/dreapta/jos) rămâne var(--gap-lg)=14px, folosit încă de formulele de mai jos (ex. calc(0.5vw - var(--gap-lg))). Clasă dublată (.game-hud.game-hud) intenționat: la specificitate egală cu declarația de bază (mai jos în fișier, dublu definită acolo, fără media query), regula ar fi pierdut cascada — exact bug-ul întâlnit deja de mai multe ori în sesiunea asta la alte elemente ale HUD-ului. Panoul ȘI banda de bani (poziționate relativ la acest padding) se mută împreună, automat, la 0,8% din înălțimea ecranului — cerere user (redus de la 1vh, 2026-08-18). */ .game-hud.game-hud { padding-top: 0.8vh; } .hud-panel-toggle-stack { display: flex; } .hud-missions-wrap-mobile { display: flex; } /* Panou colapsat — rămâne vizibil doar butonul rotund, fără fundalul/bordura ornamentală */ .hud-panel.is-collapsed { background: none; border: none; box-shadow: none; padding: 0; clip-path: none; gap: 0; } .hud-panel.is-collapsed::after { display: none; } .hud-panel.is-collapsed .hud-panel-body, .hud-panel.is-collapsed .hud-info-combat-mobile { display: none; } /* Casetă lățită la aproape toată lățimea telefonului (99vw), centrată pe ecran. margin-left = 0.5vw − var(--gap-lg) aduce marginea stângă la (100vw−99vw)/2 de la marginea ecranului. */ .hud-panel { width: 99vw; margin-left: calc(0.5vw - var(--gap-lg)); flex-wrap: wrap; /* Padding intern redus DOAR pe telefon: stânga+sus 14px → 9px (conținutul — avatar, bară XP, imunitate, nume, bani — se mută 5px spre stânga și 5px în sus, în interiorul cadrului, fără să miște panoul însuși; cerere user 2026-08-29). Dreapta/jos neatinse. */ padding: 9px 18px var(--gap-lg) 9px; } /* Flex-item-urile nu se strâng implicit sub lățimea naturală de conținut (min-width:auto) — fără asta caseta de 3 statistici de luptă ar împinge #hudPanelBody în afara panoului. */ .hud-panel-body, .hud-info { min-width: 0; } /* Distanța dintre coloana profil (avatar/XP/imunitate) și coloana nume/bani — 14px → 9px pe telefon (cerere user 2026-08-29, „mai micșorăm foarte puțin"). Reglabil de aici. */ .hud-panel .hud-panel-body { gap: 9px; } /* Rândurile de bani/aur mai compacte — reduc înălțimea totală a panoului pe telefon. Selector ancorat la .hud-panel (nu doar clasa simplă) intenționat: la specificitate egală cu declarațiile de bază (mai jos în fișier, fără media query), regulile astea ar fi pierdut cascada — exact bug-ul întâlnit la Forță/Apărare/Viteză mai devreme. */ .hud-panel .hud-city { margin-bottom: 4px; } .hud-panel .hud-resource { padding: 3px 0; min-width: 0; } .hud-panel .hud-resource-icon { width: 16px; height: 16px; } .hud-panel .hud-resource-val { font-size: var(--text-sm); } /* Pe telefon .hud-info devine rând care se-nfășoară: numele pe toată lățimea, apoi banii și panoul de luptă (Forță/Apărare/Viteză) unul lângă altul — cerere user 2026-08-29 („în dreapta banilor un panou similar cu ăla cu banii, cu Forța/Apărarea/Viteza unele sub altele"). .hud-info-combat-mobile a fost mutat în .hud-info (markup, index.php). Ancorat la .hud-panel (2 clase) ca să bată regula de bază .hud-info (mai jos în fișier). */ .hud-panel .hud-info { flex: 1 1 0; /* umple lățimea rămasă lângă avatar, ca să aibă loc ambele panouri */ min-width: 0; flex-direction: column; align-items: center; /* placa cu numele se auto-dimensionează după conținut ȘI e centrată */ gap: 6px; } /* Rândul bani + luptă (wrapper .hud-info-row din markup) */ .hud-panel .hud-info-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; width: 100%; } .hud-panel .hud-info-row > .hud-resources { flex: 0 1 auto; /* lățime naturală (sumele pot fi lungi), se poate strânge */ min-width: 0; } /* Panou de luptă — fără „casetă" (fundal+bordură+nituri), la fel ca .hud-resources mai sus (cerere user 2026-09-05, „renunțăm și la caseta de la stats, punem linii"). Forța/Apărarea/ Viteza stivuite, cu linie subțire de degrade ÎNTRE ele (.hud-combat-stat::before mai jos). Desktop (.hud-combat-stats--topbar) rămâne complet neatins. */ .hud-panel .hud-info-combat-mobile { display: block; position: relative; flex: 1 1 auto; /* umple restul rândului, la dreapta banilor */ min-width: 0; padding: 3px 6px; } /* Linie verticală „|" între caseta de bani și panoul de luptă (cerere user 2026-09-05) — centrată pe gap-ul de 6px dintre ele (.hud-info-row), nu adaugă lățime nouă. */ .hud-panel .hud-info-combat-mobile::before { content: ''; position: absolute; left: -3px; top: 10%; bottom: 10%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(200,168,74,0.5) 20%, rgba(200,168,74,0.5) 80%, transparent); } .hud-panel .hud-info-combat-mobile .hud-combat-stats { flex-direction: column; align-items: stretch; gap: 0; width: auto; margin: 0; } .hud-panel .hud-info-combat-mobile .hud-combat-stat { position: relative; gap: var(--gap-sm); padding: 4px 0; background: none; border: none; border-radius: 0; box-shadow: none; } /* Nitul mic din colț (.hud-combat-stat::before, stil desktop) n-are rost fără caseta proprie — ascuns aici, ca înainte. */ .hud-panel .hud-info-combat-mobile .hud-combat-stat::before { display: none; } /* Linie de degrade ÎNTRE rândurile Forță/Apărare/Viteză (::after, nu ::before — ::before e ocupat/ascuns mai sus). */ .hud-panel .hud-info-combat-mobile .hud-combat-stat:not(:first-child)::after { content: ''; position: absolute; top: 0; left: 4px; right: 4px; height: 1px; background: linear-gradient(to right, transparent, rgba(200,168,74,0.5) 15%, rgba(200,168,74,0.5) 85%, transparent); } /* Bug real, cerere user 2026-09-05 ("iconul de la viteza pare mai mic"): padding:5px moștenit de la varianta desktop (cutie 30px → desen vizibil 20px) rămânea neschimbat pe cutia de 20px de-aici — desenul vizibil real era doar 10×10px, jumătate gol. Redus la 2px, ca desenul vizibil (16px) să fie comparabil cu iconița de aur (16px). */ .hud-panel .hud-info-combat-mobile .hud-combat-icon { width: 20px; height: 20px; padding: 2px; } .hud-panel .hud-info-combat-mobile .hud-combat-label { font-size: 10px; } .hud-panel .hud-info-combat-mobile .hud-combat-value { font-size: var(--text-sm); white-space: nowrap; } /* Forță/Apărare/Viteză din centrul HUD-ului (varianta topbar) — ascunsă pe telefon. Selector dublat (nu doar .hud-combat-stats--topbar) intenționat: la specificitate egală cu .hud-combat-stats (display:flex, mai jos în fișier), regula asta ar fi pierdut cascada. */ .hud-combat-stats.hud-combat-stats--topbar { display: none; } /* .hud-stats (energie/curaj/maiestrie) trece pe rândul următor — panoul lățit nu mai lasă loc */ .game-hud { flex-wrap: wrap; } } /* ── Avatar circular ── */ .hud-avatar-wrap { display: flex; flex-direction: column; align-items: center; /* 6px → 3px (cerere user 2026-09-05, „ridicăm puțin, fără să încurcăm imaginea de profil") — calibrat împreună cu .hud-level-badge (bottom:-6px→-3px, mai jos): badge-ul „atinge" exact vârful lui .hud-xp-wrap (0 gol real, dar nu se suprapun) — reducerea DOAR a gap-ului, fără să urc și badge-ul, l-ar fi făcut să se suprapună peste textul „Exp"/procentul de deasupra. */ gap: 3px; flex-shrink: 0; } .hud-avatar-menu { position: relative; width: 92px; height: 92px; cursor: pointer; flex-shrink: 0; } .hud-avatar-img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; /* Aceeași culoare aurie ca la avatarul din chat (.gchat-avatar, #6b4a1e) — cerere user 2026-07-24 */ border: 2px solid #6b4a1e; } /* Ring animat în jurul avatarului — efectul de rotație păstrat, doar culoarea din albastru în auriu */ .hud-avatar-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(200,146,74,0.7); border-right-color: rgba(200,146,74,0.3); animation: hudRingSpin 8s linear infinite; pointer-events: none; } @keyframes hudRingSpin { to { transform: rotate(360deg); } } /* ══ Badge nivel universal — folosit peste tot pe avatare ══ */ /* Stil unificat (cerere user 2026-07-24) — modelul chip-ului auriu de la avatarurile de membri din atacul de bandă (.fight-gang-member-lvl), aplicat aici la sursa comună ca să se propage automat peste tot unde apare acest badge (dock, chat, mesaje, carduri de luptă, profil etc.) — poziționarea per-context (bottom/left/transform) rămâne neschimbată. */ .player-lvl-badge, .dock-player-lvl, .gchat-level, .msg-conv-level { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: #1a1005; border: 1px solid rgba(200,146,74,0.5); border-radius: 8px; font-size: 9px; font-weight: 700 !important; color: #f5c542; padding: 0px 4px; white-space: nowrap; line-height: 14px; pointer-events: none; } /* ×1.1 doar pe browser/desktop (cerere user 2026-07-24) — pe telefon rămâne mărimea de bază de mai sus. Cele 2 excepții (.profile-modal-level, .hud-level-badge) NU sunt afectate — au propriile reguli, cu valori fixe în px, nu calculate din badge-ul universal, deci nu se măresc din nou în cascadă. */ @media (min-width: 769px) { .player-lvl-badge, .dock-player-lvl, .gchat-level, .msg-conv-level { font-size: 9.9px; padding: 0px 4.4px; border-radius: 8.8px; line-height: 15.4px; } } /* Badge nivel HUD (mai mare) — unificat cu chip-ul auriu (cerere user 2026-07-24, peste tot); găsit omis inițial (crezut deliberat distinct, hexagonal) — userul a confirmat că vrea același model și aici, clip-path-ul hexagonal eliminat */ .hud-level-badge { position: absolute; /* -6px → -3px, calibrat cu .hud-avatar-wrap (gap 6px→3px, mai sus) — vezi comentariul de-acolo. */ bottom: -3px; left: 50%; transform: translateX(-50%); background: #1a1005; border: 1px solid rgba(200,146,74,0.5); color: #f5c542; font-size: var(--text-base); font-weight: 700 !important; padding: 2px 9px; border-radius: 8px; white-space: nowrap; } /* XP bar */ .hud-xp-wrap { width: 92px; display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); } .hud-xp-bar { width: 100%; /* 4px → 5px (+25%) — cerere user 2026-08-22. */ height: 5px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; } .hud-xp-fill { height: 100%; /* Auriu, ca restul temei jocului — era albastru moștenit, inconsecvent (cerere user 2026-07-24) */ background: linear-gradient(to right, #c8924a, #f5c542); border-radius: 99px; transition: width 0.5s ease; } /* Luciu animat, DOAR pe bara XP din caseta de profil (:has(#hudXpFill), id unic) — nu pe clasa .hud-xp-fill în general, care e reutilizată și de barele de provocări Battle Pass (10+ rânduri pe ecran, ar fi devenit agitat). Cerere user 2026-08-22, machetă "C". Prima variantă avea luciul legat de lățimea PROPRIE a umpluri (#hudXpFill::after, procente relative la ea) — la XP mic umplerea e doar câțiva pixeli, deci "40%" din ea era invizibil (semnalat de user 2026-08-22, "efectul e doar pe partea deja încărcată"). Fix: luciul stă acum pe TRACK-ul întreg (.hud-xp-bar, lățime 100% mereu, indiferent de procent) — traversează toată bara, dar mix-blend-mode:overlay îl face vizibil clar doar peste porțiunea aurie, aproape invizibil peste porțiunea goală/închisă — exact efectul dorit, la orice procent de XP. */ .hud-xp-bar:has(#hudXpFill) { position: relative; } /* Marcaje de segment, ca la bara de sezon Battle Pass (.battlepass-season-bar-ticks) — dar fără DOM nou (acolo sunt 4 reale; aici bara e reutilizată și de Battle Pass, deci un ::before pe track evită orice HTML în plus). Pictate DEASUPRA umplerii (.hud-xp-fill e static/în flux, pictat la pasul 3 CSS; ::before absolut, chiar și cu z-index:auto, la pasul 6 — se vede peste auriu automat, fără z-index explicit). */ .hud-xp-bar:has(#hudXpFill)::before { content: ''; position: absolute; inset: 0; /* 3 linii la 25/50/75%, NU la capete — o linie fix pe colțul rotunjit din dreapta îl făcea să pară tăiat (semnalat de user 2026-08-29, întâi pe bara din fereastra Profil, apoi aici). */ background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 25% 0 / 1px 100% no-repeat, linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 75% 0 / 1px 100% no-repeat; pointer-events: none; } .hud-xp-bar:has(#hudXpFill)::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); mix-blend-mode: overlay; pointer-events: none; animation: hud-xp-shine 2.4s ease-in-out infinite; } @keyframes hud-xp-shine { 0% { left: -30%; } 100% { left: 100%; } } /* Restructurat de 2 ori (cerere user 2026-09-05): inițial titlul „Exp" singur deasupra barei, jos stânga valoarea necesară + dreapta procentul — apoi mutat din nou: rând sus (Exp stânga, procent dreapta), rând jos doar valoarea necesară, aliniată dreapta. */ .hud-xp-top { display: flex; justify-content: space-between; width: 100%; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .hud-xp-title { color: #f5c542; } .hud-xp-pct { color: #4ade80; } .hud-xp-meta { display: flex; justify-content: flex-end; width: 100%; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .hud-xp-needed { color: #f5c542; } /* ── Dropdown avatar ── */ /* ── Dropdown vechi eliminat — înlocuit cu modal ── */ /* ══════════════════════════════════════════ MODAL PROFIL ══════════════════════════════════════════ */ .profile-modal-overlay { position: fixed; inset: 0; background: transparent; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 72px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .profile-modal-overlay.open { opacity: 1; pointer-events: all; } .profile-modal { position: relative; background: linear-gradient(160deg, rgba(28,18,5,0.99) 0%, rgba(14,9,2,0.99) 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 16px; width: 460px; max-width: calc(100vw - 32px); padding: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(201,150,0,0.1); transform: translateY(16px) scale(0.97); transition: transform 0.2s, opacity 0.2s; display: flex; flex-direction: column; gap: 0; height: calc(100vh - 128px); max-height: calc(100vh - 48px); overflow: hidden; } /* Profil/Setări (.profile-modal) — aceeași formulă ca la magazine/meniu (.dock-panel): 99% lățime, 0,5% pe fiecare margine (automat, prin justify-content:center de pe overlay, la fel ca la .dock-panel cu left:50%+translateX), 1% deasupra barei de jos REALE — DOAR telefon. Plasată AICI, după regula de bază — la specificitate egală, câștigă ultima din fișier (aceeași capcană întâlnită deja de mai multe ori în sesiunea asta). padding-bottom (nu bottom, fiindcă poziționarea aici se face prin flex pe overlay, nu prin position:fixed+bottom pe panou ca la .dock-panel). */ @media (max-width: 768px) { .profile-modal-overlay { padding-bottom: calc(var(--dock-safe-bottom, 80px) + 1vh); } .profile-modal { width: 99vw; max-width: 99vw; } } .profile-modal-overlay.open .profile-modal { transform: translateY(0) scale(1); } .profile-modal::after { content: ''; display: block; height: 10px; flex-shrink: 0; background: linear-gradient(90deg, transparent 0%, rgba(180,130,20,0.5) 20%, rgba(201,150,0,0.7) 50%, rgba(180,130,20,0.5) 80%, transparent 100%); border-radius: 0 0 16px 16px; } .profile-modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; color: #aaa; font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .profile-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; } /* Header */ .profile-modal-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 0; padding: 16px 20px 0; flex-shrink: 0; } /* Coloana avatar + contoare sociale — lățime FIXĂ (nu doar flex-shrink:0, care oprește doar micșorarea sub presiune, nu creșterea din conținut) — altfel un like/dislike schimbă cifra, care schimbă lățimea rândului de reacții (.pp-reactions/.profile-social-counts, fără lățime proprie), care împinge .profile-modal-identity la fiecare click (bug real raportat de user 2026-08-26, „fereastra se mută stânga-dreapta"). Redusă de la 128px la 108px — cerere user 2026-09-04 (spațiu gol în jurul avatarului, în stânga/dreapta pozei), aplicată acum și pe desktop, nu doar mobil. Tot fixă — doar mai îngustă — deci protecția de mai sus rămâne. */ .profile-modal-avatar-col { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); flex-shrink: 0; width: 108px; } /* Contoare like/dislike sub avatar */ .profile-social-counts { display: flex; justify-content: center; gap: var(--gap-sm); } .profile-count-badge { display: flex; align-items: center; gap: var(--gap-xs); padding: var(--gap-xs) 8px; border-radius: 20px; border: 1px solid transparent; cursor: default; font-size: var(--text-sm); font-weight: 600; background: rgba(255,255,255,0.04); line-height: 1; } .profile-count-badge--like { border-color: rgba(74,222,128,0.2); color: #4ade80; } .profile-count-badge--dislike { border-color: rgba(248,113,113,0.2); color: #f87171; } .count-icon { font-size: var(--text-base); } .count-val { font-size: var(--text-sm); font-weight: 700; min-width: 9px; display: inline-block; text-align: left; font-variant-numeric: tabular-nums; } .count-pending { font-size: var(--text-xs); color: #fbbf24; font-weight: 700; } /* Rând acțiuni: #ID · Setări · Logout */ .profile-modal-actions-row { display: flex; align-items: center; gap: var(--gap-sm); margin-top: var(--gap-xs); } /* Auriu, ca restul temei — era albastru moștenit, inconsecvent (cerere user 2026-07-24) */ .profile-uid-chip { display: inline-flex; align-items: center; padding: 3px 9px; background: rgba(200,146,74,0.1); border: 1px solid rgba(200,146,74,0.3); border-radius: 99px; font-size: var(--text-xs); font-weight: 700; color: #d4a656; cursor: pointer; transition: background 0.15s, border-color 0.15s; user-select: none; } .profile-uid-chip:hover { background: rgba(200,146,74,0.18); border-color: rgba(200,146,74,0.5); color: #f5c542; } .pp-money-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: 99px; font-size: var(--text-xs); font-weight: 700 !important; color: #fbbf24; } .profile-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); font-size: var(--text-md); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; color: inherit; } .profile-action-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); } .profile-action-btn--settings { color: #86efac; } .profile-action-btn--settings:hover, .profile-action-btn--settings.active { background: rgba(100,220,100,0.15); border-color: rgba(100,220,100,0.4); } .profile-action-btn--logout { display: inline-flex; align-items: center; padding: 3px 9px; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); border-radius: 99px; font-size: var(--text-xs); font-weight: 700; color: #f87171; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; width: auto; height: auto; } .profile-action-btn--logout:hover { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.4); color: #fca5a5; } .profile-modal-avatar-wrap { position: relative; flex-shrink: 0; } .profile-modal-avatar { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; /* Aceeași culoare aurie ca la avatarul din chat (.gchat-avatar, #6b4a1e) — cerere user 2026-07-24, efectul de inel păstrat, doar culoarea schimbată din albastru */ border: 2px solid #6b4a1e; display: block; } .profile-modal-avatar-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(107,74,30,0.35); pointer-events: none; } .profile-modal-level { /* Unificat cu chip-ul auriu „Badge nivel universal" (cerere user 2026-07-24, peste tot) — clasă separată, nu era inclusă în grupul .player-lvl-badge de mai sus. Iterat: 2x (prea mare) → jumătate (= mărimea standard) → ×1.4 față de standard (cerere user). Aceeași clasă e folosită atât de profilul propriu „PROFIL", cât și de profilul extern al altui jucător. */ position: absolute; bottom: -8.4px; left: 50%; transform: translateX(-50%); background: #1a1005; color: #f5c542; font-size: 12.6px; font-weight: 700 !important; padding: 0 5.6px; border-radius: 11.2px; white-space: nowrap; border: 1.4px solid rgba(200,146,74,0.5); line-height: 19.6px; } .profile-modal-identity { flex: 1; min-width: 0; } .profile-modal-name { font-size: var(--text-lg); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 6px; } /* ══ Butoane pătrate uniforme (prieteni, dușmani, setări, logout) ══ */ .profile-quick-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: var(--text-base); font-weight: 600; cursor: pointer; border: 1px solid; transition: background 0.15s, border-color 0.15s; text-decoration: none; white-space: nowrap; background: none; } .profile-quick-btn b { font-size: var(--text-base); color: #fff; } .profile-quick-btn--friends { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); color: #4ade80; min-width: 36px; padding: 0; font-size: var(--text-lg); } .profile-quick-btn--friends:hover { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.5); } .profile-quick-btn--enemies { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.25); color: #f87171; min-width: 36px; padding: 0; font-size: var(--text-lg); } .profile-quick-btn--enemies:hover { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.5); } .profile-quick-btn--settings { background: rgba(100,220,100,0.08); border-color: rgba(100,220,100,0.25); color: #86efac; font-size: var(--text-md); } .profile-quick-btn--settings:hover, .profile-quick-btn--settings.active { background: rgba(100,220,100,0.18); border-color: rgba(100,220,100,0.5); } .profile-quick-btn--logout { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.25); color: #f87171; font-size: var(--text-md); } .profile-quick-btn--logout:hover { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.5); } /* ══ Nav butoane profil ══ */ .profile-nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-xs); padding: var(--gap-md) var(--gap-sm); border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; white-space: nowrap; text-align: center; } .profile-nav-btn span { font-size: var(--text-lg); } .profile-nav-btn:hover, .profile-nav-btn.active { background: rgba(100,160,255,0.12); border-color: rgba(100,160,255,0.3); color: #fff; } /* ══ Conținut dinamic ══ */ .profile-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 0 0; overflow: hidden; } .profile-scroll-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* vezi comentariul de la .dock-panel-body — fix pull-to-refresh pe telefon */ padding: 0 16px 16px; } /* ══ Tooltipuri uniforme — același stil peste tot ══ */ .profile-modal-uid-row { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: nowrap; margin-bottom: var(--gap-md); } .profile-modal-uid { font-size: var(--text-xs); color: #3b82f6; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; display: inline-flex; align-items: center; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); padding: 1px 7px; border-radius: 99px; } .profile-modal-uid:hover { background: rgba(59,130,246,0.2); } .profile-social { display: flex; gap: var(--gap-xs); } .profile-social-stat { position: relative; display: inline-flex; align-items: center; } .profile-social-stat-inner { display: inline-flex; align-items: center; gap: var(--gap-xs); padding: 1px 8px; border-radius: 99px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #aaa; transition: background 0.15s; } .profile-social-stat-inner b { color: #fff; font-weight: 700; } .profile-social-stat:hover .profile-social-stat-inner { background: rgba(255,255,255,0.1); } .profile-uid-inner { color: #78b4ff !important; border-color: rgba(100,160,255,0.3) !important; background: rgba(100,160,255,0.08) !important; font-weight: 700 !important; font-size: var(--text-sm) !important; letter-spacing: 0.06em; height: 36px !important; padding: 0 12px !important; } .profile-uid-inner:hover { background: rgba(100,160,255,0.18) !important; cursor: pointer; } /* Tooltip identic cu .stat-tooltip */ .profile-social-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); padding: var(--tooltip-padding); z-index: var(--tooltip-z); pointer-events: none; flex-direction: column; gap: var(--gap-xs); box-shadow: var(--tooltip-shadow); } .profile-social-tooltip--right { left: auto; right: 0; } .profile-social-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 16px; border: 5px solid transparent; border-bottom-color: rgba(180,130,20,0.4); } .profile-social-tooltip--right::before { left: auto; right: 16px; } .profile-social-tooltip strong { font-size: var(--text-base); color: #fff; display: block; margin-bottom: 2px; } .profile-social-tooltip span { font-size: var(--text-sm); color: #aaa; display: block; line-height: 1.4; } .profile-social-tooltip-val { font-size: var(--text-sm); color: #78b4ff !important; font-weight: 700; margin-top: 4px; } .profile-social-stat:hover .profile-social-tooltip { display: flex; } .profile-modal-sub { font-size: var(--text-base); color: #777; margin-bottom: 6px; } .profile-modal-xp-wrap { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: var(--gap-md); } /* Același stil ca bara XP din caseta de profil HUD (.hud-xp-bar:has(#hudXpFill)) — track subțire, marcaje de segment + luciu animat, nu varianta „simpluță" de dinainte (cerere user 2026-08-29). */ .profile-modal-xp-track { position: relative; height: 6px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; } .profile-modal-xp-fill { height: 100%; background: linear-gradient(to right, #c8924a, #f5c542); border-radius: 99px; transition: width 0.5s ease; } /* Marcaje de segment — 3 linii la 25/50/75%, NU la capete (o linie fix pe colțul rotunjit din dreapta îl făcea să pară tăiat — semnalat de user 2026-08-29). ::before pe track, peste umplere. */ .profile-modal-xp-track::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 25% 0 / 1px 100% no-repeat, linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) 75% 0 / 1px 100% no-repeat; pointer-events: none; } /* Luciu animat care traversează toată bara (mix-blend-mode:overlay îl face vizibil doar peste porțiunea aurie) — reutilizează @keyframes hud-xp-shine. */ .profile-modal-xp-track::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); mix-blend-mode: overlay; pointer-events: none; animation: hud-xp-shine 2.4s ease-in-out infinite; } .profile-modal-xp-label { font-size: var(--text-sm); color: #f5c542; letter-spacing: 0.04em; font-weight: 500; } /* Stats */ .profile-modal-stats { display: flex; gap: var(--gap-md); margin-bottom: 16px; } .profile-stat { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: var(--gap-md) var(--gap-md); display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); } .profile-stat-icon { font-size: var(--text-lg); } .profile-stat-val { font-size: var(--text-base); font-weight: 700; color: #fff; } .profile-stat-lbl { font-size: var(--text-xs); color: var(--color-text-muted); } .profile-modal-divider { height: 1px; background: rgba(255,255,255,0.06); margin-bottom: 16px; } /* Acțiuni — 4 butoane pe același rând */ .profile-modal-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-sm); } .profile-modal-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-xs); padding: var(--gap-md) var(--gap-xs); border-radius: 8px; background: rgba(201,150,0,0.06); border: 1px solid rgba(180,130,20,0.25); color: #a08040; text-decoration: none; font-size: var(--text-xs); text-align: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .profile-modal-btn span:first-child { font-size: var(--text-md); line-height: 1; } .profile-modal-btn:hover { background: rgba(201,150,0,0.15); border-color: rgba(201,150,0,0.55); color: #e8c97a; } .profile-modal-btn--settings:hover { background: rgba(201,150,0,0.12); border-color: rgba(201,150,0,0.4); } .profile-modal-btn--logout { color: #f87171; border-color: rgba(248,113,113,0.15); } .profile-modal-btn--logout:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.4); color: #ff8888; } /* Tab-uri profil — stilul vine din regulile universale */ .profile-modal-tabs { margin-top: 8px; margin-bottom: 0; padding: 0 20px; } /* .profile-tab — stilul vine din regulile universale de mai jos */ .profile-tab-content { margin-top: 0; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; /* vezi comentariul de la .dock-panel-body — fix pull-to-refresh pe telefon */ flex: 1; padding: 0 20px 16px; } .profile-tab-empty { font-size: var(--text-sm); color: #444; text-align: center; padding: 16px 0; } /* ── Activitate profil ───────────────────────────────────────── */ .activity-chart-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(200,146,74,0.15); border-radius: var(--radius-md); padding: 10px 4px 6px; margin-bottom: 10px; } .activity-chart-title { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .activity-chart-svg { width: 100%; height: auto; display: block; } .activity-chart-axis-label { font-size: 8px; fill: rgba(200,168,74,0.55); } .activity-chart-value-label { font-size: 9px; font-weight: 700 !important; } .activity-chart-legend { display: flex; justify-content: center; gap: 14px; margin-top: 2px; } .activity-chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--color-text-muted); } .activity-chart-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(200,146,74,0.1); } .activity-item:last-child { border-bottom: none; } .activity-icon-wrap { flex-shrink: 0; width: 28px; display: flex; justify-content: center; } .activity-type-icon { width: 24px; height: 24px; object-fit: contain; } .activity-target-wrap { flex-shrink: 0; position: relative; } .activity-target-av { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(200,146,74,0.4); object-fit: cover; } .activity-target-wrap .player-lvl-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .activity-text { flex: 1; font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; } .activity-sub { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; } .activity-ts { flex-shrink: 0; font-size: 10px; color: #555; white-space: nowrap; } /* ── Grid realizări ── */ .ach-progress-row { text-align: center; margin-bottom: var(--gap-md); } .ach-progress-label { font-size: var(--text-sm); color: var(--color-text-muted); } .ach-progress-label b { color: var(--color-accent); } .ach-squares { display: grid; /* minmax(0, 1fr), NU doar 1fr — fără asta, coloanele grid au un minim implicit de „auto" (mărimea conținutului), nu 0, deci pe ecrane înguste (telefon) rândul de 6 pătrate nu se mai putea strânge sub lățimea lor naturală și ieșea din caseta panoului („unele ies", raportat de user). Exact același bug (și fix) găsit deja la grid-urile de Bijuterii/ Arme/Mașini într-o sesiune anterioară — recurent, altă grilă, aceeași cauză. */ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .ach-square { position: relative; aspect-ratio: 1 / 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(200,168,74,0.15); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; padding: 10%; cursor: default; transition: border-color 0.15s; } .ach-square img { width: 100%; height: 100%; object-fit: contain; opacity: 0.35; filter: grayscale(60%); transition: opacity 0.15s, filter 0.15s; } .ach-square--unlocked { border-color: rgba(200,168,74,0.5); background: rgba(200,168,74,0.06); } .ach-square--unlocked img { opacity: 1; filter: none; } .ach-square:hover { border-color: rgba(200,168,74,0.7); } .ach-square-check { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #2e7d32; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #1a0e00; } .profile-info-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: var(--text-base); } .profile-info-row span:first-child { color: var(--color-text-muted); } .profile-info-row span:last-child { color: #fff; font-weight: 600; } .profile-info-row:last-child { border-bottom: none; } .hud-info { display: flex; flex-direction: column; gap: var(--gap-xs); padding-top: var(--gap-xs); } .hud-name { font-size: var(--text-lg); font-weight: 700; color: #fff; line-height: 1; } .hud-city { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: 8px; } /* Placă nume+oraș — fără „casetă" (fundal plin + bordură + nituri), doar linie deasupra + linie dedesubt. Imaginea de oraș din spate a fost ÎNCERCATĂ DE 2 ORI (2026-09-05 — o dată extinsă la tot panoul, o dată scopată doar la placă cu 2-3 variante de imagine/ton) și REVENITĂ de fiecare dată — „se vede rău". Rămâne varianta stabilă, doar liniile. Dacă se reia ideea, de discutat din nou de la zero cu mockup, nu direct pe cod live. */ .hud-plaque { position: relative; border-radius: 8px; padding: 4px 8px; margin-bottom: 6px; } .hud-plaque::before { content: ''; position: absolute; inset: 0; background: /* linie sus */ linear-gradient(to right, transparent, rgba(200,168,74,0.8) 15%, rgba(200,168,74,0.8) 85%, transparent) top left / 100% 1px no-repeat, /* linie jos */ linear-gradient(to right, transparent, rgba(200,168,74,0.8) 15%, rgba(200,168,74,0.8) 85%, transparent) bottom left / 100% 1px no-repeat; z-index: 0; } .hud-plaque .hud-name, .hud-plaque .hud-city { position: relative; z-index: 1; } .hud-plaque .hud-city { margin-bottom: 0; } /* Separatorul auriu subțire dintre placă și rândul de resurse (adăugat 2026-08-22) — eliminat la cerere (cerere user 2026-09-05, „eliminăm linia aia dintre nume și casetele de jos"). */ .hud-plaque-rivet { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--color-accent-dim, #c8924a); } .hud-plaque-rivet.tl { top: 3px; left: 3px; } .hud-plaque-rivet.tr { top: 3px; right: 3px; } .hud-plaque-rivet.bl { bottom: 3px; left: 3px; } .hud-plaque-rivet.br { bottom: 3px; right: 3px; } /* Resurse ca „sloturi de monedă" — cerc întunecat cu bordură aurie în jurul iconiței, în loc de iconița goală direct pe fundal. Cerc 24px + iconiță redusă la 15px (nu cea standard de 20px) — exact dimensiunile din macheta aprobată; păstrarea iconiței la 20px într-un cerc de 26px umfla fiecare rând și, per total, întreaga casetă (cerere user 2026-08-16: „mi se pare prea inalta"). */ .hud-resource-coin { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.35); border: 1px solid rgba(180,130,20,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hud-resource-coin .hud-resource-icon { width: 15px; height: 15px; } /* Cele 3 monede colorate semantic distinct — cerere user 2026-08-22 ("de ce nu ai colorat si bulina de la banii simpli si de la aur?"), extinsă la toate 3 după primul pas (doar banii curați). Verde/auriu preiau paleta deja folosită în joc pentru bani curați/murdari (news_stolen_suffix, index.php:5193 — #4ade80/#f5c542), aurul reia culoarea din macheta deja aprobată de user pentru acest coin (profil_card_mockup3). */ .hud-resources .hud-resource:nth-child(1) .hud-resource-coin { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.5); } .hud-resources .hud-resource:nth-child(2) .hud-resource-coin { background: rgba(245,197,66,0.16); border-color: rgba(245,197,66,0.5); } .hud-resources .hud-resource:nth-child(3) .hud-resource-coin { background: rgba(255,215,90,0.18); border-color: rgba(200,160,40,0.55); } /* Fără „casetă" (fundal plin + bordură + nituri) — cerere user 2026-09-05, „la fel ca la nume, nu trebuia să fie identic": aici, în loc de linie sus/jos ca la .hud-plaque, o linie subțire ÎNTRE cele 3 rânduri (bani/bani murdari/aur), aceeași rețetă de degrade (fade la capete). Nituri (.hud-plaque-rivet) eliminate din markup DOAR aici. */ .hud-resources { position: relative; display: flex; flex-direction: column; gap: 0; padding: 3px 6px; } .hud-resource:not(:first-child)::before { content: ''; position: absolute; top: 0; left: 4px; right: 4px; height: 1px; background: linear-gradient(to right, transparent, rgba(200,168,74,0.5) 15%, rgba(200,168,74,0.5) 85%, transparent); } .hud-resource { position: relative; display: flex; align-items: center; gap: var(--gap-sm); padding: 4px 0; min-width: 145px; } /* Fără border-bottom (era acolo dinainte de „Placă de bandă") — cercurile din jurul iconițelor despart deja vizual rândurile, o linie în plus doar umfla înălțimea fără rost (cerere user 2026-08-16). */ /* Doar rândurile cu acțiune reală (au un .hud-resource-plus în interior) devin cursor:pointer — rândul de bani murdari nu are nicio acțiune, rămâne neutru. padding-right rezervă loc pentru badge-ul absolut poziționat de mai jos — fără el, o valoare foarte lungă (jucătorii ajung la miliarde/trilioane) ar putea aluneca chiar sub „+". */ .hud-resource:has(.hud-resource-plus) { cursor: pointer; padding-right: 18px; } /* Model IDENTIC cu „+" de la Viață/Energie/Maiestrie (.stat-plus-btn) — user 2026-07-20 a semnalat că tot mai erau diferite după primul fix (doar dimensiunea se potrivea, poziționarea rămăsese "static", în fluxul normal, ca buton propriu). Acum: position:absolute (ancorat la .hud-resource, făcut position:relative mai sus) + pointer-events:none (imaginea e doar decorativă, click-ul e pe TOT rândul .hud-resource, la fel ca .stat-card → .stat-plus-btn) + opacity:1 (nu mai e "stinsă", identic cu referința). Poziția (dreapta, centrat vertical) e adaptată formei rândului — .hud-resource e un rând lat, nu o cutie pătrată ca .stat-card, deci "colț stânga-sus" ar fi suprapus iconița resursei; dreapta e echivalentul vizual corect. */ .hud-resource-plus { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; opacity: 1; z-index: 2; } .hud-resource-icon { font-size: var(--text-md); line-height: 1; width: 20px; height: 20px; object-fit: contain; } .cur-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; position: relative; top: -1px; } .hud-resource-val { font-size: var(--text-base); font-weight: 700; color: #e8e8e8; } /* Puls scurt la schimbare (cerere user 2026-08-22, machetă "B") — declanșat din JS (updateHudResource(), index.php), aplicat pe orice element care afișează bani/aur/bani murdari, inclusiv oglinda mini de pe telefon când panoul e colapsat. */ @keyframes hud-resource-flash-up { 0% { color: #7ec97e; text-shadow: 0 0 6px rgba(126,201,126,0.8); } 100% { color: inherit; text-shadow: none; } } @keyframes hud-resource-flash-down { 0% { color: #e07a7a; text-shadow: 0 0 6px rgba(224,122,122,0.8); } 100% { color: inherit; text-shadow: none; } } .hud-resource-flash-up { animation: hud-resource-flash-up 900ms ease-out; } .hud-resource-flash-down { animation: hud-resource-flash-down 900ms ease-out; } /* ══════════════════════════════════════════════ STAT CARDS — dreapta sus ══════════════════════════════════════════════ */ /* Wrapper pentru .hud-stats + .hud-missions-btn (vezi markup, index.php) — SINGURUL copil flex direct al .game-hud pentru acest grup, ca .game-hud (justify-content:space-between) să-l lipească de marginea dreaptă exact ca înainte de butonul de Misiuni; fără el, cele 2 deveneau copii separați ai .game-hud, iar .hud-stats nu mai ajungea la marginea reală. margin-left:auto (mutat aici de pe .hud-stats) îl împinge la dreapta pe axa principală (rândul) a .game-hud; align-items:flex-end aliniază la dreapta cele 2 rânduri din coloană. */ .hud-stats-col { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; } .hud-stats { display: flex; gap: var(--gap-sm); align-items: flex-start; flex-wrap: wrap; } /* 14px/3px fixe → cqw. Bază content-box = 100cqw: 62px cutie − 2×1px border − 2×4px padding (.stat-card are padding:2px 4px, spre deosebire de .hud-mini-resource) = 52px — verificat live (getBoundingClientRect()) după prima încercare, care ignorase padding-ul și dădea iconițe cu ~25% mai mici decât intenționat. Zoom Android micșorează cutia .stat-card (calc(86vw/5) pe mobil) fără să micșoreze și acest buton fix, aceeași clasă de bug ca la banii din HUD, reparată identic. */ .stat-plus-btn { position: absolute; top: 5.77cqw; left: 5.77cqw; width: 26.92cqw; height: 26.92cqw; pointer-events: none; z-index: 2; } .stat-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 62px; height: 62px; padding: 2px 4px; background: linear-gradient(135deg, rgba(28,18,5,0.97), rgba(18,12,3,0.97)); border: 1px solid rgba(180,130,20,0.35); border-radius: 10px; cursor: default; transition: border-color 0.2s; overflow: visible; container-type: inline-size; } .stat-card:hover { border-color: rgba(201,150,0,0.7); } /* Renumit din .stat-icon → .hud-stat-icon: numele se suprapunea cu clasa .stat-icon folosită direct pe în alt context (bandă, statImg(), width:20px la linia ~8360) — la aceeași specificitate, acea regulă (mai jos în fișier) câștiga cascada și forța acest wrapper la 20x20px, deși imaginea din interior era 28x28px, dezaliniind centrarea cartonașelor Viață/Energie/Curaj/Maiestrie. Bug real, nu doar percepție — găsit prin măsurare live. */ .hud-stat-icon { font-size: var(--text-lg); line-height: 1; display: flex; align-items: center; justify-content: center; } .hud-stat-icon img { width: 53.85cqw; /* era 28px fix — 28/52×100 (52px content-box: 62px cutie − border − padding) */ height: 53.85cqw; object-fit: contain; } .stat-bar-wrap { width: 100%; height: 5px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; position: relative; box-shadow: 0 0 5px var(--bar-color, #4ade80); } .stat-bar { height: 100%; border-radius: 99px; transition: width 0.4s ease; background: linear-gradient(90deg, var(--bar-color, #4ade80), color-mix(in srgb, var(--bar-color, #4ade80) 60%, white)); position: relative; } .stat-bar::after { content: ''; position: absolute; top: 1px; left: 4px; right: 4px; height: 2px; border-radius: 99px; background: rgba(255,255,255,0.4); pointer-events: none; } .stat-value { font-size: var(--text-base); font-weight: 700; line-height: 1; } /* ════════════════════════════════════════════ TOOLTIP UNIVERSAL — același stil peste tot ════════════════════════════════════════════ */ :root { --tooltip-bg: rgba(15,10,3,0.97); --tooltip-border: 1px solid rgba(201,150,0,0.3); --tooltip-radius: 6px; --tooltip-shadow: 0 4px 16px rgba(0,0,0,0.7); --tooltip-padding: 5px 10px; --tooltip-z: 300; } /* ── Tooltip ── */ .stat-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); padding: var(--tooltip-padding); z-index: var(--tooltip-z); pointer-events: none; flex-direction: column; gap: var(--gap-xs); box-shadow: var(--tooltip-shadow); } .stat-card:last-child .stat-tooltip, .stat-card:nth-last-child(2) .stat-tooltip { left: auto; right: 0; } .stat-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 20px; border: 5px solid transparent; border-bottom-color: rgba(180,130,20,0.4); } .stat-card:last-child .stat-tooltip::before, .stat-card:nth-last-child(2) .stat-tooltip::before { left: auto; right: 20px; } .stat-tooltip strong, .profile-social-tooltip strong { font-size: var(--text-base); color: var(--color-text-strong); display: block; margin-bottom: 2px; } .stat-tooltip span, .profile-social-tooltip span { font-size: var(--text-sm); color: var(--color-text-muted); display: block; line-height: 1.4; } .stat-tooltip-values, .profile-social-tooltip-val { font-size: var(--text-sm); color: var(--color-accent) !important; font-weight: 700; margin-top: 4px; } .regen-table { margin-top: 6px; border-collapse: collapse; } .regen-table thead th { padding-bottom: 3px; text-align: left; } .regen-table thead th:last-child{ width: 1px; white-space: nowrap; padding-left: 8px; } .regen-table td { padding: 1px 0; white-space: nowrap; } .regen-label { font-size: var(--text-xs); color: var(--color-muted); font-weight: 600; padding-right: 8px; } .regen-val { font-size: var(--text-xs); color: var(--color-accent); font-weight: 700; } .regen-vip-val { font-size: var(--text-xs); color: var(--color-accent); font-weight: 700; opacity: 0.3; padding-left: 8px; } .regen-vip-val.active { opacity: 1; } /* VIP activ — stinge valorile de bază, luminează valorile VIP */ .regen-table.is-vip .regen-val { opacity: 0.3; } .regen-table.is-vip .regen-label { opacity: 0.3; } .regen-table.is-vip .regen-vip-val { opacity: 1; } /* Descompunerea Vieții maxime (Bază Spital + bonus obiecte de set) — doar la cardul de Viață, cerere user 2026-08-26 */ .stat-tooltip-breakdown { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 2px; } .stat-tooltip-breakdown-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-xs); color: var(--color-text-muted); } .stat-tooltip-breakdown-row span:last-child { color: var(--color-accent); font-weight: 700; white-space: nowrap; } .stat-tooltip-refill { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: var(--text-xs); color: var(--color-muted); font-weight: 600; white-space: nowrap; } .stat-card:hover .stat-tooltip { display: flex; } /* ── Reload card ── */ .stat-card--reload { width: 62px; height: 62px; } .stat-countdown { font-size: var(--text-base); font-weight: 700; color: #ffcc66; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; line-height: 1; } /* Buton fără utilitate încă, după cartonașul de reîncărcare — DOAR telefon. Identic ca dimensiune/formă cu .hud-mini-extra-btn (banda de bani): 8vw rotund — cerere user explicită, nu doar „similar". Lățime fixă (NU flex:1 ca celelalte 5 cartonașe — vezi media query de mai jos, unde cartonașele își împart restul de spațiu, iar butonul ăsta rămâne constant. */ .hud-stats-extra-btn { display: none; align-items: center; justify-content: center; /* .hud-stats are align-items:flex-start (pentru cartonașele de 56px, care oricum au toate aceeași înălțime, deci nu contează) — dar butonul ăsta e mult mai scund (8vw ≈ 31px) și s-ar alinia sus, cu gol dedesubt. align-self îl centrează doar pe el, ca la banda de bani (.hud-mini-resources are align-items:center pe tot rândul, aici nu vrem să schimbăm comportamentul cartonașelor, doar al butonului). */ align-self: center; width: 8vw; height: 8vw; border-radius: 50%; /* Fundal/bordură/umbră puse la loc (cerere user), la fel ca .hud-mini-extra-btn (banda de bani) — imaginea rămâne la 100% din buton (padding:0), imaginile au fost refăcute să se potrivească deja cu fundalul. */ padding: 0; background: linear-gradient(135deg, rgba(28,18,5,0.97) 0%, rgba(18,12,3,0.97) 100%); border: 1px solid rgba(180,130,20,0.45); box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: pointer; flex-shrink: 0; } .hud-stats-extra-btn img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ── Responsive ── */ @media (max-width: 768px) { /* Același principiu ca la banda de bani (.hud-mini-resources): 0,5% pe fiecare margine, 1% între cartonașe (redus din 2%, cerere user 2026-07-21) — rândul se aliniază cu panoul (calc(0,5vw - var(--gap-lg)), aceeași formulă). Spre deosebire de bani (unde butonul avea o lățime fixă, 8vw, iar restul împărțeau matematic 88vw/3), aici NU rezervăm un procent fix pentru butonul nou — „lățim casetele cât ne permite fereastra" (cerere user) = flex:1 pe toate (inclusiv butonul nou), ca să umple automat tot spațiul rămas, împărțit egal. nowrap, ca să rămână toate pe UN rând, nu să treacă pe următorul ca înainte. */ .hud-stats { flex-wrap: nowrap; width: 99vw; flex-shrink: 0; margin-left: calc(0.5vw - var(--gap-lg)); gap: 1vw; } /* Cartonașele Viață/Energie/Curaj/Maiestrie + Reîncărcare — DOAR telefon, pe desktop rămân 62px pătrate, nemodificate. Aici, pe telefon, înălțimea rămâne 56px ca înainte (doar lățimea s-a mărit, cerere user 2026-07-21, revenit după prima încercare) — sincronizată manual cu .hud-mini-resource (bani/aur), care e tot 56px. Lățime: (99vw − 5 goluri×1vw − 8vw butonul) / 5 cartonașe = calc(86vw/5) fiecare — aceeași logică ca la banda de bani (calc(88vw/3)), de data asta cu butonul la dimensiune FIXĂ (8vw, identic .hud-mini-extra-btn), nu flex:1 ca înainte. */ .stat-card, .stat-card--reload { flex-shrink: 0; width: calc(86vw / 5); height: 56px; display: flex; } .hud-stats-extra-btn { display: flex; } } /* ══════════════════════════════════════════════ GAME LAYOUT — hartă full screen + HUD deasupra ══════════════════════════════════════════════ */ /* Fundal identic cu html/body (#0c0802, maro-închis) — înainte era #0a0e1e (albastru-navy, rămas dintr-o schemă de culori veche, dinainte de tema maro/auriu), vizibil pe iOS Safari în spațiul expus sub conținut când bara de jos/tastatura mișcă viewport-ul real (user 2026-07-22, capturi cu fundal albastru pe telefon fizic). */ .game-body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #0c0802; } /* Harta full screen */ /* HUD deasupra hărții */ .game-hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--gap-lg); gap: var(--gap-lg); } .game-hud > * { pointer-events: all; } /* Slot-uri pe hartă */ .map-slot { position: absolute; width: 6%; aspect-ratio: 1 / 0.6; transform: translate(-50%, -50%); cursor: pointer; z-index: 5; } .map-slot--empty { background: none; border: none; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, opacity 0.2s; } .map-slot--empty:hover { opacity: 0.85; transform: translate(-50%, -50%) scale(1.04); } .map-empty-sprite { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; transition: opacity 0.2s; } @keyframes slotPulseWhite { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .map-slot--filled { overflow: visible; background: none !important; border: none !important; backdrop-filter: none !important; animation: none !important; } .map-slot--filled:hover /* Panel costruire (popup jos-centru) */ .build-panel-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-base); font-weight: 700; color: #fff; } .build-panel-header button { background: none; border: none; color: #aaa; cursor: pointer; font-size: var(--text-md); padding: 0 4px; } .build-panel-list { display: flex; gap: var(--gap-md); flex-wrap: wrap; } .build-option { display: flex; align-items: center; gap: var(--gap-md); padding: var(--gap-md) var(--gap-md); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s; min-width: 140px; } .build-option:hover { background: rgba(120,180,255,0.12); border-color: rgba(120,180,255,0.4); } .build-option img { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; } .build-option-info { flex: 1; min-width: 0; } .build-option strong { display: block; font-size: var(--text-base); color: #fff; margin-bottom: 3px; } .build-option span { font-size: var(--text-sm); color: #ffcc66; } /* Tooltip clădire plasată */ .building-tooltip { position: fixed; z-index: 60; transform: translate(-50%, -100%); background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); padding: var(--tooltip-padding); box-shadow: var(--tooltip-shadow); flex-direction: column; gap: var(--gap-sm); min-width: 160px; } .building-tooltip-name { font-size: var(--text-base); font-weight: 700; color: var(--color-text-strong); } .building-tooltip-level { font-size: var(--text-sm); color: var(--color-accent-dim); } .building-relocate-btn { padding: 6px 10px; background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.35); color: #60a5fa; border-radius: 7px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; } .building-relocate-btn:hover { background: rgba(96,165,250,0.3); } #tooltipUpgrade { padding: 6px 10px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; border-radius: 7px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; transition: background 0.15s; } #tooltipUpgrade:hover:not(:disabled) { background: rgba(74,222,128,0.25); } #tooltipUpgrade:disabled { opacity: 0.5; cursor: not-allowed; color: var(--color-text-muted); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); } .building-close-btn { padding: 5px 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #aaa; border-radius: 7px; cursor: pointer; font-size: var(--text-sm); } /* ── ZOOM / PAN MAP ─────────────────────────────── */ /* Butoane zoom */ .map-zoom-controls { position: fixed; bottom: 90px; /* aliniat cu #gchatToggleCircle (bulina de chat) — magazinul (ultimul buton din stivă) ajunge la același nivel; zoomIn/zoomOut, stivuite deasupra lui în același container, se ridică automat odată cu el */ left: 24px; z-index: 20; display: flex; flex-direction: column; gap: var(--gap-sm); pointer-events: all; } .map-zoom-btn { width: auto; height: auto; background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s; box-shadow: none; } .map-zoom-btn:hover { opacity: 0.75; } .build-option--disabled { opacity: 0.5; cursor: not-allowed; } .build-option--disabled:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } .built-label { color: #5dd87a !important; font-weight: 700; } .cant-afford-label { color: #ff6b7a !important; } /* ── GAME LAYOUT ─────────────────────────────────────────── */ /* ── HARTĂ — panoramare pe SCROLL NATIV ─────────────────────────────────────────────── #gameMapBg e containerul de scroll (overflow:auto). #gameMapPan e „sizer"-ul: primește din JS (applyTransform) dimensiunea reală a hărții scalate (MAP_W*s × MAP_H*s) — el dă intervalul de scroll. #gameMapContainer ține doar scalarea de zoom (transform:scale). Poziția vine 100% din scrollLeft/scrollTop — rulează pe compositor thread, cu momentum din fabrică, fluid inclusiv pe iOS/WebKit (unde varianta veche cu transform:translate scris din JS la fiecare cadru de touchmove sacada rău). Migrat 2026-08-28. */ /* Cadru fix care DOAR taie — scroll-ul real e pe .game-map-bg dedesubt, dimensionat cu +40px peste acest cadru. Indicatoarele de scroll ale Android-ului se desenează la marginea containerului de scroll și NU pot fi ascunse din CSS pe Android Chrome (nici display:none pe ::-webkit-scrollbar, nici scrollbar-width:none) — împinse cu +40px, cad în afara cadrului și sunt tăiate aici. Aplicat pe toate ecranele (inofensiv pe desktop, unde regulile ::-webkit-scrollbar de mai jos oricum le ascundeau). */ .game-map-viewport { position: fixed; inset: 0; overflow: hidden; z-index: 0; /* 2026-09-06: `contain: strict` scos temporar — testăm dacă stiva de hint-uri de randare (contain + content-visibility + scale + scroll nativ) e ce prăbușește rendererul la tragere. Debug arată crash abrupt, fără FREEZE/PAGEHIDE. */ } .game-map-bg { position: absolute; inset: 0 auto auto 0; /* ancorat sus-stânga; dimensiunea vine din width/height */ width: calc(100% + 40px); /* +40px peste cadru — indicatoarele de scroll Android cad în afara ecranului și sunt tăiate de .game-map-viewport. Sigur pe orice ecran: harta (MAP_W*s ≥ viewport, garantat de minScale) acoperă mereu zona vizibilă, iar surplusul de 40px e fie neajungibil la scroll, fie e dincolo de marginea tăiată — nu descoperă niciodată fundalul. */ height: calc(100% + 40px); overflow: auto; cursor: grab; user-select: none; background: #10160f; /* dacă tot apare un flash de rasterizare la fling rapid, să citească a „umbră / se încarcă", nu un panou verde */ touch-action: pan-x pan-y; /* panoramare nativă cu 1 deget; pinch (2 degete) e pe JS */ /* overscroll-behavior: none — la o tragere puternică stânga/dreapta care lovea marginea de scroll, overscroll-ul declanșa gestul de navigare înapoi/înainte al browserului (pe iOS în PWA = swipe → merge înapoi în istoric → login.php redirecționează la index → arată ca un „refresh"). `none` blochează și bounce-ul, și gestul de navigare pe overscroll. */ overscroll-behavior: none; -webkit-overflow-scrolling: touch; /* momentum iOS pe versiuni vechi (pe cele noi e implicit) */ overflow-anchor: none; /* fără sărituri când se adaugă/scot bărci/avioane/crime */ scrollbar-width: none; /* Firefox + Chrome 121+ (proprietate standard) */ -ms-overflow-style: none; /* Edge/IE vechi */ } /* Regula globală ::-webkit-scrollbar (L250, width:4px) forțează Chromium — inclusiv Android — în modul de bare CLASICE (persistente, cu spațiu), nu overlay. Aici le anulăm complet pentru hartă. Android Chrome NU respecta `display:none` singur pe pseudo-elementul de scrollbar când e în modul clasic (bara tot se vedea, user 2026-08-28) — de-aia și width/height:0 !important + thumb/track/corner transparente și ele. Combinația asta acoperă toate cazurile. */ .game-map-bg::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; -webkit-appearance: none !important; background: transparent !important; } .game-map-bg::-webkit-scrollbar-thumb, .game-map-bg::-webkit-scrollbar-track, .game-map-bg::-webkit-scrollbar-corner { display: none !important; background: transparent !important; } .game-map-pan { position: relative; /* sizer în flux normal — dă dimensiunea zonei scrollabile */ transform-origin: 0 0; overflow: hidden; /* dimensiunea sizer-ului (setată inline din JS) e autoritară pentru intervalul de scroll al părintelui; fără asta, unele versiuni WebKit lasă cutia ne-scalată a #gameMapContainer (MAP_WIDTH×MAP_HEIGHT) să umfle scrollWidth-ul. Nu taie nimic vizibil — harta scalată are exact dimensiunea sizer-ului. */ /* width/height sunt setate inline din JS (applyTransform) = valori calculate la runtime */ } .game-map-container { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(1); /* FĂRĂ will-change / translateZ — pe iOS WKWebView promovarea acestui strat (MAP_WIDTH×MAP_HEIGHT px, scalat) la o textură GPU proprie umfla memoria rendererului suficient cât OS-ul să-l omoare → ecran negru + „A survenit în mod repetat o problemă" (user 2026-09-06). Aceeași familie ca bug-ul de „rezoluție proastă / dreptunghiuri negre" din 2026-08-27. Harta e prea mare ca să stea într-un singur strat compozit pe telefon — vezi TO_DO (footprint memorie hartă). Scala se schimbă oricum rar. */ } /* În timpul lockdown-ului (#lockdownOverlay acoperă oricum tot ecranul) — blochează și scroll-ul, ca harta să nu poată fi mișcată „pe ascuns" sub overlay. */ body.lockdown-active .game-map-bg { overflow: hidden; } /* Grila de fundal — 12 bucăți (3 coloane × 4 rânduri), nu o singură imagine uriașă; dimensiuni EXACTE (nu %), ca tile-urile să se îmbine perfect fără spații/suprapuneri. Valorile trebuie să rămână identice cu MAP_TILE_WIDTH/MAP_TILE_ROW_HEIGHTS/MAP_WIDTH/ MAP_HEIGHT din constants.php — acest fișier CSS e servit static, nu trece prin PHP, deci nu poate citi constantele direct (la fel ca .game-map-img/.game-map-slots mai jos). */ .map-tiles-grid { display: grid; grid-template-columns: repeat(3, 740px); grid-template-rows: 650px 650px 650px 658px; width: 2220px; /* = MAP_WIDTH (2026-09-06: micșorată la rezoluția de referință) */ height: 2608px; /* = MAP_HEIGHT */ } .map-tile { display: block; /* +2px pe fiecare axă = fiecare tile depășește puțin celula lui de grilă, deci marginile vecinilor se SUPRAPUN în loc să lase o linie subțire la îmbinare. Sub transform:scale() fracționar (desktop) marginile tile-urilor cad pe coordonate sub-pixel și browserul rotunjește fiecare tile independent → apărea o îmbinare vizibilă (user 2026-08-28). Suprapunerea e acoperită de tile-ul următor (ordine DOM: rând cu rând), iar la marginea exterioară a hărții e tăiată de `overflow:hidden` de pe .game-map-pan. Tile-urile sunt fotografii opace — stretch-ul de ~0.2% din object-fit:cover e imperceptibil. */ width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; pointer-events: none; user-select: none; /* 2026-09-06: `content-visibility:auto` + `contain-intrinsic-size` scoase temporar — suspecte #1 pentru crash-ul de renderer la tragere (toggle rapid de randare pe 12 tile-uri, într-un părinte `transform:scale` + `contain`, în timpul scroll-ului nativ). */ } /* ── Loading overlay ── */ #mapLoadingOverlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10,8,5,0.92); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; } .map-loading-content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 320px; } .map-loading-title { font-size: 28px; font-weight: 900; color: #c8a84a; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 20px rgba(200,168,74,0.5); } .map-loading-bar-wrap { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 99px; overflow: hidden; } .map-loading-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #8b6914, #c8a84a, #f0d070); border-radius: 99px; transition: width 0.2s ease; box-shadow: 0 0 8px rgba(200,168,74,0.6); } .map-loading-label { font-size: 13px; color: var(--color-text-muted); letter-spacing: 0.5px; } /* ── Badge nivel clădire ── */ .building-badges-row { position: absolute; transform: translate(-50%, -80%); display: flex; align-items: center; gap: 4px; pointer-events: none; z-index: 101; } .building-badges-row--bottom { transform: translate(-50%, 60%); } /* .building-level-badge — eliminat: nivelul e acum prefix „#N" în .building-flag (2026-09-06) */ /* ── NOTĂ 2026-09-06: harta a fost micșorată 3330→2220 (= 2/3), deci scala de afișare a crescut ×1.5. TOATE dimensiunile px de pe overlay-urile hărții (flag-uri, bărci, avioane, infracțiuni, badge-uri) de mai jos au fost ÎMPĂRȚITE LA 1.5 (×2/3) ca să revină la mărimea vizuală de dinainte. Dacă se revine la harta 3330 → înmulțește-le înapoi cu 1.5. ── */ /* Timer upgrade — element independent, mai mare, sub clădire (fostul rând „nivel") */ .building-upgrade-timer { position: static; background: rgba(10,8,5,0.92); border: 1px solid rgba(255,180,0,0.7); color: #fbbf24; font-size: 13px; font-weight: 900; height: 23px; padding: 0 8px; border-radius: 11px; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 8px rgba(255,180,0,0.3); z-index: 102; white-space: nowrap; animation: timer-glow 2s ease-in-out infinite; } @keyframes timer-glow { 0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 6px rgba(255,180,0,0.3); } 50% { box-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 14px rgba(255,180,0,0.7); } } /* ── Flag nume clădire ── */ .building-flag { position: absolute; transform: translate(-50%, -420%); display: flex; align-items: baseline; gap: 4px; background: rgba(10,8,5,0.82); border: 1px solid rgba(200,168,74,0.32); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 5px; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 5px rgba(0,0,0,0.5); letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); z-index: 100; } .building-flag-level { color: #f5c542; } .building-flag-name { color: #fff; } .building-flag-occ { color: #f5c542; font-weight: 800; margin-left: 3px; } .map-loading-blur { filter: blur(8px); transition: filter 0.5s ease; } .game-map-slots { position: absolute; top: 0; left: 0; width: 2220px; /* = MAP_WIDTH */ height: 2608px; /* = MAP_HEIGHT */ } /* HUD deasupra hărții */ .game-hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--gap-lg); gap: var(--gap-lg); } .game-hud > * { pointer-events: all; } .map-building-sprite { width: 110%; height: auto; margin-top: -20%; margin-left: -5%; object-fit: contain; pointer-events: none; transition: none; display: block; } .map-building-upgrading { opacity: 0.75; } .map-slot--filled:hover .map-building-sprite { width: 110%; height: auto; margin-top: -20%; margin-left: -5%; object-fit: contain; pointer-events: none; transition: none; display: block; } /* ── BUILD PANEL ─────────────────────────────────────────── */ /* Build list — nou */ .build-list-item { display: flex; align-items: center; gap: var(--gap-md); padding: 10px var(--gap-sm); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s, border-color 0.15s; margin-bottom: var(--gap-xs); } .build-list-item:hover { background: rgba(196,160,100,0.10); border-color: rgba(196,160,100,0.35); } .build-list-item--disabled { opacity: 0.45; cursor: not-allowed; } .build-list-item--disabled:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); } .build-list-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; } .build-list-info { flex: 1; min-width: 0; } .build-list-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: 3px; } .build-list-desc { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.3; } .build-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; font-size: var(--text-xs); } .built-label { color: #5dd87a !important; font-weight: 700; } .cant-afford-label { color: #ff6b7a !important; } /* ── SLOT GOL ────────────────────────────────────────────── */ .map-empty-sprite { width: 100%; height: auto; margin-top: -20%; object-fit: contain; pointer-events: none; display: block; opacity: 0.9; transition: opacity 0.2s, transform 0.2s; } /* Animație pulsare subtilă pe slot-urile goale */ @keyframes slotPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* ── SLOT GOL ────────────────────────────────────────────── */ .map-slot-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); padding: var(--tooltip-padding); box-shadow: var(--tooltip-shadow); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 500; } .map-slot--empty:hover .map-slot-tooltip { display: block; } .map-slot--empty:hover .map-empty-sprite { opacity: 1; transform: translateY(-4px) scale(1.05); animation: none; } /* ── COMBAT STATS (Forță, Apărare, Viteză) ──────────────── */ .hud-combat-stats { display: flex; gap: var(--gap-md); align-items: center; align-self: flex-start; pointer-events: all; } .hud-combat-stat { position: relative; display: flex; align-items: center; gap: var(--gap-md); /* Profunzime radială + accent de culoare pe tip (roșu/verde/albastru, vezi modificatorii mai jos), în loc de gradient plat uniform + bordură aurie generică peste tot — cerere user 2026-08-22, caseta părea „seacă". Bordura stânga colorată a fost cerută, apoi redusă explicit ("mai puțin asta") — 2px, culoare translucidă, nu solidă. */ background: linear-gradient(135deg, rgba(28,18,5,0.97), rgba(18,12,3,0.97)); border: 1px solid rgba(180,130,20,0.4); border-left-width: 2px; border-radius: 10px; padding: var(--gap-sm) var(--gap-lg) var(--gap-sm) var(--gap-md); /* FĂRĂ clip-path octagonal (cel de mai jos, comentat, era moștenit din designul vechi) — cerere user 2026-08-22: coloțuri rotunde (border-radius de mai sus, deja acolo dar ignorat de clip-path, care are întotdeauna prioritate la forma vizibilă), nu tăiate. */ box-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* Nit mic în colț, stil dosar — ecou al niturilor deja folosite la caseta de profil, fără să adauge înălțime. */ .hud-combat-stat::before { content: ''; position: absolute; top: 4px; right: 7px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.22); } /* Opacitate 0.97 pe AMBELE capete ale gradientului (nu 0.14 ca prima variantă) — cerere user 2026-08-22: cifrele trebuie să rămână lizibile peste harta de sub HUD în orice circumstanță, deci cardul nu are voie să devină vizibil transparent nicăieri, doar nuanța de culoare se schimbă (roșu/verde/albastru închis → maro-negru de bază), nu și cât de opac e. */ .hud-combat-stat--atk { background: radial-gradient(circle at 22% 20%, rgba(60,22,16,0.97), rgba(18,12,3,0.97) 65%); border-left-color: rgba(248,113,113,0.55); } .hud-combat-stat--def { background: radial-gradient(circle at 22% 20%, rgba(16,42,22,0.97), rgba(18,12,3,0.97) 65%); border-left-color: rgba(74,222,128,0.55); } .hud-combat-stat--spd { background: radial-gradient(circle at 22% 20%, rgba(14,26,48,0.97), rgba(18,12,3,0.97) 65%); border-left-color: rgba(96,165,250,0.55); } .hud-combat-icon { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; /* Medalion rotund în spatele iconiței, în loc de pictogramă plată pe fundal gol. */ border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.12), rgba(0,0,0,0.35)); border: 1px solid rgba(255,255,255,0.2); padding: 5px; box-sizing: border-box; } .hud-combat-stat--atk .hud-combat-icon { background: radial-gradient(circle at 35% 30%, rgba(248,113,113,0.25), rgba(0,0,0,0.4)); border-color: rgba(248,113,113,0.5); } .hud-combat-stat--def .hud-combat-icon { background: radial-gradient(circle at 35% 30%, rgba(74,222,128,0.25), rgba(0,0,0,0.4)); border-color: rgba(74,222,128,0.5); } .hud-combat-stat--spd .hud-combat-icon { background: radial-gradient(circle at 35% 30%, rgba(96,165,250,0.25), rgba(0,0,0,0.4)); border-color: rgba(96,165,250,0.5); } .hud-combat-info { display: flex; flex-direction: column; gap: 1px; /* intentional: tightest label/value pair */ } .hud-combat-label { font-size: var(--text-xs); color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } .hud-combat-value { font-size: var(--text-base); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; } .hud-combat-stat--atk .hud-combat-value { color: #f87171; } .hud-combat-stat--def .hud-combat-value { color: #4ade80; } .hud-combat-stat--spd .hud-combat-value { color: #60a5fa; } /* Detaliere Forță/Apărare/Viteză pe surse — popover mic, ANCORAT sub badge-ul din HUD pe care s-a dat click (nu modal centrat pe ecran) — cerere user 2026-08-20, cu exemplu vizual concret de mărime/poziționare țintă. */ .stat-breakdown-catcher { position: fixed; inset: 0; z-index: 1000; background: transparent; } .stat-breakdown-popover { position: fixed; z-index: 1001; width: 230px; background: rgba(15,10,3,0.98); border: 1px solid rgba(180,130,20,0.5); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); padding: 10px 12px; } .stat-breakdown-popover-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); } .stat-breakdown-popover-label { font-size: 12px; font-weight: 700; color: #e8c97a; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .stat-breakdown-popover-total { font-size: 16px; font-weight: 700; } .stat-breakdown-rows { display: flex; flex-direction: column; } .stat-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; } .stat-breakdown-row-label { font-size: 11px; color: var(--color-text); } .stat-breakdown-row-val { font-size: 11px; font-weight: 700; color: #4ade80; white-space: nowrap; } /* ── Toast notificări ── */ .city-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); /* Fundal auriu/maro cald, ca restul jocului — era un negru-albăstrui moștenit, inconsecvent (cerere user 2026-07-24, captură toast „ajutor spital") */ background: #1a1208; border: 1px solid rgba(200,146,74,0.3); color: #fff; padding: 10px 20px; border-radius: 99px; font-size: var(--text-base); font-weight: 600; line-height: 1.4; opacity: 0; transition: transform 0.3s, opacity 0.3s; z-index: 9999; pointer-events: none; /* Mesajele lungi (ex. cooldown spionaj) depășeau lățimea ecranului pe telefon și se tăiau la ambele capete — acum se rup pe mai multe rânduri, limitate la lățimea utilă (cerere user 2026-08-29). border-radius: 99px se auto-clampează la jumătate din înălțime → forma rămâne „pastilă" la 1 rând și dreptunghi rotunjit curat la 2. */ white-space: normal; max-width: min(90vw, 400px); text-align: center; } .city-toast--show { transform: translateX(-50%) translateY(0); opacity: 1; } .city-toast--success { border-color: rgba(46,204,113,0.5); color: #5dd87a; } /* Banner PWA „Instalează ca aplicație" — bară fixă jos, discretă, cu buton (Android, instalare reală) sau doar instrucțiuni (iOS, Safari nu permite declanșare programatică) */ .pwa-install-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: #1a1200; border: 1px solid rgba(200,146,74,0.5); border-radius: var(--radius-md); padding: 10px 14px; max-width: 420px; width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 9998; } .pwa-install-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } .pwa-install-text { flex: 1; min-width: 0; } .pwa-install-title { font-size: var(--text-sm); font-weight: 700 !important; color: var(--color-accent); } .pwa-install-subtitle{ font-size: 11px; color: var(--color-text); opacity: 0.85; line-height: 1.3; } .pwa-install-btn { flex-shrink: 0; padding: 8px 14px !important; font-size: 12px; } .pwa-install-close { flex-shrink: 0; background: none; border: none; color: var(--color-muted); font-size: 14px; cursor: pointer; padding: 4px; } .city-toast--error { border-color: rgba(220,53,69,0.5); color: #ff6b7a; } .city-toast--warn { border-color: rgba(255,204,102,0.5); color: #ffcc66; } /* Auriu, nu albastru — „info" nu are o semnificație universală de culoare (spre deosebire de verde=succes/roșu=eroare/galben=avertisment), deci urmează accentul de bază al jocului */ .city-toast--info { border-color: rgba(200,146,74,0.5); color: #f5c542; } /* ══════════════════════════════════════════ DOCK BAR ══════════════════════════════════════════ */ .game-dock { position: fixed; /* Ridicată deasupra marginii ecranului (nu mai lipită jos), cerere user 2026-08-18 — bară „flotantă, tip capsulă" în loc de bară fixată pe margine. Coborâtă cu încă 3px (14px→11px, cerere user 2026-08-20), DOAR telefon — desktop are propria suprascriere mai jos, neatinsă. */ bottom: 11px; left: 50%; transform: translateX(-50%); z-index: 500; padding-bottom: 0; } /* Coborâtă cu 2px, apoi încă 3px, DOAR desktop (cerere user 2026-08-18) — pe mobil rămâne la 14px de mai sus. */ @media (min-width: 769px) { .game-dock { bottom: 9px; } } .dock-inner { display: flex; align-items: center; gap: var(--gap-xs); background: linear-gradient(180deg, rgba(30,20,5,0.97) 0%, rgba(12,8,2,1) 100%); /* Bordură uniformă pe toate laturile + colțuri complet rotunjite (pilulă) — înainte bara stătea lipită de marginea ecranului, cu doar colțurile de sus rotunjite și fără bordură jos; acum, flotând, are nevoie de contur complet pe toate laturile. */ border: 1px solid rgba(180,130,20,0.6); border-radius: 999px; padding: 6px 12px 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,210,80,0.12); } /* Item */ .dock-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 8px; cursor: pointer; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.15s; min-width: 42px; } /* @media(hover:hover) — bug real găsit de user 2026-08-20: pe telefon, un tap simulează :hover fără niciun „mouseleave" real care să-l anuleze, deci rămâne „blocat" activ după ce ridici degetul. La un al doilea tap (pe același buton, ca să închizi fereastra), .dock-item.active se elimină, dar :hover rămâne agățat — butonul apărea mai mare decât varianta lui normală (scale 1.1 blocat), nu revenea la starea de repaus. Efectul de hover nu are ce căuta pe un ecran fără mouse real — restricționat explicit la dispozitive cu hover adevărat (desktop), touch-ul nu-l mai poate declanșa deloc. */ @media (hover: hover) { .dock-item:hover { /* Fundalul auriu eliminat la cererea userului (2026-08-18) — rămâne doar efectul de zoom (transform). .dock-item.active (panoul curent deschis) neatins — rămâne cu fundal, e un indicator de stare, nu doar un efect de hover. */ transform: translateY(-4px) scale(1.1); } } /* Iconiță MICȘORATĂ + alb-negru (nu mărită), cerere user 2026-08-20 — varianta anterioară (fundal auriu + img mărită la 44px/77%) chiar SCHIMBA dimensiunea reală a imaginii, nu doar vizual — creștea înălțimea rândului flex al barei (.dock-inner), deci bara devenea mai înaltă exact când se activa un buton, iar ferestrele (poziționate după înălțimea barei, var(--dock-safe-bottom)) ajungeau să se suprapună cu ea. Fix la rădăcină: DOAR transform (scale/translateY — nu afectează layout-ul, spre deosebire de width/height) + filter (grayscale/brightness), nicio schimbare de dimensiune reală pe imagine. */ .dock-item.active { transform: translateY(-1px) scale(0.82); } .dock-item.active .dock-icon img { filter: grayscale(1) brightness(0.75); opacity: 0.75; } .dock-icon { font-size: var(--text-lg); line-height: 1; display: flex; align-items: center; justify-content: center; } .dock-icon img { width: 40px; height: 40px; object-fit: contain; } .dock-label { display: none; } /* Badge */ .dock-badge { position: absolute; top: 2px; right: 6px; background: #e74c3c; color: #fff; font-size: var(--text-xs); font-weight: 700; min-width: 16px; height: 16px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid rgba(0,0,0,0.4); line-height: 1; } /* Badge reducere activă pe iconița Magazin (hartă) — fundal închis fix, necesar fiindcă iconița plutește direct pe hartă (apă/iarbă/clădiri) și textul singur, fără fundal, devine ilizibil pe fundaluri deschise/apă (cerere user 2026-07-19). Puls discret continuu. */ .store-btn-discount-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(10,10,15,0.85); border: 1px solid rgba(239,68,68,0.6); padding: 3px 6px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; animation: storeBtnBadgePulse 1.8s ease-in-out infinite; } .store-btn-discount-badge-pct { color: #ef4444; font-size: 14px; font-weight: 900 !important; line-height: 1; } /* Timp rămas (HH:MM dacă mai e cel puțin 1 oră, altfel MM:SS) — sub procent, fără unități afișate explicit (cerere user 2026-07-20) */ .store-btn-discount-badge-time { color: #ef4444; font-size: 9px; font-weight: 700 !important; line-height: 1; margin-top: 1px; } @keyframes storeBtnBadgePulse { 0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 12px rgba(239,68,68,0.95); } } /* Badge verde de countdown pe iconițele de eveniment (Battle Pass/Ruletă/Supremația) — oglindă directă a .store-btn-discount-badge de mai sus, doar verde și pe un singur rând (nu are procent, doar timpul rămas — cerere user 2026-08-25). Ancorat JOS (nu centrat) — centrat obtura complet desenul iconiței, cerere user ulterioară „sa nu obturam de tot iconul". */ .event-badge { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); background: rgba(10,10,15,0.85); border: 1px solid rgba(74,222,128,0.6); padding: 2px 5px; border-radius: 7px; display: flex; align-items: center; justify-content: center; animation: eventBadgePulse 1.8s ease-in-out infinite; } .event-badge-time { color: #4ade80; font-size: 11px; font-weight: 900 !important; line-height: 1; white-space: nowrap; } /* Fereastra de rezultate a Tombolei (1h după tragere) — badge-ul arată „Câștigători" în auriu în loc de countdown verde (cerere user 2026-08-31). */ .event-badge--done { border-color: rgba(224, 184, 74, 0.75); } .event-badge--done .event-badge-time { color: #ffe08a; } @keyframes eventBadgePulse { 0%, 100% { box-shadow: 0 0 4px rgba(74,222,128,0.5); } 50% { box-shadow: 0 0 12px rgba(74,222,128,0.95); } } /* Separator decorativ între items */ .dock-inner .dock-item:not(:last-child)::after { content: ''; position: absolute; right: -2px; top: 20%; height: 60%; width: 1px; background: rgba(139,105,20,0.2); } /* ══ DOCK PANEL ══ */ .dock-panel { position: fixed; /* Poziție finală pe desktop, 73px (cerere user 2026-08-18, câteva ajustări succesive de la 72px inițial — se deschideau peste fereastra cu bani). Mobilul folosește propriul offset dinamic (--dock-safe-bottom) în @media(max-width:768px) mai jos, neatins. */ bottom: 73px; left: 50%; transform: translateX(-50%) translateY(20px); width: 460px; max-width: calc(100vw - 32px); /* -5px cerere user 2026-08-18. */ height: calc(100vh - 133px); background: linear-gradient(160deg, rgba(28,18,5,0.99) 0%, rgba(12,8,2,1) 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(201,150,0,0.08); z-index: 499; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.2s, transform 0.2s; display: flex; flex-direction: column; overflow: hidden; } /* -5px înălțime + urcată cu 5px suplimentar (73px→78px), DOAR desktop (cerere user 2026-08-20) — panoul părea prea aproape/sub bara de meniu. Plasată DUPĂ regula de bază de mai sus, nu lângă .game-dock — la specificitate egală, câștigă ultima din fișier (aceeași capcană întâlnită deja de mai multe ori în sesiunea asta), altfel regula de bază ar fi câștigat oricum. Mobilul rămâne pe formula existentă, nesuprascrisă aici — poziționarea lui de jos vine oricum din --dock-safe-bottom (dinamic, JS), nu din aceste valori fixe de bază. */ @media (min-width: 769px) { .dock-panel { height: calc(100vh - 138px); bottom: 78px; } } /* Toate ferestrele jocului (meniu/profil/clădiri — Inventar, Mesaje, Bandă, Spital, Poliție, Magazine etc. folosesc toate .dock-panel) — DOAR telefon: 99% din lățime, 0,5% pe fiecare margine (deja garantat automat de left:50%+translateX(-50%) de mai sus, combinat cu width:99vw — nu mai e nevoie de calc separat ca la panoul HUD, aici nu există padding de compensat), la 1vh deasupra barei de jos REALE (var(--dock-safe-bottom), nu un offset fix ghicit — cerere user 2026-07-19, redus de la 2vh inițial). max-width suprascris — altfel valoarea veche (calc(100vw-32px)) ar limita panoul sub cei 99vw doriți pe ecrane mici. */ @media (max-width: 768px) { .dock-panel { width: 99vw; max-width: 99vw; /* -5px cerere user 2026-08-18 (peste distanța deja calculată dinamic din bară). */ bottom: calc(var(--dock-safe-bottom, 80px) + 1vh - 5px); /* top ancorat la marginea reală de jos a rândului de bani (--dock-safe-top, măsurat live în JS, updateDockSafeTop()) + un mic gol — cerere user 2026-08-22, captură: ferestrele (Inventar, clădiri, meniu) se deschideau PESTE rândul de bani, fiindcă height-ul venea din regula de bază (100vh - 133px), o formulă fixă complet decuplată de înălțimea REALĂ a rândului de sus. Cu top ȘI bottom ambele ancorate real, height explicit devine inutil (auto) — CSS calculează singur golul dintre ele, garantat, indiferent de telefon. Gol redus la 3px (de la 8px) — cerere user 2026-08-22, „mai mareste putin in inaltime" — fereastra urcă mai aproape de rândul de bani, fără să-l atingă. */ top: calc(var(--dock-safe-top, 90px) + 3px); height: auto; } } .dock-panel::after { content: ''; display: block; height: 5px; flex-shrink: 0; background: linear-gradient(90deg, transparent 0%, rgba(180,130,20,0.5) 20%, rgba(201,150,0,0.7) 50%, rgba(180,130,20,0.5) 80%, transparent 100%); border-radius: 0 0 16px 16px; } .dock-panel.open { opacity: 1; pointer-events: all; visibility: visible; transform: translateX(-50%) translateY(0); } .dock-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 48px; flex-shrink: 0; background: rgba(15,10,3,0.95); border-bottom: 1px solid rgba(201,150,0,0.25); position: relative; } .dock-panel-title { font-size: 19px; font-weight: 700; color: #e8c97a; letter-spacing: 0.15em; text-transform: uppercase; text-shadow: 0 0 10px rgba(201,150,0,0.35); position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: none; white-space: nowrap; } /* Linii decorative laterale pe titlu */ .dock-panel-title::before, .dock-panel-title::after { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,150,0,0.55)); flex-shrink: 0; } .dock-panel-title::after { background: linear-gradient(90deg, rgba(201,150,0,0.55), transparent); } .dock-panel-close { width: 28px; height: 28px; margin-left: auto; background: rgba(201,150,0,0.08); border: 1px solid rgba(180,130,20,0.3); border-radius: 50%; color: #a08040; font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .dock-panel-close:hover { background: rgba(201,150,0,0.2); color: #e8c97a; } .dock-panel-reposition { width: 28px; height: 28px; padding: 0; background: rgba(201,150,0,0.08); border: 1px solid rgba(180,130,20,0.3); border-radius: 50%; color: #a08040; font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .dock-panel-reposition:hover { background: rgba(201,150,0,0.2); color: #e8c97a; } .dock-panel-back { width: 28px; height: 28px; padding: 0; background: rgba(201,150,0,0.08); border: 1px solid rgba(180,130,20,0.3); border-radius: 50%; color: #a08040; font-size: 0; /* ascunde glifa literală ← din buton */ cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } /* Redesenăm ← prin ::before ca să-l putem nudge-ui la centrul vizual (glifa U+2190 se randează optic sus-stânga în cutia ei). */ .dock-panel-back::before { content: "\2190"; font-size: var(--text-base); line-height: 1; transform: translate(1px, 1px); } .dock-panel-back:hover { background: rgba(201,150,0,0.2); color: #e8c97a; } /* ── Profil Jucător — card principal ── */ /* Chenar propriu (cerere user 2026-09-04 — părea gol/ciudat, plutind fără margine), fără margine laterală — lățimea rămâne EXACT ca înainte (edge-to-edge, aliniată cu .inv-equipment de la tab-ul Înfățișare, imediat sub el). Restul (aranjarea butoanelor, #ppActionBar de deasupra) rămâne neatins. Chenar identic cu cel de la sloturile de echipament (.inv-slot[data-rarity], border plin + colț rotunjit) — cerere user explicită „fix ca la echipament", ÎNLOCUIEȘTE varianta anterioară cu colțuri tăiate/octogon (tehnica .hud-panel) — user a respins acea variantă. Grosime 1px, nu 2px ca la echipament (cerere user „subțirel") — pe o cutie de ~100px 2px se simte natural, dar pe cardul de profil, mult mai lat, aceeași grosime arăta gros; 1px păstrează linia subțire. */ .pp-card { display: flex; /* flex-end (nu center) — cerere user 2026-09-04: like/dislike (ultimul rând din coloana avatarului) și rândul de confruntare (ultimul rând din coloana de identitate) trebuie să cadă pe ACEEAȘI linie de jos; centrarea celor 2 coloane ca blocuri nu garanta asta (coloane de înălțimi diferite), bottom-align-ul da. */ align-items: flex-end; gap: 16px; padding: 16px 16px 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(200,168,74,0.65); border-radius: 8px; position: relative; /* Loc pentru #ppActionBar, care acum stă CĂLARE pe bordura de jos (poziționat absolut, jumătate în/jumătate în afara cardului, cerere user 2026-09-04) — fără acest gol, rândul de butoane s-ar suprapune peste .pp-tabs de dedesubt. padding-bottom (16→28px) + margin-bottom (22→28px) mărite după ce iconițele romb au crescut cu 25% (22→28px) — romb-ul, acum mai înalt, se ciocnea de rândul de confruntare de deasupra (părea „împins în sus", cerere user). */ margin-bottom: 28px; } /* .pp-action-bar-wrap — „meniul de butoane" călare pe bordura de jos a cardului (cerere user 2026-09-04). UN SINGUR contur pentru tot rândul (nu câte unul per iconiță — „un singur meniu, nu 4 hexagoane"), prin */ .wiki-price-table { margin: 10px 0 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); overflow: hidden; } .wiki-price-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 7px 12px; font-size: var(--text-sm); color: var(--color-text); } .wiki-price-row + .wiki-price-row { border-top: 1px solid rgba(255,255,255,0.06); } .wiki-price-row:nth-child(even) { background: rgba(255,255,255,0.03); } .wiki-price-row--head { background: rgba(180,130,20,0.10); color: var(--color-accent-dim); font-weight: 700; } .wiki-price-row span:first-child { color: var(--color-text-muted); } .wiki-price-row--head span:first-child { color: var(--color-accent-dim); } .wiki-price-row b { color: var(--color-text); font-weight: 700; } .wiki-price-row em { font-style: normal; color: var(--color-text-muted); font-size: var(--text-xs); } /* Cuvintele-statistică, colorate consecvent cu iconurile din joc */ .wiki-stat--force { color: var(--color-negative); font-weight: 600; } .wiki-stat--defense { color: var(--color-positive); font-weight: 600; } .wiki-stat--speed { color: var(--color-info); font-weight: 600; } .wiki-stat--gold { color: var(--color-accent); font-weight: 600; } .wiki-stat--info { color: var(--color-info); font-weight: 600; } .wiki-stat--positive { color: var(--color-positive); font-weight: 600; } .wiki-stat--negative { color: var(--color-negative); font-weight: 600; } /* Facțiuni — aceleași culori ca peste tot (.supremacy-seg--*, .player-card-character--*) */ .wiki-faction--police { color: #60a5fa; font-weight: 700; } .wiki-faction--business { color: #4ade80; font-weight: 700; } .wiki-faction--mafia { color: #f87171; font-weight: 700; } /* Iconiță mică inline în text */ .wiki-inline-icon { width: 15px; height: 15px; vertical-align: -3px; object-fit: contain; } /* Bulina de set (.inv-set-dot) afișată inline în text, ca exemplu — în joc e `position:absolute` în colțul cutiei de obiect; aici o scoatem din flux, la mărimea ei reală. */ .wiki-setdot { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin: 0 2px; } /* display:block — altfel `.inv-set-dot` (un ) revine la `display:inline` odată scos din `position:absolute`, iar width/height:16px + mask-ul sunt ignorate (cutie de 0px). */ .wiki-setdot .inv-set-dot { position: static; display: block; } /* Pastile — listă de opțiuni scurte (ex. bonusurile secrete posibile ale bandei) */ .wiki-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .wiki-chip { display: inline-block; font-size: var(--text-sm); color: var(--color-accent-dim); background: rgba(232,201,122,0.10); border: 1px solid rgba(180,130,20,0.32); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } /* Listă numerotată „primii pași" */ .wiki-steps { counter-reset: wiki-step; list-style: none; margin: 10px 0 8px; padding: 0; } .wiki-steps li { position: relative; padding: 6px 0 6px 34px; font-size: var(--text-base); color: var(--color-text); line-height: 1.55; border-bottom: 1px solid rgba(255,255,255,0.05); } .wiki-steps li:last-child { border-bottom: 0; } .wiki-steps li strong { color: var(--color-accent-dim); } .wiki-steps li::before { counter-increment: wiki-step; content: counter(wiki-step); position: absolute; left: 0; top: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); background: rgba(232,201,122,0.12); border: 1px solid rgba(180,130,20,0.4); border-radius: 50%; } /* Secțiune pliabilă nativă (

) pentru părțile lungi */ .wiki-collapse { border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); margin: 8px 0; background: rgba(255,255,255,0.02); } .wiki-collapse > summary { cursor: pointer; list-style: none; padding: 10px 12px; font-size: var(--text-base); font-weight: 600; color: var(--color-accent); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wiki-collapse > summary::-webkit-details-marker { display: none; } .wiki-collapse > summary::after { content: '▾'; color: var(--color-text-muted); transition: transform 0.15s ease; } .wiki-collapse[open] > summary::after { transform: rotate(180deg); } .wiki-collapse > summary + * { padding: 0 12px 10px; } /* #genericBuildingBody e partajat de ~11 clădiri (Sală/Centru militar/Curse/cele 4 producții/Port/ Aeroport/Bancă/Cazino/Haine/Fabrică/Mina de Aur) — aceeași cauză ca #dockPanelBody. Atenție: Haine (.clothes-shop-wrap) și Cazino (.cs-panel) au deja margin-top:-12px compensator dintr-o sesiune anterioară, tocmai pentru padding-ul de 6px de-aici — verificate explicit după acest fix să nu reapară suprapunerea cu tab-urile lor interne. */ #genericBuildingBody { padding-top: 12px; } /* Cele 4 panouri individuale de clădiri (nu folosesc dockPanelBody/genericBuildingBody) — aceeași aliniere 12px sus (cerere user 2026-07-10). */ #hospitalBuildingPanelBody, #fightClubBody, #prisonPanelBody, #policePanelBody, #barModalBody, #brothelBody, #jewelryShopBody, #weaponShopBody, #carDealershipBody, #tattooBody { padding-top: 12px; } /* Conținut panel */ .dock-empty, .dock-coming-soon { text-align: center; color: #444; font-size: var(--text-base); padding: 24px 0; } .dock-coming-soon { color: #8B6914; } /* Search */ .dock-search-wrap { display: flex; flex-direction: column; gap: var(--gap-md); } .dock-search-input { width: 100%; padding: var(--gap-md) var(--gap-lg); background: rgba(255,255,255,0.05); border: 1px solid rgba(139,105,20,0.4); border-radius: 8px; color: #fff; font-size: var(--text-base); outline: none; transition: border-color 0.15s; } .dock-search-input:focus { border-color: #c99600; } .dock-search-input::placeholder { color: #444; } .dock-search-results { display: flex; flex-direction: column; gap: 4px; } /* Search filters */ /* Player row */ /* ══ Card universal jucător ══ */ .player-card { display: flex; align-items: center; gap: var(--gap-md); padding: var(--gap-sm) var(--gap-md); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; transition: background 0.15s; width: 100%; box-sizing: border-box; } /* Era albastru (rgba(100,160,255,...), moștenit dintr-o temă veche) — cerere user 2026-09-05, „de ce e tenta aia de albastru la select" — aliniat la auriul temei jocului. */ .player-card:hover { background: rgba(200,168,74,0.08); } .player-card-avatar-wrap { position: relative; flex-shrink: 0; } .player-card-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; /* Aceeași culoare aurie ca la avatarul din chat (.gchat-avatar), fără inel/efect suplimentar — doar chenarul simplu (cerere user 2026-07-24) */ border: 2px solid #6b4a1e; display: block; } .inactive-badge-img { position: absolute; top: -4px; right: -4px; width: 30px; height: 30px; object-fit: contain; z-index: 3; } .player-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .player-card-name { font-size: var(--text-md); color: #fff; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .player-card-meta { font-size: var(--text-xs); color: var(--color-text-muted); } .player-card-money { font-size: var(--text-sm); color: #ffcc66; } .ref-level-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: var(--text-xs); font-weight: 700; margin-top: 3px; width: fit-content; align-self: flex-start; } .ref-level-badge--progress { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--color-text-muted); } .ref-level-badge--done { background: rgba(200,168,74,0.12); border: 1px solid rgba(200,168,74,0.3); color: #c8a84a; } .player-card-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-end; } .pc-actions-row { display: flex; gap: 4px; align-items: center; } .pc-action-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid; font-size: 11px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .pc-action-btn:hover { opacity: 0.8; } .pc-btn--attack { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #f87171; } .pc-btn--steal { background: rgba(251,146,60,0.15); border-color: rgba(251,146,60,0.4); color: #fb923c; } .pc-btn--friend { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; } .pc-btn--enemy { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #f87171; } .pc-btn--msg { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.35); color: #60a5fa; } .pc-btn--invite { background: rgba(100,160,255,0.15); border-color: rgba(100,160,255,0.4); color: #6b9bdf; } .pc-btn--remove { background: rgba(100,100,100,0.12); border-color: rgba(100,100,100,0.3); color: #9ca3af; } .pc-btn-wrap { position: relative; display: inline-flex; } .pc-btn-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); padding: var(--tooltip-padding); font-size: var(--text-xs); color: var(--color-text); white-space: nowrap; pointer-events: none; z-index: var(--tooltip-z); box-shadow: var(--tooltip-shadow); } .pc-btn-wrap:hover .pc-btn-tooltip { display: block; } .player-card-character--police { color: #60a5fa; } .player-card-character--mafia { color: #f87171; } .player-card-character--business { color: #4ade80; } .dock-player-row { display: flex; align-items: center; gap: var(--gap-lg); padding: var(--gap-lg) var(--gap-lg); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; transition: background 0.15s; } /* Era albastru — vezi comentariul de la .player-card:hover mai sus, aceeași cauză. */ .dock-player-row:hover { background: rgba(200,168,74,0.08); } .dock-player-avatar-wrap { position: relative; flex-shrink: 0; } .dock-player-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid #6b4a1e; display: block; } .dock-player-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xs); } .dock-player-info strong { font-size: var(--text-md); color: #fff; } .dock-player-info span { font-size: var(--text-sm); color: var(--color-text-muted); } .top-blocked-note { font-size: var(--text-xs) !important; color: #f87171 !important; font-weight: 600; } .dock-player-money { font-size: var(--text-base) !important; color: #ffcc66 !important; font-weight: 600; } .dock-player-actions { display: flex; flex-direction: column; gap: var(--gap-sm); flex-shrink: 0; align-items: flex-end; } /* Butoane mari Atacă / Jefuiește */ .dock-action-btns-big { display: flex; gap: var(--gap-sm); } .dock-btn-big { display: flex; align-items: center; gap: var(--gap-sm); padding: 7px 13px; border-radius: 8px; border: 1px solid; font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .dock-btn-big--attack { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.35); color: #fb923c; } .dock-btn-big--attack:hover { background: rgba(251,146,60,0.22); border-color: rgba(251,146,60,0.6); } .dock-btn-big--rob { background: rgba(250,204,21,0.1); border-color: rgba(250,204,21,0.35); color: #facc15; } .dock-btn-big--rob:hover { background: rgba(250,204,21,0.22); border-color: rgba(250,204,21,0.6); } .dock-btn-big--msg { background: rgba(100,160,255,0.1); border-color: rgba(100,160,255,0.35); color: #78b4ff; } .dock-btn-big--msg:hover { background: rgba(100,160,255,0.22); border-color: rgba(100,160,255,0.6); } .dock-btn-big--kick { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.35); color: #f87171; } .dock-btn-big--kick:hover { background: rgba(248,113,113,0.22); border-color: rgba(248,113,113,0.6); } /* Butoane mici Prieten / Dușman */ .dock-action-btns-small { display: flex; gap: var(--gap-sm); justify-content: flex-end; } .dock-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); cursor: pointer; font-size: var(--text-md); display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; } .dock-btn--friend:hover { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.4); } .dock-btn--enemy:hover { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.4); } .dock-btn--remove { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.2); color:#f87171; } .dock-btn--remove:hover { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.4); } .dock-btn--promote { background: rgba(200,168,74,0.1); border-color: rgba(200,168,74,0.25); color:#c8a84a; font-size:var(--text-base); } .dock-btn--promote:hover { background: rgba(200,168,74,0.2); border-color: rgba(200,168,74,0.5); } .dock-relation-badge { font-size: 10px; color: #4ade80; padding: 1px 7px; border: 1px solid rgba(74,222,128,0.3); background: rgba(74,222,128,0.08); border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; width: fit-content; } /* Top */ .dock-tabs, .dock-tab-bar { display: flex; gap: var(--gap-xs); margin-bottom: var(--gap-md); } .dock-tab-bar { justify-content: center; } /* Top — rânduri */ .dock-top-row { display: flex; align-items: center; gap: var(--gap-md); padding: 7px var(--gap-md); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; margin-bottom: 4px; } .dock-top-rank { font-size: var(--text-md); width: 32px; text-align: center; flex-shrink: 0; color: var(--color-muted); } .dock-top-rank-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .top-my-entry { border-color: rgba(200,146,74,0.4) !important; background: rgba(200,146,74,0.08) !important; } .top-my-entry-inline { border-color: rgba(74,222,128,0.5) !important; background: rgba(74,222,128,0.08) !important; } .top-my-separator { height: 1px; background: rgba(200,146,74,0.2); margin: 4px 0 8px; } .dock-top-val { font-size: var(--text-sm); font-weight: 700; color: #c99600; margin-left: auto; flex-shrink: 0; } .top-medal { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; } /* Scrollbar dock panel */ .dock-panel-body::-webkit-scrollbar { width: 6px; } .dock-panel-body::-webkit-scrollbar-track { background: transparent; } .dock-panel-body::-webkit-scrollbar-thumb { background: rgba(139,105,20,0.4); border-radius: 99px; } /* Responsive — pe telefon (≤600px), bara de jos depășea lățimea ecranului (442px randați într-un viewport de 375px, cu 7 iconițe la 40px fiecare). Procent din ecran (95vw), nu pixeli ficși — bara ia mereu același procent din lățime, pe orice telefon, iar cele 7 iconițe (flex:1, cotă egală) se împart automat proporțional în acel spațiu (cerere user 2026-07-19: "de exemplu 95% din dimensiunea ecranului, astfel va arata bine și pe un ecran mai mic și pe unul mai mare" — fără numere fixe/clamp legate de pixeli). */ @media (max-width: 600px) { .dock-label { display: none; } .dock-inner { width: 95vw; gap: 1vw; padding: 1.5vw 2vw; } .dock-item { flex: 1; min-width: 0; padding: 1.2vw 0.5vw; } .dock-icon { font-size: var(--text-md); width: 100%; } .dock-icon img { width: 70%; height: auto; aspect-ratio: 1 / 1; } /* Iconiță MICȘORATĂ + alb-negru (nu mărită/fundal auriu ca înainte), cerere user 2026-08-20 — vezi comentariul identic de la varianta desktop (.dock-item.active, mai sus în fișier): width:77% pe imagine chiar schimba dimensiunea reală, creștea înălțimea barei la activare și făcea ferestrele să se suprapună cu ea. DOAR transform (layout-neutral) + filter aici, nicio schimbare de dimensiune reală. */ .dock-item.active { background: none; transform: scale(0.82); } .dock-item.active .dock-icon img { filter: grayscale(1) brightness(0.75); opacity: 0.75; } } /* Butoane zoom/magazin — pe telefon, procentuale din lățimea ecranului (11,7vw). Inițial erau 7,8vw, EXACT procentul folosit de iconițele din bara de jos (derivat din formula ei: 95vw lățime totală, minus padding-uri și goluri, împărțit la 7 iconițe egale, ×70% pentru imaginea din interior — vezi .dock-icon img de mai sus); mărite cu 50% (cerere user 2026-07-19, „foarte mici, se văd greu"), deci NU mai sunt identice cu bara de jos, doar zoom/magazin/chat rămân sincronizate între ele (aceeași valoare nouă, 11,7vw, în toate 3 locurile). Poziționate față de înălțimea REALĂ a barei de jos (variabila --dock-safe-bottom, calculată în JS din #gameDock.offsetHeight — bara are acum înălțime fluidă), nu la un offset ghicit — altfel s-ar ascunde sub bară. */ @media (max-width: 600px) { .map-zoom-controls { bottom: calc(var(--dock-safe-bottom, 80px) + 10px); left: 12px; gap: 6px; } .map-zoom-controls .map-zoom-btn img { width: 11.7vw; height: 11.7vw; } /* Bug real găsit de user 2026-08-23 — comentariul de la .battlepass-hud-btn/.roulette-hud-btn img (56x56, „aceeași dimensiune ca .map-zoom-btn img") era adevărat DOAR pe desktop; pe telefon Wiki/Zoom/Magazin se micșorează la 11.7vw (mai sus), dar Battle Pass/Ruletă rămăseseră la 56px fix — vizibil mult mai mari decât Wiki pe un telefon îngust. */ .battlepass-hud-btn img, .roulette-hud-btn img { width: 11.7vw; height: 11.7vw; } /* Badge reducere peste iconița Magazin — 10% mai mic ca pe desktop (cerere user 2026-07-20) */ .store-btn-discount-badge { padding: 2.7px 5.4px; border-radius: 7.2px; } .store-btn-discount-badge-pct { font-size: 12.6px; } .store-btn-discount-badge-time { font-size: 8.1px; } /* Badge verde de countdown eveniment — aceeași reducere de 10% ca la cel de reducere, mai sus */ .event-badge { padding: 2.7px 5.4px; border-radius: 7.2px; } .event-badge-time { font-size: 9.9px; } } /* ══════════════════════════════════════════ DIALOG CONFIRMARE ACȚIUNI SOCIALE ══════════════════════════════════════════ */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .confirm-overlay.open { opacity: 1; pointer-events: all; } .confirm-box { background: linear-gradient(180deg, rgba(30,18,6,0.98) 0%, rgba(18,10,3,0.99) 100%); border: 1px solid #6b4a1e; border-radius: 16px; padding: 28px 24px 20px; width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.7); transform: scale(0.95); transition: transform 0.2s; } .confirm-overlay.open .confirm-box { transform: scale(1); } .confirm-avatar-wrap { position: relative; } .confirm-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(201,150,0,0.3); display: block; } .confirm-title { font-size: var(--text-md); font-weight: 700; color: #fff; text-align: center; } .confirm-msg { font-size: var(--text-base); color: #aaa; text-align: center; line-height: 1.5; } .confirm-btns { display: flex; gap: var(--gap-md); width: 100%; margin-top: var(--gap-xs); } .confirm-btn { flex: 1; padding: 10px; border-radius: 10px; font-size: var(--text-base); font-weight: 600; cursor: pointer; border: 1px solid; transition: background 0.15s; } .confirm-btn--yes { background: rgba(201,150,0,0.15); border-color: rgba(201,150,0,0.4); color: var(--color-accent); } .confirm-btn--yes:hover { background: rgba(201,150,0,0.25); } .confirm-btn--no { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--color-text-muted); } .confirm-btn--no:hover { background: rgba(255,255,255,0.08); color: #aaa; } /* ══════════════════════════════════════════ NOTIFICĂRI ══════════════════════════════════════════ */ .notif-mark-all { width: 100%; padding: 7px; background: none; border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; color: var(--color-text-muted); font-size: var(--text-xs); cursor: pointer; margin-bottom: 8px; transition: color 0.15s, border-color 0.15s; } .notif-mark-all:hover { color: #aaa; border-color: rgba(255,255,255,0.15); } .notif-list { display: flex; flex-direction: column; gap: 4px; } .notif-player-link { color: #c8924a !important; cursor: pointer; } .notif-player-link:hover { text-decoration: underline; } .notif-item { display: flex; align-items: flex-start; gap: var(--gap-md); padding: var(--gap-md); background: rgba(201,150,0,0.04); border: 1px solid rgba(180,130,20,0.15); /* Toate 4 colțurile rotunjite egal — cerere user 2026-08-18, revenire asupra efectului de „bulă cu vârf" (colț stânga-jos ascuțit 3px) dintr-o sesiune anterioară. */ border-radius: 10px; transition: background 0.15s; } .notif-item--unread { background: rgba(201,150,0,0.09); border-color: rgba(180,130,20,0.35); } .notif-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(180,130,20,0.3); flex-shrink: 0; } .notif-avatar--system { object-fit: contain; background: rgba(10,10,15,0.6); padding: 3px; } .notif-content { flex: 1; min-width: 0; } .notif-text { font-size: var(--text-base); color: var(--color-text); line-height: 1.4; margin-bottom: 4px; } .notif-text strong { color: #fff; } .notif-text img { width: 20px !important; height: 20px !important; object-fit: contain; vertical-align: middle; margin: 0 1px; } .notif-time { font-size: var(--text-xs); color: var(--color-text-muted); } .notif-actions { display: flex; gap: var(--gap-sm); margin-top: var(--gap-sm); } .notif-btn { padding: 5px 12px; border-radius: 7px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; border: 1px solid; transition: background 0.15s; } .notif-btn--accept { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; } .notif-btn--accept:hover { background: rgba(74,222,128,0.22); } .notif-btn--reject { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #f87171; } .notif-btn--reject:hover { background: rgba(248,113,113,0.2); } /* ══════════════════════════════════════════ ONLINE / OFFLINE DOT ══════════════════════════════════════════ */ .online-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #0d0d1e; bottom: 1px; right: 1px; z-index: 2; } .online-dot--on { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.8); animation: pulse-green 2s infinite; } .online-dot--off { background: #555; } @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.6); } 50% { box-shadow: 0 0 9px rgba(34,197,94,1); } } /* Modal alertă generică (gameAlert) — intrare animată + puls discret pe iconiță */ @keyframes gameAlertIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .game-alert-box { animation: authFadeUp .25s ease-out both; } .game-alert-icon { animation: gameAlertIconPulse 1.8s ease-in-out infinite; } /* ══════════════════════════════════════════ PROFILE MODAL — NAV + CONTENT ══════════════════════════════════════════ */ /* Profile quick action buttons (setări + deconectare) — pătrate mari */ .profile-quick-actions { display: flex; gap: var(--gap-xs); margin-left: var(--gap-xs); flex-shrink: 0; } .profile-quick-btn--settings { background: rgba(100,220,100,0.08); border-color: rgba(100,220,100,0.25); color: #86efac; } .profile-quick-btn--settings:hover, .profile-quick-btn--settings.active { background: rgba(100,220,100,0.18); border-color: rgba(100,220,100,0.5); } .profile-quick-btn--logout { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.25); color: #f87171; } .profile-quick-btn--logout:hover { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.5); } /* Nav butoane profil — folosesc stilul universal .profile-tab */ .profile-nav-main { display: flex; justify-content: center; align-items: center; gap: var(--gap-xs); flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: var(--gap-xs); margin-bottom: 0; border-top: none; flex-shrink: 0; padding-top: var(--gap-xs); } /* Zona de conținut dinamic */ /* Info grid */ .profile-info-grid { display: flex; flex-direction: column; gap: var(--gap-xs); } /* ── Casete informații profil ── */ .pinfo-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(200,168,74,0.18); border-radius: var(--radius-md); padding: var(--gap-sm) var(--gap-md); margin-bottom: var(--gap-sm); } /* Panourile de clădire (#genericBuildingBody, partajat de ~11 clădiri, + #brothelBody) NU randează .pinfo-card în flux simplu — sunt deja copii ai unor containere flex cu GAP propriu: wrapper-ul comun din openGenericBuildingPanel() (.u-flex.u-flex-col.u-gap-d12, 12px) și, la producții, .prod-panel (gap: var(--gap-sm), 6px) în plus, imbricat un nivel mai adânc; la Bordel, direct wrapper-ul de 12px (brothelRender(), .u-flex.u-flex-col.u-gap-d12). PRIMA încercare (bump la margin-bottom) a fost greșită — margin-bottom-ul propriu al .pinfo-card se ADUNĂ cu gap-ul containerului, nu îl înlocuiește, deci distanțele tot ieșeau inegale (16px la Whisky: 6+10, vs 22px la Bordel: 12+10) — cerere user 2026-09-05, a doua captură comparativă. Fix real: .pinfo-card nu mai are margine proprie aici (0, gap-ul containerului e SINGURA sursă de spațiere), iar .prod-panel primește același gap (12px) ca wrapper-ul comun/Bordel — acum toate distanțele dintre casete, în orice clădire, sunt 12px. */ #genericBuildingBody .pinfo-card, #brothelBody .pinfo-card { margin-bottom: 0; } /* La Realizări, bordura standard de mai sus se pierde vizual lângă cele 68 de pătrățele care au deja propria bordură aurie — mărită doar aici, ca să se citească clar drept casetă exterioară (cerere user 2026-07-10, „nu avem card" — cardul exista tehnic, dar era prea discret). */ #achievementsGrid .pinfo-card { border-color: rgba(200,168,74,0.4); background: rgba(255,255,255,0.02); } /* Secțiune extinsă inline (panou Admin) — apare direct sub bara de tab-uri, care are deja propria linie dedesubt (subliniere activă) — fără border-top propriu, ca să nu creeze o a doua linie redundantă */ .admin-expand { padding-top: var(--gap-sm); } /* Rând clicabil din rezultatele căutării de obiecte (tab „Dă obiect", Panou Admin) */ .admin-item-pick { border-radius: 6px; transition: background 0.15s ease; } .admin-item-pick:hover { background: rgba(255,255,255,0.06); } /* Titlu de card pliabil (cerere user 2026-08-21, Panou Admin → Battle Pass — Provocări/Premii ocupă mult spațiu vertical, fără posibilitate de restrângere ca să evite scroll-ul). */ .pinfo-card-title--toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .pinfo-card-chevron { transition: transform 0.2s ease; font-size: 13px; opacity: 0.8; } .pinfo-card-chevron.open { transform: rotate(180deg); } .pinfo-card-title { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--gap-sm); padding-bottom: 6px; border-bottom: 1px solid rgba(200,168,74,0.15); } .pinfo-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: var(--text-sm); } .pinfo-label { color: var(--color-text-muted); } .pinfo-val { color: #fff; font-weight: 600; } /* Invite referral */ .profile-invite-wrap { display: flex; flex-direction: column; gap: var(--gap-md); padding: var(--gap-xs) 0; } .profile-invite-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; } .profile-invite-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(100,160,255,0.25); border-radius: 8px; padding: 8px 12px; font-size: var(--text-sm); color: #78b4ff; cursor: pointer; word-break: break-all; } .profile-invite-box:hover { background: rgba(100,160,255,0.08); } .profile-invite-copy { padding: 8px; background: rgba(100,160,255,0.1); border: 1px solid rgba(100,160,255,0.3); border-radius: 8px; color: #78b4ff; font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background 0.15s; } .profile-invite-copy:hover { background: rgba(100,160,255,0.2); } /* ══════════════════════════════════════════ LISTA PRIETENI / DUȘMANI în profil ══════════════════════════════════════════ */ .social-list-item { display: flex; align-items: center; gap: var(--gap-md); padding: var(--gap-md) var(--gap-md); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; margin-bottom: 5px; transition: background 0.15s; } /* Era albastru — vezi comentariul de la .player-card:hover mai sus, aceeași cauză. */ .social-list-item:hover { background: rgba(200,168,74,0.07); } .social-list-avatar-wrap { position: relative; flex-shrink: 0; } .social-list-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid #6b4a1e; display: block; } .social-list-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xs); } .social-list-info strong { font-size: var(--text-md); color: #fff; } .social-list-info span { font-size: var(--text-sm); color: var(--color-text-muted); } /* ID clickabil pentru copiere — folosit în liste peste tot */ /* Auriu, ca restul temei — era albastru moștenit, inconsecvent (cerere user 2026-07-24) */ .copy-uid-btn { cursor: pointer; color: #d4a656; transition: color 0.15s; font-size: inherit; } .copy-uid-btn:hover { color: #f5c542; } .social-list-remove { width: 32px; height: 32px; border-radius: 8px; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); color: #f87171; font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .social-list-remove:hover { background: rgba(248,113,113,0.2); border-color: rgba(248,113,113,0.5); } /* Indicator când altcineva te-a marcat pe tine dușman (nu poți șterge) */ .social-marked-by-them { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); flex-shrink: 0; opacity: 0.5; cursor: default; } /* ══════════════════════════════════════════ MESAJE PRIVATE ══════════════════════════════════════════ */ .msg-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* Inbox */ .msg-inbox { display: flex; flex-direction: column; gap: 6px; } .msg-conv-item { display: flex; align-items: center; gap: var(--gap-md); padding: 10px 12px; background: rgba(201,150,0,0.035); border: 1px solid rgba(180,130,20,0.14); border-radius: 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .msg-conv-item:hover { background: rgba(201,150,0,0.08); } /* Necitit: bară-accent aurie pe stânga + nume bold + oră/badge aurii (cerere user 2026-09-03) */ .msg-conv-item--unread { position: relative; background: rgba(232,201,122,0.07); border-color: rgba(232,201,122,0.28); } .msg-conv-item--unread::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--color-accent); } .msg-conv-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(180,130,20,0.3); display: block; } .msg-conv-info { flex: 1; min-width: 0; } .msg-conv-name { font-size: var(--text-base); font-weight: 500; color: #d8c9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .msg-conv-item--unread .msg-conv-name { color: #fff; font-weight: 700; } .msg-conv-preview { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .msg-conv-item--unread .msg-conv-preview { color: #a99a7d; } .msg-conv-you { color: #6f6553; font-style: italic; } .msg-conv-badge { background: var(--color-accent); color: #1c1408; font-size: var(--text-xs); font-weight: 700; min-width: 17px; height: 17px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; } /* Chat */ .msg-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; } .msg-chat-header { display: flex; align-items: stretch; gap: var(--gap-lg); padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: var(--gap-lg); flex-shrink: 0; } .msg-chat-header .msg-back-btn { align-self: center; } .msg-chat-header .player-card { width: 100%; align-items: center; } .msg-back-btn { background: none; border: none; color: #78b4ff; font-size: var(--text-lg); cursor: pointer; padding: 4px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; } .msg-back-btn:hover { background: rgba(100,160,255,0.1); } .msg-header-info { display: flex; flex-direction: column; gap: var(--gap-xs); flex: 1; min-width: 0; } .msg-chat-name { flex: 1; font-size: var(--text-base); font-weight: 600; color: #fff; } .msg-new-btn { background: none; border: 1px solid rgba(255,255,255,0.1); color: #aaa; font-size: var(--text-base); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .msg-new-btn:hover { background: rgba(255,255,255,0.08); color: #fff; } .msg-chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; /* vezi comentariul de la .dock-panel-body — fix pull-to-refresh pe telefon */ display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--gap-xs) var(--gap-md); min-height: 0; } /* Bule mesaje */ .msg-bubble { display: flex; flex-direction: column; max-width: 80%; } .msg-bubble--mine { align-self: flex-end; align-items: flex-end; } .msg-bubble--theirs { align-self: flex-start; align-items: flex-start; } .msg-bubble-text { padding: 8px 12px; border-radius: 12px; font-size: var(--text-base); line-height: 1.5; word-break: break-word; } /* Paletă caldă, ca la chat (cerere user 2026-09-03 — albastrul era nepotrivit) */ .msg-bubble--mine .msg-bubble-text { background: #4e3312; color: #ffedc4; border-bottom-right-radius: 3px; } .msg-bubble--theirs .msg-bubble-text { background: #281e13; color: #e0d5c5; border-bottom-left-radius: 3px; } .msg-bubble-time { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; padding: 0 4px; } /* Input trimitere — aceeași paletă caldă ca la chat */ .msg-chat-input-wrap { display: flex; align-items: center; gap: var(--gap-sm); padding-top: var(--gap-md); border-top: 1px solid rgba(139,98,48,0.3); margin-top: var(--gap-md); flex-shrink: 0; position: relative; } .msg-chat-input { flex: 1; padding: 8px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(139,98,48,0.35); border-radius: 20px; color: #e0d5c5; font-size: var(--text-base); outline: none; } .msg-chat-input:focus { border-color: #c8924a; } .msg-chat-input::placeholder { color: var(--color-text-muted); } .msg-send-btn { width: 36px; height: 36px; background: linear-gradient(135deg, #8b6230, #5a3e1b); border: 1px solid #a07840; border-radius: 50%; color: #f0d090; font-size: var(--text-md); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: background 0.15s; } .msg-send-btn:hover { background: linear-gradient(135deg, #a07840, #6b4a1e); } /* Notificare preview mesaj */ .notif-msg-preview { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; margin-top: 3px; margin-bottom: 4px; } /* Buton mesaj în search card */ .dock-btn-big--msg { background: rgba(100,160,255,0.1); border-color: rgba(100,160,255,0.3); color: #78b4ff; } .dock-btn-big--msg:hover { background: rgba(100,160,255,0.2); border-color: rgba(100,160,255,0.5); } .dock-btn--msg { background: rgba(100,160,255,0.08); border-color: rgba(100,160,255,0.25); color: #78b4ff; } .dock-btn--msg:hover { background: rgba(100,160,255,0.18); border-color: rgba(100,160,255,0.5); } .dock-btn--remove { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.2); color: #f87171; } .dock-btn--remove:hover { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.4); } /* ══ Inbox — rând conversație ══ */ /* .msg-conv-level — stilul vine din .player-lvl-badge universal, NEschimbat (consecvent în tot jocul) */ .msg-conv-top { display: flex; align-items: center; gap: var(--gap-sm); } .msg-conv-time { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; } .msg-conv-item--unread .msg-conv-time { color: var(--color-accent); } .msg-conv-actions { display: flex; align-items: center; flex-shrink: 0; } /* ✕ discret (gri) — devine roșu doar la hover; nu mai e o cutie roșie mereu vizibilă */ .msg-conv-delete { width: 24px; height: 24px; background: none; border: 1px solid transparent; border-radius: 6px; color: #6f6553; font-size: var(--text-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s, border-color 0.15s; } .msg-conv-delete:hover { color: #f87171; border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.12); } /* ══ Chat header cu avatar ══ */ .msg-chat-header { display: flex; align-items: center; gap: var(--gap-md); padding-bottom: var(--gap-md); border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: var(--gap-md); flex-shrink: 0; } .msg-header-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #6b4a1e; flex-shrink: 0; } .msg-header-info { flex: 1; display: flex; flex-direction: column; gap: 1px; } .msg-chat-name { font-size: var(--text-md); font-weight: 700; color: #fff; } .msg-header-level { font-size: var(--text-xs); color: #78b4ff; } /* ══ Bule mesaje mai mari ══ */ .msg-bubble-text { padding: 9px 14px; border-radius: 14px; font-size: var(--text-md); line-height: 1.5; word-break: break-word; } .msg-bubble-time { font-size: var(--text-xs); } /* ══ Emoji ══ */ .msg-emoji-btn { width: 36px; height: 36px; background: rgba(201,150,0,0.06); border: 1px solid rgba(139,98,48,0.3); border-radius: 8px; font-size: var(--text-lg); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .msg-emoji-btn:hover { background: rgba(201,150,0,0.14); } .emoji-picker { position: absolute; bottom: calc(100% + 6px); left: 0; background: #0d0d1e; border: 1px solid rgba(100,160,255,0.25); border-radius: 12px; padding: var(--gap-md); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-xs); z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .emoji-picker button { width: 32px; height: 32px; background: none; border: none; font-size: var(--text-lg); cursor: pointer; border-radius: 6px; transition: background 0.1s; } .emoji-picker button:hover { background: rgba(255,255,255,0.1); } /* Emoji picker container */ .emoji-picker-container { position: relative; } .emoji-picker { position: absolute; bottom: calc(100% + 6px); left: 0; background: #0d0d1e; border: 1px solid rgba(100,160,255,0.25); border-radius: 12px; padding: var(--gap-md); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-xs); z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .emoji-picker .emoji-btn { width: 32px; height: 32px; background: none; border: none; font-size: var(--text-lg); cursor: pointer; border-radius: 6px; transition: background 0.1s; padding: 0; } .emoji-picker .emoji-btn:hover { background: rgba(255,255,255,0.1); } /* Larger avatar in chat header */ .msg-header-avatar-container { position: relative; flex-shrink: 0; } .msg-header-avatar-large { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 3px solid #6b4a1e; display: block; } .msg-header-online-indicator { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; background: #2ecc71; border: 3px solid #0d0d1e; border-radius: 50%; animation: pulse-online 2s infinite; } @keyframes pulse-online { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.7); } 50% { box-shadow: 0 0 0 8px rgba(46,204,113,0); } } /* Chat name and level in header */ .msg-chat-name-large { font-size: var(--text-lg); font-weight: 700; color: #fff; display: block; margin-bottom: 6px; } .msg-header-level-box { display: inline-block; background: rgba(100,160,255,0.2); border: 1px solid rgba(100,160,255,0.4); border-radius: 6px; padding: 4px 10px; font-size: var(--text-sm); font-weight: 600; color: #78b4ff; } /* Link styling in messages */ .msg-link { color: #ffd700; font-weight: 600; padding: 2px 4px; border-radius: 3px; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); transition: all 0.2s; } .msg-link:hover { background: rgba(255, 215, 0, 0.2); border-color: rgba(255, 215, 0, 0.5); } /* Link confirm dialog */ .link-confirm-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; } .link-confirm-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } /* Aceeași temă (auriu/lemn întunecat) ca restul dialogurilor de confirmare din joc (.confirm-box) — cerere user 2026-08-22, captură: modalul era generic, albastru-cenușiu, complet în afara temei. */ .link-confirm-box { position: relative; background: linear-gradient(180deg, rgba(30,18,6,0.98) 0%, rgba(18,10,3,0.99) 100%); border: 1px solid #6b4a1e; border-radius: 16px; padding: 24px; max-width: 400px; width: 90%; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8); animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .link-confirm-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-accent); margin-bottom: 12px; } .link-confirm-message { font-size: var(--text-base); color: #aaa; margin-bottom: 12px; line-height: 1.5; } .link-confirm-message small { display: block; margin-top: 8px; font-size: var(--text-xs); color: var(--color-text-muted); word-break: break-all; font-family: var(--font); } .link-confirm-warning { font-size: var(--text-sm); color: #ffcc66; background: rgba(255, 204, 102, 0.1); border: 1px solid rgba(255, 204, 102, 0.2); border-radius: 8px; padding: 10px; margin-bottom: 16px; line-height: 1.4; } .link-confirm-buttons { display: flex; gap: var(--gap-md); justify-content: flex-end; } /* Auriu/neutru, ca .confirm-btn--yes/--no (dialogul de confirmare comun din joc) — nu albastru/gri generic. */ .link-confirm-btn { padding: 10px 16px; border: 1px solid; border-radius: 8px; font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: background 0.2s; } .link-confirm-cancel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--color-text-muted); } .link-confirm-cancel:hover { background: rgba(255,255,255,0.08); color: #aaa; } .link-confirm-accept { background: rgba(201,150,0,0.15); border-color: rgba(201,150,0,0.4); color: var(--color-accent); } .link-confirm-accept:hover { background: rgba(201,150,0,0.25); } /* ══════════════════════════════════════════════ GLOBAL CHAT ══════════════════════════════════════════════ */ /* Buton circular când e minimizat — z-index JOS (20, ca la butoanele de zoom/magazin de pe hartă), NU 600 ca fereastra de chat propriu-zisă (#globalChat, mai jos) — butonul trebuie să meargă în SPATELE oricărui panou deschis (inventar, mesaje etc., z-index 499), la fel ca toate celelalte elemente de pe hartă; doar fereastra de chat DESCHISĂ are voie să rămână deasupra altor panouri (regulă separată, stabilită explicit anterior — vezi #globalChat) (cerere user 2026-07-19). */ #gchatToggleCircle { position: fixed; bottom: 90px; right: 14px; width: 56px; height: 56px; background: none; border: none; border-radius: 0; cursor: pointer; z-index: 20; display: flex; align-items: center; justify-content: center; box-shadow: none; transition: transform 0.15s; } #gchatToggleCircle img { width: 56px !important; height: 56px !important; } #gchatToggleCircle:hover { transform: scale(1.08); } /* Badge-uri necitite pe butonul minimizat — culori aliniate cu temele celor 2 taburi (auriu General, vișiniu Bandă), în loc de roșu/albastru generic fără nicio legătură (cerere user 2026-07-24) — clase dedicate, nu utilitare generice, ca să nu afecteze alte folosiri */ .gchat-toggle-badge--general { background: #c8924a; } .gchat-toggle-badge--banda { background: #a02040; } /* Pe telefon, procentual (11,7vw) — EXACT ca la butoanele de zoom/magazin (aceeași valoare, mărită cu 50% față de 7,8vw inițial, cerere user 2026-07-19, „foarte mici, se văd greu"); iconițele din bara de jos NU mai sunt incluse în această sincronizare, au rămas la dimensiunea lor separată. Poziționat față de înălțimea REALĂ a barei de jos (variabila --dock-safe-bottom) — altfel s-ar ascunde sub bară. Trebuie plasat AICI, după regula de bază — la specificitate egală (ambele #id), câștigă ultima din fișier. */ @media (max-width: 600px) { #gchatToggleCircle { bottom: calc(var(--dock-safe-bottom, 80px) + 10px); right: 10px; width: 11.7vw; height: 11.7vw; } #gchatToggleCircle img { width: 11.7vw !important; height: 11.7vw !important; } } #gchatToggleCircle.has-unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; background: #ef4444; border-radius: 50%; border: 2px solid #1a0e00; } /* Panel principal */ #globalChat { position: fixed; bottom: 90px; right: 14px; width: 370px; height: 506px; /* Solid, nu gradient — gradientul vechi era oricum aproape imperceptibil (0.97→0.99 alpha), dar masca de la coada bulelor de chat (.gchat-msg-text::after) are nevoie de o culoare FIXĂ ca să se potrivească exact cu fundalul, la orice poziție de scroll; cu gradient, masca crea un petic vizibil (bug găsit de user, confirmat printr-un test izolat 2026-08-08) */ background: #1a1004; border: 2px solid #6b4a1e; border-radius: 14px; display: flex; flex-direction: column; z-index: 600; box-shadow: 0 12px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; transition: opacity 0.2s, transform 0.2s; } #globalChat.gchat-hidden { display: none; } /* Pe telefon, lățimea fixă (370px) + offset-ul de 14px din dreapta nu mai cad simetric — fereastra ajunge puțin mai la stânga de centrul real al ecranului (cerere user, confirmat pe iPhone). Centrată explicit doar pe mobil; pe desktop rămâne ancorată în dreapta-jos, poziția obișnuită pentru un widget de chat. */ @media (max-width: 600px) { #globalChat { right: auto; left: 50%; transform: translateX(-50%); /* 0.5% liber pe fiecare parte (cerere user 2026-07-24) — procent din lățimea ecranului, nu px fix, ca să rămână constant pe orice telefon (fostul calc(100vw-28px) + max-width 370px lăsa margini din ce în ce mai mari pe telefoane late, plafonat la 370px) */ width: 99vw; max-width: none; height: 557px; /* +10% față de cele 506px de bază (desktop), cerere user 2026-07-24 — doar pe telefon */ /* Plafon de siguranță — la zoom Android crescut (reduce și înălțimea CSS disponibilă, nu doar lățimea), cei 557px ficși + 90px offset de jos nu mai încăpeau, iar fereastra creștea peste marginea de sus, acoperind rândul de bani (bug găsit de user, din captură). --dock-safe-top (măsurat live, updateDockSafeTop()) e marginea reală de jos a rândului de bani — aceeași variabilă deja folosită de .dock-panel pentru exact acest scop. IMPORTANT: formula trebuie să scadă și cei 90px de ancorare de jos (bottom:90px mai sus), nu doar golul de sus — altfel caseta tot ieșea peste marginea reală a ecranului (verificat live, top:-9.5px, primul calc greșit scădea doar 20px în loc de 90+20=110px). */ max-height: calc(100vh - var(--dock-safe-top, 90px) - 110px); } } /* Temă vișinie/burgund pentru tab Bandă (cerere user 2026-07-24) — înainte albastră, ca la General; acum o nuanță caldă diferită (nu auriul de la General), ca schimbarea de tab să se simtă imediat, dar tot în familia caldă a jocului, nu o culoare străină de temă. */ #globalChat.gchat--banda { /* Solid, nu gradient — vezi comentariul de la #globalChat de bază, același motiv (masca cozii bulelor are nevoie de o culoare fixă de fundal) */ background: #1a0509; border-color: #6b1a2e; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 20px rgba(180,30,50,0.15), inset 0 1px 0 rgba(220,80,100,0.08); } #globalChat.gchat--banda .gchat-header { background: rgba(70,15,25,0.5); border-bottom-color: rgba(180,30,50,0.2); } #globalChat.gchat--banda .gchat-header-title { color: #e8899e; } #globalChat.gchat--banda .gchat-header-online { color: #b06478; } #globalChat.gchat--banda .gchat-header-time { color: #e8899e; } #globalChat.gchat--banda .gchat-avatar { border-color: #6b1a2e; } #globalChat.gchat--banda .gchat-body::-webkit-scrollbar-thumb { background: rgba(180,30,50,0.45); } #globalChat.gchat--banda .gchat-body::-webkit-scrollbar-thumb:hover { background: rgba(180,30,50,0.7); } /* NU adăuga aici scrollbar-color — Chromium modern (spre deosebire de versiunile vechi) comută la randarea standard (lată, ~15px) de îndată ce vede scrollbar-color, ignorând complet bara subțire de mai sus (::-webkit-scrollbar, 4px, regula universală L173) — exact bug-ul găsit 2026-07-24 (General 4px subțire, Bandă 15px nativ). General nu setează scrollbar-color deloc, de-asta rămâne pe calea veche — Bandă trebuie să facă la fel. */ /* Punctul de conectare rămâne verde universal (regula de bază, .gchat-online-dot) — nu face parte din tema tab-ului, e un indicator de stare, la fel peste tot în joc */ #globalChat.gchat--banda .gchat-tabs { border-bottom-color: rgba(180,30,50,0.15); } #globalChat.gchat--banda .gchat-tab.active { color: #e8899e; border-color: rgba(200,60,80,0.4); background: rgba(180,30,50,0.12); } #globalChat.gchat--banda .gchat-footer { border-top-color: rgba(180,30,50,0.15); } #globalChat.gchat--banda .gchat-input-wrap { background: rgba(35,8,14,0.5); border-top-color: rgba(180,30,50,0.15); } #globalChat.gchat--banda .gchat-input { background: rgba(60,15,22,0.4); border-color: rgba(180,30,50,0.25); color: #f5dde0; } #globalChat.gchat--banda .gchat-send-btn { background: rgba(180,30,50,0.18); border-color: rgba(200,60,80,0.35); color: #e8899e; } #globalChat.gchat--banda .gchat-send-btn:hover { background: rgba(180,30,50,0.32); } /* Solide, nu rgba — vezi comentariul de la .gchat-msg-text de bază; compuse din rgba(100,30,42,0.55)/rgba(110,25,40,0.65) peste fundalul panoului Bandă (#1a0509). Bula proprie („mine") aduse mult mai deschisă/saturată decât cea a celorlalți — valorile inițiale erau aproape identice (diferență invizibilă), bug găsit de user prin comparație directă cu General (unde diferența e clar vizibilă), 2026-08-08. */ #globalChat.gchat--banda .gchat-msg-text { background: #43131b; } #globalChat.gchat--banda .gchat-msg--mine .gchat-msg-text { background: #96283c; color: #ffd9e0; } #globalChat.gchat--banda .gchat-msg-text::before { background: #43131b; } #globalChat.gchat--banda .gchat-msg-text::after { background: #1a0509; } #globalChat.gchat--banda .gchat-msg--mine .gchat-msg-text::before { background: #96283c; } /* Header */ .gchat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(180deg, rgba(80,50,15,0.6) 0%, rgba(50,30,8,0.4) 100%); border-bottom: 1px solid rgba(139,98,48,0.4); flex-shrink: 0; } .gchat-header-left { display: flex; align-items: center; gap: var(--gap-md); } .gchat-online-dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px #4ade80; } .gchat-header-title { font-size: var(--text-base); font-weight: 800; color: #e8c97a; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .gchat-header-online { font-size: var(--text-xs); font-weight: 700; color: #8b6230; font-variant-numeric: tabular-nums; } .gchat-header-time { font-size: var(--text-sm); font-weight: 600; color: #c8924a; letter-spacing: 0.5px; margin-left: auto; margin-right: 8px; font-variant-numeric: tabular-nums; } .gchat-close-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #aaa; font-size: var(--text-base); cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.15s; line-height: 1; } .gchat-close-btn:hover { background: rgba(239,68,68,0.3); color: #fff; border-color: #ef4444; } /* Tab-uri chat */ .gchat-tabs { display: flex; gap: var(--gap-xs); padding: var(--gap-sm) var(--gap-md); margin-top: var(--gap-sm); border-bottom: 1px solid rgba(255,255,255,0.06); align-items: center; justify-content: flex-start; } /* Anulează margin-bottom:12px moștenit din regula „Tab-uri universale" (mai jos în fișier) — userul vrea conținutul chatului lipit direct sub linia de separare, fără spațiul gol de dedesubt (cerere 2026-07-20). Selector cu #globalChat — necesar ca să bată regula universală, care altfel ar câștiga prin ordine de sursă la specificitate egală (vezi și .gchat-tabs--pin-active mai jos, același motiv). */ #globalChat .gchat-tabs { margin-bottom: 0; } /* Suprimă border-bottom-ul ȘI margin-bottom-ul (12px, moștenit din regula „Tab-uri universale" de mai jos din fișier) ale tab-urilor cât timp bannerul de pin e vizibil chiar dedesubt (el are deja propriul border-top) — altfel rămânea o fâșie goală de 12px, plus o bordură dublă, între tab-uri și banner, fără niciun sens vizual (semnalat de user 2026-07-20). Selector dublu (nu doar .gchat-tabs--pin-active) — necesar ca să bată regula universală (aceeași specificitate, .gchat-tabs cu o singură clasă, ar câștiga altfel prin ordine de sursă, fiind mai jos în fișier). */ .gchat-tabs.gchat-tabs--pin-active { border-bottom: none; margin-bottom: 0; } /* .gchat-tab — stilul vine din regulile universale */ .gchat-tab-badge { display: inline-flex; align-items: center; justify-content: center; background: #e74c3c; color: #fff; font-size: var(--text-xs); font-weight: 700; min-width: 14px; height: 14px; border-radius: 99px; padding: 0 3px; margin-left: 3px; vertical-align: middle; position: relative; top: -1px; } /* Punct simplu (nu cifră) pe tab-ul Concurs — semnalează doar „a apărut o întrebare nouă", fără niciun contor (cerere user 2026-07-24, „doar la întrebare, fără răspunsuri fără nimic") */ .gchat-concurs-dot { display: inline-flex; width: 8px; height: 8px; background: #f5c542; border-radius: 50%; margin-left: 4px; vertical-align: middle; box-shadow: 0 0 4px rgba(245,197,66,0.7); } /* Buton delete mesaj */ .gchat-delete-btn { background: none; border: none; padding: 0; color: #f87171; font-size: 10px; font-weight: 400; cursor: pointer; flex-shrink: 0; transition: color 0.15s; } .gchat-delete-btn:hover { color: #fca5a5; } .gchat-del-timer { font-weight: 400; } /* Banner mesaj fixat */ .gchat-pin-banner { display: flex; align-items: center; gap: var(--gap-md); padding: 7px var(--gap-lg); background: linear-gradient(90deg, rgba(220,38,38,0.15), rgba(220,38,38,0.05)); border-bottom: 1px solid rgba(220,38,38,0.35); border-top: 1px solid rgba(220,38,38,0.2); flex-shrink: 0; } .gchat-pin-banner-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; opacity: 0.9; } .gchat-pin-banner-content { flex: 1; min-width: 0; } .gchat-pin-banner-msg { font-size: var(--text-sm); font-weight: 600; color: #e8dfc8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gchat-pin-banner-meta { font-size: var(--text-xs); color: rgba(220,38,38,0.8); margin-top: 2px; } /* Banner pin — tema vișinie în tab Bandă (cerere user 2026-07-24) */ .gchat--banda .gchat-pin-banner { background: linear-gradient(90deg, rgba(180,30,50,0.15), rgba(180,30,50,0.05)); border-bottom: 1px solid rgba(180,30,50,0.35); border-top: 1px solid rgba(180,30,50,0.2); } .gchat--banda .gchat-pin-banner-meta { color: rgba(232,137,158,0.9); } .gchat-pin-delete-btn { flex-shrink: 0; width: 22px; height: 22px; background: rgba(255,80,80,0.15); border: 1px solid rgba(255,80,80,0.35); border-radius: 50%; color: #f87171; font-size: var(--text-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .gchat-pin-delete-btn:hover { background: rgba(255,80,80,0.35); } /* Body mesaje */ .gchat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; /* vezi comentariul de la .dock-panel-body — fix pull-to-refresh pe telefon */ padding: 0 var(--gap-lg) var(--gap-sm); /* fără padding-top — conținutul se vede direct sub linia tab-urilor, cerere user 2026-07-20 */ display: flex; flex-direction: column; gap: var(--gap-xs); min-height: 0; } /* Mesaj */ .gchat-msg { display: flex; gap: var(--gap-md); align-items: flex-end; } .gchat-msg--mine { flex-direction: row-reverse; } .gchat-msg--tagged { background: rgba(251,191,36,0.07); border-left: 2px solid #fbbf24; border-radius: 0 8px 8px 0; padding: 4px 6px 4px 8px; margin-left: -4px; } .gchat-msg--mine.gchat-msg--tagged { border-left: none; border-right: 2px solid #fbbf24; border-radius: 8px 0 0 8px; padding: 4px 8px 4px 6px; margin-left: 0; margin-right: -4px; } /* Avatar */ .gchat-avatar-wrap { position: relative; flex-shrink: 0; } .gchat-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #6b4a1e; display: block; } /* .gchat-level — stilul vine din .player-lvl-badge universal */ .gchat-online-indicator { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #1a0e04; } /* Variantă verde (online) / gri (offline) — vizibilă doar la Prieteni/Colegi de bandă (cerere user 2026-07-24, extinde fix-ul de bulină din aceeași zi cu starea offline) */ .gchat-online-indicator--on { background: #4ade80; box-shadow: 0 0 5px #4ade80; } .gchat-online-indicator--off { background: #666; } /* Bulă mesaj */ .gchat-msg-content { display: flex; flex-direction: column; flex: 1; min-width: 0; } .gchat-msg--mine .gchat-msg-content { align-items: flex-end; } .gchat-msg-meta { display: flex; align-items: baseline; gap: 1px; margin-bottom: var(--gap-xs); padding: 0; } .gchat-msg--mine .gchat-msg-meta { flex-direction: row-reverse; } .gchat-username { font-size: var(--text-base); font-weight: 700; color: #c8924a; cursor: pointer; transition: color 0.15s; white-space: nowrap; max-width: none; } .gchat-username:hover { color: #e8b870; text-decoration: underline; } /* Culoare aurie caldă (cerere user 2026-07-24), în locul albastrului vechi — consecventă cu restul temei jocului (avataruri/badge-uri deja recolorate în această sesiune) */ .gchat-msg--mine .gchat-username { color: #f5c542; } .gchat-msg--mine .gchat-username:hover { color: #ffe08a; } .gchat-role-badge { font-size: var(--text-xs); font-weight: 700; padding: 1px 5px; border-radius: 3px; display: inline-block; vertical-align: middle; position: relative; top: -1px; } .gchat-role--leader { background: rgba(200,168,74,0.15); border: 1px solid rgba(200,168,74,0.3); color: #c8a84a; } .gchat-role--contabil { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; } .gchat-role--secretar { background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.25); color: #a78bfa; } .gchat-role--member { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--color-text-muted); } .gchat-time { font-size: 10px; color: #ffffff; flex-shrink: 0; font-weight: 400; margin-left: auto; } .gchat-msg--mine .gchat-time { margin-left: 0; margin-right: auto; } .gchat-msg-text { font-size: var(--text-base); color: #e0d5c5; line-height: 1.45; word-break: break-word; /* Culoare SOLIDĂ, nu translucidă — rezultatul compus vizual identic cu vechiul rgba(255,255,255,0.06) peste fundalul panoului (#1a1004), calculat o singură dată. Motiv: coada (::before) trebuie să fie garantat identică la culoare cu bula, în orice context — cu rgba, aceeași valoare poate ieși vizual diferită dacă „vede" alt fundal în spate în punctul unde iese din bulă (cerere user, 2026-08-08). */ background: #281e13; border-radius: 14px; padding: 7px 11px; width: 100%; box-sizing: border-box; position: relative; } /* Coadă pe 2 straturi (tehnică standard, dată de user cu cod de referință funcțional) — FĂRĂ border pe bulă, intenționat: orice contur ar tăia o linie vizibilă exact la îmbinarea dintre bulă și coadă („cusătură"), imposibil de evitat cât timp există un border — user a confirmat explicit că preferă seamless (fără linie la îmbinare) în locul conturului subțire. */ .gchat-msg-text::before { content: ''; position: absolute; z-index: 0; bottom: 0; left: -7px; /* Lățimea intenționat mai mică decât padding-ul orizontal al bulei (11px) — partea care intră în interiorul bulei (14-7=7px) nu trebuie să ajungă până la text, altfel îl acoperă (bug găsit de user, 2026-08-08, vizibil abia după ce culoarea a devenit solidă) */ width: 14px; height: 20px; background: #281e13; border-bottom-right-radius: 14px; } .gchat-msg-text::after { content: ''; position: absolute; z-index: 1; bottom: 0; left: -10px; width: 10px; height: 20px; background: #1a1004; border-bottom-right-radius: 10px; } .gchat-msg--mine .gchat-msg-text { /* Chihlimbariu cald, în locul albastrului vechi (cerere user 2026-07-24) — consecvent cu restul temei aurii/maro a jocului, nu o culoare separată. Solid, nu rgba — vezi comentariul de mai sus la .gchat-msg-text (compus o singură dată din rgba(120,80,30,0.55) peste #1a1004). */ background: #4e3312; border-radius: 14px; color: #ffedc4; width: 100%; box-sizing: border-box; } .gchat-msg--mine .gchat-msg-text::before { left: auto; right: -8px; background: #4e3312; border-bottom-right-radius: 0; border-bottom-left-radius: 14px; } .gchat-msg--mine .gchat-msg-text::after { left: auto; right: -10px; border-bottom-right-radius: 0; border-bottom-left-radius: 10px; } /* Meta integrat în bulă */ .gchat-msg-text .gchat-msg-meta { margin-bottom: 4px; } /* Tags */ .gchat-tag { color: #fbbf24; font-weight: 700; background: rgba(251,191,36,0.12); border-radius: 4px; padding: 0 3px; } /* Auriu, ca .msg-link (mesaje private) — cerere user 2026-08-22, captură: albastrul simplu de dinainte (#1d4ed8) era complet în afara temei jocului. Reutilizează exact stilul deja corect de la mesajele private, în loc de o culoare nouă. */ .gchat-link { color: #ffd700; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); font-size: var(--text-xs); font-weight: 700; padding: 1px 6px; border-radius: 4px; cursor: pointer; letter-spacing: 0.5px; transition: all 0.2s; } .gchat-link:hover { background: rgba(255, 215, 0, 0.2); border-color: rgba(255, 215, 0, 0.5); } /* Cooldown */ .gchat-cooldown { font-size: var(--text-xs); color: #f87171; text-align: center; padding: 3px 0 2px; flex-shrink: 0; } /* Input area */ .gchat-input-wrap { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-md) var(--gap-md); border-top: 1px solid rgba(139,98,48,0.3); background: rgba(20,11,3,0.5); flex-shrink: 0; position: relative; } /* Buton pin diamante */ .gchat-pin-btn { width: 36px; height: 36px; flex-shrink: 0; background: none; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.15s, filter 0.15s; } .gchat-pin-btn img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; } .gchat-pin-btn:hover { transform: scale(1.12); filter: brightness(1.2); } /* Input cu emoji înăuntru */ .gchat-input-inner { position: relative; flex: 1; } .gchat-input { width: 100%; box-sizing: border-box; padding: 7px 34px 7px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(139,98,48,0.35); border-radius: 20px; color: #e0d5c5; font-size: var(--text-base); outline: none; min-width: 0; } .gchat-input:focus { border-color: #c8924a; } .gchat-input::placeholder { color: var(--color-text-muted); } .gchat-emoji-btn--inside { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: transparent; border: none; font-size: var(--text-md); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s; } .gchat-emoji-btn--inside:hover { opacity: 1; } .gchat-send-btn { width: 32px; height: 32px; background: linear-gradient(135deg, #8b6230, #5a3e1b); border: 1px solid #a07840; border-radius: 50%; color: #f0d090; font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .gchat-send-btn:hover { background: linear-gradient(135deg, #a07840, #6b4a1e); } /* Emoji picker */ .gchat-emoji-picker { position: absolute; bottom: calc(100% + 4px); left: 0; background: #1a0e04; border: 1px solid rgba(139,98,48,0.4); border-radius: 12px; padding: var(--gap-md); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-xs); z-index: 500; box-shadow: 0 8px 24px rgba(0,0,0,0.6); } .gchat-emoji-picker .emoji-btn { width: 30px; height: 30px; background: none; border: none; font-size: var(--text-md); cursor: pointer; border-radius: 6px; transition: background 0.1s; padding: 0; } .gchat-emoji-picker .emoji-btn:hover { background: rgba(139,98,48,0.3); } .contest-system-msg { display: flex; align-items: center; justify-content: center; gap: var(--gap-md); text-align: center; background: rgba(212,185,106,0.08); border: 1px solid rgba(200,146,74,0.25); border-radius: var(--radius-md); padding: 10px 14px; margin: 8px 0; } .contest-system-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .contest-system-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .contest-system-title { color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; } .contest-system-body { color: var(--color-text); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; } .contest-system-reward { color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; } .contest-system-reward .cur-icon { width: 16px; height: 16px; vertical-align: middle; } .gchat-empty { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); padding: 20px 0; } /* Spinner de încărcare generic — introdus 2026-07-22 la chat (General/Bandă/Concurs) și magazine (Bijuterii/Arme/Auto), extins 2026-08-07 la TOATE stările de încărcare din joc (clădiri, profiluri, Top, Știri, licitații etc.), înlocuind textul simplu „Se încarcă...” peste tot — cerere user. Reutilizează animația fightLoadingSpin. */ .loading-spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 20px 0; } .loading-spinner { width: 26px; height: 26px; border: 3px solid rgba(232,201,122,0.2); border-top-color: var(--color-accent); border-radius: 50%; animation: fightLoadingSpin 0.7s linear infinite; } /* Typing indicator */ .gchat-typing { font-size: var(--text-xs); color: #8b6230; font-style: italic; padding: 2px 12px 4px; min-height: 18px; flex-shrink: 0; display: flex; align-items: center; gap: var(--gap-sm); } .gchat-typing-dots { display: inline-flex; gap: var(--gap-xs); align-items: center; } .gchat-typing-dots span { width: 4px; height: 4px; background: #8b6230; border-radius: 50%; animation: gchatDot 1.2s infinite ease-in-out; } .gchat-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .gchat-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes gchatDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Report button */ .gchat-report-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); color: #ef4444; font-size: 10px; font-weight: 700; cursor: pointer; padding: 0; border-radius: 50%; opacity: 1; transition: background 0.15s, border-color 0.15s, transform 0.15s; flex-shrink: 0; line-height: 1; } .gchat-report-btn:hover { background: rgba(239,68,68,0.3); border-color: #ef4444; transform: scale(1.1); } .gchat-report-btn.reported { background: rgba(239,68,68,0.35); border-color: #ef4444; opacity: 1; cursor: default; transform: none; } /* ══════════════════════════════════════════════ INVENTAR ══════════════════════════════════════════════ */ .inv-wrap { display: flex; flex-direction: column; gap: 0; /* "clip" + overflow-y:visible explicit, nu "hidden" — la fel ca la .inv-body mai jos, "hidden" pe orizontală ar forța automat un scroll propriu pe verticală (spec CSS), prinzând conținutul lung ÎNAINTE să apuce să urce la #dockPanelBody (bara „corectă", stilizată auriu) */ overflow-x: clip; overflow-y: visible; height: 100%; } /* ── Echipament (sus) ── */ .inv-equipment { position: relative; border-bottom: none; flex-shrink: 0; margin-top: -10px; } /* Profilul public (tab „Înfățișare") nu are padding propriu pe .pp-tab-content (u-p-d0) — cele -10px de mai sus, gândite pentru inventarul propriu, produceau aici o suprapunere reală cu bara de tab-uri după ce .pp-tabs a fost redus la 2px margin. Corectat doar în acest context, ca gap-ul să fie 12px, la fel ca la celelalte 3 tab-uri (bug găsit 2026-07-10). */ #playerProfilePanel .inv-equipment { margin-top: 12px; /* Aceleași 2 imagini noi (fundal repetabil + personaj transparent) ca la tab-ul Echipament din inventarul propriu, DAR aici păstrăm dimensiunile vechi ale casetei (raportul imaginii vechi, 1024×1536) — cerut explicit de user 2026-07-13. Fără aspect-ratio fix aici, cutia și-ar schimba brusc înălțimea odată cu noua imagine (mai puțin înaltă), care altfel ar fi mai mică decât înainte. */ aspect-ratio: 1024 / 1536; /* Piele caldă (același gradient ca .profile-modal/panourile dock) + vinietă spre margini + luciu auriu concentrat pe piept/cap — înlocuiește textura de piele neagră separată (inv_background.webp, rece, alt material decât restul jocului, cerere user 2026-08-26 „nu pare de-acolo"). Prima trecere (doar gradient+glow difuz) a rămas prea plată — cutia arăta la fel de „la vedere" în colțuri ca în centru (cerere user 2026-08-26, „parcă lipsește ceva"); vinieta (primul strat, întunecă marginile) dă senzația de cutie încadrată, nu doar colorată. Grain-ul e pe ::before mai jos (nu poate intra în același `background`, are nevoie de propriul strat + mix-blend-mode). */ background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0,0,0,0.6) 100%), radial-gradient(ellipse at 50% 34%, rgba(245,197,66,0.26) 0%, transparent 55%), linear-gradient(160deg, #1c1205 0%, #0e0902 100%); border-radius: 4px; overflow: hidden; } #playerProfilePanel .inv-equipment::before { /* Grain fin, discret (nu poza veche de piele) — rupe senzația de suprafață perfect netedă fără să reintroducă un material vizual diferit de restul jocului. */ content: ''; position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; } /* Personajul nu mai dictează înălțimea cutiei (asta face aspect-ratio de mai sus) — stă ancorat sus, lat cât toată cutia, cu fundalul vizibil dedesubt (unde stă rândul de animale, suprapus, ca înainte). */ #playerProfilePanel .inv-equipment .inv-template-img { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 100%; height: auto; display: block; opacity: 0.5; } /* Tab Echipament (inventarul propriu) — imaginea nouă (inv_equipment.png, pătrată) nu mai are o bandă goală rezervată jos pentru animale, ca vechiul inv.png (păstrat neschimbat la Profil, care încă folosește suprapunerea pe top:65%) — manechinul+mașina umplu aproape tot cadrul. Rândul de animale iese din suprapunere absolută și devine bloc normal SUB imagine; imaginea se scalează după ÎNĂLȚIMEA rămasă (nu lățime fixă), ca totul (manechin + animale) să încapă exact în tab, fără scroll, indiferent de înălțimea reală a panoului (bug găsit 2026-07-13). Profilul public NU e afectat — foloseşte alt markup (fără #invEquipmentBlock/.inv-wrap). */ #invEquipmentBlock { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 0; /* Reper cqw + TOKEN UNIC de mărime pentru toate cele 13 casete de echipament (9 obiecte pe manechin + 4 animale în rândul de jos). Ambele regiuni consumă var(--inv-slot-size) — un singur loc de editat, aceeași clasă (.inv-slot), aceleași insigne, aceeași imagine bleed. 24,13cqw = 28,39% (mărimea obiectelor față de cutia personajului) × 0,85 (cutia personajului e min(85cqw,…) din bloc) → aceeași mărime randată ca înainte, dar exprimată o singură dată. */ container-type: inline-size; --inv-slot-size: 24.13cqw; /* Textură repetabilă (inv_background.png) — se întinde automat pe TOT blocul, inclusiv în spatele rândului de animale de jos (#invPetsRow), indiferent de dimensiunea reală a containerului. Rezolvă definitiv problema fundalului „lipit" de personaj — cele 2 nu mai sunt aceeași imagine, deci nu mai trebuie calculate proporții (cerut de user 2026-07-13). */ /* Piele caldă + vinietă + luciu auriu concentrat — vezi comentariul de la #playerProfilePanel .inv-equipment de mai sus (aceeași schimbare, aceeași cerere user, aplicată în ambele locuri unde apărea vechea textură inv_background.webp). position:relative nou, altfel n-are față de ce să se ancoreze ::before-ul de grain de mai jos. */ position: relative; background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0,0,0,0.6) 100%), radial-gradient(ellipse at 50% 34%, rgba(245,197,66,0.26) 0%, transparent 55%), linear-gradient(160deg, #1c1205 0%, #0e0902 100%); border: 1px solid rgba(180,130,20,0.4); border-radius: 4px; overflow: hidden; } #invEquipmentBlock::before { /* Grain fin — vezi comentariul de la #playerProfilePanel .inv-equipment::before de mai sus. */ content: ''; position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; } #invEquipmentBlock.u-hidden { display: none; } .inv-equipment-figure { position: relative; flex: 1; min-height: 0; display: flex; /* align-items:flex-start (nu center) pe TOATE dimensiunile de ecran — necesar pentru ca margin-top-ul analitic de mai jos (.inv-figure-inner, rezervă locul capului) să funcționeze corect; centrarea NU garantează suficient spațiu deasupra cutiei quand înălțimea e axa limitatoare (bug real găsit live 2026-08-22, inclusiv pe desktop la 1280×800 — capul se tăia cu ~20px, centrarea lăsa doar (100%-85%)/2=7,5% din înălțimea chenarului deasupra, sub cei 14,816% ceruți de câtă cutie iese capul peste margine). */ align-items: flex-start; justify-content: center; } /* Manechinul de Echipament (inventar propriu) — poziționare 100% CSS, fără nicio măsurătoare JS. Înlocuiește sistemul vechi (height:85%+width:auto pe imagine + transform:scale calculat în JS din lățimea panoului), care avea 2 bug-uri reale găsite 2026-08-22 (documentate în INVENTORY_EQUIPMENT_RESPONSIVE_BUG.md, rădăcina proiectului): (1) personajul se dimensiona după ÎNĂLȚIME, dar sloturile (mai jos, #invSlotsGrid) foloseau px ficși calibrați pentru o lățime de referință fixă — cele 2 axe erau complet decuplate, deci pe telefoane cu proporții/înălțime disponibilă diferită sloturile nu mai corespundeau cu corpul personajului; (2) scale-ul JS se recalcula doar la schimbări de LĂȚIME a ferestrei (deliberat, pentru alt bug, vezi listener-ul de resize) — rămânea "înghețat" quand bara de adrese a telefonului apărea/dispărea la scroll (schimbă doar înălțimea, fără să declanșeze nicio recalculare). Fix, același tipar deja folosit cu succes de 2 ori în acest panou (rândul de animale ȘI manechinul de pe #playerProfilePanel, ambele 2026-07-19) — poziționare procentuală, nicio măsurătoare: cutia păstrează raportul REAL al imaginii (inv_character.webp, 977×1000px) prin `aspect-ratio`, dimensionată "contain" (ca object-fit:contain / SVG preserveAspectRatio) direct în CSS, cu unități de container query (cqw/cqh — suport universal din 2022, deja presupus disponibil de acest proiect, vezi cerința iOS 16.4+ de la Web Push în CLAUDE.md). Browserul recalculează nativ la orice schimbare de layout, inclusiv doar-pe-înălțime. */ .inv-equipment-figure { container-type: size; } .inv-figure-inner { position: relative; box-sizing: border-box; aspect-ratio: 977 / 1000; /* "contain" fit la 85% din spațiul disponibil (personajul micșorat cu 15% față de cutie, cerut de user) — min() alege axa care limitează, lățime sau înălțime, exact ca la un cu object-fit:contain, dar aplicat cutiei întregi (imagine + sloturi suprapuse). */ width: min(85cqw, 85cqh * 977 / 1000); /* Capul (offsetIdx:-1.5) iese INTENȚIONAT peste marginea de sus a cutiei — exact 14,816% din înălțimea ei (verificat live: la o cutie de 291,7px, capul iese 43,2px peste — 43,2/291,7 = 14,816%), calculat din aceleași constante ca poziția lui (INV_SLOT_GAP_UNIT_PCT, index.php). Vechiul sistem corecta asta prin măsurare JS (--inv-equip-top-gap), doar pe mobil; aici e un margin-top ANALITIC, exact, aplicat pe TOATE dimensiunile de ecran (bug real găsit live 2026-08-22 și pe desktop, 1280×800 — centrarea de dinainte nu garanta destul spațiu deasupra quand înălțimea era axa limitatoare). Calculat din lățimea propriei cutii (min(85cqw,...), aceeași formulă ca la width) — pus pe COPIL (.inv-figure-inner), nu pe .inv-equipment-figure (containerul de query) — dacă ar fi pus acolo, ar reduce chiar cutia folosită la calculul cqw/cqh, o dependență circulară (bug găsit live la prima verificare: padding-top pe container nu producea spațiul așteptat). Pe copil, e strict spațiu vizual, fără efect asupra unităților de query. 0,15165 = 14,816% din raportul înălțime/lățime (1000/977) al cutiei; +3cqh, golul suplimentar cerut de user — 0,5cqh inițial (2026-07-19) crescut la cerere explicită 2026-08-22 („obiectele echipate trebuie sa le mai coboram putin"). */ margin-top: calc(min(85cqw, 85cqh * 977 / 1000) * 0.15165 + 3cqh); } /* Plasă de siguranță pentru browsere FĂRĂ suport de container query (cqw/cqh) — cerere user 2026-08-22, raport real: un prieten cu Samsung S23 Ultra (ecran mare, ar trebui să arate impecabil) vedea layout-ul "urât" pe telefonul lui, deși testat pe multiple dimensiuni în Chrome (desktop) totul ieșea corect — semn că discrepanța nu e de la mărimea ecranului, ci de la MOTORUL de randare (Samsung Internet, posibil o versiune care nu parsează încă `min(85cqw, 85cqh * 977 / 1000)` — o valoare invalidă face TOATĂ declarația de `width` ignorată, .inv-figure-inner ar cădea pe `width:auto` FĂRĂ nimic care să-l lege de spațiul disponibil, posibil colaps la 0 sau la mărimea brută a imaginii, exact genul de "arată rău" raportat, fără nicio coliziune vizibilă de detectat în Chrome, care suportă cqw perfect). Fallback: readuce formula dinaintea acestei sesiuni (aspect-ratio păstrat — proprietate CSS de bază, suportată peste tot, nelegat de container query — + height:85%/width:auto, identic numeric cu vechiul "img height:100%+width:auto"), fără corecția de margin-top (depinde tot de cqh) — capul poate ieși ușor din cadru pe telefoane foarte înguste în acest fallback, dar layout-ul rămâne funcțional, nu "rupt", exact riscul pe care îl avea codul dinaintea sesiunii de azi. */ @supports not (container-type: size) { .inv-figure-inner { height: 85%; width: auto; margin-top: 0; } .inv-figure-inner .inv-template-img { width: auto; height: 100%; } } .inv-figure-inner .inv-template-img { width: 100%; height: 100%; display: block; opacity: 0.5; } /* Chenarul din inv.png/inv_equipment.png a fost eliminat intenționat din cele 2 imagini (2026-07-13) — un chenar CSS rămâne mereu drept și identic, indiferent de dimensiunea imaginii, spre deosebire de unul desenat de AI. Aplicat aici (Echipament) ȘI la Profil (#playerProfilePanel .inv-equipment mai jos), aceeași culoare/grosime ca bordura panourilor din joc (rgba(180,130,20,0.4), la fel ca .dock-panel). */ #playerProfilePanel .inv-equipment { border: 1px solid rgba(180,130,20,0.4); border-radius: 4px; } #invPetsRow { /* position:relative (nu static) ca ::before-ul liniei să se ancoreze de rând, NU de #invEquipmentBlock. inset:auto — OBLIGATORIU: regula de bază .inv-pets-row are `top:65%; bottom:0` (pentru varianta absolută de pe profil); cu position:relative acel `top:65%` ar deplasa rândul cu 65% din înălțime în jos → tăiat de overflow:hidden al blocului, rândul de animale dispare complet (bug 2026-08-29). */ position: relative; inset: auto; transform: none; flex-shrink: 0; /* Rând de animale — 4 × 24,13cqw + margini/goluri de 0,5% = 99cqw < 100 → încap mereu. margin-bottom din JS DOAR pe mobil (invUpdateMobileScale() iese din start pe desktop). 2026-08-29: `padding-top` redus de la 6cqw (era pentru badge-ul plutitor, acum e în colț) + `margin-top` scalabil — la treapta 2 de zoom Android `.inv-figure-inner` devine limitat de înălțime, iar slotul de bocanci (offsetIdx +1.5) iese ~15% din grilă în jos și se lipea de rândul de animale. Cele două spații (margin gol deasupra rândului + padding) dau tampon pentru acel „poke" fără să atingă cutiile de animale. Linia despărțitoare (::before) marchează începutul secțiunii „animale" — golul de sus pare intenționat, nu „rupt" (cerere user 2026-08-29). Ecou al liniei aurii din vechiul inv.png. */ padding-top: 3cqw; padding-left: 0.5%; padding-right: 0.5%; padding-bottom: 0; gap: 0.5%; margin-top: 8cqw; margin-bottom: var(--inv-pets-bottom-gap, 0px); } #invPetsRow::before { content: ''; position: absolute; top: 0; /* marginea de sus a padding-box-ului — sub golul de margin, unde „intră" bocancii */ left: 7%; right: 7%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,150,0,0.5) 20%, rgba(201,150,0,0.5) 80%, transparent); pointer-events: none; } /* Cele 4 casete de animale — TOKEN-UL UNIC (identic cu sloturile de obiecte, #invSlotsGrid mai jos). cqw se raportează la #invEquipmentBlock, nu la wrap-ul shrink-to-fit → poate sta direct pe cutie, fără dependența circulară care obliga vechiul procent să stea pe .inv-pet-slot-wrap. */ #invPetsRow .inv-slot--pet { width: var(--inv-slot-size); height: var(--inv-slot-size); } /* Imaginea animalului — exact ca la obiecte (#invSlotsGrid .inv-slot > img): 110% bleed, scoasă din flux (altfel un fișier ne-pătrat împinge cutia peste raportul 1:1). */ #invPetsRow .inv-slot--pet > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: 110%; } .inv-template-img { width: 100%; display: block; border-radius: 0; } .inv-slots-grid { position: absolute; inset: 0; } /* Poziționarea + dimensiunea cutiilor pe mobil (profil public) sunt calculate direct în JS (vezi index.php, ppSlotPosStyle()) — 100% procente (lățime 24,375%, identică cu animalele; înălțime 16,25%, dedusă din raportul fix 1024:1536 al chenarului), fără nicio măsurătoare sau transform:scale() suplimentar. Imaginea din interior (.inv-slot > img, mai jos) e fixă la 112px în regula de bază (gândită pentru cutia de 102px de pe desktop) — pe mobil, unde cutia e acum ~24% din lățimea chenarului, rămânea la fel de mare ca înainte, disproporționat. Aceeași formulă de "bleed" ca la animale (110% din cutie, position:absolute centrat). */ @media (max-width: 768px) { #playerProfilePanel .inv-slots-grid .inv-slot > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: 110%; } /* Dimensiunea insignelor (font/padding/emblemă/.lvl-icon) vine acum din blocul unic „Insigne slot" (`.inv-slot …`, în cqw) — `.inv-slot` are container-type:inline-size în regula de bază, deci se aplică și aici. Rămâne DOAR poziția specifică profilului: nivelul stă în INTERIORUL cutiei, sus-dreapta (nu plutește deasupra ca pe manechinul propriu), ca să elibereze colțul jos-dreapta pentru bulina de set (cerere user 2026-07-16). */ #playerProfilePanel .inv-slots-grid .inv-slot .inv-slot-level-badge { top: 1.02cqw; right: 1.02cqw; } } /* .inv-slot — cutia unică pentru sloturi de echipament ȘI de animale (2026-08-28: contopite, erau .inv-slot / .inv-pet-slot cu CSS duplicat care se dezalinia). Diferențele animalelor (rând flex, nu poziționat pe manechin) stau în modificatorul .inv-slot--pet mai jos. container-type:inline-size — reper unic pentru unitățile cqw ale tuturor insignelor (rank/nivel/procent/emblemă/.lvl-icon), în ORICE context (manechin propriu, profil, animale), ca totul să se scaleze proporțional cu cutia pe orice lățime, fără JS. */ .inv-slot { position: absolute; width: 102px; height: 102px; background: rgba(0,0,0,0.01); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; overflow: visible; box-sizing: border-box; container-type: inline-size; } .inv-slot:hover { background: rgba(200,146,74,0.1); border-radius: 6px; } .inv-slot.filled { opacity: 1; } /* Modificator animale — stă într-un rând flex (nu poziționat absolut pe manechin), colț mai rotunjit, fade la hover în loc de fundal. Restul (dimensiune, raritate, insigne, iconiță) = comun cu .inv-slot. */ .inv-slot--pet { position: relative; background: transparent; border-radius: 8px; transition: opacity 0.15s; flex-shrink: 0; } .inv-slot--pet:hover { opacity: 0.85; background: transparent; } /* Slotul gol de animal nu se estompează la hover (păstrează comportamentul dinainte de contopire — doar fundalul/borderul reacționează, ca la .inv-slot.empty:hover). */ .inv-slot--pet.empty:hover { opacity: 1; } /* Slot gol — casetă blurata, efect de placeholder */ .inv-slot.empty { background: rgba(255,255,255,0.04); border: 1px dashed rgba(200,146,74,0.25); border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,0.25); } .inv-slot.empty:hover { background: rgba(200,146,74,0.08); border-color: rgba(200,146,74,0.45); } /* Flag nume slot — vizibil doar pe goale */ .inv-slot-flag { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--font); color: rgba(200,146,74,0.7); white-space: nowrap; letter-spacing: 0.4px; text-transform: uppercase; pointer-events: none; line-height: 1; } .inv-slot > img { width: 112px; height: 112px; object-fit: contain; position: relative; z-index: 1; } /* Inventarul propriu (#invSlotsGrid) — cele 9 casete de obiecte de pe manechin. Mărimea vine din TOKEN-UL UNIC var(--inv-slot-size) (#invEquipmentBlock), la fel ca cele 4 casete de animale (#invPetsRow .inv-slot--pet) — o singură valoare pentru toate 13. #playerProfilePanel are alt markup/altă imagine (raport 1024:1536) și își păstrează sistemul propriu (ppSlotPosStyle). */ #invSlotsGrid .inv-slot { /* TOKEN-UL UNIC (identic cu animalele, #invPetsRow .inv-slot--pet mai sus). var(--inv-slot-size) = 24,13cqw ≈ 28,39% din cutia personajului în cazul normal (lățimea = axa limitatoare pe dock-ul îngust). min(…, 28,39%/27,73%) = plasă de siguranță: pe o fereastră desktop scundă ȘI lată cutia personajului se micșorează pe înălțime — clamp la procentul ei ca sloturile să NU iasă de pe siluetă (clasă de bug-uri raportată: 13 iul / 22 aug). Animalele n-au de ce să se agațe de nimic → folosesc token-ul pur. 28,39/27,73 calibrate 2026-08-22 (măsurat live 375×812: cutie personaj 285px lățime / 291,7px înălțime, cutie ≈ 80,9px). Pozițiile sloturilor (JS, ppSlotPosStyle / INV_SLOT_POS_EQUIPMENT) sunt puncte-centru — neafectate de mărime (translate(-50%) le centrează). */ width: min(var(--inv-slot-size), 28.39%); height: min(var(--inv-slot-size), 27.73%); /* Coborârea de 2,5cqw (2026-08-28, pentru badge-ul plutitor lipit de marginea de sus) — ELIMINATĂ 2026-08-29: badge-ul e acum în colț, nu mai plutește, deci motivul a dispărut; iar cei 2,5cqw în plus împingeau slotul de bocanci și mai aproape de rândul de animale la zoom treapta 2. Poziția revine la calibrarea pură INV_SLOT_POS_EQUIPMENT. */ } #invSlotsGrid .inv-slot > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: 110%; } /* ── Insigne slot — UN SINGUR set de reguli, TOATE contextele (2026-08-28) ── Procent/preț (.inv-bonus-flag), #rank/nivel (.inv-slot-rank-badge/.inv-slot-level-badge), emblemă raritate (.inv-slot-emblem) și iconițele de tier (.lvl-icon). Scopate pe `.inv-slot` simplu (include .inv-slot--pet) → acoperă Echipamentul propriu, animalele ȘI profilul public (desktop + mobil) dintr-un singur loc. Toate în cqw: `.inv-slot` are container-type:inline-size în regula de bază, deci fiecare insignă se scalează proporțional cu lățimea REALĂ a cutiei pe orice ecran, fără JS. Bază 98px content-box (cutie 102px, border 2px/latură) — pe desktop, unde cutia rămâne 102px, valorile ies pixel-perfect identice cu vechile px fixe. Înainte: 3 blocuri duplicate (#invSlotsGrid .inv-slot / .inv-slot--pet / @media profil), care se dezaliniau la fiecare modificare — cea mai bug-prone zonă din proiect. */ .inv-slot .inv-bonus-flag { height: 22.45cqw; font-size: 10.2cqw; /* Padding lateral redus (era 4.08cqw) + letter-spacing 0 — procentul e deja lipit de marginea din stânga (left:0), singurul spațiu de recâștigat era paddingul; ajută valorile lungi. Fix-ul principal pentru numere mari e prescurtarea MIL./MLD. din invBonusFlag(). */ padding: 0 2.55cqw; letter-spacing: 0; } .inv-slot .inv-slot-rank-badge, .inv-slot .inv-slot-level-badge { font-size: 10.2cqw; padding: 1.02cqw 8.16cqw; } /* Poziții — implicit: rank/nivel ies INTENȚIONAT deasupra cutiei (top negativ, mai vizibil pe manechin). Profilul public le mută în interiorul cutiei — vezi #playerProfilePanel mai jos. */ .inv-slot .inv-slot-rank-badge { top: -16.33cqw; left: 2.04cqw; } .inv-slot .inv-slot-level-badge { top: -18.37cqw; right: 2.04cqw; } /* Badge UNIFICAT nivel + rang — DOAR Echipamentul propriu (invRankBadges cu mergeLevel). `[iconițe de tier] #N` într-o singură pilulă, ÎN COLȚUL DREAPTA-SUS al cutiei (2026-08-29: mutat din „plutitor deasupra" — pluteau și se ciocneau de sloturile vecine pe Android la treapta 2 de zoom, indiferent de calibrare, fiindcă badge-ul urca cu procent din LĂȚIME iar golul dintre sloturi e procent din ÎNĂLȚIME). Acum totul e în interiorul cutiei → imposibil de suprapus, indiferent de ecran/zoom. #rang apare doar dacă ≤ 100 (INV_SLOT_RANK_BADGE_MAX). Mijlocul cutiei rămâne liber; banda de jos (procent/valoare) neatinsă; bulina de set sus-stânga. pointer-events:none pe pilulă + auto pe fiecare parte → tooltip individual. */ .inv-slot .inv-slot-rank-badge--merged { display: flex; align-items: center; gap: 3.06cqw; top: 2.04cqw; right: 2.04cqw; left: auto; padding: 1.02cqw 4.08cqw; background: rgba(0,0,0,0.62); pointer-events: none; } .inv-slot .inv-slot-rank-badge--merged .inv-slot-badge-part { display: inline-flex; align-items: center; gap: 2.04cqw; pointer-events: auto; } .inv-slot .inv-slot-emblem { width: 24.49cqw !important; height: 24.49cqw !important; max-width: 24.49cqw !important; max-height: 24.49cqw !important; bottom: 1.02cqw !important; left: 1.02cqw !important; } /* .lvl-icon (simbolurile de tier) — se scalează ȘI ELE cu cutia (10/98 = 10,2cqw, identic numeric cu vechii 10px pe desktop). Toate 10 simbolurile folosesc `mask` din data-URI SVG (scalează curat la orice mărime, inclusiv cqw fracționar — nu mai e nevoie de excepția pe px întregi de dinainte, când .lvl-icon--flacara folosea un `mask` cu gradienți). Rămâne fix 12px DOAR în .inv-item (lista Obiecte, fără container-type) și .wiki-level-row. */ .inv-slot .lvl-icon { width: 10.2cqw; height: 10.2cqw; } .inv-slot-icon { font-size: var(--text-lg); opacity: 0; } .inv-slot-label { display: none; } /* Rarity pe slot echipat — border + gradient cu fundal opac */ .inv-slot[data-rarity="common"] { border: 2px solid rgba(156,163,175,0.35); background: radial-gradient(ellipse at 50% 70%, rgba(156,163,175,0.22) 0%, rgba(10,10,15,0.82) 80%); } .inv-slot[data-rarity="uncommon"] { border: 2px solid rgba(74,222,128,0.6); background: radial-gradient(ellipse at 50% 70%, rgba(74,222,128,0.32) 0%, rgba(5,20,10,0.88) 80%); } .inv-slot[data-rarity="rare"] { border: 2px solid rgba(59,130,246,0.65); background: radial-gradient(ellipse at 50% 70%, rgba(59,130,246,0.32) 0%, rgba(5,10,25,0.88) 80%); } .inv-slot[data-rarity="epic"] { border: 2px solid rgba(168,85,247,0.65); background: radial-gradient(ellipse at 50% 70%, rgba(168,85,247,0.32) 0%, rgba(15,5,25,0.88) 80%); } .inv-slot[data-rarity="legendary"] { border: 2px solid rgba(220,38,38,0.7); background: radial-gradient(ellipse at 50% 70%, rgba(220,38,38,0.36) 0%, rgba(20,10,0,0.88) 80%); } /* ── Rând animale + mașină ── Fundalul (inclusiv linia despărțitoare aurie) e acum parte din inv.png, imaginea comună cu echipamentul — acest rând doar poziționează sloturile peste zona de jos (sub 65% înălțime) a acelei imagini, fără fundal propriu. */ .inv-pets-row { position: absolute; top: 65%; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); padding: var(--gap-lg); flex-wrap: nowrap; overflow: hidden; transform: translateY(30px); } /* DOAR telefon, DOAR profilul public (#playerProfilePanel — .inv-pets-row simplu, fără id, folosit STRICT aici; #invPetsRow al inventarului propriu are deja propriul fix din 2026-07-19, neatins) — bug real găsit prin măsurare live (user 2026-07-20: "obiectele... ies din cadru"): 4 cutii de 102px + goluri + padding var(--gap-lg) totalizau ~420px, dar rândul pe un telefon de 390px abia are ~344px disponibili — cutiile din extreme ieșeau -18px/+38px peste margini, tăiate urât de overflow:hidden (nu doar peste bordură ca la butoane, complet invizibile pe porțiuni). Aceeași formulă procentuală validată deja la inventarul propriu (24,375%/cutie, 0,5% gol) — nu mai depinde de nicio dimensiune fixă în px. */ @media (max-width: 768px) { #playerProfilePanel .inv-pets-row { padding: 0 0.5%; gap: 0.5%; } #playerProfilePanel .inv-pets-row .inv-pet-slot-wrap { width: 24.375%; flex-shrink: 1; } #playerProfilePanel .inv-pets-row .inv-slot--pet { width: 100%; height: auto; aspect-ratio: 1 / 1; } #playerProfilePanel .inv-pets-row .inv-slot--pet > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: 110%; } } /* DOAR desktop, profil public — cutia de animal la aceeași mărime ca cea de obiect. Sloturile de obiecte de pe profil sunt 96×96px fix (ppSlotPosStyle(), ramura non-mobil), dar cutia de animal cădea pe `.inv-slot` de bază (102×102px) → vizibil mai lată decât obiectele (semnalat user 2026-08-28). Pe mobil ambele sunt deja 24,375% din chenar (mai sus), deci egale acolo. */ @media (min-width: 769px) { #playerProfilePanel .inv-pets-row .inv-slot--pet { width: 96px; height: 96px; } } /* Rândul de animale (#invPetsRow) + cutiile lui: vezi `#invPetsRow` mai sus (lângă #playerProfilePanel .inv-equipment) — aritmetica de încadrare (0,5% margine/gol) + token-ul unic de mărime sunt acum pe TOATE lățimile, nu doar telefon. Regula veche mobilă (24,375% pe .inv-pet-slot-wrap, `width:100%` + aspect-ratio pe cutie) a fost înlocuită: cu var(--inv-slot-size) în cqw nu mai există dependența circulară care obliga procentul să stea pe wrap. */ .inv-pet-slot-wrap { display: flex; flex-direction: column; align-items: center; } .inv-pet-slot-label { display: none; } /* .inv-pet-slot{} / .empty / :hover / >img / [data-rarity] — ȘTERSE 2026-08-28: toate erau identice cu .inv-slot (raritatea era byte-cu-byte identică) sau au trecut în .inv-slot--pet. .inv-slot--pet.empty moștenește .inv-slot.empty; cutia are `container-type` din .inv-slot. */ /* Sloturi "schelet" — puls discret afișat înainte să sosească datele reale de inventar (înlocuiește golul complet + textul "Se încarcă..." de la deschiderea panoului) */ .inv-slot.inv-slot-skeleton { background: rgba(255,255,255,0.03); border: 1px dashed rgba(200,146,74,0.16); box-shadow: inset 0 0 10px rgba(0,0,0,0.25); overflow: hidden; cursor: default; } .inv-slot-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(200,146,74,0.18) 50%, transparent 70%); background-size: 200% 100%; animation: invSkeletonShimmer 1.6s ease-in-out infinite; } @keyframes invSkeletonShimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } } /* .inv-pet-slot > img și .inv-pet-slot[data-rarity=…] — ȘTERSE 2026-08-28: byte-cu-byte identice cu .inv-slot > img (7695) și .inv-slot[data-rarity=…] (7791), moștenite acum. */ .inv-pet-slot-label { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: 2px; } .inv-pet-slot-wrap { display: flex; flex-direction: column; align-items: center; } /* ── Taburi ── */ .inv-tabs { display: flex; border-bottom: 1px solid rgba(139,98,48,0.3); border-top: 1px solid rgba(139,98,48,0.3); flex-shrink: 0; margin-top: 0; } /* .inv-tab — stilul vine din regulile universale */ /* ── Lista obiecte ── */ .inv-body { /* "clip", nu "hidden" — conform spec CSS, "hidden" pe o axă forțează AUTOMAT cealaltă axă (dacă e "visible") să devină tot "auto", indiferent ce scrii explicit acolo (testat live: chiar și cu overflow-y:visible scris explicit, browserul tot raporta "auto" — de-aia scrolla #invBody pe el însuși, nu #dockPanelBody). "clip" e exclus din regula asta, deci permite overflow-y:visible real — scroll-ul urcă natural la #dockPanelBody, ca la Bar. */ overflow-x: clip; overflow-y: visible; min-height: 220px; /* FĂRĂ overflow-y:auto propriu (2026-07-18) — scroll-ul se lasă să „urce" la #dockPanelBody (.dock-panel-body, care are deja overflow-y:auto + stilul de bară subțire aurie definit mai jos), exact ca la Bar. Înainte, #invBody scrola PE EL ÎNSUȘI, imbricat cu un nivel mai adânc decât la Bar — bara ieșea cu stilul implicit al browserului (nu cel auriu) și la 17px în interior, nu lipită de margine. .inv-wrap (părintele) NU are overflow-y setat (implicit visible), deci conținutul mai înalt decât el se revarsă natural spre #dockPanelBody, care îl prinde corect — încercarea anterioară (margin negativ) eșuase pentru că voia să scoată BARA din propriul overflow-x:hidden al lui #invBody, în loc să elimine nevoia de scroll intern cu totul, ca aici. */ } /* fără padding propriu (stânga/sus) — .dock-panel-body are deja 16px lateral / 12px sus (acesta din urmă venind din margin-bottom:12px al .inv-tabs, nu din padding-top aici); un padding:8px suplimentar dubla insetul la toate tab-urile în afară de Echipament (.inv-equipment stă direct în .inv-wrap, NU în #invBody, deci nu era afectat — de-aici discrepanța 17px vs 25px găsită de user 2026-07-18) */ .inv-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* 2026-08-28: revenit la 3 coloane și sub 390px. Trecerea la 2 coloane (2026-08-27) fusese pentru că bonusul mare (obiect legendar de milioane) se suprapunea cu procentul de raritate în cardul îngust — acum valoarea din footer e prescurtată (MIL./MLD., itemBonusHtml / fmtBonusCompact), deci încape din nou la 3 coloane. Cerere user: „inainte incapeau 3 pe rand". */ .inv-item--chest { cursor: default; flex-direction: column; align-items: center; padding-bottom: 8px; gap: 6px; } .inv-item--chest .inv-item-main { display: flex; flex-direction: column; align-items: center; } /* În modalul „ACȚIUNI OBIECT" cufărul folosește chenarul de raritate (.inv-item[data-rarity]), identic cu tichetele (cerere user 2026-09-07). Imaginea + badge-ul ×N ca la tichet. */ .inv-item--tooltip.inv-item--chest .inv-item-img { max-width: 104px; height: 104px; object-fit: contain; } .inv-item--chest .bar-card-qty { top: 20px; right: 18px; } .inv-chest-open-btn { font-size: 11px; padding: 5px 10px; width: calc(100% - 12px); } .inv-item { border-radius: 8px; padding: 0; cursor: pointer; position: relative; transition: filter 0.15s; border: none; display: flex; flex-direction: column; align-items: center; min-width: 0; background: transparent; justify-content: space-between; overflow: hidden; height: 130px; } .inv-item:hover { filter: brightness(1.1); } /* Banda raritate — stânga jos, fără chenar (cerere user 2026-07-16: swap cu valoarea, care e acum în dreapta). align-items:flex-start (nu center) — banda e ancorată la marginea stângă, deci icon+text trebuie aliniate la același capăt, nu centrate unul față de celălalt (cerere user 2026-07-16) */ .inv-rarity-strip { position: absolute; left: 3px; bottom: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; background: none; border: none; z-index: 2; } .inv-rarity-strip .inv-item-roll { font-size: 10px; color: var(--color-text); line-height: 1; font-weight: 600; } /* Conținut principal */ .inv-item-main { flex: 1; width: 100%; display: grid; grid-template-rows: auto 1fr; align-items: start; justify-items: center; gap: var(--gap-xs); padding: var(--gap-sm); } /* Rarity pe inv-item — border + gradient */ .inv-item[data-rarity="common"] { border: 1px solid rgba(156,163,175,0.3); background: radial-gradient(ellipse at 50% 70%, rgba(156,163,175,0.15) 0%, rgba(10,10,15,0.85) 80%); } .inv-item[data-rarity="uncommon"] { border: 2px solid rgba(74,222,128,0.6); background: radial-gradient(ellipse at 50% 70%, rgba(74,222,128,0.28) 0%, rgba(5,20,10,0.9) 80%); } .inv-item[data-rarity="rare"] { border: 2px solid rgba(59,130,246,0.65); background: radial-gradient(ellipse at 50% 70%, rgba(59,130,246,0.28) 0%, rgba(5,10,25,0.9) 80%); } .inv-item[data-rarity="epic"] { border: 2px solid rgba(168,85,247,0.65); background: radial-gradient(ellipse at 50% 70%, rgba(168,85,247,0.28) 0%, rgba(15,5,25,0.9) 80%); } .inv-item[data-rarity="legendary"] { border: 2px solid rgba(220,38,38,0.7); background: radial-gradient(ellipse at 50% 70%, rgba(220,38,38,0.32) 0%, rgba(20,10,0,0.9) 80%); } /* Raritate 'special' — folosită de Cutia misterioasă (Tombolă) + Tichete VIP/Battle Pass. Tratament auriu, distinct de „Legendar" (roșu). */ .inv-item[data-rarity="special"] { border: 2px solid rgba(224,184,74,0.65); background: radial-gradient(ellipse at 50% 70%, rgba(224,184,74,0.24) 0%, rgba(25,18,5,0.9) 80%); } .inv-item::after { content: none; } /* Culoare bandă per raritate */ .inv-item-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65%; max-height: 80%; object-fit: contain; z-index: 1; background: transparent; border: none; padding: 0; } .inv-item-name { font-size: 12px; font-weight: 600; color: var(--color-text); text-align: center; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; position: relative; z-index: 1; } .inv-item[data-rarity="common"] .inv-item-name { color: #9ca3af; } .inv-item[data-rarity="uncommon"] .inv-item-name { color: #4ade80; } .inv-item[data-rarity="rare"] .inv-item-name { color: #60a5fa; } .inv-item[data-rarity="epic"] .inv-item-name { color: #c084fc; } .inv-item[data-rarity="legendary"] .inv-item-name { color: #dc2626; } .inv-item[data-rarity="special"] .inv-item-name { color: #e8c97a; } .inv-item-rarity { font-size: var(--text-xs); font-weight: 400; opacity: 0.8; } .inv-item[data-rarity="common"] .inv-item-rarity { color: #9ca3af; } .inv-item[data-rarity="uncommon"] .inv-item-rarity { color: #4ade80; } .inv-item[data-rarity="rare"] .inv-item-rarity { color: #60a5fa; } .inv-item[data-rarity="epic"] .inv-item-rarity { color: #c084fc; } .inv-item[data-rarity="legendary"] .inv-item-rarity { color: #dc2626; } .inv-item-stats { font-size: var(--text-xs); font-weight: 500; color: #aaa; text-align: center; } .inv-item-footer { position: absolute; bottom: 2px; right: 2px; z-index: 2; display: flex; align-items: flex-end; line-height: 1; } .inv-item-roll { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.2px; color: #a0a0a0; display: flex; align-items: center; gap: var(--gap-xs); } .inv-rarity-emblem { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; animation: rarityPulse 2s ease-in-out infinite; } /* Emblemă + raritate inline pe sloturile de echipament */ .inv-slot-rarity-row { position: absolute; /* 0, nu -4px (simpla oglindire a vechii poziții de jos) — badge-ul de rang (.inv-slot-rank-badge) ocupă banda -16px..0px deasupra cutiei, deci -4px s-ar suprapune cu el; la 0px rândul pornește exact la marginea de sus a cutiei, sub rang */ top: 0; left: 2px; display: flex; align-items: flex-end; gap: 3px; pointer-events: none; z-index: 4; } .inv-slot-emblem-inline { width: 24px !important; height: 24px !important; object-fit: contain; border: none !important; background: none !important; padding: 0 !important; animation: rarityPulse 2s ease-in-out infinite; transform: translateY(-10px); } .inv-slot-roll-inline { font-size: 10px; font-weight: 400 !important; color: #fff; background: rgba(0,0,0,0.55); border-radius: 3px; padding: 1px 4px; line-height: 1.4; transform: translateY(-4px); } /* Badge-uri rank (#N pe tip) / nivel obiect — stil comun, poziție diferită după context (deasupra sloturilor pe manechin, în interiorul cardului în lista de Obiecte, unde overflow:hidden ar tăia orice iese din cutie). Nivelul se afișează ca 1-3 simboluri colorate (tier), nu ca număr brut — numărul exact e disponibil la hover prin tooltip-ul global (data-tip). */ .inv-item-level-badge, .inv-slot-level-badge, .auction-sq-level-badge, .fight-equip-level-badge { position: absolute; display: flex; align-items: center; gap: 2px; background: rgba(0,0,0,0.55); border-radius: 3px; padding: 2px 4px; z-index: 4; pointer-events: auto; } .lvl-icon { width: 12px; height: 12px; flex-shrink: 0; display: inline-block; } /* Simbolurile de tier ale nivelului de obiect — 10 tier-uri (sesiunea 108, 2026-09-08). Iconițe game-icons.net (CC BY 3.0), folosite ca `mask` din data-URI SVG — culoarea per tier din `background`, aleasă să evoce simbolul dar să rămână distinctă (gri / roșu / galben / albastru-apă / cyan-gheață / roz / albastru-safir / turcoaz / violet / verde — cerere user 2026-09-08). Înlocuiesc vechile 7 forme clip-path. Ordine: clubs -> diamonds -> staryu -> waterdrop -> flake -> flower -> saphir -> cube -> electric -> clover. Backup vechi: scratchpad/lvl_icons_ORIG_7_clippath.css.txt. Repetiția ×1–3 (.lvl-icon-sub2) neschimbată. */ .lvl-icon--clubs { background: #6B7280; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M477.443%20295.143a104.45%20104.45%200%200%201-202.26%2036.67c-.08%2068.73%204.33%20114.46%2069.55%20149h-177.57c65.22-34.53%2069.63-80.25%2069.55-149a104.41%20104.41%200%201%201-66.34-136.28%20104.45%20104.45%200%201%201%20171.14%200%20104.5%20104.5%200%200%201%20135.93%2099.61z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M477.443%20295.143a104.45%20104.45%200%200%201-202.26%2036.67c-.08%2068.73%204.33%20114.46%2069.55%20149h-177.57c65.22-34.53%2069.63-80.25%2069.55-149a104.41%20104.41%200%201%201-66.34-136.28%20104.45%20104.45%200%201%201%20171.14%200%20104.5%20104.5%200%200%201%20135.93%2099.61z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--diamonds { background: #D64550; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M431.76%20256c-69%2042.24-137.27%20126.89-175.76%20224.78C217.51%20382.89%20149.25%20298.24%2080.24%20256c69-42.24%20137.27-126.89%20175.76-224.78C294.49%20129.11%20362.75%20213.76%20431.76%20256z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M431.76%20256c-69%2042.24-137.27%20126.89-175.76%20224.78C217.51%20382.89%20149.25%20298.24%2080.24%20256c69-42.24%20137.27-126.89%20175.76-224.78C294.49%20129.11%20362.75%20213.76%20431.76%20256z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--staryu { background: #F2C230; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='m246.313%2024.563-66.125%20133.78L222.25%20216c9.095-7.82%2017.132-17.24%2024.063-28.5V24.562zm18.687.625v162.406c6.37%2011.466%2014.176%2021.062%2023.375%2029L331%20158.25%20265%2025.187zM164.187%20168.094%2020.845%20188.97l156.53%2051.093c10.752-3.268%2020.687-7.577%2029.782-13.094l-42.97-58.876zm182.782%200L303.593%20227.5c9.343%205.507%2019.765%209.777%2031.28%2012.97l157.876-51.19-145.78-21.186zm-91.533%2033.844c-17.96%2025.962-42.385%2042.9-71.25%2052.218%2022.825%2023.285%2029.075%2053.562%2026.782%2085.656%2030.114-12.898%2060.604-9.374%2089.874%201.438-2.023-31.53%204.755-61.705%2027.156-86.656-30.68-9.16-55.663-26.35-72.563-52.656zM13.25%20206.155l106.72%20104%2068.936-22.344c-5.1-11.618-13.2-22.024-25.22-31.125l-3.374-2.53-147.062-48zm482.156%201.906L349.186%20255.5l-.967.844c-11.146%209.762-18.935%2020.302-24.095%2031.625l67.375%2021.967%20103.906-101.875zm-301.062%2097.625-68.72%2022.282-25.718%20146.75%2028.813-39.47%2066.31-90.813c1.518-13.88%201.532-26.83-.686-38.75zm123.906%200c-2.725%2012.42-3.01%2025.66-1.594%2039.72l93.563%20128.25-24.658-146.032-67.312-21.938zm-71.938%2041.22c-12.81.772-25.57%204.355-38.468%2011.656l-64.03%2087.718-26.908%2036.845%20129.406-67.813v-68.406zm18.688.75v67.717l129.625%2068.595-91.25-125.095c-13.052-5.493-25.79-9.5-38.375-11.22z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='m246.313%2024.563-66.125%20133.78L222.25%20216c9.095-7.82%2017.132-17.24%2024.063-28.5V24.562zm18.687.625v162.406c6.37%2011.466%2014.176%2021.062%2023.375%2029L331%20158.25%20265%2025.187zM164.187%20168.094%2020.845%20188.97l156.53%2051.093c10.752-3.268%2020.687-7.577%2029.782-13.094l-42.97-58.876zm182.782%200L303.593%20227.5c9.343%205.507%2019.765%209.777%2031.28%2012.97l157.876-51.19-145.78-21.186zm-91.533%2033.844c-17.96%2025.962-42.385%2042.9-71.25%2052.218%2022.825%2023.285%2029.075%2053.562%2026.782%2085.656%2030.114-12.898%2060.604-9.374%2089.874%201.438-2.023-31.53%204.755-61.705%2027.156-86.656-30.68-9.16-55.663-26.35-72.563-52.656zM13.25%20206.155l106.72%20104%2068.936-22.344c-5.1-11.618-13.2-22.024-25.22-31.125l-3.374-2.53-147.062-48zm482.156%201.906L349.186%20255.5l-.967.844c-11.146%209.762-18.935%2020.302-24.095%2031.625l67.375%2021.967%20103.906-101.875zm-301.062%2097.625-68.72%2022.282-25.718%20146.75%2028.813-39.47%2066.31-90.813c1.518-13.88%201.532-26.83-.686-38.75zm123.906%200c-2.725%2012.42-3.01%2025.66-1.594%2039.72l93.563%20128.25-24.658-146.032-67.312-21.938zm-71.938%2041.22c-12.81.772-25.57%204.355-38.468%2011.656l-64.03%2087.718-26.908%2036.845%20129.406-67.813v-68.406zm18.688.75v67.717l129.625%2068.595-91.25-125.095c-13.052-5.493-25.79-9.5-38.375-11.22z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--waterdrop { background: #3F92D6; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M406.043%20316c24.11%2096.443-50.59%20180-150%20180s-174.405-82.38-150-180c15-60%2090-150%20150-300%2060%20150%20135%20240%20150%20300z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M406.043%20316c24.11%2096.443-50.59%20180-150%20180s-174.405-82.38-150-180c15-60%2090-150%20150-300%2060%20150%20135%20240%20150%20300z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--flake { background: #8FD3E8; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M463.788%20376c-22.562%2039.09-132.242-79.382-171.32-56.815C253.394%20341.752%20301.123%20496%20256%20496c-45.121%200%202.607-154.248-36.47-176.815C180.454%20296.617%2070.774%20415.087%2048.213%20376%2025.65%20336.91%20183.06%20301.135%20183.06%20256c0-45.135-157.407-80.91-134.847-120%2022.56-39.088%20132.24%2079.38%20171.317%2056.814C258.607%20170.247%20210.88%2016%20256%2016c45.121%200-2.607%20154.246%2036.47%20176.814C331.546%20215.38%20441.226%2096.91%20463.786%20136c22.562%2039.089-134.846%2074.865-134.846%20120%200%2045.135%20157.41%2080.912%20134.848%20120z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M463.788%20376c-22.562%2039.09-132.242-79.382-171.32-56.815C253.394%20341.752%20301.123%20496%20256%20496c-45.121%200%202.607-154.248-36.47-176.815C180.454%20296.617%2070.774%20415.087%2048.213%20376%2025.65%20336.91%20183.06%20301.135%20183.06%20256c0-45.135-157.407-80.91-134.847-120%2022.56-39.088%20132.24%2079.38%20171.317%2056.814C258.607%20170.247%20210.88%2016%20256%2016c45.121%200-2.607%20154.246%2036.47%20176.814C331.546%20215.38%20441.226%2096.91%20463.786%20136c22.562%2039.089-134.846%2074.865-134.846%20120%200%2045.135%20157.41%2080.912%20134.848%20120z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--flower { background: #DE4B9E; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2024c-11.8%200-24.5%2010.15-34.6%2030.32-7.1%2014.37-12.6%2033.19-15.1%2054.48%204.6%204%209.2%208.2%2013.7%2012.7%2011.4%2011.3%2021.2%2023.3%2029.3%2035.3%202.2-.1%204.5-.2%206.7-.2%202.4%200%204.8.1%207.2.3%208.1-12.1%2017.9-24%2029.3-35.4%204.3-4.3%208.8-8.5%2013.3-12.3-2.6-21.44-8-40.42-15.2-54.88C280.5%2034.15%20267.8%2024%20256%2024zM113.2%2084.12c-9.2.13-16.33%202.76-20.99%207.44-8.32%208.32-10.16%2024.44-3%2045.84%207.15%2021.4%2022.89%2046.5%2045.59%2069.2%208.3%208.3%2017%2015.7%2025.6%2022.1%209.5-33.2%2035.9-59.3%2069.2-68.5-6.4-8.8-13.9-17.6-22.3-26-22.7-22.7-47.8-38.48-69.2-45.64-9.4-3.13-17.8-4.54-24.9-4.44zm286.1%200c-7.1-.1-15.5%201.33-24.8%204.48-21.4%207.14-46.5%2022.9-69.2%2045.6-8.5%208.5-16%2017.3-22.4%2026.1%2033.2%209.3%2059.4%2035.5%2068.8%2068.7%208.8-6.5%2017.6-14%2026-22.4%2022.7-22.7%2038.4-47.8%2045.6-69.2%207.2-21.4%205.3-37.49-3-45.83-4.7-4.69-11.8-7.33-21-7.45zM256%20174.6c-45.1%200-81.4%2036.3-81.4%2081.4%200%2045.1%2036.3%2081.4%2081.4%2081.4%2045.1%200%2081.4-36.3%2081.4-81.4%200-45.1-36.3-81.4-81.4-81.4zm-146.2%2031.6c-21.67%202.5-40.87%208-55.48%2015.2C34.15%20231.5%2024%20244.2%2024%20256s10.15%2024.5%2030.32%2034.6c14.48%207.2%2033.48%2012.6%2054.88%2015.2%204.1-4.7%208.4-9.4%2012.9-13.9%2011.2-11.2%2022.9-20.9%2034.7-28.9-.1-2.3-.2-4.6-.2-7%200-2.6.1-5.2.3-7.7-11.9-8-23.6-17.7-34.8-28.9-4.3-4.3-8.4-8.8-12.3-13.2zm292.8%200c-3.9%204.4-7.9%208.8-12.2%2013.1-11.4%2011.4-23.3%2021.2-35.3%2029.3.2%202.4.3%204.9.3%207.4%200%202.2-.1%204.5-.2%206.7%2011.9%208%2023.8%2017.8%2035.1%2029.1%204.6%204.6%208.9%209.2%2012.9%2013.9%2021.3-2.5%2040.1-8%2054.5-15.1%2020.2-10.1%2030.3-22.8%2030.3-34.6s-10.1-24.5-30.3-34.6c-14.5-7.2-33.6-12.7-55.1-15.2zm-50.8%2076.1c-9.1%2033.4-35.3%2059.8-68.5%2069.3%206.3%208.6%2013.6%2017.2%2021.9%2025.4%2022.7%2022.7%2047.8%2038.4%2069.2%2045.6%2021.4%207.1%2037.5%205.3%2045.8-3%208.4-8.3%2010.2-24.5%203-45.9-7.1-21.4-22.9-46.5-45.6-69.2-8.4-8.4-17-15.8-25.8-22.2zm-191.6.4c-8.6%206.4-17.1%2013.7-25.4%2021.9-22.7%2022.7-38.43%2047.8-45.57%2069.2-7.21%2021.4-5.37%2037.5%202.97%2045.9%208.3%208.3%2024.5%2010.2%2045.8%202.9%2021.4-7.1%2046.5-22.9%2069.2-45.6%208.2-8.2%2015.5-16.7%2021.9-25.3-33.3-9.4-59.5-35.7-68.9-69zm88.6%2072.4c-8%2011.8-17.6%2023.5-28.8%2034.7-4.5%204.5-9.1%208.8-13.8%2012.8%202.5%2021.5%208%2040.6%2015.2%2055.1%2010.1%2020.2%2022.8%2030.3%2034.6%2030.3s24.5-10.1%2034.6-30.3c7.2-14.6%2012.7-33.8%2015.2-55.5-4.5-3.9-9-8.1-13.4-12.5-11.2-11.2-20.8-22.8-28.7-34.6-2.6.2-5.1.3-7.7.3-2.4%200-4.8-.1-7.2-.3z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2024c-11.8%200-24.5%2010.15-34.6%2030.32-7.1%2014.37-12.6%2033.19-15.1%2054.48%204.6%204%209.2%208.2%2013.7%2012.7%2011.4%2011.3%2021.2%2023.3%2029.3%2035.3%202.2-.1%204.5-.2%206.7-.2%202.4%200%204.8.1%207.2.3%208.1-12.1%2017.9-24%2029.3-35.4%204.3-4.3%208.8-8.5%2013.3-12.3-2.6-21.44-8-40.42-15.2-54.88C280.5%2034.15%20267.8%2024%20256%2024zM113.2%2084.12c-9.2.13-16.33%202.76-20.99%207.44-8.32%208.32-10.16%2024.44-3%2045.84%207.15%2021.4%2022.89%2046.5%2045.59%2069.2%208.3%208.3%2017%2015.7%2025.6%2022.1%209.5-33.2%2035.9-59.3%2069.2-68.5-6.4-8.8-13.9-17.6-22.3-26-22.7-22.7-47.8-38.48-69.2-45.64-9.4-3.13-17.8-4.54-24.9-4.44zm286.1%200c-7.1-.1-15.5%201.33-24.8%204.48-21.4%207.14-46.5%2022.9-69.2%2045.6-8.5%208.5-16%2017.3-22.4%2026.1%2033.2%209.3%2059.4%2035.5%2068.8%2068.7%208.8-6.5%2017.6-14%2026-22.4%2022.7-22.7%2038.4-47.8%2045.6-69.2%207.2-21.4%205.3-37.49-3-45.83-4.7-4.69-11.8-7.33-21-7.45zM256%20174.6c-45.1%200-81.4%2036.3-81.4%2081.4%200%2045.1%2036.3%2081.4%2081.4%2081.4%2045.1%200%2081.4-36.3%2081.4-81.4%200-45.1-36.3-81.4-81.4-81.4zm-146.2%2031.6c-21.67%202.5-40.87%208-55.48%2015.2C34.15%20231.5%2024%20244.2%2024%20256s10.15%2024.5%2030.32%2034.6c14.48%207.2%2033.48%2012.6%2054.88%2015.2%204.1-4.7%208.4-9.4%2012.9-13.9%2011.2-11.2%2022.9-20.9%2034.7-28.9-.1-2.3-.2-4.6-.2-7%200-2.6.1-5.2.3-7.7-11.9-8-23.6-17.7-34.8-28.9-4.3-4.3-8.4-8.8-12.3-13.2zm292.8%200c-3.9%204.4-7.9%208.8-12.2%2013.1-11.4%2011.4-23.3%2021.2-35.3%2029.3.2%202.4.3%204.9.3%207.4%200%202.2-.1%204.5-.2%206.7%2011.9%208%2023.8%2017.8%2035.1%2029.1%204.6%204.6%208.9%209.2%2012.9%2013.9%2021.3-2.5%2040.1-8%2054.5-15.1%2020.2-10.1%2030.3-22.8%2030.3-34.6s-10.1-24.5-30.3-34.6c-14.5-7.2-33.6-12.7-55.1-15.2zm-50.8%2076.1c-9.1%2033.4-35.3%2059.8-68.5%2069.3%206.3%208.6%2013.6%2017.2%2021.9%2025.4%2022.7%2022.7%2047.8%2038.4%2069.2%2045.6%2021.4%207.1%2037.5%205.3%2045.8-3%208.4-8.3%2010.2-24.5%203-45.9-7.1-21.4-22.9-46.5-45.6-69.2-8.4-8.4-17-15.8-25.8-22.2zm-191.6.4c-8.6%206.4-17.1%2013.7-25.4%2021.9-22.7%2022.7-38.43%2047.8-45.57%2069.2-7.21%2021.4-5.37%2037.5%202.97%2045.9%208.3%208.3%2024.5%2010.2%2045.8%202.9%2021.4-7.1%2046.5-22.9%2069.2-45.6%208.2-8.2%2015.5-16.7%2021.9-25.3-33.3-9.4-59.5-35.7-68.9-69zm88.6%2072.4c-8%2011.8-17.6%2023.5-28.8%2034.7-4.5%204.5-9.1%208.8-13.8%2012.8%202.5%2021.5%208%2040.6%2015.2%2055.1%2010.1%2020.2%2022.8%2030.3%2034.6%2030.3s24.5-10.1%2034.6-30.3c7.2-14.6%2012.7-33.8%2015.2-55.5-4.5-3.9-9-8.1-13.4-12.5-11.2-11.2-20.8-22.8-28.7-34.6-2.6.2-5.1.3-7.7.3-2.4%200-4.8-.1-7.2-.3z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } /* „saphir" de la Lorc (game-icons.net, CC BY 3.0) — a înlocuit „rupee" la cererea user 2026-09-08. */ .lvl-icon--saphir { background: #2E5AD0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='m413.47%2020.25-11.47%204L84.97%20134.72%2078.437%20137l.406%206.875L97.78%20478.47l.69%2012.124%2011.468-4%20317.03-110.47%206.5-2.28-.374-6.906-18.938-334.563-.687-12.125zm-31.533%2030.375-43.375%2064.75-180.75%2063.375-36.78-24.53c74.22%2012.515%20196.82-52.49%20257.124-102.282l3.78-1.313zm16.032%2019.688%2015.78%20279.125-49.313-32.875-4.187-76.47c18.567-45.422%2032.45-114.342%2037.72-169.78zm-63.44%2067.75%209.69%20176.187-166.876%2058.5-2.78-50.47c48.082%209.04%2083.113-8.624%20104.342-38.25-27.814-3.42-46.384-30.984-43.094-60.28%203.174-28.257%2024.982-51.253%2051.72-52.313a49.746%2049.746%200%200%201%205.437.094c2.458.176%204.837.56%207.155%201.095a152.499%20152.499%200%200%200-5.5-20.563l39.906-14zM117.78%20174.5l29.657%2019.78%2010.47%20190.814-43.407%2064.812-.188-3.656c24.146-101.32%2036.74-217.525%203.47-271.75zm172.095%2022.625c-13.068-.123-26.546%2012.068-28.5%2029.47-2.017%2017.96%208.33%2031.076%2021.78%2032.03%2013.452.954%2027.765-11.444%2029.783-29.406%202.017-17.963-8.363-31.08-21.813-32.032-.42-.03-.828-.06-1.25-.063zm64.156%20134.97%2049.283%2032.874-254.938%2088.81c48.305-26.555%20103.147-64.172%20135.594-97.124l70.06-24.562z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='m413.47%2020.25-11.47%204L84.97%20134.72%2078.437%20137l.406%206.875L97.78%20478.47l.69%2012.124%2011.468-4%20317.03-110.47%206.5-2.28-.374-6.906-18.938-334.563-.687-12.125zm-31.533%2030.375-43.375%2064.75-180.75%2063.375-36.78-24.53c74.22%2012.515%20196.82-52.49%20257.124-102.282l3.78-1.313zm16.032%2019.688%2015.78%20279.125-49.313-32.875-4.187-76.47c18.567-45.422%2032.45-114.342%2037.72-169.78zm-63.44%2067.75%209.69%20176.187-166.876%2058.5-2.78-50.47c48.082%209.04%2083.113-8.624%20104.342-38.25-27.814-3.42-46.384-30.984-43.094-60.28%203.174-28.257%2024.982-51.253%2051.72-52.313a49.746%2049.746%200%200%201%205.437.094c2.458.176%204.837.56%207.155%201.095a152.499%20152.499%200%200%200-5.5-20.563l39.906-14zM117.78%20174.5l29.657%2019.78%2010.47%20190.814-43.407%2064.812-.188-3.656c24.146-101.32%2036.74-217.525%203.47-271.75zm172.095%2022.625c-13.068-.123-26.546%2012.068-28.5%2029.47-2.017%2017.96%208.33%2031.076%2021.78%2032.03%2013.452.954%2027.765-11.444%2029.783-29.406%202.017-17.963-8.363-31.08-21.813-32.032-.42-.03-.828-.06-1.25-.063zm64.156%20134.97%2049.283%2032.874-254.938%2088.81c48.305-26.555%20103.147-64.172%20135.594-97.124l70.06-24.562z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--cube { background: #1AA79E; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2024.585%2051.47%20118.989%20256%20213.394l204.53-94.405zM38.998%20133.054v258.353L247%20487.415V229.063zm434.004%200L265%20229.062v258.353l208.002-96.008z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2024.585%2051.47%20118.989%20256%20213.394l204.53-94.405zM38.998%20133.054v258.353L247%20487.415V229.063zm434.004%200L265%20229.062v258.353l208.002-96.008z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--electric { background: #9B4DE0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M376%20211H256V16L136%20301h120v195z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M376%20211H256V16L136%20301h120v195z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .lvl-icon--clover { background: #3FA535; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M105.186%2026.426c-38.314.06-62.13%2026.334-31.37%2072.994C6.192%2097.785-9.36%20188.75%2062.29%20218.39c54.838%2022.684%2082.008-6.012%20142.985%2015.008-64.015-7.88-119.143%2021.696-153.814%2066.6-38.507%2049.87-24.104%20120.148%2040.41%20100.332-9.024%2067.12%2062.385%20100.137%20103.907%2047.166%2035.793-45.66%2015.51-103.756%2041.842-182.885%207.1%2061.706-5.617%20108.762%2011.573%20166.478%2021.393%2071.83%20103.075%2075.605%20118.537%206.34%2055.84%2051.31%2095.82-9.41%2075.754-76.643-17.993-60.285-90.76-98.2-167.65-118.703%2072.808-3.032%20108.846%2044.51%20167.78%2030.084%2072.446-17.734%2064.365-108.426-10.823-128.922%2045.767-54.918-19.446-110.047-87.18-93.117-57.113%2014.275-90.85%2071.977-101.928%20143.33-5.55-65.618-28.823-120.138-81.03-150.316-19.64-11.353-40.05-16.74-57.466-16.714z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M105.186%2026.426c-38.314.06-62.13%2026.334-31.37%2072.994C6.192%2097.785-9.36%20188.75%2062.29%20218.39c54.838%2022.684%2082.008-6.012%20142.985%2015.008-64.015-7.88-119.143%2021.696-153.814%2066.6-38.507%2049.87-24.104%20120.148%2040.41%20100.332-9.024%2067.12%2062.385%20100.137%20103.907%2047.166%2035.793-45.66%2015.51-103.756%2041.842-182.885%207.1%2061.706-5.617%20108.762%2011.573%20166.478%2021.393%2071.83%20103.075%2075.605%20118.537%206.34%2055.84%2051.31%2095.82-9.41%2075.754-76.643-17.993-60.285-90.76-98.2-167.65-118.703%2072.808-3.032%20108.846%2044.51%20167.78%2030.084%2072.446-17.734%2064.365-108.426-10.823-128.922%2045.767-54.918-19.446-110.047-87.18-93.117-57.113%2014.275-90.85%2071.977-101.928%20143.33-5.55-65.618-28.823-120.138-81.03-150.316-19.64-11.353-40.05-16.74-57.466-16.714z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } /* Ultimul simbol al subnivelului mai mic (75%) — indică vizual progresul spre următorul tier fără cifre. */ .lvl-icon-sub2 { transform: scale(0.75); } /* Iconițele de nivel în sloturi (.inv-slot .lvl-icon) — vezi blocul unic „Insigne slot" de mai sus (lângă .inv-slot .inv-bonus-flag): acum 10,2cqw, se scalează cu cutia în TOATE contextele. Aici rămân la 12px doar în afara sloturilor (.inv-item — lista Obiecte, fără container-type; .wiki-level-row). */ /* Rank — aceeași pilulă folosită deja la "#X global" (Sală/Centru militar). */ .inv-item-rank-badge, .inv-slot-rank-badge { position: absolute; background: rgba(0,0,0,0.5); border: 1px solid rgba(200,146,74,0.5); border-radius: 20px; padding: 1px 8px; font-size: 10px; font-weight: 700 !important; color: var(--color-accent); white-space: nowrap; z-index: 4; pointer-events: auto; } /* Poziții — manechin: deasupra slotului (iese din cutie, mai vizibil) */ .inv-slot-rank-badge { top: -16px; left: 2px; } .inv-slot-level-badge { top: -18px; right: 2px; } /* Poziții — profilul public (tab „Înfățișare"): în interiorul cutiei, sus-dreapta (nu deasupra ca la manechinul propriu) — emblema de raritate (.inv-slot-emblem) e jos-stânga, colțul jos-dreapta rămâne rezervat bulinei de set (cerere user 2026-07-16) */ #playerProfilePanel .inv-slot-level-badge { top: 1px; bottom: auto; left: auto; right: 1px; } /* Poziții — cardul din lista Obiecte: în interior (overflow:hidden pe .inv-item), pe același rând, rank stânga / nivel dreapta (sub EQ, care e sus-dreapta) */ .inv-item-rank-badge { top: 22px; left: 2px; } .inv-item-level-badge { top: 22px; right: 2px; } /* Bulină de set — sub badge-ul de rang (cerere user 2026-07-16): 5px de la marginea cardului, 5px sub badge (care se termină la ~39px: top 22 + înălțime ~16 + border) */ .inv-item .inv-set-dot { top: 43px; left: 5px; bottom: auto; right: auto; } /* Bulină de set — pe manechin (slot echipat), colț sus-stânga (cerere user 2026-07-16) — rank/ nivel plutesc DEASUPRA cutiei (top negativ), deci nu se suprapun cu bulina, care rămâne în interiorul cutiei. 1px — aliniată la aceeași margine ca emblema de raritate/nivelul de pe profil (cerere user 2026-08-23: „ala de set pare putin mai departe de margine decat ar trebui" — era 5px, vizibil mai departe de margine decât restul badge-urilor). */ .inv-slot .inv-set-dot { top: 1px; left: 1px; bottom: auto; right: auto; } /* Un singur selector `.inv-slot` acoperă și animalele (.inv-slot--pet) — contopite 2026-08-28. */ /* Piesă de puzzle — obiect făcând parte dintr-un set cosmetic tematic. Colț jos-dreapta, 2px/2px, universal în toate contextele (Echipament, animale, listă Obiecte, Licitații, profil public — pe profil, nivelul e mutat în stânga special ca să elibereze acest colț). Sus = adâncitură rotunjită înăuntru, stânga+dreapta+jos = tab rotunjit în afară — exact configurația din imaginea de referință a user-ului (2026-07-16, codepen amit_sheen), verificată cu canvas ASCII (nu doar din ochi) — inclusiv un sweep-flag greșit pe latura stângă găsit și corectat pe loc (ieșea „retragere" în loc de tab la prima încercare). Bază: clip-path:path() cu arce simple, suportat peste tot. Progressive enhancement mai jos: clip-path:shape() (curbe Bézier reale, gât+bulb autentic — tehnică de la user, verificată cu hit-testing pe element real) pentru browsere care-l suportă (Baseline 2026, foarte nou — vezi @supports). (Încercare 2026-07-21 cu tehnică pe bază de mask — revenit la cerere user, „era mai frumos" varianta asta.) */ /* TEST 2026-09-08: înlocuit forma clip-path:path()/shape() cu iconița „jigsaw-piece" de la Lorc (game-icons.net, CC BY 3.0), folosită ca `mask` dintr-un data-URI SVG — culoarea aurie vine din `background`, glow-ul dintr-un `drop-shadow` care urmează silueta (nu box-shadow dreptunghiular). Dacă user-ul NU o vrea: revino la blocul din scratchpad `inv-set-dot_ORIG_puzzle_clippath.css.txt` (clip-path:path + @supports shape). */ .inv-set-dot { position: absolute; bottom: 2px; right: 2px; width: 16px; height: 16px; background: var(--color-accent); z-index: 5; pointer-events: auto; filter: drop-shadow(0 0 2px rgba(232,201,122,0.9)); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M234.72%2026.594c-.753-.008-1.514.01-2.282.03-5.09.147-10.548.97-16.375%202.532-62.162%2016.66-38.924%2089.862-13.97%2094.72%204.963.964%2015.1%2029.773%205.407%2047.968L102.25%20200.03l28.063%20104.75c-4.66%2018.956-34.61%2021.788-51.438%208-13.04-10.692-68.983%209.403-54.78%2062.408%2014.2%2053.004%2076.607%2033.183%2080.75%2011.906%201.016-5.245%2028.51-24.732%2045.405-7.844l28.125%20104.938%20114.594-30.72c29.46-14.44%205.724-35.85-14.376-43.437-15.9-5.987-26.554-64.91%2026.844-79.217%205.005-1.342%209.676-1.97%2014-2.032%2041.79-.61%2051.995%2053.516%2037.062%2066.5-4.135%203.595-13.396%2043.19%2015.844%2036.876l5.312-1.5c-.927.323-1.822.6-2.687.844l118.186-31.656-30.344-113.313c-14.378-18.138-42.185-4.923-49.687%2015-5.993%2015.91-50.688%2024.518-65-28.874-14.312-53.39%2032.484-60.992%2049.25-47%2014.26%2011.905%2051.205%2011.807%2040.375-30.47l5.438%2018.095-26.157-97.593-138.75%2037.188c-19.11-8.485-25.912-31.455-10.405-44.438%2027.632-23.133%2014.2-81.373-33.156-81.843zm137.624%20405.562-3.844%201.094%206.28-1.688c-.837.233-1.653.425-2.436.594zm63.437-243.562a91.447%2091.447%200%200%201%201.97%206.562l-1.97-6.562z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M234.72%2026.594c-.753-.008-1.514.01-2.282.03-5.09.147-10.548.97-16.375%202.532-62.162%2016.66-38.924%2089.862-13.97%2094.72%204.963.964%2015.1%2029.773%205.407%2047.968L102.25%20200.03l28.063%20104.75c-4.66%2018.956-34.61%2021.788-51.438%208-13.04-10.692-68.983%209.403-54.78%2062.408%2014.2%2053.004%2076.607%2033.183%2080.75%2011.906%201.016-5.245%2028.51-24.732%2045.405-7.844l28.125%20104.938%20114.594-30.72c29.46-14.44%205.724-35.85-14.376-43.437-15.9-5.987-26.554-64.91%2026.844-79.217%205.005-1.342%209.676-1.97%2014-2.032%2041.79-.61%2051.995%2053.516%2037.062%2066.5-4.135%203.595-13.396%2043.19%2015.844%2036.876l5.312-1.5c-.927.323-1.822.6-2.687.844l118.186-31.656-30.344-113.313c-14.378-18.138-42.185-4.923-49.687%2015-5.993%2015.91-50.688%2024.518-65-28.874-14.312-53.39%2032.484-60.992%2049.25-47%2014.26%2011.905%2051.205%2011.807%2040.375-30.47l5.438%2018.095-26.157-97.593-138.75%2037.188c-19.11-8.485-25.912-31.455-10.405-44.438%2027.632-23.133%2014.2-81.373-33.156-81.843zm137.624%20405.562-3.844%201.094%206.28-1.688c-.837.233-1.653.425-2.436.594zm63.437-243.562a91.447%2091.447%200%200%201%201.97%206.562l-1.97-6.562z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; } .inv-bonus-flag { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; box-sizing: border-box; font-size: 10px; font-weight: 400 !important; border-top: 1px solid; border-radius: 0 0 6px 6px; pointer-events: none; letter-spacing: 0.3px; z-index: 3; } /* Cele 2 jumătăți (procent/valoare) redevin ținte de hover pentru tooltip-ul global (data-tip) — părintele .inv-bonus-flag are pointer-events:none (nu blochează click-ul pe cutia de dedesubt), deci fiecare span își reactivează explicit propriile evenimente */ .inv-bonus-flag-part { pointer-events: auto; } /* Insignele animalelor (.inv-bonus-flag / .inv-slot-emblem / rank / nivel) — ȘTERSE 2026-08-28: erau byte-cu-byte identice cu blocul unic „Insigne slot" de sus (`.inv-slot …`), care acum include și .inv-slot--pet. Un singur loc de editat pentru toate contextele. */ .inv-slot-emblem { /* top:auto + transform:none — altfel regula generică „.inv-slot > img" (centrare top:50%+translate(-50%,-50%), pentru imaginea PRINCIPALĂ a obiectului) se aplică și aici, fiindcă emblema e tot un copil direct al .inv-slot; top (nefiind auto) câștigă în fața lui bottom (proprietăți concurente pe aceeași axă), iar transform-ul moștenit o mai deplasa suplimentar — emblema ajungea centrată în cutie, nu jos-stânga, și mutarea lui bottom/left nu avea NICIUN efect vizual (bug găsit live, user 2026-08-23: „tot asa au ramas" după o modificare de poziție care ar fi trebuit să se vadă). */ position: absolute !important; top: auto !important; right: auto !important; transform: none !important; bottom: 1px !important; left: 1px !important; width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; object-fit: contain; pointer-events: none; z-index: 3; animation: rarityPulse 2s ease-in-out infinite; border: none !important; background: none !important; padding: 0 !important; } .inv-slot[data-rarity="uncommon"] .inv-slot-emblem, .inv-slot[data-rarity="uncommon"] .inv-slot-emblem-inline { animation-name: rarityPulseGreen; } .inv-slot[data-rarity="rare"] .inv-slot-emblem, .inv-slot[data-rarity="rare"] .inv-slot-emblem-inline { animation-name: rarityPulseBlue; } .inv-slot[data-rarity="epic"] .inv-slot-emblem, .inv-slot[data-rarity="epic"] .inv-slot-emblem-inline { animation-name: rarityPulseEpic; } .inv-slot[data-rarity="legendary"] .inv-slot-emblem, .inv-slot[data-rarity="legendary"] .inv-slot-emblem-inline { animation-name: rarityPulseLegendary; animation-duration: 1.5s; } /* Pulse diferit per raritate */ .inv-item[data-rarity="uncommon"] .inv-rarity-emblem { animation-name: rarityPulseGreen; } .inv-item[data-rarity="rare"] .inv-rarity-emblem { animation-name: rarityPulseBlue; } .inv-item[data-rarity="epic"] .inv-rarity-emblem { animation-name: rarityPulseEpic; } .inv-item[data-rarity="legendary"] .inv-rarity-emblem { animation-name: rarityPulseLegendary; animation-duration: 1.5s; } @keyframes rarityPulseGreen { 0%, 100% { filter: drop-shadow(0 0 3px rgba(74,222,128,0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px rgba(74,222,128,0.9)); transform: scale(1.08); } } @keyframes rarityPulseBlue { 0%, 100% { filter: drop-shadow(0 0 3px rgba(59,130,246,0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px rgba(59,130,246,0.9)); transform: scale(1.08); } } @keyframes rarityPulseEpic { 0%, 100% { filter: drop-shadow(0 0 3px rgba(168,85,247,0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 10px rgba(168,85,247,1)); transform: scale(1.1); } } @keyframes rarityPulseLegendary { 0%, 100% { filter: drop-shadow(0 0 4px rgba(220,38,38,0.5)); transform: scale(1); } 50% { filter: drop-shadow(0 0 12px rgba(220,38,38,1)) drop-shadow(0 0 20px rgba(255,100,50,0.6)); transform: scale(1.12); } } .inv-stat-icon { width: 21px !important; height: 21px !important; object-fit: contain; vertical-align: middle; display: inline-block; flex-shrink: 0; } .inv-item-stat-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 10px; font-weight: 600; color: #c8c8c8; text-align: right; line-height: 1; } .inv-item-stat-val { line-height: 1; } /* Card îngust (grid pe 3 coloane, zoom Android/telefon mic) — insigna de raritate+procent (jos-stânga, .inv-rarity-strip) și cea de bonus (jos-dreapta, .inv-item-footer) se ating/ suprapun când bonusul e o valoare mare (ex. „+9.620.001" pe un obiect legendar) — cele 2 lățimi combinate (~33px + ~51px) depășesc cu puțin lățimea cardului la 3 coloane pe un ecran îngust (bug găsit de user din captură, 2026-08-27). Aceeași treaptă fixă de mai sus (390px) — micșorăm textul/iconițele din ambele insigne, nu poziția lor (rămân în colțuri). */ @media (max-width: 390px) { .inv-item-stat-right { font-size: 9px; } .inv-item-footer .inv-stat-icon { width: 16px !important; height: 16px !important; } .inv-rarity-strip .inv-item-roll { font-size: 9px; } .inv-rarity-strip .inv-rarity-emblem { width: 20px; height: 20px; } } .inv-item-equipped-badge { position: absolute; top: 2px; right: 2px; background: #4ade80; color: #000; font-size: var(--text-xs); font-weight: 700; padding: 1px 3px; border-radius: 3px; } /* ── Tooltip obiect ── */ .inv-tooltip-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); } .inv-tooltip { background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); padding: 16px; position: relative; width: 280px; box-shadow: var(--tooltip-shadow); } .inv-tooltip--card { width: 320px; } .inv-item--tooltip { pointer-events: none; width: 160px; height: 160px; margin: 0 auto 12px; cursor: default; } .inv-item--tooltip .inv-item-img { max-width: 110px; height: 110px; } /* Tichet — pilula „×N" în colțul iconiței centrale (nu în colțul cardului), cerere user 2026-09-01. Imaginea (110px) e centrată absolut în cardul de 160px → colțul ei e la ~25px de margini. */ .inv-item--ticket .bar-card-qty { top: 22px; right: 20px; } /* Cardul din tooltip e pointer-events:none (doar afișaj) — butonul „i" trebuie să rămână clicabil. */ .inv-item--tooltip .bar-info-btn { pointer-events: auto; } /* Butonul „i" pe cardurile din lista Obiecte (tichete / Piatra Norocului) — colț stânga-jos (numele e sus pe aceste carduri), dar aceeași mărime ca în tab-ul Resurse (18px). */ .inv-items-grid .inv-item .bar-info-btn { top: auto; bottom: 5px; left: 5px; } .inv-tooltip-header { display: flex; gap: var(--gap-md); align-items: center; margin-bottom: var(--gap-md); } .inv-tooltip .inv-item-img { width: 110px; height: 110px; object-fit: contain; background: transparent; border: none; padding: 0; } .inv-tooltip-name { font-size: var(--text-base); font-weight: 700; color: #e8c97a; } .inv-tooltip-rarity { font-size: var(--text-xs); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; } .inv-tooltip-desc { font-size: var(--text-xs); color: #999; margin-bottom: 10px; line-height: 1.4; } .inv-tooltip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xs); margin-bottom: var(--gap-lg); } .inv-tooltip-stat { background: rgba(255,255,255,0.04); border-radius: 6px; padding: var(--gap-xs) var(--gap-sm); font-size: var(--text-xs); color: var(--color-text); display: flex; align-items: center; gap: var(--gap-xs); } .inv-tooltip-stat span { color: #4ade80; font-weight: 700; } .inv-tooltip-price { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-bottom: 8px; } .inv-tooltip-btns { display: flex; gap: var(--gap-md); justify-content: center; } /* Tab-uri acțiuni obiect */ .inv-action-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xs); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: var(--gap-sm); margin-bottom: var(--gap-sm); } .inv-action-tab--unequip { color: #f87171 !important; } .inv-action-tab--unequip:hover { background: rgba(239,68,68,0.1); } .inv-action-tab--upgrade { color: #a78bfa !important; } .inv-action-tab--upgrade:hover { background: rgba(167,139,250,0.1); } /* Buton confirmare din paneluri */ .inv-panel-confirm { width: 100%; padding: 9px; border-radius: 8px; border: none; cursor: pointer; font-size: var(--text-sm); transition: background 0.15s; } .inv-panel-confirm--equip { background: rgba(59,130,246,0.3); color: #60a5fa; } .inv-panel-confirm--equip:hover { background: rgba(59,130,246,0.5); } /* .inv-panel-confirm--sell → înlocuit cu .btn-game */ #invTabContent { padding-top: 4px; } /* Butoane acțiuni — iconuri pătrate (legacy, păstrate pentru compatibilitate) */ .inv-action-btn { width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); color: var(--color-text); font-size: var(--text-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s; } .inv-action-btn:hover { transform: scale(1.08); } .inv-action-btn--equip { background: rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.5); color: #60a5fa; } .inv-action-btn--equip:hover { background: rgba(59,130,246,0.35); } .inv-action-btn--unequip { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); color: #f87171; } .inv-action-btn--unequip:hover { background: rgba(239,68,68,0.35); } .inv-action-btn--sell { background: rgba(251,146,60,0.2); border-color: rgba(251,146,60,0.5); color: #fb923c; } .inv-action-btn--sell:hover { background: rgba(251,146,60,0.35); } .inv-action-btn--auction { background: rgba(168,85,247,0.2); border-color: rgba(168,85,247,0.5); color: #c084fc; } .inv-action-btn--auction:hover { background: rgba(168,85,247,0.35); } .inv-btn { flex: 1; padding: 7px; border: none; border-radius: 8px; font-size: var(--text-xs); font-weight: 700; cursor: pointer; transition: all 0.15s; } .inv-btn--equip { background: #3b82f6; color: #fff; } .inv-btn--equip:hover { background: #2563eb; } .inv-btn--unequip { background: #6b4a1e; color: #e8c97a; border: 1px solid #8b6230; } .inv-btn--unequip:hover { background: #8b6230; } .inv-btn--sell { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); } .inv-btn--sell:hover { background: rgba(239,68,68,0.35); } .inv-btn--cancel { background: rgba(255,255,255,0.06); color: #999; } .inv-btn--cancel:hover { background: rgba(255,255,255,0.12); } /* Tooltip folosind direct inv-item ca wrapper unic */ .inv-tooltip-wrap { cursor: default !important; width: 180px !important; padding: 14px 12px 12px !important; gap: 8px !important; } .inv-tooltip-wrap-actions { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: var(--gap-md); margin-top: var(--gap-xs); } .inv-tooltip-wrap .inv-slot-select, .inv-tooltip-wrap .inv-tooltip-btns, .inv-tooltip-wrap .inv-slot-btn, .inv-tooltip-wrap .inv-btn { position: relative; z-index: 1; pointer-events: all; } /* Header unificat pentru ferestrele modale mici (Infracțiuni, livrări Port/Aeroport etc.) — identic vizual cu .inv-tooltip-header-bar (linii decorative + titlu auriu + buton X rotund), dar cu nume neutru (nu specific inventarului) și border-radius de 12px (cât au box-urile acestor ferestre — .inv-tooltip-header-bar folosește 6px, cât are containerul lui) — uniformizare cerută de user 2026-07-11, comparând „ACȚIUNI OBIECT" vs. „COMITEREA INFRACȚIUNII"/„CONTRABAND" */ .modal-header-bar { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 14px; background: linear-gradient(135deg, rgba(40,25,5,0.99), rgba(25,15,3,0.99)); border-bottom: 1px solid rgba(180,130,20,0.4); border-radius: 12px 12px 0 0; height: 42px; } .modal-header-bar::before, .modal-header-bar::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,150,0,0.6)); margin: 0 8px; } .modal-header-bar::after { background: linear-gradient(90deg, rgba(201,150,0,0.6), transparent); } .modal-header-bar span { font-size: var(--text-sm); font-weight: 700; color: #e8c97a; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; text-shadow: 0 0 8px rgba(201,150,0,0.5); } .modal-header-close { position: absolute; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--color-text-muted); font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .modal-header-close:hover { background: rgba(255,255,255,0.16); color: #fff; } /* Header tooltip */ .inv-tooltip-header-bar { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 14px; margin: -16px -16px 12px; background: linear-gradient(135deg, rgba(40,25,5,0.99), rgba(25,15,3,0.99)); border-bottom: 1px solid rgba(180,130,20,0.4); /* Trebuie să fie EXACT --tooltip-radius (6px), nu o valoare hardcodată diferită — altfel colțul rotunjit al headerului nu se aliniază cu cel al containerului .inv-tooltip, lăsând o dungă subțire din bordura aurie a containerului vizibilă la colțuri (bug găsit de user 2026-07-11, header-ul folosea 14px hardcodat în timp ce containerul are doar 6px) */ border-radius: var(--tooltip-radius) var(--tooltip-radius) 0 0; height: 42px; } /* Linii decorative laterale */ .inv-tooltip-header-bar::before, .inv-tooltip-header-bar::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,150,0,0.6)); margin: 0 8px; } .inv-tooltip-header-bar::after { background: linear-gradient(90deg, rgba(201,150,0,0.6), transparent); } .inv-tooltip-header-bar span { font-size: var(--text-sm); font-weight: 700; color: #e8c97a; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; text-shadow: 0 0 8px rgba(201,150,0,0.5); } .inv-tooltip-header-bar .inv-tooltip-close { position: absolute; right: 10px; } /* Buton X */ .inv-tooltip-close { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--color-text-muted); font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; line-height: 1; flex-shrink: 0; } .inv-tooltip-close:hover { background: rgba(255,255,255,0.18); color: #fff; } .chest-rewards-section { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } .chest-rewards-title { text-align: center; font-size: 12px; color: var(--color-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .chest-reward-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); padding: 5px 10px; } /* Buton Echipează (slot unic) — auriu, aceeași paletă ca .btn-game, nu verde generic (cerere user 2026-07-22, aceeași corecție ca la butoanele „Activează" din Băuturi) */ .inv-slot-btn--equip { background: linear-gradient(135deg, #c8a84a, #f0d060) !important; color: #1a1008 !important; border-color: transparent !important; font-weight: 700 !important; font-size: var(--text-sm) !important; } /* Slot selector pentru equip */ .inv-slot-select { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-bottom: var(--gap-md); } .inv-slot-select .inv-slot-btn { flex: 1; min-width: 80px; } .inv-slot-btn { padding: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(139,98,48,0.3); border-radius: 7px; color: var(--color-text); font-size: var(--text-xs); cursor: pointer; transition: all 0.15s; } .inv-slot-btn:hover { background: rgba(139,98,48,0.2); border-color: #c8924a; color: #e8c97a; } .inv-slot-btn.occupied { border-color: #4ade80; color: #4ade80; } /* Magazie */ .inv-storage-grid { display: flex; flex-direction: column; gap: var(--gap-md); padding: var(--gap-xs); } .inv-storage-item { display: flex; align-items: center; gap: var(--gap-md); background: rgba(255,255,255,0.04); border: 1px solid rgba(139,98,48,0.2); border-radius: 8px; padding: var(--gap-md); } .inv-storage-icon { font-size: var(--text-lg); } .inv-storage-info { flex: 1; } .inv-storage-name { font-size: var(--text-base); font-weight: 600; color: #e8c97a; } .inv-storage-qty { font-size: var(--text-sm); color: var(--color-text-muted); } /* Băuturi în Magazie — stackuri */ .inv-drinks-section { margin-top: var(--gap-xs); } .inv-drinks-section-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.8px; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 8px; padding-left: 2px; } .inv-drinks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); } .inv-drink-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: var(--gap-md) var(--gap-sm) var(--gap-md); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .inv-drink-stack:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); } .inv-drink-stack.active-effect { border-color: rgba(96,165,250,0.5); background: rgba(96,165,250,0.07); } .inv-drink-stack-img { width: 44px; height: 44px; object-fit: contain; } .inv-drink-stack-qty { position: absolute; top: 5px; right: 7px; font-size: var(--text-xs); font-weight: 700; color: #fff; background: rgba(0,0,0,0.6); border-radius: 8px; padding: 1px 5px; } .inv-drink-stack-name { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-strong); text-align: center; } .inv-drink-stack-stat { font-size: var(--text-xs); color: #94a3b8; text-align: center; } .inv-drink-stack-btn { width: 100%; padding: 4px 0; font-size: var(--text-xs); font-weight: 700; border-radius: 6px; border: none; cursor: pointer; letter-spacing: 0.3px; transition: opacity 0.15s; } .inv-drink-stack-btn:hover { opacity: 0.85; } /* Auriu (aceeași paletă ca .btn-game), nu verde generic — verdele nu avea nicio legătură cu restul temei jocului (cerere user 2026-07-22) */ .inv-drink-stack-btn--activate { background: linear-gradient(135deg, #c8a84a, #f0d060); color: #1a1008; } .inv-drink-stack-btn--active { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); cursor: default; } .inv-drink-stack-timer { font-size: var(--text-xs); color: #60a5fa; font-weight: 600; } /* ── AUCTION ─────────────────────────────────────────────── */ /* Buton licitație în tooltip inventar */ .inv-btn--auction { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; } /* Tabs */ /* Auction tabs */ .auction-tabs { display: flex; justify-content: center; align-items: center; gap: var(--gap-xs); flex-shrink: 0; border-bottom: 2px solid rgba(255,255,255,0.07); } /* .auction-tab — stilul vine din regulile universale */ /* .auction-tabs e sibling cu #auctionBody (NU e conținut în interiorul lui, spre deosebire de Bandă/Inventar), deci padding-top implicit de 6px al .dock-panel-body se aduna peste margin-bottom:12px deja pus pe bara de tab-uri (regula „Tab-uri universale") — 18-24px în loc de cei 12px standard din restul jocului. Eliminat aici, scoped. */ #auctionBody { padding-top: 0; } /* ── Licitații Aur ── */ .gold-auction-wrap { display:flex; flex-direction:column; gap:0; padding:0; } #goldAuctionList { display:flex; flex-direction:column; gap:var(--gap-md); margin-top:var(--gap-md); } .gold-bids-left { display: flex; align-items: center; justify-content: center; gap: var(--gap-sm); /* Fără margin-top — caseta de info trebuie lipită de bara de taburi la fel ca pe tabul „Obiecte" (unde .ui-alert e copil direct al containerului, fără wrapper cu margine). Cerere user 2026-09-01: „badge-ul de la aur e mai jos ca cel de la obiecte". */ margin-top: 0; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--gap-sm); } .gold-bid-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .gold-bid-dot.active { background: #d4b96a; box-shadow: 0 0 5px rgba(212,185,106,0.6); } .gold-bid-dot.used { background: rgba(255,255,255,0.1); } .gold-bid-dot.vip-dot.active { background: linear-gradient(135deg,#ffd700,#b8860b); box-shadow: 0 0 7px rgba(255,215,0,0.7); animation: vip-pulse 2s ease-in-out infinite; } .gold-bid-dot.vip-dot.used { background: rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.3); } .gold-bid-dot.dimmed { opacity: 0.3; } /* Panoul „Vinde aur" — redesign 2026-08-28 (varianta B aleasă de user): card subtil pinfo-card (fără bară de titlu) + notă de reguli pliabilă (renderInfoBox). Cele 3 câmpuri: etichetă + casetă pe ACELAȘI rând, toate 3 aliniate identic (eticheta = coloană fixă la dreapta, caseta umple restul) — cerere user 2026-08-28: sumele nu sunt mari, deci nu e nevoie de câmp lat. „Durată" n-are iconiță (nu există asset de ceas) dar caseta e la fel ca la celelalte. */ .gold-create-card { display:flex; flex-direction:column; gap:var(--gap-sm); } .gold-create-row { display:flex; align-items:center; gap:var(--gap-md); } .gold-create-row > .ui-field-label { width:96px; flex-shrink:0; text-align:right; margin:0; } /* Caseta = chenarul vizibil (bg + bordură), identică la toate 3 rândurile. Iconița (când există) stă ÎN interiorul casetei, deci marginile casetelor se aliniază perfect indiferent dacă rândul are sau nu iconiță. Input-ul dinăuntru e transparent, fără chenar propriu. */ .gold-create-field { flex:1; display:flex; align-items:center; gap:var(--gap-sm); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 7px 9px; transition: border-color 0.15s, background 0.15s; } .gold-create-field:focus-within { border-color: rgba(180,130,20,0.5); background: rgba(255,255,255,0.08); } .gold-create-icon { width:18px; height:18px; object-fit:contain; flex-shrink:0; } .gold-create-input { flex:1 1 auto; width:100%; min-width:0; background:transparent; border:none; border-radius:0; padding:0; } .gold-create-input:focus { background:transparent; } .gold-auction-card { background: linear-gradient(160deg, rgba(20,15,5,0.8), rgba(30,22,8,0.9)); border:1px solid rgba(212,185,106,0.25); border-radius:10px; padding:var(--gap-md) var(--gap-lg); display:flex; flex-direction:column; gap:var(--gap-sm); } .gold-auction-top { display:flex; justify-content:space-between; align-items:center; } .gold-auction-amount { font-size:var(--text-base); font-weight:700; color:#d4b96a; } .gold-auction-timer { font-size:var(--text-xs); color:#94a3b8; font-variant-numeric:tabular-nums; } .gold-auction-seller { font-size:var(--text-xs); color:var(--color-text-muted); } .gold-auction-price { font-size:var(--text-base); font-weight:700; color:#f5c542; } .gold-auction-own { font-size:var(--text-xs); color:var(--color-text-muted); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:3px 8px; text-align:center; text-transform:uppercase; letter-spacing:0.5px; } /* Grid pătrate licitații */ .auction-sq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); /* FĂRĂ padding propriu — .dock-panel-body (#auctionBody) are deja padding:16px pe toate laturile; padding-ul de aici (var(--gap-lg), 14px) se aduna peste, dând 30px reali de la marginea panoului până la card (bug găsit 2026-07-25, aceeași greșeală de „dublare" ca la steagul de nivel al clădirilor, sesiunea 80). Doar margin-top păstrat (nu padding pe toate laturile) — fără el, cardurile rămâneau lipite direct de alerta „Limita ta de licitații" de deasupra (cerere user 2026-07-25); stânga/dreapta/jos rămân corect la cei 16px moșteniți. */ margin-top: var(--gap-lg); } .auction-sq-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); padding: var(--gap-md) var(--gap-sm); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; position: relative; /* container-type:inline-size — cardul e într-un grid pe 2 coloane, într-un .dock-panel la 99vw pe mobil (deci lățimea cardului variază cu ecranul), dar iconița/insignele din interior erau la px ficși — aceeași clasă de bug ca la Inventar/HUD, reparată identic (raport audit zoom Android, 2026-08-27). Bază: ~160px content-box la 375px viewport (99vw panou − padding panou − gol grid, /2 coloane − border card) = 100cqw. */ container-type: inline-size; } /* Rarity pe card licitație */ .auction-sq-card[data-rarity="common"] { border: 1px solid rgba(156,163,175,0.3); background: radial-gradient(ellipse at 50% 70%, rgba(156,163,175,0.12) 0%, rgba(10,10,15,0.85) 80%); } .auction-sq-card[data-rarity="uncommon"] { border: 2px solid rgba(74,222,128,0.55); background: radial-gradient(ellipse at 50% 70%, rgba(74,222,128,0.22) 0%, rgba(5,20,10,0.9) 80%); } .auction-sq-card[data-rarity="rare"] { border: 2px solid rgba(59,130,246,0.6); background: radial-gradient(ellipse at 50% 70%, rgba(59,130,246,0.22) 0%, rgba(5,10,25,0.9) 80%); } .auction-sq-card[data-rarity="epic"] { border: 2px solid rgba(168,85,247,0.6); background: radial-gradient(ellipse at 50% 70%, rgba(168,85,247,0.22) 0%, rgba(15,5,25,0.9) 80%); } .auction-sq-card[data-rarity="legendary"] { border: 2px solid rgba(220,38,38,0.65); background: radial-gradient(ellipse at 50% 70%, rgba(220,38,38,0.25) 0%, rgba(20,10,0,0.9) 80%); } .auction-sq-card[data-rarity="server"] { border: 2px solid rgba(251,191,36,0.7); background: radial-gradient(ellipse at 50% 70%, rgba(251,191,36,0.18) 0%, rgba(20,15,0,0.92) 80%); animation: serverCardPulse 3s ease-in-out infinite; } /* Raritate 'special' (Cutia misterioasă + Tichete VIP/Battle Pass) — temă aurie, fără mov. Mirror .inv-item[data-rarity="special"]. */ .auction-sq-card[data-rarity="special"] { border: 2px solid rgba(224,184,74,0.6); background: radial-gradient(ellipse at 50% 70%, rgba(224,184,74,0.2) 0%, rgba(25,18,5,0.9) 80%); } @keyframes serverCardPulse { 0%,100% { box-shadow: 0 0 8px rgba(251,191,36,0.3); } 50% { box-shadow: 0 0 18px rgba(251,191,36,0.6); } } .auction-server-badge { position: absolute; top: 6px; right: 6px; background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a0f00; font-size: 9px; font-weight: 800 !important; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; z-index: 2; } .auction-sq-img { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; } .auction-sq-rarity-row { position: absolute; top: 25px; left: 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .auction-sq-type-flag { position: absolute; top: 25px; right: 0; background: linear-gradient(135deg, rgba(30,20,10,0.9) 0%, rgba(60,40,10,0.85) 100%); border: 1px solid rgba(212,185,106,0.35); border-right: none; border-radius: 4px 0 0 4px; color: #d4b96a; font-size: var(--text-xs); font-weight: 700; padding: 3px 7px 3px 6px; letter-spacing: 0.3px; text-transform: uppercase; } /* cqw pe elementele fixe ale cardului (bază 160px content-box = 100cqw, vezi comentariul de la .auction-sq-card) — imaginea și insignele nu se micșorau odată cu cardul la zoom Android. */ .auction-sq-card .auction-sq-img { width: 50cqw; height: 50cqw; } .auction-sq-card .auction-sq-type-flag { top: 15.63cqw; padding: 1.88cqw 4.38cqw 1.88cqw 3.75cqw; } .auction-sq-card .auction-sq-level-badge { top: 39.38cqw; right: 1.25cqw; } .auction-sq-card .rarity-badge-icon, .auction-sq-card .auction-sq-rarity-icon { width: 26.25cqw; height: 26.25cqw; } .auction-sq-card .auction-server-badge { top: 3.75cqw; right: 3.75cqw; font-size: 5.63cqw; padding: 1.25cqw 3.75cqw; } /* Bulină de set — cardul de licitație nu are o "cutie" separată doar pentru imagine (colțul jos-dreapta al cardului e ocupat de prețul/timer-ul licitației), deci o poziționăm chiar sub badge-ul de tip (ex. "PANTALONI"), pe dreapta (cerere user 2026-07-16 — rândul de raritate a coborât la același nivel cu badge-ul de tip, deci stânga nu mai e liberă) */ .auction-sq-card .inv-set-dot { bottom: auto; top: 53px; left: auto; right: 8px; } /* Nivel obiect — sub bulina de set, aceeași coloană dreapta */ .auction-sq-level-badge { top: 63px; right: 2px; } /* ── Rarity badge — clasă generică reutilizabilă ── */ .rarity-badge { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .rarity-badge-icon{ width: 42px; height: 42px; object-fit: contain; animation: rarityPulse 2s ease-in-out infinite; } .rarity-badge-pct { font-size: var(--text-xs); font-weight: 800; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.9); } [data-rarity="uncommon"] .rarity-badge-icon { animation-name: rarityPulseGreen; } [data-rarity="rare"] .rarity-badge-icon { animation-name: rarityPulseBlue; } [data-rarity="epic"] .rarity-badge-icon { animation-name: rarityPulseEpic; } [data-rarity="legendary"] .rarity-badge-icon { animation-name: rarityPulseLegendary; animation-duration: 1.5s; } /* Alias pentru compatibilitate inversă */ .auction-sq-rarity-row { position: absolute; top: 25px; left: 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .auction-sq-rarity-icon { width: 42px; height: 42px; object-fit: contain; animation: rarityPulse 2s ease-in-out infinite; } /* Cardul mașinii din Curse — icon+text de raritate la aceeași dimensiune ca în inventar (26px/10px, cerere user 2026-07-24) — Licitația rămâne la 42px/12px */ #rtCarSection .auction-sq-rarity-icon { width: 26px; height: 26px; } #rtCarSection .auction-sq-rarity-pct { font-size: 10px; } .auction-sq-card[data-rarity="uncommon"] .auction-sq-rarity-icon { animation-name: rarityPulseGreen; } .auction-sq-card[data-rarity="rare"] .auction-sq-rarity-icon { animation-name: rarityPulseBlue; } .auction-sq-card[data-rarity="epic"] .auction-sq-rarity-icon { animation-name: rarityPulseEpic; } .auction-sq-card[data-rarity="legendary"] .auction-sq-rarity-icon { animation-name: rarityPulseLegendary; animation-duration: 1.5s; } .auction-sq-rarity-pct { font-size: var(--text-xs); font-weight: 800; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.9); } .auction-sq-name { font-size: var(--text-sm); font-weight: 700; text-align: center; color: var(--color-text); } /* Descriere obiect sub imagine (ex. tichete) — la fel ca linia din Magazin (cerere user 2026-09-01) */ .auction-sq-desc { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; line-height: 1.35; margin: 2px 4px 0; } .auction-sq-card[data-rarity="common"] .auction-sq-name { color: #9ca3af; } .auction-sq-card[data-rarity="uncommon"] .auction-sq-name { color: #4ade80; } .auction-sq-card[data-rarity="rare"] .auction-sq-name { color: #60a5fa; } .auction-sq-card[data-rarity="epic"] .auction-sq-name { color: #c084fc; } .auction-sq-card[data-rarity="legendary"] .auction-sq-name { color: #dc2626; } .auction-sq-card[data-rarity="special"] .auction-sq-name { color: #e8c97a; } .auction-sq-stats { font-size: var(--text-sm); color: #94a3b8; text-align: center; } .auction-sq-stats .inv-stat-icon { width: 26px !important; height: 26px !important; } /* Valoarea finală de pe cardul mașinii din Curse — ancorată la 4px de marginea de jos a casetei (cerere user 2026-07-24), nu în flux normal ca restul cardului de licitație. `bottom` e relativ la marginea de PADDING a cardului (containing block pt. absolute), nu la marginea vizibilă de bordură — bordura cardului diferă pe raritate (1px comun, 2px restul), deci offset-ul trebuie ajustat invers (4px - lățimea bordurii) ca gap-ul vizual real să fie mereu exact 4px, indiferent de raritatea mașinii. */ .rt-car-stat-final { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: var(--text-sm); color: #c8c8c8; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .auction-sq-card[data-rarity="common"] .rt-car-stat-final { bottom: 3px; } .auction-sq-seller { font-size: var(--text-xs); color: #d4b96a; text-align: center; } .auction-sq-dial { width: 100%; background: linear-gradient(160deg, rgba(0,0,0,0.55) 0%, rgba(20,20,30,0.75) 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: var(--gap-sm) var(--gap-md); display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.4); } .auction-sq-dial-sep { width: 70%; height: 1px; background: rgba(255,255,255,0.08); } .auction-sq-price { font-size: var(--text-sm); font-weight: 700; color: #f5c542; } .auction-sq-my-bid { font-size: var(--text-xs); font-weight: 700; color: #4ade80; background: transparent; border: 1px solid #4ade80; border-radius: 4px; padding: 0 5px; vertical-align: middle; white-space: nowrap; } .auction-sq-timer { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } .auction-sq-own-badge { width: 100%; margin-top: 4px; padding: 5px 0; text-align: center; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .auction-sq-bid-form { display: flex; flex-direction: column; gap: var(--gap-sm); width: 100%; margin-top: var(--gap-xs); } .auction-sq-bid-input { width: 100%; box-sizing: border-box; padding: 7px 6px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 7px; color: var(--color-text-strong); font-size: var(--text-base); font-weight: 600; text-align: center; outline: none; } .auction-sq-bid-input::-webkit-outer-spin-button, .auction-sq-bid-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .auction-sq-bid-input[type=number] { -moz-appearance: textfield; } /* .auction-sq-bid-confirm → înlocuit cu .btn-game */ /* Modal creare licitație */ .auction-create-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1500; } .auction-create-modal { background: #0d0d1e; border: 1px solid rgba(124,58,237,0.4); border-radius: 16px; width: 320px; max-width: 94vw; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.7); } .auction-create-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: var(--text-base); font-weight: 700; color: #e8c97a; } .auction-create-header button { background: none; border: none; color: var(--color-text-muted); font-size: var(--text-lg); cursor: pointer; } .auction-create-header button:hover { color: #aaa; } .auction-create-body { padding: 18px; display: flex; flex-direction: column; gap: var(--gap-lg); } .auction-create-item-name { font-size: var(--text-md); font-weight: 700; color: var(--color-text-strong); text-align: center; } .auction-create-field { display: flex; flex-direction: column; gap: var(--gap-sm); } .auction-create-field label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } /* .auction-create-input — moștenește din .ui-input */ .auction-create-input { font-weight: 700; } .auction-hours-row { display: flex; align-items: center; gap: var(--gap-sm); justify-content: center; } .auction-hours-btn { padding: 6px 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #aaa; font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: background 0.12s; } .auction-hours-btn:hover { background: rgba(255,255,255,0.13); color: #fff; } .auction-hours-val { font-size: var(--text-lg); font-weight: 800; color: #e8c97a; min-width: 40px; text-align: center; } .auction-create-note { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; padding: 8px 0 6px; } .auction-inline-header { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); padding-bottom: var(--gap-lg); border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: var(--gap-md); } .auction-inline-img-wrap { width: 72px; height: 72px; border-radius: 12px; border: 2px solid; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); overflow: hidden; } .auction-inline-img { width: 68px; height: 68px; object-fit: contain; } .auction-inline-item-name { font-size: var(--text-md); font-weight: 700; text-align: center; } .auction-inline-rarity { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); } .auction-inline-stats { font-size: var(--text-xs); color: #94a3b8; text-align: center; } .auction-form-layout { display: flex; gap: var(--gap-lg); align-items: flex-start; margin-bottom: var(--gap-lg); } .auction-form-right { flex: 1; display: flex; flex-direction: column; gap: var(--gap-md); } /* .auction-form-submit → înlocuit cu .btn-game */ .sell-expand { margin-top: var(--gap-md); padding-top: var(--gap-md); border-top: 1px solid rgba(251,146,60,0.3); display: flex; flex-direction: column; gap: var(--gap-md); } #equipExpand { border-top-color: rgba(74,222,128,0.3); } .inv-slot-expand-btn { display: flex; justify-content: flex-start; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all 0.15s; text-align: left; } /* Numărul poziției (1, 2, 3...) — înlocuiește eticheta repetitivă („Armă"/„Animal", identică pe fiecare rând, deci inutilă ca să deosebești pozițiile) — aliniat la stânga, la fel ca „Liber"/textul de înlocuire de alături (cerere user 2026-07-22) */ .inv-slot-expand-num { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; } .inv-slot-expand-btn:hover { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.5); color: #fff; } .inv-slot-expand-btn.occupied { border-color: rgba(251,146,60,0.4); } .inv-slot-expand-btn.occupied:hover { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.7); } .inv-slot-expand-occ { font-size: var(--text-xs); color: #fb923c; font-weight: 500; } .auction-expand { margin-top: var(--gap-md); padding-top: var(--gap-md); border-top: 1px solid rgba(168,85,247,0.25); display: flex; flex-direction: column; gap: var(--gap-sm); } .auction-inline-field { display: flex; flex-direction: row; align-items: center; gap: var(--gap-md); padding: var(--gap-sm) 0; } .auction-inline-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.3px; width: 50%; line-height: 1.4; } .auction-create-input { width: 50% !important; flex-shrink: 0; box-sizing: border-box; -moz-appearance: textfield; } .auction-create-input::-webkit-outer-spin-button, .auction-create-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .auction-create-btn { width: 100%; padding: 11px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; border: none; border-radius: 10px; font-size: var(--text-base); font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .auction-create-btn:hover { opacity: 0.87; } .auction-create-btn:disabled { opacity: 0.5; cursor: default; } /* ── Închisoare ──────────────────────────────────────────────── */ /* Fără margin sus/lateral — panoul (Spital/Închisoare/Centru militar, unde e reutilizată) are deja padding standard 16px lateral / 12px sus pe body; cele 14px sus + 16px lateral de-aici se ADUNAU peste acela (colaps de margine prin părinți fără padding), dublând insetul — bug găsit 2026-07-10. Rămâne doar spațiul de jos, față de următoarea casetă. */ .prison-lore { margin: 0 0 10px; font-size: var(--text-sm); color: var(--color-text); line-height: 1.6; } .prison-list { padding: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; } .prison-empty { text-align: center; padding: 30px; color: var(--color-muted); font-size: var(--text-sm); } .prison-inmate { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 8px 10px; width: 100%; box-sizing: border-box; } .prison-inmate-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #6b7280; flex-shrink: 0; } .prison-inmate-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .prison-inmate-name { font-size: var(--text-sm); color: var(--color-text); } .prison-inmate-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .prison-inmate-gang { font-size: 11px; color: var(--color-muted); } .prison-inmate-time { font-size: var(--text-xs); color: #f87171; } .prison-escape-btn { font-size: 12px; padding: 5px 10px; flex-shrink: 0; white-space: nowrap; } /* HUD — iconiță imunitate. Acum identică pe desktop ȘI mobil (cerere user 2026-08-18: „tot sub exp, ca pe desktop") — rămâne în fluxul normal (sub XP, ordinea din DOM — .hud-immunity-wrap e frate cu .hud-xp-wrap în .hud-avatar-wrap, care e flex-direction:column). Înainte mobilul avea o poziționare absolută separată (lângă rândul de Aur, din motive de spațiu pe ecran mic, sesiuni anterioare) — eliminată complet, ambele breakpoint-uri folosesc acum poziția din flux. */ .hud-immunity-wrap { display: flex; align-items: center; justify-content: center; width: fit-content; gap: 4px; /* position:relative (nu static, implicitul) — .hud-immunity-tooltip (mai jos) e position:absolute și are nevoie de un strămoș poziționat ca reper. */ position: relative; } .hud-immunity-icon { width: 24px; height: 24px; object-fit: contain; cursor: default; /* Mutat puțin spre stânga, ca să facă loc contorului compact de lângă el — aplicat peste tot (desktop ȘI mobil, cerere user 2026-08-18: „fix la fel ca pe desktop"), nu doar desktop ca inițial. */ margin-left: -4px; } .hud-immunity-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; transform: none; background: var(--tooltip-bg, #1a1208); border: 1px solid var(--color-accent-dim, #8b6914); border-radius: var(--radius-md); padding: 4px 10px; font-size: var(--text-xs); font-weight: 700; color: #4ade80; white-space: nowrap; pointer-events: none; z-index: 999; } .hud-immunity-wrap:hover .hud-immunity-tooltip { display: block; } /* Contor compact permanent lângă icon — acum identic pe desktop ȘI mobil (cerere user 2026-08-18: „fix la fel ca pe desktop"). Înainte mobilul arăta timpul printr-o variantă veche, permanentă, a .hud-immunity-tooltip (format „Xh MMm") — înlocuită complet de acest contor unic; .hud-immunity-tooltip a rămas doar ca tooltip clasic pe hover (irelevant pe touch, unde efectiv nu mai apare niciodată — comportament identic cu desktop-ul, unde oricum se vede rar). */ .hud-immunity-timer { font-size: var(--text-xs); font-weight: 700; color: #4ade80; white-space: nowrap; } /* Iconița imunitate în carduri jucători */ .immunity-icon-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; } .player-card-immunity-icon { width: 18px; height: 18px; object-fit: contain; display: block; } .immunity-icon-tooltip { display: none; position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: #1a1208; border: 1px solid #8b6914; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; color: #4ade80; white-space: nowrap; pointer-events: none; z-index: 9999; } .immunity-icon-wrap:hover .immunity-icon-tooltip { display: block; } /* Variantă permanent vizibilă (immunityIconHtml(untilTs, true)) — aceeași casetă (fundal+bordură+ text), doar scoasă din poziționarea absolută/ascunsă-pe-hover și pusă static, lângă icon (cerere user 2026-07-25 — vrea explicit conturul/stilul tooltip-ului păstrat, nu text simplu). Folosită doar la lista de membri ai bandei — vechea variantă pe hover rămâne neschimbată peste tot altundeva (.immunity-icon-tooltip, fără acest modificator). */ .immunity-icon-wrap--inline { gap: 4px; } .immunity-icon-tooltip--static { display: block; position: static; transform: none; } /* Specificitate — „.gang-member-info span" (element+clasă) bate culoarea verde de bază a tooltip-ului (doar-clasă); suprascriere țintită, nu ating regula generală (afectează și alte span-uri din listă — oraș, personaj etc.). */ .gang-member-info .immunity-icon-tooltip--static { color: #4ade80; } /* Rândul de bandă randează acum formatul compact din HUD (HH:MM/MMm/SSs, fără etichetă „Imun:") — chenarul/fundalul vechi al variantei statice, păstrat inițial doar pe desktop (cerere 2026-07-25), a fost eliminat complet peste tot (cerere user 2026-08-20: „icon xx:xx atata", extinsă ulterior și pe desktop). */ .gang-member-info .immunity-icon-tooltip--static { background: none; border: none; padding: 0; border-radius: 0; } /* ── Lockdown Overlay (Închisoare / Spital) ─────────────────── */ /* Overlay lockdown acoperă DOAR harta (z-index sub dock=500, sub chat=600) */ .lockdown-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); pointer-events: auto; } .lockdown-modal { pointer-events: auto; background: linear-gradient(160deg, #1a1208, #0f0a04); border: 2px solid #7c5c1a; border-radius: var(--radius-lg); padding: 36px 40px; text-align: center; max-width: 340px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,0.7); display: flex; flex-direction: column; align-items: center; gap: 12px; } .lockdown-icon { width: 90px; height: 90px; object-fit: contain; opacity: 0.9; } .lockdown-title { font-size: var(--text-lg); color: var(--color-accent); font-weight: 700; } .lockdown-subtitle { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; } .lockdown-timer { font-size: 42px; font-weight: 700; color: #f87171; letter-spacing: 4px; font-variant-numeric: tabular-nums; } .lockdown-release { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,210,80,0.15); border-radius: var(--radius-md); padding: 10px 16px; width: 100%; } .lockdown-release-label { font-size: var(--text-xs); color: var(--color-muted); } .lockdown-release-cost { font-size: var(--text-md); font-weight: 700; color: var(--color-accent); } .lockdown-release-btn { width: 100%; } .lockdown-hint { font-size: var(--text-xs); color: var(--color-muted); border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; width: 100%; } .lockdown-quick-links { display: flex; gap: 8px; justify-content: center; margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; width: 100%; } .lockdown-ql-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--text-xs); font-family: var(--font); padding: 5px 12px; cursor: pointer; text-decoration: none; transition: background 0.2s; } .lockdown-ql-btn:hover { background: rgba(255,255,255,0.12); color: var(--color-text); } /* ── Modal Transfer Bani ───────────────────────────────────── */ .transfer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9000; display: flex; align-items: center; justify-content: center; } .transfer-modal { background: #1a1208; border: 1px solid #8b6914; border-radius: 14px; padding: 24px 20px 20px; width: 320px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.7); } /* Fereastra de Transfer folosește header-ul unificat (.modal-header-bar, ca la ACȚIUNI OBIECT / livrări) în loc de titlul + butonul „Închide" din .transfer-modal — necesită padding 0 și border-radius 12px (identic cu .modal-header-bar) ca headerul flush să nu iasă din colțurile rotunjite ale containerului. Fereastra de Alianță rămâne pe vechiul design (.transfer-modal-title/.transfer-close-btn), neatinsă. */ #transferModalBox { padding: 0; gap: 0; border-radius: 12px; overflow: hidden; } .transfer-modal-title { font-size: var(--text-md); font-weight: 700; color: var(--color-accent); text-align: center; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; } .transfer-preview { background: rgba(255,255,255,0.04); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; min-height: 0; } .transfer-preview:empty { display: none; } .transfer-preview-row { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); } .transfer-close-btn { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; border-radius: var(--radius-md); padding: 8px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; width: 100%; } .transfer-close-btn:hover { opacity: 0.8; } .pp-immunity-block { display: flex; align-items: center; gap: 10px; background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.2); border-radius: var(--radius-md); padding: 8px 12px; margin-top: 6px; } .pp-immunity-badge { font-size: 12px; color: var(--color-muted); background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.2); border-radius: var(--radius-sm); padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pp-action-grid--immune { justify-content: center; align-items: center; min-height: 52px; gap: 8px; flex-wrap: wrap; /* Fade+slide O SINGURĂ DATĂ la deschiderea panoului (nu buclă) — cerere user 2026-09-04, acoperă toate stările din acest bloc (prieten/coleg de bandă/aliat/imunitate/interzis etc.). */ animation: pp-fade-in-up 0.4s ease-out; } @keyframes pp-fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pp-rel-icons-row { display: flex; justify-content: center; gap: 10px; margin-top: 8px; } .pp-rel-icons-col { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; } .pp-rel-icon-lg { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; } .pp-rel-icon-inline { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-left: 4px; } .pp-rel-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: default; } .pp-rel-icon img { width: 32px; height: 32px; object-fit: contain; } .pp-rel-badge { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; white-space: nowrap; } .pp-rel-badge--gang { background: rgba(59,111,212,0.15); border: 1px solid rgba(59,111,212,0.5); color: #7eb8ff; } .pp-rel-badge--friend { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.4); color: #4ade80; } .pp-immunity-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .pp-immunity-text { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; } /* Fără margin sus/lateral — dublează padding-ul standard al panoului (aceeași cauză ca .prison-lore/.police-lore, bug găsit 2026-07-10). */ .police-buy-count-alert { margin: 0 0 12px; } /* Fără margin sus/lateral — panoul Poliție are deja padding standard 16px lateral / 12px sus pe body; cele 10px sus + 16px lateral de-aici se adunau peste acela, dublând insetul (bug găsit 2026-07-10, aceeași familie ca .prison-lore). */ .police-lore { margin: 0; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.6; } .police-lore-warn { color: #f87171; font-weight: 700; } .police-timer-wrap, .police-inactive { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 12px; } .police-immunity-icon { width: 56px; height: 56px; object-fit: contain; animation: policeSmokeGlow 3s ease-in-out infinite; } .police-immunity-icon--off { filter: grayscale(1) opacity(0.35); animation: none; } @keyframes policeSmokeGlow { 0% { filter: drop-shadow(0 0 4px rgba(74,222,128,0.3)) drop-shadow(0 6px 8px rgba(74,222,128,0.08)); transform: translateY(0px); } 40% { filter: drop-shadow(0 0 12px rgba(74,222,128,0.7)) drop-shadow(0 8px 16px rgba(74,222,128,0.2)); transform: translateY(-3px); } 70% { filter: drop-shadow(0 0 20px rgba(74,222,128,0.5)) drop-shadow(0 4px 20px rgba(74,222,128,0.15)); transform: translateY(-1px); } 100% { filter: drop-shadow(0 0 4px rgba(74,222,128,0.3)) drop-shadow(0 6px 8px rgba(74,222,128,0.08)); transform: translateY(0px); } } .police-timer-label { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .police-timer-label.muted { color: var(--color-muted); } .police-timer { font-size: 28px; font-weight: 700; color: #4ade80; letter-spacing: 1px; } /* Bara progres ore acumulate */ .police-progress-wrap { padding: 0 16px 16px; } .police-progress-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; margin-bottom: 4px; } .police-progress-fill { height: 100%; background: linear-gradient(90deg, #16a34a, #4ade80); border-radius: 99px; transition: width 0.4s ease; } .police-progress-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); } /* Secțiunea cumpărare */ .police-buy-section { padding: 0 16px 20px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px; } .police-buy-title { text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); margin-bottom: var(--gap-sm); } .police-buy-row { display: flex; align-items: center; justify-content: center; gap: var(--gap-sm); margin-bottom: var(--gap-sm); } .police-hours-input { width: 80px !important; } .police-price-total { font-size: var(--text-md); font-weight: 700; color: var(--color-accent); } .police-info { margin-top: var(--gap-xs); } /* Bar panel — grid 3 carduri */ .bar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); padding: 16px; } /* Primul grup afișat în tab-ul Resurse (Provizii, de obicei, dar poate fi oricare din cele 3 dacă restul sunt goale) nu mai are nevoie de margin-top propriu — s-ar aduna cu padding-top-ul containerului (#dockPanelBody, 12px) și ar arăta prea mare sus (cerere user 2026-08-20). */ #invBody > .pinfo-card-title:first-child { margin-top: 0; } .bar-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 14px 8px 12px; transition: border-color 0.15s, background 0.15s; } /* „i" info — colț stânga-sus (colțul dreapta-sus e ocupat de bulina de cantitate xNN). Tooltip afișat DOAR la click (la fel pe desktop și telefon) — vezi barShowDrinkInfo(). */ .bar-info-btn { position: absolute; top: 6px; left: 6px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(200,146,74,0.55); background: rgba(0,0,0,0.45); color: var(--color-accent); font: italic 700 12px/1 Georgia, "Times New Roman", serif; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .bar-info-btn:hover { background: rgba(200,146,74,0.2); color: var(--accent-bright, #f0d089); } .bar-info-pop-warn { margin-top: 6px; color: #f0b429; /* auriu-chihlimbariu — iese în evidență fără să fie „eroare" roșie */ font-weight: 700; } .bar-info-pop { position: fixed; display: none; z-index: 10000; max-width: min(260px, calc(100vw - 20px)); /* pe telefoane înguste caseta nu iese din ecran (cerere user 2026-09-06) */ background: var(--tooltip-bg); border: var(--tooltip-border); border-radius: var(--tooltip-radius); box-shadow: var(--tooltip-shadow); padding: 9px 11px; font-size: var(--text-xs); font-weight: 400; line-height: 1.45; color: var(--color-text); } .bar-card .btn-game, .bar-card .bar-card-btn { margin-top: auto; width: 100%; } .bar-card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); } .bar-card--active { border-color: rgba(96,165,250,0.45); background: rgba(96,165,250,0.06); } .bar-card-img-wrap { position: relative; width: 72px; height: 72px; } .bar-card-img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; } .bar-card-qty { position: absolute; top: -4px; right: -6px; font-size: var(--text-xs); font-weight: 800; color: #fff; background: rgba(0,0,0,0.7); border-radius: 8px; padding: 1px 5px; border: 1px solid rgba(255,255,255,0.15); } .bar-card-active-dot { position: absolute; bottom: 0; right: -2px; width: 10px; height: 10px; background: #22c55e; border-radius: 50%; border: 2px solid #0d0d1e; box-shadow: 0 0 6px #22c55e; } .bar-card-name { font-size: var(--text-base); font-weight: 700; color: var(--color-text-strong); margin-top: 2px; } .bar-card-meta { width: 100%; display: flex; flex-direction: column; gap: var(--gap-xs); margin-top: var(--gap-xs); } .bar-card-row { display: flex; justify-content: center; align-items: center; gap: var(--gap-sm); } .bar-card-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .bar-card-effect { font-size: var(--text-xs); font-weight: 700; color: #f472b6; text-align: center; line-height: 1.2; } /* Iconă stat (Forță/Apărare/Viteză) lângă „x2 sală / echipament" — înlocuiește textul lung „x2 Viteză echipament" care se revărsa pe 2-3 rânduri (2026-08-29). */ .bar-effect-icon { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; } .bar-card-val { font-size: var(--text-xs); font-weight: 600; color: #94a3b8; } .bar-card-timer { font-size: var(--text-xs); font-weight: 700; color: #4ade80; } .bar-card-btn { width: 100%; padding: 6px 0; font-size: 14px; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; letter-spacing: 0.3px; transition: opacity 0.15s; margin-top: 2px; } .bar-card-btn:hover { opacity: 0.82; } /* .bar-card-btn--buy → înlocuit cu .btn-game */ /* Auriu (aceeași paletă ca .btn-game), nu verde generic — verdele nu avea nicio legătură cu restul temei jocului (cerere user 2026-07-22) */ .bar-card-btn--activate { background: linear-gradient(135deg, #c8a84a, #f0d060); color: #1a1008; } .bar-card-btn--active { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); cursor: default; } /* HUD Băuturi active (colț dreapta jos) */ .drinks-hud { position: fixed; bottom: 90px; right: 14px; display: flex; flex-direction: column; gap: var(--gap-sm); z-index: 900; } .drink-hud-item { position: relative; width: 44px; height: 44px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s; } .drink-hud-item:hover { border-color: rgba(255,255,255,0.3); } .drink-hud-item--active { border-color: rgba(96,165,250,0.6); box-shadow: 0 0 8px rgba(96,165,250,0.3); } .drink-hud-img { width: 28px; height: 28px; object-fit: contain; } .drink-hud-timer { position: absolute; bottom: 2px; right: 3px; font-size: var(--text-xs); font-weight: 700; color: #60a5fa; line-height: 1; } .drink-hud-qty { position: absolute; top: 2px; right: 3px; font-size: var(--text-xs); font-weight: 700; color: #fff; background: rgba(0,0,0,0.7); border-radius: 6px; padding: 0 3px; } .inv-empty { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); padding: 30px 0; } /* ══ SETTINGS TAB ══ */ /* Sub-tab-uri */ .settings-tabs { display: flex; justify-content: center; align-items: center; gap: var(--gap-xs); margin-bottom: var(--gap-sm); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 6px 0 6px; margin-top: -12px; flex-shrink: 0; } .settings-tab { padding: 5px 12px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; letter-spacing: 0.3px; } .settings-tab:hover { color: var(--color-text-muted); background: rgba(255,255,255,0.04); } .settings-tab.active { color: #c8a84a; border-color: rgba(200,168,74,0.3); background: rgba(200,168,74,0.07); } /* Select dropdown */ .settings-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; } .settings-select option { background: #1a1a2e; color: var(--color-text); } .settings-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 16px; } .settings-loading { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; padding: 20px 0; width: 100%; } /* Avatar upload */ .avatar-preview-wrap { display: flex; justify-content: center; margin-bottom: 4px; width: 100%; } .avatar-preview-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(200,168,74,0.25); } .avatar-drop-zone { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); padding: var(--gap-lg) var(--gap-lg); border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: center; } .avatar-drop-zone:hover, .avatar-drop-zone.drag-over { border-color: rgba(200,168,74,0.4); background: rgba(200,168,74,0.05); } .avatar-drop-icon { font-size: var(--text-lg); } .avatar-drop-label { font-size: var(--text-sm); color: #aaa; } .avatar-drop-hint { font-size: var(--text-xs); color: var(--color-text-muted); } /* ── Cropper de imagine (avatar jucător + banner bandă) ── Jucătorul alege o poză de orice mărime; aici o poziționează/scalează într-un chenar cu raport fix, iar la „Aplică" se desenează regiunea vizibilă pe un