/* ============================================================================ Zeryon2 — temă „Metin2 privat”. Două variante: „întuneric” (negru/roșu sânge cu aur) și „lumină” (pergament ivoriu cu roșu închis și aur). Toate culorile trec prin variabile CSS, așa că schimbarea temei înseamnă doar `data-theme` pe . Fără dependențe externe (CSP: default-src 'self'). Testat la 1366x768 și la 1024x768 (browserul intern al clientului de joc). ========================================================================== */ @font-face { font-family: "Albertus Nova"; src: url("/static/fonts/AlbertusNova.woff2") format("woff2"), url("/static/fonts/AlbertusNova.woff") format("woff"); font-weight: 400; font-display: swap; } /* ---------------------------------------------------------------- TEMA 1 --- */ :root { color-scheme: dark; --wrap: 1180px; --head-h: 70px; --radius: 8px; --radius-sm: 5px; --display: "Albertus Nova", "Trajan Pro", "Palatino Linotype", Georgia, serif; --body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* fundal de pagină */ --bg: #0e0607; --tex-page: url("/static/img/page-bg.jpg"); --page-tint-1: radial-gradient(1200px 660px at 50% -200px, rgba(181, 55, 42, 0.30), transparent 72%); --page-tint-2: linear-gradient(180deg, rgba(8, 3, 4, 0.88) 0%, rgba(8, 3, 4, 0.96) 55%, #080304 100%); /* suprafețe */ --tex-panel: url("/static/img/ui/panel.jpg"); --panel-1: rgba(48, 21, 22, 0.92); --panel-2: rgba(20, 9, 10, 0.96); --card-1: rgba(52, 23, 24, 0.92); --card-2: rgba(15, 7, 8, 0.96); --raise-1: rgba(96, 42, 38, 0.88); --raise-2: rgba(34, 14, 15, 0.92); --sunken: rgba(6, 2, 3, 0.62); --soft-fill: rgba(255, 255, 255, 0.03); --soft-fill-2: rgba(255, 255, 255, 0.08); /* linii */ --line: rgba(217, 177, 104, 0.30); --line-2: rgba(217, 177, 104, 0.55); --line-soft: rgba(255, 255, 255, 0.06); /* text */ --text: #eee4e0; --text-dim: #b6a29e; --text-mute: #857270; --heading: #ffffff; --heading-shadow: 0 2px 18px rgba(181, 55, 42, 0.45); --link: #f6e4b6; --link-hover: #ffffff; /* accente */ --gold: #d9b168; --gold-hi: #f6e4b6; --gold-ink: #d9b168; /* aur folosit ca text pe panouri */ --red: #b5372a; --red-hot: #e04b3a; --red-deep: #6d1a14; --ok: #6fdc92; --ok-ink: #6fdc92; --err-ink: #f08a86; --gilded: linear-gradient(180deg, #fff7e2 0%, #f6e4b6 38%, #d9b168 62%, #9c7530 100%); --gilded-live: linear-gradient(180deg, #d5ffe3, #6fdc92 65%, #2f7a4a); /* tabele */ --head-bg: linear-gradient(180deg, rgba(40, 17, 18, 0.97), rgba(11, 4, 5, 0.95)); --nav-hover: rgba(181, 55, 42, 0.22); --thead: linear-gradient(180deg, rgba(60, 26, 26, 0.95), rgba(24, 10, 11, 0.95)); --tr-odd: rgba(255, 255, 255, 0.022); --tr-even: rgba(0, 0, 0, 0.18); --tr-hover: rgba(181, 55, 42, 0.16); /* voaluri peste imagini */ --hero-veil: linear-gradient(90deg, rgba(8, 3, 4, 0.96) 0%, rgba(8, 3, 4, 0.72) 46%, rgba(8, 3, 4, 0.24) 100%), linear-gradient(0deg, var(--bg) 1%, transparent 42%); --stage-veil: linear-gradient(rgba(8, 3, 4, 0.74), rgba(8, 3, 4, 0.9)); --avatar-bg: radial-gradient(circle, #2a1113, #0d0405); --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.55); --shadow-deep: 0 22px 60px rgba(0, 0, 0, 0.66); --inset-hi: inset 0 1px 0 rgba(246, 228, 182, 0.12); /* pergament (stări goale) — la fel în ambele teme */ --parch-ink: #40260f; --parch-head: #5b2f14; } /* ---------------------------------------------------------------- TEMA 2 --- */ :root[data-theme="light"] { color-scheme: light; --bg: #e9dcc2; --tex-page: url("/static/img/ui/parchment.jpg"); --page-tint-1: radial-gradient(1200px 660px at 50% -220px, rgba(158, 44, 32, 0.20), transparent 70%); --page-tint-2: linear-gradient(180deg, rgba(247, 239, 222, 0.86) 0%, rgba(238, 227, 205, 0.92) 55%, rgba(230, 217, 192, 0.95) 100%); --tex-panel: url("/static/img/ui/parchment.jpg"); --panel-1: rgba(252, 244, 224, 0.94); --panel-2: rgba(235, 221, 191, 0.96); --card-1: rgba(254, 247, 230, 0.95); --card-2: rgba(234, 219, 187, 0.96); --raise-1: rgba(146, 44, 32, 0.92); --raise-2: rgba(105, 26, 18, 0.94); --sunken: rgba(255, 252, 243, 0.85); --soft-fill: rgba(120, 84, 36, 0.06); --soft-fill-2: rgba(120, 84, 36, 0.14); --line: rgba(133, 94, 38, 0.52); --line-2: rgba(133, 94, 38, 0.9); --line-soft: rgba(90, 62, 26, 0.16); --text: #35251a; --text-dim: #6a5138; --text-mute: #8a7050; --heading: #7d1d13; --heading-shadow: 0 1px 0 rgba(255, 250, 230, 0.8); --link: #94291c; --link-hover: #5f150e; --gold: #9a7226; --gold-hi: #7d5a17; --gold-ink: #7d5a17; --red: #9d2b20; --red-hot: #c33a2a; --red-deep: #6d1a14; --ok: #2f7a4a; --ok-ink: #23673c; --err-ink: #a52f2a; --gilded: linear-gradient(180deg, #a8801f 0%, #8a5f17 40%, #6f1c11 100%); --gilded-live: linear-gradient(180deg, #2f8f57, #1c6238); --head-bg: linear-gradient(180deg, #f2e0b8 0%, #dcc494 100%); --nav-hover: rgba(157, 43, 32, 0.22); --thead: linear-gradient(180deg, rgba(146, 44, 32, 0.95), rgba(105, 26, 18, 0.95)); --tr-odd: rgba(255, 252, 243, 0.7); --tr-even: rgba(120, 84, 36, 0.07); --tr-hover: rgba(157, 43, 32, 0.14); --hero-veil: linear-gradient(90deg, rgba(240, 230, 208, 0.97) 0%, rgba(240, 230, 208, 0.84) 46%, rgba(240, 230, 208, 0.42) 100%), linear-gradient(0deg, var(--bg) 1%, transparent 44%); --stage-veil: linear-gradient(rgba(245, 235, 214, 0.86), rgba(232, 219, 194, 0.93)); --avatar-bg: radial-gradient(circle, #fbf4e2, #e2d2ae); --shadow-card: 0 10px 26px rgba(76, 48, 16, 0.22); --shadow-deep: 0 18px 46px rgba(76, 48, 16, 0.3); --inset-hi: inset 0 1px 0 rgba(255, 253, 245, 0.85); } /* Implicit urmăm setarea sistemului; alegerea explicită (data-theme) o bate. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #e9dcc2; --tex-page: url("/static/img/ui/parchment.jpg"); --page-tint-1: radial-gradient(1200px 660px at 50% -220px, rgba(158, 44, 32, 0.20), transparent 70%); --page-tint-2: linear-gradient(180deg, rgba(247, 239, 222, 0.86) 0%, rgba(238, 227, 205, 0.92) 55%, rgba(230, 217, 192, 0.95) 100%); --tex-panel: url("/static/img/ui/parchment.jpg"); --panel-1: rgba(252, 244, 224, 0.94); --panel-2: rgba(235, 221, 191, 0.96); --card-1: rgba(254, 247, 230, 0.95); --card-2: rgba(234, 219, 187, 0.96); --raise-1: rgba(146, 44, 32, 0.92); --raise-2: rgba(105, 26, 18, 0.94); --sunken: rgba(255, 252, 243, 0.85); --soft-fill: rgba(120, 84, 36, 0.06); --soft-fill-2: rgba(120, 84, 36, 0.14); --line: rgba(133, 94, 38, 0.52); --line-2: rgba(133, 94, 38, 0.9); --line-soft: rgba(90, 62, 26, 0.16); --text: #35251a; --text-dim: #6a5138; --text-mute: #8a7050; --heading: #7d1d13; --heading-shadow: 0 1px 0 rgba(255, 250, 230, 0.8); --link: #94291c; --link-hover: #5f150e; --gold: #9a7226; --gold-hi: #7d5a17; --gold-ink: #7d5a17; --red: #9d2b20; --red-hot: #c33a2a; --ok: #2f7a4a; --ok-ink: #23673c; --err-ink: #a52f2a; --gilded: linear-gradient(180deg, #a8801f 0%, #8a5f17 40%, #6f1c11 100%); --gilded-live: linear-gradient(180deg, #2f8f57, #1c6238); --head-bg: linear-gradient(180deg, #f2e0b8 0%, #dcc494 100%); --nav-hover: rgba(157, 43, 32, 0.22); --thead: linear-gradient(180deg, rgba(146, 44, 32, 0.95), rgba(105, 26, 18, 0.95)); --tr-odd: rgba(255, 252, 243, 0.7); --tr-even: rgba(120, 84, 36, 0.07); --tr-hover: rgba(157, 43, 32, 0.14); --hero-veil: linear-gradient(90deg, rgba(240, 230, 208, 0.97) 0%, rgba(240, 230, 208, 0.84) 46%, rgba(240, 230, 208, 0.42) 100%), linear-gradient(0deg, var(--bg) 1%, transparent 44%); --stage-veil: linear-gradient(rgba(245, 235, 214, 0.86), rgba(232, 219, 194, 0.93)); --avatar-bg: radial-gradient(circle, #fbf4e2, #e2d2ae); --shadow-card: 0 10px 26px rgba(76, 48, 16, 0.22); --shadow-deep: 0 18px 46px rgba(76, 48, 16, 0.3); --inset-hi: inset 0 1px 0 rgba(255, 253, 245, 0.85); } } /* ------------------------------------------------------------------ BAZĂ --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--body); font-size: 15.5px; line-height: 1.62; color: var(--text); background-color: var(--bg); background-image: var(--page-tint-1), var(--page-tint-2), var(--tex-page); background-repeat: no-repeat, no-repeat, repeat; background-size: 100% 900px, 100% 100%, 1400px auto; background-attachment: scroll, fixed, fixed; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: 0.035em; line-height: 1.18; margin: 0 0 0.5em; color: var(--heading); } h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); text-shadow: var(--heading-shadow); } h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); } h3 { font-size: 1.08rem; letter-spacing: 0.05em; } h4 { font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); } .gilded, .stat__value, .brand__text strong { background: var(--gilded); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } p { margin: 0 0 1em; } .muted { color: var(--text-dim); } .tiny { font-size: 0.8rem; } .center { text-align: center; } .nowrap { white-space: nowrap; } .wrap { width: min(100% - 1.6rem, var(--wrap)); margin-inline: auto; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--red); color: #fff; padding: 0.6rem 1rem; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ------------------------------------------------------------ ORNAMENTE --- */ .panel, .plaque { position: relative; background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), var(--inset-hi), var(--shadow-card); padding: 1.2rem 1.25rem; } .plaque::before, .plaque::after { content: ""; position: absolute; width: 20px; height: 20px; background: url("/static/img/ui/corner.png") no-repeat center / contain; opacity: 0.85; pointer-events: none; } .plaque::before { top: 4px; left: 4px; } .plaque::after { top: 4px; right: 4px; transform: scaleX(-1); } .panel--tight, .plaque--tight { padding: 0.9rem 1rem; } .panel > :last-child, .plaque > :last-child { margin-bottom: 0; } .section__head { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .section__head h1, .section__head h2, .section__head h3 { margin: 0; } .section__head > :first-child { position: relative; padding-left: 1.15rem; } .section__head > :first-child::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-hi), var(--gold)); box-shadow: 0 0 10px rgba(217, 177, 104, 0.6); } .section__head::after { content: ""; flex: 1 1 40px; height: 1px; order: 1; background: linear-gradient(90deg, var(--line-2), transparent); } .section__head > * { order: 0; } /* Când există și un al doilea element (buton, tab-uri), el trece după linie. */ .section__head > *:not(:only-child):last-child { order: 2; } .divider { height: 18px; margin: 1.5rem auto; background: url("/static/img/ui/divider.png") center / auto 100% no-repeat; opacity: 0.85; } .section { padding: clamp(1.9rem, 4.2vw, 3.2rem) 0; } .section--first { padding-top: clamp(1.3rem, 3vw, 2.2rem); } .grid { display: grid; gap: 1rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grid--side { grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); align-items: start; } @media (max-width: 880px) { .grid--side { grid-template-columns: 1fr; } } /* -------------------------------------------------------------- ANTET ------ */ .maintenance { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.55rem 1rem; background: linear-gradient(90deg, var(--red-deep), #9a271d 55%, var(--red-deep)); border-bottom: 1px solid rgba(246, 228, 182, 0.22); color: #ffeceb; font-size: 0.9rem; justify-content: center; text-align: center; } .maintenance__tag { font-family: var(--display); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.7rem; background: rgba(0, 0, 0, 0.4); padding: 0.15rem 0.6rem; border-radius: 3px; color: #f6e4b6; } .site-head { position: sticky; top: 0; z-index: 40; background: var(--head-bg), var(--tex-panel) center / cover; border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow-card); } .site-head::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--red) 50%, var(--line-2) 82%, transparent); } .site-head__inner { display: flex; align-items: center; gap: 0.7rem; flex-wrap: nowrap; height: var(--head-h); width: min(100% - 1.4rem, 1560px); margin-inline: auto; } .brand { display: flex; align-items: center; gap: 0.6rem; flex: none; } .brand__mark { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); box-shadow: 0 0 18px rgba(181, 55, 42, 0.45), inset 0 0 12px rgba(0, 0, 0, 0.35); background: var(--avatar-bg); } .brand__text strong { display: block; font-family: var(--display); font-size: 1.32rem; letter-spacing: 0.1em; line-height: 1; } .brand__text small { display: block; color: var(--text-mute); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; margin-top: 2px; } .nav { display: flex; gap: 0.05rem; margin-inline: auto; flex-wrap: nowrap; } .nav a { position: relative; padding: 0.5rem 0.58rem; color: var(--text-dim); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--display); border-radius: var(--radius-sm); white-space: nowrap; transition: color .15s, background .15s; } .nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: left .18s, right .18s; } .nav a:hover { color: var(--heading); background: var(--nav-hover); } .nav a:hover::after, .nav a.is-active::after { left: 14%; right: 14%; } .nav a.is-active { color: var(--gold-ink); background: var(--nav-hover); box-shadow: inset 0 0 0 1px var(--line); } /* zona din dreapta: monede + meniul contului + tema */ .head-actions { display: flex; gap: 0.35rem; align-items: center; flex-wrap: nowrap; flex: none; } .head-actions .purse .coin-chip { padding: 0.2rem 0.55rem; } .head-actions .purse .coin-chip strong { font-size: 0.86rem; } .user-menu { position: relative; } .user-menu__btn { display: flex; align-items: center; gap: 0.38rem; padding: 0.3rem 0.55rem 0.3rem 0.35rem; border: 1px solid var(--line-2); border-radius: 999px; background: linear-gradient(180deg, var(--raise-1), var(--raise-2)); box-shadow: var(--inset-hi); color: #fff; font: inherit; font-size: 0.86rem; cursor: pointer; } .user-menu__btn img { width: 22px; height: 22px; flex: none; } .user-menu__btn svg { width: 11px; height: 11px; fill: currentColor; opacity: 0.75; } .user-menu__name { font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.05em; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 12rem; padding: 0.35rem; background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-deep); } .user-menu__panel a { display: block; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); color: var(--text); font-size: 0.87rem; } .user-menu__panel a:hover { background: var(--nav-hover); color: var(--heading); } .user-menu__panel hr { border: none; border-top: 1px solid var(--line-soft); margin: 0.3rem 0.4rem; } .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft-fill); color: var(--gold-ink); cursor: pointer; transition: border-color .16s, color .16s, background .16s; } .theme-toggle:hover { border-color: var(--line-2); color: var(--heading); background: var(--nav-hover); } .theme-toggle svg { width: 20px; height: 20px; display: block; fill: currentColor; } .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; } } .nav-toggle, .nav-burger { display: none; } /* ------------------------------------------------------------- BUTOANE ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--soft-fill-2), var(--soft-fill)); color: var(--text); font-family: var(--body); font-size: 0.87rem; letter-spacing: 0.03em; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--inset-hi), var(--shadow-card); transition: transform .12s, box-shadow .16s, border-color .16s, background .16s, color .16s; } .btn:hover { color: var(--heading); border-color: var(--line-2); transform: translateY(-1px); } .btn:active { transform: none; } .btn[disabled], .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn img { display: block; } .btn--primary { background: linear-gradient(180deg, #e6543f 0%, #b5372a 46%, #7d1e16 100%); border-color: rgba(255, 178, 166, 0.42); color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255, 214, 205, 0.35), 0 6px 20px rgba(181, 55, 42, 0.35); } .btn--primary:hover { background: linear-gradient(180deg, #f4644d, #8d241b); color: #fff; } .btn--gold { background: linear-gradient(180deg, #f7e6bb 0%, #d9b168 45%, #96702c 100%); border-color: rgba(255, 240, 205, 0.6); color: #2b1707; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5); box-shadow: inset 0 1px 0 rgba(255, 252, 240, 0.7), 0 6px 20px rgba(217, 177, 104, 0.3); } .btn--gold:hover { color: #1d0e03; background: linear-gradient(180deg, #fff2d2, #a67d33); } .btn--ghost { background: var(--soft-fill); } /* Confirmare inline în browserul din joc (fără window.confirm): butonul „armat” + mesajul. */ .btn--armed { outline: 2px solid var(--gold); outline-offset: 2px; animation: z2-arm 0.9s ease-in-out infinite alternate; } @keyframes z2-arm { from { filter: brightness(1); } to { filter: brightness(1.25); } } .confirm-hint { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--gold); } .btn--quiet { background: none; border-color: transparent; color: var(--text-mute); box-shadow: none; } .btn--quiet:hover { box-shadow: none; } .btn--lg { padding: 0.78rem 1.55rem; font-size: 0.98rem; } .btn--sm { padding: 0.32rem 0.68rem; font-size: 0.78rem; } .btn--block { width: 100%; } .btn--danger { border-color: rgba(217, 83, 79, 0.55); color: var(--err-ink); } /* --------------------------------------------------------------- HERO ------ */ .hero { position: relative; overflow: hidden; min-height: min(64vh, 500px); display: flex; align-items: center; border-bottom: 1px solid var(--line); background: #150809 url("/static/img/hero-bg.jpg") center / cover no-repeat; } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hero-veil); } .hero__char { position: absolute; right: 0; bottom: 0; top: 0; width: clamp(300px, 50%, 640px); background: url("/static/img/hero-char.jpg") right bottom / auto 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(0deg, transparent 0%, #000 18%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(0deg, transparent 0%, #000 18%); mask-composite: intersect; opacity: 0.95; } .hero__inner { position: relative; z-index: 2; padding: clamp(2.4rem, 5.5vw, 4rem) 0; max-width: 610px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.95rem; margin-bottom: 1rem; background: linear-gradient(180deg, var(--panel-1), var(--panel-2)); box-shadow: var(--inset-hi); } .hero h1 { margin-bottom: 0.35rem; } .hero__lead { font-size: 1.05rem; color: var(--text-dim); max-width: 34rem; } .hero__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(111, 220, 146, 0.7); animation: pulse 2.4s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(111, 220, 146, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 220, 146, 0); } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } html { scroll-behavior: auto; } } /* ------------------------------------------------------ PLĂCI STATISTICI --- */ .stats { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .stat { position: relative; text-align: center; padding: 1.1rem 0.7rem 0.95rem; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--inset-hi), var(--shadow-card); overflow: hidden; } .stat::before { content: ""; position: absolute; inset: 5px; border-radius: 4px; border: 1px solid var(--line); opacity: 0.5; pointer-events: none; } .stat::after { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); } .stat__value { display: block; font-family: var(--display); font-size: 2rem; line-height: 1.05; } .stat__label { font-size: 0.69rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); display: block; margin-top: 0.25rem; } .stat--live .stat__value { background: var(--gilded-live); -webkit-background-clip: text; background-clip: text; } .stat__icon { width: 26px; height: 26px; margin: 0 auto 0.3rem; opacity: 0.9; } /* ----------------------------------------------------------- ȘTIRI --------- */ .news-card { position: relative; display: flex; flex-direction: column; gap: 0.45rem; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-card); transition: border-color .18s, transform .18s, box-shadow .18s; } .news-card:hover { border-left-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-deep); } .news-card h3 { margin: 0; font-size: 1.06rem; } .news-card h3 a { color: var(--heading); } .news-card h3 a:hover { color: var(--link); } .news-card > p:last-child { margin-bottom: 0; } .news-meta { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; font-size: 0.73rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.1em; } .tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--tr-hover); border: 1px solid var(--line); color: var(--gold-ink); font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; } .tag--ok { background: rgba(86, 169, 112, 0.26); color: var(--ok-ink); } .tag--wait { background: rgba(217, 164, 65, 0.26); color: var(--gold-ink); } .article { max-width: 44rem; } .article h2 { margin-top: 1.6rem; } .article ul { padding-left: 1.2rem; } .article li { margin-bottom: 0.4rem; } .article code { background: var(--sunken); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.9em; color: var(--gold-ink); } /* --------------------------------------------------------------- TABELE ---- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; box-shadow: var(--shadow-card); } table { width: 100%; border-collapse: collapse; font-size: 0.89rem; min-width: 620px; } thead th { background: var(--thead); color: #f6e4b6; font-family: var(--display); font-weight: 400; text-align: left; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; } tbody td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:nth-child(odd) { background: var(--tr-odd); } tbody tr:nth-child(even) { background: var(--tr-even); } tbody tr:hover { background: var(--tr-hover); } tbody tr:last-child td { border-bottom: none; } .num { text-align: right; font-variant-numeric: tabular-nums; } .rank { width: 3.2rem; font-family: var(--display); color: var(--text-mute); text-align: center; } .rank--1 { color: #d9a521; font-size: 1.18rem; } .rank--2 { color: #8c8c8c; font-size: 1.1rem; } .rank--3 { color: #b26a35; font-size: 1.06rem; } :root:not([data-theme="light"]) .rank--1 { color: #ffd76a; text-shadow: 0 0 12px rgba(255, 215, 106, 0.55); } :root:not([data-theme="light"]) .rank--2 { color: #dcdcdc; } :root:not([data-theme="light"]) .rank--3 { color: #d8955a; } .who { display: flex; align-items: center; gap: 0.6rem; } .who img.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 1px solid var(--line); background: var(--avatar-bg); } .who strong { color: var(--heading); font-weight: 600; } .flag { display: inline-block; width: 26px; height: auto; border-radius: 2px; vertical-align: middle; margin-right: 0.35rem; background: rgba(255, 255, 255, 0.12); padding: 1px; box-shadow: 0 0 0 1px var(--line); } .tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; } .tabs a { padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); background: var(--soft-fill); } .tabs a:hover, .tabs a.is-active { background: linear-gradient(180deg, var(--raise-1), var(--raise-2)); color: #f6e4b6; border-color: var(--line-2); } /* ----------------------------------------------------------- FORMULARE ----- */ .filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.1rem; } .field { display: flex; flex-direction: column; gap: 0.28rem; } .field > label, .form > .field > label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); } input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="datetime-local"], select, textarea { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 0.92rem; padding: 0.54rem 0.72rem; width: 100%; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18); transition: border-color .16s, background .16s, box-shadow .16s; } input::placeholder, textarea::placeholder { color: var(--text-mute); } input:focus, select:focus, textarea:focus { border-color: var(--line-2); outline: none; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(217, 177, 104, 0.22); } textarea { min-height: 9rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; } select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 26rem; } .form .field { gap: 0.3rem; } .form-hint { font-size: 0.79rem; color: var(--text-mute); } .checkline { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.87rem; line-height: 1.5; color: var(--text-dim); text-transform: none; letter-spacing: normal; } .checkline input { width: auto; margin-top: 0.25rem; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; } @media (max-width: 820px) { .auth-layout { grid-template-columns: 1fr; } .auth-aside { display: none; } } .auth-aside ul { list-style: none; padding: 0; margin: 0; } .auth-aside li { padding: 0.5rem 0 0.5rem 1.6rem; position: relative; color: var(--text-dim); } .auth-aside li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); } /* -------------------------------------------------------------- ALERTE ----- */ .flash, .alert { border-radius: var(--radius); padding: 0.72rem 1rem; margin: 1rem 0; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-1), var(--panel-2)); font-size: 0.9rem; box-shadow: var(--shadow-card); } .flash--success, .alert--success { border-color: rgba(86, 169, 112, 0.6); } .flash--error, .alert--error { border-color: rgba(217, 83, 79, 0.65); } .alert ul { margin: 0.3rem 0 0; padding-left: 1.2rem; } .alert > :last-child { margin-bottom: 0; } /* Notă pe pergament: aceeași în ambele teme. */ .scroll-note { position: relative; max-width: 40rem; margin: 0 auto; padding: 1.8rem 2.1rem; color: var(--parch-ink); text-align: center; background: url("/static/img/ui/parchment.jpg") center / cover; border: 1px solid rgba(120, 84, 40, 0.7); border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 44px rgba(122, 84, 38, 0.42); } .scroll-note::before, .scroll-note::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: linear-gradient(180deg, rgba(60, 34, 12, 0.32), transparent); } .scroll-note::before { top: 0; } .scroll-note::after { bottom: 0; transform: scaleY(-1); } .scroll-note h3 { color: var(--parch-head); font-size: 1.25rem; margin-bottom: 0.35rem; text-shadow: 0 1px 0 rgba(255, 245, 215, 0.6); } .scroll-note p { color: #5a3c1c; margin: 0; } .scroll-note .btn { margin-top: 1rem; } /* ------------------------------------------------------------ PAGINARE ----- */ .pager { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; align-items: center; } .pager a, .pager span { min-width: 2.25rem; text-align: center; padding: 0.36rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--text-dim); background: var(--soft-fill); } .pager a:hover { background: var(--tr-hover); color: var(--heading); } .pager .is-current { background: linear-gradient(180deg, #b5372a, #6d1a14); color: #fff; border-color: rgba(255, 178, 166, 0.4); } .pager .gap { border: none; background: none; } /* Numărătoarea de deasupra paginării: „49-96 din 300”. */ .pager__count { margin: 1.4rem 0 0; text-align: center; font-size: 0.85rem; color: var(--text-dim); } .pager__count + .pager { margin-top: 0.5rem; } /* ------------------------------------------------------------ DESCĂRCARE --- */ .dl-card { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem 1.1rem; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .dl-card + .dl-card { margin-top: 0.8rem; } .steps { counter-reset: step; list-style: none; padding: 0; margin: 0; } .steps li { counter-increment: step; position: relative; padding: 0 0 1rem 2.9rem; border-left: 1px solid var(--line); margin-left: 1rem; } .steps li:last-child { border-left-color: transparent; padding-bottom: 0; } .steps li::before { content: counter(step); position: absolute; left: -1rem; top: -0.15rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #e6543f, #6d1a14); color: #fff; font-family: var(--display); font-size: 0.95rem; border: 1px solid rgba(255, 184, 172, 0.4); box-shadow: 0 0 14px rgba(181, 55, 42, 0.4); } .steps li strong { display: block; color: var(--heading); } /* ----------------------------------------------------------------- CONT ---- */ .char-card { display: flex; gap: 0.9rem; align-items: center; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; box-shadow: var(--shadow-card); } .char-card img.avatar { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--avatar-bg); } .char-card__meta { font-size: 0.82rem; color: var(--text-dim); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.88rem; } .kv dt { color: var(--text-mute); } .kv dd { margin: 0; color: var(--text); } /* ---------------------------------------------------------------- ADMIN ---- */ .admin-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .admin-nav a { padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.83rem; color: var(--text-dim); background: var(--soft-fill); } .admin-nav a:hover, .admin-nav a.is-active { background: var(--tr-hover); color: var(--gold-ink); border-color: var(--line-2); } .inline-form { display: inline; } .form--wide { max-width: none; } .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } /* --------------------------------------------------------------- EROARE ---- */ .error-page { text-align: center; padding: clamp(3rem, 10vw, 7rem) 0; } .error-page .code { font-family: var(--display); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--red); text-shadow: 0 0 46px rgba(181, 55, 42, 0.5); margin: 0; } /* --------------------------------------------------------------- SUBSOL ---- */ .site-foot { margin-top: 3rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; padding: 2rem 0 1.2rem; } .site-foot__inner { display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; } .site-foot__brand { display: flex; gap: 0.8rem; align-items: center; } .site-foot__brand img { width: 42px; height: 42px; opacity: 0.9; } .site-foot__brand strong { font-family: var(--display); font-size: 1.12rem; letter-spacing: 0.1em; color: var(--gold-ink); display: block; } .site-foot nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; } .site-foot nav a { color: var(--text-dim); font-size: 0.87rem; } .site-foot nav a:hover { color: var(--link); } .site-foot__legal { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: 0.78rem; } .site-foot p { margin: 0.3rem 0 0; } /* ============================================================================ ITEMSHOP ========================================================================== */ .shop { padding-top: 1.3rem; } .shop-top { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem 1.2rem; flex-wrap: wrap; padding: 0.8rem 1.05rem; margin-bottom: 1rem; background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--inset-hi), var(--shadow-card); } .shop-top__title { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .shop-top__title img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 8px rgba(217, 177, 104, 0.5)); } .shop-top__title h1 { margin: 0; font-size: 1.5rem; } .shop-top__title p { margin: 0; font-size: 0.77rem; color: var(--text-mute); } .shop-top__right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .purse { display: flex; gap: 0.4rem; } .coin-chip { display: inline-flex; align-items: center; gap: 0.38rem; padding: 0.3rem 0.68rem; border: 1px solid var(--line-2); border-radius: 999px; background: linear-gradient(180deg, var(--sunken), var(--panel-2)); box-shadow: var(--inset-hi); font-variant-numeric: tabular-nums; } .coin-chip img { width: 18px; height: 18px; flex: none; } .coin-chip strong { color: var(--gold-ink); font-size: 0.96rem; } .coin-chip span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); } .quick-links { display: flex; gap: 0.32rem; flex-wrap: wrap; } .quick { display: inline-flex; align-items: center; gap: 0.38rem; padding: 0.38rem 0.72rem; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--text-dim); background: var(--soft-fill); font-size: 0.81rem; } .quick img { width: 18px; height: 18px; } .quick.is-active img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .quick:hover, .quick.is-active { color: #f6e4b6; border-color: var(--line-2); background: linear-gradient(180deg, var(--raise-1), var(--raise-2)); } .shop-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 1rem; align-items: start; } .shop-side { display: flex; flex-direction: column; gap: 0.8rem; position: sticky; top: calc(var(--head-h) + 12px); } .cat-box { background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .cat-box__head { font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: #f6e4b6; padding: 0.58rem 0.85rem; background: linear-gradient(180deg, var(--raise-1), var(--raise-2)); border-bottom: 1px solid var(--line); } .cat-list { list-style: none; margin: 0; padding: 0.35rem; } .cat-list a { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.5rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.87rem; line-height: 1.25; border: 1px solid transparent; } .cat-list a:hover { background: var(--tr-hover); color: var(--heading); } .cat-list a.is-active { background: linear-gradient(90deg, var(--tr-hover), transparent); border-color: var(--line); color: var(--gold-ink); } .cat-list__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: url("/static/img/ui/item-slot.png") center / contain no-repeat; } .cat-list__icon img { width: 24px; height: 24px; image-rendering: pixelated; } .cat-list__count { margin-left: auto; font-size: 0.72rem; color: var(--text-mute); } .happy { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; padding: 0.65rem 1rem 0.65rem 0.65rem; position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius); background: linear-gradient(90deg, rgba(217, 177, 104, 0.28), var(--panel-1) 46%, var(--panel-2)), var(--tex-panel) center / cover; box-shadow: var(--inset-hi), 0 0 26px rgba(217, 177, 104, 0.14); } .happy__art { width: 104px; height: 60px; flex: none; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); filter: hue-rotate(145deg) saturate(1.3) brightness(0.95); } .happy strong { font-family: var(--display); font-size: 1.02rem; color: var(--gold-ink); letter-spacing: 0.04em; } .happy p { margin: 0.15rem 0 0; } .happy__timer { color: var(--heading); font-variant-numeric: tabular-nums; font-weight: 600; background: var(--sunken); padding: 0.05rem 0.45rem; border-radius: 3px; border: 1px solid var(--line); } .shop-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; } .shop-search input { max-width: 320px; } .shop-heading { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.9rem; } .shop-heading h2 { margin: 0; } .shop-heading span { font-size: 0.79rem; color: var(--text-mute); } .shop-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); } .item-card { position: relative; display: flex; flex-direction: column; padding: 0.8rem 0.7rem 0.7rem; text-align: center; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 10px solid transparent; border-image: url("/static/img/ui/frame.png") 30 / 10px / 0 stretch; transition: transform .16s, filter .16s; } .item-card:hover { transform: translateY(-3px); filter: brightness(1.08); } .item-card.is-out { opacity: 0.55; filter: grayscale(0.55); } .item-card__link { display: block; color: inherit; } .item-card__link:hover { color: inherit; } .item-card__slot { width: 84px; height: 84px; margin: 0 auto 0.5rem; display: grid; place-items: center; background: url("/static/img/ui/item-slot.png") center / contain no-repeat; } .item-card__slot img { /* Iconițele de joc sunt de 32x32 (unele 32x64): le urcăm la o înălțime fixă, cu scalare „pixelated”, ca să rămână clare, nu neclare. */ height: 64px; width: auto; max-width: 100%; image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); } .item-card__name { font-family: var(--display); font-size: 0.93rem; line-height: 1.25; color: var(--heading); margin: 0 0 0.22rem; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-card__link:hover .item-card__name { color: var(--link); } .item-card__desc { font-size: 0.75rem; color: var(--text-mute); margin: 0 0 0.45rem; min-height: 2.2em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-card__price { display: flex; align-items: center; justify-content: center; gap: 0.32rem; flex-wrap: wrap; margin-top: auto; padding: 0.4rem 0.3rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--sunken)); } .item-card__stock { font-size: 0.71rem; color: var(--text-mute); margin: 0 0 0.3rem; } .item-card__actions { display: grid; gap: 0.32rem; margin-top: 0.4rem; } .item-card form { margin: 0; } .ribbon { position: absolute; top: -4px; left: -4px; z-index: 3; font-family: var(--display); font-size: 0.69rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 3px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); } .ribbon--new { background: linear-gradient(180deg, #6fdc92, #2f7a4a); color: #06210f; } .ribbon--sale { right: -4px; left: auto; background: linear-gradient(180deg, #f4644d, #7d1e16); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .badge { display: inline-block; padding: 0.08rem 0.45rem; border-radius: 3px; font-size: 0.7rem; background: var(--soft-fill-2); color: var(--text); } .badge--new { background: rgba(86, 169, 112, 0.35); color: var(--ok-ink); } .badge--sale { background: rgba(181, 55, 42, 0.4); color: var(--err-ink); } .price { display: inline-flex; align-items: center; gap: 0.26rem; font-weight: 700; color: var(--gold-ink); white-space: nowrap; font-size: 0.98rem; font-variant-numeric: tabular-nums; } .price img { width: 17px; height: 17px; } .price--old { color: var(--text-mute); text-decoration: line-through; font-weight: 400; font-size: 0.83rem; } .num-plus { color: var(--ok-ink); } .num-minus { color: var(--err-ink); } .coin, .inline-icon { display: inline-block; vertical-align: -3px; margin-right: 0.25rem; } .item-detail { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.15rem; align-items: start; } .item-detail__art { position: relative; text-align: center; padding: 1.15rem 1rem; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 10px solid transparent; border-image: url("/static/img/ui/frame.png") 30 / 10px / 0 stretch; } .item-detail__slot { width: 150px; height: 150px; margin: 0 auto 0.7rem; display: grid; place-items: center; background: url("/static/img/ui/item-slot.png") center / contain no-repeat; } .item-detail__slot img { height: 96px; width: auto; max-width: 100%; image-rendering: pixelated; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); } .item-detail__price { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; } .item-detail__price .price { font-size: 1.3rem; } .crumbs { font-size: 0.8rem; color: var(--text-mute); margin-bottom: 0.8rem; } .crumbs a { color: var(--text-dim); } .crumbs a:hover { color: var(--link); } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 0.5rem; margin: 0 0 1.05rem; } .fact { padding: 0.48rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); } .fact dt { font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); } .fact dd { margin: 0.1rem 0 0; color: var(--heading); font-size: 0.93rem; } .bonus-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.3rem; } .bonus-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.33rem 0.65rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, rgba(217, 177, 104, 0.14), var(--sunken)); border-left: 2px solid var(--gold); font-size: 0.88rem; } .bonus-list li::before { content: "◆"; color: var(--gold); font-size: 0.58rem; } .bonus-list strong { color: var(--gold-ink); margin-left: auto; font-variant-numeric: tabular-nums; } .bonus-list--socket li { border-left-color: var(--red); background: linear-gradient(90deg, rgba(181, 55, 42, 0.16), var(--sunken)); } .bonus-list--socket li::before { color: var(--red-hot); } .pack-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 1.1rem; } .pack { position: relative; text-align: center; padding: 1.05rem 0.8rem 0.95rem; background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 10px solid transparent; border-image: url("/static/img/ui/frame.png") 30 / 10px / 0 stretch; transition: transform .16s, filter .16s; } .pack:hover { transform: translateY(-3px); filter: brightness(1.08); } .pack__art { width: 74px; height: 74px; margin: 0 auto 0.45rem; display: grid; place-items: center; background: url("/static/img/ui/item-slot.png") center / contain no-repeat; } .pack__art img { width: 44px; height: 44px; } .pack h3 { font-size: 0.96rem; margin: 0 0 0.3rem; } .pack__coins { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; color: var(--gold-ink); } .pack__coins img { width: 22px; height: 22px; } .pack__bonus { display: inline-block; margin-top: 0.28rem; } .pack__price { margin: 0.4rem 0 0; font-weight: 700; color: var(--heading); } .code-input { text-transform: uppercase; letter-spacing: 0.14em; font-family: ui-monospace, monospace; text-align: center; } .proto-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .proto-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.84rem; } .prize-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.12rem; } .prize-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; font-size: 0.84rem; padding: 0.28rem 0.4rem; border-radius: var(--radius-sm); } .prize-list li:nth-child(odd) { background: var(--tr-odd); } .prize-list li > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prize-list img { width: 24px; height: 24px; image-rendering: pixelated; } /* ============================================================ ROATA ======== */ .wheel-page { --wheel-size: 430px; } .wheel-page--lv1 { --wheel-bg: url("/static/img/shop/bg-lv1.jpg"); } .wheel-page--lv2 { --wheel-bg: url("/static/img/shop/bg-lv2.jpg"); } .wheel-page--lv3 { --wheel-bg: url("/static/img/shop/bg-lv3.jpg"); } .wheel-levels { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1rem; } .wheel-levels__item { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.48rem 1.05rem; min-width: 152px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-dim); background: linear-gradient(180deg, var(--card-1), var(--card-2)); box-shadow: var(--shadow-card); } .wheel-levels__item strong { font-family: var(--display); letter-spacing: 0.08em; color: var(--text); } .wheel-levels__item.is-active { border-color: var(--gold); color: var(--heading); background: linear-gradient(180deg, var(--raise-1), var(--raise-2)); box-shadow: var(--shadow-card), 0 0 20px rgba(217, 177, 104, 0.25); } .wheel-levels__item.is-active strong { color: #fff; } .wheel-levels__item.is-active .wheel-levels__cost, .wheel-levels__item.is-active .muted { color: rgba(255, 240, 220, 0.85); } .wheel-levels__item.is-locked { opacity: 0.55; } .wheel-levels__cost { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; } .wheel-levels__cost img { width: 14px; height: 14px; } .wheel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 1.1rem; align-items: start; } .wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.3rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--bg); background-image: var(--stage-veil), var(--wheel-bg); background-size: cover; background-position: center; box-shadow: var(--shadow-deep); } .wheel { position: relative; width: var(--wheel-size); max-width: 100%; aspect-ratio: 1 / 1; } .wheel__glow { position: absolute; inset: -8%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(217, 177, 104, 0.22), transparent 62%); } .wheel__disc { position: absolute; inset: 0; border-radius: 50%; background: url("/static/img/ui/wheel-disc.png") center / contain no-repeat; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6)); transition: transform 5.2s cubic-bezier(0.17, 0.67, 0.14, 1); will-change: transform; } .wheel__slot { position: absolute; top: 0; left: 50%; width: 76px; height: 50%; margin-left: -38px; transform-origin: 50% 100%; transform: rotate(calc(var(--i) * 22.5deg)); } .wheel__slot-inner { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding-top: 26px; text-align: center; line-height: 1; } .wheel__slot-inner img { margin: 0 auto; width: 36px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)); } .wheel__slot-value { display: inline-block; padding: 0.05rem 0.32rem; border-radius: 999px; font-family: var(--display); font-size: 0.68rem; line-height: 1.35; background: rgba(8, 3, 4, 0.8); color: #f6e4b6; border: 1px solid rgba(217, 177, 104, 0.6); } .wheel__slot-value--bonus { color: #ffd6ec; border-color: rgba(226, 140, 190, 0.6); } /* sectorul câștigător, după oprire */ .wheel__slot.is-winner .wheel__slot-inner img { transform: scale(1.18); } .wheel__slot.is-winner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 34%, rgba(255, 232, 170, 0.55), transparent 62%); animation: winner 1.1s ease-in-out 3; } @keyframes winner { 50% { opacity: 0.25; } } .wheel__hub { position: absolute; top: 50%; left: 50%; width: 27%; height: 27%; transform: translate(-50%, -50%); border-radius: 50%; background: url("/static/img/ui/wheel-hub.png") center / contain no-repeat; display: grid; place-items: center; z-index: 2; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7)); } .wheel__hub img { width: 62%; height: auto; border-radius: 50%; } .wheel__pointer { position: absolute; top: -22px; left: 50%; width: 46px; z-index: 4; transform: translateX(-50%); filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.75)); } .wheel-result { min-height: 5.4rem; width: 100%; max-width: 30rem; text-align: center; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-1), var(--panel-2)); opacity: 0.7; transition: opacity .2s, box-shadow .3s, border-color .3s; } .wheel-result.is-visible { opacity: 1; } .wheel-result img { margin: 0 auto 0.3rem; } .wheel-result p { margin: 0.15rem 0; } .wheel-result__title { font-family: var(--display); font-size: 1.18rem; color: var(--gold-ink); } .wheel-result img { image-rendering: pixelated; } /* Legenda de sub roată: numărul sectorului, iconița, numele, șansa. */ .wheel-legend { width: 100%; } .wheel-legend h3 { text-align: center; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 0.6rem; } .wheel-legend__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.15rem 0.9rem; counter-reset: prize; } .wheel-legend__list li { display: grid; grid-template-columns: 1.5rem 26px minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; padding: 0.24rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.82rem; } .wheel-legend__list li:nth-child(odd) { background: rgba(255, 255, 255, 0.05); } .wheel-legend__no { font-family: var(--display); font-size: 0.75rem; color: var(--gold-ink); text-align: center; opacity: 0.85; } .wheel-legend__list img { width: 24px; height: auto; image-rendering: pixelated; } .wheel-legend__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .wheel-legend__odds { font-size: 0.75rem; color: var(--text-mute); font-variant-numeric: tabular-nums; } .how-list { margin: 0; padding-left: 0; list-style: none; font-size: 0.85rem; color: var(--text-dim); } .how-list li { position: relative; padding: 0.25rem 0 0.25rem 1.1rem; } .how-list li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: 0.6rem; top: 0.55rem; } .wheel-result--error { border-color: rgba(217, 83, 79, 0.65); } .wheel-result--error p { color: var(--err-ink); } .wheel-result--jackpot { border-color: var(--gold); box-shadow: 0 0 36px rgba(217, 177, 104, 0.4); } .wheel-side { display: flex; flex-direction: column; gap: 0.85rem; } .keys-plaque { display: flex; align-items: center; gap: 0.65rem; margin: 0.8rem 0 0; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(90deg, rgba(217, 177, 104, 0.16), var(--sunken)); } .keys-plaque img { width: 28px; height: 28px; flex: none; } .keys-plaque__count { font-family: var(--display); font-size: 1.32rem; color: var(--gold-ink); line-height: 1; } .keys-plaque__label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); } .keys-plaque__hint { margin-left: auto; text-align: right; font-size: 0.69rem; color: var(--text-mute); line-height: 1.3; } /* ------------------------------------------------------ FERESTRE ÎNGUSTE --- */ @media (max-width: 1100px) { .wheel-layout { grid-template-columns: 1fr; } .wheel-page { --wheel-size: 380px; } .shop-layout { grid-template-columns: 190px minmax(0, 1fr); } .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .item-card__slot { width: 74px; height: 74px; } .item-card__slot img { height: 54px; } .head-user__name { max-width: 7rem; } } /* Ecrane de laptop: strângem meniul ca antetul să rămână pe un singur rând. */ @media (max-width: 1340px) { .nav a { padding: 0.5rem 0.4rem; font-size: 0.76rem; letter-spacing: 0.03em; } .head-actions .purse .coin-chip { padding: 0.2rem 0.5rem; } .head-actions .purse .coin-chip span { display: none; } .user-menu__name { max-width: 6rem; } .brand__text strong { font-size: 1.2rem; } } @media (max-width: 1150px) { :root { --head-h: 60px; } .site-head__inner { flex-wrap: wrap; height: auto; min-height: var(--head-h); padding-block: 0.4rem; } .nav-burger { display: block; order: 1; margin-left: auto; width: 40px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; position: relative; background: var(--soft-fill); } .nav-burger span, .nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--gold); border-radius: 2px; } .nav-burger span { top: 16px; } .nav-burger::before { top: 10px; } .nav-burger::after { top: 22px; } .nav { display: none; order: 5; width: 100%; flex-direction: column; gap: 0; margin: 0 0 0.5rem; border-top: 1px solid var(--line); padding-top: 0.4rem; } .nav a { padding: 0.6rem 0.5rem; border-radius: 0; font-size: 0.9rem; } .nav a::after { display: none; } .nav-toggle:checked ~ .nav { display: flex; } .brand { order: 0; } .head-actions { order: 2; } .head-actions .purse .coin-chip span { display: none; } .user-menu__name { max-width: 6rem; } .hero__char { width: 60%; opacity: 0.4; } .hero__inner { padding-top: 2.4rem; } table { min-width: 540px; } } @media (max-width: 620px) { .head-actions .purse { display: none; } .brand__text small { display: none; } } @media (max-width: 860px) { .shop-layout { grid-template-columns: 1fr; } .shop-side { position: static; } .cat-list { display: flex; flex-wrap: wrap; gap: 0.3rem; } .cat-list li { flex: 1 1 auto; } .cat-list__count { display: none; } } @media (max-width: 780px) { .item-detail { grid-template-columns: 1fr; } .wheel-page { --wheel-size: 300px; } .wheel__slot { width: 60px; margin-left: -30px; } .wheel__slot-inner { padding-top: 18px; } .wheel__slot-inner img { width: 28px; } .wheel__slot-value { font-size: 0.6rem; } .shop-top { flex-direction: column; align-items: stretch; } .shop-top__right { justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .wheel__disc { transition-duration: 0.2s; } .item-card, .pack, .news-card, .btn { transition: none; } } /* ============================================================================ PREZENTAREA SERVERULUI (/prezentare) ========================================================================== */ .prez-subtitle { margin: 1.6rem 0 0.8rem; font-size: 1.2rem; } .sys-grid { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.45rem; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } .sys-badge { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem 0.6rem; min-height: 2.6rem; font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-ink); background: linear-gradient(180deg, var(--card-1), var(--card-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--inset-hi), var(--shadow-card); transition: transform .14s, border-color .14s, color .14s; } .sys-badge:hover { transform: translateY(-2px); border-color: var(--line-2); color: var(--heading); } .prez-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.2rem; align-items: start; } .prez-nav { position: sticky; top: calc(var(--head-h) + 14px); padding: 0.75rem 0.8rem; background: linear-gradient(180deg, var(--panel-1), var(--panel-2)), var(--tex-panel) center / cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .prez-nav__head { display: block; font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.5rem; } .prez-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: prez; } .prez-nav li { counter-increment: prez; } .prez-nav a { display: block; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.85rem; } .prez-nav a::before { content: counter(prez) ". "; color: var(--gold); font-size: 0.78rem; } .prez-nav a:hover { background: var(--nav-hover); color: var(--heading); } .prez-doc { max-width: 900px; margin-inline: auto; } .prez-block { margin-bottom: 1.4rem; scroll-margin-top: calc(var(--head-h) + 16px); } .prez-block__title { font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); text-align: center; margin: 0 0 0.6rem; position: relative; } .prez-block__title::after { content: ""; display: block; height: 16px; margin-top: 0.4rem; background: url("/static/img/ui/divider.png") center / auto 100% no-repeat; opacity: 0.8; } .prez-img { /* Exact 900px pe desktop (fără mărire), 100% doar sub 900px. */ width: 900px; max-width: 100%; height: auto; margin: 0 auto; image-rendering: auto; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); background: #140708; } .prez-block .prez-img + .prez-img { border-top: none; } @media (max-width: 900px) { .prez-layout { grid-template-columns: 1fr; } .prez-nav { position: static; } .prez-nav ol { display: flex; flex-wrap: wrap; gap: 0.25rem; } .prez-nav a { border: 1px solid var(--line); } } /* ---- Fereastra din joc (browserul CEF al clientului): layout compact ---- */ .is-ingame .site-head__inner { gap: 1rem; } .is-ingame .nav--ingame { margin-inline: auto; } .is-ingame .nav--ingame a { font-size: 0.95rem; } .is-ingame main { min-height: calc(100vh - var(--head-h)); padding-bottom: 1.5rem; } .is-ingame .wrap { width: min(100% - 1.2rem, 1560px); } /* ============================================================================ CONFIGURATORUL DE ITEME (bonusuri + pietre + preview „ca în joc”) Grilă simplă pe două coloane: în stânga selectoarele, în dreapta previzualizarea și prețul (lipite la derulare). Nimic poziționat absolut. Doar jetoanele temei, deci arată la fel de bine pe fundal închis și pe pergament. ========================================================================== */ .cfg { margin: 1.1rem 0 1.3rem; max-width: none; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-1), var(--card-2)); box-shadow: var(--inset-hi); padding: 1rem 1.1rem 1.1rem; } .cfg__intro { margin: -0.5rem 0 1rem; } .cfg__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(232px, 27%, 290px); gap: 1.1rem; align-items: start; } .cfg__controls { display: grid; gap: 0.85rem; min-width: 0; } .cfg__box { min-width: 0; border: 1px solid var(--line-soft); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); background: var(--sunken); padding: 0.7rem 0.85rem 0.8rem; } .cfg__box--rare { border-left-color: var(--red); } .cfg__box--addon { border-left-color: #e0a35a; } .cfg__box--addon .checkline + .checkline { margin-top: 0.35rem; } .cfg__box--stone { border-left-color: var(--line-2); } .cfg__box--gem { border-left-color: var(--gold-hi); } .cfg__box h4 { margin: 0 0 0.55rem; } .cfg__box h4 span { text-transform: none; letter-spacing: normal; } .cfg__box > p:last-child { margin: 0.5rem 0 0; } .cfg__row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.6rem; align-items: center; } .cfg__row + .cfg__row { margin-top: 0.45rem; } .cfg__row > label { margin: 0; font-size: 0.78rem; color: var(--text-dim); letter-spacing: normal; text-transform: none; white-space: nowrap; } .cfg__row select { width: 100%; min-width: 0; } .cfg__row select option:disabled { color: var(--text-mute); } .cfg__side { position: sticky; top: 1rem; align-self: start; display: grid; gap: 0.8rem; min-width: 0; } /* Cardul de previzualizare imită tooltipul din joc, deci rămâne închis la culoare în ambele teme (își pictează singur fundalul). */ .tooltip-card { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(16, 8, 9, 0.97), rgba(6, 2, 3, 0.98)); box-shadow: var(--shadow-card); padding: 0.7rem 0.75rem 0.75rem; font-size: 0.82rem; } .tooltip-card__head { display: flex; gap: 0.55rem; align-items: center; margin-bottom: 0.55rem; } .tooltip-card__slot-art { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: url("/static/img/ui/item-slot.png") center / contain no-repeat; } .tooltip-card__name { margin: 0; font-family: var(--display); font-size: 0.95rem; color: #efe6e1; line-height: 1.25; } .tooltip-card__name--refined { color: #f6e4b6; text-shadow: 0 0 10px rgba(217, 177, 104, 0.45); } .tooltip-card__kind { margin: 0.12rem 0 0; font-size: 0.72rem; color: #9c8b86; } .tooltip-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.12rem; } .tooltip-card__list:empty { display: none; } .tooltip-card__list li { display: flex; align-items: center; gap: 0.32rem; line-height: 1.4; } .tooltip-card__list--normal li { color: #79aee0; } /* albastru, ca bonusurile normale din client */ .tooltip-card__list--rare li { color: #ef97c6; } /* roz, ca bonusurile rare */ .tooltip-card__list--addon li { color: #f0c27a; } /* PGM / PC (item_addon.cpp) */ .tooltip-card__list--addon em { font-style: normal; color: #9c8b86; } .tooltip-card__list--stone li { color: #93dc9f; } .tooltip-card__empty { color: #8a7a76 !important; font-style: italic; } .tooltip-card__list + .tooltip-card__list { margin-top: 0.3rem; } .tooltip-card__level { margin: 0.55rem 0 0; padding-top: 0.45rem; border-top: 1px solid rgba(217, 177, 104, 0.22); color: #b6a29e; font-size: 0.78rem; } .tooltip-card__level strong { color: #f6e4b6; } .cfg__price { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); padding: 0.7rem 0.8rem 0.75rem; } .cfg__price h4 { margin: 0 0 0.45rem; } .cfg__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.84rem; } .cfg__lines li { display: flex; justify-content: space-between; gap: 0.6rem; color: var(--text-dim); } .cfg__lines strong { color: var(--gold-ink); font-variant-numeric: tabular-nums; } .cfg__discount { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--ok-ink); } .cfg__total { margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-family: var(--display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.76rem; color: var(--text-dim); } .cfg__total .price { font-size: 1.2rem; margin-left: auto; } /* Configurația aleasă, sub o cumpărătură din istoric. */ .cfg-mini { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; } .cfg-mini li { font-size: 0.7rem; line-height: 1.6; padding: 0 0.4rem; border-radius: 3px; background: var(--soft-fill); border: 1px solid var(--line-soft); color: var(--text-dim); } .cfg-mini__normal { border-left: 2px solid #4f8ec4; } .cfg-mini__rare { border-left: 2px solid var(--red); } .cfg-mini__addon { border-left: 2px solid #e0a35a; } .cfg-mini__stone { border-left: 2px solid var(--ok); } /* Panoul „Premii de revendicat”: numele sus, butonul pe rândul lui (nu se taie). */ .prize-list .claim-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.3rem 0.5rem; align-items: center; padding: 0.45rem 0.5rem; } .prize-list .claim-row > .claim-row__name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } .prize-list .claim-row > .tiny { grid-column: 2; } .prize-list .claim-row__btn { grid-column: 1 / -1; justify-self: start; } @media (max-width: 1180px) { .cfg__row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.45rem; } } @media (max-width: 900px) { .cfg__grid { grid-template-columns: minmax(0, 1fr); } .cfg__side { position: static; } } @media (max-width: 520px) { .cfg__row { grid-template-columns: minmax(0, 1fr); } .cfg__row > label { white-space: normal; } } .cfg-gift { max-width: 26rem; } .cfg-plus { margin: 0.4rem 0 0; } .item-detail__body .form--wide > .btn { align-self: flex-start; } /* Fără preț (revendicarea unui premiu) coloana din dreapta poate fi mai îngustă. */ .cfg[data-price="0"] .cfg__grid { grid-template-columns: minmax(0, 1fr) clamp(220px, 26%, 270px); } /* Blocul „Configurator” din formularul de item (admin). */ .cfg-admin { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); padding: 0.75rem 1rem 0.95rem; margin: 0; } .cfg-admin > legend { font-family: var(--display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.76rem; color: var(--gold-ink); padding: 0 0.4rem; } .cfg-admin .checkline + .checkline { margin-top: 0.35rem; } .cfg-admin .row2 { margin-top: 0.8rem; } .cfg-admin > p:last-child { margin-bottom: 0; } /* ============================================================== EVENIMENTE === */ /* Pagina publică /evenimente, banda de pe prima pagină și panoul de admin. Totul din variabilele temei, deci merge identic pe „întuneric” și „lumină”. */ .alert--warning { border-color: rgba(217, 164, 65, 0.65); } .alert--info { border-color: var(--line); } .event-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .event-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-1), var(--card-2)); box-shadow: var(--shadow-card); border-left: 3px solid var(--line-2); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-deep); } .event-card--active { border-left-color: var(--gold); } .event-card--upcoming { border-left-color: var(--line-2); } .event-card__banner { display: block; width: 100%; height: 148px; object-fit: cover; } .event-card__body { padding: 1rem 1.15rem 1.1rem; } .event-card__body h3 { margin: 0.15rem 0 0.4rem; font-size: 1.1rem; color: var(--heading); } .event-card__meta { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem; } .event-card__summary { margin: 0 0 0.5rem; color: var(--text-dim); } .event-card__when { margin: 0 0 0.6rem; } .event-card__text { font-size: 0.9rem; color: var(--text-dim); } .event-card__text > :last-child { margin-bottom: 0; } .event-card__text h2, .event-card__text h3 { font-size: 0.98rem; margin: 0.6rem 0 0.3rem; } .event-reward { margin: 0.7rem 0 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: var(--sunken); font-size: 0.87rem; } .event-left { font-size: 0.73rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); } /* Pastile de stare, folosite și în listă și în formular. */ .event-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); background: var(--soft-fill-2); color: var(--text-dim); white-space: nowrap; } .event-pill--active { border-color: rgba(86, 169, 112, 0.6); color: var(--ok-ink); } .event-pill--scheduled { border-color: rgba(217, 164, 65, 0.6); color: var(--gold-ink); } .event-pill--ended { opacity: 0.75; } .event-pill--cancelled { border-color: rgba(217, 83, 79, 0.6); color: var(--err-ink); } .event-pill--draft { border-style: dashed; } /* Banda „Eveniment activ” de pe prima pagină. */ .event-strip { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--radius); background: linear-gradient(180deg, var(--raise-1), var(--raise-2)); padding: 0.75rem 1.1rem; box-shadow: var(--shadow-card); } .event-strip__tag { font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; color: var(--gold-ink); white-space: nowrap; } .event-strip__text { flex: 1 1 16rem; margin: 0; color: var(--text); } .event-strip__text strong { color: var(--heading); } /* Panoul de administrare. */ .event-type-block { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); padding: 0.8rem 1rem 0.9rem; } .event-type-block > :last-child { margin-bottom: 0; } .cmd-list { list-style: none; margin: 0.4rem 0 0.9rem; padding: 0; } .cmd-list li { padding: 0.22rem 0; font-size: 0.86rem; } .btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } /* ================================================================ PROMOȚII === */ /* Pagina publică /promotii, banda de pe prima pagină / din Știri și lista verde-roșie de condiții. Aceleași variabile ca restul temei, deci merge identic pe „întuneric” și pe „lumină”. */ /* Fâșia de secțiuni din capul paginilor Știri / Promoții / Evenimente. */ .news-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; } .news-tabs a { padding: 0.3rem 0.8rem; border-radius: 999px; text-decoration: none; font-size: 0.86rem; color: var(--text-dim); border: 1px solid transparent; background: var(--soft-fill-2); } .news-tabs a:hover { color: var(--heading); border-color: var(--line-2); } .news-tabs a.is-active { color: var(--gold-ink); border-color: rgba(217, 164, 65, 0.55); background: var(--sunken); } .promo-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-1), var(--card-2)); box-shadow: var(--shadow-card); border-left: 3px solid var(--line-2); } .promo-card--active { border-left-color: var(--gold); } .promo-card__body { padding: 1rem 1.15rem 0.9rem; } .promo-card__body h3 { margin: 0.15rem 0 0.4rem; font-size: 1.1rem; color: var(--heading); } .promo-card__foot { margin-top: auto; padding: 0.85rem 1.15rem 1rem; border-top: 1px solid var(--line); background: var(--sunken); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .promo-rewards { margin: 0.35rem 0 0; padding-left: 1.1rem; } .promo-rewards li { padding: 0.1rem 0; } /* Condițiile: bifat = verde, lipsă = roșu. Semnul are și text, nu doar culoare. */ .cond-list { list-style: none; margin: 0; padding: 0; width: 100%; } .cond { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.22rem 0; font-size: 0.88rem; } .cond__mark { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; line-height: 1.15rem; text-align: center; border-radius: 50%; font-size: 0.72rem; border: 1px solid var(--line); } .cond--ok { color: var(--text); } .cond--ok .cond__mark { color: var(--ok-ink); border-color: rgba(86, 169, 112, 0.6); } .cond--bad { color: var(--text-dim); } .cond--bad .cond__mark { color: var(--err-ink); border-color: rgba(217, 83, 79, 0.6); } /* Subtitlurile din formularul de administrare a promoțiilor. */ .form-part { margin: 1.4rem 0 0.2rem; font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold-ink); } /* Itemshop v4: subcategorii + filtru pe clasă */ .shop-subs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 1rem} .shop-subs--class{margin-top:-.4rem} .shop-subs .pill{display:inline-block;padding:.25rem .7rem;border:1px solid var(--line,#c9b79a);border-radius:999px;font-size:.85rem;text-decoration:none;color:inherit;background:var(--panel,rgba(255,255,255,.35))} .shop-subs .pill.is-active{background:var(--accent,#8b2f2f);color:#fff;border-color:transparent} /* --- Turneu PvP (admin): randuri care cer atentie ------------------------- */ .is-late > td { background: rgba(217, 164, 65, 0.10); } .is-suspect > td { background: rgba(217, 83, 79, 0.12); } /* ============================================================================ CALENDARUL DE EVENIMENTE (/evenimente/calendar) — PROGRAM-SPEC §3 Grilă de lună făcută doar din CSS grid: 7 coloane luni..duminică, fără niciun script. Sub 720px grila se preface într-o listă de zile (doar zilele cu evenimente). Culorile jetoanelor sunt jetoane de temă noi, definite pentru ambele teme, ca să rămână lizibile și pe negru, și pe pergament. ========================================================================== */ /* --- jetoanele de culoare (tema întunecată, cea implicită) ---------------- */ :root { --cal-exp: #7fa8ff; --cal-exp-bg: rgba(127, 168, 255, 0.16); --cal-drop: #6fdc92; --cal-drop-bg: rgba(111, 220, 146, 0.16); --cal-yang: #e8c256; --cal-yang-bg: rgba(232, 194, 86, 0.16); --cal-coins: #ef9d4c; --cal-coins-bg: rgba(239, 157, 76, 0.16); --cal-ox: #c793f2; --cal-ox-bg: rgba(199, 147, 242, 0.16); --cal-tourney: #e8635a; --cal-tourney-bg: rgba(232, 99, 90, 0.18); --cal-holiday: #f486b2; --cal-holiday-bg: rgba(244, 134, 178, 0.16); --cal-other: #a8b0b8; --cal-other-bg: rgba(168, 176, 184, 0.14); } :root[data-theme="light"] { --cal-exp: #27479b; --cal-exp-bg: rgba(39, 71, 155, 0.13); --cal-drop: #1d6a40; --cal-drop-bg: rgba(29, 106, 64, 0.13); --cal-yang: #8a6410; --cal-yang-bg: rgba(138, 100, 16, 0.14); --cal-coins: #964d0d; --cal-coins-bg: rgba(150, 77, 13, 0.13); --cal-ox: #68299b; --cal-ox-bg: rgba(104, 41, 155, 0.12); --cal-tourney: #9d2b20; --cal-tourney-bg: rgba(157, 43, 32, 0.13); --cal-holiday: #9d2a58; --cal-holiday-bg: rgba(157, 42, 88, 0.12); --cal-other: #565c63; --cal-other-bg: rgba(86, 92, 99, 0.12); } /* --- grila ---------------------------------------------------------------- */ .cal { margin: 1.1rem 0 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--panel-1), var(--panel-2)); box-shadow: var(--shadow-card); } .cal__wdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--thead); border-bottom: 1px solid var(--line); } .cal__wday { padding: 0.42rem 0.25rem; text-align: center; font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); } .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); } .cal-day { min-height: 104px; min-width: 0; background: var(--sunken); padding: 0.28rem 0.32rem 0.4rem; display: flex; flex-direction: column; gap: 0.22rem; } .cal-day--out { background: rgba(0, 0, 0, 0.22); } :root[data-theme="light"] .cal-day--out { background: rgba(90, 62, 26, 0.10); } .cal-day__num { font-family: var(--display); font-size: 0.84rem; color: var(--text-mute); line-height: 1; text-align: right; } .cal-day__label { display: none; } .cal-day.is-today { box-shadow: inset 0 0 0 2px var(--gold); background: var(--soft-fill-2); } .cal-day.is-today .cal-day__num { color: var(--gold-hi); font-weight: 700; } .cal-day__items { display: flex; flex-direction: column; gap: 0.16rem; min-width: 0; } /* --- jetoanele din celule -------------------------------------------------- */ .cal-chip { display: flex; gap: 0.28rem; align-items: baseline; min-width: 0; padding: 0.14rem 0.3rem; border-radius: var(--radius-sm); border-left: 3px solid var(--cal-other); background: var(--cal-other-bg); color: var(--text); text-decoration: none; font-size: 0.72rem; line-height: 1.25; } .cal-chip:hover { color: var(--heading); background: var(--soft-fill-2); } .cal-chip__h { flex: 0 0 auto; font-weight: 600; color: var(--cal-other); } .cal-chip__go { flex: 0 0 auto; color: var(--text-mute); } .cal-chip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* continuarea unui eveniment care ține mai multe zile: mai stinsă */ .cal-chip--cont { opacity: 0.6; border-left-style: dotted; } .cal-chip--exp { border-left-color: var(--cal-exp); background: var(--cal-exp-bg); } .cal-chip--exp .cal-chip__h { color: var(--cal-exp); } .cal-chip--drop { border-left-color: var(--cal-drop); background: var(--cal-drop-bg); } .cal-chip--drop .cal-chip__h { color: var(--cal-drop); } .cal-chip--yang { border-left-color: var(--cal-yang); background: var(--cal-yang-bg); } .cal-chip--yang .cal-chip__h { color: var(--cal-yang); } .cal-chip--coins { border-left-color: var(--cal-coins); background: var(--cal-coins-bg); } .cal-chip--coins .cal-chip__h { color: var(--cal-coins); } .cal-chip--ox { border-left-color: var(--cal-ox); background: var(--cal-ox-bg); } .cal-chip--ox .cal-chip__h { color: var(--cal-ox); } .cal-chip--tourney { border-left-color: var(--cal-tourney); background: var(--cal-tourney-bg); } .cal-chip--tourney .cal-chip__h { color: var(--cal-tourney); } .cal-chip--holiday { border-left-color: var(--cal-holiday); background: var(--cal-holiday-bg); } .cal-chip--holiday .cal-chip__h { color: var(--cal-holiday); } .cal-chip--other { border-left-color: var(--cal-other); background: var(--cal-other-bg); } /* --- legenda + eticheta din tabel ------------------------------------------ */ .cal-legend { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .cal-legend__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-dim); } .cal-legend__dot { display: inline-block; width: 0.8rem; height: 0.8rem; flex: 0 0 auto; border-radius: 3px; border: 1px solid var(--line); background: var(--cal-other); } .cal-legend__dot.cal-chip--exp { background: var(--cal-exp); border-color: var(--cal-exp); } .cal-legend__dot.cal-chip--drop { background: var(--cal-drop); border-color: var(--cal-drop); } .cal-legend__dot.cal-chip--yang { background: var(--cal-yang); border-color: var(--cal-yang); } .cal-legend__dot.cal-chip--coins { background: var(--cal-coins); border-color: var(--cal-coins); } .cal-legend__dot.cal-chip--ox { background: var(--cal-ox); border-color: var(--cal-ox); } .cal-legend__dot.cal-chip--tourney { background: var(--cal-tourney); border-color: var(--cal-tourney); } .cal-legend__dot.cal-chip--holiday { background: var(--cal-holiday); border-color: var(--cal-holiday); } .cal-legend__dot.cal-chip--other { background: var(--cal-other); border-color: var(--cal-other); } .tag.cal-tag { border-left-width: 3px; border-left-style: solid; color: var(--text); } .cal-list td { vertical-align: top; } .cal-nav { flex-wrap: nowrap; } /* --- widgetul „Următoarele evenimente” de pe prima pagină ------------------ */ .next-events__head { margin-bottom: 0.6rem; } .next-events__head h2 { font-size: 1.05rem; } .next-events__list { list-style: none; margin: 0; padding: 0; } .next-events__item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.34rem 0; border-top: 1px solid var(--line-soft); } .next-events__item:first-child { border-top: none; } .next-events__when { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .next-events__title { flex: 1 1 12rem; min-width: 0; color: var(--heading); text-decoration: none; } .next-events__title:hover { color: var(--link); } /* --- sub 720px: grila devine o listă de zile (doar cele cu evenimente) ----- */ @media (max-width: 719px) { .cal__wdays { display: none; } .cal__grid { display: block; gap: 0; background: transparent; } .cal-day { display: none; } .cal-day--out { display: none; } .cal-day.has-items { display: block; min-height: 0; padding: 0.55rem 0.7rem 0.65rem; border-bottom: 1px solid var(--line-soft); box-shadow: none; } .cal-day.has-items.is-today { box-shadow: inset 3px 0 0 var(--gold); } .cal-day__num { display: none; } .cal-day__label { display: block; margin-bottom: 0.35rem; font-family: var(--display); font-size: 0.86rem; color: var(--gold-ink); text-transform: capitalize; } .cal-chip { font-size: 0.86rem; padding: 0.28rem 0.42rem; } .cal-chip__t { white-space: normal; } .cal-nav { flex-wrap: wrap; } } /* --- fereastra din joc: 640px utili, font mai mare, fără derulare laterală -- */ .is-ingame-cal { font-size: 17px; } .is-ingame .wrap--ingame, .is-ingame-cal .wrap--ingame { width: min(100% - 0.9rem, 640px); margin-inline: auto; } .is-ingame-cal main { min-height: 0; } .is-ingame-cal .section--first { padding-top: 0.9rem; } .is-ingame-cal h1 { font-size: 1.35rem; margin: 0; } .is-ingame-cal h2 { font-size: 1.1rem; margin: 1.1rem 0 0.5rem; } .is-ingame-cal .cal-ingame__head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; } .is-ingame-cal .cal { margin-top: 0.7rem; } .is-ingame-cal .cal-day { min-height: 78px; padding: 0.22rem 0.24rem 0.3rem; } .is-ingame-cal .cal__wday { padding: 0.34rem 0.15rem; font-size: 0.74rem; } .is-ingame-cal .cal-day__num { font-size: 0.78rem; } .is-ingame-cal .cal-chip { font-size: 0.7rem; padding: 0.1rem 0.24rem; gap: 0.2rem; } .is-ingame-cal .cal-legend { gap: 0.3rem 0.7rem; font-size: 0.78rem; } /* tabelul lunii nu are voie să împingă pagina în lateral la 640px */ .is-ingame-cal table { min-width: 0; font-size: 0.82rem; } .is-ingame-cal table th, .is-ingame-cal table td { padding: 0.3rem 0.4rem; } .is-ingame-cal .table-wrap { overflow-x: hidden; } .is-ingame-cal .cal-note { margin: 0.8rem 0 0.4rem; } /* --- Căutare de conturi (admin: Monede) --- */ .ac-wrap { position: relative; } .ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; max-height: 320px; overflow-y: auto; background: var(--bg-elev, #1b1b1f); border: 1px solid var(--border, #3a3a44); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); margin-top: 4px; } .ac-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border, #2c2c34); } .ac-item:last-child { border-bottom: 0; } .ac-item:hover, .ac-item.is-active { background: rgba(255, 200, 90, .12); } .ac-item--empty { cursor: default; color: var(--muted, #9a9aa5); } .ac-item__head { display: flex; justify-content: space-between; gap: 8px; } .ac-item__coins { font-size: .85em; color: var(--gold, #e8c46a); } .ac-item__chars { font-size: .85em; color: var(--muted, #9a9aa5); margin-top: 2px; }