:root{ --bg0:#070a10; --bg1:#0a1020; --glass: rgba(18, 28, 46, .62); --glass-2: rgba(12, 18, 30, .68); --stroke: rgba(140, 200, 255, .16); --stroke-2: rgba(140, 200, 255, .10); --text:#e6f0ff; --muted:#9db1d6; --muted2:#6f83aa; --accent:#56d6ff; --accent2:#b06bff; --warn:#ffa73a; --ok:#5bd88f; --err:#ff6b6b; /* theme-driven tints (override per faction) */ --bgRad1: rgba(86,214,255,.22); --bgRad2: rgba(176,107,255,.18); --bgRad3: rgba(86,214,255,.10); --barRad1: rgba(86,214,255,.18); --barRad2: rgba(176,107,255,.14); --gridTint1: rgba(90,180,255,.05); --gridTint2: rgba(90,180,255,.035); --faction-conic: conic-gradient(from 230deg at 70% 22%, rgba(86,214,255,.14), transparent 18%, rgba(176,107,255,.10), transparent 48%, rgba(86,214,255,.08), transparent 72%, rgba(176,107,255,.08), transparent); /* rarity */ --r-common: rgba(160, 180, 210, .55); --r-uncommon: rgba(96, 196, 255, .70); --r-rare: rgba(96, 255, 162, .78); --r-epic: rgba(191, 115, 255, .80); --r-legendary: rgba(255, 176, 71, .88); /* optional station BG image (1024x1024), set to: url(/global/shop/bg_station_1024.jpg) */ --station-bg: none; } *{box-sizing:border-box} html,body{} body{ margin:0; color:var(--text); font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(1200px 700px at 20% -10%, var(--bgRad1), transparent 60%), radial-gradient(900px 600px at 105% 20%, var(--bgRad2), transparent 55%), radial-gradient(1100px 800px at 30% 120%, var(--bgRad3), transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg0)); overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: var(--station-bg), var(--faction-conic), linear-gradient(transparent 0 0), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(0,0,0,.55) 100%); mix-blend-mode: screen; opacity:.35; } body::after{ content:""; position:fixed; inset:-2px; pointer-events:none; background: repeating-linear-gradient(90deg, var(--gridTint1) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, var(--gridTint2) 0 1px, transparent 1px 28px); opacity:.10; filter: blur(.2px); } /* ========================= Faction themes (5 factions) data-faction on is set by shop.js hook. Values are placeholders; tweak freely later. ========================= */ body[data-faction="m31"]{ /* Конкордат Андромеды — RED */ --accent:#ff4d5a; --accent2:#ff9a3a; --bg0:#06060b; --bg1:#12070b; --bgRad1: rgba(255,77,90,.24); --bgRad2: rgba(255,154,58,.16); --bgRad3: rgba(255,77,90,.10); --barRad1: rgba(255,77,90,.20); --barRad2: rgba(255,154,58,.16); --gridTint1: rgba(255,120,120,.05); --gridTint2: rgba(255,120,120,.035); --faction-conic: conic-gradient(from 215deg at 70% 18%, rgba(255,77,90,.18), transparent 18%, rgba(255,154,58,.12), transparent 46%, rgba(255,77,90,.10), transparent 72%, rgba(255,154,58,.10), transparent); } body[data-faction="m33"]{ /* Картель Треугольника — BLUE */ --accent:#56d6ff; --accent2:#3f7cff; --bg0:#060812; --bg1:#070f1f; --bgRad1: rgba(86,214,255,.25); --bgRad2: rgba(63,124,255,.16); --bgRad3: rgba(86,214,255,.10); --barRad1: rgba(86,214,255,.20); --barRad2: rgba(63,124,255,.16); --gridTint1: rgba(90,180,255,.05); --gridTint2: rgba(90,180,255,.035); --faction-conic: conic-gradient(from 235deg at 70% 18%, rgba(86,214,255,.16), transparent 18%, rgba(63,124,255,.12), transparent 48%, rgba(86,214,255,.09), transparent 74%, rgba(63,124,255,.09), transparent); } body[data-faction="smc"]{ /* Магелланские Флотилии — GREEN */ --accent:#5bd88f; --accent2:#56d6ff; --bg0:#050b0a; --bg1:#061513; --bgRad1: rgba(91,216,143,.22); --bgRad2: rgba(86,214,255,.14); --bgRad3: rgba(91,216,143,.10); --barRad1: rgba(91,216,143,.18); --barRad2: rgba(86,214,255,.14); --gridTint1: rgba(91,216,143,.05); --gridTint2: rgba(91,216,143,.035); --faction-conic: conic-gradient(from 205deg at 70% 18%, rgba(91,216,143,.16), transparent 20%, rgba(86,214,255,.10), transparent 50%, rgba(91,216,143,.09), transparent 76%, rgba(86,214,255,.08), transparent); } body[data-faction="m104"]{ /* Синдикат Сомбреро — PURPLE */ --accent:#b06bff; --accent2:#56d6ff; --bg0:#070611; --bg1:#120a22; --bgRad1: rgba(176,107,255,.22); --bgRad2: rgba(86,214,255,.14); --bgRad3: rgba(176,107,255,.10); --barRad1: rgba(176,107,255,.18); --barRad2: rgba(86,214,255,.14); --gridTint1: rgba(176,107,255,.05); --gridTint2: rgba(176,107,255,.035); --faction-conic: conic-gradient(from 245deg at 70% 18%, rgba(176,107,255,.16), transparent 18%, rgba(86,214,255,.10), transparent 48%, rgba(176,107,255,.10), transparent 74%, rgba(86,214,255,.08), transparent); } body[data-faction="m101"]{ /* Лига Вертушки — ORANGE */ --accent:#ffa73a; --accent2:#b06bff; --bg0:#0a0705; --bg1:#1b0f08; --bgRad1: rgba(255,167,58,.24); --bgRad2: rgba(176,107,255,.14); --bgRad3: rgba(255,167,58,.10); --barRad1: rgba(255,167,58,.18); --barRad2: rgba(176,107,255,.14); --gridTint1: rgba(255,167,58,.05); --gridTint2: rgba(255,167,58,.035); --faction-conic: conic-gradient(from 220deg at 70% 18%, rgba(255,167,58,.16), transparent 20%, rgba(176,107,255,.10), transparent 50%, rgba(255,167,58,.09), transparent 76%, rgba(176,107,255,.08), transparent); } /* Optional: small badge in topbar, created by JS if missing */ .faction-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; background: linear-gradient(180deg, rgba(18,28,46,.55), rgba(10,16,32,.35)); border:1px solid var(--stroke); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset; color: var(--text); letter-spacing:.12em; font-size:11px; text-transform: uppercase; user-select:none; white-space:nowrap; } .faction-badge::before{ content:""; width:8px;height:8px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent2)); box-shadow: 0 0 16px rgba(0,0,0,.2), 0 0 18px rgba(255,255,255,.06) inset; transform: rotate(45deg); } a{color:inherit;text-decoration:none} /* Topbar */ .topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background: linear-gradient(180deg, rgba(10,16,32,.92), rgba(8,10,16,.72)); border-bottom:1px solid var(--stroke-2); backdrop-filter: blur(10px); } .topbar::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 140px at 20% 0%, var(--barRad1), transparent 60%), radial-gradient(600px 140px at 80% 0%, var(--barRad2), transparent 60%); opacity:.75; } .brand{display:flex;flex-direction:column;gap:2px; letter-spacing:.08em; text-transform:uppercase; position:relative} .brand-main{font-weight:800; font-size:14px} .brand-sub{font-weight:600; font-size:10px; color:var(--muted2)} .balances{display:flex; align-items:center; gap:10px; position:relative} .sep{color:rgba(255,255,255,.18)} .bal{ padding:6px 10px; border:1px solid var(--stroke-2); background: rgba(12,18,30,.55); border-radius:999px; backdrop-filter: blur(8px); } .bal b{font-variant-numeric: tabular-nums} .bal-cred{box-shadow: 0 0 0 1px rgba(86,214,255,.08) inset} .bal-nex{box-shadow: 0 0 0 1px rgba(176,107,255,.08) inset} /* Layout */ .layout{ display:grid; grid-template-columns: 260px 1fr 340px; gap:14px; padding:14px 14px 18px; max-width: 1400px; margin:0 auto; } @media (max-width: 1100px){ .layout{grid-template-columns: 240px 1fr} .right{grid-column:1 / -1} .panel.sticky{position:relative; top:auto} } @media (max-width: 820px){ .layout{grid-template-columns: 1fr} .left{order:2} .center{order:1} .right{order:3} } /* Panels: “glass terminal” */ .panel{ position:relative; background: linear-gradient(180deg, var(--glass), var(--glass-2)); border:1px solid var(--stroke); border-radius:16px; box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; overflow:hidden; backdrop-filter: blur(12px); margin-bottom: 10px; } .panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(800px 260px at 20% 0%, rgba(86,214,255,.14), transparent 60%), radial-gradient(800px 260px at 90% 0%, rgba(176,107,255,.11), transparent 60%); opacity:.85; } .panel::after{ content:""; position:absolute; inset:0; pointer-events:none; /* corner brackets */ background: linear-gradient(90deg, rgba(86,214,255,.35), transparent 70%) left top/26px 2px no-repeat, linear-gradient(180deg, rgba(86,214,255,.35), transparent 70%) left top/2px 26px no-repeat, linear-gradient(90deg, rgba(86,214,255,.22), transparent 70%) right top/26px 2px no-repeat, linear-gradient(180deg, rgba(86,214,255,.22), transparent 70%) right top/2px 26px no-repeat, linear-gradient(90deg, rgba(86,214,255,.22), transparent 70%) left bottom/26px 2px no-repeat, linear-gradient(180deg, rgba(86,214,255,.22), transparent 70%) left bottom/2px 26px no-repeat, linear-gradient(90deg, rgba(86,214,255,.35), transparent 70%) right bottom/26px 2px no-repeat, linear-gradient(180deg, rgba(86,214,255,.35), transparent 70%) right bottom/2px 26px no-repeat; opacity:.55; mix-blend-mode: screen; } .panel-head{ position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 12px 10px; border-bottom:1px solid var(--stroke-2); } .panel-title{font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px} .panel-hint{color:var(--muted2); font-size:11px} /* Left categories */ .cat-list{padding:10px; display:flex; flex-direction:column; gap:8px; position:relative} .cat{ position:relative; padding:10px 10px; border-radius:12px; border:1px solid rgba(140,200,255,.10); background: rgba(9,12,18,.35); cursor:pointer; user-select:none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease; } .cat:hover{ transform: translateY(-1px); border-color: rgba(86,214,255,.35); box-shadow: 0 0 0 1px rgba(86,214,255,.06) inset, 0 10px 28px rgba(0,0,0,.35); background: rgba(10,16,32,.42); } .cat.active{ border-color: rgba(86,214,255,.55); box-shadow: 0 0 0 1px rgba(86,214,255,.10) inset, 0 0 24px rgba(86,214,255,.14); } .cat > div{font-weight:700; letter-spacing:.02em} /* Center header */ .grid-head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:12px 12px 10px; border-bottom:1px solid var(--stroke-2); } .grid-title{display:flex; flex-direction:column; gap:2px} .grid-h1{font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px} .grid-h2{color:var(--muted2); font-size:11px} .grid-tools{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .field{display:flex; flex-direction:column; gap:6px; min-width: 160px} .label{font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted2)} .input{ height:34px; padding:7px 10px; border-radius:12px; border:1px solid rgba(140,200,255,.14); background: rgba(7,10,16,.45); color: var(--text); outline:none; transition: border-color .12s ease, box-shadow .12s ease; } .input:focus{ border-color: rgba(86,214,255,.48); box-shadow: 0 0 0 3px rgba(86,214,255,.10); } /* Items grid */ .items-grid{ position:relative; padding:12px; display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:12px; min-height: 360px; } .empty-note{ grid-column:1 / -1; padding:14px; border-radius:12px; border:1px dashed rgba(140,200,255,.18); color:var(--muted); background: rgba(0,0,0,.18); } /* Item card */ .item{ position:relative; border-radius:14px; border:1px solid rgba(140,200,255,.12); background: rgba(0,0,0,.18); overflow:hidden; cursor:pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease; min-height: 168px; } .item::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(420px 180px at 30% 0%, rgba(86,214,255,.10), transparent 60%), radial-gradient(420px 180px at 90% 0%, rgba(176,107,255,.08), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 38px); opacity:.55; mix-blend-mode: screen; } /* .item::after{ content:""; position:absolute; inset:-120%; pointer-events:none; background: radial-gradient(closest-side at 40% 45%, rgba(255,255,255,.10), transparent 70%), radial-gradient(closest-side at 55% 55%, rgba(86,214,255,.18), transparent 74%), radial-gradient(closest-side at 62% 40%, rgba(176,107,255,.12), transparent 76%), linear-gradient(115deg, transparent 34%, rgba(255,255,255,.10) 48%, rgba(86,214,255,.18) 52%, rgba(255,255,255,.08) 56%, transparent 70%); transform: translate3d(-38%, -12%, 0) rotate(-14deg); opacity:0; filter: blur(10px); mix-blend-mode: screen; will-change: transform, opacity; transition: opacity .18s ease, filter .18s ease; animation: itemHoloFloat 6.2s ease-in-out infinite alternate; } */ .item:hover::after{ opacity:.30; filter: blur(8px); animation-duration: 4.6s; } @media (prefers-reduced-motion: reduce){ .item::after{ animation:none } } @keyframes itemHoloFloat{ 0%{ transform: translate3d(-38%, -12%, 0) rotate(-14deg); } 100%{ transform: translate3d(38%, 12%, 0) rotate(-14deg); } } .item:hover{ transform: translateY(-2px); border-color: rgba(86,214,255,.35); box-shadow: 0 0 0 1px rgba(86,214,255,.05) inset, 0 14px 34px rgba(0,0,0,.45); background: rgba(0,0,0,.24); } .item.selected{ border-color: rgba(86,214,255,.65); box-shadow: 0 0 0 1px rgba(86,214,255,.08) inset, 0 0 28px rgba(86,214,255,.16); } .item.disabled{ opacity:.45; cursor:not-allowed; filter:saturate(.6); transform:none!important; box-shadow:none!important; } .thumb-wrap{ /* height: 104px; */ display:flex; align-items:center; justify-content:center; padding:20px 10px 0px; } .thumb{ max-width: 100%; max-height: 100%; image-rendering: -webkit-optimize-contrast; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); } .meta{padding:8px 10px 10px} .title{ font-weight:800; letter-spacing:.03em; color: rgba(230,240,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px; min-height: 16px; text-align: end; } .prices{ display:flex; gap:8px; align-items:center; float: inline-end; padding-bottom: 10px } .price{ display:inline-flex; align-items:baseline; gap:6px; padding:6px 8px; border-radius:999px; border:1px solid rgba(140,200,255,.12); background: rgba(7,10,16,.35); font-weight:800; } .price span{font-weight:700; color:var(--muted2); font-size:11px} .hidden{display:none!important} /* rarity tag */ .rarity-tag{ position:absolute; top:10px; left:10px; padding:4px 7px; font-size:10px; font-weight:900; letter-spacing:.10em; text-transform:uppercase; border-radius:10px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.25); color: rgba(230,240,255,.90); backdrop-filter: blur(8px); } .item.rarity-common{border-color: rgba(160,180,210,.30)} .item.rarity-uncommon{border-color: rgba(96,196,255,.30)} .item.rarity-rare{border-color: rgba(96,255,162,.34)} .item.rarity-epic{border-color: rgba(191,115,255,.34)} .item.rarity-legendary{border-color: rgba(255,176,71,.36)} /* Right preview */ .panel.sticky{position:sticky; top:74px} .preview{ padding:12px; display:grid; grid-template-columns: 1fr; gap:10px; } .preview.empty{ display:flex; align-items:center; justify-content:center; min-height: 260px; } .hint{color:var(--muted2); text-align:center} .p-media{ position:relative; height: 220px; border-radius:14px; border:1px solid rgba(140,200,255,.16); /* holographic glass tank (CSS-only) */ --p-accent: rgba(86,214,255,.28); background: radial-gradient(620px 260px at 18% 0%, rgba(86,214,255,.22), transparent 60%), radial-gradient(620px 260px at 92% 0%, rgba(176,107,255,.18), transparent 60%), conic-gradient(from 210deg at 50% 55%, rgba(86,214,255,.14), rgba(255,176,71,.10), rgba(191,115,255,.12), rgba(86,214,255,.14)), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)), rgba(0,0,0,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 0 1px rgba(86,214,255,.04), 0 18px 44px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; overflow:hidden; } /* rarity accents for preview tank */ .p-media[data-rarity="common"]{ --p-accent: rgba(205,220,245,.20) } .p-media[data-rarity="uncommon"]{ --p-accent: rgba(96,196,255,.22) } .p-media[data-rarity="rare"]{ --p-accent: rgba(109,255,201,.26) } .p-media[data-rarity="epic"]{ --p-accent: rgba(191,115,255,.24) } .p-media[data-rarity="legendary"]{ --p-accent: rgba(255,176,71,.24) } /* holographic layers (grid + scan + grain-ish) */ .p-media::before{ content:""; position:absolute; inset:0; pointer-events:none; background: /* subtle scanlines */ repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px), /* technical grid */ repeating-linear-gradient(90deg, rgba(86,214,255,.10) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(86,214,255,.06) 0 1px, transparent 1px 44px), /* holographic shimmer blob */ radial-gradient(420px 220px at 40% 40%, var(--p-accent), transparent 62%), radial-gradient(520px 320px at 70% 70%, rgba(176,107,255,.12), transparent 62%); opacity:.55; mix-blend-mode: screen; filter: blur(.15px); background-size: auto, 1px 100%, 100% 1px, auto, auto; animation: holoDrift 6.5s linear infinite alternate; } /* sweeping holo highlight */ .p-media::after{ content:""; position:absolute; inset:-30%; pointer-events:none; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 28%, var(--p-accent) 46%, rgba(255,255,255,.06) 62%, transparent 78%); transform: translateX(-55%) rotate(-12deg); opacity:.55; mix-blend-mode: screen; filter: blur(.2px); animation: holoSweep 3.8s ease-in-out infinite alternate; } /* top glass reflection */ .p-media > .spinner, .p-media > canvas, .p-media > img, .p-media > video{ position:relative; z-index:2; } .p-media .spinner{ opacity:.75; } .p-media:hover{ border-color: rgba(86,214,255,.34); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 1px rgba(86,214,255,.06), 0 24px 60px rgba(0,0,0,.52); } @media (prefers-reduced-motion: reduce){ .p-media::before, .p-media::after{ animation:none } } .p-info{ border-radius:14px; border:1px solid rgba(140,200,255,.12); background: radial-gradient(700px 220px at 20% 0%, rgba(86,214,255,.10), transparent 65%), radial-gradient(700px 220px at 90% 0%, rgba(176,107,255,.08), transparent 65%), rgba(0,0,0,.14); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset; padding:10px 10px 8px; } .p-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:900; letter-spacing:.02em; margin-bottom:10px; } .p-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* rarity chip in preview title */ .rarity-chip{ flex:0 0 auto; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.10em; text-transform:uppercase; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); color: rgba(230,240,255,.90); } .rarity-chip[data-rarity="common"]{ border-color: var(--r-common) } .rarity-chip[data-rarity="uncommon"]{ border-color: var(--r-uncommon) } .rarity-chip[data-rarity="rare"]{ border-color: var(--r-rare) } .rarity-chip[data-rarity="epic"]{ border-color: var(--r-epic) } .rarity-chip[data-rarity="legendary"]{ border-color: var(--r-legendary) } .props{display:grid; gap:8px} .prop{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:10px; border:1px solid rgba(140,200,255,.08); background: rgba(0,0,0,.14); } .k{color:var(--muted2); font-size:11px; letter-spacing:.06em; text-transform:uppercase} .v{font-weight:800} /* Buy box */ .buybox{ padding: 10px 12px 12px; border-top:1px solid var(--stroke-2); display:grid; gap:10px; } .qty{ display:flex; gap:8px; align-items:center; } #qty-input{ width:100%; height:34px; padding:7px 10px; border-radius:12px; border:1px solid rgba(140,200,255,.14); background: rgba(7,10,16,.45); color:var(--text); outline:none; } /* Buttons */ .btn{ height:34px; padding:0 12px; border-radius:12px; border:1px solid rgba(86,214,255,.30); background: rgba(86,214,255,.10); color:var(--text); font-weight:900; letter-spacing:.04em; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .btn:hover{ transform: translateY(-1px); border-color: rgba(86,214,255,.55); background: rgba(86,214,255,.14); box-shadow: 0 0 18px rgba(86,214,255,.10); } .btn:active{transform: translateY(0)} .btn:disabled{opacity:.5; cursor:not-allowed} .btn.sm{width:38px; padding:0; border-radius:12px} .btn.ghost{ border-color: rgba(140,200,255,.20); background: rgba(0,0,0,.12); } .buy-actions{display:grid; grid-template-columns: 1fr; gap:8px} .buy-msg{color:var(--muted); font-size:12px; min-height: 16px} /* Spinner */ .spinner{ width:42px;height:42px; border:4px solid rgba(255,255,255,0.16); border-top-color: rgba(230,240,255,.95); border-radius:50%; animation: spin .8s linear infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); } @keyframes spin{to{transform:rotate(360deg)}} .preview.loaded .spinner{display:none} .preview.loaded canvas{display:block} canvas{background: transparent} /* --- Holographic motion --- */ @keyframes holoSweep{ 0%{ transform: translateX(-60%) rotate(-12deg); opacity:.42 } 45%{ opacity:.62 } 100%{ transform: translateX(60%) rotate(-12deg); opacity:.42 } } @keyframes holoDrift{ 0%{ background-position: 0 0, 0 0, 0 0, 0 0, 0 0 } 100%{ background-position: 0 64px, 120px 0, 0 120px, 0 0, 0 0 } } /* ========================= SHIP HUD HEADER (DarkOrbit-like) - CSS only: no images - Uses existing classes: .topbar, .nxg-nav, .nav-btn ========================= */ :root{ --header-sticky: 10px; /* for right sticky panel */ --hud-metal1: rgba(18, 26, 44, .92); --hud-metal2: rgba(9, 12, 18, .72); --hud-edge: rgba(140,200,255,.22); --hud-edge2: rgba(140,200,255,.12); --hud-glow: rgba(86,214,255,.16); --hud-glow2: rgba(176,107,255,.14); --start1: rgba(74,255,140,.26); --start2: rgba(40,190,110,.18); } .nxg-header{ /* position: sticky; top: 0; z-index: 50; */ padding: 10px 14px 0; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); /* backdrop-filter: blur(8px); */ } .nxg-header::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(900px 140px at 50% 0%, var(--barRad1), transparent 62%), radial-gradient(900px 140px at 80% 0%, var(--barRad2), transparent 62%); opacity:.65; } .nxg-header .topbar{ position:relative; top:auto; z-index:1; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--hud-edge); background: radial-gradient(700px 200px at 15% 0%, rgba(255,255,255,.06), transparent 60%), radial-gradient(700px 200px at 85% 0%, rgba(255,255,255,.04), transparent 62%), linear-gradient(180deg, var(--hud-metal1), var(--hud-metal2)); box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; overflow:hidden; backdrop-filter: blur(12px); } .nxg-header .topbar::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.06) 22%, transparent 36%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 54px); opacity:.30; mix-blend-mode: screen; } .hud-left, .hud-right{ display:flex; align-items:center; gap:10px; min-width: 0; } .hud-right{ justify-content:flex-end; } .top-right{ justify-content:flex-end; } /* for JS faction badge injection */ /* Logo */ .nxg-logo{ display:flex; align-items:center; gap:10px; padding: 6px 10px; border-radius: 14px; border:1px solid var(--hud-edge2); background: rgba(0,0,0,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset; user-select:none; } .nxg-logo .mark{ width:22px;height:22px; border-radius: 6px; transform: rotate(45deg); background: radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(180deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 0 24px rgba(0,0,0,.25), 0 0 18px rgba(255,255,255,.06) inset; } .nxg-logo .word{ display:flex; flex-direction:column; gap:1px; min-width:0 } .nxg-logo .t{ font-weight: 1000; letter-spacing:.16em; text-transform: uppercase; font-size: 12px; line-height:1.1; } .nxg-logo .s{ font-weight: 700; letter-spacing:.10em; text-transform: uppercase; font-size: 9px; color: var(--muted2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Small HUD buttons (mail, gates, etc.) */ .hud-mini{ display:flex; align-items:center; gap:8px; min-width:0; } .hud-mini .hud-btn{ position:relative; height:32px; display:inline-flex; align-items:center; gap:8px; padding:0 10px; border-radius: 12px; border:1px solid var(--hud-edge2); background: rgba(0,0,0,.14); color: rgba(230,240,255,.92); font-weight: 900; letter-spacing:.08em; text-transform: uppercase; font-size: 10px; overflow:hidden; transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease; } .hud-mini .hud-btn::before{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 45%, var(--hud-glow) 55%, transparent 70%); opacity:.0; transform: translateX(-20%) rotate(-10deg); transition: opacity .18s ease; pointer-events:none; } .hud-mini .hud-btn:hover{ transform: translateY(-1px); border-color: rgba(86,214,255,.40); background: rgba(86,214,255,.08); box-shadow: 0 0 22px rgba(86,214,255,.10); } .hud-mini .hud-btn:hover::before{ opacity:.65; } /* Start button */ .start-btn{ position:relative; height: 44px; min-width: 210px; display:flex; align-items:center; justify-content:center; padding: 0 18px; border: 1px solid rgba(84, 255, 156, .42); background: radial-gradient(340px 90px at 50% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, var(--start1), var(--start2)), rgba(0,0,0,.22); color: rgba(230,255,240,.96); font-weight: 1000; letter-spacing: .18em; text-transform: uppercase; border-radius: 14px; clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 32px rgba(74,255,140,.10); overflow:hidden; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .start-btn::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.18) 48%, rgba(74,255,140,.26) 54%, transparent 70%); transform: translateX(-30%) rotate(-12deg); opacity:.65; mix-blend-mode: screen; animation: startSweep 2.8s ease-in-out infinite alternate; pointer-events:none; } @keyframes startSweep{ 0%{ transform: translateX(-40%) rotate(-12deg); opacity:.35 } 100%{ transform: translateX(40%) rotate(-12deg); opacity:.35 } } .start-btn:hover{ transform: translateY(-1px); border-color: rgba(84, 255, 156, .62); box-shadow: 0 22px 52px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 42px rgba(74,255,140,.14); } /* Nav strip */ .navpanel{ margin-top: 10px; padding: 8px 10px; border-radius: 18px; border: 1px solid var(--hud-edge2); background: radial-gradient(900px 240px at 50% 0%, rgba(255,255,255,.05), transparent 62%), linear-gradient(180deg, rgba(8,12,18,.78), rgba(0,0,0,.40)); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter: blur(12px); overflow:hidden; } .nxg-nav{ display:none; flex-wrap:wrap; gap: 8px; justify-content:center; align-items:center; padding: 2px 2px; } .nav-btn{ position:relative; height: 34px; display:inline-flex; align-items:center; justify-content:center; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(140,200,255,.18); background: radial-gradient(140px 80px at 50% 0%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, rgba(16,22,36,.62), rgba(6,8,12,.38)); color: rgba(230,240,255,.92); font-weight: 1000; letter-spacing:.12em; text-transform: uppercase; font-size: 10px; clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%); overflow:hidden; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease; } /* .nav-btn::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); transform: translateX(-120%); opacity:.0; mix-blend-mode: screen; } */ .nav-btn:hover{ transform: translateY(-1px); border-color: rgba(86,214,255,.38); box-shadow: 0 0 22px rgba(86,214,255,.10); background: radial-gradient(140px 80px at 50% 0%, rgba(255,255,255,.08), transparent 60%), linear-gradient(180deg, rgba(22,30,48,.70), rgba(6,8,12,.38)); } .nav-btn:hover::before{ opacity:.55; transform: translateX(120%); transition: transform .65s ease, opacity .18s ease; } .nav-btn.is-active{ border-color: rgba(86,214,255,.62); box-shadow: 0 0 0 1px rgba(86,214,255,.10) inset, 0 0 28px rgba(86,214,255,.14); background: radial-gradient(160px 90px at 50% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, rgba(86,214,255,.16), rgba(6,8,12,.38)); } .nav-btn.nav-premium{ border-color: rgba(255,176,71,.36); box-shadow: 0 0 22px rgba(255,176,71,.10); } .nav-btn.nav-premium.is-active{ border-color: rgba(255,176,71,.62); background: radial-gradient(160px 90px at 50% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, rgba(255,176,71,.18), rgba(6,8,12,.38)); } @media (max-width: 820px){ :root{ --header-sticky: 0px; } .nxg-header{ padding: 8px 10px 0; } .nxg-header .topbar{ grid-template-columns: 1fr; justify-items: stretch; } .start-btn{ width: 100%; } .hud-right{ justify-content:space-between; } } /* Adjust right sticky panel offset to header height */ .panel.sticky{ top: var(--header-sticky); } /* ========================================================== NXG SHIP-HUD HEADER (V2) — cockpit-style, CSS only ========================================================== */ .nxg-header.nxg-hud[data-hud="v2"]{ /* override older header visuals */ /* position: sticky; top: 0; z-index: 80; */ padding: 10px 14px 8px; background: radial-gradient(1100px 240px at 50% -40px, rgba(60,220,255,.10), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.10) 60%, transparent); /* backdrop-filter: blur(10px); */ } .nxg-header.nxg-hud[data-hud="v2"]::before, .nxg-header.nxg-hud[data-hud="v2"]::after{ display:none !important; } .nxg-hud[data-hud="v2"]{ --hud-accent: var(--accent); --hud-accent2: var(--accent2); --hud-cyan: rgba(90, 235, 255, .70); --hud-cyan2: rgba(60, 190, 255, .45); --hud-amber: rgba(255, 170, 40, .85); --hud-metal-a: rgba(8, 14, 18, .86); --hud-metal-b: rgba(12, 22, 30, .92); --hud-metal-c: rgba(18, 34, 44, .80); --hud-glass: rgba(10, 30, 40, .42); --hud-glass2: rgba(10, 40, 60, .18); --hud-line: rgba(160, 240, 255, .18); --hud-line2: rgba(255,255,255,.08); --hud-shadow: 0 18px 45px rgba(0,0,0,.45); } /* FRAME */ .nxg-hud[data-hud="v2"] .hud-frame{ max-width: 1320px; margin: 0 auto; position: relative; padding: 14px 14px 12px; border-radius: 16px; filter: drop-shadow(var(--hud-shadow)); background: radial-gradient(900px 160px at 50% 0%, rgba(90,235,255,.14), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%), linear-gradient(180deg, var(--hud-metal-b), var(--hud-metal-a)); box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 0 1px rgba(170,245,255,.08), 0 0 22px rgba(0,0,0,.25) inset; overflow: hidden; } @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){ .nxg-hud[data-hud="v2"] .hud-frame{ clip-path: polygon( 0% 0%, 6% 0%, 9% 10%, 42% 10%, 46% 0%, 54% 0%, 58% 10%, 91% 10%, 94% 0%, 100% 0%, 100% 86%, 96% 100%, 4% 100%, 0% 86% ); } } /* subtle grid + scanlines over the whole HUD frame */ .nxg-hud[data-hud="v2"] .hud-frame::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(2px 2px at 14% 34%, rgba(255,255,255,.10), transparent 60%), radial-gradient(2px 2px at 74% 46%, rgba(255,255,255,.08), transparent 60%), radial-gradient(2px 2px at 46% 22%, rgba(255,255,255,.09), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.028), rgba(255,255,255,.028) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(90deg, rgba(140,240,255,.028), rgba(140,240,255,.028) 1px, transparent 1px, transparent 9px), radial-gradient(800px 220px at 50% 30%, rgba(80,210,255,.10), transparent 60%); opacity: .75; mix-blend-mode: screen; animation: hudScan 7.5s ease-in-out infinite alternate; } @keyframes hudScan{ from{ transform: translateY(-6px); opacity:.55 } to { transform: translateY(6px); opacity:.85 } } /* top rail / bevel highlight */ .nxg-hud[data-hud="v2"] .hud-frame::after{ content:""; position:absolute; left:0; right:0; top:0; height:14px; background: linear-gradient(90deg, transparent 0%, rgba(90,235,255,.14) 14%, rgba(255,255,255,.10) 50%, rgba(90,235,255,.14) 86%, transparent 100% ); opacity:.85; pointer-events:none; } /* TOP GRID */ .nxg-hud[data-hud="v2"] .hud-top{ display: grid; grid-template-columns: 360px 1fr 360px; gap: 12px; align-items: stretch; } @media (max-width: 980px){ .nxg-hud[data-hud="v2"] .hud-top{ grid-template-columns: 1fr; gap: 10px; } } /* PANELS */ .nxg-hud[data-hud="v2"] .hud-panel{ position: relative; padding: 12px 12px 10px; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%), radial-gradient(260px 120px at 30% 0%, rgba(90,235,255,.14), transparent 62%), linear-gradient(180deg, var(--hud-glass), rgba(0,0,0,.18)); box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 0 1px rgba(170,245,255,.08), 0 0 18px rgba(0,0,0,.25) inset; } @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){ .nxg-hud[data-hud="v2"] .hud-panel--left{ clip-path: polygon(0 0, 95% 0, 100% 18%, 100% 82%, 95% 100%, 0 100%, 0 84%, 0 16%); } .nxg-hud[data-hud="v2"] .hud-panel--right{ clip-path: polygon(5% 0, 100% 0, 100% 100%, 5% 100%, 0 82%, 0 18%); } } .nxg-hud[data-hud="v2"] .hud-panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(14px 14px at 9% 22%, rgba(255,170,40,.28), transparent 65%), radial-gradient(14px 14px at 91% 22%, rgba(90,235,255,.20), transparent 65%), linear-gradient(90deg, rgba(140,240,255,.06), transparent 45%, rgba(140,240,255,.06)); opacity:.9; } .nxg-hud[data-hud="v2"] .hud-panel::after{ content:""; position:absolute; left:10px; right:10px; top:8px; height:2px; background: linear-gradient(90deg, transparent, rgba(140,240,255,.22), transparent); opacity:.9; pointer-events:none; } /* LOGO */ .nxg-hud[data-hud="v2"] .nxg-logo2{ position: relative; display: grid; grid-template-columns: 1fr; gap: 2px; text-decoration: none; color: var(--text); padding: 8px 10px 8px 12px; border-radius: 12px; overflow: hidden; background: radial-gradient(260px 90px at 20% 20%, rgba(90,235,255,.16), transparent 65%), linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.12)); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.45); } .nxg-hud[data-hud="v2"] .nxg-logo2__plate{ position:absolute; inset:-1px; background: linear-gradient(90deg, rgba(90,235,255,.22), transparent 60%), radial-gradient(120px 60px at 18% 50%, rgba(255,255,255,.10), transparent 70%); opacity:.7; mix-blend-mode: screen; pointer-events:none; } .nxg-hud[data-hud="v2"] .nxg-logo2__nxg{ font-weight: 1000; letter-spacing: .08em; font-size: 34px; line-height: 1; text-transform: uppercase; text-shadow: 0 0 12px rgba(90,235,255,.35), 0 0 2px rgba(255,255,255,.25); } .nxg-hud[data-hud="v2"] .nxg-logo2__sub{ font-size: 10px; letter-spacing: .35em; opacity: .86; white-space: nowrap; } /* STATUS CHIPS */ .nxg-hud[data-hud="v2"] .hud-status{ display:flex; flex-wrap:wrap; gap: 8px; margin: 10px 0 8px; } .nxg-hud[data-hud="v2"] .chip{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%), rgba(0,0,0,.28); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); color: rgba(235,255,255,.92); } .nxg-hud[data-hud="v2"] .chip b{ font-weight: 900; letter-spacing:.04em; } .nxg-hud[data-hud="v2"] .chip--dock{ box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 16px rgba(90,235,255,.12); } /* QUICK BUTTONS */ .nxg-hud[data-hud="v2"] .hud-quick{ display:flex; gap: 10px; } .nxg-hud[data-hud="v2"] .qbtn{ position: relative; display:inline-flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 12px; text-decoration:none; color: rgba(235,255,255,.92); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.14)); box-shadow: 0 0 0 1px rgba(170,245,255,.12) inset, 0 0 0 1px rgba(0,0,0,.55); overflow:hidden; } .nxg-hud[data-hud="v2"] .qbtn::after{ content:""; position:absolute; inset:-60% -30%; background: linear-gradient(120deg, transparent, rgba(90,235,255,.14), transparent); opacity: 0; transform: translateX(-12px); transition: opacity .25s ease; } .nxg-hud[data-hud="v2"] .qbtn:hover::after{ opacity:1; } /* CORE */ .nxg-hud[data-hud="v2"] .hud-core{ position: relative; display:flex; align-items:center; justify-content:center; min-height: 104px; padding: 0 12px; } .nxg-hud[data-hud="v2"] .core-rig{ width: 74px; height: 74px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.12)); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); position:absolute; left: 10px; top: 15px; transform: skewX(-10deg); opacity:.85; } .nxg-hud[data-hud="v2"] .core-rig--r{ left:auto; right: 10px; transform: skewX(10deg); } .nxg-hud[data-hud="v2"] .start-btn--core{ position: relative; display:inline-flex; align-items:center; justify-content:center; min-width: 420px; height: 74px; padding: 0 34px; border-radius: 16px; text-decoration:none; color: rgba(255,255,255,.96); font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; font-size: 22px; background: radial-gradient(120px 40px at 50% 30%, rgba(255,255,255,.18), transparent 70%), linear-gradient(180deg, rgba(130,255,190,.18), rgba(0,0,0,.12)), linear-gradient(180deg, rgba(55,210,120,.85), rgba(25,120,80,.85)); box-shadow: 0 0 0 1px rgba(0,0,0,.50) inset, 0 0 0 1px rgba(200,255,225,.18), 0 0 26px rgba(74,255,140,.20); overflow:hidden; } @media (max-width: 980px){ .nxg-hud[data-hud="v2"] .start-btn--core{ min-width: 100%; } } .nxg-hud[data-hud="v2"] .start-btn--core::before{ content:""; position:absolute; inset:-80% -30%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 80%); transform: translateX(-18%); opacity:.0; animation: hudStartSheen 3.8s ease-in-out infinite alternate; } @keyframes hudStartSheen{ from{ transform: translateX(-28%); opacity:.15 } to { transform: translateX(28%); opacity:.32 } } .nxg-hud[data-hud="v2"] .start-btn--core::after{ content:""; position:absolute; inset:0; background: radial-gradient(280px 70px at 50% 50%, rgba(255,255,255,.12), transparent 70%), linear-gradient(90deg, rgba(255,255,255,.10), transparent 35%, transparent 65%, rgba(255,255,255,.08)); opacity:.85; mix-blend-mode: overlay; pointer-events:none; } .nxg-hud[data-hud="v2"] .start-btn--core:hover{ box-shadow: 0 0 0 1px rgba(0,0,0,.50) inset, 0 0 0 1px rgba(200,255,225,.22), 0 0 34px rgba(74,255,140,.24); transform: translateY(-1px); } /* RIGHT MODULE (balances) */ .nxg-hud[data-hud="v2"] .hud-panel--right{ display:flex; gap: 10px; align-items: center; justify-content: space-between; } .nxg-hud[data-hud="v2"] .hud-balance{ display:flex; flex-direction: column; gap: 8px; width: 100%; } .nxg-hud[data-hud="v2"] .balrow{ display:grid; grid-template-columns: 26px 1fr auto; align-items:center; gap: 10px; padding: 10px 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%), rgba(0,0,0,.26); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); } .nxg-hud[data-hud="v2"] .bal-ico{ width: 26px; height: 26px; display:inline-flex; align-items:center; justify-content:center; border-radius: 9px; font-weight: 1000; background: radial-gradient(12px 12px at 35% 30%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.08)); box-shadow: 0 0 0 1px rgba(170,245,255,.14) inset, 0 0 0 1px rgba(0,0,0,.65); } .nxg-hud[data-hud="v2"] .balrow--cred .bal-ico{ color: rgba(255,190,60,.95); } .nxg-hud[data-hud="v2"] .balrow--nex .bal-ico{ color: rgba(120,220,255,.95); } .nxg-hud[data-hud="v2"] .bal-lbl{ font-size: 11px; letter-spacing: .10em; text-transform: uppercase; opacity: .80; } .nxg-hud[data-hud="v2"] .balrow b{ font-weight: 1000; letter-spacing: .06em; } .nxg-hud[data-hud="v2"] .hud-actions{ display:flex; gap: 10px; } .nxg-hud[data-hud="v2"] .icon-btn{ width: 38px; height: 38px; border-radius: 12px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color: rgba(235,255,255,.92); font-weight: 1000; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%), rgba(0,0,0,.26); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); } .nxg-hud[data-hud="v2"] .icon-btn:hover{ box-shadow: 0 0 0 1px rgba(170,245,255,.16) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(90,235,255,.10); } /* BOTTOM NAV */ .nxg-hud[data-hud="v2"] .hud-bottom{ margin-top: 12px; padding-top: 10px; position: relative; } .nxg-hud[data-hud="v2"] .hud-bottom::before{ content:""; position:absolute; left: 12px; right: 12px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(140,240,255,.22), transparent); opacity: .9; } .nxg-hud[data-hud="v2"] .nxg-nav{ display:flex; flex-direction: column; gap: 10px; } .nxg-hud[data-hud="v2"] .nav-row{ display:flex; gap: 10px; align-items:center; } .nxg-hud[data-hud="v2"] .nav-row--main{ justify-content: space-between; } .nxg-hud[data-hud="v2"] .nav-row--aux{ justify-content: flex-end; } .nxg-hud[data-hud="v2"] .nav-btn{ position: relative; display:inline-flex; align-items:center; justify-content:center; height: 44px; padding: 0 18px; text-decoration:none; color: rgba(235,255,255,.92); font-weight: 900; letter-spacing: .10em; text-transform: uppercase; font-size: 12px; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.12)); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.65); overflow:hidden; flex: 1 1 0; min-width: 0; } .nxg-hud[data-hud="v2"] .nav-btn--aux{ flex: 0 0 auto; padding: 0 14px; height: 40px; font-size: 11px; letter-spacing: .09em; } @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){ .nxg-hud[data-hud="v2"] .nav-btn{ clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%); } .nxg-hud[data-hud="v2"] .nav-btn--aux{ clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%); } } .nxg-hud[data-hud="v2"] .nav-btn::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(90,235,255,.10), transparent 30%, transparent 70%, rgba(90,235,255,.08)), radial-gradient(120px 40px at 50% 40%, rgba(255,255,255,.10), transparent 70%); opacity:.9; pointer-events:none; } .nxg-hud[data-hud="v2"] .nav-btn::after{ content:""; position:absolute; inset:-70% -35%; background: linear-gradient(120deg, transparent, rgba(90,235,255,.14), transparent); opacity: 0; transform: translateX(-12%); transition: opacity .25s ease; } .nxg-hud[data-hud="v2"] .nav-btn:hover::after{ opacity: 1; } .nxg-hud[data-hud="v2"] .nav-btn.is-active{ background: radial-gradient(140px 44px at 50% 35%, rgba(255,255,255,.16), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10)), linear-gradient(180deg, var(--hud-accent), var(--hud-accent2)); box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 0 1px rgba(255,255,255,.12), 0 0 26px rgba(0,0,0,.22), 0 0 22px rgba(120,240,255,.14); color: rgba(255,255,255,.96); } .nxg-hud[data-hud="v2"] .nav-btn.is-active::after{ opacity: 1; animation: hudTabSheen 2.8s ease-in-out infinite alternate; } @keyframes hudTabSheen{ from{ transform: translateX(-22%); opacity:.35 } to { transform: translateX(22%); opacity:.55 } } .nxg-hud[data-hud="v2"] .nav-premium{ box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 0 1px rgba(255,255,255,.10), 0 0 20px rgba(255,170,40,.10); } .nxg-hud[data-hud="v2"] .nav-premium.is-active{ background: radial-gradient(160px 44px at 50% 35%, rgba(255,255,255,.16), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10)), linear-gradient(180deg, rgba(255,170,40,.95), rgba(255,110,30,.78)); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .nxg-hud[data-hud="v2"] .hud-frame::before{ animation: none !important; } .nxg-hud[data-hud="v2"] .start-btn--core::before{ animation: none !important; } .nxg-hud[data-hud="v2"] .nav-btn.is-active::after{ animation: none !important; } } /* ========================================================== NXG HUD (HEX NAV) — honeycomb navigation, holo/glass only ========================================================== */ /* alpha helpers tied to current faction accent colors */ body{ --a014: rgba(86,214,255,.14); --a022: rgba(86,214,255,.22); --a028: rgba(86,214,255,.28); --a2_012: rgba(176,107,255,.12); --a2_018: rgba(176,107,255,.18); } @supports (color: rgb(from white r g b / 1)){ body{ --a014: rgb(from var(--accent) r g b / .14); --a022: rgb(from var(--accent) r g b / .22); --a028: rgb(from var(--accent) r g b / .28); --a2_012: rgb(from var(--accent2) r g b / .12); --a2_018: rgb(from var(--accent2) r g b / .18); } } .nxg-header.nxg-hud[data-hud="hex"]{ padding: 10px 14px 10px; background: radial-gradient(1100px 220px at 50% -40px, var(--a014), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.08) 60%, transparent); } /* ========================================================== MAIN LAUNCH BUTTON (HTML fallback) Вынесена из HEX панели. Большая CTA-кнопка над honeycomb. ========================================================== */ .nxg-hud[data-hud="hex"] .hud-launch-wrap{ display:flex; justify-content:center; padding: 8px 0 2px; } .nxg-hud[data-hud="hex"] .launch-btn{ --btn-h: 56px; min-width: 320px; height: var(--btn-h); display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 2px; border-radius: 16px; text-decoration:none; color: var(--text); position: relative; overflow:hidden; background: radial-gradient(260px 90px at 50% 20%, var(--a014), transparent 60%), linear-gradient(90deg, rgba(255,255,255,.08), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.20)); box-shadow: 0 0 0 1px rgba(170,245,255,.12) inset, 0 0 0 1px rgba(0,0,0,.55), 0 16px 48px rgba(0,0,0,.55); } .nxg-hud[data-hud="hex"] .launch-btn::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(90deg, transparent 0%, var(--a022) 35%, var(--a2_018) 65%, transparent 100%); opacity:.18; transform: translateX(-30%); animation: nxgLaunchSweep 3.8s ease-in-out infinite; pointer-events:none; } @keyframes nxgLaunchSweep{ 0%{ transform: translateX(-35%); opacity:.08; } 50%{ transform: translateX(35%); opacity:.22; } 100%{ transform: translateX(-35%); opacity:.08; } } .nxg-hud[data-hud="hex"] .launch-btn__k{ font-size: 11px; letter-spacing: .40em; opacity:.72; } .nxg-hud[data-hud="hex"] .launch-btn__t{ font-size: 20px; font-weight: 900; letter-spacing: .10em; text-shadow: 0 0 18px var(--a022); } .nxg-hud[data-hud="hex"] .launch-btn:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(170,245,255,.16) inset, 0 0 0 1px rgba(0,0,0,.55), 0 22px 60px rgba(0,0,0,.65); } .nxg-hud[data-hud="hex"]{ --hex-w: 128px; --hex-gap: 65px; --hex-h: calc(var(--hex-w) * 0.866); /* sqrt(3)/2 */ --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); --hud-shadow-hex: 0 18px 45px rgba(0,0,0,.45); } /* Frame */ .nxg-hud[data-hud="hex"] .hud-frame--hex{ /* max-width: 1320px; */ margin: 0 auto; position: relative; padding: 10px 12px 0px; border-radius: 18px; background: radial-gradient(900px 180px at 50% 0%, var(--a014), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%), linear-gradient(180deg, rgba(10, 18, 24, .86), rgba(6, 10, 14, .78)); box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(0,0,0,.55); overflow: hidden; filter: drop-shadow(var(--hud-shadow-hex)); } /* subtle scanlines + holo drift */ /* .nxg-hud[data-hud="hex"] .hud-frame--hex::before{ content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 12px), radial-gradient(900px 220px at 45% 20%, var(--a014), transparent 62%), radial-gradient(700px 200px at 70% 35%, var(--a2_012), transparent 62%); opacity:.70; mix-blend-mode: screen; animation: hudHexScan 7.2s ease-in-out infinite alternate; } @keyframes hudHexScan{ from{ transform: translateY(-6px); opacity:.55 } to { transform: translateY(6px); opacity:.78 } } */ /* Logo (reused nxg-logo2 markup, but styled for HEX HUD) */ .nxg-hud[data-hud="hex"] .nxg-logo2{ position: relative; display: grid; grid-template-columns: 1fr; gap: 2px; text-decoration: none; color: var(--text); padding: 8px 10px 8px 12px; border-radius: 14px; overflow: hidden; background: radial-gradient(240px 90px at 20% 20%, var(--a014), transparent 65%), linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.12)); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.45); } .nxg-hud[data-hud="hex"] .nxg-logo2__plate{ position:absolute; inset:-1px; background: linear-gradient(90deg, var(--a022), transparent 60%), radial-gradient(120px 60px at 18% 50%, rgba(255,255,255,.10), transparent 70%); opacity:.75; mix-blend-mode: screen; pointer-events:none; } .nxg-hud[data-hud="hex"] .nxg-logo2__nxg{ font-weight: 1000; letter-spacing: .08em; font-size: 34px; line-height: 1; text-transform: uppercase; text-shadow: 0 0 12px var(--a022), 0 0 2px rgba(255,255,255,.25); } .nxg-hud[data-hud="hex"] .nxg-logo2__sub{ font-size: 10px; letter-spacing: .35em; opacity: .86; white-space: nowrap; } /* Status chips */ .nxg-hud[data-hud="hex"] .hud-status{ display:flex; flex-wrap:wrap; gap: 8px; margin: 10px 0 0; } .nxg-hud[data-hud="hex"] .chip{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%), rgba(0,0,0,.26); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); color: rgba(235,255,255,.92); } .nxg-hud[data-hud="hex"] .chip b{ font-weight: 900; letter-spacing:.04em; } .nxg-hud[data-hud="hex"] .chip--dock{ box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 16px var(--a014); } /* Balance */ .nxg-hud[data-hud="hex"] .hud-balance{ display:flex; gap: 8px; align-items: stretch; } .nxg-hud[data-hud="hex"] .balrow{ display:grid; grid-template-columns: 18px auto 1fr; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.14)); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); min-width: 150px; } .nxg-hud[data-hud="hex"] .bal-ico{ width: 18px; height: 18px; display:grid; place-items:center; border-radius: 6px; background: radial-gradient(10px 10px at 30% 30%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 1px rgba(0,0,0,.55); font-weight: 1000; font-size: 10px; opacity:.92; } .nxg-hud[data-hud="hex"] .bal-lbl{ font-weight: 900; letter-spacing:.18em; text-transform: uppercase; font-size: 10px; opacity: .78; } .nxg-hud[data-hud="hex"] .balrow b{ justify-self: end; font-weight: 1000; letter-spacing: .04em; } .nxg-hud[data-hud="hex"] .balrow--cred{ box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(90,235,255,.08); } .nxg-hud[data-hud="hex"] .balrow--nex{ box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(255,176,71,.08); } .nxg-hud[data-hud="hex"] .hex-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 0px 0px 10px; } .nxg-hud[data-hud="hex"] .hex-top__left{ display:flex; align-items:flex-start; gap: 10px; min-width: 0; } .nxg-hud[data-hud="hex"] .nxg-logo2--compact{ padding: 6px 10px 6px 12px; border-radius: 14px; } .nxg-hud[data-hud="hex"] .nxg-logo2--compact .nxg-logo2__nxg{ font-size: 30px; } .nxg-hud[data-hud="hex"] .nxg-logo2--compact .nxg-logo2__sub{ letter-spacing: .28em; } .nxg-hud[data-hud="hex"] .hud-status--compact{ margin: 6px 0 0; } .nxg-hud[data-hud="hex"] .hud-status--compact .chip{ padding: 6px 10px; font-size: 10px; letter-spacing: .10em; } .nxg-hud[data-hud="hex"] .hex-top__right{ display:flex; align-items:flex-start; gap: 10px; } .nxg-hud[data-hud="hex"] .hud-balance--compact{ display:flex; gap: 8px; } .nxg-hud[data-hud="hex"] .hud-actions--compact{ display:flex; gap: 8px; } .nxg-hud[data-hud="hex"] .icon-btn{ width: 36px; height: 36px; display:grid; place-items:center; text-decoration:none; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 50%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.12)); box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55); color: rgba(235,255,255,.92); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .nxg-hud[data-hud="hex"] .icon-btn:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(170,245,255,.12) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 22px var(--a014); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%), linear-gradient(180deg, var(--a014), rgba(0,0,0,.12)); } /* --- Honeycomb navigation --- */ .nxg-hud[data-hud="hex"] .hex-nav{ margin-top: 2px; padding: 10px 6px 6px; border-top: 1px solid rgba(255,255,255,.06); } .nxg-hud[data-hud="hex"] .hex-rows{ display:flex; flex-direction:column; align-items:center; gap: 10px; } .nxg-hud[data-hud="hex"] .hex-row{ display:flex; align-items:center; justify-content:center; gap: var(--hex-gap); } .nxg-hud[data-hud="hex"] .hex-row--offset{ /* padding-left: calc(var(--hex-w) / 2 + var(--hex-gap) / 2); */ margin-top: -65px; } /* Reset default nav-btn pill styling under this HUD */ .nxg-hud[data-hud="hex"] .nxg-nav{ display:none; padding: 10px; } .nxg-hud[data-hud="hex"] .nav-btn{ height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; clip-path: none; box-shadow: none; text-transform:none; letter-spacing: 0; } /* HEX button */ .nxg-hud[data-hud="hex"] .nav-btn.hex{ width: var(--hex-w); height: var(--hex-h); position: relative; display: grid; place-items: center; text-decoration: none; color: rgba(235,255,255,.92); transform: translateY(0) scale(var(--hex-scale, 1)); filter: drop-shadow(0 14px 26px rgba(0,0,0,.45)); } /* .nxg-hud[data-hud="hex"] .nav-btn.hex::before{ content:""; position:absolute; inset:0; clip-path: var(--hex-clip); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.40)); opacity:.95; pointer-events:none; } */ .nxg-hud[data-hud="hex"] .nav-btn.hex::after{ content:""; position:absolute; inset:1px; clip-path: var(--hex-clip); background: radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.08), transparent 70%), radial-gradient(120px 70px at 72% 82%, var(--a2_012), transparent 70%), conic-gradient(from 300deg at 50% 0%, var(--a014), transparent 24%, var(--a2_012), transparent 56%, var(--a014), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.16)); box-shadow: 0 0 0 1px rgba(170,245,255,.08) inset, 0 0 0 1px rgba(0,0,0,.55); opacity: 1; pointer-events:none; } /* content */ .nxg-hud[data-hud="hex"] .nav-btn.hex .hex-k{ font-weight: 900; letter-spacing: .22em; text-transform: uppercase; font-size: 10px; opacity: .78; display: none; } .nxg-hud[data-hud="hex"] .nav-btn.hex .hex-t{ margin-top: 2px; font-weight: 1000; letter-spacing: .10em; text-transform: uppercase; font-size: 16px; text-shadow: 0 0 12px rgba(0,0,0,.35); } .nxg-hud[data-hud="hex"] .nav-btn.hex{ grid-auto-flow: row; align-content:center; text-align:center; user-select:none; } /* hover sheen */ .nxg-hud[data-hud="hex"] .nav-btn.hex .hex-k, .nxg-hud[data-hud="hex"] .nav-btn.hex .hex-t{ position:relative; z-index:1; } .nxg-hud[data-hud="hex"] .nav-btn.hex:hover{ transform: translateY(-1px) scale(var(--hex-scale, 1)); } .nxg-hud[data-hud="hex"] .nav-btn.hex:hover::after{ box-shadow: 0 0 0 1px rgba(170,245,255,.10) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 26px var(--a014); background: radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.10), transparent 70%), radial-gradient(120px 70px at 72% 82%, var(--a2_018), transparent 70%), conic-gradient(from 300deg at 50% 0%, var(--a022), transparent 24%, var(--a2_018), transparent 56%, var(--a022), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.14)); } /* active */ .nxg-hud[data-hud="hex"] .nav-btn.hex.is-active::after{ box-shadow: 0 0 0 1px rgba(170,245,255,.12) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 34px var(--a022); background: radial-gradient(140px 80px at 30% 18%, rgba(255,255,255,.12), transparent 70%), radial-gradient(140px 80px at 72% 82%, var(--a2_018), transparent 70%), conic-gradient(from 300deg at 50% 0%, var(--a028), transparent 24%, var(--a2_018), transparent 56%, var(--a028), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,.036) 0 1px, transparent 1px 7px), linear-gradient(180deg, var(--a014), rgba(0,0,0,.16)); } /* Start hex */ .nxg-hud[data-hud="hex"] .hex--start{ /* --hex-w: 140px; --hex-scale: 1.03; */ } .nxg-hud[data-hud="hex"] .hex--start::after{ background: radial-gradient(160px 90px at 50% 18%, rgba(255,255,255,.12), transparent 68%), conic-gradient(from 220deg at 50% 0%, rgba(80,255,150,.26), transparent 22%, rgba(80,255,150,.18), transparent 52%, rgba(80,255,150,.22), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,.030) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(80,255,150,.14), rgba(0,0,0,.16)); box-shadow: 0 0 0 1px rgba(120,255,190,.16) inset, 0 0 0 1px rgba(0,0,0,.55), 0 0 30px rgba(80,255,150,.12); animation: hexLaunchSweep 3.8s ease-in-out infinite alternate; } @keyframes hexLaunchSweep{ from{ filter: brightness(1.0); } to { filter: brightness(1.08); } } /* Premium hex a bit warmer */ .nxg-hud[data-hud="hex"] .nav-premium::after{ background: radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.10), transparent 70%), conic-gradient(from 220deg at 55% 40%, rgba(255,176,71,.20), transparent 22%, rgba(255,176,71,.14), transparent 56%, rgba(255,176,71,.18), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(255,176,71,.10), rgba(0,0,0,.16)); } @media (max-width: 980px){ .nxg-hud[data-hud="hex"]{ --hex-w: 116px; --hex-gap: 8px; } .nxg-hud[data-hud="hex"] .hex-top{ flex-direction:column; align-items:stretch; } .nxg-hud[data-hud="hex"] .hex-top__right{ justify-content:space-between; } } @media (max-width: 720px){ .nxg-hud[data-hud="hex"]{ --hex-w: 104px; --hex-gap: 8px; } .nxg-hud[data-hud="hex"] .hex-row--offset{ padding-left: 0; } .nxg-hud[data-hud="hex"] .hex-rows{ display:grid; grid-template-columns: repeat(3, var(--hex-w)); gap: 10px 10px; justify-content:center; } .nxg-hud[data-hud="hex"] .hex-row{ display: contents; } .nxg-hud[data-hud="hex"] .hex--start{ --hex-w: 120px; } } @media (max-width: 420px){ .nxg-hud[data-hud="hex"]{ --hex-w: 96px; --hex-gap: 8px; } .nxg-hud[data-hud="hex"] .hex-rows{ grid-template-columns: repeat(2, var(--hex-w)); } } /* Right sticky panel offset is synced via JS; keep fallback */ .panel.sticky{ top: var(--header-sticky); } /* ========================= PIXI HUD (Canvas header) Показывается поверх/вместо HTML-хедера, когда JS успешно инициализировал Pixi. ========================= */ .nxgHudPixi{ display:none; position: sticky; /* top: 0; */ z-index: 999; height: var(--pixiHudH, 250px); margin: 0; padding: 0; /* фон — чтобы при первом кадре не мигало */ background: radial-gradient(900px 220px at 50% -40px, rgba(255,255,255,.06), transparent 65%), linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.06) 60%, transparent); } .nxgHudPixi canvas{ width: 100%; height: 100%; display:block; padding: 10px } body.pixi-hud-init .nxgHudPixi{ display:block; } body.has-pixi-hud .nxgHudPixi{ display:block; } body.has-pixi-hud .nxg-header{ display:block; }