/* style.css β the entire visual layer of /v-badge-code. Nothing this tool needs lives in
* css/Home-style.css or css/tools.css, and nothing here leaks out: every
* selector is prefixed .vb- or nested under .vb-app, and the article rules at the bottom
* (.seo .vb-*) are the only ones that style injected content.
*
* Loaded twice on purpose, both times from index.html and never from JavaScript:
* - in -> a cold load / direct URL / Google entry;
* - inside -> an in-app SPA mount, where js/app.js lifts ONLY
* main.tool-page's innerHTML into the shell and a
* link would be left behind. Same URL, so one cache hit.
*
* Colour policy. The site's tokens (--c-surface, --c-border, --c-text) drive the page
* furniture. The PREVIEW SURFACES deliberately do not follow the light/dark switch: they
* simulate a Free Fire profile panel, which is dark in the game whatever the phone is set
* to, so those values are fixed and declared once on .vb-app as --vb-*.
*
* Geometry rule for this rebuild: slim console strips only. Vertical padding never passes
* 12px, there are no oversized cards, and no full-width solid orange banner anywhere.
*/
.vb-app {
--vb-ink: #05070d;
--vb-panel: #0b0f19;
--vb-panel-2: #121826;
--vb-edge: rgba(255, 255, 255, .08);
--vb-edge-2: rgba(255, 255, 255, .14);
--vb-fg: #eef2f8;
--vb-fg-dim: #93a0b5;
--vb-fg-faint: #6f7d94;
--vb-gold: #ffd319;
--vb-sky: rgba(56, 189, 248, .35);
--vb-frost: #f0f9ff;
--vb-slate: #0f172a;
--vb-warn: #ff6b6b;
/* Brand typography β mirrors css/Home-style.css `body { font-family: 'Times New Roman' }`,
so every header, card, pill and button in this tool carries the same face, the same 800
weight ladder and the same tightened tracking as the homepage. Code and glyph previews
keep their own stacks below, because those exist to show characters, not brand. */
--vb-ui: 'Times New Roman', Times, serif;
--vb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Symbol-first stack: the point of a preview is showing the real glyph, so the faces
that actually carry κ§ π© δΊ βοΈ» come before any UI font. */
--vb-glyph: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols",
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
font-family: var(--vb-ui);
max-width: 100%;
overflow-x: hidden;
}
.vb-app *, .vb-app *::before, .vb-app *::after { box-sizing: border-box; }
html.vb-locked, html.vb-locked body { overflow: hidden; }
/* ---------- compact header ---------- */
.vb-head {
display: flex; flex-direction: column; align-items: center;
gap: 9px;
padding: 2px 4px 4px;
text-align: center;
}
.vb-head__mark {
flex: none;
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 10px;
border: 1px solid rgba(255, 211, 25, .38);
background: var(--vb-ink);
font-family: var(--vb-glyph);
font-size: 24px; line-height: 1;
color: var(--vb-gold);
text-shadow: 0 0 14px rgba(255, 211, 25, .6);
}
.vb-app h1.vb-head__title {
margin: 0;
font-family: var(--vb-ui);
font-size: 22px; line-height: 1.25; font-weight: 800;
letter-spacing: -.4px;
color: var(--c-text);
text-wrap: balance;
}
/* half the wordmark in the brand gradient, half left as solid ink */
.vb-head__grad {
background: var(--c-grad-primary);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Full content width, not a 46ch column: the old measure squeezed the description into
three cramped lines with dead space either side of it. It now runs to the card's own
boundary (820px cap, standard side padding) and settles into two balanced lines on
desktop and tablet, still centred. */
.vb-head__sub {
margin: 0;
width: 100%;
max-width: 820px;
padding: 0 12px;
font-size: 12.5px; line-height: 1.65;
color: var(--c-muted);
text-align: center;
text-wrap: balance;
}
@media (min-width: 640px) {
.vb-app h1.vb-head__title { font-size: 27px; }
.vb-head__sub { font-size: 13.5px; }
}
/* ---------- studio ---------- */
.vb-studio {
margin-top: 12px;
border: 1px solid var(--c-border);
border-radius: 14px;
background: var(--c-surface);
padding: 10px;
}
.vb-studio__inputs { display: grid; gap: 8px; }
@media (min-width: 620px) { .vb-studio__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vb-in { display: block; min-width: 0; }
.vb-in__top {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
margin: 0 2px 5px;
font-size: 11px; font-weight: 800; letter-spacing: .2px;
color: var(--c-faint);
}
.vb-in__count {
font-style: normal; font-size: 10.5px; font-weight: 800;
font-variant-numeric: tabular-nums;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid var(--c-line);
color: var(--c-muted);
}
.vb-in__count.is-warn { border-color: rgba(255, 77, 77, .45); background: rgba(255, 77, 77, .1); color: #d64545; }
.vb-in__field {
width: 100%;
height: 42px; padding: 0 12px;
border: 1.5px solid var(--c-line);
border-radius: 10px;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--vb-glyph);
font-size: 15px; font-weight: 700;
outline: none;
transition: border-color .14s ease;
}
.vb-in__field:focus { border-color: rgba(56, 189, 248, .8); }
/* the in-game simulation strip: dark, glowing, never themed */
.vb-sim {
position: relative;
margin-top: 10px;
border: 1px solid var(--vb-edge);
border-radius: 12px;
background:
radial-gradient(120% 150% at 50% -20%, rgba(56, 189, 248, .12) 0%, rgba(56, 189, 248, 0) 60%),
var(--vb-ink);
padding: 12px 12px 11px;
min-width: 0;
}
.vb-sim__tag {
display: block;
margin: 0 0 6px;
font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
color: var(--vb-fg-faint);
}
.vb-sim__name {
font-family: var(--vb-glyph);
font-size: 21px; line-height: 1.45; font-weight: 800;
color: var(--vb-fg);
overflow-wrap: anywhere;
}
.vb-sim__bio {
margin-top: 4px;
font-family: var(--vb-glyph);
font-size: 13px; line-height: 1.5; font-weight: 700;
color: var(--vb-fg-dim);
overflow-wrap: anywhere;
}
.vb-sim__bio[hidden] { display: none; }
.vb-raw {
margin-top: 8px;
padding: 8px 10px;
border: 1px solid var(--vb-edge);
border-radius: 10px;
background: var(--vb-panel-2);
}
.vb-raw code {
display: block;
font-family: var(--vb-mono);
font-size: 11.5px; line-height: 1.6;
color: #a9b8cf;
overflow-wrap: anywhere; word-break: break-word;
}
.vb-run { display: flex; gap: 8px; margin-top: 9px; }
.vb-act {
flex: 1;
height: 38px; padding: 0 14px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--vb-sky);
border-radius: 9px;
background: #fff;
color: var(--vb-slate);
font-family: var(--vb-ui);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: background-color .14s ease, border-color .14s ease, transform .08s ease;
}
.vb-act:hover { background: var(--vb-frost); border-color: rgba(56, 189, 248, .6); }
.vb-act:active { transform: translateY(1px); }
.vb-act--primary { background: var(--vb-frost); font-weight: 700; }
.vb-act:focus-visible { outline: 2px solid rgba(56, 189, 248, .8); outline-offset: 2px; }
.vb-picks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.vb-pick {
flex: 1 1 auto; min-width: 0;
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 11px;
border: 1px solid var(--c-line);
border-radius: 9px;
background: var(--c-bg);
color: var(--c-muted);
font-family: var(--vb-ui);
font-size: 11.5px; font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: border-color .14s ease;
}
.vb-pick:hover { border-color: rgba(56, 189, 248, .6); }
.vb-pick em {
font-style: normal;
font-family: var(--vb-mono);
font-size: 10.5px; font-weight: 700;
color: var(--c-faint);
overflow: hidden; text-overflow: ellipsis;
}
.vb-pick__glyph { font-family: var(--vb-glyph); font-size: 13px; color: var(--vb-gold); }
.vb-pick { touch-action: manipulation; }
/* The symbol bank is the studio's headline action β 17,000 tiles behind one pill β so it
takes the brand treatment (rich dark base, #ff6b00 edge, scaled-up glyph) and its own
full-width line instead of sitting in the row as a third neutral chip. */
.vb-pick--sym {
flex: 1 1 100%;
height: 44px;
gap: 10px;
border: 1.5px solid #ff6b00;
border-radius: 11px;
background: linear-gradient(180deg, #151b28 0%, #0b0f19 100%);
color: #ffffff;
font-size: 13.5px; font-weight: 800; letter-spacing: -.1px;
box-shadow: 0 0 0 3px rgba(255, 107, 0, .12);
transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.vb-pick--sym:hover { border-color: #ff8a2b; box-shadow: 0 0 0 4px rgba(255, 107, 0, .18); }
.vb-pick--sym:active { transform: translateY(1px); }
.vb-pick--sym .vb-pick__glyph {
flex: none;
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
background: rgba(255, 107, 0, .18);
font-size: 19px;
color: #ffb066;
}
.vb-pick--sym em { margin-left: auto; color: #ff9d4d; font-size: 12px; font-weight: 800; }
.vb-dot {
flex: none;
width: 14px; height: 14px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.vb-glyphrow {
display: flex; gap: 6px;
margin-top: 9px;
padding-bottom: 3px;
overflow-x: auto;
scrollbar-width: none;
}
.vb-glyphrow::-webkit-scrollbar { display: none; }
.vb-glyphbtn {
flex: none;
min-width: 40px; height: 36px; padding: 0 9px;
border: 1px solid var(--c-line);
border-radius: 9px;
background: var(--vb-panel);
color: var(--vb-fg);
font-family: var(--vb-glyph);
font-size: 16px; line-height: 1;
cursor: pointer;
transition: border-color .14s ease, color .14s ease;
}
.vb-glyphbtn:hover { border-color: var(--vb-sky); }
.vb-glyphbtn.is-on {
border-color: rgba(255, 211, 25, .55);
color: var(--vb-gold);
text-shadow: 0 0 10px rgba(255, 211, 25, .55);
}
/* All four tags on one centred row. The "In-game tags" caption used to occupy the start of
the row and pushed [c] Center onto a line of its own with dead space beside it; the group
already carries an aria-label, so the visible caption is redundant. nowrap keeps the four
together and the padding step below keeps them inside a 360px screen. */
.vb-tagrow {
display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
gap: 8px;
margin-top: 9px;
/* Escape hatch for very narrow screens: the four tags never shrink, so if they cannot fit
the row scrolls rather than letting the labels sit on their own borders. */
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.vb-tagrow::-webkit-scrollbar { display: none; }
.vb-tagrow__label { display: none; }
.vb-tag {
flex: 0 0 auto;
white-space: nowrap;
height: 30px; padding: 0 10px;
border: 1px solid var(--c-line);
border-radius: 8px;
background: var(--c-bg);
color: var(--c-muted);
font-family: var(--vb-mono);
font-size: 11px; font-weight: 700;
cursor: pointer;
transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.vb-tag.is-on { border-color: var(--vb-sky); background: var(--vb-frost); color: var(--vb-slate); }
/* Under 380px the words are dropped and the bracket codes carry the row on their own β
the four tags then fit a 320px screen with room to spare, still centred, no scroll. */
@media (max-width: 380px) {
.vb-tagrow { gap: 6px; }
.vb-tag { padding: 0 9px; font-size: 12px; }
.vb-tag__word { display: none; }
}
/* ---------- category rail ---------- */
.vb-rail-wrap { margin: 12px 0 0; }
.vb-rail {
display: flex; gap: 7px;
/* No left inset: the rail shares its left boundary with the card grid below, so a
padding-left here is exactly what made the first tab sit proud of the cards. The right
padding stays as scroll runway for the last tab. */
padding: 2px 16px 8px 0;
scroll-padding-left: 0;
scroll-padding-right: 16px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.vb-rail::-webkit-scrollbar { display: none; }
.vb-pill {
flex: none;
scroll-snap-align: start;
height: 34px; padding: 0 14px;
border: 1px solid var(--c-line);
border-radius: 999px;
background: var(--c-surface);
color: var(--c-muted);
font-family: var(--vb-ui);
font-size: 12px; font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.vb-pill { transition: all .2s cubic-bezier(.16, 1, .3, 1); }
.vb-pill:hover { border-color: rgba(56, 189, 248, .6); }
.vb-pill:active { transform: scale(.96); box-shadow: 0 0 0 3px rgba(56, 189, 248, .16); }
.vb-pill.is-on {
animation: vbPop .22s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes vbPop { from { transform: scale(.93); } to { transform: scale(1); } }
.vb-pill.is-on {
border-color: transparent;
background: var(--vb-slate);
color: #fff;
}
.vb-railnote {
margin: 0 auto 10px;
max-width: 52ch;
font-size: 11px; font-weight: 700; line-height: 1.55;
color: var(--c-faint);
text-align: center;
text-wrap: pretty;
font-variant-numeric: tabular-nums;
}
.vb-railnote b { color: var(--c-text); }
/* ---------- slim console strips ---------- */
/* background inherited from the panel, never transparent: even mid-swap there is no frame
where the page's light background can show through the grid. */
.vb-feed {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px;
background: inherit;
}
@media (min-width: 760px) { .vb-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the only motion on a page swap β starts at .85, so the card surface is visible the whole
time and there is nothing to flash */
@keyframes vbSwapIn { from { opacity: .85; } to { opacity: 1; } }
.vb-swap { animation: vbSwapIn .15s ease-out both; }
@media (prefers-reduced-motion: reduce) { .vb-swap { animation: none; } }
.vb-strip {
display: flex; align-items: center; gap: 10px;
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--vb-edge);
border-radius: 10px;
background: var(--vb-panel);
}
.vb-strip--in { animation: vbFadeUp .22s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vbFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* the pinned official badge: gold hairline + faint gold wash, no extra height */
.vb-strip--pin {
border-color: rgba(255, 211, 25, .42);
background:
linear-gradient(90deg, rgba(255, 211, 25, .09) 0%, rgba(255, 211, 25, 0) 55%),
var(--vb-panel);
}
.vb-strip--pin .vb-strip__code { color: var(--vb-gold); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .vb-strip--in { animation: none; } }
.vb-strip__main { flex: 1; min-width: 0; }
.vb-strip__view {
font-family: var(--vb-glyph);
font-size: 16px; line-height: 1.4; font-weight: 700;
color: var(--vb-fg);
overflow-wrap: anywhere;
}
.vb-strip__view--badge { font-size: 22px; line-height: 1.25; }
.vb-strip__view .vb-v { color: var(--vb-gold); text-shadow: 0 0 10px rgba(255, 211, 25, .6); }
.vb-strip__sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.vb-strip__code {
min-width: 0;
font-family: var(--vb-mono);
font-size: 10px; letter-spacing: .1px;
color: var(--vb-fg-faint);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-strip__len {
flex: none;
font-family: var(--vb-mono);
font-size: 10px; font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--vb-fg-faint);
}
.vb-strip__len.is-warn { color: var(--vb-warn); }
/* Studio strips keep their inline sub-line; only the nickname section pins and hides it. */
.vb-strip__confirm { display: none; }
.vb-strip__copy {
flex: none;
height: 32px; padding: 0 14px;
border: 1px solid rgba(56, 189, 248, .4);
border-radius: 8px;
background: rgba(240, 249, 255, .95);
color: #0f172a;
font-family: var(--vb-ui);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .09s ease;
}
.vb-strip__copy:hover { background: var(--vb-frost); border-color: rgba(56, 189, 248, .7); box-shadow: 0 0 0 3px rgba(56, 189, 248, .12); }
.vb-strip__copy:active { transform: scale(.96); }
.vb-strip__copy:focus-visible { outline: 2px solid rgba(56, 189, 248, .8); outline-offset: 2px; }
.vb-strip.is-copied .vb-strip__copy {
background: #dcfce7; border-color: rgba(22, 163, 74, .5); color: #14532d;
box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}
/* Load More / Regenerate β the site's own brand gradient at the homepage angle, an inset
top highlight so the key reads as raised, and a real press state. The progress counter
sits beside it on desktop and under it on a phone. */
/* Pager bar: range on the left, the branded action on the right, one row at every width β
the feed is a fixed 30 cards, so this bar is the only thing that moves. */
.vb-morerow {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%;
margin: 14px 0 0;
padding: 9px 10px;
border: 1px solid var(--c-border);
border-radius: 12px;
background: var(--c-surface);
}
.vb-morerow[hidden] { display: none; }
.vb-morecount {
flex: 1 1 auto;
min-width: 0;
font-family: var(--vb-ui);
font-size: 12.5px; font-weight: 700; line-height: 1.45;
font-variant-numeric: tabular-nums;
color: var(--c-muted);
text-align: left;
text-wrap: pretty;
}
.vb-morecount b { font-weight: 800; color: var(--c-text); }
.vb-morecount i { font-style: normal; color: #b43b00; }
[data-theme="dark"] .vb-morecount i { color: #ff8a2b; }
.vb-more {
display: block;
flex: none;
width: auto; min-width: 170px; max-width: 60%;
min-height: 46px;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #ff6b00 0%, #b43b00 100%);
color: #fff;
font-family: var(--vb-ui);
font-size: 15px; font-weight: 800; letter-spacing: -.1px;
text-shadow: 0 1px 1px rgba(88, 28, 0, .5);
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 12px rgba(180, 59, 0, .3);
transition: filter .16s ease, transform .1s ease, box-shadow .16s ease;
}
.vb-more:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 5px 18px rgba(180, 59, 0, .36); }
.vb-more:active { transform: translateY(2px) scale(.985); box-shadow: inset 0 2px 5px rgba(88, 28, 0, .45); }
.vb-more:focus-visible { outline: 2px solid rgba(255, 107, 0, .85); outline-offset: 2px; }
.vb-more[data-mode="restart"] { background: linear-gradient(135deg, #b43b00 0%, #7a2600 100%); }
@media (max-width: 400px) {
.vb-morerow { gap: 8px; padding: 8px; }
.vb-morecount { font-size: 11px; }
.vb-more { min-width: 0; padding: 0 13px; font-size: 13.5px; }
}
/* The symbol bank's own key still spans its footer. */
.vb-modal__foot .vb-more { width: 100%; max-width: none; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .vb-more, .vb-pill { transition: none; animation: none; } }
.vb-more[hidden] { display: none; }
/* ---------- secondary nickname block ---------- */
/* This whole section is deliberately light: it produces plain Unicode nicknames, not
in-game colour codes, so there is no dark game surface to simulate. Fixed light values
rather than theme tokens β the requirement is a white-tone palette either way. */
.vb-extra {
margin-top: 18px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #f8fafc;
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease;
}
.vb-extra:hover, .vb-extra.is-open {
border-color: #cbd5e1;
box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}
.vb-extra__head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 13px 14px 14px;
cursor: pointer;
list-style: none;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
-webkit-tap-highlight-color: transparent;
}
.vb-extra__head::-webkit-details-marker { display: none; }
.vb-extra__titles { flex: 1 1 auto; min-width: 0; text-align: center; }
.vb-app h3.vb-extra__title {
display: block;
margin: 0;
font-family: var(--vb-ui);
font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.35;
color: #0f172a;
text-wrap: balance;
}
.vb-extra__head em {
display: block;
margin: 3px auto 0;
max-width: 42ch;
font-style: normal;
font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .1px;
color: #64748b;
text-wrap: pretty;
}
/* The field gets its own full-width line under the titles: order 3 puts it after the
chevron, and flex-basis 100% forces the wrap regardless of title length. */
.vb-extra__field {
order: 3;
flex: 1 1 100%;
position: relative;
display: block;
width: 100%;
margin-top: 4px;
}
.vb-extra__clear {
position: absolute; top: 50%; right: 6px;
transform: translateY(-50%);
height: 28px; padding: 0 11px;
border: 1px solid #e2e8f0;
border-radius: 7px;
background: #f8fafc;
color: #64748b;
font-family: var(--vb-ui);
font-size: 11.5px; font-weight: 700;
cursor: pointer;
transition: background-color .14s ease, color .14s ease;
}
.vb-extra__clear:hover { background: #e0f2fe; color: #0f172a; }
.vb-extra__clear[hidden] { display: none; }
.vb-extra__input {
display: block;
width: 100%;
box-sizing: border-box;
height: 46px; padding: 12px 76px 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 9px;
background: #ffffff;
color: #0f172a;
font-family: var(--vb-glyph);
font-size: 14px; font-weight: 700;
outline: none;
cursor: text;
transition: border-color .16s ease, box-shadow .16s ease;
}
.vb-extra__input::placeholder { font-family: var(--vb-ui); font-size: 12.5px; font-weight: 600; color: #94a3b8; }
.vb-extra__input:focus { border-color: rgba(56, 189, 248, .8); box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); }
.vb-extra__chev {
order: 2;
flex: none;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 7px;
border: 1px solid #cbd5e1;
background: #ffffff;
transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}
.vb-extra__chev::before {
content: "";
width: 7px; height: 7px;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(45deg) translate(-1px, -1px);
}
.vb-extra__head:hover .vb-extra__chev { border-color: #94a3b8; }
.vb-extra.is-open .vb-extra__chev { transform: rotate(-180deg); border-color: rgba(56, 189, 248, .7); }
/* 0fr -> 1fr keeps the collapse animatable without measuring anything in JS */
.vb-extra__slide {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1), opacity .24s ease;
}
.vb-extra.is-open .vb-extra__slide { grid-template-rows: 1fr; opacity: 1; }
.vb-extra__body { min-height: 0; overflow: hidden; padding: 2px 12px 14px; }
.vb-extra__note {
margin: 10px auto 8px;
max-width: 60ch;
font-size: 11.5px; line-height: 1.65;
color: #64748b;
text-align: center;
text-wrap: pretty;
}
.vb-extra__note b { color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-extra .vb-rail-wrap { margin: 0; }
/* This one feed follows the homepage card look, not the in-game dark panel: these are
plain Unicode nicknames, not colour codes, so there is no game surface to simulate. */
/* Roomier geometry than the studio strips: a nickname can be three frames wide and wrap
onto two lines, so these cards grow vertically instead of squeezing the sub-line into
the name. The sub-line is lifted out of the flow entirely β pinned to the bottom-left
border and hidden until touched β so the name stays optically centred in the card at
every length, and the reserved bottom padding keeps a two-line name off the strip. */
.vb-extra .vb-strip {
position: relative;
align-items: center;
gap: 0;
min-height: 72px;
padding: 16px 14px 22px;
border-color: #e2e8f0;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.vb-extra .vb-strip__main {
display: flex; align-items: center; justify-content: center;
width: 100%;
padding-right: 14px;
border-right: 1px solid #eef2f7;
}
.vb-extra .vb-strip__view {
display: block;
width: 100%;
text-align: center;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
font-size: 19px;
font-weight: 800;
line-height: 1.4;
color: #0f172a;
}
.vb-extra .vb-strip__sub {
position: absolute;
left: 12px; right: 12px; bottom: 4px;
margin: 0;
justify-content: flex-start;
gap: 8px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.vb-extra .vb-strip.is-meta .vb-strip__sub { opacity: 1; }
/* Sub-label muted gray, not the lighter slate: at 11px on white, #94a3b8 was ~2.6:1 and
unreadable β #64748b clears 4.5:1. The dark-mode override keeps #94a3b8, which is correct
against the #121826 card. */
.vb-extra .vb-strip__code {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: 11px; color: #64748b;
}
.vb-extra .vb-strip__len { font-size: 11px; color: #64748b; }
.vb-extra .vb-strip__confirm {
display: none;
font-family: var(--vb-mono);
font-size: 11px; font-weight: 700;
color: #16a34a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-extra .vb-strip.is-confirm .vb-strip__code,
.vb-extra .vb-strip.is-confirm .vb-strip__len { display: none; }
.vb-extra .vb-strip.is-confirm .vb-strip__confirm { display: block; }
@media (prefers-reduced-motion: reduce) { .vb-extra .vb-strip__sub { transition: none; } }
.vb-extra .vb-strip__len.is-warn { color: #d64545; }
.vb-extra .vb-strip__copy {
flex: none;
align-self: center;
height: 34px;
border: 1px solid #cbd5e1;
border-radius: 8px;
margin-left: 14px;
padding: 0 15px;
background: #ffffff;
color: #0f172a;
}
.vb-extra .vb-strip__copy:hover { background: #e0f2fe; border-color: rgba(56, 189, 248, .6); box-shadow: none; }
.vb-extra .vb-strip.is-copied .vb-strip__copy { background: #dcfce7; border-color: rgba(22, 163, 74, .5); color: #14532d; }
.vb-extra .vb-pill { background: #ffffff; border-color: #e2e8f0; color: #64748b; }
.vb-extra .vb-pill:hover { border-color: #cbd5e1; background: #f1f5f9; }
.vb-extra .vb-pill.is-on { background: #0f172a; color: #ffffff; border-color: transparent; }
.vb-extra .vb-pill__n {
font-style: normal; font-weight: 700; font-size: 10.5px;
font-variant-numeric: tabular-nums;
opacity: .62;
}
.vb-extra .vb-morerow { border-color: #e2e8f0; background: #ffffff; }
.vb-extra .vb-morecount { color: #64748b; }
.vb-extra .vb-morecount b { color: #0f172a; }
@media (prefers-reduced-motion: reduce) {
.vb-extra__slide, .vb-extra__chev { transition: none; }
}
/* ---------- modals ---------- */
/* Dialogs are direct children of body, outside the animated route container.
Keep the sheet above its backdrop in this single, isolated stacking context. */
.vb-modal {
position: fixed; inset: 0; z-index: 99999;
isolation: isolate;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: auto;
touch-action: manipulation;
}
.vb-modal[hidden] { display: none; }
.vb-modal__back { position: absolute; inset: 0; z-index: 0; background: rgba(5, 7, 13, .62); pointer-events: auto; }
.vb-modal__sheet {
position: relative;
z-index: 1;
pointer-events: auto;
display: flex; flex-direction: column;
width: 100%; max-width: 640px;
max-height: 86vh;
max-height: 86dvh;
border: 1px solid var(--vb-edge-2);
border-radius: 16px 16px 0 0;
background: var(--vb-panel);
color: var(--vb-fg);
overflow: hidden;
}
@media (min-width: 620px) {
.vb-modal { align-items: center; padding: 20px; }
.vb-modal__sheet { border-radius: 16px; max-height: 82vh; max-height: 82dvh; }
}
/* Every band around the scrolling body is flex: none. The sheet is capped at 82vh, so on
a short viewport flex-shrink would otherwise compress these fixed bands below their
content height β and because .vb-chiprow sets overflow-x, its overflow-y computes to
auto rather than visible, which clipped the pills instead of just showing them. */
.vb-modal__top {
flex: none;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
flex-wrap: wrap;
padding: 11px 12px;
border-bottom: 1px solid var(--vb-edge);
background: var(--vb-panel-2);
font-size: 13px; font-weight: 800;
}
.vb-modal__top b { color: var(--vb-gold); font-variant-numeric: tabular-nums; }
.vb-x {
flex: none;
width: 30px; height: 30px;
border: 1px solid var(--vb-edge);
border-radius: 8px;
background: transparent;
color: var(--vb-fg-dim);
font-size: 12px;
cursor: pointer;
}
.vb-x:hover { border-color: var(--vb-sky); color: #fff; }
.vb-seg {
flex: none;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 9px 12px;
border-bottom: 1px solid var(--vb-edge);
}
.vb-seg__label {
font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
color: var(--vb-fg-faint);
margin-right: 2px;
}
.vb-segbtn {
height: 28px; padding: 0 11px;
border: 1px solid var(--vb-edge);
border-radius: 999px;
background: transparent;
color: var(--vb-fg-dim);
font-family: var(--vb-ui);
font-size: 11.5px; font-weight: 700;
cursor: pointer;
}
.vb-segbtn.is-on { border-color: var(--vb-sky); background: var(--vb-frost); color: var(--vb-slate); }
.vb-segbtn--clear { margin-left: auto; }
/* "Apply to Badge / Text" rides in the sheet's own header strip rather than in a band of its
own beneath it: that band cost ~46px of vertical space on a 360px screen and pushed the
swatch grid under the fold, which is the scrolling this removes. */
.vb-seg--inline {
flex: 1 1 auto;
order: 2;
justify-content: flex-end;
gap: 5px;
padding: 0;
border-bottom: 0;
}
.vb-seg--inline .vb-seg__label { font-size: 9.5px; }
.vb-modal__top .vb-x { order: 3; }
@media (max-width: 400px) {
.vb-seg--inline { flex: 1 1 100%; order: 3; justify-content: flex-start; padding-top: 3px; }
.vb-modal__top .vb-x { order: 2; }
}
.vb-chiprow {
flex: none;
display: flex; gap: 6px;
padding: 9px 12px;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid var(--vb-edge);
scrollbar-width: none;
}
.vb-chiprow::-webkit-scrollbar { display: none; }
.vb-chip {
flex: none;
height: 28px; padding: 0 11px;
border: 1px solid var(--vb-edge);
border-radius: 999px;
background: transparent;
color: var(--vb-fg-dim);
font-family: var(--vb-ui);
font-size: 11.5px; font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.vb-chip.is-on { border-color: var(--vb-sky); background: var(--vb-frost); color: var(--vb-slate); }
.vb-modal__body { flex: 1; overflow-y: auto; padding: 11px 12px; -webkit-overflow-scrolling: touch; }
.vb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 5px; }
.vb-swatch {
height: 28px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 6px;
cursor: pointer;
padding: 0;
}
.vb-swatch:hover { outline: 2px solid rgba(56, 189, 248, .8); outline-offset: 1px; }
.vb-modal__group {
margin: 12px 0 7px;
font-family: var(--vb-ui);
font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
color: var(--vb-fg-faint);
}
.vb-modal__group:first-child { margin-top: 0; }
.vb-symgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; align-content: start; }
.vb-sym {
min-height: 38px; padding: 6px 8px;
border: 1px solid var(--vb-edge);
border-radius: 9px;
background: var(--vb-ink);
color: var(--vb-fg);
font-family: var(--vb-glyph);
font-size: 14px; line-height: 1.2;
cursor: pointer;
overflow-wrap: anywhere;
}
.vb-sym--wide { grid-column: span 2; white-space: nowrap; overflow: hidden; }
.vb-sym:hover { border-color: var(--vb-sky); }
.vb-sym.is-on { border-color: rgba(255, 211, 25, .55); color: var(--vb-gold); }
.vb-modal__foot {
flex: none;
display: flex; align-items: flex-end; gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--vb-edge);
background: var(--vb-panel-2);
}
.vb-hexfield { flex: 1; min-width: 0; display: block; }
.vb-hexfield span {
display: block;
margin: 0 2px 5px;
font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
color: var(--vb-fg-faint);
}
.vb-hexfield input {
width: 100%; height: 34px; padding: 0 10px;
border: 1px solid var(--vb-edge);
border-radius: 8px;
background: var(--vb-ink);
color: var(--vb-fg);
font-family: var(--vb-mono);
font-size: 12.5px;
outline: none;
}
.vb-hexfield input:focus { border-color: var(--vb-sky); }
.vb-modal__foot .vb-act { flex: none; width: auto; height: 34px; }
/* ---------- Symbol Bank: light sheet ----------
The shades modal stays dark (it previews in-game colour on a game-like ground). The
symbol bank is a browsing surface, not a preview, so it takes the light card palette
the rest of the page's white sections use. Scoped to .vb-modal--light so none of the
dark modal rules above need touching. */
.vb-modal--light .vb-modal__sheet {
border-color: #e2e8f0;
background: #ffffff;
color: #0f172a;
box-shadow: 0 -8px 40px rgba(15, 23, 42, .18);
}
@media (min-width: 620px) {
.vb-modal--light .vb-modal__sheet { box-shadow: 0 18px 50px rgba(15, 23, 42, .22); }
}
.vb-modal--light .vb-modal__top {
border-bottom-color: #e2e8f0;
background: #ffffff;
align-items: flex-start;
}
.vb-modal__heading {
display: block;
font-size: 15px; font-weight: 800; letter-spacing: -.2px;
color: #0f172a;
}
.vb-modal__heading em {
display: block;
margin-top: 2px;
font-style: normal;
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
color: #ff6b00;
}
.vb-modal--light .vb-x { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
.vb-modal--light .vb-x:hover { border-color: #cbd5e1; color: #0f172a; }
.vb-modal--light .vb-seg,
.vb-modal--light .vb-chiprow { border-bottom-color: #e2e8f0; background: #ffffff; }
.vb-modal--light .vb-seg__label { color: #94a3b8; }
.vb-modal--light .vb-segbtn { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
.vb-modal--light .vb-segbtn:hover { border-color: #cbd5e1; color: #0f172a; }
.vb-modal--light .vb-segbtn.is-on { border-color: #38bdf8; background: #f0f9ff; color: #0f172a; }
.vb-modal--light .vb-segbtn--clear { border-color: rgba(255, 107, 0, .4); color: #b43b00; background: #fff7ed; }
.vb-modal--light .vb-segbtn--clear[hidden] { display: none; }
.vb-modal--light .vb-chip { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
.vb-modal--light .vb-chip:hover { border-color: #cbd5e1; color: #0f172a; }
.vb-modal--light .vb-chip.is-on { border-color: transparent; background: #0f172a; color: #ffffff; }
.vb-chip__n { font-style: normal; font-weight: 700; font-size: 10px; font-variant-numeric: tabular-nums; opacity: .6; }
.vb-modal--light .vb-modal__body { background: #f8fafc; }
.vb-modal--light .vb-sym {
border-color: #e2e8f0;
background: #f8fafc;
color: #0f172a;
}
.vb-modal--light .vb-sym:hover { border-color: #38bdf8; background: #f0f9ff; }
.vb-modal--light .vb-sym.is-on {
border-color: #ff6b00;
background: #f0f9ff;
color: #0f172a;
box-shadow: 0 0 0 3px rgba(255, 107, 0, .14);
}
.vb-modal--light .vb-modal__foot { border-top-color: #e2e8f0; background: #ffffff; }
.vb-modal__foot--stack { flex-direction: column; align-items: stretch; gap: 8px; }
.vb-symcount {
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
color: #94a3b8;
text-align: center;
}
.vb-modal--light .vb-more { max-width: none; margin: 0; }
/* Lives inside the sheet: the page-level toast renders behind the backdrop. */
.vb-symtoast {
position: absolute;
left: 50%; bottom: 74px;
transform: translateX(-50%) translateY(6px);
z-index: 4;
max-width: 86%;
padding: 9px 16px;
border-radius: 999px;
background: #0f172a;
color: #ffffff;
font-size: 12.5px; font-weight: 700;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.vb-symtoast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .vb-symtoast { transition: none; } }
/* ---------- toast ---------- *
The tool carries its own: window.App only exists when the SPA router mounted this page,
and a copy button that gives no feedback reads as a broken copy button to exactly the
visitors arriving from search. */
.vb-toast {
position: fixed; left: 50%; bottom: 24px;
transform: translateX(-50%) translateY(8px);
z-index: 140;
max-width: min(92vw, 340px);
padding: 10px 15px;
border-radius: 10px;
background: #10141d;
border: 1px solid var(--vb-sky, rgba(56, 189, 248, .35));
color: #fff;
font-family: 'Times New Roman', Times, serif;
font-size: 12.5px; font-weight: 700; text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.vb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .vb-toast { transition: none; } }
/* ---------- article ----------
content.html carries no