/* ===================================================================================== HALA SHOOTER – felület · B · MŰSZAK tervrendszer (agent/reskin) „A környéked, amikor senki sem nézi.” Filmes, fotó-/jelenet-alapú, sötét alap; nagy keskeny display-betű (Big Shoulders Display) + Inter Tight + DM Mono; EGYETLEN akcentus: a pálya fénye (01 Hala · 04:12 · nátriumlámpa). Szín csak jelentéssel: csapat (rózsa / kék), állapot (zöld / piros); a pénz (FP) és a kiemelés a pálya fénye. Minden szín, betű, forma és mozgás innen jön – a többi CSS (menu, ux, anim, newroom, replay, halftime) ezekre épül. ===================================================================================== */ /* ---- saját betűk (OFL, public/fonts/, latin + latin-ext: ő ű ș ț); csatlakozási pont: csak ez a blokk ---- */ @font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/BigShouldersDisplay-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: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/BigShouldersDisplay-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/InterTight-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: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/InterTight-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/DMMono-400-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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/DMMono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/DMMono-500-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: "DM Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/DMMono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* régi családnevek → B-betűk: a vásznas feliratok (táblák, névcímkék, minitérkép, bomba, visszajátszás-kártyák) „Barlow (Condensed)”-et kérnek – a Google Fonts helyett ugyanazok a helyi fájlok szolgálják ki őket (nincs futásidejű külső betöltés) */ @font-face { font-family: "Barlow Condensed"; font-weight: 500 900; font-display: swap; src: url("fonts/BigShouldersDisplay-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: "Barlow Condensed"; font-weight: 500 900; font-display: swap; src: url("fonts/BigShouldersDisplay-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02FF; } @font-face { font-family: "Barlow"; font-weight: 400 700; font-display: swap; src: url("fonts/InterTight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: "Barlow"; font-weight: 400 700; font-display: swap; src: url("fonts/InterTight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02FF; } :root { /* alap: majdnem fekete, meleg-semleges (a filmes színezéshez) */ --bg: #060607; --bg-2: #0E0E10; --bg-3: #17171A; --surface: rgba(12, 12, 14, .80); --surface-2: rgba(12, 12, 14, .90); --surface-3: rgba(9, 9, 11, .96); --blur: blur(16px) saturate(120%); --line: rgba(245, 242, 236, .10); --line-2: rgba(245, 242, 236, .17); --line-3: rgba(245, 242, 236, .30); --fill: rgba(245, 242, 236, .04); --fill-2: rgba(245, 242, 236, .07); --fill-3: rgba(245, 242, 236, .11); --hi: inset 0 1px 0 rgba(245, 242, 236, .04); /* szöveg: törtfehér (papír), nem kékes */ --ink: #F5F2EC; --ink-2: #CBC6BD; --muted: #8E8981; --dim: #5E5A54; --paper: #F5F2EC; --on-paper: #0B0B0C; --on-paper-2: #57534D; /* kitöltött (elsődleges) gomb, kiemelt kártya */ /* a pálya fénye: az EGYETLEN akcentus (01 · Hala · 04:12 nátriumlámpa); pályánként cserélhető (body[data-map]) */ --light: #F3A25B; --light-2: #F8C899; --light-t: rgba(243, 162, 91, .13); /* szín: csak jelentéssel – csapatok, állapot */ --rose: #F0565F; --rose-2: #FF9BA1; --rose-t: rgba(240, 86, 95, .14); --blue: #5C8EF2; --blue-2: #A9C4FA; --blue-t: rgba(92, 142, 242, .14); --gold: var(--light); --gold-2: var(--light-2); --gold-t: var(--light-t); /* pénz (FP), MVP, fejlövés = a fény */ --acc: #8FD3A6; --acc-t: rgba(143, 211, 166, .12); --warn: #E9B44C; --bad: #F26363; --bad-t: rgba(242, 99, 99, .14); /* rács és formák: kisebb lekerekítés (6 px), hajszálvonal */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-xs: 3px; --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-pill: 999px; --h-sm: 32px; --h: 40px; --h-lg: 48px; --container: 1280px; --gutter: 24px; --sh: 0 8px 24px rgba(0, 0, 0, .35); --sh-lg: 0 24px 64px rgba(0, 0, 0, .55); /* HUD-olvashatóság keret nélkül: kettős árnyék (szűk kontúr + puha udvar) – világos, ködös és sötét háttéren is */ --hud-sh: 0 1px 1px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .38); --hud-sh-lg: 0 2px 2px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 0, 0, .42); --ease: cubic-bezier(.2, .8, .2, 1); --ease-film: cubic-bezier(.16, 1, .3, 1); --t-in: 700ms; --t-out: 160ms; /* filmes belépő, gyors kilépő */ --t-fast: .12s; --t: .18s; --t-slow: .24s; /* betűk: display (nagy, keskeny, nagybetűs) · szöveg · adat */ --f-disp: "Big Shoulders Display", "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif; --f-body: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif; --f-mono: "DM Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; /* filmszemcse: 1 statikus SVG-zaj (egyszer raszterizálódik, nincs animáció) */ --grain: url("data:image/svg+xml;utf8,"); --mm: 200px; /* minitérkép mérete */ --edge: 16px; /* HUD képernyőszél */ color-scheme: dark; } /* display-szöveg: nagy, keskeny, nagybetűs (címek, menüpontok, nagy számok) */ .disp { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; line-height: .86; letter-spacing: 0; } /* adat-sor: „04:12 · DJ191C · KRASZNA · +3 °C” – az óra a pálya fényével */ .shift { display: inline-flex; align-items: baseline; gap: .7em; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .shift b { font-weight: 500; color: var(--light); } .shift i { font-style: normal; color: var(--dim); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* játékszerű felület: a szöveg nem jelölhető ki, a képek nem húzhatók (a beviteli mezők kivételével) */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"], .selectable { -webkit-user-select: text; user-select: text; } img, canvas, svg { -webkit-user-drag: none; } #gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } button, input, select { font: inherit; color: inherit; } h1, h2, h3, h4, p { margin: 0; } ::selection { background: rgba(255, 255, 255, .25); color: var(--ink); } kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; vertical-align: 1px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; line-height: 1; border-radius: var(--r-xs); background: var(--fill-3); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .4), inset 0 0 0 1px var(--line); color: var(--ink); } kbd + kbd { margin-left: 2px; } .help .keys kbd { margin-right: 4px; } .hint { color: var(--muted); font-size: 13px; line-height: 1.55; } .err { color: var(--bad); min-height: 1.2em; margin: var(--s2) 0 0; font-size: 13px; } .n, #clock, #hpNum, #arNum, #ammoMag, #ammoRes, #moneyNum, .num, .cnt, .fp, .shop-money, .sc-price { font-variant-numeric: tabular-nums; } * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- közös: panel, címek ---------- */ .panel { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--hi), var(--sh); } /* szekciócím: kis, nagybetűs, ritkított – minden panelen ugyanaz */ .panel h3, .shop h4, .menu-box h3, .ars-main h4, .sec-head h3 { margin: 0 0 var(--s3); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .panel h2 { margin: 0 0 var(--s4); font-family: var(--f-disp); font-weight: 900; font-size: 30px; line-height: .9; letter-spacing: 0; text-transform: uppercase; } /* oldalcím */ .sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); } .sec-head h3 { margin: 0; } .table-wrap { max-width: 100%; overflow-x: auto; } /* ---------- gombok ---------- */ .btn { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--h); padding: 0 var(--s4); border-radius: var(--r); font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: -.005em; white-space: nowrap; user-select: none; background: var(--fill-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t), transform var(--t-fast) var(--ease), opacity var(--t); } .btn:hover { background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--line-2); } .btn:active { transform: scale(.98); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .btn.primary { background: var(--paper); color: var(--on-paper); box-shadow: none; } .btn.primary:hover { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .10); } .btn.danger { background: var(--bad-t); color: #FF9C9C; box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .25); } .btn.danger:hover { background: rgba(255, 90, 90, .22); } .btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); } .btn.ghost:hover { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-3); } .btn.small { height: var(--h-sm); font-size: 13px; padding: 0 var(--s3); border-radius: var(--r-sm); } .btn.wide { width: 100%; } .btn[disabled] { opacity: .38; cursor: not-allowed; transform: none; } .btn.primary[disabled] { background: var(--fill-2); color: var(--ink-2); } .btn kbd { margin-left: auto; } .btn.team-a, .btn.team-b { font-weight: 600; } .btn.team-a { background: var(--rose-t); color: var(--rose-2); box-shadow: inset 0 0 0 1px rgba(240, 86, 95, .22); } .btn.team-a:hover { background: rgba(240, 86, 95, .2); } .btn.team-a.on { background: var(--rose); color: var(--ink); box-shadow: none; } .btn.team-b { background: var(--blue-t); color: var(--blue-2); box-shadow: inset 0 0 0 1px rgba(92, 142, 242, .22); } .btn.team-b:hover { background: rgba(92, 142, 242, .2); } .btn.team-b.on { background: var(--blue); color: var(--ink); box-shadow: none; } /* ---------- űrlapok ---------- */ .form { display: grid; gap: var(--s4); min-width: 0; } .form label { display: grid; gap: 6px; min-width: 0; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--muted); } .form input, .form select, .settings select, .mode-opts input[type=number], .mode-opts select, #loginForm input { width: 100%; min-width: 0; height: var(--h); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .035); color: var(--ink); font-family: var(--f-body); font-size: 14px; font-weight: 500; transition: border-color var(--t), box-shadow var(--t), background var(--t); } .form input[type=number], .mode-opts input[type=number] { font-variant-numeric: tabular-nums; } .form select, .settings select, .mode-opts select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C919B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; text-overflow: ellipsis; } .form input:hover, .form select:hover, .settings select:hover, .mode-opts input:hover, .mode-opts select:hover, #loginForm input:hover { border-color: var(--line-2); } .form input:focus, .form select:focus, .settings select:focus, .mode-opts input:focus, .mode-opts select:focus, #loginForm input:focus { outline: none; border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); background-color: rgba(255, 255, 255, .06); } .form input::placeholder, #loginForm input::placeholder { color: var(--dim); } select { cursor: pointer; } select option { background: #16181D; color: var(--ink); } .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .mode-desc { font-size: 13px; color: var(--muted); line-height: 1.5; padding: var(--s3); background: var(--fill); border: 1px solid var(--line); border-radius: var(--r); } .mode-desc:empty { display: none; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 20px; margin: 0; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, .14); border-radius: 4px; } input[type=range]::-moz-range-track { height: 4px; background: rgba(255, 255, 255, .14); border-radius: 4px; } input[type=range]::-moz-range-progress { height: 4px; background: #fff; border-radius: 4px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); transition: box-shadow var(--t); } input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, .5), 0 0 0 5px rgba(255, 255, 255, .12); } input[type=range]:focus { outline: none; } input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; } /* jelölőnégyzet → kapcsoló (fekete-fehér) */ input[type=checkbox] { -webkit-appearance: none; appearance: none; position: relative; width: 32px; height: 18px; border-radius: 18px; background: rgba(255, 255, 255, .16); cursor: pointer; flex: none; transition: background var(--t) var(--ease); margin: 0; } input[type=checkbox]::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #D5D8DE; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform var(--t) var(--ease), background var(--t); } input[type=checkbox]:checked { background: var(--paper); } input[type=checkbox]:checked::after { transform: translateX(14px); background: var(--on-paper); box-shadow: none; } input[type=checkbox]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } input[type=color] { -webkit-appearance: none; appearance: none; width: 48px; height: 28px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; padding: 3px; cursor: pointer; } input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: 3px; } .screen { position: fixed; inset: 0; z-index: 20; } /* ===================================================================================== BELÉPÉS ===================================================================================== */ #login { display: grid; place-items: center; overflow: auto; padding: var(--s4); background: linear-gradient(90deg, rgba(6, 6, 7, .9), rgba(6, 6, 7, .45) 60%, rgba(6, 6, 7, .6)), linear-gradient(0deg, rgba(6, 6, 7, .85), rgba(6, 6, 7, 0) 50%); } .login-fx { position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: .07; } .login-card { position: relative; width: min(420px, 100%); padding: var(--s6) var(--s6) var(--s5); border-radius: var(--r-lg); background: rgba(14, 14, 16, .78); border: 0; box-shadow: inset 0 0 0 1px var(--line), var(--sh-lg); animation: cardIn var(--t-in) var(--ease-film) both; } @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } } .brand-mark { display: none; } .brand-mark svg { width: 100%; height: 100%; display: block; } .login-card h1.logo { margin-bottom: var(--s2); } .login-card h1.logo b { font-size: 84px; } .login-card h1.logo span { font-size: 19px; letter-spacing: .5em; } .tag { margin: var(--s3) 0 var(--s4); color: var(--muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; } .login-card .ver { display: inline-flex; align-items: center; gap: 6px; height: 22px; margin: 0 0 var(--s5); padding: 0 var(--s2); font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-pill); } .login-card .ver::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); } .login-card .ver:empty { display: none; } #loginForm label { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-bottom: var(--s2); } #loginForm input { height: var(--h-lg); font-size: 16px; margin-bottom: var(--s3); } #loginForm .btn { width: 100%; height: var(--h-lg); font-size: 15px; } .status { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px rgba(233, 180, 76, .16); animation: blink 1.2s infinite; flex: none; } .dot.ok { background: var(--acc); box-shadow: 0 0 0 3px rgba(143, 211, 166, .16); animation: none; } .dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(255, 90, 90, .16); } @keyframes blink { 50% { opacity: .35; } } /* ===================================================================================== LOBBI – egyetlen tartalomszélesség (--container), a fejléc és minden oldal ugyanarra a rácsra illeszkedik ===================================================================================== */ #lobby { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(8, 9, 11, .6), rgba(8, 9, 11, .9) 45%); } .topbar { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s5); width: min(var(--container), calc(100% - 2 * var(--gutter))); margin: var(--s4) auto 0; padding: 0 var(--s2) 0 var(--s4); height: 56px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--hi), var(--sh); } /* (reskin) szómárka – CSS, nem kép: magas, keskeny HALA + ritkított SHOOTER (egymás mellett; .stack: egymás alatt) */ .logo { flex: none; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-family: var(--f-disp); text-transform: uppercase; color: var(--ink); line-height: .8; } .logo b { font-weight: 900; font-size: 34px; letter-spacing: -.005em; color: var(--ink); } .logo span { font-weight: 800; font-size: 12.5px; letter-spacing: .34em; color: var(--ink); } .logo.stack { flex-direction: column; align-items: flex-start; gap: .32em; } .logo.stack span { margin-left: .1em; } .tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { all: unset; flex: none; cursor: pointer; position: relative; height: 36px; display: inline-flex; align-items: center; padding: 0 var(--s3); border-radius: var(--r-sm); font-weight: 500; font-size: 14px; color: var(--muted); transition: color var(--t), background var(--t) var(--ease); } .tabs button:hover { color: var(--ink); background: var(--fill); } .tabs button[aria-selected="true"] { color: var(--ink); background: var(--fill-3); } .tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .me-card { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s1) 0 var(--s3); border-radius: var(--r); background: var(--fill); border: 1px solid var(--line); } .me-card:empty { display: none; } .me-card .nm { font-weight: 600; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .me-card .rt { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .me-card .fp-badge { margin-left: var(--s1); } .rank-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); font-weight: 600; font-size: 11.5px; line-height: 1; border-radius: var(--r-pill); white-space: nowrap; background: color-mix(in srgb, currentColor 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); } .lobby-body { flex: 1; min-height: 0; overflow: auto; padding: var(--s6) var(--gutter) var(--s7); scrollbar-gutter: stable both-edges; } .tab-page { width: 100%; max-width: var(--container); margin: 0 auto; animation: pageIn var(--t-slow) var(--ease) both; } @keyframes pageIn { from { opacity: 0; transform: translateY(4px); } } .tab-page[data-page="rooms"] { display: grid; grid-template-columns: minmax(0, 1fr) 376px; gap: var(--s5); align-items: start; } /* szobák */ .room-list { display: grid; gap: var(--s2); } .room { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--s4); min-height: 72px; padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--hi); transition: border-color var(--t), background var(--t); animation: pageIn var(--t-slow) var(--ease) both; } .room:hover { border-color: var(--line-2); background: var(--surface-2); } .room > div { min-width: 0; } .room .rn { font-weight: 600; font-size: 15px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room .rm { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room .pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s2); font-weight: 600; font-size: 11.5px; border-radius: var(--r-pill); background: var(--fill-2); color: var(--muted); } .room .pill.live { color: var(--acc); background: var(--acc-t); } .room .pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; } .room .cnt { min-width: 48px; text-align: right; font-weight: 600; font-size: 15px; color: var(--ink-2); } .room .btn { min-width: 88px; } .empty { color: var(--muted); padding: var(--s6) var(--s5); text-align: center; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); font-size: 13px; } /* induló fegyverek */ .loadout-panel > .hint { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } /* ranglista */ table.lb { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } table.lb th, table.lb td { height: 44px; padding: 0 var(--s4); text-align: left; white-space: nowrap; } table.lb th { height: 36px; font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--fill); border-bottom: 1px solid var(--line); } table.lb td { border-bottom: 1px solid var(--line); font-size: 14px; } table.lb tbody tr:last-child td { border-bottom: 0; } table.lb td:first-child { width: 56px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } table.lb tbody tr:not(.empty-row):nth-child(1) td:first-child { color: var(--gold); } table.lb tbody tr:not(.empty-row):nth-child(2) td:first-child { color: #D6DBE3; } table.lb tbody tr:not(.empty-row):nth-child(3) td:first-child { color: #E0A675; } table.lb td:nth-child(2) { font-weight: 600; } table.lb .num { text-align: right; font-family: var(--f-mono); font-size: 13px; } table.lb tr.me-row td { background: var(--fill-2); } table.lb tbody tr:not(.empty-row) { transition: background var(--t); } table.lb tbody tr:not(.empty-row):hover td { background: var(--fill); } table.lb tr.empty-row td { height: 96px; text-align: center; color: var(--muted); font-weight: 500; } .ranks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); } /* beállítások */ .settings > label { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 56px; align-items: center; gap: var(--s4); min-height: 48px; margin: 0; padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); } .settings > label:last-of-type { border-bottom: 0; } .settings > label.sel { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); } /* (hangminták) kategória-hangerők: a fő hangerő alá húzva, kisebb sorok */ .settings > label.sub { min-height: 36px; padding: 2px 0 2px var(--s4); font-size: 13px; color: var(--muted); } .settings > label.check { grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); cursor: pointer; } .settings label.check small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); } .settings output { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .settings > .hint { margin-bottom: var(--s3); } .help .keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } .help .keys > div { display: block; line-height: 24px; min-height: 44px; padding: 10px var(--s3); background: var(--fill); border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); } .help h3:not(:first-child) { margin-top: var(--s5); } .help p { line-height: 1.65; color: var(--ink-2); max-width: 820px; } /* ===================================================================================== JÁTÉK HUD – minden sarok ugyanazon a --edge margón, egységes „lemez” stílus ===================================================================================== */ #hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; user-select: none; font-family: var(--f-body); text-shadow: var(--hud-sh); } #hud .btn, #hud input, #hud select, #hud button, #menu, #death .shop, #endScreen .btn { pointer-events: auto; } /* célkereszt */ #cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } #cross .c { position: absolute; background: var(--cc, #fff); box-shadow: var(--co, 0 0 0 1px rgba(0,0,0,.55)); opacity: var(--ca, 1); } #cross .t, #cross .b { width: var(--ct, 2px); height: var(--cl, 8px); left: calc(var(--ct, 2px) / -2); } #cross .l, #cross .r { width: var(--cl, 8px); height: var(--ct, 2px); top: calc(var(--ct, 2px) / -2); } #cross .dotc { position: absolute; width: var(--ct, 2px); height: var(--ct, 2px); left: calc(var(--ct, 2px) / -2); top: calc(var(--ct, 2px) / -2); background: var(--cc, #fff); box-shadow: var(--co, 0 0 0 1px rgba(0,0,0,.5)); opacity: var(--ca, 1); } #cross.nodot .dotc { display: none; } #cross.hide { display: none; } /* [gránát-skill] gránát-célzás: távolság és szórás a célkereszt alatt */ #nadeAim { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; line-height: 1; letter-spacing: .02em; color: var(--ink); text-shadow: 0 0 3px rgba(0, 0, 0, .8), 0 1px 1px rgba(0, 0, 0, .6); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; } #nadeAim[hidden] { display: none; } #hitmark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .15s; } /* távoli ölés (agent/skills2): halk felirat a célkereszt alatt */ #lrCue { position: absolute; left: 50%; top: calc(50% + 38px); transform: translate(-50%, 4px); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--gold-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; } #lrCue.show { opacity: .85; transform: translate(-50%, 0); transition-duration: .12s; } #hitmark i { position: absolute; width: 12px; height: 2px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); } #hitmark i:nth-child(1) { transform: translate(-16px, -16px) rotate(45deg); } #hitmark i:nth-child(2) { transform: translate(5px, -16px) rotate(-45deg); } #hitmark i:nth-child(3) { transform: translate(-16px, 14px) rotate(-45deg); } #hitmark i:nth-child(4) { transform: translate(5px, 14px) rotate(45deg); } #hitmark.show { opacity: 1; transition: none; } #hitmark.head i { background: var(--gold); width: 14px; } #hitmark.kill i { background: var(--bad); width: 16px; height: 3px; } #bloodScreen { position: absolute; inset: -30px; background-size: 100% 100%; background-repeat: no-repeat; opacity: 0; mix-blend-mode: multiply; filter: saturate(1.2); } #dmgNums { position: absolute; inset: 0; overflow: hidden; } .dmgnum { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 6px rgba(0,0,0,.6); will-change: transform, opacity; white-space: nowrap; font-variant-numeric: tabular-nums; } .dmgnum.head { color: var(--gold); font-size: 24px; } .dmgnum.kill { color: var(--bad); font-size: 26px; } .dmgnum.armor { color: var(--blue-2); } #vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(170,0,0,.55) 100%); opacity: 0; transition: opacity .25s; } #dmgDirs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .dmgdir { position: absolute; left: -60px; top: -170px; width: 120px; height: 40px; transform-origin: 60px 170px; opacity: .9; transition: opacity .8s; } .dmgdir::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,50,50,.85), transparent 70%); clip-path: ellipse(50% 40% at 50% 100%); } /* (reskin) B · Műszak: keret nélküli HUD – nincs lemez, nincs elmosás; az olvashatóságot a kettős szöveg-árnyék adja (--hud-sh: szűk kontúr + puha udvar), így világos (nappal, köd) és sötét (hajnal, éjszaka) háttéren is olvasható. Csak a használat- és a nézői sáv kap halvány sötét alapot (gombok, folyamatcsík). */ .score-row, #objective, .kf, .hp, .ammo-card, #money, .cash, #subMsg, #pickupMsg, #killBanner, #chatLog div { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } #useBar, #specBar { background: rgba(6, 6, 7, .62); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none; } /* --- felső eredményjelző: szimmetrikus (a óra mindig a képernyő közepén) --- */ #topCenter { position: absolute; top: var(--edge); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: var(--s2); } .score-row { display: grid; grid-template-columns: 128px 176px 128px; align-items: start; padding: 0; border-radius: 0; } .team-score { position: relative; min-width: 0; padding: 0 var(--s2); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; } .team-score.a .n { color: var(--rose); } .team-score.b .n { color: var(--blue); } .team-score.mine .lbl { color: var(--ink); } .team-score.mine .lbl::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--light); } .score-row[data-teams="0"] .team-score .n { color: var(--ink); } .score-row[data-teams="0"] .team-score .lbl { color: var(--ink-2); } .score-row[data-teams="0"] .team-score.a .n { color: var(--ink); } .team-score .n { font-family: var(--f-disp); font-weight: 900; font-size: 64px; line-height: .78; letter-spacing: 0; color: var(--ink); text-shadow: var(--hud-sh-lg); } .team-score .lbl { max-width: 100%; font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; line-height: 13px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); } .clock { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 8px var(--s2) 0; } #clock { font-family: var(--f-mono); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: .04em; text-shadow: var(--hud-sh-lg); } #modeLbl { max-width: 100%; font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; line-height: 13px; letter-spacing: .14em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #objective { display: inline-flex; align-items: center; gap: var(--s2); max-width: min(560px, calc(100vw - 2 * var(--mm) - 80px)); height: 24px; padding: 0; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #objective:empty { display: none; } /* --- minitérkép: kör, hajszálvonal-keret --- */ #minimap { position: absolute; top: var(--edge); left: var(--edge); width: var(--mm); height: var(--mm); border-radius: 50%; background: rgba(6, 6, 7, .42); } #mmFrame { position: absolute; top: var(--edge); left: var(--edge); width: var(--mm); height: var(--mm); border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(245, 242, 236, .22), 0 0 0 1px rgba(0, 0, 0, .3); } /* (reskin) a pálya órája és fénye a minitérkép alatt – belépéskor feltűnik, aztán elhalványul */ #hudShift { position: absolute; top: calc(var(--edge) + var(--mm) + 36px); /* [integrate10] az FPS / ping sor (#netStat) alá */ left: var(--edge); font-size: 11.5px; opacity: 0; animation: hudShift 7s var(--ease-film) .6s both; } @keyframes hudShift { 0% { opacity: 0; transform: translate3d(0, 6px, 0); } 10%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } } #netStat { position: absolute; top: calc(var(--edge) + var(--mm) + var(--s2)); left: var(--edge); width: var(--mm); text-align: center; height: 20px; line-height: 20px; background: none; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; } #netStat:empty { display: none; } .obj-marker { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -100%); padding: 0 var(--s2); height: 22px; line-height: 22px; border-radius: var(--r-sm); background: rgba(10, 11, 14, .72); border: 1px solid rgba(243, 162, 91, .45); font-weight: 700; font-size: 12px; letter-spacing: .06em; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; } /* --- ölési napló --- */ #killfeed { position: absolute; top: var(--edge); right: var(--edge); display: grid; gap: var(--s1); justify-items: end; max-width: 440px; } /* ha a jobb felső sarokban nem fér el az eredménykapszula mellett, a napló a kapszula alá csúszik */ @media (max-width: 1239px) { #killfeed { top: 116px; max-width: min(440px, calc(100vw - 2 * var(--edge))); } } .kf { position: relative; display: flex; align-items: center; gap: var(--s2); max-width: 100%; height: 30px; padding: 0 var(--s2); border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; font-weight: 600; font-size: 14px; animation: kfIn var(--t-slow) var(--ease); } .kf b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .kf .as { color: var(--ink-2); font-size: 12px; font-weight: 500; } .kf.me { background: rgba(6, 6, 7, .5); box-shadow: inset 0 0 0 1px rgba(245, 242, 236, .2); } /* fegyver-sziluett (a név a title-ben) + fejlövés / no-scope jelvény (beágyazott SVG, currentColor) */ .wi { flex: none; display: block; user-select: none; -webkit-user-drag: none; } .wi-txt { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); } .kf .wi { margin: 0 2px; } .ki { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ink); filter: drop-shadow(0 0 1px rgba(8, 9, 11, .9)); } .ki svg { width: 100%; height: 100%; display: block; } .ki-hs { color: var(--gold); } .kf .ki + .ki { margin-left: -4px; } @keyframes kfIn { from { transform: translateX(8px); opacity: 0; } } /* --- középső sáv: függőleges „sávok”, hogy semmi ne takarja egymást --- 25%: nagy üzenet · 25%+60: alcím · 25%+104: sorozat · célkereszt · +32: töltés · +64: ölés-szalag · +116: használat-sáv */ #centerMsg { position: absolute; top: 25%; left: var(--s4); right: var(--s4); text-align: center; font-family: var(--f-disp); font-weight: 900; font-size: 76px; text-transform: uppercase; letter-spacing: 0; line-height: .86; color: var(--ink); text-shadow: var(--hud-sh-lg); opacity: 0; transform: translateY(10px); transition: opacity var(--t-slow), transform var(--t-in) var(--ease-film); } #centerMsg.show { opacity: 1; transform: none; } #subMsg { position: absolute; top: calc(25% + 76px); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); height: 30px; line-height: 30px; padding: 0 var(--s4); font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--t-slow); } #subMsg:empty { display: none; } #subMsg.show { opacity: 1; } #streakMsg { position: absolute; top: calc(25% + 112px); left: var(--s4); right: var(--s4); text-align: center; font-family: var(--f-disp); font-weight: 900; font-size: 34px; text-transform: uppercase; letter-spacing: .01em; color: var(--light); text-shadow: var(--hud-sh-lg); opacity: 0; transition: opacity var(--t-slow), transform var(--t-slow) var(--ease); transform: translateY(4px); } #streakMsg.show { opacity: 1; transform: none; } #reloadHint { position: absolute; left: 50%; top: calc(50% + 32px); transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--warn); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); white-space: nowrap; opacity: 0; transition: opacity var(--t); } #reloadHint.show { opacity: 1; } /* ölés-szalag: a név egy sorban (keret nélkül), többszörös ölésnél fölötte a nagy display-szó (DUPLA, TRIPLA…) */ #killBanner { position: absolute; left: 50%; top: calc(50% + 172px); transform: translate(-50%, 6px); display: flex; align-items: center; gap: 10px; height: 30px; padding: 0; opacity: 0; transition: opacity var(--t), transform var(--t-slow) var(--ease); white-space: nowrap; } #killBanner.show { opacity: 1; transform: translate(-50%, 0); } /* [integrate9] alacsony ablakban (pl. 800×450) a szalag a jobb alsó pénz-címke fölé csúszna: feljebb kerül (a célkereszt alá, rés marad) */ @media (max-height: 760px) { #killBanner { top: calc(50% + 132px); } } @media (max-height: 560px) { #killBanner { top: calc(50% + 64px); } #killBanner .kb-multi { bottom: auto; top: 100%; font-size: 40px !important; } } #killBanner .kb-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink); font-size: 14px; line-height: 1; } #killBanner .kb-txt { font-size: 16px; font-weight: 500; color: var(--ink-2); } #killBanner .kb-txt b { color: var(--ink); font-weight: 700; } #killBanner .kb-wi { flex: none; display: block; opacity: .9; } #killBanner .kb-icon .ki { width: 16px; height: 16px; color: inherit; filter: none; } #useBar { position: absolute; left: 50%; top: calc(50% + 116px); transform: translateX(-50%); width: 280px; max-width: calc(100vw - 32px); padding: var(--s2) var(--s3) var(--s3); border-radius: var(--r); text-align: center; } #useBar span { display: block; font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--ink); margin-bottom: var(--s2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #useBar i { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; } #useBar b { display: block; height: 100%; width: 0; border-radius: 4px; background: #fff; } #pickupMsg { position: absolute; bottom: 152px; left: 50%; transform: translateX(-50%); height: 32px; line-height: 30px; padding: 0 var(--s4); border-radius: var(--r-pill); border-color: rgba(143, 211, 166, .35); font-weight: 600; font-size: 13px; color: var(--acc); white-space: nowrap; opacity: 0; transition: opacity var(--t-slow); } #pickupMsg.show { opacity: 1; } /* --- bal alsó: chat + életerő (+ páncél) --- */ #bottomLeft { position: absolute; left: var(--edge); bottom: var(--edge); width: 320px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); justify-items: start; } #chatLog { display: grid; gap: var(--s1); justify-items: start; width: 100%; font-size: 13px; } #chatLog:empty { display: none; } #chatLog div { max-width: 100%; padding: 1px 0; line-height: 19px; overflow-wrap: anywhere; color: var(--ink-2); } #chatLog .tc { color: var(--acc); } #chatLog .fade { opacity: 0; transition: opacity 1s; } #chatIn { pointer-events: auto; width: 100%; height: 36px; padding: 0 var(--s3); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r); background: var(--surface-3); color: var(--ink); font-family: var(--f-body); font-size: 13px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); outline: none; } .hp { position: relative; display: flex; align-items: flex-end; gap: var(--s4); width: 300px; padding: 0; transition: opacity var(--t-slow); } #hpNum { flex: none; min-width: 2.1ch; font-family: var(--f-disp); font-weight: 900; font-size: 88px; line-height: .76; letter-spacing: -.005em; text-align: left; text-shadow: var(--hud-sh-lg); } /* életerő-lemez rácsa: címke (+ páncélérték jobbra) · életerő-sáv · páncélsáv – a két sáv azonos szélességű */ .hp-meta { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: 8px; align-items: center; padding-bottom: 4px; } .hp-lbl { grid-column: 1; grid-row: 1; font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; line-height: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .hp-meta > .hp-bar { grid-column: 1 / -1; grid-row: 2; } .hp-bar { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(245, 242, 236, .24); overflow: hidden; box-shadow: 0 0 6px rgba(0, 0, 0, .35); } .hp-bar i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--ink); transition: width .2s var(--ease), background var(--t-slow); } .hp[data-st="warn"] .hp-bar:not(.ar-bar) i { background: var(--warn); } .hp[data-st="bad"] #hpNum { animation: lowHp 1s ease-in-out infinite; } .hp[data-st="bad"] .hp-bar:not(.ar-bar) i { background: var(--bad); } .hp[data-st="bad"] #hpNum { color: var(--bad); } @keyframes lowHp { 50% { opacity: .55; } } .armor { display: contents; } .ar-bar { grid-column: 1 / -1; grid-row: 3; height: 2px; } .ar-bar i { background: var(--blue); } .ar-v { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); color: var(--blue-2); } .ar-ico { flex: none; width: 10px; height: 10px; } #arNum { font-weight: 500; font-size: 11px; line-height: 12px; font-variant-numeric: tabular-nums; } /* állóképesség (agent/skills2): vékony csík az életerő-lemez alján, csak ha nincs tele; kifulladva halványpiros, a futás-küszöbnél jel */ .sta-bar { position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 2px; background: rgba(245, 242, 236, .18); overflow: hidden; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .sta-bar i { display: block; height: 100%; width: 100%; border-radius: 1px; background: rgba(245, 246, 248, .78); transform-origin: left center; transition: background var(--t-slow); } .sta-bar::after { content: ''; position: absolute; left: 30%; top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, .28); } .sta-bar[data-st="on"], .sta-bar[data-st="exh"] { opacity: 1; transition-duration: .12s; } .sta-bar[data-st="exh"] i { background: rgba(255, 120, 110, .85); } /* lopakodás (agent/movement): halk jelzés az életerő-címke mellett */ .sneak-tag { margin-left: 6px; color: var(--light); opacity: 0; transition: opacity .2s var(--ease); } .sneak-tag.on { opacity: .85; } /* --- jobb alsó: pénz, fegyver, lőszer --- */ #bottomRight { position: absolute; right: var(--edge); bottom: var(--edge); display: grid; gap: var(--s2); justify-items: end; text-align: right; } #money { display: flex; align-items: center; gap: var(--s2); height: 24px; padding: 0; } #money::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--light); box-shadow: 0 0 0 2px rgba(243, 162, 91, .25); } #moneyNum { display: inline-block; transform-origin: right center; font-family: var(--f-mono); font-weight: 500; font-size: 16px; letter-spacing: .02em; color: var(--ink); } #money.bump #moneyNum { animation: bump .45s var(--ease); } @keyframes bump { 0% { transform: scale(1.2); color: #FFF3C8; } 100% { transform: scale(1); } } .buy-hint { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--s2) 0 3px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 500; color: var(--ink-2); opacity: .6; transition: opacity var(--t), background var(--t), color var(--t); } .buy-hint kbd { height: 18px; min-width: 18px; font-size: 10.5px; } .buy-hint.on { color: var(--ink); background: var(--fill-2); opacity: 1; } .ammo-card { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "bomb name ammo" "bomb nades ammo"; align-items: end; justify-items: end; column-gap: var(--s4); row-gap: 6px; min-width: 0; padding: 0; } /* [hudfix] a fegyver neve helyett az álló sziluettje (killicons.js weaponIconTall: fehér, sötét körvonallal); --silK: méret-szorzó */ #weaponName { grid-area: name; --silK: 1; display: flex; align-items: flex-end; justify-content: center; min-width: 14px; opacity: .92; } #weaponName img { display: block; width: auto; height: calc(var(--h, 60px) * var(--silK)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); user-select: none; -webkit-user-drag: none; } #weaponName.txt { max-width: 240px; font-weight: 600; font-size: 16px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; } .wsil-in { animation: wsilIn .22s var(--ease-film) both; transform-origin: 50% 100%; } @keyframes wsilIn { from { opacity: 0; transform: translateY(10px) scaleY(.86); } } @media (prefers-reduced-motion: reduce) { .wsil-in { animation: none; } } /* [hudfix] Virágbomba: a bomba sziluettje a lőszer-blokk bal szélén – nálad (fehér), a földön (halvány), élesítve (pulzál, piros LED), hatástalanítva (szürke, zöld LED) */ #bombSil { grid-area: bomb; align-self: end; display: block; width: 50px; height: 26px; margin-bottom: 4px; color: var(--ink); filter: drop-shadow(0 0 1px rgba(8, 9, 11, .85)) drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); transition: opacity var(--t-slow) var(--ease), color var(--t-slow) var(--ease); } #bombSil[hidden] { display: none; } #bombSil svg { display: block; width: 100%; height: 100%; overflow: visible; } #bombSil .led { fill: var(--dim); transition: fill var(--t) var(--ease); } #bombSil[data-st="mine"] { opacity: 1; animation: wsilIn .26s var(--ease-film) both; } #bombSil[data-st="mine"] .led { fill: var(--light); } #bombSil[data-st="dropped"] { opacity: .42; color: var(--ink-2); } #bombSil[data-st="planted"] { opacity: 1; animation: bombPulse 1s ease-in-out infinite; } #bombSil[data-st="planted"] .led { fill: var(--bad); } #bombSil[data-st="planted"].fast { animation-duration: .45s; } #bombSil[data-st="defused"] { opacity: .55; color: var(--muted); } #bombSil[data-st="defused"] .led { fill: var(--acc); } @keyframes bombPulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 40% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { #bombSil[data-st] { animation: none; } } .ammo { grid-area: ammo; display: flex; align-items: baseline; font-family: var(--f-disp); font-weight: 900; line-height: .76; } #ammoMag { font-size: 104px; letter-spacing: -.01em; text-shadow: var(--hud-sh-lg); } .ammo .sep { font-size: 48px; color: var(--ink-2); margin: 0 4px 0 8px; font-weight: 800; } #ammoRes { font-size: 48px; color: var(--ink-2); letter-spacing: 0; min-width: 2ch; text-align: left; } .ammo.low #ammoMag { color: var(--bad); } .nades { grid-area: nades; display: flex; gap: 5px; justify-content: flex-end; min-height: 10px; padding-bottom: 6px; } .nades:empty { display: none; } .nades i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); } .nades .nd { display: block; opacity: .9; } /* [hudfix] gránát-sziluettek a pontok helyett */ .nades { align-items: flex-end; padding-bottom: 2px; gap: 3px; } #cashFeed { position: absolute; right: 0; bottom: calc(100% + var(--s2)); display: grid; gap: var(--s1); justify-items: end; } .cash { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0; font-size: 12.5px; animation: cashIn var(--t-slow) var(--ease), cashOut .5s ease-in 3s forwards; white-space: nowrap; } .cash b { font-family: var(--f-mono); font-weight: 500; color: var(--light); font-variant-numeric: tabular-nums; } .cash.neg b { color: var(--ink); } .cash span { color: var(--ink-2); } @keyframes cashIn { from { transform: translateX(8px); opacity: 0; } } @keyframes cashOut { to { opacity: 0; transform: translateY(-4px); } } /* halálkor és nézőként az életerő- és lőszerlemez eltűnik (a bolt a helyükre kerülhet) */ #hud:has(#death:not([hidden])) .hp, #hud:has(#death:not([hidden])) #bottomRight, #hud:has(#death:not([hidden])) #reloadHint { opacity: 0; } /* [specfp] nézőként (csapattárs követése) a lemezek a nézett játékos életét / fegyverét / lőszerét mutatják; a saját pénz, kitartás rejtve */ #hud:has(#death.spec:not(.kc):not([hidden])) .hp, #hud:has(#death.spec:not(.kc):not([hidden])) #bottomRight { opacity: 1; } #hud:has(#death.spec:not([hidden])) #money, #hud:has(#death.spec:not([hidden])) #cashFeed, #hud:has(#death.spec:not([hidden])) .sta-bar, #hud:has(#death.spec:not([hidden])) #nades, #hud:has(#death.spec:not([hidden])) #sneakTag { visibility: hidden; } /* távcső, nagy térkép */ #scope { position: absolute; inset: 0; overflow: hidden; } #scope .scope-tube { position: absolute; inset: 0; will-change: transform; } .scope-mask { position: absolute; left: 50%; top: 50%; width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; background: radial-gradient(circle at center, transparent 0, transparent 34vmin, #000 34.3vmin); } /* lencseszél: belső árnyék + halvány színi hiba (piros / kék gyűrű) a peremen */ .scope-ring { position: absolute; left: 50%; top: 50%; width: 68.6vmin; height: 68.6vmin; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 40px rgba(0,0,0,.8); background: radial-gradient(circle, transparent 0, transparent 92%, rgba(255, 70, 60, .09) 95.5%, rgba(80, 170, 255, .11) 97.8%, rgba(0, 0, 0, .55) 100%); } .scope-ring::before, .scope-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .35s; } .scope-ring::before { box-shadow: inset 0 0 9vmin 1vmin rgba(0, 0, 0, .5); } /* lélegzet-visszatartás: a kép „összeszűkül” */ .scope-ring::after { box-shadow: inset 0 0 9vmin rgba(150, 20, 24, .38); } /* kifulladás */ #scope.hold .scope-ring::before, #scope.tired .scope-ring::after { opacity: 1; } /* a szálkereszt a képernyő közepén marad (= a lövés iránya), csak a cső mozdul */ .scope-ret { position: absolute; left: 50%; top: 50%; width: 68.6vmin; height: 68.6vmin; transform: translate(-50%, -50%); overflow: visible; } .scope-ret line { shape-rendering: crispEdges; } .scope-info { position: absolute; left: calc(50% + 15vmin); top: calc(50% + 21vmin); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; color: rgba(255, 255, 255, .72); text-shadow: 0 1px 2px #000; white-space: nowrap; } .scope-info span { margin-left: 10px; color: rgba(255, 255, 255, .55); } /* célzáskori középpont (nyílt irányzék): a célkereszt színe / kontúrja / átlátszósága, a szórás-kúp halvány körrel */ #adsDot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; } #adsDot i { position: absolute; width: var(--ct, 2px); height: var(--ct, 2px); left: calc(var(--ct, 2px) / -2); top: calc(var(--ct, 2px) / -2); border-radius: 50%; background: var(--cc, #fff); box-shadow: var(--co, 0 0 0 1px rgba(0,0,0,.55)); opacity: var(--ca, 1); } #adsDot b { position: absolute; box-sizing: border-box; width: calc(var(--sr, 0px) * 2); height: calc(var(--sr, 0px) * 2); left: calc(var(--sr, 0px) * -1); top: calc(var(--sr, 0px) * -1); border-radius: 50%; border: 1px solid var(--cc, #fff); opacity: var(--so, 0); } #bigMap { position: absolute; inset: 56px var(--s7); display: grid; place-items: center; background: rgba(8, 9, 11, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r-lg); border: 1px solid var(--line); } #bigMap canvas { max-width: calc(100% - 32px); max-height: calc(100% - 32px); border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: var(--sh-lg); } /* ===================================================================================== TABELLA (Tab) ===================================================================================== */ #scoreboard { position: absolute; top: 124px; left: 50%; transform: translateX(-50%); z-index: 3; width: min(1080px, max(880px, calc(100% - 2 * (var(--mm) + var(--edge) + 16px))), calc(100% - 2 * var(--edge))); max-height: calc(100% - 124px - var(--edge)); overflow: auto; border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--line-2); padding: var(--s4); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: sbIn var(--t) var(--ease) both; box-shadow: var(--sh-lg); } @keyframes sbIn { from { opacity: 0; transform: translate(-50%, -4px); } } #scoreboard h2 { margin: 0 0 var(--s4); padding: 4px var(--s1) 0; font-family: var(--f-disp); font-weight: 900; font-size: 34px; line-height: .86; letter-spacing: 0; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .sb-cols.one { grid-template-columns: minmax(0, 1fr); } .sb-team { min-width: 0; padding: var(--s1); border-radius: var(--r); background: none; border: 0; } .sb-team h3 { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); height: 48px; margin: 0 0 var(--s1); padding: 0 var(--s3); border-radius: 0; font-family: var(--f-disp); font-weight: 900; font-size: 28px; text-transform: uppercase; letter-spacing: 0; color: var(--ink); border-bottom: 1px solid var(--line-2); } .sb-team h3 span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-team h3 span:last-child { font-size: 40px; line-height: .9; font-variant-numeric: tabular-nums; } .sb-team.a h3 { background: none; } .sb-team.b h3 { background: none; } .sb-team.a h3 span:last-child { color: var(--rose); } .sb-team.b h3 span:last-child { color: var(--blue); } .sb-team table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .sb-team th { height: 30px; padding: 0 6px; font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-team th:first-child { width: 38%; } .sb-team th:first-child, .sb-team td:first-child { text-align: left; padding-left: var(--s3); } .sb-team td { height: 34px; padding: 0 6px; text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-team td:first-child { font-family: var(--f-body); font-weight: 600; font-size: 13.5px; color: var(--ink); } .sb-team td:nth-child(2) { font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; color: var(--ink); } .sb-team tr.me td { background: var(--fill-3); border-top-color: transparent; } .sb-team tr.me td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .sb-team tr.me td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .sb-team tr.me + tr td { border-top-color: transparent; } .sb-team tr.dead td { opacity: .4; } .sb-team .bot { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; color: var(--muted); background: var(--fill-2); border-radius: var(--r-xs); padding: 1px 4px; margin-left: 6px; vertical-align: 1px; } .sb-team .rk { font-size: 11px; margin-left: 6px; font-weight: 600; } .sb-team .kick { all: unset; cursor: pointer; pointer-events: auto; font-family: var(--f-body); font-size: 11px; font-weight: 600; color: #FF9C9C; margin-left: 6px; } .sb-team .kick:hover { text-decoration: underline; } /* ===================================================================================== HALÁL, KATTINTS A JÁTÉKHOZ, MENÜ, ZÁRÓKÉP ===================================================================================== */ #death { position: absolute; inset: 0; display: grid; align-items: end; justify-items: center; padding: 0 var(--edge) var(--s6); background: linear-gradient(transparent 45%, rgba(40, 4, 8, .45)); } .death-box { width: min(760px, 100%); display: grid; justify-items: center; gap: var(--s2); text-align: center; animation: pageIn var(--t-slow) var(--ease) both; } .killed-by { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; height: 48px; padding: 0 var(--s5); border-radius: var(--r); font-weight: 600; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(6, 6, 7, .78); border: 0; box-shadow: inset 0 0 0 1px var(--line), var(--sh); text-shadow: none; } .killed-by b { font-weight: 800; } .respawn { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); margin-bottom: var(--s2); } .respawn:empty { display: none; } #death .shop { width: 100%; pointer-events: auto; text-align: left; padding: var(--s3) var(--s4) var(--s4); max-height: min(46vh, 420px); overflow: auto; border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--sh); } .death-hint { margin-top: var(--s1); font-size: 12px; color: var(--ink-2); text-shadow: 0 1px 3px #000; } #death.spec { background: none; padding-bottom: 208px; } /* keskenyebb képernyőn a halálkép dobozát és a chatet úgy méretezzük, hogy egymás mellett elférjenek */ @media (max-width: 1400px) { .death-box { width: min(600px, 100%); } #hud:has(#death:not([hidden]):not(.spec)) #bottomLeft { width: min(320px, calc(50vw - 300px - var(--edge) - 8px)); } } #death.spec .shop, #death.spec .death-hint, #death.spec .death-tk { display: none; } /* nézőként a sáv mutatja (merge7) */ .death-tk { margin-bottom: var(--s2); font-size: 13px; font-weight: 600; color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); } .death-tk kbd { margin-right: 4px; } .death-tk .bot { margin-left: 4px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; color: var(--muted); } #clickToPlay { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s4); background: rgba(6, 6, 7, .55); pointer-events: auto; cursor: pointer; } .ctp-box { display: grid; justify-items: center; gap: var(--s3); width: min(720px, 100%); animation: cardIn var(--t-slow) var(--ease) both; } .ctp { display: inline-flex; align-items: center; gap: var(--s3); height: 64px; padding: 0 var(--s6); border-radius: var(--r); font-family: var(--f-disp); font-weight: 900; font-size: 34px; text-transform: uppercase; letter-spacing: 0; color: var(--on-paper); background: var(--paper); text-shadow: none; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), var(--sh-lg); transition: transform var(--t) var(--ease); } #clickToPlay:hover .ctp { transform: scale(1.02); } .ctp::before { content: ""; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .ctp-mode, .ctp-keys { width: 100%; padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: rgba(6, 6, 7, .78); border: 0; box-shadow: inset 0 0 0 1px var(--line); text-shadow: none; } .ctp-mode { font-size: 13.5px; color: var(--ink-2); text-align: center; line-height: 1.55; text-wrap: pretty; } .ctp-mode b { display: inline-block; margin-bottom: 2px; font-weight: 700; font-size: 15px; color: var(--ink); } .ctp-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); font-size: 12.5px; color: var(--muted); } .ctp-keys span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } /* Esc-menü: bal oldali lebegő panel */ #menu { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: var(--edge); overflow: auto; background: linear-gradient(90deg, rgba(8, 9, 11, .72), rgba(8, 9, 11, .3)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .menu-box { position: relative; width: min(860px, 100%); border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--line-2); padding: var(--s5); box-shadow: var(--sh-lg); animation: menuIn var(--t-slow) var(--ease) both; } @keyframes menuIn { from { transform: translateX(-12px); opacity: 0; } } .menu-box h2 { margin: 0 0 var(--s5); font-weight: 800; font-size: 24px; letter-spacing: -.035em; line-height: 1.15; overflow-wrap: anywhere; } .menu-box h3 { margin: var(--s5) 0 var(--s2); } .menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } .menu-cols > div { min-width: 0; } .menu-box:has(#hostPanel[hidden]) { width: min(420px, 100%); } .menu-box:has(#hostPanel[hidden]) .menu-cols { grid-template-columns: minmax(0, 1fr); } .menu-cols > div:first-child > .btn { height: 44px; margin-bottom: var(--s2); justify-content: flex-start; padding: 0 var(--s4); } .menu-cols > div:first-child > .btn.primary { justify-content: center; } .teams-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } label.inline { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s3); align-items: center; min-height: 36px; font-size: 13.5px; color: var(--ink-2); } #mFull { margin-top: var(--s5); } #hostPanel { padding-left: var(--s6); border-left: 1px solid var(--line); } #hostPanel h3:first-child { margin-top: 0; } #hostForm .btn { width: 100%; } #hostForm .btn + .btn { margin-top: calc(-1 * var(--s2)); } /* zárókép */ #endScreen { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--edge); overflow: auto; background: rgba(8, 9, 11, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .end-box { position: relative; width: min(880px, 100%); max-height: 100%; overflow: auto; border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--line-2); padding: var(--s6); box-shadow: var(--sh-lg); animation: cardIn var(--t-slow) var(--ease) both; } .end-title { font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -.05em; color: var(--ink); } .end-title.win { color: var(--gold); } .end-title.lose { color: var(--rose-2); } .end-sub { color: var(--muted); margin: var(--s3) 0 var(--s4); font-weight: 500; font-size: 15px; } .end-table { width: 100%; border-collapse: separate; border-spacing: 0; } .end-table th, .end-table td { height: 40px; padding: 0 var(--s3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .end-table th { height: 32px; font-weight: 500; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .end-table td { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); } .end-table th:nth-child(2), .end-table td:nth-child(2) { text-align: left; } .end-table th:first-child, .end-table td:first-child { width: 48px; text-align: left; } .end-table td:nth-child(2) { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--ink); } .end-table td.t-a { color: var(--rose-2); } .end-table td.t-b { color: var(--blue-2); } .end-table td .won { font-size: 12px; margin-left: 4px; } .end-table td:first-child { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--muted); } .end-table tbody tr:first-child td:first-child { color: var(--gold); } .end-table td .hint { font-family: var(--f-mono); font-size: 12px; color: var(--dim); } .end-table tr.me td { background: var(--fill-2); } .end-table tr.me td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .end-table tr.me td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .delta.up { color: var(--acc); font-weight: 600; } .delta.down { color: var(--bad); font-weight: 600; } .end-next { margin-top: var(--s5); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } /* betöltés, értesítés */ /* töltőképernyő: a bemelegítés végéig (warmup.js) takarja a jelenetet; folyamatcsík + lépés-felirat */ /* (reskin) B · Műszak töltőképernyő: teljes képernyős kulcskép (a rajta lévő „HALA SHOOTER” felirat a cím) ↔ Hűtő 1 (felirat nélkül: ilyenkor a CSS-szómárka látszik), 14 mp-es körben, csak opacity-animáció (kompozitor); a folyamat, a lépés és a tipp jobb lent. Telefonon (álló) a kulcskép felirat nélküli középső vágása → a szómárka mindig látszik. */ #loading { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: end; padding: clamp(20px, 4vw, 64px); background: var(--bg); overflow: hidden; } .load-bg, .load-bg i { position: absolute; inset: 0; } .load-bg i { background: center / cover no-repeat; } .load-bg .lb-key { background-image: url("img/load/keyart-1920.webp"); background-position: 30% 50%; } .load-bg .lb-alt { background-image: url("img/load/huto-1536.webp"); opacity: 0; animation: lbAlt 14s ease-in-out 5s infinite; } .load-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(6, 6, 7, .8) 0%, rgba(6, 6, 7, .2) 40%, rgba(6, 6, 7, 0) 58%), linear-gradient(0deg, rgba(6, 6, 7, .4), rgba(6, 6, 7, 0) 30%); } .load-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: var(--grain); background-size: 160px 160px; opacity: .08; } @keyframes lbAlt { 0%, 8% { opacity: 0; } 14%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } } .load-box { position: relative; width: min(440px, 100%); display: grid; gap: 12px; padding: 0; background: none; border: 0; box-shadow: none; text-shadow: var(--hud-sh); } .load-brand { margin-bottom: 6px; opacity: 0; animation: lbBrand 14s ease-in-out 5s infinite; } .load-brand b { font-size: 96px; } .load-brand span { font-size: 22px; letter-spacing: .52em; } @keyframes lbBrand { 0%, 8% { opacity: 0; } 14%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } } .load-shift { font-size: 12px; } .load-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-weight: 600; font-size: 15px; color: var(--ink); min-width: 0; } #loadText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #loadPct { flex: none; font-family: var(--f-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .load-track { height: 2px; border-radius: 2px; background: rgba(245, 242, 236, .2); overflow: hidden; } #loadBar { display: block; height: 100%; background: var(--light); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); } .load-hint { min-height: 3em; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } @media (max-aspect-ratio: 4/5) { #loading { justify-items: stretch; padding: 24px 20px 32px; } .load-bg .lb-key { background-image: url("img/load/keyart-m.webp"); background-position: 50% 30%; } .load-bg .lb-alt { background-image: url("img/load/huto-m.webp"); } .load-bg::after { background: linear-gradient(0deg, rgba(6, 6, 7, .92) 0%, rgba(6, 6, 7, .4) 38%, rgba(6, 6, 7, 0) 60%); } .load-box { width: 100%; } .load-brand { opacity: 1; animation: none; } .load-brand b { font-size: 60px; } } @keyframes spin { to { transform: rotate(360deg); } } #toast { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%) translateY(8px); z-index: 50; display: flex; align-items: center; gap: var(--s3); width: max-content; max-width: min(560px, calc(100vw - 32px)); min-height: 40px; padding: var(--s2) var(--s4) var(--s2) var(--s3); border-radius: var(--r); background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-weight: 500; font-size: 13.5px; line-height: 1.4; opacity: 0; transition: opacity var(--t), transform var(--t-slow) var(--ease); pointer-events: none; box-shadow: var(--sh-lg); } #toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } #toast.ok::before { background: var(--acc); } /* verziószám: a lobbiban a logó mellett, játékban csak a nyitott Esc-menü alatt (nem ütközik a HUD-dal) */ #verCorner { display: none; position: fixed; right: var(--s4); bottom: var(--s3); font-size: 10.5px; color: rgba(255, 255, 255, .35); pointer-events: none; z-index: 21; font-family: var(--f-mono); } body:has(#menu:not([hidden])) #verCorner { display: block; } body:has(#hud[hidden]) #verCorner { display: none; } .logo[data-ver]::after { content: attr(data-ver); margin-left: 2px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--dim); } /* ===================================================================================== BOLT ===================================================================================== */ .shop h4 { margin: var(--s5) 0 var(--s3); } .shop h4:first-of-type { margin-top: var(--s4); } .shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); } .shop-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--s3); border-radius: var(--r); border: 1px solid var(--line); background: var(--fill); transition: border-color var(--t), background var(--t); } .shop-card:hover { border-color: var(--line-3); background: var(--fill-2); } .shop-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .shop-card img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); transition: transform var(--t-slow) var(--ease); } .shop-card:hover img { transform: scale(1.03); } .shop-card .sc-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); min-width: 0; } .shop-card .sc-name { min-width: 0; font-weight: 600; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-card .sc-cls { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; } .shop-card .sc-desc { font-size: 12px; color: var(--muted); line-height: 1.45; } .sc-bars { display: grid; gap: 3px; margin: 2px 0; } .sc-bar { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--s2); height: 12px; font-size: 10.5px; color: var(--muted); } .sc-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-bar i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; } .sc-bar b { display: block; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, .8); } .sc-foot { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; min-height: 22px; } .sc-price { font-weight: 700; font-size: 13px; color: var(--gold); white-space: nowrap; } .sc-price.poor { color: var(--dim); } .sc-state { font-weight: 600; font-size: 11.5px; white-space: nowrap; } .sc-state.own { color: var(--acc); } .sc-state.sel { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); border-radius: var(--r-pill); color: var(--on-paper); background: var(--paper); } .shop-card.sel { border-color: rgba(255, 255, 255, .6); background: var(--fill-3); } .shop-card.locked { cursor: not-allowed; } .shop-card.locked img { opacity: .35; filter: grayscale(.8) drop-shadow(0 6px 8px rgba(0,0,0,.5)); } .shop-card.locked:hover { border-color: var(--line); background: var(--fill); } .shop-card.locked:hover img { transform: none; } .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gear-ico { height: 40px; color: var(--ink-2); } .gear-ico svg { height: 100%; display: block; } .shop-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-height: 32px; } .shop-money { font-weight: 700; font-size: 24px; letter-spacing: -.03em; color: var(--gold); } .shop-win { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2); border-radius: var(--r-pill); font-size: 12px; font-weight: 500; color: var(--acc); background: var(--acc-t); } .shop-win.off { color: var(--muted); background: var(--fill-2); } .shop-note { font-size: 13px; color: var(--muted); line-height: 1.55; } /* pisztoly-szűrő a boltban */ .shop .shop-filter { display: flex; flex-wrap: wrap; max-width: 100%; margin-bottom: var(--s3); } .shop .shop-filter button { height: 28px; padding: 0 var(--s3); font-size: 12.5px; } .shop.compact .shop-filter button { height: 24px; font-size: 12px; } .shop.compact .shop-card { padding: var(--s2) var(--s3) var(--s2); gap: var(--s1); } .shop.compact .sc-name { font-size: 13px; } .shop.compact .sc-cls { display: none; } .shop.compact .gear-ico { height: 28px; } .shop.compact .shop-card img { aspect-ratio: auto; height: 40px; } .shop.compact .sc-foot { min-height: 20px; } #shop { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--edge); background: rgba(8, 9, 11, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; z-index: 5; } .shop-box { position: relative; width: min(1040px, 100%); max-height: 100%; overflow: auto; border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--line-2); padding: 0 var(--s5) var(--s5); box-shadow: var(--sh-lg); animation: cardIn var(--t-slow) var(--ease) both; } .shop-title { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin: 0 calc(-1 * var(--s5)); padding: var(--s4) var(--s5) var(--s3); background: linear-gradient(var(--surface-3) 80%, transparent); } .shop-title h2 { margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: 40px; line-height: .86; letter-spacing: 0; text-transform: uppercase; } /* ===================================================================================== PIACTÉR – ritkaság: az egész kártya halvány színárnyalatot kap (nincs csík) ===================================================================================== */ .fp-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s3); font-weight: 700; font-size: 13px; color: var(--gold); border-radius: var(--r-sm); background: var(--gold-t); white-space: nowrap; font-variant-numeric: tabular-nums; } .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: var(--s5); } .seg button { all: unset; cursor: pointer; height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s4); border-radius: var(--r-sm); font-weight: 500; font-size: 13.5px; color: var(--muted); transition: color var(--t), background var(--t) var(--ease); } .seg button:hover { color: var(--ink); } .seg button[aria-selected="true"] { background: var(--fill-3); color: var(--ink); } .seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .mk-body > h3 { margin: 0 0 var(--s1); font-family: var(--f-disp); font-weight: 900; font-size: 30px; line-height: .9; letter-spacing: 0; text-transform: uppercase; } .mk-body > h3:not(:first-child) { margin-top: var(--s6); } .mk-body > .hint { margin: 0 0 var(--s4); } .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: var(--s3); } .mk-card { --rc: #ffffff; position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s3); border-radius: var(--r-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 9%, transparent), color-mix(in srgb, var(--rc) 3%, transparent)), var(--surface); border: 1px solid color-mix(in srgb, var(--rc) 16%, var(--line)); transition: border-color var(--t), background var(--t); } .mk-card:hover { border-color: color-mix(in srgb, var(--rc) 35%, var(--line-2)); } .mk-card.lic { --rc: #ffffff; } .mk-card img { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); } .mk-t { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); min-width: 0; } .mk-t b { min-width: 0; font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-t .rar { line-height: 18px; } .mk-sub { margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--muted); } .rar { flex: none; font-weight: 600; font-size: 11px; color: var(--rc, var(--muted)); white-space: nowrap; } .mk-card.lic .rar { color: var(--muted); } .mk-f { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: var(--h-sm); margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line); } .mk-f .own { font-weight: 600; color: var(--acc); font-size: 12.5px; } .mk-f .hint { font-size: 12px; white-space: nowrap; min-width: 0; } .mk-f .btn { flex: none; min-width: 76px; margin-left: auto; } /* időleges licencek (agent/licences): futamidő-gombok, hátralévő idő */ .mk-card.lic.on { --rc: var(--acc); } .mk-left { margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--muted); } .mk-left b { font-weight: 600; color: var(--acc); } .mk-left.warn b { color: var(--warn); } .mk-lt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line); } .mk-lt .btn { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; padding: 0 8px; font-size: 12px; } .mk-lt .btn span { color: var(--muted); white-space: nowrap; } .mk-lt .btn b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } /* arzenál */ .ars { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: var(--s4); align-items: start; } .ars-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); padding: var(--s2); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .ars-w { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: var(--s1); min-width: 0; padding: var(--s2); border-radius: var(--r); border: 1px solid transparent; background: var(--fill); transition: border-color var(--t), background var(--t); } .ars-w:hover { background: var(--fill-2); } .ars-w img { width: 100%; height: 40px; object-fit: contain; } .ars-w span { max-width: 100%; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ars-w.on { border-color: rgba(255, 255, 255, .6); background: var(--fill-3); } .ars-w:focus-visible, .ars-s:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .ars-main { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); } .ars-prev { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--s5); padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); } .ars-prev img { width: 100%; filter: drop-shadow(0 12px 16px rgba(0,0,0,.6)); } .ars-prev h3 { margin: 0 0 var(--s1); font-weight: 700; font-size: 22px; letter-spacing: -.03em; text-transform: none; color: var(--ink); } .ars-main > .hint { margin-bottom: var(--s3); } .ars-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s2); } .ars-s { --rc: #ffffff; all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; gap: 2px; min-width: 0; padding: var(--s2) var(--s3) var(--s3); border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--rc) 14%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 8%, transparent), transparent), var(--fill); transition: border-color var(--t), background var(--t); } .ars-s:hover { border-color: color-mix(in srgb, var(--rc) 32%, var(--line-2)); } .ars-s.on { border-color: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .ars-s b { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ars-s .sw { width: 100%; height: 40px; object-fit: contain; margin-bottom: var(--s1); } .ars-s .sw.none { display: block; border-radius: var(--r-sm); background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, rgba(255,255,255,.065) 6px 12px); } /* játékospiac */ .mkt { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; } /* ===================================================================================== KÖR ALAPÚ MÓDOK, NÉZŐI MÓD ===================================================================================== */ #specBar { position: absolute; left: 50%; bottom: 152px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); height: 44px; padding: 0 6px 0 var(--s4); border-radius: var(--r); font-size: 13.5px; white-space: nowrap; overflow: hidden; box-shadow: var(--sh); } #specBar b { font-weight: 700; color: var(--ink); } #specBar .spec-wi { margin-left: var(--s2); opacity: .9; } #specBar .k { display: inline-flex; align-items: center; height: 30px; margin-left: var(--s2); padding: 0 var(--s2); border-radius: var(--r-sm); background: var(--fill-2); color: var(--muted); font-size: 12px; } #specBar .k.tk { color: var(--on-paper); background: var(--paper); font-weight: 600; } #specBar .bot { font-size: 9.5px; font-family: var(--f-mono); color: var(--muted); background: var(--fill-2); border-radius: var(--r-xs); padding: 1px 4px; } /* [specfp] nézői sáv: címke · név · (bot / ki irányítja) · gombok – fekete-fehér, a menü-tokenekkel */ #specBar .sp-tag { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; color: var(--muted); margin-right: 2px; } #specBar .sp-m { color: var(--ink-2); font-size: 12.5px; } #specBar .k kbd { margin-right: 6px; height: 18px; min-width: 18px; font-size: 10.5px; } #specBar .k.tk kbd { background: rgba(0, 0, 0, .12); color: var(--on-paper); box-shadow: none; } /* billentyűk, célkereszt beállítás */ .binds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); margin-top: var(--s3); } .bind-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 44px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); } .bind-row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bind-row button { all: unset; flex: none; cursor: pointer; box-sizing: border-box; min-width: 96px; height: 30px; padding: 0 var(--s3); text-align: center; line-height: 30px; border-radius: var(--r-sm); background: var(--fill-2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line); font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--ink); transition: box-shadow var(--t), background var(--t); } .bind-row button:hover { background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--line-2); } .bind-row button.wait { color: var(--on-paper); background: var(--paper); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); animation: blink .9s infinite; } .bind-row button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .cross-edit { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s5); align-items: start; } .cross-edit .opts label { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--s3); min-height: 36px; margin: 0; font-size: 13.5px; color: var(--ink-2); } .cross-edit .opts label.check { grid-template-columns: auto minmax(0, 1fr); cursor: pointer; } .cross-prev { position: relative; aspect-ratio: 1; border-radius: var(--r); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(160deg, #8A938D 0%, #56605A 38%, #2A302C 62%, #B7BEB9 100%); } .cross-prev::after { content: "Előnézet"; position: absolute; left: var(--s2); bottom: var(--s2); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .cross-prev #crossPrev { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .cross-prev #crossPrev .c { position: absolute; background: var(--cc, #fff); box-shadow: var(--co); opacity: var(--ca, 1); } .cross-prev #crossPrev .t, .cross-prev #crossPrev .b { width: var(--ct); height: var(--cl); left: calc(var(--ct) / -2); } .cross-prev #crossPrev .l, .cross-prev #crossPrev .r { width: var(--cl); height: var(--ct); top: calc(var(--ct) / -2); } .cross-prev #crossPrev .dotc { position: absolute; width: var(--ct); height: var(--ct); left: calc(var(--ct) / -2); top: calc(var(--ct) / -2); background: var(--cc, #fff); box-shadow: var(--co); opacity: var(--ca, 1); } .cross-prev #crossPrev.nodot .dotc { display: none; } /* mód-beállítások */ .mode-opts-box { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--fill); } .mode-opts-box summary { cursor: pointer; display: flex; align-items: center; gap: var(--s2); height: var(--h); padding: 0 var(--s3); font-weight: 500; font-size: 13px; color: var(--ink-2); list-style: none; border-radius: var(--r); transition: color var(--t); } .mode-opts-box summary:hover { color: var(--ink); } .mode-opts-box summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .mode-opts-box summary::-webkit-details-marker { display: none; } .mode-opts-box summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t) var(--ease); } .mode-opts-box[open] summary::before { transform: rotate(45deg); } .mode-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s1) var(--s3) var(--s3); } .mode-opts label { display: grid; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 500; } .mode-opts input[type=number], .mode-opts select { height: 36px; font-size: 13.5px; } .mode-opts .opt-check { order: 1; display: flex; align-items: center; gap: var(--s2); grid-column: 1 / -1; min-height: 28px; color: var(--ink-2); font-size: 13px; cursor: pointer; } .mode-opts > .hint { grid-column: 1 / -1; margin: 0; } /* ===================================================================================== KISEBB KÉPERNYŐK ===================================================================================== */ @media (max-width: 1440px) { .me-card .rt { display: none; } } @media (max-width: 1200px) { :root { --gutter: 16px; } .tab-page[data-page="rooms"] { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); } .help .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ars { grid-template-columns: 240px minmax(0, 1fr); } } @media (max-width: 1100px) { .topbar { gap: var(--s3); } .me-card .rank-badge { display: none; } .menu-cols { gap: var(--s5); } #hostPanel { padding-left: var(--s5); } } @media (max-width: 960px) { .tab-page[data-page="rooms"] { grid-template-columns: minmax(0, 1fr); } .ars, .mkt { grid-template-columns: minmax(0, 1fr); } .ars-list { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } .menu-cols { grid-template-columns: minmax(0, 1fr); } #hostPanel { padding-left: 0; padding-top: var(--s5); border-left: 0; border-top: 1px solid var(--line); } .menu-box { width: min(480px, 100%); } .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } table.lb th:nth-child(5), table.lb td:nth-child(5), table.lb th:nth-child(9), table.lb td:nth-child(9) { display: none; } :root { --mm: 160px; } } @media (max-width: 820px) { .topbar { flex-wrap: wrap; height: auto; padding: var(--s2); row-gap: var(--s2); } .logo { padding-left: var(--s2); } .tabs { order: 3; width: 100%; } .binds { grid-template-columns: minmax(0, 1fr); } .settings > label { grid-template-columns: minmax(0, 1fr) 56px; } .settings > label > input[type=range] { grid-column: 1 / -1; grid-row: 2; } .settings > label.sel { grid-template-columns: minmax(0, 1fr); } .cross-edit { grid-template-columns: minmax(0, 1fr); } .cross-prev { width: 168px; } .help .keys { grid-template-columns: minmax(0, 1fr); } .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .room { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); } .room .pill { display: none; } #bottomLeft { width: 260px; } } @media (max-width: 600px) { .login-card { padding: var(--s5); } .login-card h1.logo b { font-size: 64px; } .row2 { grid-template-columns: minmax(0, 1fr); } } /* a kompakt (lobbi, halálkép) bolt kártyái kicsik: 600 px fölött maradhat a 4 oszlop */ @media (min-width: 601px) { .shop.compact .shop-grid:not(.gear-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* alacsony képernyő: kisebb HUD, szorosabb függőleges sávok */ @media (max-height: 800px) { :root { --mm: 168px; --edge: 12px; } #ammoMag { font-size: 80px; } .ammo .sep, #ammoRes { font-size: 38px; } #hpNum { font-size: 68px; } .score-row { grid-template-columns: 108px 160px 108px; } #modeLbl { font-size: 9.5px; } .team-score .n { font-size: 50px; } #clock { font-size: 25px; } #scoreboard { top: 112px; max-height: calc(100% - 112px - var(--edge)); } .sb-team td { height: 30px; } #centerMsg { font-size: 56px; } #pickupMsg, #specBar { bottom: 136px; } #death.spec { padding-bottom: 188px; } .end-box { padding: var(--s5); } .end-title { font-size: 44px; } .end-table td { height: 34px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===== FEJLŐDÉS (meta-réteg): Fejlődés lap, zárókép-elszámolás, szint-jelvény, értesítések – önálló blokk ===== */ .lv-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-weight: 700; font-size: 12px; color: var(--acc); background: var(--acc-t); box-shadow: inset 0 0 0 1px rgba(143, 211, 166,.28); white-space: nowrap; } .lv-chip.sm { padding: 1px 7px; font-size: 11px; vertical-align: 1px; } /* zárókép: elszámolás */ .ep { margin: -4px 0 18px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); } .ep-lines { display: grid; gap: 4px; } .ep-l { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-2); } .ep-l b { font-family: var(--f-mono); font-weight: 600; color: var(--gold); white-space: nowrap; } .ep-l.zero b { color: var(--dim); } .ep-l.ch span, .ep-l.lvl span, .ep-l.mst span, .ep-l.bonus span { color: var(--acc); } .ep-l.wch span { color: var(--gold); } .ep-note { margin: 6px 0 0; font-size: 12.5px; } .ep-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; } .ep-sum b { font-size: 20px; color: var(--gold); letter-spacing: -.02em; } .ep-bal { margin: 8px 0 0; font-size: 12.5px; } @keyframes epUp { 50% { transform: scale(1.18); } } /* értesítések (szintlépés, kihívás, mesterség) – a HUD és a zárókép fölött */ #achToasts { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; } .ach { display: grid; gap: 2px; min-width: 280px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 16px; text-align: center; background: rgba(14,16,21,.92); border: 1px solid rgba(143, 211, 166,.4); box-shadow: var(--sh-lg); animation: achIn .5s var(--ease) both; } .ach.lvl { border-color: rgba(255,200,87,.5); } .ach b { font-weight: 700; font-size: 15px; color: var(--acc); } .ach.lvl b { color: var(--gold); } .ach.wch { border-color: rgba(255,200,87,.5); } .ach.wch b { color: var(--gold); } .ach span { font-size: 13px; color: var(--ink-2); } .ach.out { opacity: 0; transform: translateY(-8px); transition: opacity .45s, transform .45s; } @keyframes achIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } } /* lobbi: induló fegyver-készletek (szerveroldalon mentve) */ .lo-sets { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 0 0 var(--s3); } .lo-set { all: unset; cursor: pointer; display: grid; gap: 1px; min-width: 0; flex: 1 1 120px; padding: 7px 12px; border-radius: var(--r-sm); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t), box-shadow var(--t); } .lo-set b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lo-set span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lo-set:hover { background: var(--fill-2); } .lo-set[aria-selected="true"] { background: var(--acc-t); box-shadow: inset 0 0 0 1px rgba(143, 211, 166,.45); } .lo-set[aria-selected="true"] b { color: var(--acc); } .lo-set:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ===== FEJLŐDÉS vége ===== */ /* ===================================================================================== JÁTÉKÉLMÉNY: töltés-csík, ölés-gyűrű, kill-sáv érem, halálkép-részletek, átúsztatás ===================================================================================== */ /* töltés: felirat helyett vékony folyamatcsík a célkereszt alatt; a végén egy pillanatra kivillan */ #reloadHint { display: flex; flex-direction: column; align-items: center; gap: 4px; } #reloadHint .rl-t:empty { display: none; } #reloadHint .rl-bar { display: none; width: 46px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); overflow: hidden; } #reloadHint .rl-bar b { display: block; height: 100%; background: rgba(255, 255, 255, .85); transform-origin: left; transform: scaleX(0); } #reloadHint.loading .rl-bar, #reloadHint.done .rl-bar { display: block; } #reloadHint.done { opacity: 1; transition: opacity .35s ease-out; } #reloadHint.done .rl-bar b { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); } #reloadHint.done .rl-t { display: none; } /* találatjelző: pattanás; ölésnél a vonalak kifelé lökődnek, fejlövéses ölésnél arany-vörös */ #hitmark.pop { animation: gpHm .16s cubic-bezier(.2, .9, .3, 1); } #hitmark.kill.pop { animation: gpHmK .3s cubic-bezier(.15, .9, .25, 1); } @keyframes gpHm { from { transform: scale(1.5); } to { transform: scale(1); } } @keyframes gpHmK { 0% { transform: scale(.6) rotate(-8deg); } 45% { transform: scale(1.32) rotate(0); } 100% { transform: scale(1); } } #hitmark.armor i { background: #8EC5FF; } #hitmark.head.kill i { width: 19px; height: 3.5px; background: linear-gradient(90deg, var(--bad), var(--gold)); } .dmgnum.stack { transition: none; } /* ölés-gyűrű: vékony kör tágul ki a célkereszt körül és elhalványul */ #hmRing { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--bad); opacity: 0; pointer-events: none; } #hmRing.on { animation: hmRing .42s cubic-bezier(.1, .7, .3, 1) both; } #hmRing.on.head { border-color: var(--gold); } #hmRing.on.multi { animation-duration: .55s; border-width: 2.5px; } @keyframes hmRing { 0% { opacity: .95; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.9); border-width: 1px; } } /* kill-sáv: rugózva érkezik, az ikon „lebélyegződik”; fejlövésnél arany ikon; többszörös ölésnél érem-címke */ #killBanner.show { animation: kbIn .32s cubic-bezier(.2, 1.3, .35, 1) both; } @keyframes kbIn { from { opacity: 0; transform: translate(-50%, 8px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } #killBanner.show .kb-icon { animation: kbStamp .34s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes kbStamp { 0% { transform: scale(1.9) rotate(-14deg); opacity: 0; } 60% { transform: scale(.92) rotate(0); opacity: 1; } 100% { transform: scale(1); } } #killBanner.head .kb-icon { color: var(--light); } /* no-scope: fehér bélyegző, a sáv széle is kifehéredik egy pillanatra */ #killBanner.ns .kb-icon { color: var(--ink); } #killBanner.ns.show { animation: kbIn .32s cubic-bezier(.2, 1.3, .35, 1) both; } #killBanner .kb-multi { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: 4px; font-family: var(--f-disp); font-weight: 900; font-size: clamp(56px, 8.4vh, 96px); line-height: .8; letter-spacing: 0; color: var(--ink); text-shadow: var(--hud-sh-lg); animation: kbStamp .4s .06s cubic-bezier(.2, 1.4, .4, 1) both; } #killBanner .kb-multi[data-m="4"], #killBanner .kb-multi[data-m="5"] { color: var(--light); } /* sorozat-üzenet: a fokozattal nő */ #streakMsg.show { animation: stIn .38s cubic-bezier(.2, 1.3, .35, 1) both; } @keyframes stIn { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } } #streakMsg[data-lvl="3"] { font-size: 40px; } #streakMsg[data-lvl="4"] { font-size: 48px; } #streakMsg[data-lvl="5"] { font-size: 56px; color: var(--light); } /* találat-irány: az ív mérete és fényereje a sebzéssel nő */ .dmgdir { opacity: calc(.5 + .5 * var(--k, .9)); } .dmgdir::before { transform: scaleX(calc(.75 + .4 * var(--k, .9))); } /* páncél átütve: kék villanás az életerő-kártyán */ .hp.arbrk { animation: arBrk .55s ease-out; } @keyframes arBrk { 0% { box-shadow: 0 0 0 2px var(--blue), 0 0 18px rgba(92, 142, 242, .7); transform: translateX(-3px); } 20% { transform: translateX(3px); } 40% { transform: translateX(-1px); } 100% { box-shadow: none; transform: none; } } /* halálkép: a doboz az elesés után úszik be; a gyilkos neve, fegyvere, távolsága és maradék élete egy sorban */ #death:not(.spec) .death-box { animation-delay: .7s; } #death { animation: deathBg .9s ease-out both; } @keyframes deathBg { from { opacity: 0; } } .killed-by { gap: 10px; } .killed-by .kb-l { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .killed-by .kb-s { width: 1px; height: 18px; background: var(--line); } .killed-by .kb-w, .killed-by .kb-d { font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .killed-by .kb-w .wi { opacity: .92; } .killed-by .ki { width: 20px; height: 20px; } .killed-by .kb-hp { width: 54px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; } .killed-by .kb-hp i { display: block; height: 100%; background: var(--acc); } .killed-by .kb-hp[data-st="warn"] i { background: var(--warn); } .killed-by .kb-hp[data-st="bad"] i { background: var(--bad); } .killed-by .kb-hpn { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2ch; } .killed-by .kb-hpn::after { content: " HP"; font-size: 10px; font-weight: 600; color: var(--muted); } /* fekete átúsztató réteg (halál → killcam → újraéledés) – a HUD alatt, a kép fölött */ #xfade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; } /* ===================================================================================== SKILLEK (lobbi-fül, zárókép-sor, értesítés) – fekete-fehér, visszafogott; a kiosztott pont fehér, a függő világosszürke ===================================================================================== */ .tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--r-pill); background: var(--paper); color: var(--on-paper); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .tab-badge[hidden] { display: none; } .pill.vs { background: var(--fill-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); } .ach.sk { border-color: var(--line-3); } .ach.sk b { color: var(--ink); } .sc-price s { margin-left: 4px; color: var(--dim); font-weight: 500; } /* ===== SKILLEK vége ===== */ .room .rn .pill.vs { height: 18px; margin-left: 6px; vertical-align: 2px; font-size: 10.5px; } /* ===================== Ranglista (időszak, szűrő, keresés, lapozás) és nyilvános profil – leaderboard.js ===================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s4); } .lb-tools .seg { margin-bottom: 0; } .lb-search { flex: 1 1 220px; min-width: 0; max-width: 360px; margin-left: auto; } .lb-search input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 var(--s3); font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .lb-search input:hover { border-color: var(--line-2); } .lb-search input:focus { outline: none; border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); } .lb-search input::placeholder { color: var(--dim); } table.lb-main tbody tr[data-id] { cursor: pointer; } table.lb-main tbody tr[data-id]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } table.lb-main tbody tr:not(.empty-row):nth-child(-n+3) td:first-child { color: var(--muted); } #lbBody.loading { opacity: .55; transition: opacity var(--t); } .lb-name { font-weight: 600; } .bot-tag { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--r-xs); font-family: var(--f-mono); font-weight: 600; font-size: 10px; letter-spacing: .06em; color: var(--muted); background: var(--fill-2); vertical-align: 2px; } .tier-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s2); border-radius: var(--r-pill); font-weight: 500; font-size: 12px; color: var(--ink-2); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; } .tier-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, #888); } table.lb .num.up { color: var(--acc); } table.lb .num.down { color: #FF8A8A; } table.lb .dim { color: var(--dim); } .lb-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); min-height: 36px; } .lb-pg { display: inline-flex; gap: var(--s2); } .lb-legend { margin-top: var(--s5); color: var(--muted); font-size: 13px; } .lb-legend summary { cursor: pointer; width: max-content; padding: var(--s1) 0; } .lb-legend .ranks { margin: var(--s3) 0 0; } @media (max-width: 960px) { table.lb-main th:nth-child(5), table.lb-main td:nth-child(5) { display: table-cell; } table.lb-main th:nth-child(3), table.lb-main td:nth-child(3), table.lb-main th:nth-child(7), table.lb-main td:nth-child(7) { display: none; } } @media (max-width: 600px) { .lb-search { max-width: none; margin-left: 0; flex-basis: 100%; } table.lb-main th:nth-child(4), table.lb-main td:nth-child(4), table.lb-main th:nth-child(8), table.lb-main td:nth-child(8) { display: none; } } /* (agent/menus) a profil az oldalpanelben: menu.css */ /* (agent/menus) a zárókép stílusa: menu.css */ /* élő érem (játék közben) és teljesítmény-értesítés */ #medalPop { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); z-index: 55; display: grid; gap: 6px; justify-items: center; pointer-events: none; } .mp { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(14, 16, 21, .86); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); animation: esStamp .3s var(--ease) both; } .mp .es-ico { --ic: var(--gold); } .mp.out { opacity: 0; transform: translateY(-6px); transition: opacity .45s, transform .45s; } .ach.au b { color: var(--ink); } .ach.au.t1 { border-color: rgba(201, 138, 91, .6); } .ach.au.t2 { border-color: rgba(215, 219, 226, .55); } .ach.au.t3 { border-color: rgba(243, 162, 91, .6); } .ach.au.t3 b { color: var(--gold); } /* (reskin) a meccsvége (félig átlátszó, a jelenet átlátszik) alatt a HUD-számok nem „szellemképeznek” */ #hud:has(#endScreen:not([hidden])) :is(#topCenter, #bottomLeft, #bottomRight, #killfeed, #minimap, #mmFrame, #netStat, #hudShift, #cross) { visibility: hidden; } /* (reskin) keskeny (telefon) HUD: kisebb display-számok, az eredmény jobbra (a minitérkép mellé), a fegyvernév rejtve */ @media (max-width: 760px) { :root { --mm: 104px; --edge: 10px; } #topCenter { left: auto; right: var(--edge); transform: none; justify-items: end; } .score-row { grid-template-columns: 62px 96px 62px; } .team-score .n { font-size: 40px; } .team-score .lbl { font-size: 9px; letter-spacing: .08em; } #clock { font-size: 19px; } #modeLbl { font-size: 8.5px; letter-spacing: .08em; } .clock { gap: 5px; padding-top: 4px; } #killfeed { top: 104px; max-width: calc(100vw - 2 * var(--edge)); } .kf { font-size: 12px; height: 24px; } #hudShift { top: calc(var(--edge) + var(--mm) + 36px); font-size: 10px; } #bottomLeft { width: 46vw; } .hp { width: auto; gap: 8px; } #hpNum { font-size: 52px; } .hp-meta { min-width: 64px; } #weaponName { --silK: .62; } #weaponName.txt { display: none; } #ammoMag { font-size: 60px; } .ammo .sep, #ammoRes { font-size: 28px; } /* [hudfix] telefonon kisebb álló sziluett */ .ammo-card { column-gap: var(--s3); } #bombSil { width: 38px; height: 20px; margin-bottom: 2px; } #centerMsg { font-size: 48px; } #subMsg { top: calc(25% + 52px); font-size: 13px; } #killBanner { top: calc(50% + 120px); } #killBanner .kb-multi { font-size: 52px; } #killBanner .kb-txt { font-size: 13px; } } /* [guns3] Beállítások → Köszönet / Credits */ .credit-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; max-height: 60vh; overflow: auto; } .credit-list li { padding: 7px 10px; border-radius: var(--r-sm); background: var(--fill); color: var(--ink-2); font-size: 13px; line-height: 1.35; } .credit-list li a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); } .credit-list li a:hover { border-bottom-color: var(--light); color: var(--light-2); } .credit-list li small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; } .st-card.credits .hint { color: var(--muted); font-size: 12px; margin: 4px 0 0; } /* [ffire] csapattárs-sebzés: kill-sáv jelölés, társ-sebzésszám, célkereszt társ fölött, tabella-jelzés */ .kf.tk { box-shadow: inset 0 0 0 1px rgba(232, 87, 74, .55); } .kf .tkf { color: #E8574A; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; border: 1px solid rgba(232, 87, 74, .6); border-radius: var(--r-sm); line-height: 16px; } .dmgnum.mate { color: #E8574A !important; } #cross.mate { --cc: #E8574A !important; } .sb-ff { margin-left: var(--s2); font-size: 12px; font-weight: 600; color: var(--ink-2); vertical-align: middle; } .sb-ff.on { color: #E8574A; } /* [lgfix] klán-szoba, ahol a 0. csapat a kék (Nefelejcs) palettát kapja (public/js/teamskin.js → html.ts-x): a csapat-index szerinti rózsa/kék csere */ .ts-x .sb-team.a h3 span:last-child, .ts-x .es-team.t0 .es-th b, .ts-x .es-ts b.t-a { color: var(--blue); } .ts-x .sb-team.b h3 span:last-child, .ts-x .es-team.t1 .es-th b, .ts-x .es-ts b.t-b { color: var(--rose); } .ts-x .t-a, .ts-x .cn-cap[data-t="0"] .cn-ct { color: var(--blue-2); } .ts-x .t-b, .ts-x .cn-cap[data-t="1"] .cn-ct { color: var(--rose-2); } .ts-x .ht { --ht-r: var(--blue); --ht-b: var(--rose); } .ts-x .score-row:not([data-teams="0"]) .team-score.a .n { color: var(--blue); } .ts-x .score-row:not([data-teams="0"]) .team-score.b .n { color: var(--rose); } .ts-x .btn.team-a { background: var(--blue-t); color: var(--blue-2); box-shadow: inset 0 0 0 1px rgba(92, 142, 242, .22); } .ts-x .btn.team-a.on { background: var(--blue); color: var(--ink); box-shadow: none; } .ts-x .btn.team-b { background: var(--rose-t); color: var(--rose-2); box-shadow: inset 0 0 0 1px rgba(240, 86, 95, .22); } .ts-x .btn.team-b.on { background: var(--rose); color: var(--ink); box-shadow: none; } /* [lgfix] halál után ~1,2 s-ig a saját életerő-lemez látszik (a 0-ra esés a halálkép alatt is), utána a szokásos elhalványulás */ #hud .hp.hp-ko { opacity: 1 !important; } /* ---- [polish] apró csiszolások (docs/polish.md) ---- */ /* érintőképernyő: nincs csípéses és dupla koppintásos nagyítás (a görgetés marad); a saját vásznak touch-action: none-ja szigorúbb, az nyer */ html { touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* a kilépő gomb a menü első szintjén: elválasztva a beállításoktól, romboló stílus */ #menu #mLeave { margin-top: var(--s1); } #menu #mLeave:disabled { opacity: .55; } /* „Kattints a játékhoz” réteg: menü-gomb (egérrel és érintéssel is) */ #ctpMenu { gap: var(--s2); } #ctpMenu [data-ic] svg, #ctpMenu svg { width: 16px; height: 16px; } /* érintős menü-gomb a HUD jobb felső sarkában – csak durva mutatónál (érintőképernyő), a HUD pointer-events: none-ja alól kivéve */ #hudMenuBtn { display: none; position: absolute; top: var(--edge); right: var(--edge); z-index: 3; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: var(--r); background: rgba(6, 6, 7, .62); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); pointer-events: auto; touch-action: manipulation; cursor: var(--cur-ptr, pointer); } #hudMenuBtn svg { width: 22px; height: 22px; } @media (hover: none) and (pointer: coarse) { #hudMenuBtn { display: grid; } } /* ki- / belépés, kapcsolat-vesztés / visszatérés a chat-naplóban: egységes, halk sor ikonnal */ #chatLog .pres { display: flex; align-items: baseline; gap: 6px; color: var(--muted); } #chatLog .pres > i { flex: none; width: 14px; font: 600 11px/1 var(--f-mono); font-style: normal; text-align: center; color: var(--dim); } #chatLog .pres-join > i, #chatLog .pres-back > i { color: var(--acc); } #chatLog .pres-leave > i { color: var(--muted); } #chatLog .pres-disc > i { color: var(--warn); } /* kapcsolat-sáv (megszakadt / újracsatlakozva / akadozik): fent középen, a HUD és a lobbi fölött, nem fog egeret */ #netBanner { position: fixed; top: var(--s4); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: var(--s2); max-width: calc(100vw - 32px); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: rgba(6, 6, 7, .86); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh); color: var(--ink); font: 600 13px/1.2 var(--f-body); pointer-events: none; } #netBanner[hidden] { display: none; } #netBanner .nb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bad); animation: nbPulse 1s ease-in-out infinite alternate; } #netBanner.nb-back .nb-dot { background: var(--acc); animation: none; } #netBanner.nb-lag .nb-dot { background: var(--warn); } @keyframes nbPulse { from { opacity: 1; } to { opacity: .35; } } @media (prefers-reduced-motion: reduce) { #netBanner .nb-dot { animation: none; } }