/* The Neon theme's own screens (src/ui/neon/: the redesign prototype, redesign/, built into the game): its top bar and phone bottom bar, its window-less Home and the pieces they share. Only under html[data-theme='neon']; styles/neon.css gives every other screen the same tokens, panels and buttons. Loaded after it. */ html[data-theme='neon'] { /* a game client's scale: above 1920 x 1080 the bar and Home grow with the window (ui/neon/kit.js sets it) and look as they do at 1080p */ --nx-zoom: 1; --nx-bar: 64px; --hub-bar-h: calc(var(--nx-bar) * var(--nx-zoom)); --nx-ui: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; /* the client's small text: the pixel font reads as a phone game */ --nx-cap: 'Alegreya SC', Georgia, serif; --nx-frame: #0b0910; --nx-dim: radial-gradient(ellipse 70% 90% at 50% 30%, rgba(11, 9, 16, 0.78), rgba(11, 9, 16, 0.94)); /* the place behind the column, so it stays quiet */ --nx-panel: #110e16; --nx-side: clamp(270px, 22vw, 340px); --nx-rail: 400px; /* the modes' list (ui/neon/lobby.js) */ --nx-col-left: max(0px, calc((100vw - var(--nx-page)) / 2)); /* where the page's column starts */ --font-text: var(--nx-ui); --font-label: var(--nx-cap); /* Home's column: all of a laptop; on a big screen a column under the full-width bar, stuck to it, always the shape it has filling a laptop (1366 x 704), the place showing at its sides and under it */ --nx-shape: 1.94; --nx-page: max(1400px, min(83vw, calc((100vh - var(--hub-bar-h)) * var(--nx-shape)), var(--nx-page-max, 99999px))); } @media (max-width: 760px) { html[data-theme='neon'] { --nx-bar: 56px; --hub-bottom-h: 74px; } } /* ================================================================== shared pieces */ html[data-theme='neon'] .nx-kicker { display: flex; align-items: center; gap: 10px; font: 700 12px/1.2 var(--font-label); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-kicker::before { content: ''; width: 18px; height: 2px; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; } html[data-theme='neon'] .nx-kicker.gold { color: var(--gold); } html[data-theme='neon'] .nx-title { margin: 8px 0 0; font: 700 44px/1 var(--font-title); letter-spacing: 0.02em; background: linear-gradient(180deg, #fff6dc 0%, var(--gold) 55%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5)); } html[data-theme='neon'] .nx-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 4px; white-space: nowrap; font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)), rgba(10, 8, 13, 0.78); border: 1px solid var(--line-2); } html[data-theme='neon'] .nx-tag.gold { color: var(--gold); border-color: rgba(245, 200, 98, 0.45); background: linear-gradient(rgba(245, 200, 98, 0.14), rgba(245, 200, 98, 0.14)), rgba(10, 8, 13, 0.8); } html[data-theme='neon'] .nx-tag.live { color: #ff8a98; border-color: rgba(255, 90, 110, 0.5); background: linear-gradient(rgba(255, 90, 110, 0.16), rgba(255, 90, 110, 0.16)), rgba(10, 8, 13, 0.8); } html[data-theme='neon'] .nx-tag.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: nx-blink 1.2s infinite; } @keyframes nx-blink { 50% { opacity: 0.25; } } html[data-theme='neon'] .nx-tag.order { color: #6492ff; border-color: rgba(100, 146, 255, 0.4); background: rgba(100, 146, 255, 0.14); } html[data-theme='neon'] .nx-tag.wild { color: #6bd672; border-color: rgba(107, 214, 114, 0.4); background: rgba(107, 214, 114, 0.14); } html[data-theme='neon'] .nx-tag.arcane { color: #b98aff; border-color: rgba(185, 138, 255, 0.4); background: rgba(185, 138, 255, 0.14); } html[data-theme='neon'] .nx-tag.shadow { color: #ff6390; border-color: rgba(255, 99, 144, 0.4); background: rgba(255, 99, 144, 0.14); } html[data-theme='neon'] .nx-tag.nx-fac-tag { height: 24px; padding: 0 9px 0 7px; border-color: currentColor; border-radius: 0; font: 700 12px/1 var(--nx-ui); letter-spacing: 0; text-transform: none; } html[data-theme='neon'] .nx-bar { position: relative; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-1); } html[data-theme='neon'] .nx-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(180deg, #ffe7a3, var(--gold) 45%, var(--gold-2)); transition: width 1.2s var(--ease-out); } html[data-theme='neon'] .nx-bar > i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 8px, rgba(255, 255, 255, 0.16) 8px 12px); animation: nx-bar-move 1.2s linear infinite; } @keyframes nx-bar-move { to { background-position: 28px 0; } } html[data-theme='neon'] .nx-bar.teal > i { background: linear-gradient(180deg, #ffe9a8, var(--gold) 45%, var(--gold-2)); } html[data-theme='neon'] .nx-bar.xp > i { background: linear-gradient(180deg, #e0c8ff, #b98aff 45%, #6c3fc9); } html[data-theme='neon'] .nx-bar.hp > i { background: linear-gradient(180deg, #b8f5b4, var(--good) 45%, #2f9c39); } html[data-theme='neon'] .nx-bar-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: var(--text-2); } html[data-theme='neon'] .nx-bar-label b { font: 400 18px/1 var(--font-num); color: var(--text); letter-spacing: 0.04em; } html[data-theme='neon'] .nx-sec { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 13px/1 var(--font-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); } html[data-theme='neon'] .nx-sec::after { content: ''; flex: 1; order: 2; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); } html[data-theme='neon'] .nx-sec .meta, html[data-theme='neon'] .nx-sec .nx-link { order: 3; font-weight: 400; letter-spacing: 0.08em; text-transform: none; color: var(--muted); font-size: 13px; } html[data-theme='neon'] .nx-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--gold) !important; } html[data-theme='neon'] .nx-muted { margin: 0 0 10px; font-size: 13px; color: var(--muted); } html[data-theme='neon'] .nx-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.25s; } html[data-theme='neon'] .nx-row + .nx-row { box-shadow: 0 -1px 0 var(--line-1); } html[data-theme='neon'] .nx-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 0.3s var(--ease-out); box-shadow: 0 0 8px var(--gold); } html[data-theme='neon'] .nx-row:hover, html[data-theme='neon'] .nx-row.sel { background: linear-gradient(90deg, rgba(245, 200, 98, 0.08), transparent 70%); } html[data-theme='neon'] .nx-row:hover::before, html[data-theme='neon'] .nx-row.sel::before { transform: scaleY(1); } html[data-theme='neon'] .nx-row .ri { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-1); } html[data-theme='neon'] .nx-row .ri.round { border-radius: 50%; } html[data-theme='neon'] .nx-row .rt { flex: 1; min-width: 0; } html[data-theme='neon'] .nx-row .rt b { display: block; } html[data-theme='neon'] .nx-row .rt small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); } html[data-theme='neon'] .panel.ornate::before, html[data-theme='neon'] .panel.ornate::after { content: ''; position: absolute; z-index: 2; width: 14px; height: 14px; border: 2px solid var(--gold-2); pointer-events: none; opacity: 0.85; } html[data-theme='neon'] .panel.ornate::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; } html[data-theme='neon'] .panel.ornate::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; } html[data-theme='neon'] .btn.ghost { --bg: rgba(255, 255, 255, 0.04); filter: none; } html[data-theme='neon'] .btn.ghost::before { box-shadow: inset 0 0 0 1px var(--line-3); } html[data-theme='neon'] .btn.ghost:hover:not(:disabled) { filter: none; --bg: rgba(255, 255, 255, 0.08); } html[data-theme='neon'] .nx-dot { position: absolute; top: 9px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 10px/16px var(--font-text); text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2px var(--ink-1); } /* ================================================================== the top bar: a desktop client's. One row, flat, sharp; yellow only on PLAY, words instead of icons, the wallet plain numbers in one quiet tone */ html[data-theme='neon'] .hub-bar.nx-topbar { gap: 0; padding: var(--safe-t) 0 0 max(14px, var(--safe-l)); zoom: var(--nx-zoom); height: calc(var(--safe-t) + var(--nx-bar)); background: var(--nx-frame); border-bottom: 1px solid rgba(245, 200, 98, 0.2); box-shadow: none; backdrop-filter: none; font-family: var(--nx-ui); } html[data-theme='neon'] .nx-brand { flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; } html[data-theme='neon'] .nx-mark { display: block; width: 42px; height: 42px; } html[data-theme='neon'] .nx-playbtn { position: relative; isolation: isolate; flex: none; height: 42px; margin: 0 22px 0 14px; padding: 0 34px; border: 0; background: none; cursor: pointer; color: #1a1206; font: 700 19px/1 var(--nx-cap); letter-spacing: 0.14em; text-transform: uppercase; transition: transform 0.12s var(--ease-out), filter 0.2s; } html[data-theme='neon'] .nx-playbtn::before, html[data-theme='neon'] .nx-playbtn::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } html[data-theme='neon'] .nx-playbtn::before { background: linear-gradient(180deg, #ffd84a, #eeb91f); transition: background 0.15s; } html[data-theme='neon'] .nx-playbtn::after { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58%) no-repeat; background-size: 300% 100%; animation: nx-sheen 5.5s ease-in-out infinite; } html[data-theme='neon'] .nx-playbtn.on::before { background: linear-gradient(180deg, #fff0a8, #ffd84a); } html[data-theme='neon'] .nx-playbtn.on { filter: drop-shadow(0 0 8px rgba(255, 216, 74, 0.45)); } html[data-theme='neon'] .nx-playbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } html[data-theme='neon'] .nx-nav { position: relative; display: flex; height: 100%; min-width: 0; } html[data-theme='neon'] .nx-nav-item { position: relative; height: 100%; padding: 0 15px; border: 0; background: none; cursor: pointer; white-space: nowrap; color: #a79e91; font: 700 14px/1 var(--nx-cap); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.15s; } html[data-theme='neon'] .nx-nav-item.on { color: var(--gold); } /* a tab's bubble, as the bar's: inside its tab, where nothing cuts it */ html[data-theme='neon'] .tabs .btn.tab-badge::after { display: block; box-sizing: border-box; top: 5px; right: 0; left: auto; min-width: 14px; height: 14px; padding: 0 3px; border: 0; border-radius: 7px; background: var(--gold); color: #1a1206; font: 700 10px/14px var(--nx-ui); letter-spacing: 0; text-align: center; box-shadow: none; } html[data-theme='neon'] .nx-nav-item .nx-dot { top: 13px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--gold); color: #1a1206; font: 700 10px/14px var(--nx-ui); letter-spacing: 0; box-shadow: none; animation: none; } html[data-theme='neon'] .nx-top-right { margin-left: auto; height: 100%; display: flex; align-items: center; min-width: 0; } html[data-theme='neon'] .nx-wallet { display: flex; align-items: center; gap: 14px; padding: 0 14px; } html[data-theme='neon'] .nx-cur { display: flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: #cfc7ba; transition: color 0.15s; } html[data-theme='neon'] .nx-cur > img { width: 16px; height: 16px; filter: grayscale(0.9) brightness(1.15); transition: filter 0.15s; } html[data-theme='neon'] .nx-cur b { font: 600 13px/1 var(--nx-ui); font-variant-numeric: tabular-nums; } html[data-theme='neon'] .nx-tools { display: flex; align-items: center; padding: 0 6px; border-left: 1px solid var(--line-1); height: 28px; } html[data-theme='neon'] .btn.nx-icon-btn { --cut: 0px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; filter: none; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 0.72; transition: opacity 0.15s; } html[data-theme='neon'] .btn.nx-icon-btn::before { display: none; } html[data-theme='neon'] .btn.nx-icon-btn :is(img, canvas) { width: 22px; height: 22px; } html[data-theme='neon'] .btn.nx-icon-btn.badge::after { top: 3px; right: 2px; left: auto; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--gold); color: #1a1206; font: 700 10px/14px var(--nx-ui); box-shadow: none; animation: none; } html[data-theme='neon'] .nx-me { position: relative; isolation: isolate; overflow: hidden; flex: none; width: var(--nx-side); height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: var(--nx-panel); cursor: pointer; text-align: left; color: var(--text); font-family: var(--nx-ui); } html[data-theme='neon'] .nx-me-banner { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } html[data-theme='neon'] .nx-me::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 9, 16, 0.72), rgba(11, 9, 16, 0.42) 65%, rgba(11, 9, 16, 0.2)); transition: background 0.15s; } html[data-theme='neon'] .nx-me:hover::after, html[data-theme='neon'] .nx-me.on::after { background: linear-gradient(90deg, rgba(11, 9, 16, 0.6), rgba(11, 9, 16, 0.28) 65%, rgba(11, 9, 16, 0.08)); } html[data-theme='neon'] .nx-ava-wrap { position: relative; flex: none; display: block; } html[data-theme='neon'] .nx-ava { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 0; border: 1px solid var(--gold-2); background: var(--ink-1); } html[data-theme='neon'] .nx-ava :is(canvas, img, .framed) { max-width: 42px; max-height: 42px; } /* a player's picture: a square gold line, or their frame in its place, filling the box */ html[data-theme='neon'] :is(.nx-ava, .nx-pf-ava, .lb2-ava):has(> .framed), html[data-theme='neon'] .nx-fr-face.framed { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } html[data-theme='neon'] :is(.nx-ava, .nx-pf-ava, .lb2-ava) > .framed { width: 100%; height: 100%; max-width: none !important; max-height: none !important; } html[data-theme='neon'] :is(.nx-ava, .nx-pf-ava, .nx-fr-face, .lb2-ava) .framed > :first-child, html[data-theme='neon'] .nx-fr-face.framed > :first-child { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; } html[data-theme='neon'] .lb2-row .lb2-name.btn { min-width: 0; min-height: 0; padding: 0; justify-content: flex-start; } html[data-theme='neon'] .lb2-ava { border: 1px solid var(--gold-2); background: var(--ink-1); } html[data-theme='neon'] .lb2-ava > :is(canvas, img) { width: 76% !important; height: 76% !important; } html[data-theme='neon'] .lb2-ava .framed > :first-child { transform: scale(0.76); } /* (a frame's picture has empty margins: drawn bigger, its body is the size of the gold square, the picture inside as big in both) */ html[data-theme='neon'] :is(.nx-ava, .nx-pf-ava, .lb2-ava) .frame-pic, html[data-theme='neon'] .nx-fr-face.framed > .frame-pic { inset: -9%; width: 118% !important; height: 118% !important; max-width: none !important; max-height: none !important; } html[data-theme='neon'] .nx-ava > :is(canvas, img) { width: 76% !important; height: 76% !important; } html[data-theme='neon'] .nx-ava .framed > :first-child { transform: scale(0.76); } html[data-theme='neon'] .nx-ava-lv { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); min-width: 20px; height: 15px; padding: 0 4px; border: 1px solid var(--gold-2); background: #0b0910; color: var(--gold); font: 700 10px/13px var(--nx-ui); text-align: center; font-variant-numeric: tabular-nums; } html[data-theme='neon'] .nx-me-name .tag { color: var(--gold); } html[data-theme='neon'] .nx-me-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme='neon'] .nx-me-name b { font: 600 14px/1.15 var(--nx-ui); text-shadow: 0 1px 3px #000; } html[data-theme='neon'] .nx-me-name small { font: 400 12px/1.15 var(--nx-ui); color: #d6cfc2; text-shadow: 0 1px 3px #000; } html[data-theme='neon'] .nx-me-xp { display: block; height: 2px; margin-top: 2px; background: rgba(255, 255, 255, 0.18); } html[data-theme='neon'] .nx-me-xp > i { display: block; height: 100%; background: var(--gold); } @media (max-width: 1180px) { html[data-theme='neon'] { --nx-rail: 320px; } html[data-theme='neon'] .nx-help { display: none; } html[data-theme='neon'] .nx-me { width: 190px; } html[data-theme='neon'] .nx-nav-item { padding: 0 11px; } html[data-theme='neon'] .nx-playbtn { margin-right: 12px; padding: 0 26px; } } @media (max-width: 1000px) { html[data-theme='neon'] .nx-me { width: 170px; padding: 0 10px; gap: 10px; } html[data-theme='neon'] .nx-cur[data-cur='fragments'] { display: none; } html[data-theme='neon'] .nx-wallet { gap: 10px; padding: 0 10px; } html[data-theme='neon'] .nx-nav-item { padding: 0 8px; font-size: 13px; letter-spacing: 0.06em; } html[data-theme='neon'] .nx-playbtn { margin: 0 8px 0 10px; padding: 0 20px; font-size: 17px; } } @media (max-width: 920px) and (min-width: 761px) { html[data-theme='neon'] .nx-me { width: 72px; justify-content: center; } html[data-theme='neon'] .nx-me-name { display: none; } } @media (max-width: 760px) { html[data-theme='neon'] :is(.nx-brand, .nx-playbtn, .nx-nav, .nx-help, .nx-me-xp) { display: none; } html[data-theme='neon'] .hub-bar.nx-topbar { padding-left: 0; } html[data-theme='neon'] .nx-top-right { flex: 1; } html[data-theme='neon'] .nx-tools { margin-left: auto; border-left: 0; padding: 0; } html[data-theme='neon'] .nx-me { width: 150px; padding: 0 8px; gap: 8px; } html[data-theme='neon'] .nx-ava { width: 36px; height: 36px; } html[data-theme='neon'] .nx-ava :is(canvas, img, .framed) { max-width: 34px; max-height: 34px; } html[data-theme='neon'] .nx-me-name b { font-size: 12px; } html[data-theme='neon'] .nx-me-name small { font-size: 11px; } } /* (the fight keeps its pixel words: its board is settled) */ html[data-theme='neon'] .screen-match { --font-text: 'Eriband Digits', 'Pixelify Sans', 'Trebuchet MS', sans-serif; --font-label: 'Eriband Digits', 'Alegreya SC', Georgia, serif; font-family: var(--font-text); } /* (a banner comes down under the bar, so the places stay reachable) */ html[data-theme='neon'].hub-bar-on #layer-celebrate { top: calc(var(--safe-t) + var(--hub-bar-h) + 10px); } /* ================================================================== phones: the bottom bar */ @media (max-width: 760px) { html[data-theme='neon'] .hub-bottom.nx-bnav { display: flex; align-items: stretch; gap: 0; left: 0; right: 0; bottom: 0; height: calc(74px + var(--safe-b)); padding: 0 6px var(--safe-b); background: linear-gradient(0deg, rgba(8, 6, 11, 0.98), rgba(8, 6, 11, 0.86)); border: 0; border-top: 1px solid var(--line-2); box-shadow: none; backdrop-filter: blur(12px); } html[data-theme='neon'] :is(.nx-btab, .nx-bplay) { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: 700 10px/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; } html[data-theme='neon'] .nx-btab :is(img, canvas) { width: 32px; height: 32px; image-rendering: auto; filter: grayscale(0.8) brightness(0.7); transition: all 0.3s var(--ease-back); } html[data-theme='neon'] .nx-btab.on { color: var(--gold); } html[data-theme='neon'] .nx-btab.on :is(img, canvas) { filter: drop-shadow(0 0 6px rgba(245, 200, 98, 0.6)); transform: translateY(-3px); } html[data-theme='neon'] .nx-btab.on::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); } html[data-theme='neon'] .nx-btab .nx-dot { top: 6px; right: 18%; } html[data-theme='neon'] .nx-bplay { flex: 1.3; color: #ffd23a; } html[data-theme='neon'] .nx-bplay .orb { width: 64px; height: 64px; margin-top: -30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #fff6c8, #ffd23a 45%, #e0a316); box-shadow: 0 0 0 4px var(--ink-1), 0 0 24px rgba(255, 210, 60, 0.55), inset 0 -4px 0 rgba(120, 70, 0, 0.4); } html[data-theme='neon'] .nx-bplay .orb :is(img, canvas) { width: 32px; height: 32px; image-rendering: auto; } html[data-theme='neon'] .nx-bplay .orb .nx-gold { filter: brightness(0.22); } html[data-theme='neon'] .nx-bplay.on .orb { box-shadow: 0 0 0 4px var(--ink-1), 0 0 30px rgba(255, 230, 90, 0.85), inset 0 -4px 0 rgba(120, 70, 0, 0.4); } } /* ================================================================== the menu (Home, Play) has no window: the place shows */ html[data-theme='neon'] #app > .screen.screen-menu.nx-menu { top: calc(var(--safe-t) + var(--hub-bar-h)); bottom: calc(var(--safe-b) + var(--hub-bottom-h)); left: 0; right: 0; width: auto; margin: 0; display: block; padding: 26px 28px 36px; overflow-y: auto; overflow-x: hidden; border: 0; border-radius: 0; background: rgba(8, 6, 11, 0.18); box-shadow: none; } html[data-theme='neon'] .screen-menu.nx-menu > .hub-main { max-width: 1480px; margin: 0 auto; padding: 0; overflow: visible; } html[data-theme='neon'] .screen-menu.nx-menu > .hub-social { display: none; } html[data-theme='neon'] .screen-menu.nx-menu.vignette::after { display: none; } @media (max-width: 760px) { html[data-theme='neon'] #app > .screen.screen-menu.nx-menu { padding: 18px 16px 30px; } } /* ================================================================== the menu: Home under the bar, as tall as its shape allows */ html[data-theme='neon'] #app > .screen.screen-menu.nx-menu { padding: 0; overflow: hidden; background: var(--nx-dim); } html[data-theme='neon'] #app > .screen.screen-menu.nx-menu > .hub-main { width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; } @media (max-width: 960px) { html[data-theme='neon'] #app > .screen.screen-menu.nx-menu { overflow-y: auto; } html[data-theme='neon'] #app > .screen.screen-menu.nx-menu > .hub-main { height: auto; min-height: 100%; } } /* ================================================================== Home: the banner, three tiles, the side. Solid, sharp, one colour */ html[data-theme='neon'] .nx-home { display: grid; grid-template-columns: minmax(0, 1fr) var(--nx-side); zoom: var(--nx-zoom); width: 100%; max-width: calc(var(--nx-page) / var(--nx-zoom)); height: 100%; margin: 0 auto; background: var(--nx-frame); box-shadow: 0 0 0 1px var(--line-1), 0 0 70px rgba(0, 0, 0, 0.65); color: #d9d2c6; font: 400 13px/1.35 var(--nx-ui); } html[data-theme='neon'] .nx-home.solo { grid-template-columns: minmax(0, 1fr); } html[data-theme='neon'] .nx-home button { font-family: inherit; color: inherit; cursor: pointer; } html[data-theme='neon'] .nx-h-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(280px, 1fr) auto; gap: 12px; padding: 12px; overflow-y: auto; } html[data-theme='neon'] .nx-feature { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line-2); background: #000; } html[data-theme='neon'] .nx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0.45s; } html[data-theme='neon'] .nx-slide.on { opacity: 1; visibility: visible; } html[data-theme='neon'] .nx-slide > .art { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.8) brightness(0.82); } html[data-theme='neon'] .nx-slide::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(8, 7, 12, 0.96), rgba(8, 7, 12, 0.84) 34%, rgba(8, 7, 12, 0.18) 66%, rgba(8, 7, 12, 0.4)), linear-gradient(0deg, rgba(8, 7, 12, 0.72), transparent 42%); } html[data-theme='neon'] .nx-slide-in { position: absolute; z-index: 3; left: 32px; bottom: 54px; width: min(46%, 500px); } html[data-theme='neon'] .nx-slide-in .k { display: flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-slide-in .fresh { padding: 2px 6px; border: 1px solid var(--gold-2); font: 600 10px/1.2 var(--nx-ui); letter-spacing: 0.04em; } html[data-theme='neon'] .nx-slide-in h2 { margin: 8px 0 10px; font: 700 clamp(30px, 3.5vw, 48px)/1.05 var(--nx-cap); color: #f3ebde; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } html[data-theme='neon'] .nx-slide-in p { margin: 0; font-size: 15px; line-height: 1.4; color: #c9c1b4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme='neon'] .nx-f-go { display: inline-block; margin-top: 16px; height: 38px; padding: 0 28px; border: 1px solid var(--gold-2); background: rgba(245, 200, 98, 0.08); color: #f5d98a !important; font: 700 14px/1 var(--nx-cap) !important; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.15s, color 0.15s; } html[data-theme='neon'] .nx-f-go:disabled { opacity: 0.5; cursor: default; } html[data-theme='neon'] .nx-f-go.main { border-color: #ffd84a; background: linear-gradient(180deg, #ffd84a, #eeb91f); color: #1c1206 !important; } html[data-theme='neon'] .nx-f-earn { display: block; margin-top: 8px; font: 600 13px/1.3 var(--nx-ui); color: var(--gold); } /* (PLAY while the tutorial waits: still there, no glow) */ html[data-theme='neon'] .nx-playbtn.quiet, html[data-theme='neon'] .nx-playbtn.quiet.on { filter: none; } html[data-theme='neon'] .nx-playbtn.quiet::after { animation: none; background: none; } html[data-theme='neon'] .nx-bplay.quiet .orb, html[data-theme='neon'] .nx-bplay.quiet.on .orb { box-shadow: 0 0 0 4px var(--ink-1), inset 0 -4px 0 rgba(120, 70, 0, 0.4); } html[data-theme='neon'] .nx-f-go.small { margin-top: 8px; height: auto; min-height: 32px; padding: 7px 18px; font-size: 13px !important; line-height: 1.15 !important; } html[data-theme='neon'] .nx-f-pages { position: absolute; z-index: 4; left: 32px; bottom: 16px; display: flex; gap: 6px; } html[data-theme='neon'] .nx-f-pages > button { width: 34px; height: 18px; padding: 0; border: 0; background: none; } html[data-theme='neon'] .nx-f-pages > button::before { content: ''; display: block; height: 3px; background: rgba(255, 255, 255, 0.28); transition: background 0.15s; } html[data-theme='neon'] .nx-f-pages > button.on::before { background: var(--gold); } html[data-theme='neon'] .nx-showcase { position: absolute; z-index: 2; right: 4%; top: 0; bottom: 0; width: 46%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 54px; pointer-events: none; } html[data-theme='neon'] .nx-hero { position: relative; flex: none; display: flex; justify-content: center; } html[data-theme='neon'] .nx-hero-pet canvas { display: block; image-rendering: pixelated; } html[data-theme='neon'] .nx-plate { position: absolute; right: 18px; bottom: 12px; padding: 4px 8px; border: 0; background: none; pointer-events: auto; text-align: right; } html[data-theme='neon'] .nx-plate .nm { display: flex; flex-direction: column; gap: 1px; } html[data-theme='neon'] .nx-plate .nm b { font: 700 18px/1.1 var(--nx-cap); letter-spacing: 0.04em; color: #f3ebde; text-shadow: 0 1px 6px #000; } html[data-theme='neon'] .nx-plate .nm small { font: 400 12px/1.2 var(--nx-ui); color: #bdb4a6; text-shadow: 0 1px 4px #000; } html[data-theme='neon'] .nx-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; } html[data-theme='neon'] .nx-tile { min-width: 0; min-height: 168px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-1); background: var(--nx-panel); text-align: left; } html[data-theme='neon'] button.nx-tile { transition: border-color 0.15s, background 0.15s; } html[data-theme='neon'] .nx-t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.1em; text-transform: uppercase; color: #e8dfd0; } html[data-theme='neon'] .nx-t-head .meta { font: 400 12px/1.2 var(--nx-ui); letter-spacing: 0; text-transform: none; color: var(--muted); } html[data-theme='neon'] .nx-t-head .meta.gold { color: var(--gold); font-weight: 600; } html[data-theme='neon'] .nx-thin { height: 3px; background: rgba(255, 255, 255, 0.09); } html[data-theme='neon'] .nx-thin > i { display: block; height: 100%; background: var(--gold); } html[data-theme='neon'] .nx-jumps { display: flex; flex-direction: column; gap: 2px; margin: -2px -6px; } html[data-theme='neon'] .nx-jump { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; border: 0; background: none; text-align: left; transition: background 0.15s; } html[data-theme='neon'] .nx-jump .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; } html[data-theme='neon'] .nx-jump .tx b { font-weight: 600; font-size: 13px; color: #f3ebde; } html[data-theme='neon'] .nx-jump .tx small { font-size: 12px; color: var(--muted); } html[data-theme='neon'] .nx-jump > i { font-style: normal; color: var(--muted); font-size: 16px; } html[data-theme='neon'] .nx-qs { display: flex; flex-direction: column; gap: 9px; } html[data-theme='neon'] .nx-q { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 4px; } html[data-theme='neon'] .nx-q .mk { width: 10px; height: 10px; border: 1px solid var(--line-3); } html[data-theme='neon'] .nx-q.done .mk { border-color: var(--gold); background: var(--gold); } html[data-theme='neon'] .nx-q small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } html[data-theme='neon'] .nx-q b { font-size: 12px; font-weight: 600; color: var(--gold); } html[data-theme='neon'] .nx-q .nx-thin { grid-column: 2 / -1; height: 2px; } html[data-theme='neon'] .nx-pass-tier b { font: 700 26px/1.1 var(--nx-cap); color: #f3ebde; } html[data-theme='neon'] .nx-pass-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); } html[data-theme='neon'] .nx-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line-1); background: var(--nx-panel); } html[data-theme='neon'] .nx-side-ev { flex: none; border-bottom: 1px solid var(--line-2); } /* a computer's widgets, one under the other, the column scrolling only if they don't fit */ html[data-theme='neon'] .nx-side.widgets { overflow-y: auto; scrollbar-width: thin; } html[data-theme='neon'] .nx-side.widgets .nx-side-ev > .art { height: 60px; } html[data-theme='neon'] .nx-wg-patrol .pw-body { display: none; } /* (its stage has the HP bars over their heads) */ html[data-theme='neon'] .nx-wg-holder small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme='neon'] .nx-wg-holder { flex: none; } html[data-theme='neon'] .nx-wg { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-1); border-radius: 0; background: none; text-align: left; font: 400 13px/1.3 var(--nx-ui); letter-spacing: 0; text-transform: none; } html[data-theme='neon'] button.nx-wg { transition: background 0.15s; } html[data-theme='neon'] button.nx-wg:hover { background: rgba(245, 200, 98, 0.06); } html[data-theme='neon'] .nx-wg-row { display: flex; flex-direction: row; align-items: center; gap: 10px; } html[data-theme='neon'] .nx-wg .in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme='neon'] .nx-wg .k { font: 700 12px/1.2 var(--nx-cap); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-wg b { font-size: 14px; font-weight: 600; color: #f3ebde; } html[data-theme='neon'] .nx-wg small { font-size: 12px; line-height: 1.3; color: var(--muted); } html[data-theme='neon'] .nx-wg small.gold { color: var(--gold); } html[data-theme='neon'] .nx-wg .pic { flex: none; width: 64px; height: 64px; border: 1px solid var(--line-1); background-size: cover; background-position: center; } html[data-theme='neon'] .nx-wg .clock { font: 400 18px/1.1 var(--font-num); letter-spacing: 0.04em; color: var(--gold); } html[data-theme='neon'] .nx-wg-line { padding: 4px 6px; margin: 0 -6px; width: calc(100% + 12px); border: 0; } html[data-theme='neon'] .nx-wg-faces { display: flex; gap: 6px; } html[data-theme='neon'] .nx-wg-faces .face { flex: 1; min-width: 0; display: grid; place-items: center; height: 50px; border: 1px solid var(--line-1); background: #17131d; overflow: hidden; } /* the patrol's box, docked: it lives in the widget, no box of its own */ html[data-theme='neon'] .nx-wg-patrol { padding: 0; } html[data-theme='neon'] .nx-wg-patrol .patrol-widget { position: static; width: 100%; max-width: none; margin: 0; padding: 10px 14px; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; animation: none; transform: none; cursor: pointer; } html[data-theme='neon'] .nx-wg-patrol .patrol-widget:hover { background: rgba(245, 200, 98, 0.06); } html[data-theme='neon'] .nx-side-ev > .art { height: 84px; background-size: cover; background-position: center; filter: saturate(0.8); } html[data-theme='neon'] .nx-side-ev > .in { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 14px 12px; } html[data-theme='neon'] .nx-side-ev .k { font: 700 12px/1.2 var(--nx-cap); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-side-ev b { font-size: 14px; font-weight: 600; color: #f3ebde; } html[data-theme='neon'] .nx-side-ev small { font-size: 12px; color: var(--muted); } html[data-theme='neon'] .nx-friends { flex: 1; min-height: 0; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-friends > .nx-t-head { flex: none; padding: 14px 14px 10px; } html[data-theme='neon'] .nx-friends > .nx-t-head > :first-child { flex: 1; } html[data-theme='neon'] .nx-side-link { padding: 0; border: 0; background: none; color: var(--gold) !important; font: 600 12px/1.2 var(--nx-ui); letter-spacing: 0; text-transform: none; } html[data-theme='neon'] .nx-fr-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; } html[data-theme='neon'] .nx-fr-group { padding: 10px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } html[data-theme='neon'] .nx-fr { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 14px; border: 0; background: none; text-align: left; transition: background 0.15s; } html[data-theme='neon'] .nx-fr.off { opacity: 0.55; } html[data-theme='neon'] .nx-fr .who { min-width: 0; display: flex; flex-direction: column; gap: 1px; } html[data-theme='neon'] .nx-fr .who b { font-weight: 600; font-size: 13px; color: #f3ebde; } html[data-theme='neon'] .nx-fr-req { width: calc(100% - 28px); margin: 0 14px 6px; padding: 7px 10px; border: 1px solid var(--gold-2); background: rgba(245, 200, 98, 0.08); color: var(--gold) !important; font-size: 12px; font-weight: 600; text-align: left; } html[data-theme='neon'] .nx-fr-none { margin: 2px 14px 8px; font-size: 13px; line-height: 1.45; color: var(--muted); } html[data-theme='neon'] .nx-fr-go { padding: 0 14px; } html[data-theme='neon'] .nx-side-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; border-top: 1px solid var(--line-1); background: none; text-align: left; font-size: 13px; font-weight: 600; color: #cfc7ba !important; transition: background 0.15s; } @media (max-width: 960px) { html[data-theme='neon'] .nx-home { display: block; height: auto; box-shadow: none; } html[data-theme='neon'] .nx-h-main { display: flex; flex-direction: column; overflow: visible; } html[data-theme='neon'] .nx-feature { flex: none; height: min(62vh, 440px); } html[data-theme='neon'] .nx-side { border-left: 0; border-top: 1px solid var(--line-1); } } @media (max-width: 760px) { html[data-theme='neon'] .nx-h-main { padding: 8px; gap: 8px; } html[data-theme='neon'] .nx-feature { height: 430px; } html[data-theme='neon'] .nx-slide::before { background: linear-gradient(180deg, rgba(8, 7, 12, 0.94), rgba(8, 7, 12, 0.7) 44%, rgba(8, 7, 12, 0.1) 72%, rgba(8, 7, 12, 0.6)); } html[data-theme='neon'] .nx-slide-in { left: 16px; right: 16px; top: 16px; bottom: auto; width: auto; } html[data-theme='neon'] .nx-slide-in h2 { font-size: 28px; margin: 6px 0 6px; } html[data-theme='neon'] .nx-slide-in p { font-size: 14px; -webkit-line-clamp: 2; } html[data-theme='neon'] .nx-f-go { margin-top: 10px; height: 34px; padding: 0 20px; } html[data-theme='neon'] .nx-f-pages { left: 16px; bottom: 10px; } html[data-theme='neon'] .nx-f-pages > button { width: 22px; } html[data-theme='neon'] .nx-showcase { right: 0; width: 70%; padding-bottom: 44px; } html[data-theme='neon'] .nx-plate { right: 8px; bottom: 6px; } html[data-theme='neon'] .nx-tiles { grid-auto-flow: row; gap: 8px; } html[data-theme='neon'] .nx-tile { min-height: 0; } } /* ================================================================== Home and the bar, alive: what answers the mouse, what moves by itself. Light and small moves in the one gold; everything here stops with Reduce motion (the end of this block) */ @keyframes nx-sheen { 0%, 62% { background-position: 130% 0; } 100% { background-position: -30% 0; } } @keyframes nx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes nx-from-side { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes nx-breathe { 50% { box-shadow: 0 0 14px rgba(245, 200, 98, 0.32), inset 0 0 8px rgba(245, 200, 98, 0.1); } } @keyframes nx-ping { 0% { box-shadow: 0 0 0 0 rgba(106, 214, 110, 0.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(106, 214, 110, 0); } } @keyframes nx-fill { from { transform: scaleX(0); } to { transform: none; } } @keyframes nx-bump { 0% { transform: scale(1); color: var(--gold); } 35% { transform: scale(1.28); color: #fff0a8; } 100% { transform: scale(1); } } @keyframes nx-bell { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 92% { transform: rotate(-11deg); } 95% { transform: rotate(7deg); } 98% { transform: rotate(-4deg); } } /* the bar */ html[data-theme='neon'] .nx-brand .nx-mark { transition: transform 0.6s var(--ease-back), filter 0.2s; } html[data-theme='neon'] .nx-playbtn:active { transform: translateY(1px) scale(0.97); } html[data-theme='neon'] .nx-playbtn .lbl { display: inline-block; transition: letter-spacing 0.25s var(--ease-out); } html[data-theme='neon'] .nx-nav-item .lbl { display: inline-block; transition: transform 0.18s var(--ease-out); } html[data-theme='neon'] .nx-nav-item::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: rgba(245, 200, 98, 0.7); transition: left 0.22s var(--ease-out), right 0.22s var(--ease-out); } html[data-theme='neon'] .nx-nav-item:active .lbl { transform: translateY(1px) scale(0.96); } html[data-theme='neon'] .nx-ink { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(245, 200, 98, 0.8); pointer-events: none; transition: transform 0.38s var(--ease-out), width 0.38s var(--ease-out); } html[data-theme='neon'] .nx-cur > img { transition: filter 0.15s, transform 0.3s var(--ease-back); } html[data-theme='neon'] .nx-cur:active { transform: translateY(1px); } html[data-theme='neon'] .nx-cur.bump b, html[data-theme='neon'] .nx-cur.bump > img { display: inline-block; animation: nx-bump 0.7s var(--ease-out); } html[data-theme='neon'] .btn.nx-icon-btn :is(img, canvas) { transition: transform 0.35s var(--ease-back), filter 0.2s; } html[data-theme='neon'] .btn.nx-icon-btn:active :is(img, canvas) { transform: scale(0.86); } html[data-theme='neon'] .btn.nx-bell.badge :is(img, canvas) { animation: nx-bell 6s ease-in-out infinite; transform-origin: 50% 15%; } html[data-theme='neon'] .nx-me-banner { scale: 1.1; animation: nx-banner-drift 36s ease-in-out infinite alternate; transition: scale 1.1s var(--ease-out); } @keyframes nx-banner-drift { from { translate: -4% 0; } to { translate: 4% 0; } } html[data-theme='neon'] .nx-ava { transition: box-shadow 0.25s, border-color 0.25s; } html[data-theme='neon'] .nx-ava-lv { transition: transform 0.3s var(--ease-back), background 0.2s, color 0.2s; } html[data-theme='neon'] .nx-me:active .nx-ava-wrap { transform: scale(0.96); } html[data-theme='neon'] .nx-me-xp { position: relative; overflow: hidden; } html[data-theme='neon'] .nx-me-xp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%) no-repeat; background-size: 300% 100%; animation: nx-sheen 7s ease-in-out infinite; } /* the banner: it comes in, the picture drifts and leans with the mouse, the words rise one after another */ html[data-theme='neon'] .nx-feature { animation: nx-rise 0.45s var(--ease-out) both; } html[data-theme='neon'] .nx-slide > .art { scale: 1.06; translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -7px); transition: translate 0.6s var(--ease-out); } html[data-theme='neon'] .nx-slide.on > .art { animation: nx-drift 18s ease-out both; } @keyframes nx-drift { from { scale: 1.06; } to { scale: 1.15; } } html[data-theme='neon'] .nx-dust { position: absolute; z-index: 1; left: 0; bottom: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; image-rendering: pixelated; aspect-ratio: 1; } html[data-theme='neon'] .nx-sparks { position: absolute; z-index: 1; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-end; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; } html[data-theme='neon'] .nx-sparks > * { flex: none; image-rendering: pixelated; } html[data-theme='neon'] .nx-slide.on .nx-slide-in > * { animation: nx-rise 0.5s var(--ease-out) both; } html[data-theme='neon'] .nx-slide.on .nx-slide-in > :nth-child(2) { animation-delay: 0.07s; } html[data-theme='neon'] .nx-slide.on .nx-slide-in > :nth-child(3) { animation-delay: 0.14s; } html[data-theme='neon'] .nx-slide.on .nx-slide-in > :nth-child(4) { animation-delay: 0.21s; } html[data-theme='neon'] .nx-slide-in h2 { text-shadow: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)); background: linear-gradient(105deg, #f3ebde 44%, #fff2c4 50%, #f3ebde 56%) no-repeat; background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme='neon'] .nx-slide.on .nx-slide-in h2 { animation: nx-rise 0.5s var(--ease-out) 0.07s both, nx-title-light 1.5s ease-out 0.35s both; } @keyframes nx-title-light { from { background-position: 100% 0; } to { background-position: 0 0; } } html[data-theme='neon'] .nx-slide-in .fresh { animation: nx-breathe 2.4s ease-in-out infinite; } /* the main button of a turn: gold fills it from the left */ html[data-theme='neon'] .nx-f-go { background-image: linear-gradient(90deg, #f5c862, #ffe29a); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 0.26s var(--ease-out), color 0.16s, transform 0.12s var(--ease-out), box-shadow 0.2s; } html[data-theme='neon'] .nx-slide.on .nx-f-go { animation: nx-rise 0.5s var(--ease-out) 0.21s both, nx-breathe 3s ease-in-out 1s infinite; } html[data-theme='neon'] .nx-f-go:active:not(:disabled) { transform: translateY(1px) scale(0.97); } /* the pager: its bar fills while the turn lasts (ui/neon/home.js goes on when it's full), and waits while you're over it */ html[data-theme='neon'] .nx-f-pages > button { position: relative; transition: transform 0.15s; } html[data-theme='neon'] .nx-f-pages > button::before { background: rgba(255, 255, 255, 0.28); } html[data-theme='neon'] .nx-f-pages > button.on::before { background: rgba(255, 255, 255, 0.28); } html[data-theme='neon'] .nx-f-pages > button.on::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); box-shadow: 0 0 8px rgba(245, 200, 98, 0.8); transform-origin: left; animation: nx-page-fill 8s linear both; } @keyframes nx-page-fill { from { transform: scaleX(0); } to { transform: none; } } html[data-theme='neon'] .nx-feature:hover .nx-f-pages > button.on::after, html[data-theme='neon'] .nx-feature:has(:focus-visible) .nx-f-pages > button.on::after { animation-play-state: paused; } /* your champion and your mascot */ html[data-theme='neon'] .nx-hero { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 4px); transition: translate 0.6s var(--ease-out); animation: nx-hero-in 0.7s var(--ease-back) 0.15s both; } @keyframes nx-hero-in { from { opacity: 0; transform: translateX(46px) scale(0.94); } to { opacity: 1; transform: none; } } html[data-theme='neon'] .nx-hero canvas { position: relative; pointer-events: none; transition: filter 0.25s; } /* (drawn pixel for pixel: never smoothed over, wherever it lands) */ html[data-theme='neon'] .nx-fig { image-rendering: pixelated; } /* (the painting is smaller than Home's picture on these screens: its pixels kept sharp, not blown up soft) */ @media (min-resolution: 2.5dppx), (min-width: 2400px), (min-resolution: 2dppx) and (min-width: 1200px) { html[data-theme='neon'] .nx-slide > .art { image-rendering: pixelated; } } html[data-theme='neon'] .nx-hero::before { content: ''; position: absolute; left: 50%; bottom: -10px; width: 56%; height: 30px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 200, 98, 0.32), rgba(245, 200, 98, 0.1) 62%, transparent); animation: nx-ground 3.6s ease-in-out infinite; } @keyframes nx-ground { 50% { opacity: 0.55; scale: 1.12 1; } } html[data-theme='neon'] .nx-hero-hit { position: absolute; left: 26%; right: 26%; top: 8%; bottom: 0; padding: 0; border: 0; background: none; pointer-events: auto; } html[data-theme='neon'] .nx-hero:has(.nx-hero-hit:active) canvas { filter: brightness(1.25); } html[data-theme='neon'] .nx-say { position: absolute; z-index: 4; right: 66%; top: 6%; width: max-content; max-width: 240px; padding: 8px 12px; border: 1px solid var(--gold-2); background: rgba(13, 10, 18, 0.94); color: #f3ebde; font: italic 400 14px/1.3 var(--nx-ui); pointer-events: none; opacity: 0; transform: translateY(8px) scale(0.92); transform-origin: right bottom; transition: opacity 0.2s, transform 0.3s var(--ease-back); } html[data-theme='neon'] .nx-say::after { content: ''; position: absolute; right: -6px; bottom: 10px; width: 10px; height: 10px; background: inherit; border: 1px solid var(--gold-2); border-left: 0; border-bottom: 0; transform: rotate(45deg); } html[data-theme='neon'] .nx-say.on { opacity: 1; transform: none; } html[data-theme='neon'] .nx-hero-pet { position: absolute; right: 0; bottom: 50px; padding: 0; border: 0; background: none; pointer-events: auto; translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 6px); transition: translate 0.6s var(--ease-out), scale 0.25s var(--ease-back); animation: nx-pet-in 0.6s var(--ease-back) 0.5s both; } @keyframes nx-pet-in { from { opacity: 0; transform: translateY(26px) scale(0.6); } to { opacity: 1; transform: none; } } html[data-theme='neon'] .nx-f-earn-in { display: inline-flex; align-items: center; gap: 8px; } html[data-theme='neon'] .nx-f-earn-in .num { font: inherit; } html[data-theme='neon'] .nx-hero canvas.nx-son { position: absolute; left: 76%; bottom: -3%; margin: 0 !important; translate: -50% 0; } html[data-theme='neon'] .nx-showcase .nx-hero-pet { left: 0; right: auto; } html[data-theme='neon'] .nx-hero-pet.hop { animation: nx-pet-hop 0.6s var(--ease-out); } @keyframes nx-pet-hop { 0% { transform: none; } 18% { transform: scale(1.14, 0.84); } 48% { transform: translateY(-34px) scale(0.92, 1.1); } 76% { transform: scale(1.1, 0.9); } 100% { transform: none; } } html[data-theme='neon'] .nx-pet-emote { position: absolute; left: 50%; bottom: 92%; width: 44px; height: 44px; pointer-events: none; animation: nx-emote-up 1.6s var(--ease-out) both; } @keyframes nx-emote-up { 0% { opacity: 0; transform: translate(-50%, 14px) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 80% { opacity: 1; transform: translate(-50%, -18px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(0.9); } } html[data-theme='neon'] .nx-plate .nm b { transition: color 0.15s; } html[data-theme='neon'] .nx-plate .nm { transition: transform 0.2s var(--ease-out); } html[data-theme='neon'] .nx-plate:active .nm { transform: translateY(1px); } /* the tiles: they come in one by one; gold corners and a soft light under the mouse */ html[data-theme='neon'] .nx-tile { position: relative; overflow: hidden; animation: nx-rise 0.5s var(--ease-out) calc(0.12s + var(--i, 0) * 0.07s) both; transition: border-color 0.2s, background 0.2s, transform 0.12s var(--ease-out); } html[data-theme='neon'] .nx-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--gold), var(--gold)) left top no-repeat, linear-gradient(var(--gold), var(--gold)) left top no-repeat, linear-gradient(var(--gold), var(--gold)) right bottom no-repeat, linear-gradient(var(--gold), var(--gold)) right bottom no-repeat; background-size: 0 1px, 1px 0, 0 1px, 1px 0; transition: background-size 0.28s var(--ease-out); } html[data-theme='neon'] .nx-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 200, 98, 0.1), transparent 70%); transition: opacity 0.25s; } html[data-theme='neon'] .nx-tile > * { position: relative; z-index: 1; } html[data-theme='neon'] button.nx-tile:active { transform: translateY(1px) scale(0.995); } html[data-theme='neon'] .nx-t-head .meta { transition: transform 0.2s var(--ease-out), color 0.15s; } /* a thin bar: it fills when the page opens, a light runs along it */ html[data-theme='neon'] .nx-thin > i { position: relative; transform-origin: left; overflow: hidden; animation: nx-fill 0.9s var(--ease-out) 0.3s both; } html[data-theme='neon'] .nx-thin > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%) no-repeat; background-size: 300% 100%; animation: nx-sheen 4.5s ease-in-out infinite; } html[data-theme='neon'] .nx-t-head .meta.gold::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--gold); vertical-align: 1px; animation: nx-dot-pulse 1.6s ease-in-out infinite; } @keyframes nx-dot-pulse { 50% { box-shadow: 0 0 0 4px rgba(245, 200, 98, 0.22); } } html[data-theme='neon'] .nx-q.done .mk { animation: nx-breathe 2.6s ease-in-out infinite; } html[data-theme='neon'] .nx-q b { background: linear-gradient(105deg, var(--gold) 42%, #fff6d6 50%, var(--gold) 58%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nx-sheen 3.2s ease-in-out infinite; } html[data-theme='neon'] .nx-pass-tier b { display: inline-block; transition: transform 0.25s var(--ease-out), color 0.2s; } /* jump back in: light runs over each picture in turn; the one you point at wakes up */ html[data-theme='neon'] .nx-jump { position: relative; transition: background 0.18s, transform 0.18s var(--ease-out); } html[data-theme='neon'] .nx-jump .th { position: relative; display: block; width: 54px; height: 34px; overflow: hidden; border: 1px solid var(--line-2); transition: border-color 0.18s, box-shadow 0.2s; } html[data-theme='neon'] .nx-jump .th img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); scale: 1.02; transition: scale 0.4s var(--ease-out), filter 0.25s; } html[data-theme='neon'] .nx-jump .th::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255, 236, 180, 0.7) 50%, transparent 62%) no-repeat; background-size: 300% 100%; animation: nx-sheen 4.8s ease-in-out calc(var(--i, 0) * 1.3s) infinite; } html[data-theme='neon'] .nx-jump.hot .th { border-color: var(--gold-2); animation: nx-breathe 1.8s ease-in-out infinite; } html[data-theme='neon'] .nx-jump .tx b { transition: color 0.15s; } html[data-theme='neon'] .nx-jump > i { transition: transform 0.2s var(--ease-back), color 0.15s; } html[data-theme='neon'] .nx-jump:active { transform: scale(0.985); } /* the side: it slides in; a gold edge on the friend you point at; those online pulse */ html[data-theme='neon'] .nx-side { animation: nx-from-side 0.5s var(--ease-out) 0.1s both; } html[data-theme='neon'] .nx-fr { position: relative; transition: background 0.15s, padding-left 0.18s var(--ease-out); } html[data-theme='neon'] .nx-fr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform 0.2s var(--ease-out); } html[data-theme='neon'] .nx-fr-list.first .nx-fr { animation: nx-from-side 0.35s var(--ease-out) calc(var(--i, 0) * 0.05s) both; } html[data-theme='neon'] .nx-fr .dot.on { animation: nx-ping 2.2s ease-out infinite; } html[data-theme='neon'] .nx-fr .dot.off { background: #6d6673; box-shadow: none; } html[data-theme='neon'] .nx-fr .so-dot:not(.on) { display: none; } html[data-theme='neon'] .nx-fr:active { background: rgba(255, 255, 255, 0.09); } html[data-theme='neon'] .nx-side-link { position: relative; } html[data-theme='neon'] .nx-side-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--gold); transition: right 0.2s var(--ease-out); } html[data-theme='neon'] .nx-side-foot :is(img, canvas) { transition: transform 0.3s var(--ease-back); } html[data-theme='neon'] .nx-side-ev { position: relative; animation: nx-rise 0.5s var(--ease-out) 0.2s both; } html[data-theme='neon'] .nx-side-ev > .art { animation: nx-ev-drift 14s ease-in-out infinite alternate; } @keyframes nx-ev-drift { from { background-position: 30% 50%; } to { background-position: 70% 50%; } } html[data-theme='neon'] .nx-side-ev .k::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--gold); vertical-align: 1px; animation: nx-dot-pulse 1.3s ease-in-out infinite; } /* what only a mouse can do (a finger would leave it stuck on) */ @media (hover: hover) { html[data-theme='neon'] .nx-brand:hover .nx-mark { transform: rotate(360deg); filter: brightness(1.2); } html[data-theme='neon'] .nx-playbtn:hover { filter: drop-shadow(0 0 12px rgba(255, 216, 74, 0.65)); transform: translateY(-1px); } html[data-theme='neon'] .nx-playbtn:hover::before { background: linear-gradient(180deg, #ffe680, #f7c636); } html[data-theme='neon'] .nx-playbtn:hover::after { animation-duration: 1.1s; } html[data-theme='neon'] .nx-playbtn:hover .lbl { letter-spacing: 0.2em; } html[data-theme='neon'] .nx-nav-item:hover { color: #f3ebde; } html[data-theme='neon'] .nx-nav-item:hover .lbl { transform: translateY(-1px); } html[data-theme='neon'] .nx-nav-item:hover::after { left: 26%; right: 26%; } html[data-theme='neon'] .nx-cur:hover { color: #fff; } html[data-theme='neon'] .nx-cur:hover > img { filter: none; transform: scale(1.3) rotate(-10deg); } html[data-theme='neon'] .btn.nx-icon-btn:hover:not(:disabled) { background: none; opacity: 1; transform: none; filter: none; } html[data-theme='neon'] .btn.nx-icon-btn:hover :is(img, canvas) { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 0 5px rgba(245, 200, 98, 0.6)); } html[data-theme='neon'] .btn.nx-gear:hover :is(img, canvas) { transform: rotate(75deg) scale(1.1); } html[data-theme='neon'] .nx-me:hover .nx-me-banner { scale: 1.2; } html[data-theme='neon'] .nx-me:hover .nx-ava { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 200, 98, 0.55); } html[data-theme='neon'] .nx-me:hover .nx-ava-lv { background: var(--gold); color: #1a1206; transform: translateX(-50%) scale(1.14); } html[data-theme='neon'] .nx-f-go:hover:not(:disabled) { background-size: 100% 100%; color: #1a1206 !important; box-shadow: 0 0 16px rgba(245, 200, 98, 0.45); animation-play-state: running, paused; } html[data-theme='neon'] .nx-f-pages > button:hover::before { background: rgba(255, 255, 255, 0.65); } html[data-theme='neon'] .nx-f-pages > button:hover { transform: scaleY(1.5); } html[data-theme='neon'] .nx-hero:has(.nx-hero-hit:hover) canvas { filter: brightness(1.1) drop-shadow(0 0 16px rgba(245, 200, 98, 0.4)); } html[data-theme='neon'] .nx-hero-pet:hover { scale: 1.08; } html[data-theme='neon'] .nx-plate:hover .nm b { color: var(--gold); } html[data-theme='neon'] .nx-plate:hover .nm { transform: translateX(-3px); } html[data-theme='neon'] .nx-tile:hover { border-color: var(--line-3); } html[data-theme='neon'] .nx-tile:hover::before { background-size: 26px 1px, 1px 26px, 26px 1px, 1px 26px; } html[data-theme='neon'] .nx-tile:hover::after { opacity: 1; } html[data-theme='neon'] button.nx-tile:hover { background: #15111b; } html[data-theme='neon'] button.nx-tile:hover .nx-t-head .meta { transform: translateX(3px); color: var(--gold); } html[data-theme='neon'] button.nx-tile:hover .nx-pass-tier b { transform: translateX(3px); color: var(--gold); } html[data-theme='neon'] .nx-jump:hover { background: rgba(245, 200, 98, 0.07); transform: translateX(3px); } html[data-theme='neon'] .nx-jump:hover .th { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 200, 98, 0.45); } html[data-theme='neon'] .nx-jump:hover .th img { scale: 1.22; filter: saturate(1.1) brightness(1.08); } html[data-theme='neon'] .nx-jump:hover .th::after { animation-duration: 1.2s; animation-delay: 0s; } html[data-theme='neon'] .nx-jump:hover .tx b { color: var(--gold); } html[data-theme='neon'] .nx-jump:hover > i { transform: translateX(4px); color: var(--gold); } html[data-theme='neon'] .nx-fr:hover { background: rgba(245, 200, 98, 0.06); padding-left: 18px; opacity: 1; } html[data-theme='neon'] .nx-fr:hover::before { transform: none; } html[data-theme='neon'] .nx-side-link:hover::after { right: 0; } html[data-theme='neon'] .nx-side-foot:hover { background: rgba(245, 200, 98, 0.06); color: var(--gold) !important; } html[data-theme='neon'] .nx-side-foot:hover :is(img, canvas) { transform: scale(1.18) rotate(-6deg); } } /* Reduce motion: everything stands still, only what's needed to read it stays */ html[data-theme='neon'].reduce-motion :is(.nx-topbar, .nx-home, .nx-play, .nx-pl-rail) *, html[data-theme='neon'].reduce-motion :is(.nx-topbar, .nx-home, .nx-play, .nx-pl-rail) *::before, html[data-theme='neon'].reduce-motion :is(.nx-topbar, .nx-home, .nx-play, .nx-pl-rail) *::after { animation: none !important; transition-duration: 0.01ms !important; } html[data-theme='neon'].reduce-motion :is(.nx-home, .nx-play, .nx-pl-rail) { animation: none !important; } html[data-theme='neon'].reduce-motion .nx-slide > .art { translate: none; } /* (still used by Heroes and the Shop) */ html[data-theme='neon'] .nx-stat { display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 8px 14px 8px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-1); backdrop-filter: blur(6px); } html[data-theme='neon'] .nx-stat > img { width: 30px; height: 30px; } html[data-theme='neon'] .nx-stat small { font-family: var(--font-label); display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } html[data-theme='neon'] .nx-stat b { font: 400 24px/1 var(--font-num); letter-spacing: 0.04em; } html[data-theme='neon'] .nx-pass { display: flex; align-items: stretch; gap: 6px; margin: 14px 0 18px; } html[data-theme='neon'] .nx-pass .tier { position: relative; flex: 1; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-1); } html[data-theme='neon'] .nx-pass .tier img { width: 60%; height: auto; } html[data-theme='neon'] .nx-pass .tier.got { border-color: var(--good); } html[data-theme='neon'] .nx-pass .tier.got::after { content: '✓'; position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--good); color: #062006; font: 700 11px/16px var(--font-text); text-align: center; } html[data-theme='neon'] .nx-pass .tier.ready { border-color: var(--gold); box-shadow: 0 0 16px -4px var(--gold); } html[data-theme='neon'] .nx-pass .tier.next { border-color: var(--gold); box-shadow: 0 0 16px -4px var(--gold); animation: nx-glow 2s ease-in-out infinite; } html[data-theme='neon'] .nx-pass .tier.lock img { filter: grayscale(1) brightness(0.5); } html[data-theme='neon'] .nx-pass .tier small { position: absolute; bottom: -18px; font: 400 14px/1 var(--font-num); color: var(--muted); } html[data-theme='neon'] .nx-stat { min-width: 0; padding: 6px 10px 6px 6px; } html[data-theme='neon'] .nx-stat > img { width: 24px; height: 24px; } html[data-theme='neon'] .nx-stat b { font-size: 20px; } /* ================================================================== only the center scrolls (ui/neon/kit.js fadeScroll): what leaves fades out at the top, what's coming fades in from the bottom */ html[data-theme='neon'] .nx-fade { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent 100%); scrollbar-width: thin; scrollbar-color: rgba(245, 200, 98, 0.32) transparent; } html[data-theme='neon'] .nx-fade::-webkit-scrollbar { width: 6px; } html[data-theme='neon'] .nx-fade::-webkit-scrollbar-track { background: transparent; } html[data-theme='neon'] .nx-fade::-webkit-scrollbar-thumb { background: rgba(245, 200, 98, 0.32); border-radius: 3px; } /* ================================================================== a mode beside the list: as much as fits, nothing wasted */ @media (min-width: 1001px) { html[data-theme='neon'].nx-lobby .screen.win { display: flex; flex-direction: column; } html[data-theme='neon'].nx-lobby .screen.win > .screen-head { flex: none; padding: 12px 24px 6px; } html[data-theme='neon'].nx-lobby .screen.win > .screen-head .title { font-size: 26px; } html[data-theme='neon'].nx-lobby .screen.win > .nx-head { flex: none; margin: 0; padding: 12px 24px 4px; } html[data-theme='neon'].nx-lobby .screen.win > .nx-head .nx-title { font-size: 26px; } html[data-theme='neon'].nx-lobby .screen.win > .nx-head.nx-so-head { display: none; } /* (the list already says Online; you're top right) */ html[data-theme='neon'].nx-lobby .screen-online > div:not(.screen-body) { padding-top: 8px; } html[data-theme='neon'].nx-lobby .screen.win > .screen-body { flex: 1; min-height: 0; padding: 6px 24px 14px; } html[data-theme='neon'].nx-lobby .screen.win > div:not(.screen-head):not(.screen-body) { padding-left: 24px; padding-right: 24px; } html[data-theme='neon'].nx-lobby .screen.win .screen-body :is(.max, .max-s, .max-m) { max-width: none; } html[data-theme='neon'].nx-lobby .screen.win .screen-body .col { gap: 10px; } html[data-theme='neon'].nx-lobby .screen.win .screen-body .panel { padding: 10px 14px; } html[data-theme='neon'].nx-lobby .screen.win .screen-body .panel.has-tab { padding-top: 8px; } } html[data-theme='neon'] .nx-foot { flex: none; padding-top: 8px; padding-bottom: 14px; } html[data-theme='neon'] .nx-foot .btn { max-width: 460px; } html[data-theme='neon'] .nx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; } html[data-theme='neon'] .nx-two > .panel { margin: 0; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-two > .panel > .btn { margin-top: auto; } /* vs CPU, 2 Players */ html[data-theme='neon'] .nx-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } html[data-theme='neon'] .nx-setup > .col { min-width: 0; gap: 12px; } html[data-theme='neon'] .nx-opts { display: grid; grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); gap: 6px; } html[data-theme='neon'] .nx-opts.pics { grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-theme='neon'] .nx-opt { position: relative; min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line-2); background: #17131d; color: #cfc7ba; font: 700 13px/1.1 var(--nx-cap); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s var(--ease-out); } html[data-theme='neon'] .nx-opt.on { border-color: var(--gold); background: rgba(245, 200, 98, 0.12); color: var(--gold); box-shadow: 0 0 10px rgba(245, 200, 98, 0.2); } html[data-theme='neon'] .nx-opt:active { transform: scale(0.97); } html[data-theme='neon'] .nx-opts.pics .nx-opt { padding: 0; overflow: hidden; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-opts.pics .nx-opt img { display: block; width: 100%; height: 44px; object-fit: cover; filter: saturate(0.75) brightness(0.85); transition: filter 0.2s, scale 0.35s var(--ease-out); } html[data-theme='neon'] .nx-opts.pics .nx-opt.on img { filter: none; } html[data-theme='neon'] .nx-opts.pics .nx-opt span { display: block; padding: 4px 4px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; } html[data-theme='neon'] .nx-opt-line { min-height: 32px; margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--muted); } html[data-theme='neon'] .nx-setup .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } html[data-theme='neon'] .nx-setup .toggle { margin: 0; padding: 6px 8px; font-size: 13px; } html[data-theme='neon'] .nx-setup .toggle .xs { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* the Campaign */ html[data-theme='neon'] .nx-chaps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; } html[data-theme='neon'] .nx-chap { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 8px 12px; border: 1px solid var(--line-2); background: #17131d; color: #cfc7ba; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; } html[data-theme='neon'] .nx-chap small { grid-column: 1; font: 700 11px/1.2 var(--nx-cap); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } html[data-theme='neon'] .nx-chap b { grid-column: 1; font: 700 15px/1.2 var(--nx-cap); } html[data-theme='neon'] .nx-chap i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 12px; color: var(--gold); } html[data-theme='neon'] .nx-chap > :is(img, canvas) { grid-column: 2; grid-row: 1 / span 2; } html[data-theme='neon'] .nx-chap.on { border-color: var(--gold); background: rgba(245, 200, 98, 0.1); } html[data-theme='neon'] .nx-chap.on b { color: var(--gold); } html[data-theme='neon'] .nx-chap.locked { opacity: 0.55; } html[data-theme='neon'] .nx-chap-story { max-width: 78ch; font-size: 15px; font-style: italic; line-height: 1.45; color: #d2cabd; } html[data-theme='neon'] .nx-camp-path { justify-content: center; gap: 0; padding: 18px 0; flex-wrap: nowrap; } html[data-theme='neon'] .nx-camp-path .camp-link { flex: 1 1 18px; max-width: 46px; height: 2px; background: var(--line-2); } html[data-theme='neon'] .nx-camp-path .camp-link.on { background: var(--gold-2); } html[data-theme='neon'] .nx-camp-path .camp-node { flex: 0 1 164px; min-width: 0; width: auto; gap: 6px; padding: 12px 8px 10px; border: 1px solid var(--line-2); background: #15111b; box-shadow: none; transition: border-color 0.15s, transform 0.18s var(--ease-out), box-shadow 0.2s; } html[data-theme='neon'] .nx-camp-path .camp-node:not(.locked):hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(245, 200, 98, 0.3); transform: translateY(-3px); } html[data-theme='neon'] .nx-camp-path .camp-node.next { border-color: var(--gold); animation: nx-breathe 2.4s ease-in-out infinite; } html[data-theme='neon'] .nx-camp-path .camp-node.boss { background: linear-gradient(180deg, rgba(138, 31, 42, 0.28), #15111b); } html[data-theme='neon'] .nx-camp-path .camp-pic { width: 84px; height: 84px; border: 1px solid var(--line-2); background: #0d0b12; } html[data-theme='neon'] .nx-camp-path .camp-pic canvas { width: 76px !important; height: 76px !important; } html[data-theme='neon'] .nx-camp-path .camp-name { font: 700 13px/1.2 var(--nx-cap); text-align: center; } /* the Gauntlet */ html[data-theme='neon'] .nx-gx-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } html[data-theme='neon'] .nx-gx { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; } html[data-theme='neon'] .nx-gx .gx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; } html[data-theme='neon'] .nx-gx .gx-card { margin: 0; padding: 7px 10px !important; gap: 2px; min-height: 0; } html[data-theme='neon'] .nx-gx .gx-card > .xs.muted, html[data-theme='neon'] .nx-gx .gx-card > .gx-resist { display: none; } html[data-theme='neon'] .nx-gx .gx-card .gx-top b { font: 700 14px/1.2 var(--nx-cap); } html[data-theme='neon'] .nx-gx .gx-detail { margin: 0; } html[data-theme='neon'] .nx-gx .gx-pool :is(img, canvas) { max-width: 30px; max-height: 30px; } html[data-theme='neon'] .gx-start { max-width: 460px; margin: 2px auto 0; } html[data-theme='neon'] .nx-gx-head { display: flex; align-items: center; gap: 12px; } html[data-theme='neon'] .nx-gx-head > b:first-of-type { font: 700 18px/1.1 var(--nx-cap); color: var(--gold); } html[data-theme='neon'] .nx-gx-team .grid.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; } html[data-theme='neon'] .nx-gx-team .card { min-width: 0; padding: 4px; } html[data-theme='neon'] .nx-fill > .gx-start { margin-top: 4px; } /* Online's Play */ html[data-theme='neon'] .nx-cols { display: block; columns: 2; column-gap: 10px; } html[data-theme='neon'] .nx-cols > .panel { min-width: 0; margin: 0 0 10px; break-inside: avoid; } /* the Patrol: the plan and the routes shorter, the champions smaller, what's extra beside it */ html[data-theme='neon'] .pt-plan { grid-template-columns: minmax(0, 1fr) 290px; gap: 10px; } html[data-theme='neon'] .pt-sidecol { min-width: 0; gap: 8px; } html[data-theme='neon'] .pt-panes { flex: 1; min-height: 0; overflow-y: auto; gap: 8px; } html[data-theme='neon'] .nx-sidetabs { flex: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); } html[data-theme='neon'] .nx-sidetab { min-width: 0; height: 32px; padding: 0 4px; overflow: hidden; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: #a79e91; font: 700 12px/1 var(--nx-cap); white-space: nowrap; text-overflow: ellipsis; cursor: pointer; transition: color 0.15s, border-color 0.2s; } html[data-theme='neon'] .nx-sidetab.on { color: var(--gold); border-bottom-color: var(--gold); } html[data-theme='neon'] .nx-sidetab:not(.on):hover { color: #f3ebde; border-bottom-color: rgba(245, 200, 98, 0.45); } html[data-theme='neon'] .pt-side { position: static; } html[data-theme='neon'] .pt-main { gap: 10px; } html[data-theme='neon'] .pt-route-art { display: block; width: 100% !important; height: auto !important; aspect-ratio: 8 / 3 !important; border-bottom: 1px solid #000; } html[data-theme='neon'] .pt-route { border: 1px solid var(--line-2); box-shadow: none; transition: border-color 0.15s, box-shadow 0.2s, transform 0.18s var(--ease-out); } html[data-theme='neon'] .pt-route.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(245, 200, 98, 0.32); } html[data-theme='neon'] .pt-route:not(.on):hover { border-color: var(--gold-2); transform: translateY(-2px); } html[data-theme='neon'] .pt-chosen { display: none; } /* (the gold frame says it) */ /* the road (ui/patrol-stage.js): six layers at their true shape, every one of them a tile three times the scene's height wide */ html[data-theme='neon'] .ps-v2 .patrol-stage { height: var(--ps-h); } html[data-theme='neon'] .ps-v2 .ps-scene { height: var(--ps-h); } html[data-theme='neon'] .ps-v2 .ps-scene > i { --tile: 300cqh; background-size: var(--tile) 100%; } html[data-theme='neon'] .ps-v2 .ps-scene > .ps-sky { --tile: max(100cqw, 300cqh); top: 0; background-size: var(--tile) auto; background-position: 0 0; } /* (from its top: the moon's up there, the far layers cover its bottom) */ html[data-theme='neon'] .ps-v2 .ps-scene > .ps-far { height: 56.25%; } html[data-theme='neon'] .ps-v2 .ps-scene > .ps-mid { height: 46.875%; } html[data-theme='neon'] .ps-v2 .ps-scene > .ps-near { height: 37.5%; } html[data-theme='neon'] .ps-v2 .ps-scene > .ps-ground { height: 18.75%; } html[data-theme='neon'] .ps-v2 .ps-scene > .ps-front { height: 21.875%; } html[data-theme='neon'] .ps-v2 .ps-scene > .ps-camp { background-size: cover; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > i { animation-name: nx-ps-pan; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-camp { animation: none; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-sky { animation-duration: 420s; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-far { animation-duration: 150s; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-mid { animation-duration: 80s; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-near { animation-duration: 36s; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-ground { animation-duration: 18s; } html[data-theme='neon'] .ps-v2.ps-moving .ps-scene > .ps-front { animation-duration: 11s; } @keyframes nx-ps-pan { to { background-position-x: calc(var(--tile) * -1); } } html[data-theme='neon'] .ps-v2 .ps-fronts { z-index: 1; transition: opacity 0.6s; } html[data-theme='neon'] .ps-v2.ps-camping .ps-fronts { opacity: 0; } html[data-theme='neon'] .ps-v2 .ps-label { position: relative; z-index: 2; padding: 5px 10px; border-top: 1px solid var(--line-2); background: #15111b; font: 400 13px/1.3 var(--nx-ui); } /* a patrol that's out: the road across the center, under it what's going on and the side's tabs */ html[data-theme='neon'] .pt-dash { padding: 8px !important; } html[data-theme='neon'] .pt-hero { border: 1px solid var(--line-2); } html[data-theme='neon'] .pt-hero .patrol-stage-wrap { margin: 0; border: 0; box-shadow: none; } html[data-theme='neon'] .pt-hero-tag { z-index: 3; } html[data-theme='neon'] .pt-out { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 10px; align-items: start; } html[data-theme='neon'] .pt-out-main { min-width: 0; } /* the Supplies' pictures */ html[data-theme='neon'] .pt-sup-pic { flex: none; image-rendering: auto; } html[data-theme='neon'] .pt-more > .panel > .h2:first-child { display: none; } /* (the tab already says it) */ html[data-theme='neon'] .pt-route-info { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 1px; padding: 4px 8px 5px; } html[data-theme='neon'] .pt-route-info b { width: 100%; font: 700 14px/1.2 var(--nx-cap); } html[data-theme='neon'] .pt-coins { font-size: 12px; } html[data-theme='neon'] .pt-slot { aspect-ratio: auto; height: 62px; } html[data-theme='neon'].nx-dock-on .pt-route-art { max-height: 62px; object-fit: cover; } html[data-theme='neon'] .pt-slot canvas { width: 40px !important; height: 40px !important; } html[data-theme='neon'] .pt-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; } /* a list of champions that can grow (ui/neon/kit.js champList): it scrolls in its own box, what's around it stays */ html[data-theme='neon'] .nx-fill { height: 100%; min-height: 0; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-fill > * { flex: none; } html[data-theme='neon'] .nx-champs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } html[data-theme='neon'] input.nx-input.nx-champ-search { flex: none; align-self: flex-start; width: min(280px, 100%); height: 30px; padding: 0 10px; border-radius: 0; font: 400 13px var(--nx-ui); } html[data-theme='neon'] .nx-champs-box { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 2px 2px; } html[data-theme='neon'] .nx-champs-box [hidden] { display: none !important; } html[data-theme='neon'] .nx-fill > .nx-gx-team { flex: 1; min-height: 0; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-slots { display: flex; gap: 6px; } html[data-theme='neon'] .nx-slot { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px dashed var(--line-3); background: rgba(0, 0, 0, 0.25); cursor: default; transition: border-color 0.15s, box-shadow 0.15s; } html[data-theme='neon'] .nx-slot.full { border: 1px solid var(--gold-2); background: #1b1722; cursor: pointer; animation: pop-in 0.2s; } html[data-theme='neon'] .nx-slot.full:hover { border-color: var(--bad); box-shadow: 0 0 8px rgba(255, 90, 110, 0.4); } html[data-theme='neon'] .nx-slot canvas { width: 38px !important; height: 38px !important; } @media (min-width: 1101px) { /* the Patrol and Practice fill their place, their lists taking what's left */ html[data-theme='neon'].nx-lobby .screen-patrol .screen-body > * { height: 100%; } html[data-theme='neon'].nx-lobby .pt-screen { height: 100%; } html[data-theme='neon'].nx-lobby .pt-plan { height: 100%; grid-template-rows: minmax(0, 1fr); } html[data-theme='neon'].nx-lobby .pt-main { min-height: 0; height: 100%; display: flex; flex-direction: column; } html[data-theme='neon'].nx-lobby .pt-main > .panel { flex: none; } html[data-theme='neon'].nx-lobby .pt-main > .pt-squad { flex: 1; min-height: 0; display: flex; flex-direction: column; } html[data-theme='neon'].nx-lobby .pt-squad > * { flex: none; } html[data-theme='neon'].nx-lobby .pt-squad > .nx-champs { flex: 1; } html[data-theme='neon'].nx-lobby .pt-sidecol { min-height: 0; height: 100%; display: flex; flex-direction: column; } html[data-theme='neon'].nx-lobby .practice-setup { display: flex; flex-direction: column; } html[data-theme='neon'].nx-lobby .practice-setup > * { flex: none; } html[data-theme='neon'].nx-lobby .practice-setup > .practice-pick { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); } html[data-theme='neon'].nx-lobby .practice-pick > .panel { min-height: 0; display: flex; flex-direction: column; } html[data-theme='neon'].nx-lobby .practice-pick > .panel > * { flex: none; } html[data-theme='neon'].nx-lobby .practice-pick > .panel > .nx-champs { flex: 1; } } @media (max-width: 1100px) { html[data-theme='neon'] .pt-squad .nx-champs-box, html[data-theme='neon'] .practice-pick .nx-champs-box { max-height: 300px; } } html[data-theme='neon'] .pt-summary .pt-sum-row { font-size: 13px; } html[data-theme='neon'] .pt-summary p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } /* the Raid */ html[data-theme='neon'] .raid-hero :is(.title) { font-size: 24px; } html[data-theme='neon'] .raid-hero p { margin: 0; } html[data-theme='neon'] .raid-hero canvas { width: 60px !important; height: 60px !important; } html[data-theme='neon'].nx-lobby .raid-hero { padding: 8px 14px; } html[data-theme='neon'].nx-lobby .screen-raid .raid-tabs { margin-bottom: 8px; } html[data-theme='neon'].nx-lobby .screen-raid .panel p { margin: 2px 0; } @media (hover: hover) { html[data-theme='neon'] .nx-opt:not(.on):hover { border-color: var(--gold-2); color: #f3ebde; background: #1d1825; } html[data-theme='neon'] .nx-opts.pics .nx-opt:hover img { filter: none; scale: 1.08; } html[data-theme='neon'] .nx-chap:not(.on):hover { border-color: var(--gold-2); } } @media (max-width: 1100px) { html[data-theme='neon'] :is(.nx-setup, .nx-gx, .nx-two) { grid-template-columns: minmax(0, 1fr); } html[data-theme='neon'] .nx-cols { columns: 1; } html[data-theme='neon'] .pt-plan, html[data-theme='neon'] .pt-out { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { html[data-theme='neon'] .nx-camp-path { flex-wrap: wrap; justify-content: flex-start; gap: 6px; } html[data-theme='neon'] .nx-camp-path .camp-node { flex: 1 1 40%; } html[data-theme='neon'] .nx-camp-path .camp-link { display: none; } html[data-theme='neon'] .nx-chaps { grid-template-columns: minmax(0, 1fr); } } /* ================================================================== a screen's head: kicker, title, ornament | its controls */ html[data-theme='neon'] .nx-head { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 22px; } html[data-theme='neon'] .nx-head .grow { flex: 1; min-width: 0; } html[data-theme='neon'] .nx-ornament { height: 12px; display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 14px 0 0; } html[data-theme='neon'] .nx-ornament::before, html[data-theme='neon'] .nx-ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); } html[data-theme='neon'] .nx-ornament i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); box-shadow: 0 0 8px rgba(245, 200, 98, 0.5); } /* ================================================================== Play: a client's lobby. Tabs and a list on the left, the chosen mode big on the right, one yellow PLAY */ html[data-theme='neon'] .nx-play { zoom: var(--nx-zoom); display: grid; grid-template-columns: var(--nx-rail) minmax(0, 1fr); width: 100%; max-width: calc(var(--nx-page) / var(--nx-zoom)); height: 100%; margin: 0 auto; background: var(--nx-frame); box-shadow: 0 0 0 1px var(--line-1), 0 0 70px rgba(0, 0, 0, 0.65); color: #d9d2c6; font: 400 13px/1.35 var(--nx-ui); } html[data-theme='neon'] .nx-play button { font-family: inherit; color: inherit; cursor: pointer; } html[data-theme='neon'] .nx-pl-rail { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--nx-panel); border-right: 1px solid var(--line-1); color: #d9d2c6; font: 400 13px/1.35 var(--nx-ui); animation: nx-from-left 0.45s var(--ease-out) both; } html[data-theme='neon'] .nx-pl-rail button { font-family: inherit; color: inherit; cursor: pointer; } html[data-theme='neon'] .nx-pl-rail.still, html[data-theme='neon'] .nx-pl-rail.still .nx-mode { animation: none; } /* a mode open from Play: its own screen fills what's beside the list, which stays where it was */ html[data-theme='neon'] .nx-pl-rail.fixed { position: fixed; z-index: 12; zoom: var(--nx-zoom); left: calc(var(--nx-col-left) / var(--nx-zoom)); top: calc(var(--safe-t) + var(--nx-bar)); bottom: calc(var(--hub-bottom-h, 0px) / var(--nx-zoom, 1)); width: var(--nx-rail); box-shadow: 0 0 0 1px var(--line-1), 0 0 70px rgba(0, 0, 0, 0.65); clip-path: inset(0 0 -100px -100px); } /* (the column's shadow, as on Home; none on the mode beside it) */ @media (min-width: 1001px) { html[data-theme='neon'].nx-lobby #app > .screen.win { left: calc(var(--nx-col-left) + var(--nx-rail) * var(--nx-zoom)); right: var(--nx-col-left); background: linear-gradient(180deg, rgba(8, 6, 11, 0.95) 0, rgba(8, 6, 11, 0.9) 28%, rgba(8, 6, 11, 0.66) 54%, rgba(8, 6, 11, 0.88) 100%), var(--nx-place, none) center / cover #08060b; box-shadow: 0 0 0 1px var(--line-1), 0 0 70px rgba(0, 0, 0, 0.65); } html[data-theme='neon'].nx-lobby #app > .screen.win > * { zoom: var(--nx-zoom); max-width: none; } } @media (min-width: 1001px) { /* never taller than the column's shape, a mode beside the list too: nothing jumps going from one to the other */ html[data-theme='neon'] :is(.nx-home, .nx-play, .nx-pl-rail.fixed) { max-height: calc(var(--nx-page) / var(--nx-shape) / var(--nx-zoom)); } html[data-theme='neon'].nx-lobby #app > .screen.win { max-height: calc(var(--nx-page) / var(--nx-shape)); } /* (the very same page as behind Home and Play: the same box and dim as their screen, or it jumps on opening a mode) */ html[data-theme='neon']:is(.nx-lobby, .nx-framed) #app::before { content: ''; position: fixed; inset: calc(var(--safe-t) + var(--hub-bar-h)) 0 0; pointer-events: none; background: var(--nx-dim); } } /* over a mode's place: nothing lets it through its words. What's locked stays solid, only what's on it dims */ @media (min-width: 1001px) { html[data-theme='neon'].nx-lobby .nx-chap, html[data-theme='neon'].nx-lobby .camp-node.locked, html[data-theme='neon'].nx-lobby .gx-card.locked { background: var(--nx-panel); opacity: 1; } html[data-theme='neon'].nx-lobby .nx-chap.on { background: linear-gradient(rgba(245, 200, 98, 0.1), rgba(245, 200, 98, 0.1)), var(--nx-panel); } html[data-theme='neon'].nx-lobby :is(.nx-chap, .camp-node, .gx-card).locked > * { opacity: 0.7; } } /* ================================================================== the client's own pages (Heroes first): in the column, nothing but their lists and panels scrolling, nothing coming in */ @media (min-width: 1001px) { html[data-theme='neon'] { --nx-roster: 470px; } html[data-theme='neon'] #app > .screen.win.nx-client { left: var(--nx-col-left); right: var(--nx-col-left); max-height: calc(var(--nx-page) / var(--nx-shape)); display: flex; flex-direction: column; background: var(--nx-frame); box-shadow: 0 0 0 1px var(--line-1), 0 0 70px rgba(0, 0, 0, 0.65); color: #d9d2c6; font: 400 13px/1.35 var(--nx-ui); animation: none; } html[data-theme='neon'] #app > .screen.win.nx-client > * { zoom: var(--nx-zoom); max-width: none; flex: none; } html[data-theme='neon'] #app > .screen.win.nx-client > .screen-head { display: none; } /* (the bar says where you are, and has the wallet) */ html[data-theme='neon'] #app > .screen.win.nx-client > div:not(.screen-body) { padding: 0 !important; } html[data-theme='neon'] #app > .screen.win.nx-client > .screen-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; } html[data-theme='neon'] .nx-client > div > .tabs { min-height: 44px; margin: 0; padding: 0 12px; } html[data-theme='neon'] .nx-client .screen-body > .max { height: 100%; max-width: none; margin: 0; } /* the list on the left, the chosen one beside it: at the same place on every tab */ html[data-theme='neon'] .nx-client .nx-deck { display: grid; grid-template-columns: var(--nx-roster) minmax(0, 1fr); gap: 0; height: 100%; align-items: stretch; color: inherit; font: inherit; } html[data-theme='neon'] .nx-client .nx-deck-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--nx-panel); border-right: 1px solid var(--line-1); } html[data-theme='neon'] .nx-client .nx-toolbar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; padding: 12px 12px 8px; } html[data-theme='neon'] .nx-client .nx-toolbar > .grow { display: none; } html[data-theme='neon'] .nx-client .nx-toolbar input.nx-input { width: 100%; height: 32px; padding: 0 10px; border-radius: 0; font: 400 13px var(--nx-ui); } html[data-theme='neon'] .nx-client .nx-toolbar > .nx-select { grid-column: 2; grid-row: 1; width: auto; height: 32px; padding-top: 0; padding-bottom: 0; border-radius: 0; font: 400 13px var(--nx-ui); } html[data-theme='neon'] .nx-client .nx-chips { grid-column: 1; grid-row: 2; gap: 2px; flex-wrap: nowrap; } html[data-theme='neon'] .nx-client .nx-chip { height: 26px; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: #a79e91; font: 700 12px/1 var(--nx-cap); letter-spacing: 0.06em; box-shadow: none; transition: color 0.15s, border-color 0.15s; } html[data-theme='neon'] .nx-client .nx-chip:hover { color: #f3ebde; border-color: rgba(245, 200, 98, 0.45); } html[data-theme='neon'] .nx-client .nx-chip.on { color: var(--gold); border-color: var(--gold); background: none; box-shadow: none; } html[data-theme='neon'] .nx-client .nx-owned { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px; } html[data-theme='neon'] .nx-client .nx-owned b { font: 700 13px/1 var(--nx-ui); color: var(--gold); } /* the roster: however many there are, it scrolls in its own box */ html[data-theme='neon'] .nx-client .nx-cgrid { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 106px; gap: 6px; padding: 4px 12px 12px; align-content: start; } html[data-theme='neon'] .nx-client .nx-ccard { aspect-ratio: auto; border: 1px solid var(--line-1); border-radius: 0; background: #17131d; box-shadow: none; animation: none; transition: transform 0.14s var(--ease-out), border-color 0.14s, background 0.14s; } html[data-theme='neon'] .nx-client .nx-ccard .pic { top: 8px; width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); } html[data-theme='neon'] .nx-client .nx-ccard .foot { padding: 0 3px 6px; background: none; text-align: center; } html[data-theme='neon'] .nx-client .nx-ccard .foot b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 12px/1.1 var(--nx-cap); color: #d9d2c6; } html[data-theme='neon'] .nx-client .nx-ccard .foot :is(small, .stars) { display: none; } html[data-theme='neon'] .nx-client .nx-ccard .tier { left: 3px; top: 3px; min-width: 0; height: auto; padding: 1px 3px; border: 0; border-radius: 0; background: none; box-shadow: none; font: 700 11px/1 var(--nx-cap); color: var(--gold); } html[data-theme='neon'] .nx-client .nx-ccard .facs { right: 3px; top: 3px; gap: 1px; } html[data-theme='neon'] .nx-client .nx-ccard .facs i { width: 14px; height: 14px; border: 0; background: none; font-size: 9px; } html[data-theme='neon'] .nx-client .nx-ccard:hover { transform: translateY(-2px); border-color: var(--line-3); background: #1f1a27; box-shadow: none; } html[data-theme='neon'] .nx-client .nx-ccard:hover .pic { transform: translateX(-50%) translateY(-2px) scale(1.06); } html[data-theme='neon'] .nx-client .nx-ccard:active { transform: scale(0.97); } html[data-theme='neon'] .nx-client .nx-ccard.sel { border-color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.16), rgba(245, 200, 98, 0.03) 60%), #17131d; box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.5); } html[data-theme='neon'] .nx-client .nx-ccard.sel .foot b { color: var(--gold); } html[data-theme='neon'] .nx-client .nx-none { grid-column: 1 / -1; padding: 24px 0; text-align: center; } /* the chosen one */ html[data-theme='neon'] .nx-client .nx-detail { position: relative; top: auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden; } html[data-theme='neon'] .nx-dt-stage { flex: 0 0 44%; min-height: 0; } html[data-theme='neon'] .nx-dt-info { position: absolute; z-index: 2; left: 24px; top: 0; bottom: 0; width: min(46%, 430px); display: flex; flex-direction: column; justify-content: center; } html[data-theme='neon'] .nx-dt-fig { position: absolute; z-index: 1; left: 58%; right: 6%; bottom: 6px; display: flex; justify-content: center; } html[data-theme='neon'] .nx-client .nx-detail .inv-tabs { flex: none; margin: 0; padding: 0 12px; } html[data-theme='neon'] .nx-client .nx-dt-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 14px; } /* (the abilities as tall as what's beside them, sharing it evenly) */ html[data-theme='neon'] .nx-abs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: stretch; } html[data-theme='neon'] .nx-abs > .nx-ab { flex: 1 1 0; align-items: center; } /* the panes under the champion: no second frame or heading, what's long in two columns */ html[data-theme='neon'] .nx-client .nx-dt-pane > .panel { padding: 0; border: 0; border-image: none; background: none; box-shadow: none; } html[data-theme='neon'] .nx-client .nx-dt-pane > .panel:not(.mastery-path) > .h2:first-child { display: none; } /* Equipment: what it wears on the left, all that fits the slot on the right, only that list scrolling */ html[data-theme='neon'] .nx-client .nx-dt-pane.nx-own-scroll { overflow: hidden; } html[data-theme='neon'] .nx-kit { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; height: 100%; min-height: 0; } html[data-theme='neon'] .nx-kit-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto; } html[data-theme='neon'] .nx-kit-list { min-width: 0; min-height: 0; overflow-y: auto; } html[data-theme='neon'] .nx-client .it-head { font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: none; } html[data-theme='neon'] .nx-abs-side .nx-sec { flex-wrap: wrap; gap: 2px 8px; } html[data-theme='neon'] .nx-abs-side .nx-sec .meta { flex-basis: 100%; font: 400 12px/1.3 var(--nx-ui); letter-spacing: 0; text-transform: none; color: #a79e91; } html[data-theme='neon'] .nx-client .nx-dt-pane .row.wrap { gap: 6px; } html[data-theme='neon'] .nx-client .nx-dt-pane .row.wrap > .card { width: 108px; height: 112px; min-width: 0; padding: 8px 4px 6px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: #17131d; box-shadow: none; transition: transform 0.14s var(--ease-out), border-color 0.14s, background 0.14s; } html[data-theme='neon'] .nx-client .nx-dt-pane .row.wrap > .card:hover { transform: translateY(-2px); border-color: var(--line-3); background: #1f1a27; } html[data-theme='neon'] .nx-client .nx-dt-pane .row.wrap > .card.selected { border-color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.16), rgba(245, 200, 98, 0.03) 60%), #17131d; box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.5); } html[data-theme='neon'] .nx-client .nx-dt-pane .row.wrap > .card.selected::after { display: none; } html[data-theme='neon'] .nx-client .nx-dt-pane .row.wrap > .card .name { width: 100%; font: 700 11px/1.15 var(--nx-cap); text-align: center; white-space: normal; } /* filters, on every tab: words with a gold line, plain selects */ html[data-theme='neon'] .nx-client .chip-btn { height: 26px; min-height: 0; padding: 0 7px; border: 0; border-bottom: 2px solid transparent; border-image: none; border-radius: 0; background: none; box-shadow: none; color: #a79e91; font: 700 12px/1 var(--nx-cap); letter-spacing: 0.04em; filter: none; transform: none; } html[data-theme='neon'] .nx-client .chip-btn::before, html[data-theme='neon'] .nx-client .chip-btn::after { display: none; } html[data-theme='neon'] .nx-client .chip-btn:hover:not(:disabled) { color: #f3ebde; background: none; border-bottom-color: rgba(245, 200, 98, 0.45); filter: none; transform: none; } html[data-theme='neon'] .nx-client .chip-btn.on { color: var(--gold); background: none; border-bottom-color: var(--gold); box-shadow: none; } html[data-theme='neon'] .nx-client .it-pick { display: flex; align-items: center; gap: 5px; font: 400 12px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-client .it-filters .it-select { height: 30px; padding-top: 0; padding-bottom: 0; border-radius: 0; font: 400 13px var(--nx-ui); } /* items */ html[data-theme='neon'] .nx-client .nx-deck-main > .it-filters { flex: none; align-items: center; gap: 2px 4px; margin: 0; padding: 12px 12px 8px; } html[data-theme='neon'] .nx-client .nx-deck-main > .it-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 106px; gap: 6px; row-gap: 6px; padding: 4px 12px 12px; align-content: start; } html[data-theme='neon'] .nx-client .it-tile { position: relative; min-height: 0; padding: 8px 3px 4px; border: 1px solid var(--line-1); border-radius: 0; background: #17131d; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden; transition: transform 0.14s var(--ease-out), border-color 0.14s, background 0.14s; } html[data-theme='neon'] .nx-client .it-tile:hover { transform: translateY(-2px); border-color: var(--line-3); background: #1f1a27; box-shadow: none; } html[data-theme='neon'] .nx-client .it-tile:active { transform: scale(0.97); } html[data-theme='neon'] .nx-client .it-tile.selected { border-color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.16), rgba(245, 200, 98, 0.03) 60%), #17131d; box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.5); } html[data-theme='neon'] .nx-client .it-tile .it-perk, html[data-theme='neon'] .nx-client .it-tile .eq-tag { display: none; } html[data-theme='neon'] .nx-client .it-tile .it-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; text-align: center; font: 700 11px/1.1 var(--nx-cap); } html[data-theme='neon'] .nx-client .it-tile .it-stack { position: absolute; left: 3px; top: 3px; width: auto; height: auto; min-width: 0; padding: 0 2px; border: 0; background: none; box-shadow: none; transform: none; } html[data-theme='neon'] .nx-client .it-tile .it-stack:not(.more) { display: none; } /* (only when there's more than one) */ html[data-theme='neon'] .nx-client .it-tile .it-stack b { font: 700 11px/1 var(--nx-ui); color: var(--gold); text-shadow: none; } html[data-theme='neon'] .nx-client .it-tile .it-stack::before, html[data-theme='neon'] .nx-client .it-tile .it-stack::after { display: none; } html[data-theme='neon'] .nx-client .it-tile .it-eq { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; } html[data-theme='neon'] .nx-it-stage { flex-basis: 40%; } html[data-theme='neon'] .nx-it-stage .nx-dt-fig { top: 0; bottom: 0; align-items: center; } html[data-theme='neon'] .nx-client .nx-it-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-content: start; } html[data-theme='neon'] .nx-client .nx-it-body > :is(.it-compare, .row.wrap) { grid-column: 1 / -1; } /* mascots, skins, looks: the same two columns from the browser's own pieces */ html[data-theme='neon'] .nx-client :is(.nx-tab-mascots, .nx-tab-skins, .nx-tab-looks) { display: grid; grid-template-columns: var(--nx-roster) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } html[data-theme='neon'] .nx-client .ib-bar { grid-column: 1; grid-row: 1; gap: 8px; margin: 0; padding: 12px 12px 8px; background: var(--nx-panel); border-right: 1px solid var(--line-1); } html[data-theme='neon'] .nx-client .ib-chips { gap: 2px 4px; } html[data-theme='neon'] .nx-client .ib-tools { gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-client .ib-tools { flex-wrap: wrap; } html[data-theme='neon'] .nx-client .ib-tools > .grow { display: none; } html[data-theme='neon'] .nx-client .ib-tools > .btn { flex: 1 0 100%; order: 3; } html[data-theme='neon'] .nx-client .ib-pick { flex: 1 1 28%; min-width: 0; flex-direction: column; align-items: stretch; gap: 2px; font: 400 11px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-client .ib-pick .it-select { width: 100%; height: 30px; border-radius: 0; font: 400 13px var(--nx-ui); } html[data-theme='neon'] .nx-client .ib-search { flex: 1 1 60%; min-width: 0; height: 30px; border-radius: 0; } html[data-theme='neon'] .nx-client .ib-layout { display: contents; } html[data-theme='neon'] .nx-client .ib-main { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; gap: 4px; padding: 0 12px 12px; background: var(--nx-panel); border-right: 1px solid var(--line-1); } html[data-theme='neon'] .nx-client .ib-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 112px; gap: 6px; } html[data-theme='neon'] .nx-client .ib-tile .ib-pic { width: 60px; height: 60px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; box-shadow: none; overflow: hidden; } html[data-theme='neon'] .nx-client .ib-tile .ib-pic > :is(canvas, img) { max-width: 60px; max-height: 60px; } html[data-theme='neon'] .nx-client .ib-tile { min-height: 0; padding: 6px 3px 4px; border: 1px solid var(--line-1); border-radius: 0; background: #17131d; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; text-align: center; transition: transform 0.14s var(--ease-out), border-color 0.14s, background 0.14s; } html[data-theme='neon'] .nx-client .ib-tile:hover { transform: translateY(-2px); border-color: var(--line-3); background: #1f1a27; box-shadow: none; } html[data-theme='neon'] .nx-client .ib-tile:active { transform: scale(0.97); } html[data-theme='neon'] .nx-client .ib-tile.selected { border-color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.16), rgba(245, 200, 98, 0.03) 60%), #17131d; box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.5); } html[data-theme='neon'] .nx-client .ib-tile .ib-name { flex: none; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 11px/1.2 var(--nx-cap); } html[data-theme='neon'] .nx-client .ib-tile .ib-tags { flex: none; } html[data-theme='neon'] .nx-client .ib-tile .ib-tag.muted { display: none; } /* (its page says it) */ html[data-theme='neon'] .nx-client .ib-tile .ib-tag { max-width: 76px; overflow: hidden; padding: 1px 4px; white-space: nowrap; text-overflow: ellipsis; font: 600 10px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-client .ib-tile .ib-sub { display: none; } html[data-theme='neon'] .nx-client .ib-tile .ib-tags { justify-content: center; } html[data-theme='neon'] .nx-client .ib-detail { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; min-height: 0; margin: 0; padding: 18px 40px; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; background: linear-gradient(180deg, rgba(8, 6, 11, 0.5), rgba(8, 6, 11, 0.9) 70%), var(--nx-place, none) center / cover #0b0910; } html[data-theme='neon'] .nx-client .ib-detail > * { width: min(100%, 460px); flex: none; } html[data-theme='neon'] .nx-client .ib-hero { display: flex; flex-direction: column; align-items: center; text-align: center; } html[data-theme='neon'] .nx-client .ib-big { width: auto; height: auto; padding: 0; border: 0; background: none; box-shadow: none; display: flex; justify-content: center; overflow: visible; } html[data-theme='neon'] .nx-client .ib-big canvas, html[data-theme='neon'] .nx-client .ib-big img { max-width: none; max-height: none; } html[data-theme='neon'] .nx-client .ib-detail p { text-shadow: 0 1px 3px #000; } html[data-theme='neon'] .nx-client .ib-block { padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 0; background: rgba(8, 6, 11, 0.86); box-shadow: none; } html[data-theme='neon'] .nx-client .ib-title { font: 700 30px/1.05 var(--nx-cap); } } /* a plain sheet: what it is on the left, what it says on the right, no boxes or colours */ html[data-theme='neon'] .nx-sheet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; font: 400 13px/1.35 var(--nx-ui); } html[data-theme='neon'] .nx-sheet dt { color: #8f877b; } html[data-theme='neon'] .nx-sheet dd { margin: 0; color: #e4ddd0; } html[data-theme='neon'] .nx-sheet dd em { margin-left: 6px; font-style: normal; color: #a79e91; } html[data-theme='neon'] .nx-sheet .dt-label { white-space: nowrap; } /* what must stand out on a sheet: in a box. How many are free; a level, in that level's colour */ html[data-theme='neon'] .nx-have { display: inline-flex; align-items: center; gap: 8px; } html[data-theme='neon'] .nx-box { padding: 2px 7px; border: 1px solid var(--gold-2); background: rgba(245, 200, 98, 0.1); color: var(--gold); font: 600 11px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-box.off { border-color: var(--line-2); background: none; color: #8f877b; } html[data-theme='neon'] .nx-drops { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; } html[data-theme='neon'] .nx-drop { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } html[data-theme='neon'] .nx-drop .gx-diff { padding: 2px 7px; border: 0; font: 700 11px/1.2 var(--nx-ui); } /* a champion's reach, beside its abilities: one gold, nothing else asking to be looked at */ html[data-theme='neon'] .nx-abs-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html[data-theme='neon'] .nx-abs-side p { margin: 0; font-size: 12px; line-height: 1.35; color: #a79e91; } html[data-theme='neon'] .nx-abs-side .nx-sheet { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-1); } html[data-theme='neon'] .nx-detail .nx-abs-side .reach-set { display: flex; gap: 14px; margin: 2px 0 0; } html[data-theme='neon'] .nx-detail .nx-abs-side .reach-spot { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 11px/1 var(--nx-ui); color: #8f877b; } html[data-theme='neon'] .nx-detail .nx-abs-side .reach-grid { grid-template-columns: repeat(3, 13px); gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-detail .nx-abs-side .reach-grid i { width: 13px; height: 13px; background: rgba(255, 255, 255, 0.07); box-shadow: none; } html[data-theme='neon'] .nx-detail .nx-abs-side .reach-grid i.hit { background: rgba(245, 200, 98, 0.6); } html[data-theme='neon'] .nx-detail .nx-abs-side .reach-grid i.me { background: #f3ebde; box-shadow: none; } /* ================================================================== the Shop's pages, on every size */ html[data-theme='neon'] .nx-t-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } html[data-theme='neon'] .nx-t-pics > :is(canvas, img) { width: 52px !important; height: 52px !important; object-fit: contain; image-rendering: pixelated; } html[data-theme='neon'] .nx-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-theme='neon'] .nx-pay .btn { min-height: 38px; gap: 10px; } html[data-theme='neon'] .nx-pay .btn > .row, html[data-theme='neon'] .nx-pay .btn > .row > .row { gap: 4px; } html[data-theme='neon'] .nx-pay .btn :is(canvas, img) { width: 16px; height: 16px; } /* an opening or a crafting playing inside its page */ html[data-theme='neon'] .cf-stage.in-box { z-index: 6; background: #07050b; } html[data-theme='neon'] .cf-stage.in-box .cf-tap { padding-bottom: 84px; } html[data-theme='neon'] .nx-deck-main[inert] { opacity: 0.45; transition: opacity 0.2s; } html[data-theme='neon'] .cf-made .nx-hero { animation: none; } html[data-theme='neon'] .cf-made :is(canvas, img) { image-rendering: pixelated; } /* what a tile says about itself: one word, in gold */ html[data-theme='neon'] .nx-client .ib-tile .ib-tag:is(.teal, .gold) { border: 1px solid var(--gold-2); border-radius: 0; background: rgba(245, 200, 98, 0.1); color: var(--gold); } /* ================================================================== Quests */ html[data-theme='neon'] .nx-tab-quests { display: flex; flex-direction: column; gap: 10px; } html[data-theme='neon'] .nx-q-stage { flex: 1 1 auto; min-height: 330px; } html[data-theme='neon'] .nx-q-stage > .art { animation: none; scale: 1.05; } html[data-theme='neon'] .nx-q-stage::after { background: linear-gradient(0deg, rgba(8, 7, 12, 0.97) 0, rgba(8, 7, 12, 0.86) 46%, rgba(8, 7, 12, 0.1) 78%), linear-gradient(90deg, rgba(8, 7, 12, 0.9), rgba(8, 7, 12, 0.5) 34%, transparent 58%); } html[data-theme='neon'] .nx-q-stage .nx-dt-info { top: 16px; bottom: auto; justify-content: flex-start; width: min(46%, 470px); } html[data-theme='neon'] .nx-q-stage .nx-dt-info h2 { margin-bottom: 4px; } html[data-theme='neon'] .nx-wk-pct { display: flex; align-items: center; gap: 10px; } html[data-theme='neon'] .nx-wk-pct b { font: 700 34px/1 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-wk-pct .nx-box { display: inline-flex; align-items: center; gap: 3px; } html[data-theme='neon'] .nx-wk-pct .nx-box :is(canvas, img, svg) { width: 14px; height: 14px; } html[data-theme='neon'] .nx-q-stage .nx-dt-fig { left: auto; right: 3%; top: 8px; bottom: auto; } html[data-theme='neon'] .nx-q-stage .nx-hero-pet { position: relative; right: auto; bottom: auto; } html[data-theme='neon'] .nx-wk { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 10px; display: flex; flex-direction: column; gap: 8px; } html[data-theme='neon'] .nx-wk .wk-bar { height: 112px; margin: 0 76px 0 0; } html[data-theme='neon'] .nx-wk .wk-track { top: 34px; height: 6px; border: 0; background: rgba(255, 255, 255, 0.14); box-shadow: none; } html[data-theme='neon'] .nx-wk .wk-fill { background: var(--gold); box-shadow: 0 0 10px rgba(245, 200, 98, 0.7); } html[data-theme='neon'] .nx-wk .wk-node { gap: 3px; border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-wk .wk-chest { width: 76px; height: 76px; border: 0; border-image: none; background: none; box-shadow: none; filter: grayscale(0.7) brightness(0.65); transition: transform 0.14s var(--ease-out); } html[data-theme='neon'] .nx-wk .wk-chest :is(canvas, img) { width: 72px; height: 72px; object-fit: contain; } html[data-theme='neon'] .nx-wk .wk-node.ready .wk-chest { filter: drop-shadow(0 0 10px rgba(245, 200, 98, 0.9)); box-shadow: none; animation: wk-hop 1.2s steps(2) infinite; } html[data-theme='neon'] .nx-wk .wk-node.ready:hover .wk-chest { transform: scale(1.1); } html[data-theme='neon'] .nx-wk .wk-node.claimed .wk-chest { filter: grayscale(0.2) brightness(0.8); box-shadow: none; } html[data-theme='neon'] .nx-wk .wk-check { right: 2px; bottom: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--gold); color: #1a1206; box-shadow: none; font: 700 12px/18px var(--nx-ui); } html[data-theme='neon'] .nx-wk .wk-days { gap: 6px; } html[data-theme='neon'] .nx-wk .wk-day { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 1px solid var(--line-1); background: rgba(8, 7, 12, 0.8); box-shadow: none; } html[data-theme='neon'] .nx-wk .wk-day b { font: 600 12px/1 var(--nx-ui); color: #a79e91; } html[data-theme='neon'] .nx-wk .wk-day .nx-steps { flex: 0 1 54px; height: 8px; } html[data-theme='neon'] .nx-wk .wk-day.today { border-color: var(--gold); box-shadow: none; } html[data-theme='neon'] .nx-wk .wk-day.today b { color: var(--gold); } html[data-theme='neon'] .nx-wk .wk-day.later { opacity: 0.55; } html[data-theme='neon'] .nx-wk .wk-day:not(.today) .nx-steps > i.next { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); animation: none; } /* (only today has a next one) */ html[data-theme='neon'] .nx-wk .qchip, html[data-theme='neon'] .nx-quests .qchip { gap: 3px; padding: 1px 6px; border: 0; border-radius: 0; background: rgba(8, 7, 12, 0.8); box-shadow: none; color: #e4ddd0; font: 700 12px/1.3 var(--nx-ui); } html[data-theme='neon'] .nx-quests .qchip.coins, html[data-theme='neon'] .nx-wk .qchip.coins { color: var(--gold); } html[data-theme='neon'] .nx-quests { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px; } html[data-theme='neon'] .nx-quests .quest-card { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line-1); border-radius: 0; background: var(--nx-panel); box-shadow: none; transition: border-color 0.15s; } html[data-theme='neon'] .nx-quests .quest-card:hover { border-color: var(--line-3); } html[data-theme='neon'] .nx-quests .quest-card.done { border-color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.12), rgba(245, 200, 98, 0.02) 60%), var(--nx-panel); } html[data-theme='neon'] .nx-quests .quest-card.claimed { opacity: 1; } /* a quest claimed: the card jumps, light runs across it, its picture is stamped, its rewards go up to the wallet */ html[data-theme='neon'] .nx-quests .quest-card.claiming { position: relative; overflow: hidden; z-index: 2; border-color: var(--gold); animation: nx-q-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); } html[data-theme='neon'] .nx-quests .quest-card.claiming::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 232, 170, 0.5) 50%, transparent 70%); animation: nx-q-sweep 0.62s ease-out both; } html[data-theme='neon'] .nx-quests .quest-card.claiming .qc-pic { animation: nx-q-stamp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); box-shadow: 0 0 18px 2px rgba(255, 215, 104, 0.6); } html[data-theme='neon'] .nx-quests .quest-card.claiming .qchip { animation: nx-q-up 0.7s ease-in both; } html[data-theme='neon'] .nx-quests .quest-card.claiming .qchip:nth-child(2) { animation-delay: 0.07s; } html[data-theme='neon'] .nx-quests .quest-card.claiming .qchip:nth-child(3) { animation-delay: 0.14s; } html[data-theme='neon'] .nx-quests .quest-card.claiming .nx-bar > i { box-shadow: 0 0 10px 1px rgba(255, 215, 104, 0.9); } html[data-theme='neon'] .nx-quests .quest-card.claiming .qc-go { filter: brightness(1.15); } @keyframes nx-q-pop { 0% { transform: scale(1); } 30% { transform: scale(1.035) translateY(-3px); box-shadow: 0 0 26px 2px rgba(255, 215, 104, 0.45); } 100% { transform: none; } } @keyframes nx-q-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } } @keyframes nx-q-stamp { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-6deg); filter: brightness(1.6); } 100% { transform: none; } } @keyframes nx-q-up { 0% { transform: none; opacity: 1; } 25% { transform: translateY(2px) scale(1.15); opacity: 1; } 100% { transform: translateY(-34px) scale(0.9); opacity: 0; } } html[data-theme='neon'].reduce-motion .nx-quests .quest-card.claiming, html[data-theme='neon'].reduce-motion .nx-quests .quest-card.claiming * { animation: none; } html[data-theme='neon'] .nx-quests .quest-card.claimed > * { opacity: 0.55; } html[data-theme='neon'] .nx-quests .qc-pic { width: 52px; height: 52px; border: 0; border-radius: 0; background: #17131d; box-shadow: none; } html[data-theme='neon'] .nx-quests .qc-main { height: 100%; } html[data-theme='neon'] .nx-quests .qc-title { font: 700 14px/1.25 var(--nx-cap); color: #f3ebde; } html[data-theme='neon'] .nx-quests .qc-prog .nx-bar { flex: 1; height: 4px; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, 0.1); } html[data-theme='neon'] .nx-quests .qc-prog .nx-bar > i { border-radius: 0; background: var(--gold); } html[data-theme='neon'] .nx-quests .qc-prog .nx-bar > i::after { display: none; } html[data-theme='neon'] .nx-quests .qc-n { font: 700 12px/1 var(--nx-ui); color: #c9c1b4; } html[data-theme='neon'] .nx-quests .qc-foot { flex-wrap: nowrap; margin-top: auto; } html[data-theme='neon'] .nx-quests .qc-rewards { min-width: 0; gap: 3px; } html[data-theme='neon'] .nx-quests .qc-go { min-width: 72px; min-height: 30px; } html[data-theme='neon'] .nx-quests .qc-swap { width: 30px; height: 30px; min-height: 0; padding: 0; } html[data-theme='neon'] .nx-q-tiles { flex: none; display: grid; gap: 8px; padding: 0 12px 12px; } html[data-theme='neon'] button.nx-q-tile { min-height: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; animation: none; color: inherit; font: inherit; } html[data-theme='neon'] .nx-q-tile:disabled { cursor: default; } html[data-theme='neon'] .nx-q-tile .th { display: grid; place-items: center; width: 76px; height: 46px; object-fit: cover; background: #17131d; } html[data-theme='neon'] .nx-q-tile .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; } html[data-theme='neon'] .nx-q-tile .tx b { font: 700 14px/1.15 var(--nx-cap); color: #f3ebde; } html[data-theme='neon'] .nx-q-tile .tx small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1.2 var(--nx-ui); color: #a79e91; } html[data-theme='neon'] .nx-q-tile .nx-bar { height: 3px; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, 0.1); } html[data-theme='neon'] .nx-q-tile .nx-bar > i { border-radius: 0; background: var(--gold); } html[data-theme='neon'] .nx-q-tile .nx-bar > i::after { display: none; } @media (max-width: 1000px) { html[data-theme='neon'] .nx-quests { grid-template-columns: minmax(0, 1fr); } html[data-theme='neon'] .nx-q-stage { display: flex; flex-direction: column; min-height: 0; } html[data-theme='neon'] .nx-q-stage .nx-dt-fig { display: none; } html[data-theme='neon'] .nx-q-stage .nx-dt-info { position: relative; top: 0; width: auto; padding: 12px 16px 0; } html[data-theme='neon'] .nx-wk { position: relative; left: auto; right: auto; bottom: auto; padding: 8px 12px 12px; } html[data-theme='neon'] .nx-wk .wk-chest { width: 48px; height: 48px; } html[data-theme='neon'] .nx-wk .wk-chest :is(canvas, img) { width: 46px !important; height: 46px !important; } html[data-theme='neon'] .nx-wk .wk-bar { margin: 0 24px 0 0; height: 120px; } html[data-theme='neon'] .nx-wk .wk-prize { flex-direction: column; gap: 1px; } html[data-theme='neon'] .nx-wk .wk-track { top: 22px; } html[data-theme='neon'] .nx-wk .wk-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ================================================================== Social: a page of the client on a computer */ @media (min-width: 1001px) { html[data-theme='neon'] .nx-client > .nx-so-head { display: none; } html[data-theme='neon'] :is(.screen-online, .screen-settings, .screen-profile).nx-client :is(.num, .bar b) { font-family: var(--nx-ui); } html[data-theme='neon'] .screen-online.nx-client small.num { font-size: 12px; } html[data-theme='neon'] :is(.screen-online, .screen-profile).nx-client .bar { min-height: 14px; } html[data-theme='neon'] :is(.screen-online, .screen-profile).nx-client .bar > b { font-size: 11px; line-height: 1; } html[data-theme='neon'] .nx-clan-claim { align-self: flex-start; min-width: 120px; } html[data-theme='neon'] :is(.screen-online, .screen-settings, .screen-profile, .screen-how).nx-client .panel { margin: 0; padding: 12px 14px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: var(--nx-panel); box-shadow: none; } html[data-theme='neon'] :is(.screen-online, .screen-settings, .screen-profile).nx-client .h2 { margin: 0; font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: none; } html[data-theme='neon'] :is(.screen-online, .screen-settings, .screen-profile).nx-client .h2::before { display: none; } html[data-theme='neon'] .screen-online.nx-client :not(.lb2-row) > .row-banner { display: none; } html[data-theme='neon'] .screen-online.nx-client .max { display: grid; grid-template-columns: var(--nx-roster) minmax(0, 1fr); align-items: stretch; gap: 0; } /* the clan */ html[data-theme='neon'] .nx-clan-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px; background: var(--nx-panel); border-right: 1px solid var(--line-1); overflow-y: auto; } html[data-theme='neon'] .nx-clan-box { flex: 1; min-height: 0; border: 0 !important; padding: 0 !important; overflow-y: auto; } html[data-theme='neon'] .nx-clan-list { flex: 1; min-height: 0; overflow-y: auto; } html[data-theme='neon'] .nx-clan-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 12px; } html[data-theme='neon'] .nx-clan-main > .clan-hero { flex: 0 0 auto; } /* a member: name and points, what you can do to them under it */ html[data-theme='neon'] .nx-clan-box .clan-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--line-1); } html[data-theme='neon'] .nx-clan-box .clan-member > span:last-child { display: contents; } html[data-theme='neon'] .nx-clan-box .clan-member > span:last-child > span { grid-column: 1 / -1; } html[data-theme='neon'] .nx-clan-box .clan-member > span:last-child > span:empty { display: none; } html[data-theme='neon'] .nx-clan-box .clan-member .btn { min-height: 26px; padding: 2px 8px; font-size: 11px; } html[data-theme='neon'] .nx-clan-pair { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme='neon'] .nx-clan-pair > .panel { min-width: 0; } html[data-theme='neon'] .nx-clan-chat { flex: 1 1 0; min-height: 120px; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-clan-chat .clan-chat { flex: 1; min-height: 0; max-height: none; overflow-y: auto; } html[data-theme='neon'] .nx-clan-main > .clan-hero:only-child { flex: 1; display: flex; align-items: center; padding: 28px; } /* the leaderboards: one line each, position, name, clan or level, number */ html[data-theme='neon'] .screen-online .lb2-head { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } html[data-theme='neon'] .screen-online .lb2-title { font: 700 18px/1.2 var(--nx-cap); } html[data-theme='neon'] .screen-online .lb2-tools { align-items: center; flex-wrap: nowrap; } html[data-theme='neon'] .lb2-search { width: 220px; min-height: 34px; } html[data-theme='neon'] .screen-online .lb2-row { padding: 7px 12px; border: 1px solid var(--line-1); border-radius: 0; background: var(--nx-panel); box-shadow: none; } html[data-theme='neon'] .screen-online .lb2-row.me { border-color: var(--gold-2); background: linear-gradient(0deg, rgba(245, 200, 98, 0.12), rgba(245, 200, 98, 0.02)), var(--nx-panel); } html[data-theme='neon'] .screen-online .lb2-row.top1 { border-color: var(--gold); } html[data-theme='neon'] .screen-online .lb2-row .lb2-val b.num { font: 700 20px/1 var(--nx-ui); color: var(--gold); text-shadow: none; } html[data-theme='neon'] .screen-online .lb2-row .lb2-pos.num { font: 700 16px/1 var(--nx-ui); color: #c9c1b4; } html[data-theme='neon'] .screen-online .lb2-row.top1 .lb2-pos.num, html[data-theme='neon'] .screen-online .lb2-row.top2 .lb2-pos.num, html[data-theme='neon'] .screen-online .lb2-row.top3 .lb2-pos.num { color: var(--gold); } html[data-theme='neon'] .screen-online .lb2-who { flex-direction: row; align-items: center; gap: 10px; } html[data-theme='neon'] .screen-online .lb2-name.btn { font: 700 15px/1.2 var(--nx-ui); color: #f1ead9; text-decoration: none; } html[data-theme='neon'] .screen-online .lb2-name.btn:hover { color: var(--gold); } html[data-theme='neon'] .screen-online .lb2-val { flex-direction: row; align-items: baseline; gap: 8px; } html[data-theme='neon'] .screen-online .lb2-row.me .lb2-who { flex-direction: column; align-items: flex-start; gap: 3px; } /* ================================================================ your Profile: who you are, the rest beside it */ html[data-theme='neon'] .screen-profile.nx-client .screen-body > .max { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: hidden; } html[data-theme='neon'] .screen-profile.nx-client .screen-body > .nx-pf-tab-overview { padding: 0; } html[data-theme='neon'] .screen-profile.nx-client .nx-prof { flex: 1; min-height: 0; margin: 0; display: grid; grid-template-columns: var(--nx-roster) minmax(0, 1fr); gap: 0; align-items: stretch; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-left { gap: 10px; padding: 12px; background: var(--nx-panel); border-right: 1px solid var(--line-1); overflow-y: auto; } /* every column reaches the bottom: what has a list takes what's left and scrolls in itself */ html[data-theme='neon'] .nx-pf-main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 12px; align-items: stretch; overflow: hidden; } html[data-theme='neon'] .nx-pf-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; } html[data-theme='neon'] .nx-pf-col > .panel { flex: none; margin: 0; } html[data-theme='neon'] .nx-pf-col > :is(.nx-pf-recent, .pf-ach) { flex: 1 1 0; min-height: 120px; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-pf-rows, html[data-theme='neon'] .nx-pf-col .pf-ach-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-pf-col .pf-ach-row, html[data-theme='neon'] .nx-pf-rows > .nx-match { flex: none; } html[data-theme='neon'] .nx-pf-left > .pf-grades { flex: 1 1 auto; min-height: 120px; margin: 0; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-pf-left > .pf-grades .pf-chart { flex: 1; min-height: 74px; } html[data-theme='neon'] .nx-pf-main .nx-match { display: grid; grid-template-columns: 4px minmax(70px, 1fr) auto 30px; align-items: center; gap: 10px; } html[data-theme='neon'] .nx-pf-main .nx-match .mteam { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-card { flex: none; border-radius: 0; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-card::before, html[data-theme='neon'] .screen-profile.nx-client .nx-pf-card::after { display: none; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-bg { height: 112px !important; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-ava { left: 12px; top: 56px; width: 100px; height: 100px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-ava :is(canvas, img, .framed) { max-width: 78px; max-height: 78px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-who { min-height: 70px; padding: 8px 96px 10px 122px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-who .nx-kicker { display: none; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-who h2 { margin: 0; font-size: 24px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-who .tags { margin-top: 6px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-rank { top: 64px; right: 10px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-rank :is(img, canvas) { width: 52px !important; height: 52px !important; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-rank b { font-size: 13px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-rank small { font: 400 11px/1 var(--nx-ui); } html[data-theme='neon'] .nx-pf-fact { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; } html[data-theme='neon'] .nx-pf-fact .nx-bar { flex: 1; min-width: 80px; height: 6px; margin: 0; } html[data-theme='neon'] .nx-pf-fact b { color: var(--gold); white-space: nowrap; } html[data-theme='neon'] .nx-pf-fact.link-row { cursor: pointer; } html[data-theme='neon'] .nx-pf-fact.link-row:hover b { color: #fff6dc; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-tile { padding: 8px 8px; border-radius: 0; background: rgba(0, 0, 0, 0.3); } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-tile small { font-size: 9px; letter-spacing: 0.08em; min-height: 22px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-tile b { margin-top: 2px; font: 700 20px/1 var(--nx-ui); } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-season { gap: 14px; flex-wrap: nowrap; padding: 10px 12px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-season .ringbox { flex: none; transform: scale(0.82); margin: -6px; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-medals { margin-top: 8px; gap: 4px; flex-wrap: nowrap; } html[data-theme='neon'] .nx-pf-main .nx-sec { margin: 0 0 6px; } html[data-theme='neon'] .nx-pf-main .pf-head { margin-bottom: 6px; flex-wrap: wrap; gap: 6px; } html[data-theme='neon'] .nx-pf-main .nx-match { padding: 6px 8px; min-height: 42px; } html[data-theme='neon'] .nx-pf-main .nx-match .mt small { font-size: 11px; } /* the records: three to a row, in plain numbers, wide enough for a long K/D/A */ html[data-theme='neon'] .nx-pf-main .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } html[data-theme='neon'] .nx-pf-main .stat-tile { padding: 6px 4px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: rgba(0, 0, 0, 0.3); box-shadow: none; } html[data-theme='neon'] .nx-pf-main .stat-tile b.num { font: 700 17px/1.1 var(--nx-ui); color: #f1ead9; text-shadow: none; white-space: nowrap; } html[data-theme='neon'] .nx-pf-main .pf-seg-btn.on { color: var(--gold); } /* the achievements nearly done: one to a line, their names whole */ html[data-theme='neon'] .nx-pf-main .pf-ach-list { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 2px; } html[data-theme='neon'] .nx-pf-main .pf-ach-row { padding: 5px 8px; border: 1px solid var(--line-1); border-radius: 0; background: rgba(0, 0, 0, 0.25); } html[data-theme='neon'] .nx-pf-main .pf-ach-top { display: flex; align-items: center; gap: 10px; } html[data-theme='neon'] .nx-pf-main .pf-ach-n { font: 700 18px/1 var(--nx-ui); color: var(--gold); text-shadow: none; } html[data-theme='neon'] .nx-pf-left .pf-chart { height: auto; margin-top: 4px; } html[data-theme='neon'] .screen-profile.nx-client :is(.nx-bar-label b, .ringbox .rv b) { font-family: var(--nx-ui); font-weight: 700; } html[data-theme='neon'] .screen-profile.nx-client .ringbox .rv b { font-size: 18px; } html[data-theme='neon'] .screen-profile.nx-client .nx-bar-label b { font-size: 13px; color: var(--gold); } /* the filters on one line */ html[data-theme='neon'] .screen-profile.nx-client .ib-bar { grid-column: auto; grid-row: auto; padding: 0; background: none; border: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px 12px; } html[data-theme='neon'] .screen-profile.nx-client .ib-bar > .ib-chips { flex: none; } html[data-theme='neon'] .screen-profile.nx-client .ib-tools { flex: 1; flex-wrap: nowrap; justify-content: flex-end; align-items: center; } html[data-theme='neon'] .screen-profile.nx-client .ib-tools > .grow { display: block; } html[data-theme='neon'] .screen-profile.nx-client .ib-pick { flex: none; flex-direction: row; align-items: center; gap: 6px; } html[data-theme='neon'] .screen-profile.nx-client .ib-pick .it-select { width: auto; min-width: 130px; } html[data-theme='neon'] .screen-profile.nx-client .ib-search { width: 180px; flex: none; } html[data-theme='neon'] .screen-profile.nx-client .pf-hist-tools { justify-content: space-between; flex-wrap: nowrap; } html[data-theme='neon'] .nx-pf-main .pf-ach { gap: 6px; } html[data-theme='neon'] .nx-pf-main .nx-row { padding: 4px 0; } /* a champion: name and games over how much you've played it, its win rate under that */ html[data-theme='neon'] .nx-pf-most .rt { display: block; min-width: 0; flex: 1; } html[data-theme='neon'] :is(.nx-mp-top, .nx-mp-wr) { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } html[data-theme='neon'] .nx-mp-wr { margin-top: 3px; } html[data-theme='neon'] .nx-mp-stars { display: flex; gap: 1px; margin-top: 1px; font-size: 12px; line-height: 1; } html[data-theme='neon'] .nx-mp-stars i { font-style: normal; color: rgba(255, 255, 255, 0.16); } html[data-theme='neon'] .nx-mp-stars i.on { color: var(--gold); } html[data-theme='neon'] .nx-pf-most .nx-row .rt .nx-bar { margin-top: 4px; } html[data-theme='neon'] .nx-mp-wr b { font: 700 13px/1.2 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-mp-top small, html[data-theme='neon'] .nx-mp-wr small { font-size: 12px; color: #a79e90; } /* the other tabs: their filters stay, their lists scroll */ html[data-theme='neon'] .screen-profile.nx-client :is(.pf-hist-tools, .ib-bar, .pf-ach-head) { flex: none; margin: 0; } html[data-theme='neon'] .screen-profile.nx-client .mh-list { flex: 1; min-height: 0; overflow-y: auto; } /* a game: room for its three lines of mode, K/D/A and date */ html[data-theme='neon'] .screen-profile.nx-client .mh-row { flex: none; min-height: 76px; padding-top: 9px; padding-bottom: 9px; } html[data-theme='neon'] .screen-profile.nx-client .mh-row > .xs.muted { font-size: 12px; line-height: 1.55; } html[data-theme='neon'] .screen-profile.nx-client .pf-cards { flex: 1; min-height: 0; overflow-y: auto; align-content: start; } html[data-theme='neon'] .screen-profile.nx-client .pf-teams { flex: 0 1 auto; min-height: 0; overflow-y: auto; } html[data-theme='neon'] .screen-profile.nx-client .nx-pf-tab-teams > .nx-set-stage { flex: 1 0 150px; min-height: 150px; } /* the teams in the box with the picture: the words on the left, the teams beside them */ html[data-theme='neon'] .nx-set-stage.has-teams .nx-dt-info { width: 300px; } html[data-theme='neon'] .screen-profile.nx-client .nx-set-stage .pf-teams { position: absolute; z-index: 2; top: 16px; bottom: 130px; left: 340px; right: 16px; overflow-y: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: center; gap: 12px; } html[data-theme='neon'] .screen-profile.nx-client .nx-set-stage .pf-team { padding: 14px; gap: 14px; } html[data-theme='neon'] .nx-set-stage .pf-team-pics { gap: 6px; } html[data-theme='neon'] .nx-set-stage .pf-team-syn { gap: 5px; min-height: 26px; } html[data-theme='neon'] .nx-set-stage .pf-team-syn .nx-fac-tag { padding: 2px 6px; font-size: 11px; } html[data-theme='neon'] .nx-set-stage .pf-team-btns { gap: 8px; margin-top: auto; } html[data-theme='neon'] .nx-set-stage .pf-team { background: rgba(13, 10, 18, 0.94); } html[data-theme='neon'] .screen-profile.nx-client .pf-ach-head { padding: 8px 12px; } html[data-theme='neon'] .screen-profile.nx-client .ib-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; margin: 0; align-items: stretch; } html[data-theme='neon'] .screen-profile.nx-client .ib-main { min-height: 0; overflow-y: auto; } html[data-theme='neon'] .screen-profile.nx-client .ib-detail { position: static; min-height: 0; max-height: none; overflow-y: auto; } /* ================================================================ another player's profile */ html[data-theme='neon'] .modal.op-modal:has(.nx-op) { width: min(1120px, 94vw) !important; max-width: none; border-radius: 0; } html[data-theme='neon'] .op-modal:has(.nx-op) .modal-title:empty { display: none; } html[data-theme='neon'] .nx-op { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 14px; height: min(600px, 76vh); } html[data-theme='neon'] .nx-op-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } html[data-theme='neon'] .nx-op-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-op-right > .rh { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 10px 12px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: var(--nx-panel); box-shadow: none; } html[data-theme='neon'] .nx-op-right .rh-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; } html[data-theme='neon'] .nx-op-right .op-hidden, html[data-theme='neon'] .nx-op-none { margin: auto; color: #a79e90; } html[data-theme='neon'] .nx-op .nx-op-card { flex: none; border-radius: 0; } html[data-theme='neon'] .nx-op .nx-op-card::before, html[data-theme='neon'] .nx-op .nx-op-card::after { display: none; } html[data-theme='neon'] .nx-op .h2 { margin: 0 0 6px; font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: none; } html[data-theme='neon'] .nx-op .h2::before { display: none; } html[data-theme='neon'] .nx-op .pf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } html[data-theme='neon'] .nx-op .rh-row { grid-template-columns: 34px 74px minmax(0, 1fr) auto; gap: 8px; padding: 5px 8px 5px 6px; border: 1px solid var(--line-1); border-left-width: 3px; border-radius: 0; background: rgba(0, 0, 0, 0.25); box-shadow: none; } html[data-theme='neon'] .nx-op .rh-row.win { border-left-color: #6bdc78; } html[data-theme='neon'] .nx-op .rh-row.loss { border-left-color: #e0555a; } html[data-theme='neon'] .nx-op .rh-teams { flex-wrap: nowrap; gap: 3px; padding-top: 8px; } html[data-theme='neon'] .nx-op .rh-list { gap: 4px; } html[data-theme='neon'] .nx-op .rh-meta { font-size: 12px; line-height: 1.5; } html[data-theme='neon'] .nx-op .op-champ canvas { border: 1px solid var(--line-1); background: rgba(0, 0, 0, 0.3); } html[data-theme='neon'] .nx-op .op-best { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme='neon'] .nx-op .nx-best { flex-direction: row; align-items: center; gap: 6px; min-width: 0; text-align: left; } html[data-theme='neon'] .nx-op .nx-best canvas { flex: none; } html[data-theme='neon'] .nx-op .nx-best .who { min-width: 0; display: flex; flex-direction: column; gap: 1px; } html[data-theme='neon'] .nx-op .nx-best .who > b { font-size: 12px; line-height: 1.2; } html[data-theme='neon'] .nx-op .nx-best .nx-mp-stars { font-size: 9px; gap: 0; } html[data-theme='neon'] .nx-op .nx-best .who > small { font-size: 11px; color: var(--gold); } /* both sides end at the same level: what's last on the left takes what's left of its height */ html[data-theme='neon'] .nx-op-left > * { flex: none; margin: 0; } html[data-theme='neon'] .nx-op-left > :last-child { flex: 1 0 auto; } html[data-theme='neon'] .nx-op-left .op-cols { display: flex; flex-direction: column; margin: 0; } html[data-theme='neon'] .nx-op-left .op-cols > .op-box { flex: 1; margin: 0; } html[data-theme='neon'] .nx-op-left .op-box:not(.rh) { padding: 6px 10px; } html[data-theme='neon'] .nx-op-left .op-champ canvas { width: 44px !important; height: 44px !important; } html[data-theme='neon'] .nx-op-left .nx-sheet { margin: 0; row-gap: 0; } html[data-theme='neon'] .nx-op-left .nx-sheet :is(dt, dd) { padding-top: 1px; padding-bottom: 1px; font-size: 13px; } html[data-theme='neon'] .nx-op-left .nx-op-show .nx-show { min-height: 58px; padding: 3px; gap: 2px; } html[data-theme='neon'] .nx-op-left .nx-op-show .nx-show :is(canvas, img) { width: 32px !important; height: 32px !important; } html[data-theme='neon'] .nx-op-left .h2 { margin-bottom: 4px; } html[data-theme='neon'] .nx-op-card .nx-pf-bg { height: 90px !important; } html[data-theme='neon'] .nx-op-card .nx-pf-ava { left: 10px; top: 36px; width: 96px; height: 96px; } html[data-theme='neon'] .nx-op-card .nx-pf-ava :is(canvas, img, .framed) { max-width: 72px; max-height: 72px; } html[data-theme='neon'] .nx-op-card .nx-pf-who { min-height: 58px; padding: 8px 74px 8px 114px; } html[data-theme='neon'] .nx-op-card .nx-pf-who h2 { margin: 0; font-size: 22px; } html[data-theme='neon'] .nx-op-card .nx-pf-who .tags { margin-top: 5px; } html[data-theme='neon'] .nx-op-card .nx-pf-rank { top: 62px; right: 10px; } html[data-theme='neon'] .nx-op .op-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border: 0; border-image: none; background: none; box-shadow: none; } html[data-theme='neon'] .nx-op :is(.op-acts, .op-more) { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme='neon'] .nx-op .op-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; } html[data-theme='neon'] .nx-op .op-box:not(.rh) { padding: 8px 10px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: var(--nx-panel); box-shadow: none; } /* inviting, in Settings */ html[data-theme='neon'] :is(.nx-inv-side, .nx-inv-main) { display: flex; flex-direction: column; gap: 10px; min-width: 0; } html[data-theme='neon'] .nx-inv-side .lobby-code { font: 700 26px/1.1 var(--nx-ui); color: var(--gold); text-shadow: none; } /* ================================================================ Settings: categories, rows */ html[data-theme='neon'] #app > .screen.win.nx-client:is(.screen-settings, .screen-how) { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } html[data-theme='neon'] #app > .screen.win.nx-client:is(.screen-settings, .screen-how) > div:not(.screen-body) { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 10px !important; min-height: 0; background: var(--nx-panel); border-right: 1px solid var(--line-1); } html[data-theme='neon'] .nx-set-name { padding: 0 10px 8px; font: 700 22px/1.1 var(--nx-cap); color: #fff6dc; } html[data-theme='neon'] :is(.screen-settings, .screen-how).nx-client > div > .tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 0; overflow-y: auto; border: 0; } html[data-theme='neon'] :is(.screen-settings, .screen-how).nx-client > div > .tabs > .btn { flex: none; width: 100%; min-height: 38px; justify-content: flex-start; padding: 0 10px; border: 0; border-left: 2px solid transparent; } html[data-theme='neon'] :is(.screen-settings, .screen-how).nx-client > div > .tabs > .btn:hover:not(:disabled) { border-left-color: rgba(245, 200, 98, 0.45); background: rgba(255, 255, 255, 0.03); } html[data-theme='neon'] :is(.screen-settings, .screen-how).nx-client > div > .tabs > .btn.on { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(245, 200, 98, 0.14), transparent 85%); } html[data-theme='neon'] .nx-set-back { flex: none; align-self: flex-start; margin-left: 8px; } html[data-theme='neon'] .nx-set-page { display: flex; flex-direction: column; min-height: 0; gap: 0; } html[data-theme='neon'] .nx-client .nx-set-page > .nx-set-stage { flex: 1 0 130px; min-height: 130px; } html[data-theme='neon'] .nx-set-stage .nx-dt-fig { left: auto; right: 5%; bottom: 4px; } html[data-theme='neon'] .nx-set-stage .nx-dt-info { width: min(60%, 560px); } html[data-theme='neon'] .nx-set-stage .nx-sub { margin: 6px 0 0; max-width: 44ch; color: #d8d0c2; } html[data-theme='neon'] .nx-set-stage .nx-pay { margin-top: 18px; } /* Account: two columns on a computer */ html[data-theme='neon'] .screen-account .nx-acc-two { max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; } html[data-theme='neon'] .screen-account .nx-acc-two > :first-child { grid-column: 1 / -1; } html[data-theme='neon'] .nx-set-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 12px; } /* the boxes in two columns that fill up evenly, no holes between them; a part's title and a long list across both */ html[data-theme='neon'] .nx-set-flow { column-count: 2; column-gap: 10px; } html[data-theme='neon'] .nx-set-flow > .panel { break-inside: avoid; margin: 0 0 10px !important; } html[data-theme='neon'] .nx-set-flow > :is(.set-sec, .set-sec-note) { column-span: all; margin-bottom: 6px; } html[data-theme='neon'] .nx-set-flow > .set-sec:not(:first-child) { margin-top: 8px; } /* one list: its rows in two columns across the page */ html[data-theme='neon'] .nx-set-flow > .panel:only-child, html[data-theme='neon'] .nx-set-flow > .panel.nx-wide { column-span: all; display: block; column-count: 2; column-gap: 28px; } html[data-theme='neon'] .nx-set-flow > :is(.panel:only-child, .panel.nx-wide) > * { break-inside: avoid; } html[data-theme='neon'] .nx-set-list .h2 { margin: 0 0 6px; } /* a row: the name on the left, what it's set to on the right */ html[data-theme='neon'] .nx-set-list .toggle { width: 100%; min-height: 36px; margin: 0; padding: 5px 2px; border: 0; border-bottom: 1px solid var(--line-1); border-radius: 0; background: none; font-size: 14px; } html[data-theme='neon'] .nx-set-list .toggle:hover { background: rgba(255, 255, 255, 0.03); } html[data-theme='neon'] .nx-set-list label.col:has(> input[type='range']) { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; align-items: center; gap: 10px; } html[data-theme='neon'] .nx-set-list label.col:has(> input[type='range']) > .row { display: contents; } html[data-theme='neon'] .nx-set-list label.col:has(> input[type='range']) > input { grid-row: 1; grid-column: 2; width: 100%; } html[data-theme='neon'] .nx-set-list label.col:has(> input[type='range']) .num { grid-column: 3; text-align: right; color: var(--gold); } html[data-theme='neon'] .nx-set-list .set-choice { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-set-list .set-choice > .row { justify-content: flex-end; gap: 4px; } html[data-theme='neon'] .nx-set-list .set-choice .btn { min-height: 28px; padding: 2px 10px; } html[data-theme='neon'] .nx-set-game .row.between { min-height: 36px; border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-set-game .row.between .btn { min-height: 28px; padding: 2px 10px; } html[data-theme='neon'] .nx-set-list .theme-pick { margin: 4px 0 8px; } html[data-theme='neon'] .nx-set-list .theme-opt small { font: 400 12px/1.35 var(--nx-ui); letter-spacing: 0; text-transform: none; } } /* phones: the same rows, stacked, as before */ @media (max-width: 1000px) { html[data-theme='neon'] .nx-dt-stage.nx-set-stage, html[data-theme='neon'] .nx-set-name, html[data-theme='neon'] .nx-set-back { display: none; } html[data-theme='neon'] :is(.nx-set-list, .nx-set-flow, .nx-inv-side, .nx-inv-main) { display: flex; flex-direction: column; gap: 10px; } } /* a member's rank, first on the row: an icon and a word in boxes of one size, gold for who leads, silver for officers */ html[data-theme='neon'] .nx-clan-role { flex: none; box-sizing: border-box; width: 84px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border: 1px solid var(--line-2); font: 600 11px/1.3 var(--nx-ui); color: #a79e90; text-decoration: none; } html[data-theme='neon'] .nx-clan-role :is(canvas, img) { flex: none; width: 14px; height: 14px; } html[data-theme='neon'] .nx-clan-role.leader { color: var(--gold); border: 1px solid var(--gold); background: rgba(245, 200, 98, 0.16); font-weight: 700; } html[data-theme='neon'] .nx-clan-role.officer { color: #f1ead9; border: 1px solid #b9c2cf; background: rgba(185, 194, 207, 0.14); } html[data-theme='neon'] .clan-member > .link:has(.nx-clan-role) { min-width: 0; text-decoration: none; } @media (min-width: 1001px) and (max-width: 1280px) { html[data-theme='neon'] .nx-pf-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: start; overflow-y: auto; } html[data-theme='neon'] .nx-pf-col > :is(.nx-pf-recent, .pf-ach) { flex: none; } html[data-theme='neon'] .nx-pf-rows, html[data-theme='neon'] .nx-pf-col .pf-ach-list { max-height: 260px; } html[data-theme='neon'] .screen-profile.nx-client .ib-layout { grid-template-columns: minmax(0, 1fr) 280px; } } /* the achievements shown off: three places, the empty ones a dashed way to choose */ html[data-theme='neon'] .nx-ach-show { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme='neon'] .nx-show { min-width: 0; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--gold-2); background: linear-gradient(0deg, rgba(245, 200, 98, 0.1), rgba(245, 200, 98, 0.02)); color: #f1ead9; font: inherit; text-align: center; } html[data-theme='neon'] button.nx-show { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } html[data-theme='neon'] button.nx-show:hover { border-color: var(--gold); box-shadow: 0 0 14px 1px rgba(255, 215, 104, 0.35); } html[data-theme='neon'] .nx-show small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-show.empty { position: relative; border: 1px dashed var(--line-3); background: rgba(0, 0, 0, 0.25); } html[data-theme='neon'] .nx-show.empty::before, html[data-theme='neon'] .nx-show.empty::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--line-3); } html[data-theme='neon'] .nx-show.empty::after { transform: rotate(90deg); } html[data-theme='neon'] .nx-show.empty:hover::before, html[data-theme='neon'] .nx-show.empty:hover::after { background: var(--gold); } html[data-theme='neon'] .nx-pf-col .nx-show { min-height: 62px; padding: 4px; gap: 2px; } html[data-theme='neon'] .nx-pf-col .nx-show :is(canvas, img) { width: 34px !important; height: 34px !important; } html[data-theme='neon'] .nx-pf-col .pf-ach { gap: 5px; padding-top: 8px; padding-bottom: 8px; } html[data-theme='neon'] .nx-pf-col .pf-ach .pf-head { margin-bottom: 0; } html[data-theme='neon'] .nx-pf-col .pf-ach .pf-head .btn { min-height: 26px; padding: 1px 8px; font-size: 11px; } html[data-theme='neon'] .nx-pf-col .pf-ach > .xs.muted { display: none; } html[data-theme='neon'] .nx-pf-col .pf-ach-row { padding: 3px 8px; } html[data-theme='neon'] .nx-pf-col .pf-ach-row .pf-ring, html[data-theme='neon'] .nx-pf-col .pf-ach-row .pf-ach-pic { width: 30px !important; height: 30px !important; } html[data-theme='neon'] .nx-pf-most .nx-row { padding: 2px 0; } html[data-theme='neon'] .nx-pf-most .nx-mp-wr { margin-top: 1px; } html[data-theme='neon'] .nx-show-btn { margin-top: 8px; } html[data-theme='neon'] .btn.nx-off { filter: grayscale(1) brightness(0.62); cursor: not-allowed; } /* what deletes: a dark red, in tone with the buttons around it */ html[data-theme='neon'] .btn.nx-off { opacity: 0.5; cursor: not-allowed; } html[data-theme='neon'] .btn.nx-del { --bg: #3a1418; --edge: #7c2b30; color: #f0b9b4; } html[data-theme='neon'] .btn.nx-del:hover:not(:disabled) { --bg: #54191f; --edge: #a83a40; color: #ffd9d4; } /* More stats: its top stays put, so the tabs don't move as each one's height changes */ html[data-theme='neon'] .modal-back:has(> .ms-modal) { align-items: flex-start; } html[data-theme='neon'] .modal.ms-modal { margin-top: clamp(0px, 7vh, 70px); max-height: calc(100% - clamp(0px, 7vh, 70px)); } /* what's rarely wanted on a player's profile: behind a gear */ html[data-theme='neon'] .nx-more-box { position: relative; display: inline-flex; } html[data-theme='neon'] .nx-more-btn.on { border-color: var(--gold-2); color: var(--gold); } html[data-theme='neon'] .op-more.nx-more { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; min-width: 170px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 4px; border: 1px solid var(--line-2); background: #15111b; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7); animation: nx-dock-in 0.13s ease-out; } html[data-theme='neon'] .op-more.nx-more[hidden] { display: none; } html[data-theme='neon'] .op-more.nx-more .btn { width: 100%; justify-content: flex-start; min-height: 30px; border: 0; background: none; filter: none; } html[data-theme='neon'] .op-more.nx-more .btn::before { display: none; } html[data-theme='neon'] .op-more.nx-more .btn:hover:not(:disabled) { background: rgba(245, 200, 98, 0.12); color: #fff6dc; } html[data-theme='neon'] .nx-name-btn { gap: 8px; } html[data-theme='neon'] .nx-cost { display: inline-flex; align-items: center; gap: 3px; font-family: var(--nx-ui); } html[data-theme='neon'] .nx-show-tip { display: flex; flex-direction: column; gap: 3px; max-width: 240px; font: 400 13px/1.35 var(--nx-ui); } html[data-theme='neon'] .nx-show-tip b { font: 700 14px/1.2 var(--nx-cap); color: var(--gold); } html[data-theme='neon'] .nx-show-hint { margin: 8px 0 0; } html[data-theme='neon'] .nx-op-show .nx-show { min-height: 72px; } /* ================================================================== How to Play: themes, each with its own boxes */ html[data-theme='neon'] .nx-g-page { display: flex; flex-direction: column; gap: 22px; padding: 16px; font-size: 14px; line-height: 1.5; color: #e6dfd1; } html[data-theme='neon'] .nx-g-page b { color: #fff6dc; font-weight: 700; } html[data-theme='neon'] .nx-g-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; } html[data-theme='neon'] .nx-g-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; } html[data-theme='neon'] .nx-g-head { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 15px/1.2 var(--nx-cap); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-g-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-2), transparent); } html[data-theme='neon'] .nx-g-p { margin: 0; } html[data-theme='neon'] .nx-g-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } html[data-theme='neon'] .nx-g-list li { position: relative; padding-left: 16px; } html[data-theme='neon'] .nx-g-list li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; rotate: 45deg; background: var(--gold-2); } html[data-theme='neon'] .nx-g-sub { font: 700 12px/1.2 var(--nx-cap); letter-spacing: 0.05em; text-transform: uppercase; color: #c9c1b4; } html[data-theme='neon'] .nx-g-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } html[data-theme='neon'] .nx-g-gap { width: 14px; } html[data-theme='neon'] .nx-g-pill { padding: 3px 10px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); font: 700 12px/1.3 var(--nx-ui); color: #e6dfd1; } html[data-theme='neon'] .nx-g-pill.rar.rare { color: #7fb4ff; border-color: #7fb4ff; } html[data-theme='neon'] .nx-g-pill.rar.epic { color: #c49aff; border-color: #c49aff; } html[data-theme='neon'] .nx-g-pill.rar.legendary { color: #ffb84d; border-color: #ffb84d; } html[data-theme='neon'] .nx-g-faces { display: flex; flex-wrap: wrap; gap: 3px; } html[data-theme='neon'] .nx-g-face { display: grid; place-items: center; padding: 2px; border: 1px solid var(--line-1); background: rgba(0, 0, 0, 0.35); } /* two columns: the steps and the controls */ html[data-theme='neon'] .nx-g-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; } /* the five steps: one open at a time */ html[data-theme='neon'] .nx-g-steps { display: flex; flex-direction: column; gap: 6px; } html[data-theme='neon'] .nx-g-step { border: 1px solid var(--line-1); background: var(--nx-panel); transition: border-color 0.15s; } html[data-theme='neon'] .nx-g-step.open { border-color: var(--gold-2); } html[data-theme='neon'] .nx-g-step-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; } html[data-theme='neon'] .nx-g-step-head:hover { background: rgba(245, 200, 98, 0.07); } html[data-theme='neon'] .nx-g-step-head .n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; rotate: 45deg; font: 700 14px/1 var(--nx-ui); color: #1b1408; background: linear-gradient(180deg, #ffd768, #e8a92d); } html[data-theme='neon'] .nx-g-step-head .n { rotate: 0deg; border-radius: 50%; } html[data-theme='neon'] .nx-g-step-head b { flex: 1; font: 700 16px/1.2 var(--nx-cap); } html[data-theme='neon'] .nx-g-step.open .nx-g-step-head b { color: var(--gold); } html[data-theme='neon'] .nx-g-step-head .chev { flex: none; width: 9px; height: 9px; margin-right: 4px; border: solid var(--gold); border-width: 0 2px 2px 0; rotate: 45deg; transition: rotate 0.2s, translate 0.2s; translate: 0 -2px; } html[data-theme='neon'] .nx-g-step.open .chev { rotate: -135deg; translate: 0 2px; } html[data-theme='neon'] .nx-g-step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease-out; } html[data-theme='neon'] .nx-g-step.open .nx-g-step-body { grid-template-rows: 1fr; } html[data-theme='neon'] .nx-g-step-body > div { min-height: 0; overflow: hidden; } html[data-theme='neon'] .nx-g-step-body .nx-g-list { padding: 2px 14px 14px 52px; } html[data-theme='neon'].reduce-motion .nx-g-step-body, html[data-theme='neon'].reduce-motion .chev { transition: none; } /* the keys */ html[data-theme='neon'] .nx-g-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; } html[data-theme='neon'] .nx-g-key { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; } html[data-theme='neon'] .nx-g-key kbd { flex: none; min-width: 30px; padding: 4px 8px; text-align: center; font: 700 13px/1.1 var(--nx-ui); color: var(--gold); background: #0c0a10; border: 1px solid var(--line-3); border-bottom-width: 3px; } html[data-theme='neon'] .nx-g-sec > .btn { align-self: flex-start; } /* the factions, each in its colour */ html[data-theme='neon'] .nx-g-facs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme='neon'] .nx-g-fac { --c: #6f9bff; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 4px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%), var(--nx-panel); } html[data-theme='neon'] .nx-g-fac.wild { --c: #6bd672; } html[data-theme='neon'] .nx-g-fac.arcane { --c: #b98aff; } html[data-theme='neon'] .nx-g-fac.shadow { --c: #ff6390; } html[data-theme='neon'] .nx-g-fac b { color: var(--c); } /* the types, each in its colour */ html[data-theme='neon'] .nx-g-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } html[data-theme='neon'] .nx-g-type { --c: #aab7c8; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-1); border-top: 3px solid var(--c); background: var(--nx-panel); } html[data-theme='neon'] .nx-g-type.earth { --c: #c79a62; } html[data-theme='neon'] .nx-g-type.wild { --c: #6bd672; } html[data-theme='neon'] .nx-g-type.snow { --c: #9fd8ff; } html[data-theme='neon'] .nx-g-type.flame { --c: #ff8a4a; } html[data-theme='neon'] .nx-g-type.shadow { --c: #ff6390; } html[data-theme='neon'] .nx-g-type.light { --c: #ffe08a; } html[data-theme='neon'] .nx-g-type.arcane { --c: #b98aff; } html[data-theme='neon'] .nx-g-type .name { font: 700 15px/1.2 var(--nx-cap); color: var(--c); } html[data-theme='neon'] .nx-g-chip { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 8px; font-size: 12px; } html[data-theme='neon'] .nx-g-chip small { color: #c9c1b4; font-size: 11px; } html[data-theme='neon'] .nx-g-chip.bad { background: rgba(224, 85, 90, 0.14); } html[data-theme='neon'] .nx-g-chip.bad b { color: #ff9a9e; } html[data-theme='neon'] .nx-g-chip.good { background: rgba(107, 220, 120, 0.12); } html[data-theme='neon'] .nx-g-chip.good b { color: #8fe89a; } /* the ladders: tiers and mastery */ html[data-theme='neon'] .nx-g-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } html[data-theme='neon'] .nx-g-rung { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; text-align: center; border: 1px solid var(--line-2); border-bottom: 3px solid var(--gold-2); background: var(--nx-panel); font-size: 12px; } html[data-theme='neon'] .nx-g-rung .big { font: 700 24px/1.1 var(--nx-cap); color: var(--gold); } html[data-theme='neon'] .nx-g-rung small { color: #c9c1b4; font-size: 12px; } html[data-theme='neon'] .nx-g-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } html[data-theme='neon'] .nx-g-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; text-align: center; border: 1px solid var(--line-1); background: rgba(245, 200, 98, 0.06); } html[data-theme='neon'] .nx-g-tile b { font: 700 20px/1.1 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-g-tile small { color: #c9c1b4; font-size: 12px; } html[data-theme='neon'] .nx-g-stars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } html[data-theme='neon'] .nx-g-star { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 5px 4px; border: 1px solid var(--line-1); background: var(--nx-panel); } html[data-theme='neon'] .nx-g-page .nx-g-star b { color: var(--gold); } html[data-theme='neon'] .nx-g-star small { font-size: 13px; color: #e6dfd1; } /* cards: one subject each */ html[data-theme='neon'] .nx-g-cards { display: grid; gap: 12px; grid-auto-rows: 1fr; } html[data-theme='neon'] .nx-g-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-theme='neon'] .nx-g-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme='neon'] .nx-g-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-1); border-top: 3px solid var(--gold-2); background: var(--nx-panel); } html[data-theme='neon'] .nx-g-card-head { display: flex; align-items: center; gap: 10px; } html[data-theme='neon'] .nx-g-card h4 { margin: 0; font: 700 17px/1.2 var(--nx-cap); color: var(--gold); } html[data-theme='neon'] .nx-g-medals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } /* the arena's squares */ html[data-theme='neon'] .nx-g-squares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme='neon'] .nx-g-square { --c: #6bd672; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line-1); border-left: 4px solid var(--c); background: var(--nx-panel); } html[data-theme='neon'] .nx-g-square.sq-bad { --c: #e0555a; } html[data-theme='neon'] .nx-g-square.sq-gold { --c: var(--gold); } html[data-theme='neon'] .nx-g-square > b { font: 700 15px/1.2 var(--nx-cap); color: var(--c); } /* all the champions */ html[data-theme='neon'] .nx-g-find { flex: none; align-self: flex-start; width: 320px; } html[data-theme='neon'] .nx-g-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; align-items: stretch; } html[data-theme='neon'] .nx-g-champ { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line-1); background: var(--nx-panel); font-size: 13px; line-height: 1.4; } html[data-theme='neon'] .nx-g-champ[hidden] { display: none; } html[data-theme='neon'] .nx-g-champ .top { display: flex; align-items: center; gap: 12px; } html[data-theme='neon'] .nx-g-champ .top canvas { flex: none; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); } html[data-theme='neon'] .nx-g-champ h4 { margin: 0; font: 700 17px/1.1 var(--nx-cap); color: #fff6dc; } html[data-theme='neon'] .nx-g-champ .who small { color: #a79e90; } html[data-theme='neon'] .nx-g-champ .stats { display: flex; gap: 12px; margin-top: 2px; } html[data-theme='neon'] .nx-g-champ .reach { color: #a79e90; } html[data-theme='neon'] .nx-g-ab { display: flex; flex-direction: column; padding: 5px 8px; border-left: 2px solid #8a8378; background: rgba(0, 0, 0, 0.25); } html[data-theme='neon'] .nx-g-ab.skill { border-left-color: #7fb4ff; } html[data-theme='neon'] .nx-g-ab.ult { border-left-color: var(--gold); } html[data-theme='neon'] .nx-g-page .nx-g-ab.ult b { color: var(--gold); } @media (min-width: 1001px) { html[data-theme='neon'] .nx-client .nx-set-page.nx-g > .nx-g-stage { flex: 0 0 118px; min-height: 118px; } html[data-theme='neon'] .nx-g .nx-g-page { flex: 1; min-height: 0; overflow-y: auto; } /* a theme with few words: as tall as they need, the picture filling the rest */ html[data-theme='neon'] .nx-client .nx-set-page.nx-g:has(> :is(.nx-g-collect, .nx-g-arena)) > .nx-g-stage { flex: 1 1 118px; } html[data-theme='neon'] .nx-g .nx-g-page:is(.nx-g-collect, .nx-g-arena) { flex: 0 1 auto; } html[data-theme='neon'] .nx-g-stage .nx-dt-info { width: min(70%, 680px); } html[data-theme='neon'] .nx-g-stage .nx-dt-info h2 { margin: 0; font-size: 26px; } html[data-theme='neon'] .nx-g-stage .nx-sub { margin-top: 2px; } html[data-theme='neon'] .nx-g-stage .nx-hero-pet { bottom: 0; } html[data-theme='neon'] .screen-how.nx-client > div > .tabs > .btn { text-align: left; } } @media (max-width: 1100px) { html[data-theme='neon'] :is(.nx-g-two, .nx-g-facs, .nx-g-cards.three, .nx-g-cards.two, .nx-g-squares) { grid-template-columns: minmax(0, 1fr); } html[data-theme='neon'] .nx-g-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme='neon'] :is(.nx-g-tiles, .nx-g-stars) { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-theme='neon'] .nx-g-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-theme='neon'] .nx-g-find { width: 100%; } } /* notifications: a list hanging from the bell, a whole row the way to what it says */ html[data-theme='neon'] .nx-nc-pop { position: fixed; z-index: 30; width: 380px; max-height: min(560px, calc(100vh - var(--hub-bar-h) - var(--hub-bottom-h) - 24px)); display: flex; flex-direction: column; background: #0d0a12; border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7); animation: nx-nc-in 0.16s ease-out; transition: opacity 0.13s ease-in, transform 0.13s ease-in; } html[data-theme='neon'] .nx-nc-pop.leaving { opacity: 0; transform: translateY(-6px); } html[data-theme='neon'].reduce-motion .nx-nc-pop { animation: none; transition: none; } @keyframes nx-nc-in { from { opacity: 0; transform: translateY(-8px); } } html[data-theme='neon'] .nx-nc-title { flex: none; padding: 12px 14px 10px; font: 700 16px/1.1 var(--nx-cap); color: #fff6dc; border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-nc-pop .nc { flex: 1; min-width: 0; min-height: 0; overflow: hidden auto; padding: 8px 8px 10px; gap: 2px; } html[data-theme='neon'] .nx-nc-pop .nc-sec { margin: 6px 6px 2px; font: 700 11px/1 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-nc-pop .row.between { align-items: center; } html[data-theme='neon'] .nx-nc-pop .row.between .btn { min-height: 24px; padding: 1px 8px; font-size: 11px; } html[data-theme='neon'] .nx-nc-pop p { margin: 4px 6px 8px; } html[data-theme='neon'] .nx-nc-row { position: relative; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; background: none; color: #e6dfd1; font: 400 13px/1.3 var(--nx-ui); text-align: left; transition: background 0.12s; } html[data-theme='neon'] button.nx-nc-row { cursor: pointer; } html[data-theme='neon'] button.nx-nc-row:hover { background: rgba(245, 200, 98, 0.1); } html[data-theme='neon'] .nx-nc-row.unread { box-shadow: inset 2px 0 0 var(--gold); background: rgba(245, 200, 98, 0.05); } html[data-theme='neon'] .nx-nc-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme='neon'] .nx-nc-txt small { font-size: 11px; color: #8e8678; } html[data-theme='neon'] .nc-bell.on { filter: drop-shadow(0 0 6px rgba(255, 215, 104, 0.7)); } /* the clan's chest: waiting for you, it glows and the button breathes; claimed, it bursts */ html[data-theme='neon'] .clan-goal.ready > :is(img, canvas) { animation: nx-chest-wait 1.5s ease-in-out infinite; } html[data-theme='neon'] .clan-goal.ready .nx-clan-claim { animation: nx-claim-wait 1.5s ease-in-out infinite; } html[data-theme='neon'] .clan-goal.opened > :is(img, canvas) { animation: nx-chest-open 0.62s ease-out forwards; } html[data-theme='neon'] .clan-goal.opened .nx-clan-claim { animation: none; opacity: 0.5; pointer-events: none; } html[data-theme='neon'].reduce-motion .clan-goal > :is(img, canvas), html[data-theme='neon'].reduce-motion .nx-clan-claim { animation: none; } @keyframes nx-chest-wait { 50% { transform: translateY(-3px) rotate(-1.5deg); filter: drop-shadow(0 0 14px rgba(255, 215, 104, 0.85)); } } @keyframes nx-claim-wait { 50% { box-shadow: 0 0 16px 1px rgba(255, 215, 104, 0.65); } } @keyframes nx-chest-open { 0% { transform: scale(1); } 18% { transform: scale(0.88) rotate(-5deg); } 36% { transform: scale(1.22) rotate(5deg); filter: brightness(1.7) drop-shadow(0 0 24px #ffd768); } 62% { transform: scale(1.08) rotate(-2deg); filter: brightness(1.25) drop-shadow(0 0 14px #ffd768); } 100% { transform: scale(1); filter: none; } } /* ================================================================== the bottom bar: friends and conversations */ html[data-theme='neon'].nx-dock-on { --nx-dock-h: 40px; --hub-bottom-h: calc(var(--nx-dock-h) * var(--nx-zoom, 1)); } html[data-theme='neon'] .nx-dock { position: fixed; z-index: 16; left: 0; right: 0; bottom: var(--safe-b); height: calc(var(--nx-dock-h, 40px) * var(--nx-zoom, 1)); background: linear-gradient(180deg, #16121c, #0d0a12); border-top: 1px solid var(--line-2); } html[data-theme='neon'] .nx-dock[hidden] { display: none; } html[data-theme='neon'] .nx-dock-in { zoom: var(--nx-zoom, 1); position: relative; height: var(--nx-dock-h, 40px); width: calc(min(var(--nx-page), 100vw) / var(--nx-zoom, 1)); margin: 0 auto; display: flex; align-items: stretch; justify-content: flex-end; } html[data-theme='neon'] .nx-dock-tabs { display: flex; align-items: stretch; min-width: 0; } html[data-theme='neon'] .nx-dock-slot { position: relative; display: flex; align-items: stretch; border-left: 1px solid var(--line-1); } html[data-theme='neon'] .nx-dock-tab, html[data-theme='neon'] .nx-dock-friends { display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; background: none; color: #d8d0c2; font: 600 13px/1 var(--nx-ui); cursor: pointer; transition: background 0.12s, color 0.12s; } html[data-theme='neon'] .nx-dock-tab { width: 150px; padding-right: 26px; } html[data-theme='neon'] .nx-dock-tab > span { min-width: 0; } html[data-theme='neon'] :is(.nx-dock-tab, .nx-dock-friends):hover { background: rgba(255, 255, 255, 0.05); color: #fff6dc; } html[data-theme='neon'] :is(.nx-dock-tab, .nx-dock-friends).on { color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.16), rgba(245, 200, 98, 0.03)); box-shadow: inset 0 -2px 0 var(--gold); } html[data-theme='neon'] .nx-dock-tab.fresh { color: #fff6dc; animation: nx-dock-fresh 1.4s ease-in-out infinite; } html[data-theme='neon'].reduce-motion .nx-dock-tab.fresh { animation: none; background: rgba(245, 200, 98, 0.18); } @keyframes nx-dock-fresh { 50% { background: rgba(245, 200, 98, 0.24); } } html[data-theme='neon'] .nx-dock-friends { flex: none; width: 260px; justify-content: flex-start; gap: 10px; padding: 0 16px; border-left: 1px solid var(--line-2); font: 700 14px/1 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(0deg, rgba(245, 200, 98, 0.1), rgba(245, 200, 98, 0.02)); transition: background 0.15s, color 0.15s, box-shadow 0.15s; } html[data-theme='neon'] .nx-dock-friends .nx-dock-count { margin-left: auto; font-size: 13px; } html[data-theme='neon'] .nx-dock-friends:hover { color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.26), rgba(245, 200, 98, 0.06)); box-shadow: 0 0 18px 2px rgba(255, 215, 104, 0.55), inset 0 0 0 1px rgba(255, 215, 104, 0.7); } html[data-theme='neon'] .nx-dock-count { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--nx-ui); letter-spacing: 0; color: #c9c1b4; } html[data-theme='neon'] .nx-dock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5a5560; } html[data-theme='neon'] .nx-dock-dot.on { background: #6bdc78; } html[data-theme='neon'] .nx-dock-dot.on.queue { background: #e8a92d; } html[data-theme='neon'] .nx-dock-dot.on.match { background: var(--gold); } html[data-theme='neon'] .nx-dock-n { flex: none; min-width: 16px; padding: 2px 4px; font: 700 11px/1 var(--nx-ui); text-align: center; color: #1b1408; background: var(--gold); } html[data-theme='neon'] .nx-dock-x { position: absolute; top: 0; bottom: 0; right: 2px; width: 22px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #8e8678; cursor: pointer; opacity: 0; transition: opacity 0.12s; } html[data-theme='neon'] .nx-dock-slot:hover .nx-dock-x, html[data-theme='neon'] .nx-dock-x:focus-visible { opacity: 1; } html[data-theme='neon'] .nx-dock-x:hover { color: #fff6dc; } /* what opens above it */ html[data-theme='neon'] .nx-dock-box { position: absolute; right: 0; bottom: 100%; } html[data-theme='neon'] .nx-dock-win { position: absolute; bottom: 0; display: flex; flex-direction: column; min-height: 0; background: #0d0a12; border: 1px solid var(--line-2); border-bottom: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); animation: nx-dock-in 0.2s ease-out; transition: opacity 0.13s ease-in, transform 0.13s ease-in; } html[data-theme='neon'] .nx-dock-win.leaving { opacity: 0; transform: translateY(8px); } html[data-theme='neon'].reduce-motion .nx-dock-win { animation: none; transition: none; } @keyframes nx-dock-in { from { opacity: 0; transform: translateY(10px); } } html[data-theme='neon'] .nx-dock-list { width: 340px; height: min(600px, calc((100vh - var(--hub-bar-h) - var(--hub-bottom-h)) / var(--nx-zoom, 1) - 16px)); gap: 8px; padding: 10px; } html[data-theme='neon'] .nx-dock-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } html[data-theme='neon'] .nx-dock-group { flex: none; display: flex; justify-content: space-between; padding: 8px 4px 4px; font: 700 11px/1 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-dock-group small { color: #8e8678; } html[data-theme='neon'] .nx-dock-row { flex: none; width: 100%; display: flex; align-items: center; gap: 9px; padding: 5px 6px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.12s; } html[data-theme='neon'] .nx-dock-row:not(.plain):hover { background: rgba(245, 200, 98, 0.09); } html[data-theme='neon'] .nx-dock-row.plain { cursor: default; } html[data-theme='neon'] .nx-dock-row:not(.on):not(.plain) .so-ava { opacity: 0.7; } html[data-theme='neon'] .nx-dock-row .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } html[data-theme='neon'] .nx-dock-row .name { display: flex; align-items: center; gap: 6px; min-width: 0; } html[data-theme='neon'] .nx-dock-row small { font-size: 11px; } html[data-theme='neon'] .nx-dock-results:not(:empty) { border-top: 1px solid var(--line-1); padding-top: 4px; } html[data-theme='neon'] .nx-dock-findrow { position: relative; flex: none; display: flex; align-items: stretch; gap: 6px; } html[data-theme='neon'] .nx-dock-findrow .so-search-box { flex: 1; min-width: 0; } /* the +: the search box's own shape beside it, its two strokes drawn so they sit dead centre */ html[data-theme='neon'] .nx-dock-plus { position: relative; flex: none; width: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0, 0, 0, 0.4); color: var(--gold); cursor: pointer; transition: border-color 0.15s, background 0.15s; } html[data-theme='neon'] .nx-dock-plus::before, html[data-theme='neon'] .nx-dock-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: currentColor; } html[data-theme='neon'] .nx-dock-plus::after { transform: rotate(90deg); } html[data-theme='neon'] .nx-dock-plus:hover, html[data-theme='neon'] .nx-dock-plus.on { border-color: var(--gold-2); background: rgba(245, 200, 98, 0.1); } /* adding a friend and inviting one: the same box, in gold words, glowing under the mouse */ html[data-theme='neon'] .nx-dock-add, html[data-theme='neon'] .nx-dock-invite { flex: none; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); background: linear-gradient(0deg, rgba(245, 200, 98, 0.1), rgba(245, 200, 98, 0.02)), var(--nx-panel); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } html[data-theme='neon'] .nx-dock-add { position: absolute; z-index: 3; top: calc(100% + 6px); left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(0deg, rgba(245, 200, 98, 0.1), rgba(245, 200, 98, 0.02)), #15111b; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7); animation: nx-dock-in 0.14s ease-out; } html[data-theme='neon'] .nx-dock-add[hidden] { display: none; } html[data-theme='neon'] .nx-dock-add > b, html[data-theme='neon'] .nx-dock-invite { font: 700 14px/1.1 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-dock-add > .row { display: flex; align-items: stretch; gap: 6px; } html[data-theme='neon'] .nx-dock-add .so-search { flex: 1; min-width: 0; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 0; background: #0a0810; color: #f1ead9; font: 400 14px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-dock-add .so-search:focus { outline: 0; border-color: var(--gold-2); } html[data-theme='neon'] .nx-dock-add .btn { flex: none; min-height: 36px; padding: 2px 16px; } html[data-theme='neon'] .nx-dock-field { position: relative; flex: 1; min-width: 0; display: flex; } html[data-theme='neon'] .nx-dock-field .so-search { width: 100%; } html[data-theme='neon'] .nx-dock-note { position: absolute; inset: 1px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #0a0810; font: 600 12px/1.2 var(--nx-ui); pointer-events: none; animation: nx-dock-in 0.14s ease-out; } html[data-theme='neon'] .nx-dock-note[hidden] { display: none; } html[data-theme='neon'] .nx-dock-note.good { color: #6bdc78; } html[data-theme='neon'] .nx-dock-note.bad { color: #ff8a7a; } html[data-theme='neon'] .nx-dock-invite { display: flex; align-items: center; gap: 10px; min-height: 44px; text-align: left; cursor: pointer; } html[data-theme='neon'] .nx-dock-invite:hover { border-color: rgba(255, 215, 104, 0.7); box-shadow: 0 0 16px 1px rgba(255, 215, 104, 0.4); } html[data-theme='neon'] .nx-dock-none { margin: 12px 4px; font-size: 13px; color: #a79e90; } /* a conversation: their banner, then what you've said */ html[data-theme='neon'] .nx-dock-chat { width: 420px; height: min(620px, calc((100vh - var(--hub-bar-h) - var(--hub-bottom-h)) / var(--nx-zoom, 1) - 16px)); } html[data-theme='neon'] .nx-fr-top { position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 148px; padding: 12px; overflow: hidden; background: #000; border-bottom: 1px solid var(--line-2); } html[data-theme='neon'] .nx-fr-top .nx-fr-card { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; background-size: cover; background-position: center; } html[data-theme='neon'] .nx-fr-top::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8, 7, 12, 0.94), rgba(8, 7, 12, 0.2) 85%); } html[data-theme='neon'] .nx-fr-top > :not(.nx-fr-card) { position: relative; z-index: 1; } html[data-theme='neon'] .nx-fr-head { display: flex; align-items: flex-end; gap: 12px; min-width: 0; } html[data-theme='neon'] .nx-fr-pic { position: relative; flex: none; width: 58px; height: 58px; } html[data-theme='neon'] .nx-fr-pic .nx-fr-face { width: 58px !important; height: 58px !important; border: 1px solid var(--gold-2); border-radius: 0; background: #0c0a10; overflow: hidden; } html[data-theme='neon'] .nx-fr-lv { position: absolute; left: 50%; bottom: -5px; translate: -50% 0; min-width: 22px; padding: 1px 4px; font: 700 11px/1.25 var(--nx-ui); text-align: center; color: var(--gold); background: #0c0a10; border: 1px solid var(--gold-2); } html[data-theme='neon'] .nx-fr-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } html[data-theme='neon'] .nx-fr-words h2 { margin: 0; font: 700 22px/1.1 var(--nx-cap); color: #fff6dc; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); } html[data-theme='neon'] .nx-fr-btns { display: flex; gap: 6px; } html[data-theme='neon'] .nx-fr-btns .btn { min-height: 30px; } html[data-theme='neon'] .nx-fr-top > .nx-fr-close { position: absolute; z-index: 1; top: 8px; right: 8px; } html[data-theme='neon'] .nx-fr-chat { flex: 1; min-height: 0; display: flex; } html[data-theme='neon'] .chat-inline { flex: 1; width: 100% !important; height: auto !important; min-width: 0; padding: 0 !important; margin: 0; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; } html[data-theme='neon'] .chat-inline .chat-body { background: none; } html[data-theme='neon'] .chat-inline .chat-list { padding: 10px 12px 12px; } html[data-theme='neon'] .chat-inline .chat-msg { border: 1px solid var(--line-1); border-radius: 0; background: var(--nx-panel); box-shadow: none; font-size: 14px; } html[data-theme='neon'] .chat-inline .chat-msg.mine { border-color: var(--gold-2); background: linear-gradient(0deg, rgba(245, 200, 98, 0.14), rgba(245, 200, 98, 0.06)), var(--nx-panel); } html[data-theme='neon'] .chat-inline .chat-msg.emote { border-color: transparent; background: none; } html[data-theme='neon'] .chat-inline .chat-input:focus { outline: 0; border-color: var(--gold-2); box-shadow: none; } html[data-theme='neon'] .chat-inline .chat-field:focus-within { border-color: var(--gold-2); box-shadow: none; outline: 0; } html[data-theme='neon'] .chat-inline .chat-send { padding: 8px 10px; background: var(--nx-panel); border-top: 1px solid var(--line-1); } html[data-theme='neon'] .chat-inline .chat-tray { background: var(--nx-panel); border-top: 1px solid var(--line-1); } html[data-theme='neon'] .chat-inline .chat-go { border: 0; border-radius: 0; background: linear-gradient(180deg, #ffd768, #e8a92d); box-shadow: none; } /* a card of the Bazaar's storefront: its place, the offer big in it, its name and Buy along the bottom */ html[data-theme='neon'] .nx-offer { position: relative; min-width: 0; min-height: 240px; overflow: hidden; border: 1px solid var(--line-2); background: #000; transition: border-color 0.15s; } html[data-theme='neon'] .nx-offer.wide { grid-column: span 2; } html[data-theme='neon'] .nx-offer > .art { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.85) brightness(0.62); transition: filter 0.2s, scale 0.5s var(--ease-out); } html[data-theme='neon'] .nx-offer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 130% 0; } html[data-theme='neon'] .nx-offer:hover { border-color: var(--gold-2); } html[data-theme='neon'] .nx-offer:hover > .art { filter: saturate(1) brightness(0.8); scale: 1.04; } html[data-theme='neon'] .nx-offer:hover::after { background-position: -30% 0; transition: background-position 0.8s var(--ease-out); } html[data-theme='neon'] .nx-offer > .fig { position: absolute; left: 0; right: 0; bottom: 58px; display: flex; justify-content: center; } html[data-theme='neon'] .nx-offer.wide > .fig { left: 42%; bottom: 8px; } html[data-theme='neon'] .nx-offer.thing > .fig { top: 0; align-items: center; } html[data-theme='neon'] .nx-offer.thing > .fig :is(canvas, img) { image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.75)); } html[data-theme='neon'] .nx-offer .nx-hero { animation: none; } html[data-theme='neon'] .nx-offer .nx-say { left: 50%; right: auto; top: 2%; max-width: 92%; transform: translateX(-50%); } html[data-theme='neon'] .nx-offer > .foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 22px 10px 8px; background: linear-gradient(0deg, rgba(8, 7, 12, 0.97) 55%, transparent); } html[data-theme='neon'] .nx-offer.wide > .foot { top: 0; right: 40%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 16px 20px; background: linear-gradient(90deg, rgba(8, 7, 12, 0.96) 60%, transparent); } html[data-theme='neon'] .nx-offer .foot .tx { min-width: 0; } html[data-theme='neon'] .nx-offer .foot b { display: block; font: 700 15px/1.15 var(--nx-cap); color: #f3ebde; } html[data-theme='neon'] .nx-offer.wide .foot b { font-size: 30px; } html[data-theme='neon'] .nx-offer .foot small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--nx-ui); color: #a79e91; } html[data-theme='neon'] .nx-offer .foot p { margin: 8px 0 0; font-size: 13px; font-style: italic; line-height: 1.35; color: #c9c1b4; } html[data-theme='neon'] .nx-offer .nx-pay .btn { min-height: 32px; padding: 0 10px; } html[data-theme='neon'] .nx-offer.have > :is(.art, .fig) { filter: grayscale(0.8) brightness(0.45); } /* prices in the client's clean text: the pixel font is the fight's */ html[data-theme='neon'] .nx-client :is(.nx-pay, .ib-tags, .nx-odds) .num { font: 700 13px/1 var(--nx-ui); letter-spacing: 0; } html[data-theme='neon'] .nx-client .ib-tags .row { gap: 3px; } html[data-theme='neon'] .nx-client .ib-tags :is(canvas, img) { width: 13px; height: 13px; } html[data-theme='neon'] .nx-client .ib-tags .num { font-size: 11px; } html[data-theme='neon'] .nx-note { margin: 10px 0 0; font-size: 12px; line-height: 1.35; color: #8f877b; } html[data-theme='neon'] .nx-list-head { flex: none; margin: 8px 8px 2px; font: 700 12px/1.2 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-list-note { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 12px 8px; font-size: 12px; color: #a79e91; } html[data-theme='neon'] .nx-shop-body { display: flex; flex-direction: column; gap: 12px; } html[data-theme='neon'] .nx-odds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } html[data-theme='neon'] .nx-odd { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border: 1px solid var(--rc); font: 400 12px/1.2 var(--nx-ui); color: #d9d2c6; } html[data-theme='neon'] .nx-odd b { font-weight: 700; color: var(--rc); } html[data-theme='neon'] .nx-shop-big { display: grid; place-items: center; } html[data-theme='neon'] .nx-shop-big :is(canvas, img, span) { image-rendering: pixelated; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.75)); } /* (the banner's painting is squeezed in its file, 4:1 from what was about 2.4:1, a moon 38 x 23: drawn at its true shape) */ html[data-theme='neon'] .nx-tab-pass { container-type: inline-size; } html[data-theme='neon'] .nx-pass-top { position: relative; background-repeat: no-repeat; background-size: 100cqw 41.25cqw; background-position: center 26%; } html[data-theme='neon'] .nx-pass-top::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 7, 12, 0.96) 16%, rgba(8, 7, 12, 0.5) 62%, rgba(8, 7, 12, 0.12)); } html[data-theme='neon'] .nx-pass-top > * { position: relative; } html[data-theme='neon'] .nx-pass-top .ps-mid > .xs { font-family: var(--nx-ui); letter-spacing: 0; } html[data-theme='neon'] .nx-pass-top .ps-mid .bar { height: 16px; border-radius: 0; } html[data-theme='neon'] .nx-pass-top .ps-mid .bar > b { display: flex; align-items: center; justify-content: center; height: 100%; font: 700 11px/1 var(--nx-ui); letter-spacing: 0; text-shadow: 0 1px 2px #000; } html[data-theme='neon'] .nx-pass-top .ps-tier b { font: 700 30px/1 var(--nx-ui); } html[data-theme='neon'] .nx-pass-top .ps-title { font: 700 18px/1.2 var(--nx-cap); } html[data-theme='neon'] .nx-client .ps-head, html[data-theme='neon'] .nx-pass-top .ps-head { border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; } @media (min-width: 1001px) { html[data-theme='neon'] .nx-client .nx-deck-main > .nx-shop-list { flex: 1; min-height: 0; overflow-y: auto; } html[data-theme='neon'] .nx-client .nx-deck-main > .ib-grid.nx-shop-list { padding: 4px 12px 12px; align-content: start; } html[data-theme='neon'] .nx-client .nx-mode { animation: none; } html[data-theme='neon'] .nx-client .nx-shop-list .nx-mode .th { display: grid; place-items: center; background: #0b0910; } html[data-theme='neon'] .nx-client .nx-shop-list .nx-mode .th :is(canvas, img) { width: 48px !important; height: 48px !important; object-fit: contain; image-rendering: pixelated; } html[data-theme='neon'] .nx-open-stage { flex-basis: 66%; } html[data-theme='neon'] .nx-full-stage { flex: 1 1 auto; } html[data-theme='neon'] .nx-full-stage .nx-dt-info .nx-sheet { margin: 12px 0; } html[data-theme='neon'] .nx-full-stage .nx-it-fx { margin-bottom: 4px; } /* Crafting's list: bigger, so it's as tall as the page */ html[data-theme='neon'] .nx-tab-craft .ib-grid.nx-shop-list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 114px; } html[data-theme='neon'] .nx-tab-craft .ib-tile .ib-pic { width: 66px; height: 66px; } html[data-theme='neon'] .nx-tab-craft .ib-tile .ib-pic > :is(canvas, img) { max-width: 66px; max-height: 66px; } /* the Bazaar: a storefront */ html[data-theme='neon'] .nx-tab-featured { display: flex; flex-direction: column; padding-bottom: 12px; } html[data-theme='neon'] .nx-wall { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; padding: 0 12px; } /* Featured: the offer, the tiles under it */ /* the Game Pass: its banner with where you stand, the track filling the rest */ html[data-theme='neon'] .nx-tab-pass { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; } html[data-theme='neon'] .nx-pass-top { flex: 1 1 0; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 16px; } html[data-theme='neon'] .nx-pass-top .ps-head { padding: 0; } html[data-theme='neon'] .nx-pass-top .ps-note { margin: 4px 0 0; } html[data-theme='neon'] .nx-tab-pass > .ps-tools { flex: none; margin: 0 16px; padding: 0; border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-tab-pass > .ps-track { flex: none; margin: 0 16px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: var(--nx-panel); box-shadow: none; } html[data-theme='neon'] .nx-tab-pass > .ps-list { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 0 16px; } /* what's left: the gems, when they're on */ html[data-theme='neon'] .nx-tab-gems { padding: 16px; overflow-y: auto; } } /* a champion's tabs on a phone too: no burger folds these, they'd be out of reach */ html[data-theme='neon'] .nx-detail .inv-tabs { display: flex; flex-wrap: wrap; } html[data-theme='neon'] .nx-detail .inv-tabs > .btn { display: inline-flex; flex: none; } /* copies toward a tier, as boxes like the camp's steps */ html[data-theme='neon'] .nx-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 9px; min-width: 0; } html[data-theme='neon'] .nx-steps > i { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } html[data-theme='neon'] .nx-steps > i.on { background: var(--gold); box-shadow: none; } html[data-theme='neon'] .nx-steps > i.next { background: rgba(245, 200, 98, 0.3); box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.55); animation: coach-pulse 1.2s ease-in-out infinite; } html[data-theme='neon'].reduce-motion .nx-steps > i.next { animation: none; } html[data-theme='neon'] .nx-tier-val { display: flex; flex-direction: column; gap: 5px; min-width: 200px; } /* Patrol: how far the camp can still grow */ html[data-theme='neon'] .pt-more .sp-steps { margin-top: 4px; gap: 4px; } html[data-theme='neon'] .pt-more .sp-step { font: 400 11px/1 var(--nx-ui); } html[data-theme='neon'] .pt-more .sp-step b { font-weight: 600; } html[data-theme='neon'] .pt-more .sp-step i { width: 24px; height: 4px; border: 0; } /* Equipment, on every size */ html[data-theme='neon'] .nx-kit-list { max-height: none; } html[data-theme='neon'] .nx-kit .inv-doll.doll2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; justify-items: stretch; } html[data-theme='neon'] .nx-kit .inv-slot { grid-column: auto; grid-row: auto; width: 100%; max-width: none; min-width: 0; padding: 6px 4px; border: 1px solid var(--line-1); border-radius: 0; background: #17131d; box-shadow: none; transition: transform 0.14s var(--ease-out), border-color 0.14s, background 0.14s; } html[data-theme='neon'] .nx-kit .inv-slot:hover { transform: translateY(-2px); border-color: var(--line-3); background: #1f1a27; box-shadow: none; } html[data-theme='neon'] .nx-kit .inv-slot:active { transform: scale(0.97); } html[data-theme='neon'] .nx-kit .inv-slot.on { border-color: var(--gold); background: linear-gradient(0deg, rgba(245, 200, 98, 0.16), rgba(245, 200, 98, 0.03) 60%), #17131d; box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.5); } html[data-theme='neon'] .nx-kit .inv-slot-ico { width: 44px; height: 44px; border-radius: 0; } html[data-theme='neon'] .nx-kit .inv-slot small { font: 400 11px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-kit .inv-slot b { font: 600 11px/1.2 var(--nx-ui); } html[data-theme='neon'] .nx-kit .builds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-kit .builds-bar > .xs { display: none; } /* (each says Build) */ html[data-theme='neon'] .nx-kit .builds-one { display: inline-flex; gap: 1px; } html[data-theme='neon'] .nx-kit .builds-one .btn { min-width: 0; height: 26px; min-height: 0; padding: 0 6px; font-size: 11px; } html[data-theme='neon'] .nx-kit .it-head { font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: none; } html[data-theme='neon'] .nx-kit .doll-bonus { padding: 0; border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-kit .doll-bonus-row { padding: 4px 0; font: 400 12px/1.25 var(--nx-ui); letter-spacing: 0; text-transform: none; } html[data-theme='neon'] .nx-kit .doll-bonus-row b { font: 700 12px/1 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-kit .boost-sec { margin: 8px 0 6px; font: 700 12px/1.2 var(--nx-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-kit .boost-sec:first-child { margin-top: 0; } html[data-theme='neon'] .nx-kit .boost-sec.miss { color: #8f877b; } html[data-theme='neon'] .nx-kit-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: var(--nx-panel); box-shadow: none; } html[data-theme='neon'] .nx-kit-row.on { border-color: var(--gold-2); } html[data-theme='neon'] .nx-kit-row .boost-pic { width: 48px; height: 48px; border: 0; border-radius: 0; } html[data-theme='neon'] .nx-kit-row .tx { min-width: 0; font: 400 13px/1.35 var(--nx-ui); } html[data-theme='neon'] .nx-kit-row .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 3px; } html[data-theme='neon'] .nx-kit-row .nm b { font: 700 14px/1.15 var(--nx-cap); } html[data-theme='neon'] .nx-kit-row .boost-tag { padding: 2px 6px; border-radius: 0; font: 600 10px/1.2 var(--nx-ui); letter-spacing: 0; text-transform: none; } html[data-theme='neon'] .nx-kit-row .boost-perk { color: #e4ddd0; font-size: 13px; } html[data-theme='neon'] .nx-kit-row .boost-perk::before { content: none; } html[data-theme='neon'] .nx-kit-row .boost-next { margin-top: 2px; font-size: 12px; color: #8f877b; } html[data-theme='neon'] .nx-kit-row .boost-next b { font-weight: 600; color: #c9c1b4; } html[data-theme='neon'] .nx-kit-row .boost-how { margin-top: 5px; font: 400 12px/1.2 var(--nx-ui); letter-spacing: 0; text-transform: none; color: #8f877b; } html[data-theme='neon'] .nx-kit-row .boost-src { margin-top: 4px; } html[data-theme='neon'] .nx-kit-row .acts { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } html[data-theme='neon'] .btn.nx-unequip { border: 1px solid #7fe07a; border-image: none; background: #2f9c39; color: #f0fff0 !important; box-shadow: none; } html[data-theme='neon'] .btn.nx-unequip:hover:not(:disabled) { background: #39b545; filter: none; } html[data-theme='neon'] .btn.nx-unequip::before, html[data-theme='neon'] .btn.nx-unequip::after { display: none; } html[data-theme='neon'] .nx-kit-row.missing { grid-template-columns: 48px minmax(0, 1fr); } html[data-theme='neon'] .nx-kit-row.missing .boost-perk { color: #a79e91; } /* an item's page */ html[data-theme='neon'] .nx-it-fx { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font: 400 15px/1.3 var(--nx-ui); color: #e4ddd0; } html[data-theme='neon'] .nx-it-fx b { font: 700 19px/1.2 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-it-stage .nx-dt-fig :is(canvas, img) { width: 170px; height: 170px; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.75)); } html[data-theme='neon'] .nx-it-stage::after { background: linear-gradient(90deg, rgba(8, 7, 12, 0.96), rgba(8, 7, 12, 0.84) 50%, rgba(8, 7, 12, 0.3) 78%), linear-gradient(0deg, rgba(8, 7, 12, 0.7), transparent 30%); } html[data-theme='neon'] .nx-it-body .it-compare { padding: 0; border: 0; background: none; } html[data-theme='neon'] .nx-it-body .it-compare .row.between { align-items: center; justify-content: flex-start; gap: 14px; } html[data-theme='neon'] .nx-it-body .it-select { height: 30px; padding-top: 0; padding-bottom: 0; border-radius: 0; font: 400 13px var(--nx-ui); } html[data-theme='neon'] .nx-it-body .it-champs { max-height: none; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } html[data-theme='neon'] .nx-it-body .it-champ { border-radius: 0; } html[data-theme='neon'] .nx-it-body .row.wrap { align-items: center; gap: 8px; } html[data-theme='neon'] .nx-cost { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font: 700 12px/1 var(--nx-ui); letter-spacing: 0; } html[data-theme='neon'] .nx-cost > :is(canvas, img, svg) { width: 14px; height: 14px; } html[data-theme='neon'] .nx-cost > :nth-child(2) { margin-left: 6px; } /* the stage and the abilities, on every size: a narrow window has them one over the other */ html[data-theme='neon'] .nx-dt-stage { position: relative; overflow: hidden; background: #000; } html[data-theme='neon'] .nx-dt-stage > .art { position: absolute; inset: 0; background-size: cover; background-position: center; scale: 1.05; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -8px); filter: saturate(0.85) brightness(0.8); transition: translate 0.6s var(--ease-out); animation: nx-drift 18s ease-out both; } html[data-theme='neon'] .nx-dt-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 7, 12, 0.95), rgba(8, 7, 12, 0.8) 42%, rgba(8, 7, 12, 0.08) 68%), linear-gradient(0deg, rgba(8, 7, 12, 0.7), transparent 30%); } html[data-theme='neon'] .nx-dt-stage .nx-hero { animation: none; } html[data-theme='neon'] .nx-dt-info h2 { margin: 0 0 8px; font: 700 clamp(30px, 3vw, 40px)/1.03 var(--nx-cap); color: #f3ebde; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } html[data-theme='neon'] .nx-dt-info .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } html[data-theme='neon'] .nx-dt-quote { margin: 10px 0; font-size: 13px; font-style: italic; line-height: 1.35; color: #c9c1b4; } html[data-theme='neon'] .nx-dt-stats .nx-stat-row { grid-template-columns: 92px 1fr 44px; gap: 8px; margin: 4px 0; font: 400 12px/1.2 var(--nx-ui); letter-spacing: 0; color: #a79e91; } html[data-theme='neon'] .nx-dt-stats .nx-stat-row b { font: 700 13px/1 var(--nx-ui); } html[data-theme='neon'] .nx-dt-stats .nx-bar { height: 4px; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, 0.1); } html[data-theme='neon'] .nx-dt-stats .nx-bar > i { border-radius: 0; background: var(--gold); } html[data-theme='neon'] .nx-dt-stats .nx-bar > i::after { display: none; } html[data-theme='neon'] .nx-dt-stage .nx-skins { z-index: 3; right: 10px; top: 10px; gap: 4px; } html[data-theme='neon'] .nx-dt-stage .nx-skins[hidden] { display: none; } html[data-theme='neon'] .nx-dt-stage .nx-skins .sk { width: 40px; height: 40px; border-radius: 0; background: rgba(8, 7, 12, 0.8); } html[data-theme='neon'] .nx-abs { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html[data-theme='neon'] .nx-ab { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 7px 10px; border: 1px solid var(--line-1); background: var(--nx-panel); color: inherit; font: inherit; text-align: left; transition: border-color 0.14s, background 0.14s, transform 0.14s var(--ease-out); } html[data-theme='neon'] button.nx-ab { cursor: pointer; } html[data-theme='neon'] button.nx-ab:hover { border-color: var(--gold-2); background: rgba(245, 200, 98, 0.06); } html[data-theme='neon'] button.nx-ab:active { transform: scale(0.99); } html[data-theme='neon'] .nx-ab :is(img, canvas) { width: 48px; height: 48px; image-rendering: pixelated; } html[data-theme='neon'] .nx-ab .tx { display: block; min-width: 0; } html[data-theme='neon'] .nx-ab .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } html[data-theme='neon'] .nx-ab .nm b { font: 700 15px/1.15 var(--nx-cap); color: #f3ebde; } html[data-theme='neon'] .nx-ab .nm small { flex: none; font: 600 11px/1 var(--nx-ui); color: #a79e91; } html[data-theme='neon'] .nx-ab.ult .nm small { color: var(--gold); } html[data-theme='neon'] .nx-ab .dsc { display: block; margin-top: 3px; font: 400 13px/1.35 var(--nx-ui); color: #b9b1a4; } @media (max-width: 1000px) { html[data-theme='neon'] .nx-dt-stage { display: flex; flex-direction: column; } html[data-theme='neon'] .nx-dt-fig { position: relative; z-index: 1; order: -1; display: flex; justify-content: center; padding-top: 10px; } html[data-theme='neon'] .nx-dt-info { position: relative; z-index: 2; padding: 10px 16px 14px; } html[data-theme='neon'] .nx-dt-stage::after { background: linear-gradient(0deg, rgba(8, 7, 12, 0.95), rgba(8, 7, 12, 0.7) 50%, rgba(8, 7, 12, 0.1)); } html[data-theme='neon'] .nx-dt-pane { padding: 12px 16px; } html[data-theme='neon'] .nx-abs-side { margin-top: 14px; } html[data-theme='neon'] .nx-kit-side { margin-bottom: 12px; } html[data-theme='neon'] .nx-kit-row { grid-template-columns: 48px minmax(0, 1fr); } html[data-theme='neon'] .nx-kit-row .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } html[data-theme='neon'] .nx-kit-row .acts > .btn { flex: 1 1 auto; } } /* changing mode is instant: no screen comes in, the list was already there */ html[data-theme='neon'].nx-lobby #app > .screen.win, html[data-theme='neon'] #app > .screen.h3-playing { animation: none; } @media (max-width: 1000px) { html[data-theme='neon'] .nx-pl-rail.fixed { display: none; } } @keyframes nx-from-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } } /* (your wallet is in the bar: no second one on every screen) */ html[data-theme='neon'] .screen.win > .screen-head .currencies { display: none; } html[data-theme='neon'] .nx-pl-tabs { position: relative; flex: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-pl-tab { position: relative; height: 50px; padding: 0 6px; border: 0; background: none; color: #a79e91 !important; font: 700 13px/1 var(--nx-cap) !important; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.15s, background 0.15s; } html[data-theme='neon'] .nx-pl-tab.on { color: var(--gold) !important; } html[data-theme='neon'] .nx-pl-tab:active { background: rgba(245, 200, 98, 0.06); } html[data-theme='neon'] .nx-pl-tabs .ink { position: absolute; left: 0; bottom: -1px; width: calc(100% / var(--n)); height: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(245, 200, 98, 0.8); transform: translateX(calc(var(--at, 0) * 100%)); transition: transform 0.32s var(--ease-out); pointer-events: none; } html[data-theme='neon'] .nx-pl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; } html[data-theme='neon'] .nx-mode { position: relative; flex: none; display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px 7px 8px; border: 0; background: none; text-align: left; transition: background 0.16s, transform 0.16s var(--ease-out); animation: nx-from-left 0.34s var(--ease-out) calc(var(--i, 0) * 0.045s) both; } html[data-theme='neon'] .nx-mode.off { display: none; } /* a mode a level just opened: glowing, NEW until it's pressed; its tab and PLAY say how many */ html[data-theme='neon'] .nx-mode.is-new { border-color: var(--gold); animation: nx-breathe 2.4s ease-in-out infinite; } html[data-theme='neon'].reduce-motion .nx-mode.is-new { animation: none; } html[data-theme='neon'] .nx-mode .new-mark { position: absolute; top: 6px; right: 6px; } html[data-theme='neon'] .nx-tab-new { display: inline-block; min-width: 15px; height: 15px; margin-left: 6px; padding: 0 3px; background: var(--gold); color: #1a1206; font: 700 10px/15px var(--nx-ui); font-style: normal; text-align: center; vertical-align: 1px; } html[data-theme='neon'] .nx-playbtn .nx-dot { top: -5px; right: -3px; background: var(--gold); color: #1a1206; } html[data-theme='neon'] .nx-bplay { position: relative; } html[data-theme='neon'] .nx-bplay .nx-dot { top: -26px; right: calc(50% - 34px); background: var(--gold); color: #1a1206; z-index: 2; } html[data-theme='neon'] .nx-gift { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 28px; } html[data-theme='neon'] .nx-gift b { font: 700 26px/1.1 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-gift small { font: 500 13px/1.2 var(--nx-ui); } /* the Shop, below level 3: what you can open right now */ html[data-theme='neon'] .nx-mode .nx-can { display: block; margin-top: 2px; font: 700 11px/1.2 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-mode[hidden] { display: none; } html[data-theme='neon'] .nx-mode::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(245, 200, 98, 0.8); transform: scaleY(0); transition: transform 0.22s var(--ease-out); } html[data-theme='neon'] .nx-mode .th { position: relative; display: block; width: 82px; height: 50px; overflow: hidden; border: 1px solid var(--line-2); transition: border-color 0.18s, box-shadow 0.2s; } html[data-theme='neon'] .nx-mode .th img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.85); scale: 1.02; transition: scale 0.4s var(--ease-out), filter 0.25s; } html[data-theme='neon'] .nx-mode .th::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255, 236, 180, 0.55) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 130% 0; } html[data-theme='neon'] .nx-mode .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme='neon'] .nx-mode .tx b { font: 700 16px/1.15 var(--nx-cap); letter-spacing: 0.02em; color: #e8dfd0; transition: color 0.15s; } html[data-theme='neon'] .nx-mode .tx small { font-size: 12px; line-height: 1.3; color: var(--muted); } html[data-theme='neon'] .nx-mode.live .tx small { color: var(--gold); } html[data-theme='neon'] .nx-mode .lk { display: none; opacity: 0.7; } html[data-theme='neon'] .nx-mode .lk :is(img, canvas) { display: block; width: 14px; height: 14px; } html[data-theme='neon'] .nx-mode.mode-closed { filter: none; opacity: 0.5; } html[data-theme='neon'] .nx-mode.mode-closed .lk { display: block; } html[data-theme='neon'] .nx-mode.mode-closed .th img { filter: grayscale(1) brightness(0.6); } html[data-theme='neon'] .nx-mode:active { transform: scale(0.985); } html[data-theme='neon'] .nx-mode.sel { background: linear-gradient(90deg, rgba(245, 200, 98, 0.13), rgba(245, 200, 98, 0.02)); } html[data-theme='neon'] .nx-mode.sel::before { transform: none; } html[data-theme='neon'] .nx-mode.sel .th { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 200, 98, 0.35); } html[data-theme='neon'] .nx-mode.sel .th img { filter: none; } html[data-theme='neon'] .nx-mode.sel .th::after { animation: nx-sheen 4s ease-in-out infinite; } html[data-theme='neon'] .nx-mode.sel .tx b { color: var(--gold); } /* the chosen mode */ html[data-theme='neon'] .hud-surrender[hidden] { display: none; } /* Play with friends: its two main choices side by side */ html[data-theme='neon'] .nx-room-new, html[data-theme='neon'] .nx-room-join { flex: 1 1 0; min-width: 150px; white-space: nowrap; } /* a room's code: solid, never gradient text (a phone's browser can leave that transparent, and then there's no code to share) */ html[data-theme='neon'] .lobby-code { background: none; color: var(--gold); -webkit-text-fill-color: var(--gold); text-shadow: none; font: 700 32px/1.2 var(--nx-ui); letter-spacing: 6px; -webkit-user-select: text; user-select: text; } /* Snake's box: its tabs, what it is or the week's leaderboard, PLAY always there */ html[data-theme='neon'] .nx-sb { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 16px 16px; border: 1px solid var(--line-1); background: rgba(13, 10, 18, 0.96); } /* on Play's page: the same picture as every mode, its words over it at the bottom left, the same PLAY; its tabs across the top */ html[data-theme='neon'] .nx-sb.in-lobby { position: absolute; inset: 0; z-index: 3; gap: 0; padding: 0; border: 0; background: none; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sidetabs { flex: none; background: rgba(8, 7, 12, 0.72); } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-who { flex: none; margin: 14px 36px 0; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-pane { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 18px 36px 0; font-size: 14px; color: #d2cabd; text-shadow: 0 1px 4px #000; } /* (the words sit at the bottom, as every mode's; when they don't fit they scroll) */ html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-pane > :first-child { margin-top: auto; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-pane > * { flex: none; max-width: 620px; } html[data-theme='neon'] .nx-sb.in-lobby .k { font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-sb.in-lobby .sk-title { width: min(300px, 60%); margin: 6px 0 12px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.75)); } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-lead { font-size: 15px; color: #f3ebde; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-pane p { margin: 0 0 8px; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-row { width: 100%; max-width: 360px; padding: 2px 0; } /* (the leaderboard: from the top, over a darker picture) */ html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-pane:has(.nx-sb-rows) > :first-child { margin-top: 0; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-pane:has(.nx-sb-rows) > * { max-width: none; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-act { flex: none; padding: 16px 36px 30px; } html[data-theme='neon'] .nx-sb.in-lobby .nx-sb-act .nx-sb-go { position: relative; } html[data-theme='neon'] .screen-snake .nx-sb { max-height: calc(100dvh - 150px); } html[data-theme='neon'] .nx-sb-pane { flex: 1 1 0; min-height: 120px; overflow-y: auto; font-size: 14px; line-height: 1.45; color: #a79e90; } html[data-theme='neon'] .screen-snake .nx-sb-pane { flex-basis: auto; } html[data-theme='neon'] .nx-sb-pane p { margin: 0 0 12px; } html[data-theme='neon'] .nx-sb-pane .nx-sb-lead { font-size: 15px; color: #f3ebde; } html[data-theme='neon'] .nx-sb-pane h3 { margin: 0 0 10px; font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-sb-pane .sk-title { display: block; width: min(320px, 70%); height: auto; margin: 0 auto 12px; } html[data-theme='neon'] .nx-sb-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: #d8d0c2; } html[data-theme='neon'] .nx-sb-pane small { display: block; margin-top: 4px; font-size: 12px; } html[data-theme='neon'] .nx-sb-who { display: flex; gap: 6px; } html[data-theme='neon'] .nx-sb-rows { display: flex; flex-direction: column; gap: 4px; } html[data-theme='neon'] .nx-sb-note { margin: 8px 0; font-size: 13px; } html[data-theme='neon'] .nx-sb-go { flex: none; } html[data-theme='neon'] .nx-sb .daily-row { font: 600 14px/1.3 var(--nx-ui); } html[data-theme='neon'] .nx-sb .daily-row .num { font: 700 14px/1.3 var(--nx-ui); } html[data-theme='neon'] .nx-sb .daily-row.me { border-color: var(--gold); } html[data-theme='neon'] .nx-pl-detail { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; } html[data-theme='neon'] .nx-pl-pics { position: absolute; inset: 0; } html[data-theme='neon'] .nx-pl-pics > .art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; scale: 1.05; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -8px); filter: saturate(0.85) brightness(0.9); transition: translate 0.6s var(--ease-out); } html[data-theme='neon'] .nx-pl-pics > .art.on { opacity: 1; animation: nx-drift 18s ease-out both; } html[data-theme='neon'] .nx-pl-pics::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 7, 12, 0.97), rgba(8, 7, 12, 0.72) 30%, rgba(8, 7, 12, 0.05) 62%), linear-gradient(90deg, rgba(8, 7, 12, 0.55), transparent 55%); } html[data-theme='neon'] .nx-pl-info { position: absolute; z-index: 3; left: 36px; right: 36px; bottom: 112px; max-width: 620px; pointer-events: none; } html[data-theme='neon'] .nx-pl-info .k { font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .nx-pl-info h2 { margin: 8px 0 10px; font: 700 clamp(34px, 4vw, 54px)/1.03 var(--nx-cap); color: #f3ebde; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.75)); } html[data-theme='neon'] .nx-pl-info p { margin: 0; font-size: 15px; line-height: 1.45; color: #d2cabd; text-shadow: 0 1px 4px #000; } html[data-theme='neon'] .nx-pl-info .st { display: inline-block; margin-top: 12px; padding: 4px 10px; border: 1px solid var(--gold-2); background: rgba(13, 10, 18, 0.7); color: var(--gold); font-size: 12px; font-weight: 600; } html[data-theme='neon'] .nx-pl-act { position: absolute; z-index: 3; left: 36px; bottom: 30px; display: flex; align-items: center; gap: 14px; } html[data-theme='neon'] .nx-pl-go { position: relative; isolation: isolate; height: 62px; min-width: 280px; padding: 0 46px; border: 0; background: none; color: #1a1206 !important; font: 700 24px/1 var(--nx-cap) !important; letter-spacing: 0.16em; text-transform: uppercase; transition: transform 0.12s var(--ease-out), filter 0.2s; } html[data-theme='neon'] .nx-pl-go::before, html[data-theme='neon'] .nx-pl-go::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } html[data-theme='neon'] .nx-pl-go::before { background: linear-gradient(180deg, #ffd84a, #eeb91f); transition: background 0.15s; } html[data-theme='neon'] .nx-pl-go::after { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58%) no-repeat; background-size: 300% 100%; animation: nx-sheen 5.5s ease-in-out infinite; } html[data-theme='neon'] .nx-pl-go .lbl { display: inline-block; transition: letter-spacing 0.25s var(--ease-out); } html[data-theme='neon'] .nx-pl-go:active { transform: translateY(1px) scale(0.97); } html[data-theme='neon'] .nx-pl-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } html[data-theme='neon'] .nx-pl-go.mode-closed { filter: grayscale(1) brightness(0.6); } html[data-theme='neon'] .nx-pl-detail .nx-hero-pet { z-index: 2; right: 30px; bottom: 26px; animation: none; } /* (already there, like everything on this page) */ html[data-theme='neon'] .nx-pl-detail .nx-hero-pet canvas { width: 130px !important; height: 130px !important; } /* (the bar's PLAY rests while you're here: the yellow one is this page's) */ html[data-theme='neon'] .nx-playbtn.on { color: var(--gold); filter: none; } html[data-theme='neon'] .nx-playbtn.on::before { background: rgba(245, 200, 98, 0.14); } html[data-theme='neon'] .nx-playbtn.on::after { display: none; } @media (hover: hover) { html[data-theme='neon'] .nx-pl-tab:not(.on):hover { color: #f3ebde !important; background: rgba(255, 255, 255, 0.03); } html[data-theme='neon'] .nx-mode:not(.sel):hover { background: rgba(245, 200, 98, 0.06); transform: translateX(3px); } html[data-theme='neon'] .nx-mode:hover .th { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 200, 98, 0.4); } html[data-theme='neon'] .nx-mode:hover .th img { scale: 1.2; filter: saturate(1.1) brightness(1.05); } html[data-theme='neon'] .nx-mode:hover .th::after { animation: nx-sheen 1.3s ease-in-out infinite; } html[data-theme='neon'] .nx-mode:hover .tx b { color: var(--gold); } html[data-theme='neon'] .nx-pl-go:hover { filter: drop-shadow(0 0 16px rgba(255, 216, 74, 0.7)); transform: translateY(-2px); } html[data-theme='neon'] .nx-pl-go:hover::before { background: linear-gradient(180deg, #ffe680, #f7c636); } html[data-theme='neon'] .nx-pl-go:hover::after { animation-duration: 1.1s; } html[data-theme='neon'] .nx-pl-go:hover .lbl { letter-spacing: 0.22em; } } @media (max-width: 960px) { html[data-theme='neon'] .nx-play { height: auto; min-height: 100%; box-shadow: none; } html[data-theme='neon'] .nx-pl-info { left: 24px; right: 24px; bottom: 100px; } html[data-theme='neon'] .nx-pl-act { left: 24px; bottom: 24px; } html[data-theme='neon'] .nx-pl-go { min-width: 220px; height: 56px; } } @media (max-width: 760px) { html[data-theme='neon'] .nx-play { display: block; } html[data-theme='neon'] .nx-pl-rail { border-right: 0; background: none; } html[data-theme='neon'] .nx-pl-detail { display: none; } html[data-theme='neon'] .nx-pl-list { padding: 10px; gap: 6px; overflow: visible; } html[data-theme='neon'] .nx-mode { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 8px; border: 1px solid var(--line-1); background: var(--nx-panel); } html[data-theme='neon'] .nx-mode.sel { background: var(--nx-panel); } html[data-theme='neon'] .nx-mode.sel::before { transform: scaleY(0); } html[data-theme='neon'] .nx-mode.sel .th { border-color: var(--line-2); box-shadow: none; } html[data-theme='neon'] .nx-mode.sel .tx b { color: #e8dfd0; } html[data-theme='neon'] .nx-mode .th { width: 96px; height: 64px; } } @keyframes nx-card-in { from { opacity: 0; transform: translateY(16px); } } /* ================================================================== every screen: no window, as the prototype's (the place under a dim) */ html[data-theme='neon'] #app > .screen.win { top: calc(var(--safe-t) + var(--hub-bar-h)); bottom: calc(var(--safe-b) + var(--hub-bottom-h)); left: 0; right: 0; width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: linear-gradient(180deg, rgba(8, 6, 11, 0.8), rgba(8, 6, 11, 0.9)); } html[data-theme='neon']:not(.hub-bar-on) #app > .screen.win { top: var(--safe-t); bottom: var(--safe-b); } html[data-theme='neon'] #app > .screen.win > * { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; } html[data-theme='neon'] .screen.win > .screen-head { padding: 22px 28px 10px; gap: 16px; background: none; border: 0; box-shadow: none; } html[data-theme='neon'] .screen.win > .screen-head .title { font-size: 36px; line-height: 1.05; } html[data-theme='neon'] .screen.win > .screen-body { padding: 8px 28px 30px; } html[data-theme='neon'] .screen.win .screen-body > .max { max-width: none; } html[data-theme='neon'] .screen.win > div:not(.screen-head):not(.screen-body) { padding-left: 28px; padding-right: 28px; } @media (max-width: 760px) { html[data-theme='neon'] .screen.win > .screen-head { padding: 14px 16px 6px; } html[data-theme='neon'] .screen.win > .screen-head .title { font-size: 30px; } html[data-theme='neon'] .screen.win > .screen-body { padding: 6px 16px 24px; } html[data-theme='neon'] .screen.win > div:not(.screen-head):not(.screen-body) { padding-left: 16px; padding-right: 16px; } } /* ================================================================== Heroes: the toolbar, the cards, the chosen one's panel */ html[data-theme='neon'] .nx-deck { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; } html[data-theme='neon'] .nx-deck-main { min-width: 0; } html[data-theme='neon'] .nx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; } html[data-theme='neon'] .nx-toolbar .grow { flex: 1; } html[data-theme='neon'] .nx-input { height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.4); color: var(--text); font: 400 15px var(--font-text); outline: 0; transition: border-color 0.25s, box-shadow 0.25s; } html[data-theme='neon'] .nx-input:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 200, 98, 0.12); } html[data-theme='neon'] input.nx-input { width: 240px; } html[data-theme='neon'] .nx-select { cursor: pointer; } html[data-theme='neon'] .nx-chips { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme='neon'] .nx-chip { --c: var(--text-2); height: 32px; padding: 0 13px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.25); color: var(--text-2); cursor: pointer; font: 700 12px/1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.25s var(--ease-out); } html[data-theme='neon'] .nx-chip:hover { border-color: var(--c); color: var(--text); } html[data-theme='neon'] .nx-chip.on { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: var(--text); box-shadow: 0 0 14px -4px var(--c), inset 0 0 12px -6px var(--c); } html[data-theme='neon'] .nx-owned { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; } html[data-theme='neon'] .nx-owned b { font: 400 26px/1 var(--font-num); color: var(--gold); } html[data-theme='neon'] .nx-owned small { font-size: 11px; color: var(--muted); } html[data-theme='neon'] .nx-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } html[data-theme='neon'] .nx-ccard { --fc: #6492ff; position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; isolation: isolate; border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); font: inherit; background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--fc) 26%, #1c1724), #120f17 75%); border: 1px solid color-mix(in srgb, var(--fc) 35%, var(--line-1)); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.35s var(--ease-out), box-shadow 0.3s, border-color 0.3s; animation: nx-card-in 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); } html[data-theme='neon'] .nx-ccard::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 55%); background-size: 300% 100%; background-position: 120% 0; } html[data-theme='neon'] .nx-ccard:hover { transform: translateY(-5px); border-color: var(--fc); box-shadow: 0 22px 34px -16px #000, 0 0 24px -8px var(--fc); } html[data-theme='neon'] .nx-ccard:hover::before { background-position: -40% 0; transition: background-position 0.9s var(--ease-out); } html[data-theme='neon'] .nx-ccard.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 30px -6px var(--gold); } html[data-theme='neon'] .nx-ccard .pic { position: absolute; left: 50%; top: 8%; width: 88%; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.6)); transition: transform 0.5s var(--ease-out); } html[data-theme='neon'] .nx-ccard span.pic { display: grid; place-items: center; } html[data-theme='neon'] .nx-ccard:hover .pic { transform: translateX(-50%) translateY(-4px) scale(1.06); } html[data-theme='neon'] .nx-ccard .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; background: linear-gradient(0deg, rgba(10, 8, 13, 0.98) 40%, transparent); } html[data-theme='neon'] .nx-ccard .foot b { display: block; font: 700 17px/1 var(--font-title); } html[data-theme='neon'] .nx-ccard .foot small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); } html[data-theme='neon'] .nx-ccard .foot small.teal { color: var(--gold); } html[data-theme='neon'] .nx-ccard .stars { display: flex; gap: 2px; margin-top: 6px; color: var(--gold); font-size: 11px; letter-spacing: 1px; } html[data-theme='neon'] .nx-ccard .stars .off { color: var(--ink-4); } html[data-theme='neon'] .nx-ccard .tier { position: absolute; z-index: 2; left: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 5px; display: grid; place-items: center; border-radius: 5px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line-3); font: 700 13px/1 var(--font-title); color: var(--gold); } html[data-theme='neon'] .nx-ccard .facs { position: absolute; z-index: 2; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; } html[data-theme='neon'] .nx-ccard .facs i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1px solid currentColor; font-size: 10px; font-style: normal; } html[data-theme='neon'] .nx-ccard.locked .pic { filter: grayscale(1) brightness(0.35) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.6)); } html[data-theme='neon'] .nx-ccard.locked .foot b { color: var(--muted); } html[data-theme='neon'] .new-mark { padding: 0 6px; border: 0; border-radius: 7px; background: var(--gold); color: #1a1206; font: 700 10px/14px var(--nx-ui); letter-spacing: 0; text-transform: uppercase; box-shadow: none; text-shadow: none; animation: none; } html[data-theme='neon'] .nx-ccard .new-mark { position: absolute; top: auto; bottom: 8px; left: auto; right: 8px; transform: none; z-index: 4; } html[data-theme='neon'] .nx-client :is(.nx-ccard, .it-tile) .new-mark { top: 3px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 4; } /* (inside: a tile cuts what's over its edge) */ html[data-theme='neon'] .nx-detail { position: sticky; top: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; } html[data-theme='neon'] .nx-skins { position: absolute; z-index: 2; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; } html[data-theme='neon'] .nx-skins .sk { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; overflow: hidden; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.45); cursor: pointer; transition: all 0.25s var(--ease-out); } html[data-theme='neon'] .nx-skins .sk img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } html[data-theme='neon'] .nx-skins .sk:hover { transform: scale(1.08); border-color: var(--line-3); } html[data-theme='neon'] .nx-skins .sk.on { border-color: var(--gold); box-shadow: 0 0 12px -2px var(--gold); } html[data-theme='neon'] .nx-stat-row { font-family: var(--font-label); display: grid; grid-template-columns: 60px 1fr 44px; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); } html[data-theme='neon'] .nx-stat-row b { text-align: right; font: 400 22px/1 var(--font-num); letter-spacing: 0.04em; color: var(--text); } html[data-theme='neon'] .nx-detail .reach-grid i.me { background: var(--gold); box-shadow: 0 0 8px var(--gold); } html[data-theme='neon'] .nx-detail .inv-tabs { margin: 12px 20px 0; } @media (max-width: 1280px) { html[data-theme='neon'] .nx-deck { grid-template-columns: minmax(0, 1fr) 360px; } } @media (max-width: 1000px) { html[data-theme='neon'] .nx-deck { grid-template-columns: minmax(0, 1fr); } html[data-theme='neon'] .nx-detail { position: static; } } @media (max-width: 760px) { html[data-theme='neon'] input.nx-input { width: 100%; } html[data-theme='neon'] .nx-cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } html[data-theme='neon'] .nx-ccard .foot b { font-size: 14px; } html[data-theme='neon'] .nx-ccard .foot small { display: none; } } /* ================================================================== Shop: today's skin, the chests as cards, the pass */ @keyframes nx-float { 50% { transform: translateY(-8px); } } @keyframes nx-spin { to { transform: rotate(360deg); } } @media (max-width: 760px) { } /* ================================================================== Profile: the hero card, numbers, matches | the season, most played, cards */ html[data-theme='neon'] .nx-prof { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; margin-bottom: 22px; } html[data-theme='neon'] .nx-pf-left { display: flex; flex-direction: column; gap: 22px; min-width: 0; } html[data-theme='neon'] .nx-prof .pf-hero { position: relative; } html[data-theme='neon'] .nx-pf-card { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9); } html[data-theme='neon'] .nx-pf-card::before, html[data-theme='neon'] .nx-pf-card::after { content: ''; position: absolute; z-index: 3; width: 14px; height: 14px; border: 2px solid var(--gold-2); pointer-events: none; } html[data-theme='neon'] .nx-pf-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; } html[data-theme='neon'] .nx-pf-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; } html[data-theme='neon'] .nx-pf-bg { display: block; width: 100% !important; height: 170px !important; object-fit: cover; image-rendering: pixelated; -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); } html[data-theme='neon'] .nx-pf-ava { position: absolute; left: 24px; top: 96px; z-index: 1; width: 130px; height: 130px; display: grid; place-items: center; border-radius: 0; background: radial-gradient(circle at 50% 35%, #3a3046, #1a1520); box-shadow: 0 0 0 3px var(--gold-2), 0 12px 24px rgba(0, 0, 0, 0.6); } html[data-theme='neon'] .nx-pf-ava :is(canvas, img, .framed) { max-width: 100px; max-height: 100px; } html[data-theme='neon'] .nx-pf-ava .lv { position: absolute; right: 4px; bottom: 6px; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 5px; background: linear-gradient(180deg, #ffe39a, var(--gold-2)); color: var(--ink-0); font: 400 24px/26px var(--font-num); text-align: center; box-shadow: 0 0 0 2px var(--ink-1); } html[data-theme='neon'] .nx-pf-who { position: relative; z-index: 1; min-height: 118px; padding: 14px 150px 22px 176px; } html[data-theme='neon'] .nx-pf-who h2 { margin: 6px 0 0; font: 700 40px/1 var(--font-title); color: var(--text); } html[data-theme='neon'] .nx-pf-who .clan { color: var(--gold); } html[data-theme='neon'] .nx-pf-who .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } html[data-theme='neon'] .nx-pf-rank { position: absolute; z-index: 1; right: 22px; top: 110px; display: flex; flex-direction: column; align-items: center; text-align: center; } html[data-theme='neon'] .nx-pf-rank :is(img, canvas) { filter: drop-shadow(0 0 18px rgba(255, 181, 47, 0.45)); } html[data-theme='neon'] .nx-pf-rank b { margin-top: 4px; font: 700 18px/1 var(--font-title); color: var(--gold); } html[data-theme='neon'] .nx-pf-rank small { font: 400 18px/1 var(--font-num); color: var(--text-2); } html[data-theme='neon'] .nx-pf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } html[data-theme='neon'] .nx-pf-tile { padding: 14px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-1); } html[data-theme='neon'] .nx-pf-tile small { font-family: var(--font-label); display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } html[data-theme='neon'] .nx-pf-tile b { display: block; margin-top: 6px; font: 400 34px/1 var(--font-num); color: var(--text); } html[data-theme='neon'] .nx-pf-tile span { display: block; margin-top: 4px; font-size: 12px; color: var(--good); } html[data-theme='neon'] .nx-match { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.25s; } html[data-theme='neon'] .nx-match + .nx-match { box-shadow: 0 -1px 0 var(--line-1); } html[data-theme='neon'] .nx-match:hover { background: linear-gradient(90deg, rgba(245, 200, 98, 0.08), transparent 70%); } html[data-theme='neon'] .nx-match .mk { width: 4px; align-self: stretch; border-radius: 2px; background: var(--good); box-shadow: 0 0 8px var(--good); } html[data-theme='neon'] .nx-match.loss .mk { background: var(--bad); box-shadow: 0 0 8px var(--bad); } html[data-theme='neon'] .nx-match.draw .mk { background: var(--muted); box-shadow: none; } html[data-theme='neon'] .nx-match .mt { min-width: 120px; } html[data-theme='neon'] .nx-match .mt b { display: block; } html[data-theme='neon'] .nx-match .mt b span { font-weight: 400; color: var(--muted); } html[data-theme='neon'] .nx-match .mt small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); } html[data-theme='neon'] .nx-match .mteam { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } html[data-theme='neon'] .nx-match .mteam .vs { margin: 0 6px; font-size: 12px; color: var(--muted); } html[data-theme='neon'] .nx-match .mgrade { flex: none; min-width: 30px; text-align: center; color: var(--muted); } html[data-theme='neon'] .nx-pf-season { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; } html[data-theme='neon'] .nx-pf-season .grow { flex: 1; min-width: 200px; } html[data-theme='neon'] .nx-pf-season .nx-kicker { margin-bottom: 12px; } html[data-theme='neon'] .ringbox { position: relative; width: 120px; height: 120px; } html[data-theme='neon'] .nx-ring { width: 100%; height: 100%; transform: rotate(-90deg); } html[data-theme='neon'] .nx-ring circle { fill: none; stroke-width: 9; } html[data-theme='neon'] .nx-ring .bg { stroke: rgba(255, 255, 255, 0.06); } html[data-theme='neon'] .nx-ring .fg { stroke: var(--gold); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(245, 200, 98, 0.6)); transition: stroke-dashoffset 1.6s var(--ease-out); } html[data-theme='neon'] .ringbox .rv { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } html[data-theme='neon'] .ringbox .rv b { display: block; font: 400 34px/1 var(--font-num); } html[data-theme='neon'] .ringbox .rv small { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } html[data-theme='neon'] .nx-pf-medals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } html[data-theme='neon'] .nx-pf-medals .off { filter: grayscale(1) brightness(0.35); } html[data-theme='neon'] .nx-pf-most .nx-row .rt .nx-bar { margin-top: 6px; height: 6px; } @media (max-width: 1000px) { html[data-theme='neon'] .nx-prof { grid-template-columns: 1fr; } } @media (max-width: 760px) { html[data-theme='neon'] .nx-pf-bg { height: 130px !important; } html[data-theme='neon'] .nx-pf-ava { left: 50%; top: 60px; width: 110px; height: 110px; transform: translateX(-50%); } html[data-theme='neon'] .nx-pf-who { padding: 60px 16px 16px; text-align: center; } html[data-theme='neon'] .nx-pf-who .nx-kicker, html[data-theme='neon'] .nx-pf-who .tags { justify-content: center; } html[data-theme='neon'] .nx-pf-who h2 { font-size: 30px; } html[data-theme='neon'] .nx-pf-rank { position: static; padding-bottom: 18px; } html[data-theme='neon'] .nx-pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme='neon'] .nx-match .mteam { display: none; } } /* ================================================================== the draft, as the prototype's: big champion cards, tall pick slots */ html[data-theme='neon'] .dr-head { padding: 12px 18px; } html[data-theme='neon'] .dr-title .t { font: 700 26px/1.05 var(--font-title); letter-spacing: 0.02em; background: linear-gradient(180deg, #fff6dc 0%, var(--gold) 55%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); } html[data-theme='neon'] .dr-steps { border: 1px solid var(--line-1); border-radius: 8px; background: rgba(0, 0, 0, 0.35); } html[data-theme='neon'] .dr-grid { gap: 14px; padding: 14px; border: 0; border-radius: 10px; background: rgba(6, 5, 9, 0.35); grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } html[data-theme='neon'] .champ-tile { aspect-ratio: 3 / 4; justify-content: flex-end; padding: 0 6px 10px; overflow: visible; border-radius: 10px; background: radial-gradient(120% 80% at 50% 30%, rgba(100, 146, 255, 0.22), #120f17 75%); border: 1px solid var(--line-2); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s; } html[data-theme='neon'] .champ-tile:has(.ct-fac.wild) { background: radial-gradient(120% 80% at 50% 30%, rgba(107, 214, 114, 0.22), #120f17 75%); } html[data-theme='neon'] .champ-tile:has(.ct-fac.arcane) { background: radial-gradient(120% 80% at 50% 30%, rgba(185, 138, 255, 0.24), #120f17 75%); } html[data-theme='neon'] .champ-tile:has(.ct-fac.shadow) { background: radial-gradient(120% 80% at 50% 30%, rgba(255, 99, 144, 0.22), #120f17 75%); } html[data-theme='neon'] .champ-tile:not(.disabled):hover { transform: translateY(-5px); border-color: var(--line-3); box-shadow: 0 22px 34px -16px #000, 0 0 24px -8px rgba(245, 200, 98, 0.5); filter: none; } html[data-theme='neon'] .champ-tile .ct-icon { position: absolute; left: 50%; top: 8%; width: 86%; height: auto; aspect-ratio: 1; transform: translateX(-50%); border: 0; background: none; box-shadow: none; } html[data-theme='neon'] .champ-tile .ct-icon canvas { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.6)); } html[data-theme='neon'] .champ-tile .ct-icon { display: grid; place-items: center; overflow: visible; } html[data-theme='neon'] .champ-tile .ct-name { position: relative; z-index: 1; width: calc(100% + 12px); margin: 0 -6px; padding: 22px 8px 0; justify-content: flex-start; text-align: left; font: 700 15px/1 var(--font-title); color: var(--text); background: linear-gradient(0deg, rgba(10, 8, 13, 0.95) 40%, transparent); } html[data-theme='neon'] .champ-tile .ct-facs { position: absolute; z-index: 2; right: 8px; top: 8px; flex-direction: column; gap: 4px; } html[data-theme='neon'] .champ-tile .ct-fac { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.6); } html[data-theme='neon'] .champ-tile .ct-tier { top: 8px; left: 8px; z-index: 2; min-width: 24px; padding: 4px 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line-3); } html[data-theme='neon'] .champ-tile .ct-lock { top: 6px; left: 8px; z-index: 2; } html[data-theme='neon'] .champ-tile .ct-picks, html[data-theme='neon'] .champ-tile .ct-order { top: -8px; right: -6px; z-index: 3; } html[data-theme='neon'] .champ-tile.chosen { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 30px -6px var(--gold); } html[data-theme='neon'] .dr-team { padding: 12px; } html[data-theme='neon'] .dr-team-head b { font: 700 18px/1.1 var(--font-title); letter-spacing: 0.02em; } html[data-theme='neon'] .dr-team.p0 .dr-team-head b { color: #8cb0ff; } html[data-theme='neon'] .dr-team.p1 .dr-team-head b { color: #ff9aa6; } html[data-theme='neon'] .dr-slots { gap: 10px; } html[data-theme='neon'] .dr-slot { min-height: 64px; border-radius: 8px; } html[data-theme='neon'] .dr-team.active .dr-slot:not(.filled):first-of-type { border: 1px solid var(--gold); box-shadow: 0 0 18px -6px var(--gold), inset 0 0 12px -6px var(--gold); } html[data-theme='neon'] .dr-preview { border-radius: 10px; } /* before the fight: the heroes' lists and the turn's pill have nothing to say, so they don't show their frames */ html[data-theme='neon'] .battle .roster:empty { display: none; } html[data-theme='neon'] .battle .turn-banner:empty { visibility: hidden; } /* the draft in the client's look: clean words (the pixel font is the fight's), solid boxes over the place, flat corners, and cards small enough to see the whole roster, which only scrolls in its own box */ html[data-theme='neon'] .dr { --font-text: var(--nx-ui); --font-label: var(--nx-cap); } html[data-theme='neon'] .dr { font-family: var(--nx-ui); } html[data-theme='neon'] .dr :is(.num, .dr-count, .dr-count-step, input, small, .dr-preview, .dr-preview *) { font-family: var(--nx-ui); } html[data-theme='neon'] .dr-filters .btn:is(.active, .selected, .on, .teal) { color: var(--gold); } /* the info box: who, what they do, what they wear; each part set apart */ html[data-theme='neon'] .dr-preview { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.4; } html[data-theme='neon'] .nx-pv-top { flex: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-pv-top .pic { flex: none; display: grid; place-items: center; padding: 3px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); } html[data-theme='neon'] .nx-pv-top h4 { margin: 0; font: 700 19px/1.1 var(--nx-cap); color: #fff6dc; } html[data-theme='neon'] .nx-pv-top small { color: #a79e90; font-size: 12px; } html[data-theme='neon'] .nx-pv-top .stats { display: flex; gap: 8px; margin-top: 3px; white-space: nowrap; } html[data-theme='neon'] .nx-pv-top .stats b { color: #fff6dc; } html[data-theme='neon'] .nx-pv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } html[data-theme='neon'] .nx-pv-tags .nx-fac-tag { height: 22px; padding: 0 6px 0 4px; font-size: 11px; } /* the squares it reaches, from each kind of place on the board */ html[data-theme='neon'] .nx-pv-reach { flex: none; margin-inline: auto; } html[data-theme='neon'] .nx-pv-reach .reach-set { flex: none; display: flex; gap: 4px; } html[data-theme='neon'] .nx-pv-reach .reach-grid { grid-template-columns: repeat(3, 8px); gap: 2px; padding: 2px; border: 1px solid var(--line-1); background: rgba(0, 0, 0, 0.35); } html[data-theme='neon'] .nx-pv-reach .reach-grid i { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.08); box-shadow: none; } html[data-theme='neon'] .nx-pv-reach .reach-grid i.hit { background: #e0555a; } html[data-theme='neon'] .nx-pv-reach .reach-grid i.me { background: var(--gold); } html[data-theme='neon'] .nx-pv-abs { flex: none; display: flex; flex-direction: column; gap: 5px; } html[data-theme='neon'] .nx-pv-ab { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-left: 3px solid #8a8378; background: rgba(0, 0, 0, 0.3); } html[data-theme='neon'] .nx-pv-ab.skill { border-left-color: #7fb4ff; } html[data-theme='neon'] .nx-pv-ab.ult { border-left-color: var(--gold); } html[data-theme='neon'] .nx-pv-ab b { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #fff6dc; } html[data-theme='neon'] .nx-pv-ab.skill b { color: #9cc6ff; } html[data-theme='neon'] .nx-pv-ab.ult b { color: var(--gold); } html[data-theme='neon'] .nx-pv-top .who { flex: 1; min-width: 72px; } html[data-theme='neon'] .nx-pv-items { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-1); } html[data-theme='neon'] .nx-pv-slot { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; } html[data-theme='neon'] .nx-pv-slot small { color: var(--gold); font-size: 11px; line-height: 1.25; } html[data-theme='neon'] .nx-pv-item { flex: none; display: grid; place-items: center; width: 36px; height: 36px; } html[data-theme='neon'] .nx-pv-item .box { display: block; width: 36px; height: 36px; border: 1px dashed var(--line-3); background: rgba(0, 0, 0, 0.3); } html[data-theme='neon'] .dr-preview .dr-hint { flex: none; padding-top: 8px; border-top: 1px solid var(--line-1); font-size: 12px; } @media (min-width: 1001px) { html[data-theme='neon'] .dr-side { overflow: hidden; } html[data-theme='neon'] .dr-side > .dr-team { flex: none; } html[data-theme='neon'] .dr-side > .dr-preview { flex: 1; min-height: 0; overflow-y: auto; } } @media (min-width: 1101px) { /* both rosters the same width and, side by side in one row, the same height; the info box under the right one, as tall as what it says */ html[data-theme='neon'] .dr-body { grid-template-columns: 248px minmax(0, 1fr) 248px; grid-template-rows: auto minmax(0, 1fr); } html[data-theme='neon'] .dr-side { display: contents; } html[data-theme='neon'] .dr-body .dr-team { grid-row: 1; align-self: stretch; } html[data-theme='neon'] .dr-body > .dr-team { grid-column: 1; } html[data-theme='neon'] .dr-side > :first-child { grid-column: 3; grid-row: 1; } html[data-theme='neon'] .dr-pool { grid-column: 2; grid-row: 1 / span 2; } html[data-theme='neon'] .dr-side > .dr-preview { grid-column: 3; grid-row: 2; align-self: start; max-height: 100%; flex: none; } } /* Auto fight's three speeds, joined */ html[data-theme='neon'] .hud-speeds { display: flex; } html[data-theme='neon'] .hud-speeds .btn { min-width: 38px; padding-inline: 6px; font: 700 13px/1 var(--nx-ui); } html[data-theme='neon'] .hud-speeds .btn + .btn { margin-left: -1px; } html[data-theme='neon'] .hud-pause { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; } html[data-theme='neon'] .hud-pause[hidden] { display: none; } html[data-theme='neon'] .hud-pause i { width: 4px; height: 14px; background: currentColor; } /* frozen: lit, and a play triangle to carry on */ html[data-theme='neon'] .hud-pause.on { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } html[data-theme='neon'] .hud-pause.on i:first-child { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; background: none; } html[data-theme='neon'] .hud-pause.on i:last-child { display: none; } html[data-theme='neon'] .hud-speeds.locked { cursor: not-allowed; } html[data-theme='neon'] .hud-speeds.locked .btn { pointer-events: none; } html[data-theme='neon'] .hud-speeds .btn.on { position: relative; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); opacity: 1; } .narrow .hud-speeds .btn { min-width: 28px; } /* on the board: a sword for an attack, a wand for any ability (the rule for every button would win without the theme here) */ html[data-theme='neon'] .game-cursors .cell-btn[data-cur='sword'], html[data-theme='neon'].game-cursors .cell-btn[data-cur='sword'] { cursor: var(--cur-sword), crosshair; } html[data-theme='neon'] .game-cursors .cell-btn[data-cur='wand'], html[data-theme='neon'].game-cursors .cell-btn[data-cur='wand'] { cursor: var(--cur-wand), pointer; } /* the turn's clock under the turn bar: the seconds and the bar in a row */ html[data-theme='neon'] .battle .timer.nx-over { flex-direction: row; gap: 10px; width: 210px; font-size: 24px; } html[data-theme='neon'] .battle .timer.nx-over .timer-bar { flex: 1; width: auto; height: 10px; border-width: 1px; box-shadow: none; } /* a champion to place, its "i" in the corner */ html[data-theme='neon'] .nx-place-card { position: relative; display: flex; } /* who picks: their name over their calling card */ html[data-theme='neon'] .dr-team-top { position: relative; margin: -12px -12px 2px; padding: 26px 12px 8px; overflow: hidden; border-bottom: 1px solid var(--line-2); } html[data-theme='neon'] .dr-team-top .dr-team-card { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; } html[data-theme='neon'] .dr-team-top::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8, 7, 12, 0.92), rgba(8, 7, 12, 0.15)); } html[data-theme='neon'] .dr-team-top .dr-team-head { position: relative; z-index: 1; } /* phones: no room for the info box or the cards; a long press on a champion tells the same */ @media (max-width: 1000px) { html[data-theme='neon'] .dr-preview, html[data-theme='neon'] .dr-team-top .dr-team-card, html[data-theme='neon'] .dr-team-top::after { display: none; } html[data-theme='neon'] .dr-team-top { margin: 0; padding: 0; border: 0; } } /* the draft's filters: a list hanging from each */ html[data-theme='neon'] .nx-dd-btn { gap: 6px; } html[data-theme='neon'] .nx-dd-btn.on, html[data-theme='neon'] .nx-dd-btn.chosen { color: var(--gold); } html[data-theme='neon'] .nx-dd-now { display: inline-flex; align-items: center; } html[data-theme='neon'] .nx-dd-now .nx-fac-tag { height: 20px; padding: 0 6px 0 4px; font-size: 11px; } html[data-theme='neon'] .nx-dd-caret { flex: none; width: 7px; height: 7px; margin: -3px 2px 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; } html[data-theme='neon'] .nx-dd { position: fixed; z-index: 40; min-width: 170px; display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--line-2); background: #15111b; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7); animation: nx-dock-in 0.13s ease-out; } html[data-theme='neon'] .nx-dd-row { display: flex; align-items: center; min-height: 32px; padding: 3px 8px; border: 0; background: none; color: #d8d0c2; font: 600 13px/1.2 var(--nx-ui); text-align: left; cursor: pointer; } html[data-theme='neon'] .nx-dd-row:hover { background: rgba(245, 200, 98, 0.12); color: #fff6dc; } html[data-theme='neon'] .nx-dd-row.on { box-shadow: inset 2px 0 0 var(--gold); color: var(--gold); } /* phones in a fight: each champion over and under the board fills its box; all six to place fit across */ html[data-theme='neon'] .narrow .roster-hero { width: var(--rh, 48px); height: var(--rh, 48px); padding: 0; overflow: hidden; border-radius: 0; } html[data-theme='neon'] .narrow .roster-hero.active { border: 1px solid var(--gold); box-shadow: none; } html[data-theme='neon'] .battle.narrow .action-bar .act-round { flex: 1 1 0; width: auto; max-width: 48px; height: auto; min-width: 0; min-height: 0; aspect-ratio: 1; } html[data-theme='neon'] .battle.narrow .action-bar:has(.act-round) { width: 100%; justify-content: center; } html[data-theme='neon'] .narrow .nx-act-wrap { position: relative; display: flex; flex: 1 1 0; min-width: 0; max-width: 48px; } html[data-theme='neon'] .battle.narrow .action-bar .nx-act-wrap > .act-round { flex: 1 1 auto; max-width: none; } html[data-theme='neon'] .narrow .nx-act-wrap > .rh-info { z-index: 4; display: grid; top: auto; right: auto; bottom: 2px; left: 50%; width: 16px; height: 16px; translate: -50% 0; border-radius: 0; } html[data-theme='neon'] .narrow .nx-act-wrap > .rh-info::after { content: ''; position: absolute; inset: -7px; } html[data-theme='neon'] .at-range { display: flex; align-items: center; gap: 10px; padding: 0 9px 8px; } html[data-theme='neon'] .at-range .reach-grid { flex: none; } html[data-theme='neon'] .at-range .reach-grid i:not(.me):not(.hit) { background: rgba(255, 255, 255, 0.1); box-shadow: none; } html[data-theme='neon'] .at-range b { display: block; font: 700 12px/1.2 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .at-range span { font: 500 12px/1.3 var(--nx-ui); } html[data-theme='neon'] .narrow .act-round.art .act-ico canvas { width: 100% !important; height: 100% !important; } html[data-theme='neon'] .narrow .roster-hero canvas { --pw: var(--rh, 48px) !important; width: 100% !important; height: 100% !important; border-radius: 0; } html[data-theme='neon'] .narrow .hud-top .turn-banner { display: flex; flex-direction: column; justify-content: center; min-height: 36px; } body.touch[class] .narrow .action-bar:not(:empty), html[data-theme='neon'] .narrow .action-bar:has(.nx-place-card) { padding: 6px 8px; } html[data-theme='neon'] .narrow .action-bar:has(.nx-place-card) { display: flex; width: 100%; justify-content: center; gap: 4px; } html[data-theme='neon'] .narrow .nx-place-card { flex: 0 1 calc((100% - 20px) / 6); min-width: 0; } html[data-theme='neon'] .narrow .nx-place-card > .card { width: 100%; min-width: 0; padding: 3px 3px 22px; overflow: hidden; } html[data-theme='neon'] .narrow .nx-place-card > .card canvas { width: 100%; height: auto; } html[data-theme='neon'] .narrow .nx-place-card > .card .name { display: block; max-width: 100%; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; } html[data-theme='neon'] .narrow .nx-place-card > .rh-info { display: grid; top: auto; right: auto; bottom: 3px; left: 50%; width: 18px; height: 18px; translate: -50% 0; border-radius: 0; } html[data-theme='neon'] .narrow .nx-place-card > .rh-info::after { content: ''; position: absolute; inset: -8px; } /* phones, a replay: one row of controls, one line of what happened, a shorter timeline, all under the board */ html[data-theme='neon'] .narrow .replay-bar { gap: 3px; padding: 4px 6px; } html[data-theme='neon'] .narrow .rp-top { flex-wrap: wrap; } html[data-theme='neon'] .narrow .rp-exit { min-width: 36px; min-height: 32px; margin-left: auto; padding: 1px 4px; } html[data-theme='neon'] .narrow .rp-exit .lbl { display: none; } html[data-theme='neon'] .narrow .rp-info { flex-direction: row; align-items: baseline; gap: 8px; } html[data-theme='neon'] .narrow .rp-pos { flex: none; } html[data-theme='neon'] .narrow .rp-caption { min-width: 0; } html[data-theme='neon'] .narrow .tl-track { height: 70px; } html[data-theme='neon'] .narrow .tl-mark.s0 { top: 11px; } html[data-theme='neon'] .narrow .tl-mark.s1 { bottom: 11px; } html[data-theme='neon'] .narrow .tl-victim { width: 13px; height: 13px; margin-left: -6px; } /* phones: Random in words, on the left of the box with Lock In, instead of a dice up in the title (your call) */ @media (max-width: 700px) { html[data-theme='neon'] .dr-rand { display: none; } html[data-theme='neon'] .dr-choice-bar.quiet.mine { display: flex; } html[data-theme='neon'] .dr-rand-txt { display: inline-flex; order: -1; margin-right: auto; } /* (a tap on a card sends it: the button only for what Random chose) */ html[data-theme='neon'] .dr-choice-bar:is(.k-pick, .k-ban) .dr-lock:disabled { display: none; } } @media (min-width: 1001px) { html[data-theme='neon'] .dr-head { border: 1px solid var(--line-1); border-radius: 0; background: rgba(13, 10, 18, 0.95); } html[data-theme='neon'] .dr-choice-bar { border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: rgba(13, 10, 18, 0.95); box-shadow: none; } html[data-theme='neon'] .dr-pool, html[data-theme='neon'] .dr-team, html[data-theme='neon'] .dr-preview { border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: rgba(13, 10, 18, 0.95); } html[data-theme='neon'] .dr-steps { border-radius: 0; } html[data-theme='neon'] .dr-slot { border-radius: 0; min-height: 58px; } html[data-theme='neon'] .dr-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 8px; border-radius: 0; background: none; } html[data-theme='neon'] .dr-grid .champ-tile { aspect-ratio: 4 / 5; border-radius: 0; } html[data-theme='neon'] .dr-grid .champ-tile:not(.disabled):hover { transform: translateY(-3px); } html[data-theme='neon'] .dr-grid .champ-tile.chosen { transform: none; } html[data-theme='neon'] .dr-grid .champ-tile .ct-name { font-size: 13px; padding-top: 16px; } html[data-theme='neon'] .dr-grid .champ-tile .ct-tier { border-radius: 0; } html[data-theme='neon'] .dr-tools .btn { min-height: 30px; } } /* ================================================================== the fight's HUD: slim rows, the turn on a pill, the abilities in a bar */ html[data-theme='neon'] .battle:not(.narrow) .roster { padding: 10px; } html[data-theme='neon'] .roster-hero { gap: 3px 9px; padding: 7px 22px 7px 7px; border-radius: 8px; border: 1px solid var(--line-1); background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2)); } html[data-theme='neon'] .roster-hero canvas { border-radius: 8px; background: radial-gradient(circle at 50% 40%, #2f2739, #0d0b12 75%); } html[data-theme='neon'] .roster-hero .nm { font: 700 13px/1.1 var(--font-text); letter-spacing: 0.02em; } html[data-theme='neon'] .roster-hero .bar { height: 8px; } html[data-theme='neon'] .roster-hero.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px -4px var(--gold); } html[data-theme='neon'] .action-bar:not(:empty) { gap: 10px; padding: 12px 14px 30px; } /* the actions: flat squares, the picture or gold icon filling them, each key plain to read under its button */ html[data-theme='neon'] .act-round, html[data-theme='neon'] .act-round.ghost, html[data-theme='neon'] .act-round.art { --fw: 0px; border: 1px solid var(--line-2); border-image: none; background: #17131d; image-rendering: auto; } html[data-theme='neon'] .act-round.art::after { display: none; } html[data-theme='neon'] .act-round:hover:not(:disabled) { border-color: var(--gold); } html[data-theme='neon'] .act-round.on { border-color: var(--gold); border-image: none; box-shadow: 0 0 0 1px var(--gold), 0 0 12px -2px var(--gold); } html[data-theme='neon'] .act-badge { right: -7px; top: -7px; } html[data-theme='neon'] .act-key { bottom: -25px; } html[data-theme='neon'] .act-key .kbd { min-width: 22px; height: 20px; padding: 0 5px; font: 700 12px/1 var(--nx-ui); border-bottom-width: 2px; } html[data-theme='neon'] .act-sep { background: var(--line-2); } @media (min-width: 761px) { html[data-theme='neon'] .act-round:not(.art) .act-ico canvas { width: 40px; height: 40px; } html[data-theme='neon'] .act-round.ghost .act-ico canvas { width: 28px; height: 28px; } } html[data-theme='neon'] .action-bar .btn { --cut: 8px; } html[data-theme='neon'] .chronicle.panel, html[data-theme='neon'] .panel.chronicle { background: linear-gradient(180deg, rgba(20, 16, 26, 0.9), rgba(10, 8, 14, 0.94)); } @media (max-width: 760px) { html[data-theme='neon'] .dr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; } html[data-theme='neon'] .champ-tile .ct-name { font-size: 12px; padding: 16px 6px 0; } html[data-theme='neon'] .dr-title .t { font-size: 20px; } } /* ================================================================== portraits at the size they're drawn (no rescaling in the page, which blurs them) */ html[data-theme='neon'] canvas.portrait.hd { width: var(--pw) !important; height: auto !important; aspect-ratio: 1; max-width: 100%; image-rendering: auto; } /* ================================================================== the factions: their glyphs (the redesign's: Order a shield, Wild a flame, Arcane a star, Shadow a moon) instead of dots, in the same colours (the dot's colour fills the glyph's shape) */ html[data-theme='neon'] :is(.ct-fac, .nx-fac).order { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1 14 3v5c0 3.5-2.6 6-6 7-3.4-1-6-3.5-6-7V3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1 14 3v5c0 3.5-2.6 6-6 7-3.4-1-6-3.5-6-7V3z'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme='neon'] :is(.ct-fac, .nx-fac).wild { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1c3 3 6 5 6 9a6 6 0 0 1-12 0c0-4 3-6 6-9zm0 5c-1.4 1.6-2.5 2.6-2.5 4.4a2.5 2.5 0 0 0 5 0C10.5 8.6 9.4 7.6 8 6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1c3 3 6 5 6 9a6 6 0 0 1-12 0c0-4 3-6 6-9zm0 5c-1.4 1.6-2.5 2.6-2.5 4.4a2.5 2.5 0 0 0 5 0C10.5 8.6 9.4 7.6 8 6z'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme='neon'] :is(.ct-fac, .nx-fac).arcane { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme='neon'] :is(.ct-fac, .nx-fac).shadow { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 1a7 7 0 1 0 4 12A6 6 0 0 1 11 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 1a7 7 0 1 0 4 12A6 6 0 0 1 11 1z'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme='neon'] .ct-fac { width: 13px; height: 13px; border: 0; border-radius: 0; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8)); } html[data-theme='neon'] .rh-facs { gap: 3px; } html[data-theme='neon'] .rh-facs .ct-fac { width: 11px; height: 11px; } html[data-theme='neon'] .champ-tile .ct-fac { width: 15px; height: 15px; border: 0; border-radius: 0; } html[data-theme='neon'] .nx-fac { display: block; width: 12px; height: 12px; background: currentColor; } /* ================================================================== the match stats under tabs (the results, a past game's window): one section at a time, playing in when shown (the bars growing from the middle, the awards popping one after another) */ html[data-theme='neon'] .ms-tabbed { gap: 16px; } html[data-theme='neon'] .ms-tabs { justify-content: flex-start; margin: 0 0 2px; } html[data-theme='neon'] .ms-tabbed .ms-sec[hidden] { display: none; } html[data-theme='neon'] .ms-tabbed .ms-sec > .h2:not(.ms-vs) { display: none; } html[data-theme='neon'] .nx-ms-joined { display: flex; flex-direction: column; gap: 14px; } /* the stats' tabs stay in sight while a long one scrolls; clean numbers, the pixel font is the fight's */ html[data-theme='neon'] .ms-tabbed .ms-tabs { position: sticky; top: 0; z-index: 3; background: #15111b; } html[data-theme='neon'] .ms-tabbed :is(.num, .ms-chip b, .ms-turns) { font-family: var(--nx-ui); } html[data-theme='neon'] .nx-res-pane .ms-tabbed .ms-tabs { background: var(--nx-panel); } html[data-theme='neon'] .ms-sec.ms-in { animation: ms-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; } html[data-theme='neon'] .ms-in .ms-tug-bar i { animation: ms-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; } html[data-theme='neon'] .ms-in .ms-tug-bar i.s0 { transform-origin: right; } html[data-theme='neon'] .ms-in .ms-tug-bar i.s1 { transform-origin: left; } html[data-theme='neon'] .ms-in .ms-dmgbar { transform-origin: left; animation: ms-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; } html[data-theme='neon'] .ms-in .ms-award { animation: ms-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; } html[data-theme='neon'] .ms-in .ms-award:nth-child(2) { animation-delay: 0.07s; } html[data-theme='neon'] .ms-in .ms-award:nth-child(3) { animation-delay: 0.14s; } html[data-theme='neon'] .ms-in .ms-award:nth-child(4) { animation-delay: 0.21s; } html[data-theme='neon'] .ms-in .ms-award:nth-child(5) { animation-delay: 0.28s; } html[data-theme='neon'] .ms-in .ms-award:nth-child(6) { animation-delay: 0.35s; } @keyframes ms-in { from { opacity: 0; transform: translateY(10px); } } @keyframes ms-grow { from { transform: scaleX(0); } } @keyframes ms-pop { from { opacity: 0; transform: translateY(14px) scale(0.9); } } /* ================================================================== the results (the prototype's): the title slamming in over its rays, the stars stamping one by one, one panel with the MVP, your rank and level, what you won as tiles popping in; Home, Replay, Play again; the game's numbers */ html[data-theme='neon'] .screen-results.vignette::after { display: none; } html[data-theme='neon'] .screen-results .screen-body > .max { max-width: 980px; } html[data-theme='neon'] .nx-res-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 0 6px; text-align: center; } html[data-theme='neon'] .nx-res-hero > :not(.nx-res-rays) { position: relative; } html[data-theme='neon'] .nx-res-hero .nx-kicker { justify-content: center; } html[data-theme='neon'] .nx-res-rays { position: absolute; inset: -40px 0 -60px; overflow: hidden; pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); } html[data-theme='neon'] .nx-res-rays::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; background: repeating-conic-gradient(rgba(255, 200, 100, 0.13) 0 4deg, transparent 4deg 14deg); animation: nx-res-spin 50s linear infinite; } @keyframes nx-res-spin { to { transform: rotate(360deg); } } html[data-theme='neon'] .nx-res-title { margin: 10px 0 0; font: 700 clamp(56px, 11vw, 116px)/0.95 var(--font-title); letter-spacing: 0.04em; background: linear-gradient(180deg, #fff8e0 10%, var(--gold) 50%, var(--gold-2) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 rgba(60, 36, 8, 0.9)) drop-shadow(0 0 34px rgba(255, 181, 47, 0.45)); animation: nx-res-slam 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) both; } html[data-theme='neon'] .nx-res-title.long { font-size: clamp(34px, 7vw, 68px); } html[data-theme='neon'] .nx-res-hero:not(.won) .nx-res-title { background-image: linear-gradient(180deg, #e9e4ee 10%, #a49cb0 55%, #6c6478 90%); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.7)); } html[data-theme='neon'] .nx-res-hero.draw .nx-res-title { background-image: linear-gradient(180deg, #e4fff9 10%, var(--teal) 55%, var(--teal-2) 90%); } @keyframes nx-res-slam { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; } 100% { transform: none; } } html[data-theme='neon'] .nx-res-stars { display: flex; align-items: flex-start; gap: 14px; margin: 16px 0 8px; } html[data-theme='neon'] .nx-res-stars i { display: block; width: 58px; height: 58px; clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 79% 92%, 50% 71%, 21% 92%, 31% 57%, 2% 35%, 38% 35%); background: rgba(255, 255, 255, 0.13); } html[data-theme='neon'] .nx-res-stars i:nth-child(2) { width: 76px; height: 76px; margin-top: -12px; } html[data-theme='neon'] .nx-res-stars i.on { background: linear-gradient(180deg, #fff1c9, var(--gold) 55%, var(--gold-2)); animation: nx-res-stamp 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.35s + var(--i) * 0.22s) both; } @keyframes nx-res-stamp { from { opacity: 0; transform: scale(2.6) rotate(-30deg); } } html[data-theme='neon'] .nx-res-grade { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 14px/1 var(--font-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-2); } html[data-theme='neon'] .nx-res-grade b { font: 700 42px/1 var(--font-title); letter-spacing: 0; } html[data-theme='neon'] .nx-res-grade .res-grade-art { margin: 0; } html[data-theme='neon'] .nx-res-grade .num { font: 400 18px/1 var(--font-num); letter-spacing: 0.04em; color: var(--muted); } html[data-theme='neon'] .nx-res-panel { display: flex; flex-direction: column; gap: 16px; width: min(720px, 100%); margin: 8px auto 0; } html[data-theme='neon'] .nx-res-top { display: flex; align-items: center; gap: 22px; } html[data-theme='neon'] .nx-res-mvp { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 180px; text-align: center; } html[data-theme='neon'] .nx-res-mvp > .res-mvp-crown { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 1; } html[data-theme='neon'] .nx-res-mvp small { margin-top: 4px; font: 700 11px/1 var(--font-text); letter-spacing: 0.22em; color: var(--gold); } html[data-theme='neon'] .nx-res-mvp b { max-width: 100%; margin-top: 3px; } html[data-theme='neon'] .nx-res-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } html[data-theme='neon'] .nx-res-bars:empty, html[data-theme='neon'] .nx-res-tiles:empty, html[data-theme='neon'] .nx-res-lines:empty { display: none; } html[data-theme='neon'] .nx-res-rating { display: flex; align-items: center; gap: 14px; } html[data-theme='neon'] .nx-res-rating .grow { flex: 1; min-width: 0; } html[data-theme='neon'] .nx-res-rating .good { color: var(--good); } html[data-theme='neon'] .nx-res-rating .bad { color: var(--bad); } html[data-theme='neon'] .nx-res-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } html[data-theme='neon'] .nx-rew { width: 104px; padding: 12px 6px 10px; border-radius: 0; text-align: center; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-2); animation: nx-rew-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(1.1s + var(--i) * 0.17s) both; } @keyframes nx-rew-in { from { opacity: 0; transform: translateY(18px) scale(0.8); } } html[data-theme='neon'] .nx-rew img { display: block; margin: 0 auto 6px; image-rendering: pixelated; } html[data-theme='neon'] .nx-rew b { display: block; font: 400 25px/1 var(--font-num); letter-spacing: 0.04em; } html[data-theme='neon'] .nx-rew small { font-family: var(--font-label); display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme='neon'] .nx-res-lines { gap: 6px; padding-top: 12px; font-size: 14px; border-top: 1px solid var(--line-1); } html[data-theme='neon'] .screen-results .max > .panel:not(.res-stats) { width: min(720px, 100%); margin-left: auto; margin-right: auto; } html[data-theme='neon'] .screen-results .screen-foot { justify-content: center; margin: 4px 0; background: none; border: 0; box-shadow: none; } /* on a computer, one screen: how it went and the MVP | what you won and the stats, in tabs | the buttons */ html[data-theme='neon'] .screen-results .screen-body > .nx-res-page { max-width: min(1240px, 96vw); height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px 20px; } html[data-theme='neon'] .screen-results .screen-body:has(.nx-res-page) { overflow: hidden; padding: 10px 16px; } html[data-theme='neon'] .nx-res-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } html[data-theme='neon'] .nx-res-left .nx-res-hero { flex: none; } html[data-theme='neon'] .nx-res-left .nx-res-title { font-size: clamp(44px, 5.4vw, 84px); } html[data-theme='neon'] .nx-res-left .nx-res-title.long { font-size: clamp(30px, 3.6vw, 56px); } html[data-theme='neon'] .nx-res-left .nx-res-stars { margin: 8px 0 4px; } html[data-theme='neon'] .nx-res-left .nx-res-mvp { flex: none; } html[data-theme='neon'] .nx-res-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--nx-panel); border: 1px solid var(--line-1); } html[data-theme='neon'] .nx-res-won { flex: 0 1 auto; max-height: 52%; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-res-won > .panel { flex: none; width: 100%; margin: 0; padding: 0; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-res-won .nx-res-panel { gap: 8px; } html[data-theme='neon'] .nx-res-won .nx-res-bars { flex-direction: row; gap: 16px; } html[data-theme='neon'] .nx-res-won .nx-res-bars > * { flex: 1; min-width: 0; } html[data-theme='neon'] .nx-res-won .nx-res-rating :is(img, canvas) { width: 36px !important; height: 36px !important; } html[data-theme='neon'] .nx-res-won .nx-res-tiles { flex-wrap: nowrap; justify-content: stretch; gap: 6px; } html[data-theme='neon'] .nx-res-won .nx-rew { flex: 1 1 0; min-width: 0; width: auto; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 5px 8px; border-radius: 0; text-align: left; } html[data-theme='neon'] .nx-res-won .nx-rew img { grid-row: 1 / span 2; width: 30px; height: 30px; margin: 0; } html[data-theme='neon'] .nx-res-won .nx-rew b { font: 700 16px/1.1 var(--nx-ui); } html[data-theme='neon'] .nx-res-won .nx-rew small { margin: 0; font-size: 9px; letter-spacing: 0.06em; } html[data-theme='neon'] .nx-res-won .nx-res-lines { padding-top: 6px; font-size: 13px; } html[data-theme='neon'] .nx-res-pane { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 14px 12px; } /* the first tab: what you won, then your team, everything saying why on a point */ html[data-theme='neon'] .nx-res-summary .nx-res-panel { width: 100%; margin: 0; padding: 0; gap: 14px; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-res-summary > .panel { width: 100%; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line-1); border-image: none; border-radius: 0; background: rgba(0, 0, 0, 0.25); box-shadow: none; } html[data-theme='neon'] .nx-res-summary .nx-res-bars { flex-direction: row; gap: 16px; } html[data-theme='neon'] .nx-res-summary .nx-res-bars > * { flex: 1; min-width: 0; } html[data-theme='neon'] .nx-res-summary .nx-res-rating :is(img, canvas) { width: 36px !important; height: 36px !important; } html[data-theme='neon'] .nx-res-summary .nx-res-tiles { flex-wrap: nowrap; justify-content: stretch; gap: 8px; } html[data-theme='neon'] .nx-res-summary .nx-rew { flex: 1 1 0; min-width: 0; width: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 0; text-align: left; } html[data-theme='neon'] .nx-res-summary .nx-rew img { grid-row: 1 / span 2; width: 34px; height: 34px; margin: 0; } html[data-theme='neon'] .nx-res-summary .nx-rew b { font: 700 18px/1.1 var(--nx-ui); } html[data-theme='neon'] .nx-res-summary .nx-rew small { margin: 0; font-size: 10px; letter-spacing: 0.06em; } html[data-theme='neon'] .nx-res-summary .nx-res-lines { padding-top: 10px; font-size: 13px; } html[data-theme='neon'] .nx-res-lines .teal { color: var(--gold); } html[data-theme='neon'] .nx-rew[data-tip], html[data-theme='neon'] .nx-res-lv[data-tip], html[data-theme='neon'] .nx-res-grade[data-tip] { cursor: help; } html[data-theme='neon'] .nx-rew[data-tip]:hover, html[data-theme='neon'] button.nx-rt-card:hover, html[data-theme='neon'] button.nx-rt-card.open { border-color: var(--gold); } html[data-theme='neon'] .nx-res-teamhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } html[data-theme='neon'] .nx-res-teamhead b { font: 700 14px/1 var(--nx-cap); letter-spacing: 0.06em; color: var(--gold); } html[data-theme='neon'] .nx-res-teamhead small { font-size: 12px; color: #8e8678; } html[data-theme='neon'] .nx-rt-grid { display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(min(170px, 100%), 1fr)); gap: 8px; } /* the page's height goes down to the team, its cards taking what's left */ html[data-theme='neon'] .nx-res-pane { display: flex; flex-direction: column; } html[data-theme='neon'] .nx-res-pane > .res-stats { flex: 1 0 auto; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-res-pane .ms-tabbed { flex: 1 0 auto; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-res-summary:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-res-summary .nx-res-panel { flex: 1 0 auto; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-res-summary .nx-res-team { flex: 1 0 auto; display: flex; flex-direction: column; } html[data-theme='neon'] .nx-res-summary .nx-rt-grid { flex: 1 0 auto; grid-auto-rows: 1fr; } /* tall: the champion standing over its name, its numbers under */ html[data-theme='neon'] .nx-rt-grid.tall .nx-rt-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; } html[data-theme='neon'] .nx-rt-grid.tall .pic { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; width: auto; height: auto; min-height: 96px; overflow: hidden; border: 0; border-bottom: 1px solid var(--line-1); background: radial-gradient(ellipse at 50% 55%, rgba(245, 200, 98, 0.13), transparent 62%), #17131d; } html[data-theme='neon'] .nx-rt-grid.tall .mvp .pic { background: radial-gradient(ellipse at 50% 55%, rgba(245, 200, 98, 0.32), transparent 66%), #17131d; } html[data-theme='neon'] .nx-rt-grid.tall .who { flex: none; gap: 6px; padding: 10px 12px 12px; } html[data-theme='neon'] .nx-rt-card .nums { display: flex; justify-content: space-between; gap: 8px; font: 600 12px/1.2 var(--nx-ui); color: #a79e90; } html[data-theme='neon'] .nx-rt-grid:not(.tall) .nums.more { display: none; } html[data-theme='neon'] .nx-rt-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px 7px 7px; border: 1px solid var(--line-1); background: rgba(0, 0, 0, 0.28); transition: border-color 0.12s; } html[data-theme='neon'] .nx-rt-card.mvp { border-color: var(--line-3); } html[data-theme='neon'] .nx-rt-card .pic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--line-1); background: #17131d; } html[data-theme='neon'] .nx-rt-card { min-height: 0; } html[data-theme='neon'] .nx-rt-card.fallen .pic { filter: grayscale(0.75) brightness(0.75); } @media (min-height: 900px) { html[data-theme='neon'] .nx-res-summary .nx-res-panel { gap: 18px; } html[data-theme='neon'] .nx-res-summary .nx-rew { padding: 14px; } html[data-theme='neon'] .nx-res-summary .nx-rew b { font-size: 22px; } html[data-theme='neon'] .nx-rt-grid { gap: 10px; } html[data-theme='neon'] .nx-rt-card { gap: 12px; padding: 10px 12px 10px 10px; } html[data-theme='neon'] .nx-rt-grid:not(.tall) .pic { width: 84px; height: 84px; } html[data-theme='neon'] .nx-rt-card .top b { font-size: 16px; } html[data-theme='neon'] .nx-rt-card .gain b { font-size: 19px; } } html[data-theme='neon'] .nx-rt-card .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } html[data-theme='neon'] .nx-rt-card .top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } html[data-theme='neon'] .nx-rt-card .top b { min-width: 0; font: 700 14px/1.1 var(--nx-ui); color: #fff6dc; } html[data-theme='neon'] .nx-rt-card .gain { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--nx-ui); color: #8e8678; } html[data-theme='neon'] .nx-rt-card .gain b { font: 700 16px/1 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-rt-card .stars { color: #d8d0c2; } html[data-theme='neon'] .nx-rt-card .tag { flex: none; padding: 1px 5px; font: 700 10px/1.3 var(--nx-ui); letter-spacing: 0.06em; color: #1c1206; background: var(--gold); } html[data-theme='neon'] .nx-rt-card .nx-bar i { transition: width 0.9s ease-out; } /* why a champion earned its mastery: in the open over the champion, or its card turned to it by a press */ html[data-theme='neon'] button.nx-rt-card { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; } html[data-theme='neon'] .nx-rt-why { display: none; flex-direction: column; gap: 2px; } html[data-theme='neon'] .nx-rt-why .nx-why-row { font-size: 12px; } html[data-theme='neon'] .nx-rt-why .nx-why-row.total { margin-top: auto; padding-top: 5px; } html[data-theme='neon'] .nx-rt-why .nx-why-foot { margin: 0; } html[data-theme='neon'] .nx-rt-grid.inline .nx-rt-why { flex: none; display: flex; height: 262px; padding: 10px 12px; border-bottom: 1px solid var(--line-1); background: rgba(0, 0, 0, 0.2); } html[data-theme='neon'] .nx-rt-card.open .nx-rt-why { display: flex; } html[data-theme='neon'] .nx-rt-grid.tall .nx-rt-card.open .nx-rt-why { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 10px 12px; border-bottom: 1px solid var(--line-1); } html[data-theme='neon'] .nx-rt-grid.tall .nx-rt-card.open .pic { display: none; } /* (no room in the card: it takes the whole row, the list under the champion) */ html[data-theme='neon'] .nx-rt-grid:not(.tall) .nx-rt-card { flex-wrap: wrap; } html[data-theme='neon'] .nx-rt-grid:not(.tall) .nx-rt-card.open { grid-column: 1 / -1; } html[data-theme='neon'] .nx-rt-grid:not(.tall) .nx-rt-card.open .nx-rt-why { order: 3; flex: 1 0 100%; padding-top: 8px; border-top: 1px solid var(--line-1); } html[data-theme='neon'] .nx-rt-grid:not(.tall) .nx-rt-card .who { flex: 1 1 0; } /* a number's bubble: every part of it and its total */ html[data-theme='neon'] .nx-why { width: 270px; max-width: 76vw; white-space: normal; } html[data-theme='neon'] .nx-why-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); } html[data-theme='neon'] .nx-why-head b { display: block; font: 700 15px/1.15 var(--nx-ui); color: var(--gold); } html[data-theme='neon'] .nx-why-head small { display: block; margin-top: 2px; font-size: 12px; color: #a79e90; } html[data-theme='neon'] .nx-why-rows { display: flex; flex-direction: column; gap: 3px; padding-top: 7px; } html[data-theme='neon'] .nx-why-row { display: flex; justify-content: space-between; gap: 12px; font: 500 13px/1.3 var(--nx-ui); color: #d8d0c2; } html[data-theme='neon'] .nx-why-row b { flex: none; font-weight: 700; color: #fff6dc; } html[data-theme='neon'] .nx-why-row.none { color: #8e8678; } html[data-theme='neon'] .nx-why-row.none b { color: #8e8678; } html[data-theme='neon'] .nx-why-row.full b { color: var(--good); } html[data-theme='neon'] .nx-why-row.mult b { color: #9cc6ff; } html[data-theme='neon'] .nx-why-row.mascot b { color: #c7a4ff; } html[data-theme='neon'] .nx-why-row.total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line-2); font-weight: 700; color: #fff6dc; } html[data-theme='neon'] .nx-why-row.total b { color: var(--gold); } html[data-theme='neon'] .nx-why-foot { display: block; margin-top: 7px; font-size: 12px; line-height: 1.35; color: #a79e90; } @media (max-width: 560px) { html[data-theme='neon'] .nx-rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme='neon'] .nx-rt-card .pic { width: 44px; height: 44px; } html[data-theme='neon'] .nx-rt-card .pic canvas { width: 40px !important; height: 40px !important; } } html[data-theme='neon'] .nx-res-pane > .panel { margin: 0; padding: 0; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; } html[data-theme='neon'] .nx-res-pane .res-stats > .h2 { display: none; } html[data-theme='neon'] .nx-res-pane .tabs-burger { display: none; } html[data-theme='neon'] .nx-res-page :is(.num, .bar b, .nx-res-grade .num, .nx-res-rating b) { font-family: var(--nx-ui); } html[data-theme='neon'] .nx-res-page .nx-res-lv .num { font-size: 13px; } html[data-theme='neon'] .nx-res-page > .screen-foot { grid-column: 1 / -1; margin: 0; padding: 4px 0 0; } @media (max-width: 560px) { html[data-theme='neon'] .nx-res-stars i { width: 42px; height: 42px; } html[data-theme='neon'] .nx-res-stars i:nth-child(2) { width: 54px; height: 54px; margin-top: -8px; } html[data-theme='neon'] .nx-res-top { flex-direction: column; align-items: stretch; gap: 14px; } html[data-theme='neon'] .nx-res-mvp { align-self: center; } html[data-theme='neon'] .nx-rew { width: calc(33.33% - 7px); min-width: 84px; } html[data-theme='neon'] .screen-results .screen-foot { flex-wrap: wrap; } html[data-theme='neon'] .screen-results .screen-foot .btn { flex: 1 1 40%; min-width: 0; padding-left: 10px; padding-right: 10px; } html[data-theme='neon'] .screen-results .screen-foot .btn.primary { order: -1; flex-basis: 100%; } } /* ================================================================== Social (the prototype's): a kicker and the open tab as the big title, Add friend beside it, your friends one list with the gold line on the row you point at; the same pieces on the other tabs' player lists */ html[data-theme='neon'] .screen.win > .nx-so-head { padding: 22px 28px 10px; margin-bottom: 0; align-items: center; } html[data-theme='neon'] .nx-so-head .nx-title { min-height: 44px; } html[data-theme='neon'] .nx-so-one { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; width: 100%; } html[data-theme='neon'] .nx-so-one .so-side { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; } html[data-theme='neon'] .nx-so-one .so-side[hidden] { display: none; } html[data-theme='neon'] .so-page { max-width: 1160px; margin: 0 auto; width: 100%; } html[data-theme='neon'] .so-main { gap: 12px; } html[data-theme='neon'] .nx-so-one .so-head .h2 { display: none; } html[data-theme='neon'] .so-head .h2 { font: 700 13px/1 var(--font-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); } html[data-theme='neon'] .so-search-box { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0, 0, 0, 0.4); transition: border-color 0.25s, box-shadow 0.25s; } html[data-theme='neon'] .so-search-box:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 200, 98, 0.12); } html[data-theme='neon'] .so-search { font: 400 15px var(--font-text); color: var(--text); } html[data-theme='neon'] .so-tools { gap: 10px; } html[data-theme='neon'] .so-tools .so-search-box { flex: 1; min-width: 180px; } html[data-theme='neon'] .so-group { gap: 0; } html[data-theme='neon'] .so-group-title { padding: 0 2px 6px; font: 700 12px/1 var(--font-text); letter-spacing: 0.2em; color: var(--muted); } html[data-theme='neon'] .so-group-title b { min-width: 20px; padding: 3px 6px; border: 0; border-radius: 9px; text-align: center; background: rgba(255, 255, 255, 0.08); font-size: 11px; letter-spacing: 0; } html[data-theme='neon'] .so-group.on .so-group-title span { color: var(--good); } html[data-theme='neon'] .so-row { gap: 14px; padding: 10px 12px; border: 0; border-radius: 6px; background: none; box-shadow: none; overflow: hidden; transition: background 0.25s; } html[data-theme='neon'] .so-row + .so-row { box-shadow: 0 -1px 0 var(--line-1); } html[data-theme='neon'] .so-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); transform: scaleY(0); transition: transform 0.3s; z-index: 1; } html[data-theme='neon'] .so-row:hover { background: linear-gradient(90deg, rgba(245, 200, 98, 0.08), transparent 70%); box-shadow: none; } html[data-theme='neon'] .so-row + .so-row:hover { box-shadow: 0 -1px 0 var(--line-1); } html[data-theme='neon'] .so-row:hover::before { transform: scaleY(1); } html[data-theme='neon'] .so-ava { border: 1px solid var(--line-2); border-radius: 0; background: rgba(0, 0, 0, 0.35); box-shadow: none; } html[data-theme='neon'] .so-ava canvas { border-radius: 0; } html[data-theme='neon'] .so-initial { font-family: var(--font-title); color: var(--gold); } html[data-theme='neon'] .so-dot { right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid var(--ink-1, #14101a); border-radius: 50%; } html[data-theme='neon'] .so-name b { font-weight: 700; color: var(--text); } html[data-theme='neon'] .so-lvl { padding: 0 6px; border: 0; border-radius: 4px; font: 700 11px/17px var(--font-text); color: var(--gold); background: rgba(245, 200, 98, 0.14); box-shadow: inset 0 0 0 1px rgba(245, 200, 98, 0.4); } html[data-theme='neon'] .so-empty { padding: 34px 10px; } html[data-theme='neon'] .so-add { gap: 12px; } html[data-theme='neon'] .so-add-ico { border: 1px solid rgba(79, 220, 198, 0.4); border-radius: 10px; background: rgba(79, 220, 198, 0.1); box-shadow: none; } html[data-theme='neon'] .so-myname { border: 1px dashed var(--line-2); border-radius: 8px; background: rgba(0, 0, 0, 0.25); } html[data-theme='neon'] .so-invite-card { border-radius: var(--n-radius); transition: border-color 0.25s, transform 0.25s; } html[data-theme='neon'] .so-invite-card:hover { box-shadow: none; border-color: var(--gold-2); transform: translateY(-2px); } @media (max-width: 760px) { html[data-theme='neon'] .screen.win > .nx-so-head { flex-wrap: wrap; gap: 10px; padding: 14px 16px 6px; } html[data-theme='neon'] .nx-so-head .grow { flex-basis: 100%; } html[data-theme='neon'] .nx-so-head .nx-title { font-size: 32px; min-height: 32px; } html[data-theme='neon'] .nx-so-one .so-side { grid-template-columns: minmax(0, 1fr); } html[data-theme='neon'] .so-row { gap: 10px; padding: 9px 8px; } } /* a challenge pays nothing: the MVP alone in its panel, in the middle */ html[data-theme='neon'] .nx-res-top.solo { justify-content: center; } /* Practice (every theme: ui/screens/practice.js) */ .practice-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .practice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; } .practice-ch { padding: 2px; background: none; border: 2px solid transparent; border-radius: 8px; cursor: pointer; } .practice-ch.on { border-color: var(--gold, #e8b64c); } .practice-panel { position: absolute; left: 12px; top: 64px; z-index: 6; width: 240px; padding: 8px 12px; } /* (a wide screen: a strip under the board, over nothing) */ @media (min-width: 1100px) and (min-height: 700px) { .practice-panel { left: 50%; top: auto; bottom: 136px; width: min(1180px, calc(100% - 24px)); padding: 4px 12px; transform: translateX(-50%); } .practice-panel .practice-head { display: none; } .practice-panel .practice-body { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr; align-items: center; gap: 12px; font-size: 13px; } .practice-panel .toggle { padding: 4px 8px; } .practice-panel.shut { width: auto; } } .practice-head { width: 100%; padding: 4px 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .practice-panel.shut { width: auto; } .practice-panel.shut .practice-body { display: none; } .practice-body { display: flex; flex-direction: column; gap: 6px; } /* ---- Interface fixes ---- */ /* Tab bars: the PgUp / PgDn hints only for someone on the keyboard or a controller */ html[data-theme='neon']:not(.nav-visible) .tabs > [data-hint] { display: none; } /* The dropdowns: dark, with a gold arrow, in place of the browser's own */ html[data-theme='neon'] :is(.nx-select, .it-select) { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 34px 0 14px; border-radius: 8px; border: 1px solid var(--line-2); box-shadow: none; cursor: pointer; color: var(--text); font: 400 15px var(--font-text); outline: 0; transition: border-color 0.2s, box-shadow 0.2s; background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5c862' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; } html[data-theme='neon'] :is(.nx-select, .it-select):is(:hover, :focus) { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 200, 98, 0.12); } html[data-theme='neon'] :is(.nx-select, .it-select) option { background: #15121b; color: var(--text); } /* The profile's pencil: inside its card's corner */ html[data-theme='neon'] .pf-pencil { top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(6, 5, 9, 0.72); box-shadow: none; transition: border-color 0.2s, box-shadow 0.2s; } html[data-theme='neon'] .pf-pencil:is(:hover, .on) { transform: none; background: rgba(6, 5, 9, 0.85); border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 200, 98, 0.12); } /* The quest screen: rounded panels and thin lines like the rest */ html[data-theme='neon'] .quest-card { border: 1px solid var(--line-1); border-radius: 12px; background: rgba(30, 25, 38, 0.72); box-shadow: none; } html[data-theme='neon'] .qc-pic { border: 1px solid var(--line-2); border-radius: 10px; background: rgba(6, 5, 9, 0.6); box-shadow: none; } html[data-theme='neon'] :is(.qchip, .week-left) { border: 1px solid var(--line-1); border-radius: 6px; background: rgba(6, 5, 9, 0.6); box-shadow: none; } html[data-theme='neon'] .qchip.xp { border-color: rgba(79, 220, 198, 0.45); } html[data-theme='neon'] .wk-day { border: 1px solid var(--line-1); border-radius: 8px; background: rgba(30, 25, 38, 0.72); box-shadow: none; } html[data-theme='neon'] .wk-day.today { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(245, 200, 98, 0.12); } html[data-theme='neon'] .wk-track { border: 0; border-radius: 99px; background: rgba(6, 5, 9, 0.7); } html[data-theme='neon'] .wk-fill { border-radius: 99px; } html[data-theme='neon'] .wk-chest { border: 1px solid var(--line-2); border-image: none; border-radius: 10px; background: rgba(30, 25, 38, 0.95); } /* The Odds windows (every theme: ui/drops-box.js) */ .drops-box { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; padding-right: 6px; } .drops-block { display: flex; flex-direction: column; gap: 2px; } .drops-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .drops-btn { align-self: center; margin-top: 6px; } /* Saved builds, the item comparison, your emote wheel (every theme) */ .builds-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; } .builds-one { display: inline-flex; align-items: center; gap: 2px; } .item-diff { margin-top: 2px; } .wheelpick-slots, .wheelpick-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .wheelpick-slots { padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .wheelpick-b { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 10px; cursor: pointer; } .wheelpick-b.on { border-color: var(--gold, #e8b64c); } .wheelpick-b.in { opacity: 0.55; } /* A painted sheet played once across the battle (ui/screens/match.js sheetFlash) */ .fx-flash { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; } /* ---------------------------------------------------------- opening a chest or an egg (ui/neon/chest-show.js) */ .panel.modal.cf-modal { position: fixed; inset: 0; width: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #07050b; box-shadow: none; animation: none; overflow: hidden; } .cf-modal .modal-body { position: absolute; inset: 0; padding: 0; margin: 0; overflow: hidden; max-height: none; } .cf-stage { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; } .cf-fx { image-rendering: pixelated; display: block; pointer-events: none; } .cf-world { position: absolute; inset: 0; } .cf-vault { position: absolute; inset: 0; background-position: center; background-size: cover; image-rendering: pixelated; animation: cf-fall-dark .6s ease-out both; } .cf-vault::after { content: ''; position: absolute; inset: 0; background: rgba(7, 5, 11, 0); transition: background .4s; } .cf-dealing .cf-vault::after { background: rgba(7, 5, 11, .62); } @keyframes cf-fall-dark { from { filter: brightness(0); } to { filter: brightness(1); } } .cf-centre, .cf-back-fx, .cf-front-fx, .cf-banners { position: absolute; inset: 0; pointer-events: none; } .cf-centre { display: grid; place-items: center; } .cf-centre > * { grid-area: 1 / 1; } .cf-back-fx > *, .cf-front-fx > *, .cf-pop > * { /* centred, unless said otherwise */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .cf-rays { opacity: .85; } .cf-dealing .cf-rays { opacity: .5; transition: opacity .5s; } .cf-pillar { top: 44%; } .cf-back-fx > .cf-shower, .cf-front-fx > .cf-shower { transform: none; } .cf-back-fx > .cf-shower.cf-turned, .cf-front-fx > .cf-shower.cf-turned { transform: scaleX(-1); } /* (what falls past a tile's edge is cut there in the art: it fades instead) */ .cf-shower { -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 15%, #000 85%, transparent 97%); mask-image: linear-gradient(to bottom, transparent 3%, #000 15%, #000 85%, transparent 97%); } /* a chest's frame: see playChestShow */ .cf-stage.in-box .cf-chest { place-items: start center; } .cf-stage.in-box .cf-chest > * { -webkit-mask-image: linear-gradient(to bottom, #000 89%, transparent 92.5%); mask-image: linear-gradient(to bottom, #000 89%, transparent 92.5%); } /* (the burst's glow ends flat under the chest) */ .cf-stage:not(.in-box) .cf-chest > * { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 89%, transparent 92.5%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 89%, transparent 92.5%); } /* what you got, readable over anything */ .cf-mascot > :is(.h2, .small) { margin: 0; padding: 4px 14px; background: rgba(8, 7, 12, 0.88); border: 1px solid var(--line-2); text-shadow: none; } .cf-mascot > .h2 { margin-top: 6px; font: 700 22px/1.15 var(--nx-cap); letter-spacing: 0.02em; text-transform: none; } .cf-mascot > .h2::before, .cf-mascot > .h2::after { display: none; } .cf-mascot > .small { font: 600 13px/1.25 var(--nx-ui); } .cf-mascot > .muted { display: none; } /* (the banner says it) */ /* Home's banner: the golden arrows, half there until you're on them */ html[data-theme='neon'] .nx-f-arrow { position: absolute; z-index: 6; top: 50%; translate: 0 -50%; width: 36px; height: 72px; display: grid; place-items: center; padding: 0; border: 0; background: none; opacity: 0.45; transition: opacity 0.15s, scale 0.15s; } html[data-theme='neon'] .nx-f-arrow.prev { left: 0; } html[data-theme='neon'] .nx-f-arrow.next { right: 0; } html[data-theme='neon'] .nx-f-arrow :is(canvas, img) { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)); image-rendering: pixelated; } html[data-theme='neon'] .nx-f-arrow:is(:hover, :focus-visible) { opacity: 1; scale: 1.12; } /* a slide's painted scene: its picture covers the banner, kept to the right; its group stands on it at the size it was drawn */ html[data-theme='neon'] .nx-showcase { transition: opacity 0.3s; } html[data-theme='neon'] .nx-showcase.away { opacity: 0; pointer-events: none; } html[data-theme='neon'] .nx-slide > .art.scene { container-type: size; filter: none; } html[data-theme='neon'] .nx-slide.has-scene::before { background: linear-gradient(90deg, rgba(8, 7, 12, 0.92), rgba(8, 7, 12, 0.62) 32%, rgba(8, 7, 12, 0) 50%); } html[data-theme='neon'] .nx-scene { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: max(100cqw, calc(100cqh * 1672 / 941)); aspect-ratio: 1672 / 941; background-size: 100% 100%; } html[data-theme='neon'] .nx-scene-group { position: absolute; left: 42.46%; top: 10.63%; width: 57.42%; height: 68.01%; pointer-events: none; } html[data-theme='neon'] .nx-scene-group > * { display: block; } html[data-theme='neon'] .nx-slide:not(.on) .nx-scene-group .art-sprite { animation-play-state: paused; } html[data-theme='neon'] .nx-feature:has(.nx-slide.on.has-scene) :is(.nx-sparks, .nx-dust) { display: none; } @media (max-width: 760px) { html[data-theme='neon'] .nx-slide.has-scene::before { background: linear-gradient(180deg, rgba(8, 7, 12, 0.94), rgba(8, 7, 12, 0.72) 42%, rgba(8, 7, 12, 0) 58%); } html[data-theme='neon'] .art.scene > .nx-scene-group { left: 0; right: 0; top: auto; bottom: 7%; width: 100%; height: auto; aspect-ratio: 512 / 300; } html[data-theme='neon'] .nx-f-arrow { top: auto; bottom: 0; translate: none; height: 44px; } } /* the Ranked page: what you play on the left, the ladder of a rank on the right */ html[data-theme='neon'] .nx-rk-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px; align-items: start; } html[data-theme='neon'] .nx-rk-left { gap: 10px; min-width: 0; } html[data-theme='neon'] .nx-rk-left > .panel { margin: 0; } html[data-theme='neon'] .nx-rk-board { gap: 8px; margin: 0; min-width: 0; } html[data-theme='neon'] .rk-board-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; } html[data-theme='neon'] .rk-board-list .lb2-row { padding-block: 6px; flex-shrink: 0; } html[data-theme='neon'] .rk-board-list .lb2-row .lb2-val b.num { font-size: 20px; } html[data-theme='neon'] .rk-board-medal { display: inline-grid; place-items: center; } html[data-theme='neon'] .rk-board-you:empty { display: none; } @media (max-width: 760px) { html[data-theme='neon'] .nx-rk-page { grid-template-columns: minmax(0, 1fr); } /* the boards' choices share a line, the search has its own */ html[data-theme='neon'] .lb2-tools { flex-wrap: wrap; } html[data-theme='neon'] .lb2-tools > .lb2-pick { flex: 1 1 0; min-width: 0; } html[data-theme='neon'] .lb2-tools .lb2-select { min-width: 0; width: 100%; } html[data-theme='neon'] .lb2-tools > .lb2-search { flex: 1 1 100%; width: 100%; } } /* a cup: what's to win, and who's in */ .cup-board .lb2-row { padding-block: 6px; } .cup-board .lb2-row .lb2-val b.num { font-size: 24px; } .cup-prizes { color: var(--gold); } .cup-players { display: flex; flex-wrap: wrap; gap: 4px; } .cup-player { padding: 2px 8px; font-size: 12px; border: 1px solid rgba(255, 246, 220, 0.25); background: rgba(0, 0, 0, 0.25); } .cup-player.free { opacity: 0.4; } /* a part of a Settings page: its title */ html[data-theme='neon'] .set-sec { margin: 12px 0 0; font: 700 13px/1.2 var(--nx-cap); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } html[data-theme='neon'] .set-sec:first-child { margin-top: 0; } /* a chest or an egg in a list: in the middle of its box */ html[data-theme='neon'] .nx-mode .th > :is(.chest-pic, .egg-pic) { display: block; margin-inline: auto; } /* a gold icon on a yellow button: dark, or it can't be seen */ html[data-theme='neon'] .btn.primary .nx-gold { filter: brightness(0.22); } /* crafting, at the forge: everything over the anvil, in its dark arch (see playCraftShow) */ .cf-forge :is(.cf-centre, .cf-back-fx, .cf-front-fx) { top: -10%; bottom: 10%; } .cf-core-in { animation: cf-core-in .4s steps(8) both; } @keyframes cf-core-in { from { transform: scale(0.15); opacity: 0; } to { transform: none; opacity: 1; } } .cf-front-fx > .cf-embers { opacity: .8; } .cf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .cf-flash.on { animation: cf-flash .42s ease-out; } @keyframes cf-flash { 0% { opacity: 1; } 100% { opacity: 0; } } .cf-slam { animation: cf-slam .36s steps(6); } @keyframes cf-slam { 0%, 100% { transform: none; } 20% { transform: translate(var(--slam), calc(var(--slam) * -1)); } 40% { transform: translate(calc(var(--slam) * -.8), calc(var(--slam) * .6)); } 60% { transform: translate(calc(var(--slam) * .5), calc(var(--slam) * .5)); } 80% { transform: translate(calc(var(--slam) * -.3), calc(var(--slam) * -.2)); } } .cf-rattle { animation: cf-rattle 1.5s steps(30) forwards; } @keyframes cf-rattle { 0% { transform: none; } 20% { transform: translate(-1px, 1px); } 30% { transform: translate(2px, -1px); } 45% { transform: translate(-3px, 1px); } 60% { transform: translate(3px, -2px); } 72% { transform: translate(-4px, 3px); } 84% { transform: translate(5px, -3px); } 92% { transform: translate(-6px, 4px); } 100% { transform: translate(6px, -4px); } } /* the tap: the whole stage is the button, its hint under the chest */ .cf-tap { position: absolute; inset: 0; background: none; border: 0; padding: 0 0 max(84px, 13vh); display: flex; align-items: flex-end; justify-content: center; color: #fff3cf; } .cf-tap:focus { outline: none; } .cf-tap-hint { font-size: 20px; letter-spacing: .06em; padding: 8px 22px; background: rgba(15, 11, 21, .82); border: 1px solid rgba(245, 200, 98, .55); border-radius: 8px; text-shadow: 0 2px 0 #1a1220; animation: cf-breathe 1.1s steps(6) infinite alternate; } @keyframes cf-breathe { from { opacity: .78; } to { opacity: 1; } } /* the cards */ .cf-table { position: absolute; inset: 0 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; pointer-events: auto; } .cf-table:empty { pointer-events: none; } .cf-grid { display: grid; gap: 14px; justify-content: center; } .cf-card { position: relative; z-index: 0; perspective: 900px; transition: filter .3s, transform .3s; } .cf-card.cf-out { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--tilt)) scale(.25); } .cf-card.cf-in { opacity: 1; transition: transform .42s cubic-bezier(.2, .9, .3, 1.15), opacity .12s; } .cf-flip { position: relative; width: 100%; aspect-ratio: 384 / 512; transform-style: preserve-3d; transition: transform var(--flip, 380ms) cubic-bezier(.45, .05, .4, 1); } .cf-up .cf-flip { transform: rotateY(180deg); } .cf-now .cf-flip { transition: none; } .cf-face, .cf-cardback { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cf-face { transform: rotateY(180deg); overflow: hidden; } .cf-face > .cc-card { width: 100% !important; } .cf-cardback { image-rendering: pixelated; } .cf-sheen { position: absolute; inset: 0; } .cf-aura { position: absolute; z-index: -1; left: 50%; top: calc(50% - 22px); transform: translate(-50%, -50%); pointer-events: none; } .cf-rim { position: absolute; left: 0; top: 0; right: 0; pointer-events: none; } .cf-pop { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 384 / 512; pointer-events: none; } .cf-cap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 40px; padding-top: 5px; text-align: center; line-height: 1.15; visibility: hidden; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; } .cf-cap .rarity-normal { color: #d8d4ea; } .cf-cap > span { padding: 0 6px; background: rgba(10, 7, 15, .74); border-radius: 4px; } .cf-shown .cf-cap { visibility: visible; animation: pop-in .25s; } .cf-new { position: absolute; left: 50%; top: -6px; width: 78%; transform: translateX(-50%); display: grid; place-items: center; pointer-events: none; animation: pop-in .25s; } .cf-new > * { grid-area: 1 / 1; } .cf-new img { width: 100%; image-rendering: pixelated; } .cf-new b { color: #fff3cf; font-size: 12px; text-shadow: 0 1px 0 #1a1220; } /* a legendary's moment: the others fall back, it trembles, then turns slowly */ .cf-focus .cf-card:not(.cf-star):not(.cf-shown) { filter: brightness(.45); } .cf-star { z-index: 3; transform: scale(1.1); } .cf-tremble .cf-flip { animation: cf-tremble .12s steps(2) infinite; } @keyframes cf-tremble { from { translate: -2px 1px; } to { translate: 2px -1px; } } .cf-banners { display: flex; flex-direction: column; align-items: center; padding-top: 3vh; z-index: 4; } .cf-banner { position: relative; display: grid; place-items: center; animation: cf-banner .3s steps(5) both; } .cf-banner > * { grid-area: 1 / 1; } .cf-banner img { width: 100%; image-rendering: pixelated; } .cf-banner b { color: #fff3cf; font-size: clamp(16px, 2.6vw, 26px); text-shadow: 0 2px 0 #1a1220; padding-bottom: 4%; } @keyframes cf-banner { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } } .cf-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; animation: pop-in .25s; } .cf-items.cf-wait { visibility: hidden; animation: none; } .cf-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: rgba(21, 18, 27, .86); border: 1px solid rgba(245, 200, 98, .3); border-radius: 8px; } .cf-mascot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: pop-in .35s; text-shadow: 0 2px 0 #000; } .cf-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; padding-bottom: var(--safe-b, 0); display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; } .cf-foot > * { pointer-events: auto; } .cf-skip { position: absolute; right: max(14px, var(--safe-r, 0px)); opacity: .8; } .cf-go { min-width: 200px; animation: pop-in .25s; } /* the rewards everywhere else (ui/neon/reward-fx.js) */ .rfx-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; } .rfx-pop, .rfx-piece { position: absolute; image-rendering: pixelated; } .rfx-pop { transform: translate(-50%, -50%); }