/* ============================================
   Name Generator (/name-generator/) styles
   Split out of global.css; loaded after it by includes/header.php
   on this page only. Rules keep their original relative order.
   ============================================ */

/* ============================================
   NAME GENERATOR STYLES
   ============================================ */

/* Mode Selection Cards - extends .tool-card */
.name-generator .mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: var(--spacing-lg);
}

/* Filter Sections */
.name-generator .filter-section {
    margin-bottom: var(--spacing-lg);
}

.name-generator .filter-label {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

/* Pill Groups */
.name-generator .pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.name-generator .pill {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.name-generator .pill:hover,
.name-generator .pill:focus {
    background-color: var(--color-primary);
    color: #000;
}

.name-generator .pill.active {
    background-color: var(--color-primary);
    color: #000;
}

/* Pane Actions */
.name-generator .pane-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.name-generator .generate-hint .hint-arrow {
    width: 18px;
    height: 18px;
    stroke: var(--color-text-muted);
    animation: hintArrowBounce 1.5s ease-in-out infinite;
}

@keyframes hintArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* More Options */
.name-generator .more-options {
    margin-top: var(--spacing-lg);
}

.name-generator .more-options summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: var(--spacing-sm) 0;
    user-select: none;
}

.name-generator .more-options summary:hover {
    color: var(--text-primary);
}

.name-generator .more-options-content {
    padding: var(--spacing-md) 0;
}

.name-generator .more-options-content label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.name-generator .more-options-content input {
    width: 100%;
    max-width: 300px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.name-generator .more-options-content input:focus {
    border-color: var(--color-primary);
}

.name-generator .more-options-content .help {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Names list (2026-10-26): workshop direction B1's list, two columns of big names with
   hairlines between rows, one column on phones. Generated names and favorites share it. */
.name-generator .names-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

.name-generator .names-list > .names-loading,
.name-generator .names-list > .names-empty {
    grid-column: 1 / -1;
}

@media (max-width: 759px) {
    .name-generator .names-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.name-generator .names-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
    font-style: italic;
}

.name-generator .pagination {
    text-align: center;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.name-generator .page-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-weight: bold;
}

.name-generator .page-numbers {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.name-generator .page-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    min-width: 32px;
    transition: all 0.15s ease;
}

.name-generator .page-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.name-generator .page-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;
}

.name-generator .page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.name-generator .page-ellipsis {
    color: var(--text-muted);
    padding: 0 var(--spacing-xs);
}

.name-generator #favorites-count {
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: normal;
}

/* Name row: the name, a tight line under it ("Female Night Elf Druid (48213)"), and the
   copy, check and favorite buttons on the right */
.name-generator .name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 60px;
    padding: 8px 6px 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

.name-generator .name-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.name-generator .name-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* Name text */
.name-generator .name-text {
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.25;
    color: #fff;
    overflow-wrap: anywhere;
}

/* A WoW Forever last name: the same size, a step lighter, so first and last read apart */
.name-generator .name-last {
    font-weight: 500;
    color: var(--color-text-light);
}

.name-generator .name-row.favorited .name-text,
.name-generator .name-row.favorited .name-last {
    color: var(--color-gold);
}

/* The line under the name: who it's for, and the seed in parentheses */
.name-generator .name-meta {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-muted);
}

.name-generator .name-seed {
    color: var(--color-text-dark);
    font-variant-numeric: tabular-nums;
}

.name-generator a.name-seed-link {
    color: var(--color-text-dark);
    text-decoration: underline;
    text-decoration-color: rgba(122, 138, 160, 0.5);
    text-underline-offset: 2px;
}

.name-generator a.name-seed-link:hover {
    color: var(--color-link, var(--color-primary));
}

/* Confidence badge */
.name-generator .confidence-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.name-generator .confidence-strong {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.name-generator .confidence-good {
    background-color: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.name-generator .confidence-fair {
    background-color: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

.name-generator .confidence-weak {
    background-color: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

/* Name actions */
.name-generator .name-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.name-generator .name-action:hover,
.name-generator .name-action:focus {
    background-color: var(--bg-hover);
    color: var(--color-primary);
}

.name-generator .name-action:hover svg,
.name-generator .name-action:focus svg {
    stroke: var(--color-primary);
}

.name-generator .name-action svg {
    width: 18px;
    height: 18px;
}

/* Action states */
.name-generator .name-action.action-favorite.active {
    color: var(--color-gold);
    background-color: rgba(251, 191, 36, 0.15);
}

.name-generator .name-action.action-favorite.active:hover,
.name-generator .name-action.action-favorite.active:focus {
    background-color: rgba(120, 90, 20, 0.4);
}

.name-generator .name-action.action-favorite.active:hover svg,
.name-generator .name-action.action-favorite.active:focus svg {
    stroke: #050709;
}

.name-generator .name-action.action-favorite.active svg {
    fill: var(--color-gold);
}

/* Copy success animation */
.name-generator .name-action.copied {
    color: #22c55e !important;
}

/* Loading state */
.name-generator .names-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-sm);
    color: var(--text-muted);
}

.name-generator .names-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.name-generator .character-creator {
    position: relative;
    padding: var(--spacing-lg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.name-generator .creator-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    align-items: start;
    position: relative;
    z-index: 1;
}

.name-generator .icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Default borders by type */
.name-generator .class-btn,
.name-generator .body-type-btn {
    border-color: var(--color-creator-grey);
}

.name-generator .race-panel.alliance .race-btn {
    border-color: var(--color-alliance-blue);
}

.name-generator .race-panel.horde .race-btn {
    border-color: var(--color-horde-red);
}

/* Hover goes to yellow (higher specificity for race buttons) */
.name-generator .icon-btn:hover,
.name-generator .race-panel.alliance .race-btn:hover,
.name-generator .race-panel.horde .race-btn:hover {
    border-color: var(--color-creator-yellow);
}

/* Active state - bright yellow with glow (higher specificity for race buttons) */
.name-generator .icon-btn.active,
.name-generator .race-panel.alliance .race-btn.active,
.name-generator .race-panel.horde .race-btn.active {
    border-color: var(--color-creator-yellow);
    box-shadow: 0 0 12px rgba(252, 211, 77, 0.4);
}

/* Disabled state */
.name-generator .icon-btn.disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.name-generator .icon-btn.disabled:hover,
.name-generator .race-panel .race-btn.disabled:hover {
    border-color: var(--color-creator-grey);
}

/* Body type icons */
.name-generator .body-type-btn img {
    padding: 6px;
    object-fit: contain;
}

/* Faction Title */
.name-generator .faction-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-creator-yellow);
}

/* Color faction logos using CSS filters */
.name-generator .race-panel.alliance .faction-logo {
    filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(1352%) hue-rotate(196deg) brightness(103%) contrast(92%);
}

.name-generator .race-panel.horde .faction-logo {
    filter: brightness(0) saturate(100%) invert(19%) sepia(86%) saturate(5765%) hue-rotate(355deg) brightness(93%) contrast(94%);
}

/* Flip shared-appearance Horde races (Dracthyr, Pandaren, Earthen, Haranir) to face left */
.name-generator .race-panel.horde .race-btn[data-race-id="70"] img,
.name-generator .race-panel.horde .race-btn[data-race-id="26"] img,
.name-generator .race-panel.horde .race-btn[data-race-id="84"] img,
.name-generator .race-panel.horde .race-btn[data-race-id="91"] img {
    transform: scaleX(-1);
}

.name-generator .race-panel.horde {
    align-items: flex-end;
}

.name-generator .race-panel.horde .faction-title {
    justify-content: flex-end;
}

/* Race Columns (Core + Allied side by side) */
.name-generator .race-columns {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.name-generator .race-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Render Area (Center column - just body type toggle now) */
.name-generator .render-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

/* Body Type Toggle */
.name-generator .body-type-toggle {
    display: flex;
    gap: var(--spacing-md);
}

.name-generator #intro {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
}

.name-generator .render-placeholder svg {
    width: 56px;
    height: 56px;
    stroke-width: 3.5;
    filter:
        drop-shadow(1px 0 0 black)
        drop-shadow(-1px 0 0 black)
        drop-shadow(0 1px 0 black)
        drop-shadow(0 -1px 0 black)
        drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

.name-generator .render-placeholder .arrow-top,
.name-generator .render-placeholder .arrow-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name-generator .render-placeholder .arrow-top svg {
    animation: bounceDown 2s ease-in-out infinite;
}

.name-generator .render-placeholder .arrow-bottom svg {
    animation: bounceUp 2s ease-in-out infinite;
}

.name-generator .render-placeholder .arrow-middle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.name-generator .render-placeholder .arrow-left,
.name-generator .render-placeholder .arrow-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name-generator .render-placeholder .arrow-left svg {
    animation: bounceRight 2s ease-in-out infinite;
}

.name-generator .render-placeholder .arrow-right svg {
    animation: bounceLeft 2s ease-in-out infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes bounceUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes bounceLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* Character render - centered in the full container */
.name-generator .character-render {
    max-height: 99%;
    object-fit: contain;
    pointer-events: auto;
}

/* Class Bar */
.name-generator .class-bar {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Name Input Section */
.name-generator .name-input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.name-generator .name-input-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.name-generator .name-input:focus {
    border-color: var(--color-creator-yellow);
}

.name-generator .name-input::placeholder {
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* Creator Actions */
.name-generator .creator-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.name-generator .creator-actions .btn:disabled {
    opacity: 1;
    cursor: not-allowed;
}

/* Seed Controls */
.name-generator .seed-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.name-generator .seed-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.name-generator .seed-controls label {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
    margin-top: 4px;
}

.name-generator .seed-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

.name-generator .seed-input:focus {
    border-color: var(--color-accent);
}

.name-generator .seed-btn:hover:not(:disabled) {
    background: var(--color-bg-darker);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.name-generator .seed-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Featured profile badge (off for now: index.php $showFeaturedProfile), under the tools */
.name-generator .ng-generate .character-badge {
    justify-content: center;
}

.name-generator .featured-label,
.name-generator .badge-name,
.name-generator .badge-source {
    line-height: 1;
}

.name-generator .featured-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.name-generator .character-badge {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-lg);
    color: var(--color-text);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
}

/* The featured profile is off for now (name-generator/index.php $showFeaturedProfile) */
.name-generator .character-badge[hidden] { display: none; }

.name-generator .character-badge .badge-name {
    font-weight: 700;
}

.name-generator .character-badge:hover .badge-name {
    text-decoration: underline;
}

.name-generator .badge-group,
.name-generator .badge-source {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.name-generator .source-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.name-generator .source-value {
    color: var(--color-text);
    font-weight: 700;
}

.name-generator .ng-generate.wt-user .source-value {
    color: var(--color-creator-yellow);
}

/* The names toast (2026-10-27, og-workshop/ng-toast.html, the owner's pick: C with F's rule).
   A pill in the class's colors with the class icon from the creator ("20 Druid names"), the dice
   in WoW gold for Random. name-generator.js shows it only while the whole list is out of sight.
   Measured by ink at 1x and 2x in Chromium and WebKit: at 1rem the label's 12px of ink centers
   in the 46px pill (at 0.95rem its 11px couldn't, 35px left over), and the 34px icon and 18px
   chevron center on whole pixels too. */
.name-generator .ng-names-toast {
    --ng-toast-color: var(--color-wow-gold);
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 11px;
    height: 46px;
    padding: 0 16px 0 6px;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--ng-toast-color) 50%, transparent);
    background: #0c1421;
    color: var(--color-text-light);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.85), 0 3px 8px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity 0.22s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--transition-fast);
}

.name-generator .ng-names-toast[hidden] {
    display: none;
}

.name-generator .ng-names-toast.is-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.name-generator .ng-names-toast.is-out {
    opacity: 0;
    transform: translate(-50%, 8px);
    transition-duration: 0.18s;
}

.name-generator .ng-names-toast:hover {
    border-color: var(--ng-toast-color);
}

.name-generator .ng-names-toast:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.name-generator .ng-names-toast__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--ng-toast-color);
    overflow: hidden;
    background: #05080d;
    color: var(--ng-toast-color);
}

.name-generator .ng-names-toast__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name-generator .ng-names-toast__icon img[hidden],
.name-generator .ng-names-toast__icon svg[hidden] {
    display: none;
}

.name-generator .ng-names-toast__dice {
    width: 18px;
    height: 18px;
}

/* Trimmed to its capitals, so flex centering centers the letters */
.name-generator .ng-names-toast__label {
    display: block;
    line-height: 1;
    text-box: trim-both cap alphabetic;
}

.name-generator .ng-names-toast__count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

/* The class color mixed with a third white: even Shaman blue and Death Knight red clear 4.5:1 on the navy */
.name-generator .ng-names-toast__what {
    color: color-mix(in srgb, var(--ng-toast-color) 66%, #fff);
}

.name-generator .ng-names-toast__chev {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    color: color-mix(in srgb, var(--ng-toast-color) 66%, #fff);
}

.name-generator .ng-names-toast__chev svg {
    width: 18px;
    height: 18px;
}

.name-generator .ng-names-toast.is-in .ng-names-toast__chev svg {
    animation: ngToastNudge 0.9s cubic-bezier(0.45, 0, 0.55, 1) 0.4s 2;
}

/* The list is above (you scrolled past it): the chevron points up */
.name-generator .ng-names-toast.is-up .ng-names-toast__chev {
    transform: rotate(180deg);
}

@keyframes ngToastNudge {
    50% { transform: translateY(3px); }
}

@media (max-width: 600px) {
    .name-generator .ng-names-toast {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Reduced motion: a fade in place, no rise and no nudge */
@media (prefers-reduced-motion: reduce) {
    .name-generator .ng-names-toast,
    .name-generator .ng-names-toast.is-in,
    .name-generator .ng-names-toast.is-out {
        transform: translate(-50%, 0);
        transition: opacity 0.2s linear;
    }

    .name-generator .ng-names-toast .ng-names-toast__chev svg {
        animation: none;
    }
}

.name-generator #generate-random-btn {
    margin-left: auto;
}

@media (max-width: 959px) {
    .name-generator .render-container {
        position: relative;
        border-radius: var(--radius-lg);
        height: 550px;
        margin-top: var(--spacing-xl);
    }

    .name-generator .render-placeholder .arrow-middle,
    .name-generator .render-placeholder .arrow-top {
        display: none;
    }

    .name-generator .render-placeholder .arrow-bottom {
        display: flex;
        transform: rotate(180deg);
    }

    .name-generator #intro {
        margin-top: auto;
        margin-bottom: auto;
    }

    .name-generator #generate-random-btn {
        margin-left: 0;
    }

    .name-generator .mode-cards {
        grid-template-columns: 1fr;
    }

    .name-generator .creator-actions {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .name-generator .creator-actions .btn {
        width: 100%;
        font-size: 0.95rem;
        padding: 9px 18px;
    }

    .name-generator .generator-buttons .btn {
        width: 100%;
    }

    .name-generator .seed-controls {
        justify-content: center;
    }

    .name-generator .character-badge {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .name-generator .badge-group,
    .name-generator .badge-source {
        flex-direction: column;
        align-items: center;
    }

    .name-generator .creator-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }

    .name-generator .render-area {
        order: -1;
    }

    .name-generator .race-list {
        display: contents;
    }

    .name-generator .race-panel {
        margin: var(--spacing-md);
        border-top: 1px solid var(--color-border);
    }

    .name-generator .faction-title {
        flex-direction: column;
        justify-content: center;
        padding-top: var(--spacing-lg);
    }

    .name-generator .race-panel.horde {
        align-items: center;
    }

    .name-generator .race-panel.horde .faction-title {
        flex-direction: column-reverse;
        justify-content: center;
    }

    .name-generator .class-bar {
        margin: 0;
        padding: 30px 0;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }

    .name-generator .race-columns {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .name-generator .render-container {
        height: 300px;
    }
}

@media (max-width: 400px) {
    .name-generator .seed-controls {
        flex-direction: column;
        align-items: center;
    }

    .name-generator .seed-controls label {
        margin-top: 0;
        margin-bottom: var(--spacing-xs);
    }
}

/* Signed-out Favorites preview: what the panel is for, and a way in */
/* Signed-out Favorites: heading and copy on the left, the sign-in group on the
   right, centered against both (so it sits level with the whole block, not
   just the paragraph). The body's children join the panel's grid. */
.name-generator .favorites-signin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 40px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.name-generator .favorites-signin .panel-header {
    grid-column: 1;
    padding-bottom: 4px;
}

.name-generator .favorites-signin__body {
    display: contents;
}

.name-generator .favorites-signin__body > p {
    grid-column: 1;
    max-width: 62ch;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.name-generator .favorites-signin__action {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name-generator .favorites-signin__action .signin-trust {
    margin-top: 10px;
}

@media (max-width: 760px) {
    /* Stacked: heading, copy, then the sign-in group centered */
    .name-generator .favorites-signin {
        grid-template-columns: minmax(0, 1fr);
    }
    .name-generator .favorites-signin__action {
        grid-column: 1;
        grid-row: auto;
        margin-top: 18px;
    }
}

/* Randomize: the dice roll when clicked, the same roll as the dashboard's
   line-up shuffle (layout.js / dashboard.css) */
#random-tailored-btn.is-rolling svg {
    animation: ng-dice-roll 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ng-dice-roll {
    from { transform: rotate(-180deg) scale(0.7); }
    to { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #random-tailored-btn.is-rolling svg {
        animation: none;
    }
}

/* ============================================
   WHICH GAME, B1'S FIELDS, AND WOW FOREVER (2026-10-26)
   ============================================ */

/* Every game's creator is Retail's height (2026-10-27, the owner's call). WoW Forever and
   the Classic versions have 4 to 7 races a column against Retail's 8 (--ng-race-rows, from
   index.php), so the columns keep room for Retail's tallest and the art behind them doesn't
   jump when the game changes. --ng-icon follows the icon sizes in global.css. Desktop only:
   below 960px the races wrap in rows under the art, which keeps its own fixed height. */
.name-generator { --ng-icon: 75px; }
@media (max-width: 1300px) { .name-generator { --ng-icon: 55px; } }
@media (max-width: 1100px) { .name-generator { --ng-icon: 48px; } }
@media (min-width: 960px) {
    .name-generator .race-columns {
        min-height: calc(var(--ng-race-rows, 8) * var(--ng-icon) + (var(--ng-race-rows, 8) - 1) * var(--spacing-md));
    }
}

/* A race or class the picked game doesn't have (name-generator.js applyGame) */
.name-generator .icon-btn[hidden],
.name-generator .race-list[hidden] {
    display: none;
}

/* Skyborne have no portrait yet: a drawn "?" in the faction's ring, on the creator's dark
   glass. Swap: add {id}_0.png and {id}_1.png to the assets host, drop 'noArt' (name-games.php). */
.name-generator .race-btn__soon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(14, 143, 184, 0.35), transparent 70%),
        rgba(8, 12, 20, 0.85);
    color: var(--color-text-light);
}

.name-generator .race-btn__soon svg {
    width: 52%;
    height: 52%;
}

.name-generator .race-btn--soon:hover .race-btn__soon,
.name-generator .race-btn--soon.active .race-btn__soon {
    color: var(--color-creator-yellow);
}

/* Classic creation scenes (TBC, Classic Era, WoW Forever: the art's bgRaces). The render's feet
   sit at 81.35% of the container's height at every width, and each scene is framed so the spot
   the character stood on in the original screen is at 81.35% of the image (y 1513 of 1860).
   Positioning the cover-cropped image at the same 81.35% keeps those two lines together however
   the container's shape crops it. name-generator.js sets the class. */
.name-generator .render-container.is-scene {
    background-position: 50% 81.35%;
}

/* Where a Skyborne character would stand: a small plate in WoW Forever's teal */
.name-generator .render-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 280px;
    padding: 22px 26px 20px;
    border: 1px solid rgba(14, 143, 184, 0.55);
    border-radius: var(--radius-lg);
    background: rgba(5, 9, 16, 0.82);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    text-align: center;
    pointer-events: auto;
}

.name-generator .render-soon[hidden] {
    display: none;
}

/* Outside WoW Forever (a Classic set missing a combo): no Forever mark, a neutral edge */
.name-generator .render-soon--plain {
    border-color: rgba(255, 255, 255, 0.16);
}

.name-generator .render-soon--plain .render-soon__icon {
    display: none;
}

.name-generator .render-soon__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(14, 143, 184, 0.16);
    color: var(--game-forever);
}

.name-generator .render-soon__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-wrap: balance;
}

.name-generator .render-soon__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-light);
    text-wrap: balance;
}

/* L2B (2026-10-27, the owner's pick from og-workshop/name-generator.html): who the character is
   (race, body type, class, the dice) and, in WoW Forever, their name (first, last) share one row,
   split by a hairline. Under it one roll bar: Generate more names, Back, the seed chip, Share and
   Start over. Fields at the site's form scale (docs/design-rules.md). */
.name-generator .ng-zones {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.name-generator .ng-zones.has-names {
    grid-template-columns: minmax(0, 3.3fr) minmax(0, 2.2fr);
}

.name-generator .ng-zones[hidden],
.name-generator .ng-zone[hidden],
.name-generator .ng-rollbar [hidden] {
    display: none !important;
}

.name-generator .ng-zone {
    display: grid;
    gap: 12px;
    align-items: end;
}

.name-generator .ng-zone--who {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
}

.name-generator .has-names .ng-zone--who {
    padding-right: 22px;
    border-right: 1px solid var(--color-border-light);
}

.name-generator .ng-zone--name {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-left: 22px;
}

.name-generator .ng-field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.name-generator .ng-field select {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    padding: 0 38px 0 14px;
    font-size: 0.92rem;
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px 15px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.name-generator .ng-field select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The dice: a random race, body type and class (it changes only the character) */
.name-generator .ng-dice {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border-input);
    border-radius: 50%;
    background: var(--color-bg-input);
    color: var(--color-text-light);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.name-generator .ng-dice:hover,
.name-generator .ng-dice:focus-visible {
    border-color: var(--color-primary);
    color: #fff;
}

.name-generator .ng-dice:disabled {
    opacity: 0.55;
    cursor: wait;
}

.name-generator .ng-dice.is-rolling svg {
    animation: ng-dice-roll 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The name fields: a count and a lock inside each. The kept one is WoW Forever teal. */
.name-generator .ng-nf__kept {
    color: var(--game-forever-ink);
    letter-spacing: 0.1em;
}

.name-generator .ng-ig {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 4px 0 0;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.name-generator .ng-ig:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(39, 170, 226, 0.15);
}

.name-generator .ng-ig input {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0 8px 0 14px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
}

.name-generator .ng-ig input:focus {
    box-shadow: none;
    outline: none;
}

.name-generator .ng-ig input::placeholder {
    color: var(--color-text-dark);
    font-weight: 400;
}

.name-generator .ng-ig__n {
    flex: none;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-dark);
    font-variant-numeric: tabular-nums;
}

.name-generator .ng-ig__lock {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.name-generator .ng-ig__lock svg {
    width: 18px;
    height: 18px;
}

.name-generator .ng-ig__lock:hover,
.name-generator .ng-ig__lock:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.name-generator .ng-ig.is-kept {
    border-color: rgba(14, 143, 184, 0.55);
    box-shadow: inset 0 0 0 1px rgba(14, 143, 184, 0.55);
}

.name-generator .ng-ig.is-kept input {
    color: var(--game-forever-ink);
}

.name-generator .ng-ig.is-kept .ng-ig__lock {
    background: rgba(14, 143, 184, 0.14);
    color: var(--game-forever-ink);
}

.name-generator .ng-ig.is-idle input {
    color: var(--color-text-muted);
}

.name-generator .ng-ig.is-bad {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4);
}

.name-generator .ng-nf__err {
    grid-column: 1 / -1;
    margin: -4px 0 0;
    font-size: 0.8rem;
    color: #fca5a5;
}

/* The roll bar: how to pick names, one forward action, then the seed and the tools */
.name-generator .ng-rollbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
}

.name-generator .ng-rollbar.is-random {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.name-generator .ng-rollbar .btn {
    height: 40px;
    padding: 0 18px;
}

.name-generator .ng-gen {
    flex: none;
    min-width: 200px;
}

/* Tailored / Random (2026-10-27, og-workshop/ng-mode.html direction A): Mount Palette's two-part
   switch (.mp-seg) at the roll bar's 40px, its pills rounded like the buttons beside it. The
   picked half is lit, its icon in the site blue. */
.name-generator .ng-mode {
    display: inline-flex;
    flex: none;
    gap: 2px;
    height: 40px;
    padding: 3px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.name-generator .ng-mode button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px 0 12px;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.name-generator .ng-mode button svg {
    flex: none;
    transition: color var(--transition-fast);
}

.name-generator .ng-mode button:hover {
    color: var(--color-text-light);
}

.name-generator .ng-mode button[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: default;
}

.name-generator .ng-mode button[aria-pressed="true"] svg {
    color: var(--color-primary);
}

.name-generator .ng-mode button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Trimmed to cap height, flex centers the capitals themselves (Mount Palette's .mp-seg__label) */
.name-generator .ng-mode .btn-label {
    line-height: 1;
    text-box: trim-both cap alphabetic;
}

@media (prefers-reduced-motion: reduce) {
    .name-generator .ng-mode button,
    .name-generator .ng-mode button svg {
        transition: none;
    }
}

.name-generator .ng-rollbar__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Share and Start over sit at the far end */
.name-generator .ng-rollbar__tools #share-btn {
    margin-left: auto;
}

.name-generator .ng-seed {
    display: inline-flex;
    min-width: 0;
}

.name-generator .ng-seedchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.name-generator .ng-seedchip b {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.name-generator .ng-seedchip svg {
    flex: none;
    color: var(--color-text-dark);
    transition: color 0.15s ease;
}

.name-generator .ng-seedchip:hover,
.name-generator .ng-seedchip:focus-visible {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.name-generator .ng-seedchip:hover svg,
.name-generator .ng-seedchip:focus-visible svg {
    color: var(--color-primary);
}

.name-generator .ng-seededit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 5px 0 14px;
    border-radius: var(--radius-full);
    background: var(--color-bg-input);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.name-generator .ng-seededit__lbl {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.name-generator .ng-seededit input {
    width: 8ch;
    min-width: 0;
    height: 30px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.name-generator .ng-seededit input:focus {
    box-shadow: none;
    outline: none;
}

.name-generator .ng-seededit button {
    height: 30px;
    padding: 1px 13px 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #04121b;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.name-generator .ng-seededit button:hover {
    background: var(--color-primary-hover);
}

/* The list header: the seed once, beside the title (every generated name shares it) */
.name-generator .ng-results-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-width: 0;
}

.name-generator .ng-results-title h2 {
    margin: 0;
}

.name-generator .ng-results-seed {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-dark);
    font-variant-numeric: tabular-nums;
}

.name-generator .ng-results-seed b {
    color: var(--color-text-muted);
    font-weight: 600;
}

.name-generator .ng-results-seed[hidden] {
    display: none;
}

/* WoW Forever names: each half is a button that keeps it. The kept half is teal and lighter,
   the half that's rolling bold white. */
.name-generator .ng-pick {
    margin: 0 -3px;
    padding: 1px 3px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.name-generator .ng-pick[data-fill="last"] {
    font-weight: 500;
    color: var(--color-text-light);
}

.name-generator .ng-pick:hover,
.name-generator .ng-pick:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    outline: none;
}

.name-generator .name-text .is-kept {
    color: #29a6cf;
    font-weight: 500;
}

.name-generator .name-text .is-free {
    color: #fff;
    font-weight: 650;
}

/* Wide tablets and narrow desktops: the name fields drop under the character, across a hairline */
@media (max-width: 1199px) {
    .name-generator .ng-zones.has-names {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .name-generator .has-names .ng-zone--who {
        padding-right: 0;
        border-right: 0;
    }

    .name-generator .ng-zone--name {
        padding-left: 0;
        padding-top: 14px;
        border-top: 1px solid var(--color-border-light);
    }
}

/* The roll bar stacks before it can wrap (the owner's call, 2026-10-27). With the Tailored /
   Random switch one row needs about 1,000px of panel, so below 1200px it takes two rows: the
   switch and Generate (which takes the room that's left), then the seed, Back, Share and Start
   over, the seed chip taking the room that's left. Below 600px the switch gets its own row too. */
@media (max-width: 1199px) {
    .name-generator .ng-rollbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .name-generator .ng-gen {
        width: 100%;
        min-width: 0;
    }

    .name-generator .ng-rollbar__tools {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 10px;
    }

    .name-generator .ng-rollbar.is-random .ng-rollbar__tools {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .name-generator .ng-rollbar__tools #share-btn {
        margin-left: 0;
    }

    .name-generator .ng-seed,
    .name-generator .ng-seedchip,
    .name-generator .ng-seededit {
        width: 100%;
        justify-content: center;
    }

    .name-generator .ng-seededit input {
        flex: 1;
        width: auto;
        max-width: 9ch;
    }
}

@media (max-width: 599px) {
    .name-generator .ng-rollbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .name-generator .ng-mode {
        width: 100%;
    }

    .name-generator .ng-mode button {
        flex: 1 1 0;
    }
}

@media (max-width: 700px) {
    .name-generator .ng-zone--who {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    }

    .name-generator .ng-zone--who .ng-field--race {
        grid-column: 1 / 3;
    }

    .name-generator .ng-zone--who .ng-dice {
        grid-column: 3;
        grid-row: 1;
    }

    .name-generator .ng-zone--who .ng-field--class {
        grid-column: 2 / 4;
    }
}

/* Phones: Back, Share and Start over keep their icons (and their names for screen readers) */
@media (max-width: 599px) {
    .name-generator .ng-rollbar .ng-tool {
        width: 40px;
        padding: 0;
    }

    .name-generator .ng-rollbar .ng-tool .btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .name-generator .ng-zone--name {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Narrow phones (479px and below): the seed chip needs about 140px, more than is left beside
   three buttons, so it takes its own row and Back, Share and Start over split the row under it */
@media (max-width: 479px) {
    .name-generator .ng-rollbar__tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .name-generator .ng-rollbar.is-random .ng-rollbar__tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .name-generator .ng-seed {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .name-generator .ng-rollbar .ng-tool {
        width: 100%;
    }
}

/* Narrow phones: "Body type 2" doesn't fit half a row, so body type and class stack */
@media (max-width: 479px) {
    .name-generator .ng-zone--who {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .name-generator .ng-zone--who .ng-field--race {
        grid-column: 1;
    }

    .name-generator .ng-zone--who .ng-dice {
        grid-column: 2;
    }

    .name-generator .ng-zone--who .ng-field--body,
    .name-generator .ng-zone--who .ng-field--class {
        grid-column: 1 / -1;
    }
}

/* Optical tuning, measured by ink at 1x and 2x, Chromium and WebKit, 1400 and 360px
   (docs/design-rules.md):
   - A name row's buttons centered on the row sat 1px above the name and its line (the
     line's descenders weigh the text block down), so they drop 1px.
   - Generate more names (40px): the icon sat 0.5px low, so it rises 0.5px. Its label is on the
     middle by ink box (0 to -0.25), so no lift, like the other tool buttons.
   - Share's tray carries its mass low (centroid +1.4px), so it rises 0.5px.
   - The padlock's body outweighs its shackle (centroid +0.6 to +1.1px), so the field locks rise 0.5px.
   - Back's label has no descenders, so its ink box reads 1.25 to 1.5px high while its centroid is
     0.7px high: left as is, like the site's other descender-free labels.
   - The seed chip's "Seed" is a step smaller than the number; both sit on the middle by their own
     boxes (Seed -0.75 to -1px by ink, the digits 0), left as is. */
.name-generator .name-actions {
    transform: translateY(1px);
}

.name-generator #generate-tailored-btn svg,
.name-generator #share-btn svg,
.name-generator .ng-ig__lock svg {
    transform: translateY(-0.5px);
}

/* Horizon (global.css, hue .hz--ng): the faces don't stand on a floor, so the
   line sits behind the bottom row, like a shelf of light */
.page-intro--name-generator {
    --hz-lift: 0.1;
    --hz-wk: 0.6;
}