.page-content-wrapper {
    --pc-primary: #3b82f6;
    --pc-primary-hover: #2563eb;
    --pc-primary-light: rgba(59, 130, 246, 0.12);
    --pc-secondary: rgba(255, 255, 255, 0.06);
    --pc-secondary-hover: rgba(255, 255, 255, 0.12);
    --pc-secondary-text: #b0b0c0;
    --pc-accent: #0ea5e9;
    --pc-success: #10b981;
    --pc-success-hover: #059669;
    --pc-success-light: rgba(16, 185, 129, 0.12);
    --pc-warning: #f59e0b;
    --pc-error: #ef4444;
    --pc-error-hover: #dc2626;
    --pc-error-light: rgba(239, 68, 68, 0.12);
    --pc-text-heading: #f5f5fa;
    --pc-text-body: #d4d4e0;
    --pc-text-muted: #9090a4;
    --pc-text-muted-2: #9090a4;
    --pc-bg-page: #0a0a0f;
    --pc-bg-surface: rgba(26, 26, 36, 0.55);
    --pc-bg-surface-2: rgba(35, 35, 48, 0.85);
    --pc-bg-surface-3: rgba(255, 255, 255, 0.08);
    --pc-border-default: rgba(255, 255, 255, 0.08);
    --pc-border-blue: rgba(59, 130, 246, 0.35);
    --pc-border-blue-dark: rgba(59, 130, 246, 0.5);
    --pc-shadow-card: 0 20px 50px -12px rgba(0, 0, 0, 0.6);
    --pc-shadow-panel: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    --pc-radius: 0.75rem;
    --pc-radius-sm: 0.5rem;
    --pc-radius-lg: 1rem;
    --pc-transition: 200ms ease;
    --pc-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pc-font-mono: 'SF Mono', 'Fira Code', monospace;
    font-family: var(--pc-font);
    color: var(--pc-text-body);
    line-height: 1.5;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.page-content-wrapper *,
.page-content-wrapper *::before,
.page-content-wrapper *::after {
    box-sizing: border-box;
}

/* ── Notification popup ── */
.page-content-wrapper .notification-popup {
    position: fixed;
    top: 25px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Page background ── */
.page-content-wrapper .page-bg {
    min-height: 100vh;
    background-color: var(--pc-bg-page);
    transition: background-color 0.3s ease;
}

/* ── Hero section ── */
.page-content-wrapper .hero-section {
    padding-block: 0.5rem;
    background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.06), transparent 60%);
}

/* ── Container ── */
.page-content-wrapper .page-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 640px) {
    .page-content-wrapper .page-container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
    .page-content-wrapper .page-container { padding-inline: 2rem; }
}

/* ── Inner max-width wrapper ── */
.page-content-wrapper .page-inner {
    max-width: 80rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .page-content-wrapper .page-inner { max-width: 48rem; }
}

/* ═══ Connection card ═══ */
.page-content-wrapper .card-container {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    max-height: 1000px;
    display: flex;
    flex-direction: column;
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 2px solid var(--pc-border-blue);
    background-color: var(--pc-bg-surface-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--pc-text-heading);
}

.page-content-wrapper .card-shrunk {
    max-height: 60px !important;
}

.page-content-wrapper .card-expanded {
    max-height: 1000px !important;
}

/* ── Disconnected content ── */
.page-content-wrapper .disconnected-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: opacity 0.4s ease-out;
    opacity: 1;
}

.page-content-wrapper .card-title {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--pc-text-heading);
}

.page-content-wrapper .card-subtitle {
    color: var(--pc-text-muted);
    font-size: 0.875rem;
}

/* ── Input wrapper ── */
.page-content-wrapper .input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Game pin input ── */
.page-content-wrapper .game-pin-input {
    display: flex;
    height: 2.25rem;
    width: 100%;
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border-default);
    background-color: rgba(255, 255, 255, 0.04);
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    padding-block: 0.75rem;
    color: var(--pc-text-heading);
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .game-pin-input::placeholder {
    color: var(--pc-text-muted);
}
.page-content-wrapper .game-pin-input:focus {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background-color: rgba(255, 255, 255, 0.06);
}

/* ── Input error ── */
.page-content-wrapper .input-error-message {
    color: #fca5a5;
    padding: 0.05rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.813rem;
    margin-top: 0.5rem;
    animation: slideDown 0.2s ease-out;
}

.page-content-wrapper .input-error-message-exit {
    animation: slideUp 0.3s ease-in forwards;
}

.page-content-wrapper .input-error-hidden {
    display: none;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 50px; }
}
@keyframes slideUp {
    from { opacity: 1; transform: translateY(0); max-height: 50px; }
    to   { opacity: 0; transform: translateY(-5px); max-height: 0; }
}

/* ── Button containers ── */
.page-content-wrapper .btn-container {
    padding-inline: 1.5rem;
    padding-bottom: 0.75rem;
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

.page-content-wrapper .disconnect-btn-container {
    display: none;
    order: -1;
    padding: 0.7rem 1.5rem;
    width: 100%;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-out;
    opacity: 0;
}

/* ── Connect button ── */
.page-content-wrapper .connect-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2rem;
    border-radius: var(--pc-radius-sm);
    gap: 0.375rem;
    padding-inline: 0.75rem;
    width: 100%;
    color: #ffffff;
    background-color: var(--pc-primary);
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .connect-btn:hover {
    background-color: var(--pc-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.page-content-wrapper .connect-btn:active {
    transform: translateY(0);
}

/* ── Disconnect button ── */
.page-content-wrapper .disconnect-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2rem;
    border-radius: var(--pc-radius-sm);
    gap: 0.375rem;
    padding-inline: 0.75rem;
    flex: 1;
    color: #ffffff;
    background-color: var(--pc-error);
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .disconnect-btn:hover {
    background-color: var(--pc-error-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.page-content-wrapper .disconnect-btn:active {
    transform: translateY(0);
}

/* ── Content visibility ── */
.page-content-wrapper .content-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}
.page-content-wrapper .content-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ═══ Game settings card ═══ */
.page-content-wrapper .game-settings-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: var(--pc-radius);
    padding-block: 1.5rem;
    box-shadow: var(--pc-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 2px solid var(--pc-border-blue);
    color: var(--pc-text-heading);
    background-color: var(--pc-bg-surface-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.page-content-wrapper .card-header {
    display: grid;
    grid-auto-rows: min-content;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.375rem;
    padding-inline: 1.5rem;
}

.page-content-wrapper .card-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* ── Badges ── */
.page-content-wrapper .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border-default);
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    color: var(--pc-text-body);
}

.page-content-wrapper .badge-disconnected {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.25);
    background-color: rgba(239, 68, 68, 0.1);
}

.page-content-wrapper .badge-connected {
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.25);
    background-color: rgba(16, 185, 129, 0.1);
}

/* ── Card content ── */
.page-content-wrapper .card-content {
    padding-inline: 1.5rem;
}

/* ── Settings grid ── */
.page-content-wrapper .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.5rem;
    column-gap: 1rem;
}

/* ── Setting item ── */
.page-content-wrapper .setting-item {
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .setting-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--pc-border-blue);
}
@media (min-width: 768px) {
    .page-content-wrapper .setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.page-content-wrapper .setting-label-wrapper {
    margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
    .page-content-wrapper .setting-label-wrapper { margin-bottom: 0; }
}

.page-content-wrapper .setting-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.page-content-wrapper .label-add-bots {
    color: #6ee7b7;
}

.page-content-wrapper .label-crash-game {
    color: #fca5a5;
}

.page-content-wrapper .setting-description {
    font-size: 0.75rem;
    color: var(--pc-text-muted);
}

/* ── Action buttons ── */
.page-content-wrapper .btn-add-bots {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2rem;
    border-radius: var(--pc-radius-sm);
    gap: 0.375rem;
    padding-inline: 0.75rem;
    width: 100%;
    border: none;
    color: #ffffff;
    background-color: var(--pc-success);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .btn-add-bots:hover {
    background-color: var(--pc-success-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.page-content-wrapper .btn-add-bots:active {
    transform: translateY(0);
}
@media (min-width: 768px) {
    .page-content-wrapper .btn-add-bots { width: auto; }
}

.page-content-wrapper .btn-crash-game {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2rem;
    border-radius: var(--pc-radius-sm);
    gap: 0.375rem;
    padding-inline: 0.75rem;
    width: 100%;
    border: none;
    color: #ffffff;
    background-color: #f87171;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .btn-crash-game:hover {
    background-color: var(--pc-error);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.page-content-wrapper .btn-crash-game:active {
    transform: translateY(0);
}
@media (min-width: 768px) {
    .page-content-wrapper .btn-crash-game { width: auto; }
}

/* ═══ Auto play panel ═══ */
.page-content-wrapper .auto-play-panel {
    padding: 0.75rem;
    box-shadow: var(--pc-shadow-panel);
    border: 2px solid var(--pc-border-blue);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--pc-radius-sm);
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-content-wrapper .auto-play-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--pc-text-heading);
}

.page-content-wrapper .auto-play-grid {
    display: grid;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .page-content-wrapper .auto-play-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Join game section ── */
.page-content-wrapper .join-game-section {
    grid-column: span 2;
}

.page-content-wrapper .join-game-label {
    font-size: 1rem;
    font-weight: 500;
}

.page-content-wrapper .join-game-desc {
    font-size: 0.75rem;
    color: var(--pc-text-muted-2);
}

.page-content-wrapper .join-game-input-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.125rem;
    gap: 0.5rem;
}

.page-content-wrapper .join-game-input-wrapper {
    display: flex;
    width: 100%;
}

.page-content-wrapper .join-game-input {
    flex: 1;
    height: 2.25rem;
    min-width: 0;
    padding-inline: 0.75rem;
    padding-block: 0.25rem;
    font-size: 0.875rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius-sm) 0 0 var(--pc-radius-sm);
    outline: none;
    color: var(--pc-text-heading);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .join-game-input::placeholder {
    color: var(--pc-text-muted);
}
.page-content-wrapper .join-game-input:focus {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background-color: rgba(255, 255, 255, 0.06);
}

.page-content-wrapper .custom-names-btn {
    height: 2.25rem;
    padding-inline: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    border: 1px solid var(--pc-border-default);
    border-left: 0;
    border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
    cursor: pointer;
    background-color: #10b981;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .custom-names-btn:hover {
    background-color: #2f3533;
    transform: translateY(-1px);
}

.page-content-wrapper .join-game-btn,
.page-content-wrapper .rename-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.25rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    width: 6rem;
    border: none;
    color: #ffffff;
    background-color: var(--pc-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .join-game-btn:hover,
.page-content-wrapper .rename-btn:hover {
    background-color: var(--pc-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.page-content-wrapper .join-game-btn:active,
.page-content-wrapper .rename-btn:active {
    transform: translateY(0);
}

/* ── Display nickname ── */
.page-content-wrapper .display-nickname-div {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pc-border-default);
    border-radius: 0.75rem;
    padding: 0.5rem 0.9375rem;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: var(--pc-text-body);
}

.page-content-wrapper .display-nickname-label {
    font-weight: bold;
    color: var(--pc-text-heading);
}

/* ── Points section ── */
.page-content-wrapper .points-section {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius-sm);
}
@media (min-width: 768px) {
    .page-content-wrapper .points-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-column: span 2;
    }
}

.page-content-wrapper .points-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pc-text-heading);
}

.page-content-wrapper .points-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    .page-content-wrapper .points-buttons { margin-top: 0; }
}

.page-content-wrapper .points-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.25rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-content-wrapper .points-btn-active {
    color: #ffffff;
    background-color: var(--pc-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.page-content-wrapper .points-btn-active:hover {
    background-color: var(--pc-primary-hover);
    transform: translateY(-1px);
}

.page-content-wrapper .points-btn-inactive {
    color: var(--pc-secondary-text);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-content-wrapper .points-btn-inactive:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* ── Custom points input ── */
.page-content-wrapper .custom-points-input {
    grid-column: span 2;
    display: flex;
    height: 2.25rem;
    width: 100%;
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border-default);
    background-color: rgba(255, 255, 255, 0.04);
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    padding-block: 0.75rem;
    color: var(--pc-text-heading);
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .custom-points-input::placeholder {
    color: var(--pc-text-muted);
}
.page-content-wrapper .custom-points-input:focus {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background-color: rgba(255, 255, 255, 0.06);
}

/* ── Toggle rows ── */
.page-content-wrapper .toggle-row {
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius-sm);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
}

@media (min-width: 768px) {
    .page-content-wrapper .toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.page-content-wrapper .toggle-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pc-text-heading);
}

.page-content-wrapper .toggle-btn {
    display: inline-flex;
    height: 1.15rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    cursor: pointer;
    align-self: flex-start;
    background-color: var(--pc-success);
}

.page-content-wrapper .toggle-btn.toggle-on {
    background-color: var(--pc-success) !important;
}

.page-content-wrapper .toggle-btn.toggle-off {
    background-color: var(--pc-error) !important;
}

.page-content-wrapper .toggle-thumb {
    pointer-events: none;
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: #ffffff !important;
    transition: transform 200ms;
}

.page-content-wrapper .toggle-row p {
    font-size: 0.75rem;
    color: var(--pc-text-body);
    grid-column: span 2;
    margin-top: 0.25rem;
}
@media (min-width: 768px) {
    .page-content-wrapper .toggle-row p { margin-top: 0; }
}

/* ═══ Modals ═══ */
.page-content-wrapper .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.page-content-wrapper .modal-overlay.hidden {
    display: none;
}

.page-content-wrapper .modal-box {
    background-color: var(--pc-bg-surface-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pc-border-blue);
    border-radius: var(--pc-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 384px;
    max-height: 60vh;
    animation: modalEnter 200ms ease;
}

@keyframes modalEnter {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.page-content-wrapper .modal-box-warning {
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.page-content-wrapper .modal-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pc-border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.page-content-wrapper .modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pc-text-heading);
}

.page-content-wrapper .modal-close-btn {
    color: var(--pc-text-muted);
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: var(--pc-radius-sm);
    cursor: pointer;
    background: none;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .modal-close-btn:hover {
    color: var(--pc-text-heading);
    background-color: rgba(255, 255, 255, 0.06);
}

/* ── Warning modal header ── */
.page-content-wrapper .modal-header-warning {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(239, 68, 68, 0.08);
}

.page-content-wrapper .modal-header-warning h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fca5a5;
}

.page-content-wrapper .crash-close-btn {
    color: var(--pc-error);
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.25rem;
    border-radius: var(--pc-radius-sm);
    cursor: pointer;
    background: none;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .crash-close-btn:hover {
    color: var(--pc-error-hover);
    background-color: rgba(239, 68, 68, 0.1);
}

/* ── Modal scroll area ── */
.page-content-wrapper .modal-scroll {
    flex: 1;
    overflow-y: auto;
}

/* ── Custom names menu ── */
.page-content-wrapper .menu-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-content-wrapper .custom-names-menu-btn {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: none;
    border: none;
}
.page-content-wrapper .custom-names-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
.page-content-wrapper .custom-names-menu-btn + .custom-names-menu-btn {
    border-top: 1px solid var(--pc-border-default);
}

.page-content-wrapper .menu-item-title {
    font-weight: 500;
    color: var(--pc-text-heading);
    font-size: 0.875rem;
}

.page-content-wrapper .menu-item-desc {
    font-size: 0.75rem;
    color: var(--pc-text-muted);
    margin-top: 0.25rem;
}

.page-content-wrapper .menu-item-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--pc-text-muted);
    margin-left: 0.5rem;
    flex-shrink: 0;
}

/* ── Homoglyph tabs ── */
.page-content-wrapper .homoglyph-tabs {
    display: flex;
    margin: 0 -1rem 0.75rem -1rem;
    border-bottom: 1px solid var(--pc-border-default);
}

.page-content-wrapper .homoglyph-tab {
    flex: 1;
    padding: 0.75rem 1rem 0.6875rem 1rem;
    border: none;
    background: transparent;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--pc-text-body);
}

.page-content-wrapper .homoglyph-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--pc-text-heading);
}

.page-content-wrapper .homoglyph-tab.active {
    border-bottom: 3px solid var(--pc-primary) !important;
    border-radius: var(--pc-radius-sm) var(--pc-radius-sm) 0 0 !important;
    color: var(--pc-primary);
    background: rgba(59, 130, 246, 0.08);
}

/* ── Homoglyph grid ── */
.page-content-wrapper .homoglyph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.page-content-wrapper .homoglyph-char {
    aspect-ratio: 1;
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius-sm);
    font-size: 1.25rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--pc-text-heading);
}
.page-content-wrapper .homoglyph-char:hover {
    border-color: var(--pc-primary);
    background: var(--pc-primary-light);
    transform: scale(1.05);
}

.page-content-wrapper #homoglyph-upper-grid,
.page-content-wrapper #homoglyph-lower-grid {
    position: relative;
    z-index: 1;
    overflow: visible !important;
    height: auto !important;
    min-height: 200px !important;
}

/* ── Special chars ── */
.page-content-wrapper #special-chars-div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.page-content-wrapper #special-chars-div .special-char {
    white-space: nowrap;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    min-height: 3rem;
    border-radius: 0.5rem;
    text-align: left;
    border: 1px solid var(--pc-accent);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    color: var(--pc-text-heading);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper #special-chars-div .special-char:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    border-color: var(--pc-primary);
    background: rgba(255, 255, 255, 0.06);
}

/* ── Generate name button ── */
.page-content-wrapper .generate-name-btn {
    width: fit-content;
    border: 1px solid var(--pc-border-default);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pc-text-muted);
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-content-wrapper .generate-name-btn:hover {
    border-color: var(--pc-border-blue-dark);
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--pc-text-body);
    transform: translateY(-1px);
}

/* ── Results section ── */
.page-content-wrapper .results-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border-default);
}
.page-content-wrapper .results-section.hidden {
    display: none;
}

.page-content-wrapper .results-name-box {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pc-text-heading);
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border-default);
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
}

.page-content-wrapper .use-name-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .use-name-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-50%) scale(1.05);
}

.page-content-wrapper .regenerate-name-btn {
    width: fit-content;
    padding: 0.5rem 1.5rem;
    background: var(--pc-success);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--pc-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.page-content-wrapper .regenerate-name-btn:hover {
    background: var(--pc-success-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ── Add bots modal content ── */
.page-content-wrapper .add-bots-input {
    grid-column: span 2;
    display: flex;
    height: 2.25rem;
    width: 100%;
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border-default);
    background-color: rgba(255, 255, 255, 0.04);
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    color: var(--pc-text-heading);
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .add-bots-input::placeholder {
    color: var(--pc-text-muted);
}
.page-content-wrapper .add-bots-input:focus {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background-color: rgba(255, 255, 255, 0.06);
}

.page-content-wrapper .add-bots-confirm-btn {
    margin-top: 0.75rem;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    height: 1.75rem;
    border-radius: var(--pc-radius-sm);
    padding-inline: 0.75rem;
    color: #ffffff;
    background-color: var(--pc-success);
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .add-bots-confirm-btn:hover {
    background-color: var(--pc-success-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ── Crash modal buttons ── */
.page-content-wrapper .cancel-crash-btn {
    flex: 1;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--pc-text-heading);
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .cancel-crash-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.page-content-wrapper .crash-confirm-btn {
    flex: 1;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    background: var(--pc-error);
    color: #ffffff;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.page-content-wrapper .crash-confirm-btn:hover {
    background: #f87171;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ── Disabled section ── */
.page-content-wrapper .disabled-section {
    pointer-events: none;
    opacity: 0.7;
}

/* ── Hidden utility ── */
.page-content-wrapper .is-hidden {
    display: none;
}

/* ── Shake animation ── */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
.page-content-wrapper .shake-animation {
    animation: shake 0.4s ease-in-out;
}

/* ── Ease hide ── */
@keyframes shrinkFadeOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.7); }
}
.page-content-wrapper .ease-hide {
    animation: shrinkFadeOut 0.2s ease-in forwards;
    pointer-events: none;
}

/* ── Active popup background ── */
.page-content-wrapper .active-popup-bg {
    background-color: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Button disabled ── */
.page-content-wrapper button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* ── Nuke transitions ── */
.page-content-wrapper .nukeTransitions {
    transition: none !important;
}

/* ── Custom names button hover (menu items) ── */
.page-content-wrapper .custom-names-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .custom-names-btn:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
.page-content-wrapper .custom-names-btn:hover svg {
    color: var(--pc-text-muted);
}

/* ── Flex utility (used in modal content) ── */
.page-content-wrapper .flex { display: flex; }
.page-content-wrapper .flex-1 { flex: 1; }
.page-content-wrapper .items-center { align-items: center; }
.page-content-wrapper .gap-2 { gap: 0.5rem; }
.page-content-wrapper .gap-3 { gap: 0.75rem; }
.page-content-wrapper .overflow-y-auto { overflow-y: auto; }
.page-content-wrapper .hidden { display: none; }
.page-content-wrapper .px-4 { padding-inline: 1rem; }
.page-content-wrapper .py-3 { padding-block: 0.75rem; }
.page-content-wrapper .p-4 { padding: 1rem; }
.page-content-wrapper .mb-4 { margin-bottom: 1rem; }
.page-content-wrapper .mt-3 { margin-top: 0.75rem; }
.page-content-wrapper .w-full { width: 100%; }
.page-content-wrapper .text-left { text-align: left; }
.page-content-wrapper .text-lg { font-size: 1.125rem; }
.page-content-wrapper .font-semibold { font-weight: 600; }
.page-content-wrapper .font-medium { font-weight: 500; }
.page-content-wrapper .text-sm { font-size: 0.875rem; }
.page-content-wrapper .text-xs { font-size: 0.75rem; }
.page-content-wrapper .text-red-600 { color: var(--pc-error); }
.page-content-wrapper .text-red-900 { color: #fca5a5; }
.page-content-wrapper .text-gray-900 { color: var(--pc-text-heading); }
.page-content-wrapper .text-gray-600 { color: var(--pc-text-muted); }
.page-content-wrapper .text-gray-400 { color: var(--pc-text-muted); }
.page-content-wrapper .border-t { border-top: 1px solid var(--pc-border-default); }
.page-content-wrapper .border-gray-100 { border-color: var(--pc-border-default); }
.page-content-wrapper .border { border: 1px solid var(--pc-border-default); }
.page-content-wrapper .border-gray-200 { border-color: var(--pc-border-default); }
.page-content-wrapper .bg-gray-50 { background-color: rgba(255, 255, 255, 0.03); }
.page-content-wrapper .bg-white { background-color: rgba(255, 255, 255, 0.06); }
.page-content-wrapper .rounded { border-radius: 0.25rem; }
.page-content-wrapper .rounded-lg { border-radius: var(--pc-radius-sm); }
.page-content-wrapper .transition-all { transition: all var(--pc-transition); }
.page-content-wrapper .scale-95 { transform: scale(0.95); }
.page-content-wrapper .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.page-content-wrapper .justify-center { justify-content: center; }
.page-content-wrapper .justify-between { justify-content: space-between; }
.page-content-wrapper .mb-3 { margin-bottom: 0.75rem; }
.page-content-wrapper .mb-2 { margin-bottom: 0.5rem; }
.page-content-wrapper .mb-1 { margin-bottom: 0.25rem; }
.page-content-wrapper .max-w-md { max-width: 28rem; }
.page-content-wrapper .relative { position: relative; }
.page-content-wrapper .absolute { position: absolute; }
.page-content-wrapper .right-2 { right: 0.5rem; }
.page-content-wrapper .top-1\/2 { top: 50%; }
.page-content-wrapper .-translate-y-1\/2 { transform: translateY(-50%); }
.page-content-wrapper .w-10 { width: 2.5rem; }
.page-content-wrapper .h-10 { height: 2.5rem; }
.page-content-wrapper .w-4 { width: 1rem; }
.page-content-wrapper .h-4 { height: 1rem; }
.page-content-wrapper .h-5 { height: 1.25rem; }
.page-content-wrapper .w-fit { width: fit-content; }
.page-content-wrapper .px-5 { padding-inline: 1.25rem; }
.page-content-wrapper .py-3 { padding-block: 0.75rem; }
.page-content-wrapper .px-6 { padding-inline: 1.5rem; }
.page-content-wrapper .pb-3 { padding-bottom: 0.75rem; }
.page-content-wrapper .gap-4 { gap: 1rem; }
.page-content-wrapper .gap-1 { gap: 0.25rem; }
.page-content-wrapper .gap-1\.5 { gap: 0.375rem; }
.page-content-wrapper .flex-col { flex-direction: column; }
.page-content-wrapper .items-start { align-items: flex-start; }
.page-content-wrapper .text-md { font-size: 1rem; }
.page-content-wrapper .text-red-400 { color: #f87171; }
.page-content-wrapper .text-red-700 { color: var(--pc-error-hover); }
.page-content-wrapper .mr-2 { margin-right: 0.5rem; }
.page-content-wrapper .h-9 { height: 2.25rem; }
.page-content-wrapper .px-3 { padding-inline: 0.75rem; }
.page-content-wrapper .py-2 { padding-block: 0.5rem; }
.page-content-wrapper .w-24 { width: 6rem; }
.page-content-wrapper .w-5 { width: 1.25rem; }
.page-content-wrapper .h-3 { height: 0.75rem; }
.page-content-wrapper .flex-shrink-0 { flex-shrink: 0; }
.page-content-wrapper .inline-block { display: inline-block; }
.page-content-wrapper .col-span-2 { grid-column: span 2; }
.page-content-wrapper .grid { display: grid; }
.page-content-wrapper .mt-2 { margin-top: 0.5rem; }
.page-content-wrapper .mt-0\.5 { margin-top: 0.125rem; }
.page-content-wrapper .mt-1 { margin-top: 0.25rem; }
.page-content-wrapper .mt-0 { margin-top: 0; }
.page-content-wrapper .text-center { text-align: center; }
.page-content-wrapper .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.page-content-wrapper .shadow-lg { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.page-content-wrapper .focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--pc-primary); }
.page-content-wrapper .focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px var(--pc-primary); }
.page-content-wrapper .focus\:ring-offset-1:focus { box-shadow: 0 0 0 1px var(--pc-bg-surface-2), 0 0 0 3px var(--pc-primary); }
.page-content-wrapper .focus\:outline-none:focus { outline: none; }
.page-content-wrapper .cursor-pointer { cursor: pointer; }
.page-content-wrapper .duration-200 { transition-duration: 200ms; }
.page-content-wrapper .hover\:bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.04) !important; }
.page-content-wrapper .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
.page-content-wrapper .hover\:bg-gray-300:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
.page-content-wrapper .hover\:border-gray-400:hover { border-color: var(--pc-border-blue-dark); }
.page-content-wrapper .hover\:bg-gray-400:hover { background-color: rgba(255, 255, 255, 0.12); }
.page-content-wrapper .text-gray-800 { color: var(--pc-text-heading); }
.page-content-wrapper .text-gray-700 { color: var(--pc-text-body); }
.page-content-wrapper .text-gray-500 { color: var(--pc-text-muted); }
.page-content-wrapper .border-gray-300 { border-color: var(--pc-border-default); }
.page-content-wrapper .border-red-300 { border-color: rgba(239, 68, 68, 0.4); }
.page-content-wrapper .border-red-200 { border-color: rgba(239, 68, 68, 0.2); }
.page-content-wrapper .bg-red-50 { background-color: rgba(239, 68, 68, 0.08); }
.page-content-wrapper .bg-gray-200 { background-color: rgba(255, 255, 255, 0.06); }
.page-content-wrapper .bg-emerald-600 { background-color: var(--pc-success); }
.page-content-wrapper .hover\:bg-red-400:hover { background-color: #f87171; }
.page-content-wrapper .hover\:text-gray-700:hover { color: var(--pc-text-body); }
.page-content-wrapper .hover\:text-red-700:hover { color: var(--pc-error-hover); }
.page-content-wrapper .hover\:text-red-300:hover { color: #fca5a5; }
.page-content-wrapper .hover\:bg-gray-200:hover { background-color: rgba(255, 255, 255, 0.06); }
.page-content-wrapper .text-2xl { font-size: 1.5rem; }
.page-content-wrapper .text-xl { font-size: 1.25rem; }
.page-content-wrapper .px-2 { padding-inline: 0.5rem; }
.page-content-wrapper .py-0\.5 { padding-block: 0.125rem; }
.page-content-wrapper .text-base { font-size: 1rem; }
.page-content-wrapper .text-white { color: #ffffff; }
.page-content-wrapper .fill-none { fill: none; }
.page-content-wrapper .stroke-current { stroke: currentColor; }

/* ═══════════════════════════════════════════════════════════════════
   Additional utility classes used in the HTML template
   (mirroring Tailwind utilities that the page previously relied on)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout: min-height, container, max-width ── */
.page-content-wrapper .min-h-screen { min-height: 100vh; }
.page-content-wrapper .container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
}
.page-content-wrapper .mx-auto { margin-inline: auto; }
.page-content-wrapper .max-w-7xl { max-width: 80rem; }

@media (min-width: 640px) {
    .page-content-wrapper .sm\:px-6 { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
    .page-content-wrapper .lg\:px-8 { padding-inline: 2rem; }
    .page-content-wrapper .lg\:max-w-3xl { max-width: 48rem; }
    .page-content-wrapper .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .page-content-wrapper .md\:flex { display: flex; }
    .page-content-wrapper .md\:mt-0 { margin-top: 0; }
}

/* ── Spacing: space-y, gap, padding, margin ── */
.page-content-wrapper .space-y-6 > * + * { margin-top: 1.5rem; }
.page-content-wrapper .space-y-1 > * + * { margin-top: 0.25rem; }
.page-content-wrapper .gap-6 { gap: 1.5rem; }
.page-content-wrapper .gap-y-2 { row-gap: 0.5rem; }
.page-content-wrapper .p-3 { padding: 0.75rem; }
.page-content-wrapper .py-4 { padding-block: 1rem; }
.page-content-wrapper .py-6 { padding-block: 1.5rem; }
.page-content-wrapper .ml-2 { margin-left: 0.5rem; }

/* ── Colors: text, background, border ── */
.page-content-wrapper .text-card-foreground { color: var(--pc-text-heading); }
.page-content-wrapper .text-muted-foreground { color: var(--pc-text-muted); }
.page-content-wrapper .dark-text-heading { color: var(--pc-text-heading); }
.page-content-wrapper .dark-text-muted { color: var(--pc-text-muted); }
.page-content-wrapper .dark-text-muted-2 { color: var(--pc-text-muted-2); }
.page-content-wrapper .dark-text-white { color: #ffffff; }
.page-content-wrapper .dark-text-zinc-200 { color: #e4e4e7; }
.page-content-wrapper .dark-text-red-200 { color: #fca5a5; }
.page-content-wrapper .dark-text-red-400 { color: #f87171; }

.page-content-wrapper .bg-gray-100 { background-color: rgba(255, 255, 255, 0.04); }
.page-content-wrapper .bg-gray-200-50 { background-color: rgba(255, 255, 255, 0.03); }
.page-content-wrapper .dark-bg-zinc { background-color: rgba(255, 255, 255, 0.04); }
.page-content-wrapper .dark-bg-zinc-50 { background-color: rgba(255, 255, 255, 0.03); }
.page-content-wrapper .dark-bg-zinc-800 { background-color: rgba(255, 255, 255, 0.06); }
.page-content-wrapper .dark-bg-zinc-900-50 { background-color: rgba(255, 255, 255, 0.03); }

.page-content-wrapper .border-2 { border-width: 2px; }
.page-content-wrapper .border-blue-200 { border-color: var(--pc-border-blue); }
.page-content-wrapper .dark-border-blue { border-color: var(--pc-border-blue); }
.page-content-wrapper .border-blue-custom { border-color: var(--pc-border-blue); }
.page-content-wrapper .dark-border-zinc-600 { border-color: rgba(255, 255, 255, 0.1); }
.page-content-wrapper .dark-border-zinc-700 { border-color: var(--pc-border-default); }

/* ── Hover utility (dash syntax used in HTML) ── */
.page-content-wrapper .hover-bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.04); }

/* ── Rounded, shadow ── */
.page-content-wrapper .rounded-xl { border-radius: 0.75rem; }
.page-content-wrapper .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }

/* ── Grid ── */
.page-content-wrapper .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-content-wrapper .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Justify ── */
.page-content-wrapper .justify-start { justify-content: flex-start; }

/* ── Section panels (used by JS querySelectorAll('.section')) ── */
.page-content-wrapper .section {
    padding: 1rem;
}
.page-content-wrapper .section.hidden {
    display: none;
}
.page-content-wrapper .section h3 {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--pc-text-heading);
}



/* ==========================================================================
   Cinematic Loader — SVG glowing ring
   ========================================================================== */

@keyframes loaderSpin {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -320; }
}

@keyframes loaderPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.06); }
}

/* ==========================================================================
   Custom Names Modal — expanded sizing
   ========================================================================== */

.page-content-wrapper .modal-box.modal-box-lg {
    width: 520px;
    max-width: calc(100vw - 2rem);
    max-height: 80vh;
}

.page-content-wrapper .modal-box.modal-box-lg .modal-header {
    padding: 1rem 1.5rem;
}

.page-content-wrapper .modal-box.modal-box-lg .modal-header h2 {
    font-size: 1.25rem;
}

.page-content-wrapper .modal-box.modal-box-lg .flex-1.overflow-y-auto {
    padding: 0.5rem 0;
}

.page-content-wrapper .modal-box.modal-box-lg .custom-names-btn {
    padding: 1rem 1.5rem;
}

.page-content-wrapper .modal-box.modal-box-lg .menu-item-title {
    font-size: 0.9375rem;
}

.page-content-wrapper .modal-box.modal-box-lg .menu-item-desc {
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

.page-content-wrapper .modal-box.modal-box-lg .section {
    padding: 1.5rem;
}

.page-content-wrapper .modal-box.modal-box-lg .section h3 {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   Random Name Generator — premium dashboard card redesign
   ========================================================================== */

.page-content-wrapper .generate-name-btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--pc-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.12));
    border: 1px solid var(--pc-border-blue);
    color: var(--pc-text-heading);
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    letter-spacing: 0.01em;
}
.page-content-wrapper .generate-name-btn svg {
    color: var(--pc-primary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .generate-name-btn:hover {
    border-color: var(--pc-border-blue-dark);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(16, 185, 129, 0.18));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.page-content-wrapper .generate-name-btn:hover svg {
    transform: rotate(180deg);
}
.page-content-wrapper .generate-name-btn:active {
    transform: translateY(0);
}

.page-content-wrapper #results-section {
    padding: 1.5rem;
    gap: 1.25rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius);
}

.page-content-wrapper .results-name-box {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1.25rem 3.5rem 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.06));
    border: 1px solid var(--pc-border-blue);
    border-radius: var(--pc-radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    letter-spacing: 0.02em;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-content-wrapper .use-name-btn {
    width: 2.5rem;
    height: 2.5rem;
    right: 0.75rem;
    border-radius: var(--pc-radius-sm);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.15);
}
.page-content-wrapper .use-name-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}
.page-content-wrapper .use-name-btn svg path {
    transition: fill 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-content-wrapper .regenerate-name-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--pc-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pc-border-default);
    color: var(--pc-text-body);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.page-content-wrapper .regenerate-name-btn svg {
    color: var(--pc-text-muted);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .regenerate-name-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--pc-border-blue);
    color: var(--pc-text-heading);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.page-content-wrapper .regenerate-name-btn:hover svg {
    transform: rotate(-180deg);
    color: var(--pc-primary);
}
.page-content-wrapper .regenerate-name-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   Custom Names Launch Button — sleek integration
   ========================================================================== */

.page-content-wrapper .custom-names-launch-btn {
    height: 2.25rem;
    padding-inline: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-left: 0;
    border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .custom-names-launch-btn svg {
    color: #6ee7b7;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .custom-names-launch-btn:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.3));
    border-color: rgba(16, 185, 129, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.page-content-wrapper .custom-names-launch-btn:hover svg {
    transform: scale(1.1);
}
.page-content-wrapper .custom-names-launch-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   Menu Card List — spacious card-based selection
   ========================================================================== */

.page-content-wrapper .menu-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.page-content-wrapper .menu-card-item {
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pc-border-default);
    border-radius: var(--pc-radius-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--pc-text-heading);
}
.page-content-wrapper .menu-card-item:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--pc-border-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--pc-border-blue);
}
.page-content-wrapper .menu-card-item:active {
    transform: translateY(0);
}

.page-content-wrapper .menu-card-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pc-radius-sm);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.08));
    border: 1px solid var(--pc-border-blue);
    color: var(--pc-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .menu-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.page-content-wrapper .menu-card-item:hover .menu-card-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.15));
    border-color: var(--pc-border-blue-dark);
    transform: scale(1.05);
}

.page-content-wrapper .menu-card-body {
    flex: 1;
    min-width: 0;
}

.page-content-wrapper .menu-card-title {
    font-weight: 600;
    color: var(--pc-text-heading);
    font-size: 0.9375rem;
    line-height: 1.3;
}

.page-content-wrapper .menu-card-desc {
    font-size: 0.8125rem;
    color: var(--pc-text-muted);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.page-content-wrapper .menu-card-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--pc-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-content-wrapper .menu-card-item:hover .menu-card-arrow {
    transform: translateX(4px);
    color: var(--pc-primary);
}

/* ==========================================================================
   Responsive — Mobile fluid layouts (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* ══════════════════════════════════════════════════════════════════════
       1. GLOBAL CONTAINMENT RESET
       Kill horizontal scroll. Force box-sizing border-box so padding stays
       inside widths. Every section capped at 100%.
       ══════════════════════════════════════════════════════════════════════ */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .page-content-wrapper *,
    .page-content-wrapper *::before,
    .page-content-wrapper *::after {
        box-sizing: border-box !important;
    }
    .page-content-wrapper .page-bg,
    .page-content-wrapper .hero-section,
    .page-content-wrapper .container,
    .page-content-wrapper .max-w-7xl,
    .page-content-wrapper .lg\:max-w-3xl {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .page-content-wrapper .hero-section {
        padding-block: 0.25rem;
    }

    /* ══════════════════════════════════════════════════════════════════════
       2. CARD CONTAINERS
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper .card-expanded,
    .page-content-wrapper #card-container,
    .page-content-wrapper #Game-Settings-Section {
        max-width: 100% !important;
        overflow: hidden;
    }
    .page-content-wrapper [data-slot="card-content"],
    .page-content-wrapper .card-content {
        padding: 0 15px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .page-content-wrapper .card-header {
        padding-inline: 15px !important;
    }
    .page-content-wrapper .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        max-width: 100% !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       3. AUTO-PLAY PANEL
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper .auto-play-panel {
        padding: 0.625rem !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .page-content-wrapper .auto-play-panel > .grid {
        gap: 0.5rem !important;
        padding-inline: 0 !important;
        max-width: 100% !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       4. JOIN GAME SECTION — smart row dropping
       Top row: input + custom names side-by-side
       Bottom row: join button full width
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper .join-game-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .page-content-wrapper .join-game-input-wrapper {
        display: flex !important;
        flex: 1 1 0% !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .page-content-wrapper .custom-names-launch-btn {
        flex: 0 1 25% !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        min-width: 25% !important;
        max-width: 50% !important;
        width: auto !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: calc(10px + 0.8vw) !important;
        padding: 0.5vh 1.5vw !important;
        height: 2.25rem !important;
        border-left: 0 !important;
        gap: 0.25rem !important;
        box-sizing: border-box !important;
    }
    .page-content-wrapper .custom-names-launch-btn svg {
        flex-shrink: 0 !important;
        width: 1rem !important;
        height: 1rem !important;
    }
    .page-content-wrapper .join-game-input {
        flex: 1 1 0% !important;
        flex-grow: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: calc(10px + 1vw) !important;
        padding: 0.5vh 1.5vw !important;
        height: 2.25rem !important;
        box-sizing: border-box !important;
    }
    .page-content-wrapper .join-game-btn,
    .page-content-wrapper .rename-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: calc(10px + 1vw) !important;
        padding: 0.5vh 2vw !important;
        height: 2.25rem !important;
        gap: 0.25rem !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .page-content-wrapper .join-game-btn svg,
    .page-content-wrapper .rename-btn svg {
        flex-shrink: 0 !important;
        width: 1rem !important;
        height: 1rem !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       5. ANSWER POINTS — 2×2 grid (Stage 1)
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper #delay-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .page-content-wrapper .points-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: calc(11px + 0.8vw) !important;
        padding: 0.5vh 1vw !important;
        height: 2.25rem !important;
        gap: 0.25rem !important;
        box-sizing: border-box !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       6. AUTOPLAY & ANTI-KICK — proportional scale
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper .toggle-row {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .page-content-wrapper .toggle-row label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        font-size: calc(10px + 0.5vw) !important;
    }
    .page-content-wrapper .toggle-btn {
        flex-shrink: 0 !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       7. MISCELLANEOUS CONTAINMENT
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper .custom-points-input,
    .page-content-wrapper .btn-add-bots,
    .page-content-wrapper .display-nickname-div {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .page-content-wrapper .display-nickname-div {
        text-overflow: ellipsis !important;
        white-space: normal !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       8. MODAL SIZING
       ══════════════════════════════════════════════════════════════════════ */
    .page-content-wrapper .modal-box {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: 85vh !important;
    }
    .page-content-wrapper .modal-box.modal-box-lg {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: 85vh !important;
    }
    .page-content-wrapper .modal-box.modal-box-lg .modal-header {
        padding: 0.875rem 1.25rem !important;
    }
    .page-content-wrapper .modal-box.modal-box-lg .section {
        padding: 1.25rem !important;
    }
    .page-content-wrapper .menu-card-list {
        padding: 1rem !important;
        gap: 0.625rem !important;
    }
    .page-content-wrapper .menu-card-item {
        padding: 0.875rem 1rem !important;
        gap: 0.75rem !important;
    }
    .page-content-wrapper .menu-card-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    .page-content-wrapper .menu-card-title {
        font-size: 0.875rem !important;
    }
    .page-content-wrapper .menu-card-desc {
        font-size: 0.75rem !important;
    }
    .page-content-wrapper .generate-name-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    .page-content-wrapper #results-section {
        padding: 1.25rem !important;
        gap: 1rem !important;
    }
    .page-content-wrapper .results-name-box {
        font-size: 1.125rem !important;
        padding: 1rem 3rem 1rem 1.25rem !important;
    }
    .page-content-wrapper .use-name-btn {
        width: 2.25rem !important;
        height: 2.25rem !important;
        right: 0.5rem !important;
    }
    .page-content-wrapper .regenerate-name-btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    .page-content-wrapper .homoglyph-grid {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)) !important;
        gap: 0.375rem !important;
    }
    .page-content-wrapper .homoglyph-char {
        font-size: 1.125rem !important;
    }
    .page-content-wrapper #special-chars-div {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 0.625rem !important;
        padding: 0.75rem !important;
    }
}

@media (max-width: 430px) {
    /* ═══ Narrow phone tightening ═══ */
    .page-content-wrapper .menu-card-item {
        padding: 0.75rem !important;
        gap: 0.625rem !important;
    }
    .page-content-wrapper .menu-card-icon {
        width: 2rem !important;
        height: 2rem !important;
    }
    .page-content-wrapper .menu-card-icon svg {
        width: 1rem !important;
        height: 1rem !important;
    }
    .page-content-wrapper .menu-card-title {
        font-size: 0.8125rem !important;
    }
    .page-content-wrapper .menu-card-desc {
        font-size: 0.6875rem !important;
    }
    .page-content-wrapper .menu-card-arrow {
        width: 1rem !important;
        height: 1rem !important;
    }
    .page-content-wrapper .results-name-box {
        font-size: 1rem !important;
        padding: 0.875rem 2.75rem 0.875rem 1rem !important;
    }
    .page-content-wrapper .use-name-btn {
        width: 2rem !important;
        height: 2rem !important;
        right: 0.375rem !important;
    }
    .page-content-wrapper .homoglyph-grid {
        grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)) !important;
    }
    .page-content-wrapper .homoglyph-char {
        font-size: 1rem !important;
    }

    /* ═══ Join Game: tighten on ultra-narrow screens ═══ */
    .page-content-wrapper .custom-names-launch-btn {
        font-size: calc(8px + 1vw) !important;
        padding: 0.5vh 1vw !important;
    }
    .page-content-wrapper .join-game-input {
        font-size: calc(9px + 1vw) !important;
        padding: 0.5vh 1vw !important;
    }
    .page-content-wrapper .join-game-btn,
    .page-content-wrapper .rename-btn {
        font-size: calc(9px + 1vw) !important;
        padding: 0.5vh 1.5vw !important;
    }

    /* ═══ Points: Stage 2 — vertical 1:1:1:1 stack ═══ */
    .page-content-wrapper #delay-buttons {
        grid-template-columns: 1fr !important;
    }
    .page-content-wrapper .points-btn {
        font-size: calc(10px + 1vw) !important;
        padding: 0.5vh 1vw !important;
    }
}

/* ==========================================================================
   Light Theme — CSS-only overrides via body.light-theme
   Toggle script is handled in a separate header file.
   ========================================================================== */

body.light-theme .page-content-wrapper,
html[data-theme="light"] .page-content-wrapper {
    --pc-primary: #2563eb;
    --pc-primary-hover: #1d4ed8;
    --pc-primary-light: rgba(37, 99, 235, 0.08);
    --pc-secondary: rgba(0, 0, 0, 0.04);
    --pc-secondary-hover: rgba(0, 0, 0, 0.08);
    --pc-secondary-text: #475569;
    --pc-accent: #0284c7;
    --pc-success: #059669;
    --pc-success-hover: #047857;
    --pc-success-light: rgba(5, 150, 105, 0.08);
    --pc-warning: #d97706;
    --pc-error: #dc2626;
    --pc-error-hover: #b91c1c;
    --pc-error-light: rgba(220, 38, 38, 0.08);
    --pc-text-heading: #0f172a;
    --pc-text-body: #334155;
    --pc-text-muted: #64748b;
    --pc-text-muted-2: #64748b;
    --pc-bg-page: #f1f5f9;
    --pc-bg-surface: rgba(255, 255, 255, 0.75);
    --pc-bg-surface-2: rgba(255, 255, 255, 0.92);
    --pc-bg-surface-3: rgba(0, 0, 0, 0.04);
    --pc-border-default: rgba(15, 23, 42, 0.1);
    --pc-border-blue: rgba(37, 99, 235, 0.3);
    --pc-border-blue-dark: rgba(37, 99, 235, 0.45);
    --pc-shadow-card: 0 20px 50px -12px rgba(15, 23, 42, 0.12);
    --pc-shadow-panel: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
}

body.light-theme .page-content-wrapper .page-bg,
html[data-theme="light"] .page-content-wrapper .page-bg {
    background-color: var(--pc-bg-page);
}

body.light-theme .page-content-wrapper .hero-section,
html[data-theme="light"] .page-content-wrapper .hero-section {
    background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.04), transparent 60%);
}

body.light-theme .page-content-wrapper .game-pin-input,
html[data-theme="light"] .page-content-wrapper .game-pin-input {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
}
body.light-theme .page-content-wrapper .game-pin-input:focus,
html[data-theme="light"] .page-content-wrapper .game-pin-input:focus {
    background-color: #ffffff;
}

body.light-theme .page-content-wrapper .join-game-input,
html[data-theme="light"] .page-content-wrapper .join-game-input {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
}
body.light-theme .page-content-wrapper .join-game-input:focus,
html[data-theme="light"] .page-content-wrapper .join-game-input:focus {
    background-color: #ffffff;
}

body.light-theme .page-content-wrapper .custom-names-launch-btn,
html[data-theme="light"] .page-content-wrapper .custom-names-launch-btn {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(4, 120, 87, 0.15));
    border-color: rgba(5, 150, 105, 0.3);
    color: #047857;
}
body.light-theme .page-content-wrapper .custom-names-launch-btn svg,
html[data-theme="light"] .page-content-wrapper .custom-names-launch-btn svg {
    color: #059669;
}
body.light-theme .page-content-wrapper .custom-names-launch-btn:hover,
html[data-theme="light"] .page-content-wrapper .custom-names-launch-btn:hover {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15), rgba(4, 120, 87, 0.2));
    border-color: rgba(5, 150, 105, 0.5);
}
body.light-theme #cinematic-loader,
html[data-theme="light"] #cinematic-loader {
    background: #f1f5f9;
}
body.light-theme #cinematic-loader circle[stroke="rgba(255,255,255,0.08)"],
html[data-theme="light"] #cinematic-loader circle[stroke="rgba(255,255,255,0.08)"] {
    stroke: rgba(15, 23, 42, 0.08);
}

body.light-theme .page-content-wrapper .modal-box,
html[data-theme="light"] .page-content-wrapper .modal-box {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.light-theme .page-content-wrapper .menu-card-item,
html[data-theme="light"] .page-content-wrapper .menu-card-item {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.08);
}
body.light-theme .page-content-wrapper .menu-card-item:hover,
html[data-theme="light"] .page-content-wrapper .menu-card-item:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: var(--pc-border-blue);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--pc-border-blue);
}

body.light-theme .page-content-wrapper .menu-card-icon,
html[data-theme="light"] .page-content-wrapper .menu-card-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(5, 150, 105, 0.06));
    border-color: rgba(37, 99, 235, 0.2);
}

body.light-theme .page-content-wrapper .generate-name-btn,
html[data-theme="light"] .page-content-wrapper .generate-name-btn {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(5, 150, 105, 0.08));
    border-color: rgba(37, 99, 235, 0.25);
    color: var(--pc-text-heading);
}
body.light-theme .page-content-wrapper .generate-name-btn:hover,
html[data-theme="light"] .page-content-wrapper .generate-name-btn:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(5, 150, 105, 0.12));
}

body.light-theme .page-content-wrapper #results-section,
html[data-theme="light"] .page-content-wrapper #results-section {
    background-color: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.08);
}

body.light-theme .page-content-wrapper .results-name-box,
html[data-theme="light"] .page-content-wrapper .results-name-box {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(5, 150, 105, 0.04));
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.light-theme .page-content-wrapper .use-name-btn,
html[data-theme="light"] .page-content-wrapper .use-name-btn {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.25);
}
body.light-theme .page-content-wrapper .use-name-btn:hover,
html[data-theme="light"] .page-content-wrapper .use-name-btn:hover {
    background: rgba(5, 150, 105, 0.18);
    border-color: rgba(5, 150, 105, 0.4);
}

body.light-theme .page-content-wrapper .regenerate-name-btn,
html[data-theme="light"] .page-content-wrapper .regenerate-name-btn {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.1);
    color: var(--pc-text-body);
}
body.light-theme .page-content-wrapper .regenerate-name-btn:hover,
html[data-theme="light"] .page-content-wrapper .regenerate-name-btn:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: var(--pc-border-blue);
}

body.light-theme .page-content-wrapper .homoglyph-char,
html[data-theme="light"] .page-content-wrapper .homoglyph-char {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.08);
}
body.light-theme .page-content-wrapper .homoglyph-char:hover,
html[data-theme="light"] .page-content-wrapper .homoglyph-char:hover {
    background: var(--pc-primary-light);
}

body.light-theme .page-content-wrapper #special-chars-div .special-char,
html[data-theme="light"] .page-content-wrapper #special-chars-div .special-char {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(2, 132, 199, 0.25);
}
body.light-theme .page-content-wrapper #special-chars-div .special-char:hover,
html[data-theme="light"] .page-content-wrapper #special-chars-div .special-char:hover {
    background: rgba(37, 99, 235, 0.06);
}

body.light-theme .page-content-wrapper .active-popup-bg,
html[data-theme="light"] .page-content-wrapper .active-popup-bg {
    background-color: rgba(241, 245, 249, 0.7);
}

body.light-theme .page-content-wrapper .setting-item,
html[data-theme="light"] .page-content-wrapper .setting-item {
    background-color: rgba(255, 255, 255, 0.6);
}
body.light-theme .page-content-wrapper .setting-item:hover,
html[data-theme="light"] .page-content-wrapper .setting-item:hover {
    background-color: rgba(37, 99, 235, 0.05);
}

body.light-theme .page-content-wrapper .auto-play-panel,
html[data-theme="light"] .page-content-wrapper .auto-play-panel {
    background-color: rgba(255, 255, 255, 0.5);
}

body.light-theme .page-content-wrapper .toggle-row,
html[data-theme="light"] .page-content-wrapper .toggle-row {
    background-color: rgba(255, 255, 255, 0.5);
}

body.light-theme .page-content-wrapper .display-nickname-div,
html[data-theme="light"] .page-content-wrapper .display-nickname-div {
    background-color: rgba(255, 255, 255, 0.6);
}

body.light-theme .page-content-wrapper .add-bots-input,
html[data-theme="light"] .page-content-wrapper .add-bots-input {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
}
body.light-theme .page-content-wrapper .add-bots-input:focus,
html[data-theme="light"] .page-content-wrapper .add-bots-input:focus {
    background-color: #ffffff;
}

body.light-theme .page-content-wrapper .custom-points-input,
html[data-theme="light"] .page-content-wrapper .custom-points-input {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
}
body.light-theme .page-content-wrapper .custom-points-input:focus,
html[data-theme="light"] .page-content-wrapper .custom-points-input:focus {
    background-color: #ffffff;
}

body.light-theme .page-content-wrapper .points-btn-inactive,
html[data-theme="light"] .page-content-wrapper .points-btn-inactive {
    color: var(--pc-secondary-text);
    background-color: rgba(15, 23, 42, 0.04);
}
body.light-theme .page-content-wrapper .points-btn-inactive:hover,
html[data-theme="light"] .page-content-wrapper .points-btn-inactive:hover {
    background-color: rgba(15, 23, 42, 0.08);
}

body.light-theme .page-content-wrapper .cancel-crash-btn,
html[data-theme="light"] .page-content-wrapper .cancel-crash-btn {
    background: rgba(15, 23, 42, 0.04);
    color: var(--pc-text-heading);
}
body.light-theme .page-content-wrapper .cancel-crash-btn:hover,
html[data-theme="light"] .page-content-wrapper .cancel-crash-btn:hover {
    background: rgba(15, 23, 42, 0.08);
}

body.light-theme .page-content-wrapper .modal-close-btn,
html[data-theme="light"] .page-content-wrapper .modal-close-btn {
    color: var(--pc-text-muted);
}
body.light-theme .page-content-wrapper .modal-close-btn:hover,
html[data-theme="light"] .page-content-wrapper .modal-close-btn:hover {
    color: var(--pc-text-heading);
    background-color: rgba(15, 23, 42, 0.06);
}

body.light-theme .page-content-wrapper .homoglyph-tab,
html[data-theme="light"] .page-content-wrapper .homoglyph-tab {
    color: var(--pc-text-body);
}
body.light-theme .page-content-wrapper .homoglyph-tab:hover,
html[data-theme="light"] .page-content-wrapper .homoglyph-tab:hover {
    background: rgba(15, 23, 42, 0.03);
}

body.light-theme .page-content-wrapper .bg-gray-50,
html[data-theme="light"] .page-content-wrapper .bg-gray-50,
body.light-theme .page-content-wrapper .dark-bg-zinc-900-50,
html[data-theme="light"] .page-content-wrapper .dark-bg-zinc-900-50 {
    background-color: rgba(255, 255, 255, 0.5);
}
body.light-theme .page-content-wrapper .bg-white,
html[data-theme="light"] .page-content-wrapper .bg-white,
body.light-theme .page-content-wrapper .dark-bg-zinc-800,
html[data-theme="light"] .page-content-wrapper .dark-bg-zinc-800 {
    background-color: rgba(255, 255, 255, 0.7);
}
body.light-theme .page-content-wrapper .bg-gray-100,
html[data-theme="light"] .page-content-wrapper .bg-gray-100,
body.light-theme .page-content-wrapper .dark-bg-zinc,
html[data-theme="light"] .page-content-wrapper .dark-bg-zinc {
    background-color: rgba(15, 23, 42, 0.03);
}
body.light-theme .page-content-wrapper .bg-gray-200-50,
html[data-theme="light"] .page-content-wrapper .bg-gray-200-50,
body.light-theme .page-content-wrapper .dark-bg-zinc-50,
html[data-theme="light"] .page-content-wrapper .dark-bg-zinc-50 {
    background-color: rgba(15, 23, 42, 0.02);
}

body.light-theme .page-content-wrapper .border-gray-300,
html[data-theme="light"] .page-content-wrapper .border-gray-300,
body.light-theme .page-content-wrapper .dark-border-zinc-600,
html[data-theme="light"] .page-content-wrapper .dark-border-zinc-600 {
    border-color: rgba(15, 23, 42, 0.12);
}
body.light-theme .page-content-wrapper .dark-border-zinc-700,
html[data-theme="light"] .page-content-wrapper .dark-border-zinc-700 {
    border-color: rgba(15, 23, 42, 0.1);
}

body.light-theme .page-content-wrapper .hover\:bg-gray-50:hover,
html[data-theme="light"] .page-content-wrapper .hover\:bg-gray-50:hover,
body.light-theme .page-content-wrapper .hover\:bg-gray-100:hover,
html[data-theme="light"] .page-content-wrapper .hover\:bg-gray-100:hover,
body.light-theme .page-content-wrapper .hover\:bg-gray-200:hover,
html[data-theme="light"] .page-content-wrapper .hover\:bg-gray-200:hover,
body.light-theme .page-content-wrapper .hover\:bg-gray-300:hover,
html[data-theme="light"] .page-content-wrapper .hover\:bg-gray-300:hover,
body.light-theme .page-content-wrapper .hover\:bg-gray-400:hover,
html[data-theme="light"] .page-content-wrapper .hover\:bg-gray-400:hover {
    background-color: rgba(37, 99, 235, 0.06) !important;
}



/* ==========================================================================
   Jumble Quiz Info PopUp — styles
   Matches the existing card/header aesthetic:
   Inter font, border-2 border-blue-200, rounded-xl, shadow-2xl, white bg.
   ========================================================================== */

/* ---- Overlay ---- */

.jumble-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    animation: jumble-fade-in 0.2s ease forwards;
}

.jumble-overlay[hidden] {
    display: none;
}

@keyframes jumble-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Modal shell ---- */

.jumble-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 100dvh;
    background: #ffffff;
    border: 2px solid #bfdbfe;
    border-radius: 12px;
    box-shadow: 0 20px 50px -10px rgba(30, 58, 138, 0.25);
    overflow: hidden;
    animation: jumble-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes jumble-scale-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ---- Close button ---- */

.jumble-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(241, 245, 249, 0.8);
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.jumble-close-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.jumble-close-btn:active {
    transform: scale(0.92);
}

/* ---- Header ---- */

.jumble-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 52px 14px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.jumble-header-text {
    flex: 1;
    min-width: 0;
}

.jumble-title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.jumble-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}

/* ---- Radial Timer ---- */

.jumble-timer {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jumble-timer-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.jumble-timer-track {
    stroke: #e2e8f0;
}

.jumble-timer-ring {
    stroke: #3b82f6;
    transition: stroke 0.3s ease;
}

.jumble-timer-ring.jumble-timer-warning {
    stroke: #f59e0b;
}

.jumble-timer-ring.jumble-timer-critical {
    stroke: #ef4444;
}

.jumble-timer-text {
    position: relative;
    z-index: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

/* ---- Workspace ---- */

.jumble-workspace {
    flex: 1;
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    min-height: 0;
    overflow: hidden;
}

/* ---- Pallets (left/top) ---- */

.jumble-pallets {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.jumble-pallet {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 56px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.jumble-pallet.jumble-pallet-hover {
    box-shadow: 0 4px 16px -2px rgba(30, 58, 138, 0.3);
    transform: scale(1.02);
}

.jumble-pallet-shape {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    background: rgba(255, 255, 255, 0.18);
}

.jumble-pallet-shape svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.jumble-pallet-slot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 8px 12px;
}

/* ---- Answer Pool (right/bottom) ---- */

.jumble-pool {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 2px dashed #bfdbfe;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px;
}

.jumble-pool-label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 10px;
}

.jumble-pool-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Answer blocks ---- */

.jumble-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 44px;
    padding: 8px 16px;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.25s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.jumble-block:hover {
    border-color: #3b82f6;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.2);
}

.jumble-block.jumble-dragging {
    position: fixed;
    z-index: 10001;
    cursor: grabbing;
    box-shadow: 0 12px 28px rgba(30, 58, 138, 0.3);
    transform: scale(1.05);
    border-color: #3b82f6;
    pointer-events: none;
    transition: none;
}

.jumble-block.jumble-placed {
    width: 100%;
    height: 100%;
    border-color: #cbd5e1;
    background-color: transparent;
    box-shadow: none;
    cursor: grab;
}

.jumble-block.jumble-fading {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

.jumble-block.jumble-auto-snap {
    animation: jumble-auto-snap-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes jumble-auto-snap-in {
    0%   { transform: scale(0.7); opacity: 0.3; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- Footer ---- */

.jumble-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 14px 24px 18px;
    border-top: 1px solid #e2e8f0;
}

.jumble-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 28px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.jumble-confirm-btn:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.jumble-confirm-btn:active:not(:disabled) {
    transform: translateY(0);
}

.jumble-confirm-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* ---- Responsive: stack vertically on mobile ---- */

@media (max-width: 640px) {
    .jumble-modal {
        max-width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        height: 100dvh;
    }

    .jumble-overlay {
        padding: 0;
    }

    .jumble-header {
        padding: 14px 48px 10px 16px;
        gap: 10px;
    }

    .jumble-title {
        font-size: 1.125rem;
    }

    .jumble-desc {
        font-size: 0.75rem;
    }

    .jumble-timer {
        width: 52px;
        height: 52px;
    }

    .jumble-timer-text {
        font-size: 0.9375rem;
    }

    .jumble-workspace {
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px;
    }

    .jumble-pallets {
        flex: 0 0 auto;
        gap: 8px;
    }

    .jumble-pallet {
        min-height: 48px;
    }

    .jumble-pool {
        flex: 1;
        min-height: 0;
    }

    .jumble-footer {
        padding: 10px 16px 14px;
    }

}