/* Import Gaegu font */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Gaegu:wght@300;400;700&display=swap');

/* Noto Color Emoji for reaction UI */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

.popover {
    position: fixed;
    z-index: 30000;
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    min-width: 160px;
    isolation: isolate;
    contain: layout style paint;
}
/* CSS Custom Properties for Colors */
:root {
    /* Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-input: #303030;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;

    /* Accent Colors */
    --accent-primary: #ffffff;
    --accent-light: #dddddd;
    --accent-dark: #413f3f;

    /* Link Colors */
    --link-color: #87CEEB; /* Light blue */
    --link-visited: #87CEEB; /* Light blue for visited links */

    /* Border Colors */
    --border-primary: #ffffff;
    --border-secondary: #666666;
    --border-muted: #555555;

    /* Status Colors */
    --status-success: #ffffff;
    --status-error: #ffffff;

    /* Shadow Colors */
    --shadow-green: rgba(255, 255, 255, 0.3);
    --shadow-red: rgba(255, 255, 255, 0.4);

    /* Wordle Game Colors */
    --success: #538d4e;    /* Green for correct letters */
    --warning: #b59f3b;    /* Yellow for present letters */
    --danger: #3a3a3c;     /* Gray for absent letters */
    --text-on-accent: #ffffff; /* White text on colored backgrounds */
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    height: 100vh;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.neon-float-logo {
    display: none;
}

.topbar-logo {
    display: none;
    height: 30px;
}

.lobby-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border-bottom: none;
    color: var(--text-secondary);
    position: relative;
    z-index: 5;
}

.chat-topbar-hidden .lobby-topbar {
    display: none;
}

.neon-top-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.neon-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-success);
    flex-shrink: 0;
}

.brand-text {
    color: var(--accent-primary);
}

/* Hyperlink styles */
a:link,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--link-color);
    text-decoration: underline;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    overflow: hidden;
}

/* Desktop: Center the chat like a phone app */
@media (min-width: 1025px) {
    .container {
        width: 33.33%;
        margin: 0 auto;
        height: 100vh;
        box-shadow: 0 0 50px var(--shadow-green);
        border-left: 2px solid var(--border-primary);
        border-right: 2px solid var(--border-primary);
        overflow: hidden; /* Prevent container from scrolling */
    }
}

/* Header */
.header {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--border-primary);
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.invite-wrap { position: relative; }
.invite-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    display: none;
    flex-direction: column;
    z-index: 1002;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-radius: 8px; /* Match the soft design */
}
/* Dropdown is controlled via JS (click to open/close) */
.menu-item {
    padding: 0.5rem 0.8rem;
    background: var(--bg-input);
    color: var(--text-primary);
    border: none;
    text-align: left;
    cursor: pointer;
    border-radius: 10px; /* Rounded corners for softer look */
}
.menu-item:hover {
    background: var(--bg-tertiary);
    border-radius: 10px; /* Ensure hover state also maintains rounded corners */
}

.logo {
    width: 100px;  /* Smaller logo */
    height: auto;
}

.header-right { display: flex; align-items: center; gap: 0.75rem; }

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-outside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
}

.status-action { white-space: nowrap; }

.legal-links-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.legal-link-header {
    color: var(--link-color);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

.legal-link-header:hover {
    color: var(--link-color);
    text-decoration: underline;
}

.status-dot {
    width: 12px;
    height: 12px;
    background: #ff4444;
    border: 2px solid #ffffff;
}

.status-dot.connected {
    background: var(--status-success);
    box-shadow: 0 0 10px var(--shadow-green);
}

.status-dot.disconnected {
    background: var(--status-error);
    box-shadow: 0 0 10px var(--shadow-red);
}

/* Main content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.main-content::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-secondary);
    overflow: hidden; /* Prevent container from scrolling */
}

.chat-session-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 58px;
    padding: 0.65rem 0.85rem;
    background: var(--theme-header-bg);
    border-bottom: 2px solid var(--theme-header-border);
    z-index: 110;
}

.chat-session-header[hidden] {
    display: none;
}

.chat-session-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.chat-session-logo {
    display: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.chat-session-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chat-match-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-match-status {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-match-status[data-status="connected"] {
    color: var(--status-success);
}

.chat-match-status[data-status="reconnecting"] {
    color: #ffd166;
}

.chat-match-status[data-status="ended"],
.chat-match-status[data-status="disconnected"] {
    color: var(--status-error);
}

.chat-session-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.chat-safety-menu-wrap {
    display: none;
}

.chat-header-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--theme-control-radius);
}

.chat-end-btn {
    min-width: 74px;
    height: 38px;
    padding: 0.45rem 0.75rem;
    border-radius: var(--theme-control-radius);
}

/* Scrollable content area */
.scrollable-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.scrollable-content::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* For legal pages (about, privacy policy, etc.) where we want hidden scrollbars */
body:not(.chat-page) {
    height: 100vh;
    overflow: hidden; /* Prevent double scrollbars */
}

body:not(.chat-page) .scrollable-content {
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* IE 10+ */
    padding-bottom: 2rem; /* Adjust for legal pages */
}

body:not(.chat-page) .scrollable-content::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

/* For legal acknowledgment overlay during initial setup - hide scrollbars */
.legal-acknowledge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 20000;
    overflow-y: auto; /* Allow scrolling for overlay content */
}

.legal-acknowledge-content {
    background: var(--bg-secondary);
    margin: 2rem auto;
    padding: 2.5rem;
    border: 2px solid var(--border-primary);
    width: 90%;
    max-width: 600px;
    box-shadow: 0 0 30px var(--shadow-green);
    border-radius: 18px;
    max-height: 80vh; /* Limit height to viewport */
    overflow-y: auto; /* Enable scrolling within the content area */
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* IE 10+ */
}

.legal-acknowledge-content::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

.lobby-message, .waiting-message, .welcome-message, .connection-status, .connection-status-slot {
    flex-shrink: 0; /* Keep these at natural position (top) */
}

.lobby-message, .waiting-message, .welcome-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem;
    position: relative;
}

.lobby-header {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.lobby-header .logo-container,
.lobby-header-actions,
.lobby-icon-btn {
    pointer-events: auto;
}

.lobby-header .logo {
    width: 74px;
}

.lobby-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.moderator-ban-trigger {
    color: #ef4444;
}

.moderator-login-modal {
    align-items: center;
    justify-content: center;
}

.moderator-login-content {
    width: min(420px, calc(100vw - 28px));
    padding: 18px;
}

.moderator-ban-overlay {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    padding: 12px;
}

.moderator-ban-sheet {
    width: min(480px, 100%);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 16px 16px 10px 10px;
    padding: 16px;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.32);
}

@media (min-width: 700px) {
    .moderator-ban-overlay {
        align-items: center;
    }

    .moderator-ban-sheet {
        border-radius: 12px;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    }
}

.moderator-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.moderator-sheet-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.15rem;
}

.moderator-eyebrow {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.moderator-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.moderator-field label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
}

.moderator-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.moderator-textarea {
    min-height: 84px;
    resize: vertical;
}

.moderator-duration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.moderator-duration-btn {
    min-height: 44px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 700;
}

.moderator-duration-btn.active {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-tertiary));
}

.moderator-primary-btn,
.moderator-danger-btn {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 9px;
    font-weight: 800;
    cursor: pointer;
}

.moderator-primary-btn {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.moderator-danger-btn {
    background: #dc2626;
    color: #fff;
}

.moderator-primary-btn:disabled,
.moderator-danger-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.moderator-status {
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(72, 187, 120, 0.12);
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.35;
}

.moderator-status.is-error {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.user-report-target {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-weight: 700;
}

.moderator-dashboard-button {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--border-secondary);
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.moderator-dashboard-button[hidden] {
    display: none;
}

.moderator-reports-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    padding: 10px;
}

.moderator-reports-panel {
    width: min(920px, 100%);
    height: min(760px, calc(100dvh - 20px));
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 18px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.moderator-report-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.moderator-report-tab {
    flex: 1;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.moderator-report-tab strong {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 0.76rem;
}

.moderator-report-tab.active {
    border-color: var(--border-primary);
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.moderator-report-panels {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.moderator-report-panel {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

.moderator-report-panel[hidden] {
    display: none;
}

.moderator-report-panel::-webkit-scrollbar {
    display: none;
}

.moderator-report-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.moderator-report-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.moderator-report-section-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.moderator-report-section-head span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.moderator-reports-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    padding-right: 0;
}

.moderator-report-card {
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-tertiary) 88%, transparent);
    padding: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.moderator-bug-report-card .moderator-report-count {
    width: auto;
    min-width: 64px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.moderator-report-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.moderator-report-name {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.moderator-report-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.moderator-report-count {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    font-weight: 900;
}

.moderator-report-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.moderator-report-chips span {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.moderator-report-reasons {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
}

.moderator-report-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.moderator-report-ban-btn {
    width: auto;
    min-width: 150px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.82rem;
}

.moderator-report-description {
    margin-top: 7px;
    padding: 10px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.16);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.42;
}

.moderator-report-description-meta {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.moderator-empty {
    padding: 28px 18px;
    border: 1px dashed var(--border-secondary);
    border-radius: 8px;
    color: var(--text-muted);
    text-align: center;
}

.moderator-admin-dashboard-content {
    width: calc(100vw - 18px);
    height: calc(100dvh - 18px);
    max-width: 1280px;
}

.moderator-admin-dashboard-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.moderator-admin-dashboard-body::-webkit-scrollbar {
    display: none;
}

.moderator-dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.moderator-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    flex-shrink: 0;
}

.moderator-summary-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.moderator-summary-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 800;
}

.moderator-summary-card strong {
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.1;
}

.moderator-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: auto;
    flex: none;
    overflow: visible;
    padding-right: 0;
}

.moderator-panel {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: visible;
}

.moderator-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

.moderator-panel-subtitle {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 3px;
}

.moderator-panel-pending,
.moderator-panel-detail {
    min-width: 0;
}

.moderator-panel-accounts {
    min-width: 0;
}

.moderator-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    min-height: auto;
    padding-right: 0;
}

.moderator-account-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    min-height: auto;
    padding-right: 0;
}

.moderator-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.moderator-admin-account {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.moderator-admin-account:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, rgba(255,255,255,0.06));
    transform: translateY(-1px);
}

.moderator-admin-account.is-selected {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, rgba(255,255,255,0.025));
}

.moderator-admin-account-pill {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(72, 187, 120, 0.14);
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.moderator-panel-detail .moderator-panel-head {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(360px, 1.6fr);
    align-items: start;
}

.moderator-panel-detail .ar-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.moderator-admin-account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.moderator-admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.moderator-admin-stats span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.moderator-admin-logins {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.moderator-account-pending {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(72, 187, 120, 0.08);
    border: 1px solid rgba(72, 187, 120, 0.16);
}

.moderator-pending-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.moderator-pending-head strong {
    color: var(--accent-primary);
}

.moderator-pending-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.moderator-pending-inline + .moderator-pending-inline {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.moderator-pending-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.moderator-pending-identity span {
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.moderator-pending-inline .ar-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.moderator-pending-inline .ar-btn-sm {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 0.72rem;
}

.moderator-admin-login-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 7px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.moderator-admin-login-row span,
.moderator-admin-detail-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.moderator-account-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
    min-height: auto;
    padding-right: 0;
}

.moderator-detail-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.moderator-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moderator-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.moderator-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moderator-action-row {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    font-size: 0.76rem;
}

.moderator-action-main,
.moderator-action-reason {
    display: grid;
    grid-template-columns: 120px minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(130px, 0.8fr);
    gap: 9px;
    align-items: start;
}

.moderator-action-reason {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    color: var(--text-secondary);
}

.moderator-action-main span,
.moderator-action-reason span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.moderator-action-type {
    color: var(--text-primary);
    font-weight: 800;
}

.moderator-action-report-context {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
    color: var(--text-muted);
}

.moderator-action-report-context > div:first-child,
.moderator-action-report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.moderator-action-report-context > div:first-child,
.moderator-action-report-summary span {
    width: max-content;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.moderator-action-report-descriptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 7px;
}

.moderator-action-report-description {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.moderator-action-report-description span {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.moderator-action-report-description p {
    margin: 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.moderator-actions-toggle {
    flex-shrink: 0;
}

.moderator-admin-detail-row {
    display: grid;
    grid-template-columns: 84px 1fr 1fr 1.1fr;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.76rem;
}

.moderator-admin-detail-row.moderator-grant-row {
    grid-template-columns: 108px 1fr 1fr 1.2fr auto;
    align-items: center;
}

.moderator-inline-input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
}

@media (max-width: 560px) {
    .moderator-dashboard-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .moderator-panel {
        min-height: auto;
        padding: 16px;
    }

    .moderator-admin-item,
    .moderator-admin-account-head {
        align-items: stretch;
        flex-direction: column;
    }

    .moderator-panel-detail .moderator-panel-head,
    .moderator-panel-detail .ar-row {
        grid-template-columns: 1fr;
    }

    .moderator-admin-login-row {
        grid-template-columns: 1fr;
    }

    .moderator-pending-inline {
        grid-template-columns: 1fr;
    }

    .moderator-pending-inline .ar-item-actions {
        width: 100%;
    }

    .moderator-pending-inline .ar-item-actions .ar-btn {
        flex: 1;
    }

    .moderator-admin-detail-row {
        grid-template-columns: 1fr;
    }

    .moderator-detail-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .moderator-action-main,
    .moderator-action-reason,
    .moderator-action-report-description {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.recent-rooms {
    width: min(100%, 360px);
    margin: 1.25rem auto 0;
    text-align: left;
}

.recent-rooms-title {
    margin-bottom: 0.4rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.recent-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.recent-room-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-muted);
    border-radius: 6px;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.recent-room-item.is-resumable {
    cursor: pointer;
}

.recent-room-item.is-resumable:hover,
.recent-room-item.is-resumable:focus-visible {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    outline: none;
}

.recent-room-item.is-disabled {
    cursor: default;
    opacity: 0.72;
}

.recent-room-meta {
    min-width: 0;
}

.recent-room-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-room-details {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: nowrap;
}

.recent-room-time {
    color: var(--text-muted);
}

.recent-room-separator {
    color: var(--text-muted);
    opacity: 0.75;
}

.recent-room-status {
    font-weight: 700;
}

.recent-room-status-active,
.recent-room-status-resumable {
    color: var(--status-success);
}

.recent-room-status-reconnecting,
.recent-room-status-checking {
    color: var(--text-secondary);
}

.recent-room-status-ended,
.recent-room-status-unavailable {
    color: var(--text-muted);
}

.recent-room-arrow {
    color: var(--text-muted);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1;
}

.recent-room-item.is-resumable .recent-room-arrow {
    color: var(--text-secondary);
}

.recent-room-item.is-disabled .recent-room-arrow {
    visibility: hidden;
}

.friends-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: rgba(0, 0, 0, 0.42);
}

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

.friends-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2401;
    width: min(360px, 92vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-muted);
    box-shadow: -18px 0 36px rgba(0, 0, 0, 0.32);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.friends-drawer.open {
    transform: translateX(0);
}

.friends-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
}

.friends-drawer-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow-y: auto;
    min-height: 0;
}

.friend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-muted);
    border-radius: 8px;
}

.friend-meta {
    min-width: 0;
    text-align: left;
}

.friend-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-note {
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.friend-preview {
    margin-top: 0.12rem;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-row.has-unread .friend-name {
    font-weight: 800;
}

.friend-chat-btn {
    min-width: 68px;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.friend-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.friend-archive-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    color: var(--text-muted);
}

.friend-archive-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

#friendsDrawerButton.has-unread::after {
    content: attr(data-unread-count);
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: #d75252;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
}

#friendsDrawerButton.has-unread {
    position: relative;
}

.friends-drawer-empty {
    color: var(--text-muted);
    font-size: 0.86rem;
    text-align: center;
    padding: 1.4rem 0.5rem;
}

.lobby-theme-wrap {
    position: relative;
}

.lobby-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--theme-control-radius);
}

.default-mode-toggle {
    position: absolute;
    top: 58px;
    right: max(10px, env(safe-area-inset-right));
    z-index: 130;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: none;
    transition: background 0.16s ease, color 0.16s ease;
}

.default-mode-toggle[hidden] {
    display: none;
}

.default-mode-toggle i {
    font-size: 21px;
    line-height: 1;
}

.default-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.default-mode-toggle:active {
    transform: none;
}

.theme-picker {
    display: none;
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 1200;
    grid-template-columns: repeat(2, minmax(132px, 1fr));
    gap: 0.65rem;
    width: min(100%, 360px);
    min-width: 300px;
    padding: 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-muted);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    border-radius: var(--theme-control-radius);
}

.theme-picker.open {
    display: grid;
}

.theme-choice {
    border: 1px solid var(--border-muted);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: var(--theme-control-radius);
    font-weight: 700;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 142px;
    transition: border-color 0.16s, transform 0.16s, background 0.16s;
}

.theme-choice.active {
    background: var(--bg-input);
    color: var(--accent-primary);
    border-color: var(--border-primary);
}

.theme-choice:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
}

.theme-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 82px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-preview-top {
    display: block;
    height: 12px;
    border-radius: 999px;
}

.theme-preview-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.theme-preview-bubble {
    display: block;
    height: 16px;
    max-width: 78%;
    border-radius: 12px;
}

.theme-preview-bubble-own {
    align-self: flex-end;
    width: 68%;
}

.theme-preview-bubble-other {
    align-self: flex-start;
    width: 56%;
}

.theme-choice-name {
    padding: 9px 11px 0;
    font-size: 15px;
    line-height: 1.1;
}

.theme-choice-note {
    padding: 3px 11px 11px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

/* Connection status message (like "Matched with...") stays at top */
.connection-status-slot {
    display: none;
    padding: 0 1rem;
}

.connection-status-slot.visible {
    display: block;
}

.connection-status {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-weight: 500;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

/* Individual chat and system messages */
.message, .system-message {
    flex-shrink: 0;
}

.lobby-message h2, .waiting-message h2, .welcome-message h2 {
    font-family: 'Gaegu', cursive;
    color: var(--accent-primary);
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: 1.6rem; /* Bigger font as requested */
    text-transform: lowercase; /* Changed to lowercase as requested */
    letter-spacing: 1px;
}

.lobby-message p, .waiting-message p, .welcome-message p {
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.instruction {
    background: var(--bg-tertiary);
    padding: 1rem;
    margin-top: 1.5rem;
    border: 2px solid var(--border-primary);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.message {
    margin-bottom: 0.5rem; /* Changed from 1.5rem to 0.5rem as requested */
    display: flex;
    flex-direction: column;
}

.message.own {
    align-items: flex-end;
    justify-content: flex-end;
}

.message.other {
    align-items: flex-start;
    justify-content: flex-start;
}

/* Position reply button correctly for each message type */
.message.own .message-wrapper {
    flex-direction: row-reverse; /* For own messages, put reply button on the left */
}

.message.other .message-wrapper {
    flex-direction: row; /* For other messages, put reply button on the right */
}

.message-content {
    max-width: 80%;
    padding: 0.6rem 1rem; /* Updated as requested */
    word-wrap: break-word;
    position: relative;
    border: 2px solid;
    font-weight: 500;
    font-size: 1rem;
    font-family: Inter, system-ui, sans-serif;
    border-radius: var(--theme-message-radius);
    display: flex;
    flex-direction: column;
}

.message.own .message-content {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    border-color: var(--border-primary);
    box-shadow: 0 0 15px var(--shadow-green);
}

.message.other .message-content {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

.message.message-failed .message-content {
    border-color: var(--border-secondary);
    box-shadow: none;
    opacity: 0.75;
}

.message.message-sending .message-content {
    opacity: 0.85;
}

.message-send-status {
    align-self: flex-end;
    margin-top: 0.2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: pointer;
}

.message-send-status:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* Chat controls container */
.chat-controls {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    flex: 1; /* Take available space */
}

/* Default states - will be overridden by JavaScript */
#activeChatControls {
    display: flex;
    align-items: center;
    width: 100%;
}

#endedChatControls {
    display: none;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-items: center;
    width: 100%;
    height: auto;
}


/* Game area */
.game-area {
    background: var(--bg-tertiary);
    border-top: 2px solid var(--border-primary);
    border-bottom: 2px solid var(--border-primary);
    padding: 0.8rem 1rem;
    display: none;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
    border-radius: 12px; /* Rounded corners for softer look */
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Needed for absolute positioning of child elements */
}

.game-area.open {
    display: block;
    max-height: 350px; /* Standardized height for all games */
    opacity: 1;
    transform: translateY(0);
}

.game-area.closing {
    max-height: 0;
    opacity: 0;
    transform: translateY(8px);
}

/* Wordle-specific styles */
.wordle-grid-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible; /* Allow grid to handle clipping */
    padding-top: 10px;
    margin-bottom: 10px; /* Add some space for the keyboard */
    box-sizing: border-box;
    min-height: 280px; /* Ensure enough space for the grid and keyboard */
}

.wordle-grid-wrapper {
    width: 100%;
    max-width: 350px;
    max-height: 170px; /* Match the grid's max-height */
    margin: 0 auto;
    position: relative; /* Needed for pseudo-elements */
    overflow: hidden; /* Contain the grid and prevent overflow */
}

/* Fade effects at top and bottom of the grid wrapper for carousel effect */
.wordle-grid-wrapper::before,
.wordle-grid-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px; /* Height of the fade effect */
    z-index: 2;
    pointer-events: none; /* Allow clicks to pass through */
    width: 100%;
}

.wordle-grid-wrapper::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-tertiary), transparent);
}

.wordle-grid-wrapper::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg-tertiary), transparent);
}

.wordle-grid {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap between rows */
    width: 100%;
    height: auto;
    max-width: 350px; /* Increased to accommodate wider larger cells */
    min-height: 165px; /* Adjusted for larger cells - shows about 2-3 rows at a time */
    max-height: 170px; /* Allow scrolling for all rows */
    margin: 0 auto;
    overflow-y: auto; /* Allow vertical scrolling for previous rows */
    scroll-snap-type: y mandatory; /* Enable vertical snap scrolling */
    padding: 82.5px 0; /* Add padding to allow first and last rows to center properly */
    box-sizing: border-box; /* Include padding in element's total height */
}

/* Container for the grid with fade effects for carousel effect */
.wordle-grid-container {
    position: relative;
    overflow: hidden; /* Contain the fade effects */
    max-height: 170px; /* Match the grid's max-height to ensure proper clipping */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.wordle-grid::-webkit-scrollbar {
    width: 0px;
}

.wordle-grid::-webkit-scrollbar-track {
    background: transparent;
}

.wordle-grid::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
    opacity: 0.3; /* Make it subtle */
}

.wordle-grid::-webkit-scrollbar-thumb:hover {
    background: var(--bg-secondary);
    opacity: 0.5;
}

.wordle-grid:hover::-webkit-scrollbar-thumb {
    opacity: 0.5; /* Show scrollbar on hover */
}

/* Row container for snap scrolling */
.wordle-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns for 5-letter wordle */
    width: 100%;
    scroll-snap-align: center; /* Center-align rows for carousel effect */
}

/* Responsive square cells with 1:1 aspect ratio using aspect-ratio property */
.wordle-cell {
    position: relative;
    aspect-ratio: 1;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 0;
    background: var(--bg-input);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    overflow: hidden;
}

/* Content inside responsive square cells */
.wordle-cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* Future rows (beyond current row) will be faded */
/* We'll add these classes dynamically via JavaScript */
.wordle-cell.future {
    opacity: 0.4;
    filter: blur(0.5px);
}

.wordle-cell.current {
    opacity: 1.0;
    filter: none;
}

@media (max-width: 480px) {
    .wordle-cell {
        font-size: 1.2rem; /* Adjusted font size for mobile */
        box-shadow: inset 0 0 0 1px var(--border-secondary); /* Use inset box-shadow for border effect */
    }
}

/* Different states for the wordle cells */
.wordle-cell[data-state="empty"] {
    box-shadow: inset 0 0 0 1px var(--border-secondary);
}

.wordle-cell[data-state="filled"] {
    box-shadow: inset 0 0 0 2px var(--border-primary); /* Slightly thicker for filled state */
    background: var(--bg-tertiary);
}

.wordle-cell[data-state="correct"] {
    background-color: var(--success);
    color: var(--text-on-accent);
    box-shadow: inset 0 0 0 1px var(--success);
}

.wordle-cell[data-state="present"] {
    background-color: var(--warning);
    color: var(--text-on-accent);
    box-shadow: inset 0 0 0 1px var(--warning);
}

.wordle-cell[data-state="absent"] {
    background-color: var(--danger);
    color: var(--text-on-accent);
    box-shadow: inset 0 0 0 1px var(--danger);
}

.wordle-cell[data-state="reveal"] {
    animation: wordle-flip 0.6s ease forwards;
}

.wordle-cell.revealing {
    animation: wordle-flip 0.6s ease forwards;
    transform-style: preserve-3d;
}

@keyframes wordle-flip {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    50.1% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Make Wordle keyboard span the full game area width when game is active */
.game-area.wordle-active .wordle-keyboard-container {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 5px;
    max-width: 100%;
    margin-top: 10px;
    gap: 6px;
    background: var(--bg-tertiary); 
}


/* Wordle keyboard styles */
.wordle-key {
    flex: 1;
    min-width: 30px;
    padding: 12px 4px;
    margin: 2px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
    touch-action: manipulation;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.wordle-key:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    transform: translateY(-1px);
}

.wordle-key:active:not(:disabled) {
    transform: translateY(0);
}

.wordle-key.wide {
    flex: 1.5; /* Wider keys like Enter and Backspace */
    min-width: 45px;
}

.wordle-key.enter {
    background: var(--success);
    color: var(--text-on-accent);
    border-color: var(--success);
}

.wordle-key.backspace {
    background: var(--danger);
    color: var(--text-on-accent);
    border-color: var(--danger);
}

.wordle-key.correct {
    background: var(--success);
    color: var(--text-on-accent);
    border-color: var(--success);
}

.wordle-key.present {
    background: var(--warning);
    color: var(--text-on-accent);
    border-color: var(--warning);
}

.wordle-key.absent {
    background: var(--danger);
    color: var(--text-on-accent);
    border-color: var(--danger);
}

.wordle-key-special {
    flex: 1.8; /* Wider for special keys */
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}


.wordle-keyboard-row {
    display: flex;
    justify-content: flex-start; /* Changed from center to allow keys to fill space */
    gap: 0; /* Reduce gap slightly to allow more space for keys */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.game-area.wordle-active .wordle-keyboard-container {
    width: 100%;
    margin-left: 0;                             
    padding-top: 5px;
    margin-top: 10px;                                           
}  

.wordle-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-height: 280px; /* Ensure enough space for the grid and keyboard */
    overflow: visible; /* Allow content to be visible */
}

/* Standard game board container */
.game-board-container {
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto;
    display: grid;
    place-items: center; /* Center contents */
}

/* Standard game board styling */
.game-board-standard {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 10px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 2px solid var(--border-secondary);
    box-sizing: border-box;
}

.game-header {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.game-title {
    color: var(--accent-primary);
    font-weight: 700;
}

.game-title-symbol {
    margin: 0 0.08rem;
    color: var(--accent-primary);
    font-size: 1rem;
    line-height: 1;
    vertical-align: -0.02em;
}

.game-title-symbol.ri-checkbox-blank-circle-line {
    font-size: 0.86rem;
}

.game-status {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

.game-status:empty {
    display: none;
}

.game-area.game-result-win,
.game-area.game-result-loss,
.game-area.game-result-draw {
    animation: gameResultPulse 360ms ease-out;
}

.game-area.game-result-win {
    border-color: #22c55e;
    box-shadow: 0 -12px 18px -12px rgba(34, 197, 94, 0.34);
}

.game-area.game-result-loss {
    border-color: #ef4444;
    box-shadow: 0 -12px 18px -12px rgba(239, 68, 68, 0.32);
}

.game-area.game-result-draw {
    border-color: #f59e0b;
    box-shadow: 0 -12px 18px -12px rgba(245, 158, 11, 0.3);
}

.game-area.game-result-win .game-title {
    color: #86efac;
}

.game-area.game-result-loss .game-title {
    color: #fca5a5;
}

.game-area.game-result-draw .game-title {
    color: #fcd34d;
}

@keyframes gameResultPulse {
    0% {
        transform: translateY(0) scale(1);
    }
    45% {
        transform: translateY(0) scale(1.012);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

body[data-theme="default"][data-default-mode="light"] .game-area.game-result-win {
    border-color: #16a34a;
    box-shadow: 0 -12px 18px -12px rgba(22, 163, 74, 0.32);
}

body[data-theme="default"][data-default-mode="light"] .game-area.game-result-loss {
    border-color: #dc2626;
    box-shadow: 0 -12px 18px -12px rgba(220, 38, 38, 0.3);
}

body[data-theme="default"][data-default-mode="light"] .game-area.game-result-draw {
    border-color: #d97706;
    box-shadow: 0 -12px 18px -12px rgba(217, 119, 6, 0.28);
}

body[data-theme="default"][data-default-mode="light"] .game-area.game-result-win .game-title {
    color: #15803d;
}

body[data-theme="default"][data-default-mode="light"] .game-area.game-result-loss .game-title {
    color: #b91c1c;
}

body[data-theme="default"][data-default-mode="light"] .game-area.game-result-draw .game-title {
    color: #b45309;
}

.game-rematch-btn {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 8;
    min-width: 132px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 750;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
    transform: translateX(-50%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.game-rematch-btn i {
    font-size: 1rem;
    line-height: 1;
}

.game-rematch-btn:hover,
.game-rematch-btn:focus-visible,
.game-rematch-btn:active {
    transform: translateX(-50%);
}

/* Tic-Tac-Toe board styling */
.tic-tac-toe-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 10px;
    box-sizing: border-box;
    align-self: center;
    justify-self: center;
    /* Make the board square by limiting both dimensions equally */
    max-width: 230px; /* Slightly less than container height to account for padding */
    max-height: 230px; /* Slightly less than container height to account for padding */
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--bg-input);
    border: 2px solid var(--border-secondary);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 12px; /* Rounded corners for softer look */
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1; /* Ensure square cells */
}

.cell.win {
    background: var(--accent-light);
    color: #142814;
    border-color: var(--border-primary);
    box-shadow: 0 0 18px var(--shadow-green);
}

.cell.filled {
    cursor: default;
}

.cell:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/* Game icons */
.game-icon {
    font-size: 2.5rem; /* Responsive icon size */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.game-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Connect Four styles - using standardized sizing */
.connect4-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 8px;
    background: #1e5e1e; /* Green board background */
    border-radius: 10px;
    border: 3px solid #8B4513; /* Brown border */
    box-sizing: border-box;
    max-width: 290px;  /* Control width as requested */
    max-height: 250px; /* Maximize height as requested */
}

.connect4-row {
    display: contents; /* Use grid layout for children */
}

.connect4-cell {
    border-radius: 50%;
    background: #F5F5DC; /* Light beige, looks like empty slots */
    border: 2px solid #8B4513; /* Brown border */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1; /* Ensure square cells */
}

/* Poison Candy board styling */
.poison-candy-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns for 5x5 grid */
    grid-template-rows: repeat(5, 1fr); /* 5 rows for 5x5 grid */
    gap: 8px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 10px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 2px solid var(--border-secondary);
    box-sizing: border-box;
    align-self: center;
    justify-self: center;
    /* Make the board square by limiting both dimensions equally */
    max-width: 230px; /* Slightly less than container height to account for padding */
    max-height: 230px; /* Slightly less than container height to account for padding */
}

.candy-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 2px solid var(--border-secondary);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 12px; /* Rounded corners for softer look */
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1; /* Ensure square cells */
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
}

.candy-cell:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

.candy-cell.picked {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: default;
}

.candy-icon {
    width: 80%;
    height: 80%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.candy-cell.candy-pending .candy-icon {
    animation: candy-pending-pop 0.38s ease both;
}

.candy-cell.candy-suspense .candy-icon {
    animation: candy-suspense-wiggle 1.5s linear both;
}

.candy-cell.candy-suspense::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 2px solid var(--accent-primary);
    opacity: 0;
    pointer-events: none;
    animation: candy-suspense-ring 1.5s ease-out both;
}

.poison-candy-highlight {
    outline: 3px solid #ff0000; /* Red outline to highlight poison candy */
    outline-offset: 2px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    animation: candy-poison-reveal 0.44s ease-out both;
}

/* When a candy is both picked and poison, ensure the highlight remains visible */
.candy-cell.picked.poison-candy-highlight {
    outline: 3px solid #ff0000 !important; /* Red outline stays red */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7) !important; /* Keep red glow */
    filter: grayscale(50%)!important; 
}

@keyframes candy-pending-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.16) rotate(-4deg); }
    100% { transform: scale(1.03); }
}

@keyframes candy-suspense-wiggle {
    0% { transform: scale(1) rotate(0deg); filter: none; }
    12% { transform: scale(1.1) rotate(-5deg); }
    24% { transform: scale(1.06) rotate(5deg); }
    36% { transform: scale(1.12) rotate(-4deg); }
    48% { transform: scale(1.07) rotate(4deg); filter: drop-shadow(0 0 8px var(--accent-primary)); }
    60% { transform: scale(1.13) rotate(-3deg); }
    72% { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 12px var(--accent-primary)); }
    84% { transform: scale(1.12) rotate(-2deg); }
    100% { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 0 14px var(--accent-primary)); }
}

@keyframes candy-suspense-ring {
    0% { transform: scale(0.78); opacity: 0; }
    22% { opacity: 0.75; }
    100% { transform: scale(1.14); opacity: 0; }
}

@keyframes candy-poison-reveal {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .candy-cell.candy-pending .candy-icon,
    .candy-cell.candy-suspense .candy-icon,
    .candy-cell.candy-suspense::after,
    .poison-candy-highlight {
        animation: none;
    }
}

.connect4-cell:hover {
    background: #e6e6c3; /* Slightly darker on hover */
    transform: scale(1.05);
}

/* Game invitation notification bubble */
.game-invite-notification {
    position: absolute;
    background: #2e2e2e; /* Green color */
    color: white;
    padding: 8px 12px;
    border-radius: 20px; /* Bubble shape */
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    animation: pulse 1.5s infinite;
    top: -40px; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
}

/* Bubble pointer/triangle */
.game-invite-notification::after {
    content: '';
    position: absolute;
    top: 100%; /* Position below the bubble */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #2e2e2e transparent transparent transparent; /* Pointing down */
}

/* Pulse animation */
@keyframes pulse {
    0% { transform: scale(1) translateX(-50%); }
    50% { transform: scale(1.05) translateX(-50%); }
    100% { transform: scale(1) translateX(-50%); }
}

/* Mobile-specific fixes for game notification */
@media (max-width: 480px) {
    .game-invite-notification {
        font-size: 0.8rem;
        padding: 6px 10px;
        max-width: 120px; /* Prevent from being too wide on small screens */
        white-space: normal; /* Allow text wrapping if needed */
    }

    .game-invite-notification::after {
        border-width: 5px; /* Slightly smaller arrow for mobile */
    }
}

.connect4-piece {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    position: absolute;
    transition: all 0.3s ease;
}

/* Player 1 - red piece */
.connect4-piece.x {
    background: #FF4136; /* Red color for player 1 */
    border: 2px solid #cc342b; /* Darker red border */
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.3), 0 0 5px var(--shadow-green);
}

/* Player 2 - yellow piece */
.connect4-piece.o {
    background: #FFD700; /* Yellow for player 2 */
    border: 2px solid #DAA520; /* Golden border */
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.3), 0 0 5px var(--shadow-green);
}

/* Winning pieces - highlighted */
.connect4-cell.winning-piece .connect4-piece {
    animation: pulseWin 0.8s infinite alternate;
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.3), 0 0 8px #ff8c00, 0 0 15px #ff4500;
}

@keyframes pulseWin {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* System message (centered inline in chat) */
.system-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
}

.typing-indicator .typing-dots {
    display: flex;
    align-items: center;
}

.typing-indicator .typing-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    margin: 0 2px;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}
.system-message .actions { margin-top: 0.4rem; display: inline-flex; gap: 0.4rem; }

.btn-inline {
    background: var(--bg-input);
    border: 2px solid var(--border-primary);
    color: var(--accent-primary);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s ease;
    border-radius: 10px; /* Rounded corners for softer look */
}

.btn-inline.danger {
    border-color: var(--status-error);
    color: var(--status-error);
}

.btn-inline:hover {
    background: var(--accent-light);
    color: var(--text-primary);
    box-shadow: 0 0 15px var(--shadow-green);
    transform: translateY(-1px);
}

.btn-inline:active {
    transform: translateY(0);
}

.input-wrapper.bottom-bar {
    display: flex;
    align-items: center; /* Align items vertically centered */
    background: var(--bg-tertiary); /* Restore background to make it visible */
    border-top: 2px solid var(--border-primary); /* Restore border to define it */
    flex-shrink: 0;
    z-index: 100;
    position: relative;
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
}

.message-input-container {
    position: relative;
    flex: 1; /* Take up all available space */
    height: 100%; /* Fill the wrapper */
    width: 100%; /* Fill the wrapper */
    min-width: 0; /* Allow flex item to shrink below content size if needed */
    display: flex; /* Use flex to position game button inside */
    align-items: center; /* Center buttons vertically */
}

/* Styling for the end chat button */
#endChatButton {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
}

#endChatButton .end-chat-text {
    white-space: nowrap;
}

/* Confirmation state styling */
#endChatButton.confirmation {
    background: var(--border-secondary) !important; /* Red background for confirmation */
    border-color: var(--status-error) !important;
    animation: pulse 0.5s ease-in-out;
}

/* Hover effect for confirmation state - maintain same hover behavior as base button */
#endChatButton.confirmation:hover {
    background: var(--border-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--status-error) !important; /* Keep the red border to maintain visual indication */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Locked state styling */
#endChatButton.locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#endChatButton.cooldown {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Lock button styling */
#lockChatButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
    padding: 0;
}

#lockChatButton .lock-icon,
#lockChatButton .unlock-icon {
    font-size: 1.2rem;
    pointer-events: none; /* Ensure clicks go through to button */
}

#lockChatButton .lock-icon {
    display: inline-block;
}

#lockChatButton .unlock-icon {
    display: none;
}

#lockChatButton.hidden,
#inviteFromHeader.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    pointer-events: none;
}

#lockChatButton.visible,
#inviteFromHeader.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

#lockChatButton {
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
}

#inviteFromHeader {
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
}

#endChatButton.unlocked {
    pointer-events: auto;
}

#endChatButton.locked {
    pointer-events: none;
}

.swipe-prompt {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.7;
    pointer-events: none;
}

.end-chat-text {
    transition: margin-left 0.3s ease;
}

/* Swipe to unlock effect */
.end-chat-wrapper:active #endChatButton:not(.unlocked) {
    cursor: grab;
}

.swipe-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    z-index: 10;
    pointer-events: none;
}

#messageInput {
    flex: 1; /* Take remaining space */
    height: 100%; /* Fill the container */
    padding: 0.6rem 50px 0.6rem 0.9rem; /* Adjust right padding to account for game button only */
    border: 0px solid var(--border-secondary); /* Border for definition */
    background: var(--bg-input); /* Use input background */
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    transition: all 0.3s ease;
    border-radius: 10px; /* Keep the rounded corners */
    box-sizing: border-box; /* Include padding in width/height calculation */
    min-width: 0; /* Allow to shrink if needed */
    z-index: 5; /* Lower z-index so buttons appear above text */
}

#messageInput:focus {
    border-color: var(--border-primary);
    box-shadow: 0 0 15px var(--shadow-green);
    outline: none;
}

/* Admin Panel Styles */
.admin-panel-content {
    max-width: 800px; /* Increased width for PC */
    width: 90%;
    min-width: 600px; /* Increased minimum width */
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 30px var(--shadow-green);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.admin-panel-header {
    background: var(--bg-tertiary);
    padding: 0.8rem 1rem; /* More compact */
    border-bottom: 2px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-panel-header h2 {
    margin: 0;
    color: var(--accent-primary);
    font-size: 1.2rem; /* Slightly smaller */
}

.admin-panel-body {
    padding: 1rem; /* More compact */
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* Add consistent spacing between sections */
    /* Hide scrollbars for better aesthetics */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.admin-panel-body::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

.admin-section {
    margin: 0 0 1.2rem 0; /* Consistent spacing */
    padding: 1rem; /* More comfortable padding */
    background: var(--bg-tertiary);
    border: 2px solid var(--border-secondary);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.admin-section:last-child {
    margin-bottom: 0;
}

.admin-section-title {
    margin: 0 0 0.8rem 0; /* Consistent spacing */
    color: var(--accent-primary);
    font-size: 1rem; /* Slightly larger for better readability */
    font-weight: 600;
    border-bottom: 1px solid var(--border-secondary);
    padding-bottom: 0.4rem;
}

.admin-input {
    width: 100%;
    padding: 0.7rem 0.9rem; /* More comfortable padding */
    margin-bottom: 0.7rem; /* Consistent spacing */
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
    border-radius: 8px;
    font-size: 0.9rem; /* Slightly larger for better readability */
    transition: all 0.3s ease;
}

.admin-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2); /* Better focus style */
}

.admin-action-btn {
    width: 100%;
    padding: 0.6rem 0.8rem; /* More comfortable padding */
    font-size: 0.9rem; /* Slightly larger for readability */
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid var(--border-secondary);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.admin-action-btn:hover {
    background: var(--bg-input);
    border-color: var(--accent-primary);
}

.current-partner-info {
    background: var(--bg-input);
    padding: 0.7rem;
    border-radius: 8px;
    margin-bottom: 0.8rem;
}

.current-partner-info p {
    margin: 0.4rem 0; /* Consistent spacing */
    font-size: 0.9rem; /* Slightly larger for readability */
    word-break: break-all; /* Handle long persistent IDs */
    padding: 0.1rem 0;
}

/* Banned Users Styles */
.banned-users-container {
    background: var(--bg-input);
    border: 2px solid var(--border-secondary);
    border-radius: 8px;
    padding: 0.5rem; /* More compact */
    flex: 1; /* Allow this section to grow */
    min-height: 120px; /* Minimum height for usability */
    max-height: 250px; /* Increased max-height for better visibility */
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column;
    /* Hide scrollbars for better aesthetics */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.banned-users-container::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

.banned-users-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1.2fr 0.8fr;
    padding: 0.6rem 0.8rem; /* More consistent with items */
    background: var(--bg-tertiary);
    font-weight: bold;
    border-bottom: 2px solid var(--border-secondary);
    margin-bottom: 0.3rem;
    font-size: 0.85rem; /* Slightly larger for readability */
}

.banned-user-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1.2fr 0.8fr;
    padding: 0.6rem 0.8rem; /* More comfortable padding */
    border-bottom: 1px solid var(--border-muted);
    align-items: center;
    font-size: 0.85rem; /* Slightly larger for readability */
    transition: background-color 0.2s ease;
}

.banned-user-item:last-child {
    border-bottom: none;
}

.banned-user-item:hover {
    background-color: var(--bg-tertiary);
}

.banned-user-item .username {
    font-weight: 600;
    word-break: break-word; /* Handle long usernames */
}

.banned-user-item .persistent-id {
    font-family: monospace;
    font-size: 0.8rem; /* Slightly larger for readability */
    color: var(--text-secondary);
    word-break: break-all; /* Handle very long persistent IDs */
}

.banned-user-item .reason {
    font-size: 0.8rem; /* Slightly larger for readability */
    color: var(--text-muted);
    word-break: break-word; /* Handle long reasons */
}

.banned-user-item .banned-actions {
    text-align: center;
}

.banned-user-item .unban-btn {
    padding: 0.3rem 0.6rem; /* More compact button */
    font-size: 0.8rem; /* Slightly smaller text */
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.no-banned {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

.loading-banned {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Admin Verification Modal Styles (Bank-Style) */
.verification-modal {
    max-width: 400px;
    width: 90%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 30px var(--shadow-green);
}

.verification-header {
    text-align: center;
    padding: 1.2rem 1rem 0.8rem;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-primary);
}

.verification-header h2 {
    margin: 0 0 0.5rem 0;
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.verification-instruction {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.verification-body {
    padding: 1.2rem;
}

.code-input-container {
    margin-bottom: 1.2rem;
}

.code-inputs {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.code-input {
    width: 40px;
    height: 45px;
    padding: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.code-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px var(--shadow-green);
}

.code-input-helper {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
}

.verification-actions {
    display: flex;
    gap: 0.6rem;
}

.verification-submit {
    flex: 2;
    padding: 0.7rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

.verification-cancel {
    flex: 1;
    padding: 0.7rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30000;
}

.modal-content {
    position: relative;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .admin-panel-content {
        min-width: 90%;
        width: 95%;
    }

    .code-input {
        width: 40px;
        height: 45px;
        font-size: 1.2rem;
    }

    .banned-users-header,
    .banned-user-item {
        display: block;
        text-align: center;
    }

    .banned-user-item .username::before {
        content: "Username: ";
        font-weight: bold;
    }

    .banned-user-item .persistent-id::before {
        content: "Persistent ID: ";
        font-weight: bold;
    }

    .banned-user-item .reason::before {
        content: "Reason: ";
        font-weight: bold;
    }
}

#messageInput::placeholder {
    color: var(--text-muted);
}

/* Old send button (now replaced by text version)
.send-btn {
    background: transparent;
    color: var(--accent-primary);
    border: none;
    width: auto;
    height: 100%; Match input height
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    padding: 8px; Revert to original padding
    margin: 0;
    border-radius: 12px; Revert to original border radius
    position: absolute; Position absolutely in container
    right: 0px; Adjust position on the far right
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; Higher z-index than game button
    align-self: stretch; Make button stretch to match input height
}
*/

.send-btn-text {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    border: 0px solid var(--border-primary);
    width: auto;
    height: 100%; /* Match input height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    padding: 0.6rem 0.6rem; /* Adjust padding for text */
    border-radius: 10px; /* Rounded corners */
    font-family: 'Gaegu', cursive; /* Use Gaegu font as requested */
    font-size: 1rem;
    min-width: 60px; /* Minimum width for the send button */
    box-sizing: border-box; /* Include padding in width calculation */
}

.send-btn-text .fa-paper-plane {
    font-size: 1.2rem; /* Adjust icon size */
}

/* Mobile-specific styles for send button inside input */
@media (max-width: 480px) {
    .message-input-container {
        position: relative; /* Needed for absolute positioning of send button */
        padding-right: 46px;
        box-sizing: border-box;
        min-width: 0;
    }

    .input-wrapper.ended-chat-visible .message-input-container {
        padding-right: 0;
    }

    .send-btn-text {
        position: absolute;
        right: 0; /* Position at the right edge of the input */
        top: 50%;
        transform: translateY(-50%);
        min-width: auto;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        color: var(--accent-primary);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 10; /* Ensure button is above text */
    }

    .send-btn-text.show {
        opacity: 1;
        visibility: visible;
    }
}

.invite-wrap {
    position: absolute;
    right: 10px; /* Position for game buttons inside input */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9; /* Lower z-index than input text */
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-btn {
    background: transparent;
    color: var(--accent-primary);
    border: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 8px;
    margin: 0;
    border-radius: 12px; /* Revert to original border radius */
    position: relative; /* Needed for absolutely positioned icons */
}

/* Base styles for game icons (send button no longer uses icons) */
.icon-btn .ri-gamepad-line,
.icon-btn .ri-gamepad-fill {
    font-size: 24px; /* Size for game button */
    pointer-events: none; /* Ensure clicks go through to the button */
    color: var(--accent-primary);
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    transition: all 0.2s ease;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    margin: 0;
}

/* Ensure only one game icon is visible at a time */
.icon-btn .ri-gamepad-line {
    opacity: 1;
}

.icon-btn .ri-gamepad-fill {
    opacity: 0;
}


/* Hover state - show fill version */
.icon-btn:hover .ri-gamepad-line {
    opacity: 0.2; /* Keep the line version slightly visible */
}

.icon-btn:hover .ri-gamepad-fill {
    opacity: 1;
    color: var(--text-primary);
}

/* Active state - keep fill version */
.icon-btn:active .ri-gamepad-fill,
.send-btn:active .ri-send-plane-fill {
    transform: translate(-50%, -50%) scale(0.95); /* Slight scale down to show active state */
}

.icon-btn:hover {
    background: var(--bg-input);
    box-shadow: 0 0 15px var(--shadow-green);
}

#lockChatButton:hover,
#inviteFromHeader:hover {
    background: transparent;
    box-shadow: none;
}

.icon-btn:hover i {
    color: var(--text-primary);
}

.icon-btn:active {
    transform: scale(0.95);
}

.send-btn-text:hover {
    background: var(--accent-dark);
    color: var(--text-primary);
    box-shadow: 0 0 0px var(--shadow-green);
    border-color: var(--border-primary);
}

.send-btn-text:active {
    transform: scale(0.95);
}

.send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* Removed footer controls for minimal layout */

/* Footer */
.footer {
    background: var(--bg-tertiary);
    padding: 1rem 1.5rem;
    border-top: 2px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.change-name-btn {
    background: var(--bg-input);
    border: 2px solid var(--border-primary);
    color: var(--accent-primary);
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.change-name-btn:hover {
    background: var(--accent-light);
    color: var(--text-primary);
    box-shadow: 0 0 15px var(--shadow-green);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    isolation: isolate;
    contain: layout style paint size;
}

.modal-content {
    background: var(--bg-secondary);
    margin: 15% auto;
    padding: 2.5rem;
    border: 2px solid var(--border-primary);
    width: 90%;
    max-width: 450px;
    box-shadow: 0 0 30px var(--shadow-green);
    border-radius: 18px; /* More rounded for softer look */
    isolation: isolate;
    contain: layout style paint;
}

/* Smaller modal variant for quick menus */
#gameModal .modal-content {
    max-width: 360px;
    padding: 1.5rem;
}

.modal-content h3 {
    margin-bottom: 1.5rem;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#nameInput {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid var(--border-secondary);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 2rem;
    outline: none;
    transition: all 0.3s ease;
    border-radius: 12px; /* Rounded corners for softer look */
}

#nameInput:focus {
    border-color: var(--border-primary);
    box-shadow: 0 0 15px var(--shadow-green);
}

#nameInput::placeholder {
    color: var(--text-muted);
}

#nameError {
    color: #ff6b6b; /* Red color for error */
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: none; /* Hidden by default */
    text-align: left;
    padding-left: 0.5rem;
}

.modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-primary, .btn-secondary {
    padding: 0.8rem 1.5rem;
    border: 2px solid;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-radius: 10px; /* Rounded corners for softer look */
}

.lobby-btn {
    margin-top: 1rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 10px; /* More rounded for softer look */
}

/* Loading overlay for match finding */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20001; /* Higher than modals (z-index: 20000) */
    backdrop-filter: blur(0); /* Ensure no transparency effects */
    isolation: isolate;
    contain: layout style paint size;
}

.loading-overlay .loading-content {
    position: relative;
    z-index: 20002; /* Content above the background */
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
    isolation: isolate;
    contain: layout style paint;
}


.loading-content {
    text-align: center;
    max-width: 500px;
    width: 90%;
    padding: 2rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 0 30px var(--shadow-green);
}

.loading-title {
    font-family: 'Gaegu', cursive;
    color: var(--accent-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.loading-message {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

/* Specific loader container for centering */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--bg-input);
    border-top: 5px solid var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-ad-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent any overflow from ad content */
    position: relative; /* Ensure proper positioning context */
}

.loading-ad-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.contact-section {
    text-align: center;
    padding: 1rem;
    width: 100%;
}

.contact-section h3 {
    margin-top: 0;
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.contact-section p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

.contact-section a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-section a:hover {
    text-decoration: underline;
}

.cancel-loading-btn {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
}

/* Name setup overlay */
.name-setup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.name-setup-content {
    text-align: center;
    max-width: 600px;
    width: 90%;
    padding: 2rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 0 30px var(--shadow-green);
}

.name-setup-header img {
    width: 150px;
    margin-bottom: 1rem;
}

.name-setup-header h1 {
    font-family: 'Gaegu', cursive;
    color: var(--accent-primary);
    font-size: 2rem;
    margin: 0.5rem 0;
}

.name-setup-header p {
    color: var(--text-secondary);
    margin: 0.5rem 0 1.5rem;
}

.name-input-container {
    margin: 1.5rem 0;
}

.name-input {
    padding: 0.8rem 1rem;
    width: 100%;
    max-width: 300px;
    background: var(--bg-input);
    border: 2px solid var(--border-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    border-radius: 8px;
    outline: none;
}

.name-input:focus {
    border-color: var(--border-primary);
    box-shadow: 0 0 15px var(--shadow-green);
}

.name-setup-info {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-secondary);
    text-align: left;
    color: var(--text-secondary);
}

.name-setup-info h3 {
    color: var(--accent-primary);
    margin-top: 1.5rem;
}

.name-setup-info h3:first-child {
    margin-top: 0;
}

.name-setup-info a {
    color: var(--accent-primary);
    text-decoration: none;
}

.name-setup-info a:hover {
    text-decoration: underline;
}

.info-section {
    max-height: 300px;
    overflow-y: auto;
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
}

.scrolling-content {
    max-height: 300px;
    overflow-y: auto;
}

.info-page {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-muted);
}

.info-page:last-child {
    border-bottom: none;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.feature-card {
    background: var(--bg-input);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
}

.feature-card h3 {
    color: var(--accent-primary);
    margin: 0 0 0.5rem 0;
}

.scroll-indicator {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    margin: 1rem 0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.name-input-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-secondary);
}

/* Legal Acknowledge Screen Styles */
.legal-acknowledge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.legal-acknowledge-content {
    text-align: center;
    max-width: 800px;
    width: 90%;
    padding: 2rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 0 30px var(--shadow-green);
}


.legal-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
}

.legal-acknowledge-content {
    text-align: center;
    max-width: 800px;
    width: 90%;
    padding: 2rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 0 30px var(--shadow-green);
    /* Let the page scroll naturally */
}

.legal-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.legal-section h2 {
    color: var(--accent-primary);
    margin-top: 0;
    margin-bottom: 1rem;
}

.legal-navigation {
    margin-top: 1.5rem;
}

.legal-links {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.legal-page-link {
    color: var(--link-color);
    text-decoration: none;
}

.legal-page-link:hover {
    color: var(--link-color);
    text-decoration: underline;
}

.acknowledge-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-secondary);
    user-select: none;
}

.checkbox-container input {
    display: none;
}

.checkmark {
    margin-right: 10px;
    height: 20px;
    width: 20px;
    background: var(--bg-input);
    border: 2px solid var(--border-secondary);
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative; /* Needed for absolute positioning of the checkmark */
}

.checkbox-container input:checked ~ .checkmark {
    background: var(--accent-primary);
    border-color: var(--border-primary);
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
    border-color: var(--text-primary); /* Use primary text color for better visibility */
}

.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 50%; /* Center horizontally */
    top: 42%;   /* Center vertically but slightly higher */
    width: 6px;
    height: 12px;
    border: solid white; /* White checkmark */
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg); /* Center the element and rotate */
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Ensure checkbox maintains square shape on mobile */
@media (max-width: 480px) {
    .checkmark {
        flex-shrink: 0; /* Prevent shrinking */
        height: 20px !important;
        width: 20px !important;
        min-height: 20px;
        min-width: 20px;
    }
}

.btn-primary {
    background: var(--bg-input);
    color: var(--accent-primary);
    border-color: var(--border-primary);
}

.btn-primary:hover {
    background: var(--accent-light);
    color: var(--text-primary);
    box-shadow: 0 0 15px var(--shadow-green);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

.btn-secondary:hover {
    background: var(--border-secondary);
    color: var(--text-primary);
}

.btn-secondary.blocked {
    background: var(--bg-input);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tablet: Slightly wider than mobile */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        border-left: 2px solid var(--border-primary);
        border-right: 2px solid var(--border-primary);
    }

    .input-wrapper.bottom-bar {
        width: 100%;
    }
}

/* Mobile-first responsive design */
@media (max-width: 480px) {
    .input-wrapper.bottom-bar {
        width: 100%; /* Full width on mobile */
        max-width: 100%; /* Full width on mobile */
        padding: calc(0.8rem + env(safe-area-inset-bottom, 0)); /* Add safe area padding */
    }

    .header {
        padding: 1rem;
    }

    .logo {
        font-size: 1.3rem;
    }

    .status-indicator {
        font-size: 0.7rem;
    }

    .status-outside {
        right: 20px;
        top: 10px;
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }

    .messages {
        padding: 0.8rem;
    }
    
    .welcome-message {
        padding: 1.5rem 0.8rem;
    }
    
    .welcome-message h2 {
        font-size: 1.2rem;
    }
    
    .welcome-message p {
        font-size: 0.9rem;
    }
    
    .instruction {
        padding: 0.8rem;
        font-size: 0.8rem;
    }
    
    .message-content {
        max-width: 90%;
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
    }
    
    .input-wrapper.bottom-bar {
        padding: 0.8rem;
    }
    
    .input-wrapper {
        gap: 0.6rem;
    }
    
    #messageInput {
        padding: 0.8rem 0.5rem;
        font-size: 16px;
    }

    .send-btn {
        width: 40px;
        height: 40px;
    }
    
    .footer {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
        padding: 0.8rem 1rem;
        font-size: 0.75rem;
    }
    
    .user-info {
        gap: 0.8rem;
    }
    
    .change-name-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .modal-content {
        margin: 5% auto;
        padding: 1.5rem;
        width: 95%;
    }
    
    .modal-content h3 {
        font-size: 1.2rem;
    }
    
    #nameInput {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    
    .btn-primary, .btn-secondary {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }

    /* Hide the legacy status bar on small screens. Keep name/settings controls reachable. */
    .status-outside { display: none; }

    .lobby-topbar {
        gap: 0.5rem;
        padding: 0.55rem 0.65rem;
    }

    .neon-top-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lobby-header-actions {
        flex: 0 0 auto;
        gap: 0.35rem;
    }

    #changeName {
        max-width: 116px;
        min-width: 0;
    }

    #changeName .neon-current-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Use dynamic viewport height so the input isn't pushed off-screen on mobile */
    body, .container { height: 100dvh; }
    .input-wrapper.bottom-bar {
        padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0));
    }
}

/* Desktop optimizations */
@media (min-width: 769px) {
    .header {
        padding: 1.5rem 2rem;
    }
    
    .logo {
        font-size: 1.8rem;
    }
    
    .status-indicator {
        font-size: 0.9rem;
    }
    
    .messages {
        padding: 1.5rem;
    }
    
    .welcome-message {
        padding: 2.5rem 1.5rem;
    }
    
    .welcome-message h2 {
        font-size: 1.6rem;
    }
    
    .welcome-message p {
        font-size: 1.1rem;
    }
    
    .instruction {
        padding: 1.2rem;
        font-size: 0.95rem;
    }
    
    .message-content {
        max-width: 75%;
        padding: 0.6rem 1rem;
        font-size: 1rem;
    }
    
    #messageInput {
        padding: 0.8rem 0.5rem 0.8rem 0;
        font-size: 1rem;
    }
    
    .send-btn {
        width: 50px;
        height: 50px;
    }
    
    .footer {
        padding: 1.5rem 2rem;
        font-size: 0.9rem;
    }
    
    .user-info {
        gap: 1.5rem;
    }
    
    .change-name-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .modal-content {
        margin: 10% auto;
        padding: 2.5rem;
        max-width: 400px;
    }
    
    .modal-content h3 {
        font-size: 1.5rem;
    }
    
    #nameInput {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    
    .btn-primary, .btn-secondary {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        height: 100vh;
        border-left: 2px solid var(--border-primary);
        border-right: 2px solid var(--border-primary);
        overflow: hidden;
    }
}

/* Scrollbar styling */
.messages::-webkit-scrollbar {
    width: 8px;
    display: none; 
}

.messages::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.messages::-webkit-scrollbar-thumb {
    background: var(--accent-light);
    border: 1px solid var(--bg-primary);
}

.messages::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

.status-outside {
    position: fixed;
    top: 20px;
    right: 100px;
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    z-index: 1000;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Loading spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-secondary);
    border-top: 4px solid var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 1rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Chess board styles */
.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    align-self: center;
    justify-self: center;
    background: #f0d9b5; /* Light brown background for chess board */
    border: 3px solid #ffffff; /* Darker brown border */
    border-radius: 8px;
    max-width: 270px; /* Control width to fit in game area */
    max-height: 270px; /* Make it square */
    place-self: center;
}

.chess-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 0; /* No rounded corners for chess squares */
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1; /* Ensure square cells */
    position: relative;
}

.chess-cell.light {
    background-color: var(--accent-light); /* Light square color */
}

.chess-cell.dark {
    background-color: var(--accent-dark); /* Dark square color */
}

.chess-cell:hover {
    box-shadow: inset 0 0 0 2px #4d7942; /* Highlight on hover */
}

.chess-cell.selected {
    box-shadow: inset 0 0 0 3px #4CAF50; /* Green highlight for selected piece */
    background-color: #a3bca3; /* Light green background for selected */
}

.chess-cell.valid-move::after {
    content: "";
    position: absolute;
    width: 25%;
    height: 25%;
    background-color: rgba(76, 175, 80, 0.5); /* Semi-transparent green */
    border-radius: 50%;
    z-index: 1;
}

.chess-cell.valid-move.has-piece::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(76, 175, 80, 0.7); /* Green circle for capture move */
    border-radius: 50%;
    z-index: 1;
    box-sizing: border-box;
}

/* Highlight for last move */
.chess-cell.last-move::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f0e68c; /* Subtle khaki yellow */
    opacity: 0.8; /* 80% opacity for clear visibility of last move */
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through */
}

.chess-cell.last-move {
    position: relative; /* Ensure the ::after element is positioned correctly */
}

.chess-piece {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    z-index: 2; /* Above the move indicators */
    pointer-events: none; /* So it doesn't interfere with cell clicks */
}

.chess-piece i {
    font-size: 1.4em; /* Slightly smaller than container to fit nicely */
}

/* White pieces: white color with subtle shadow for definition */
.chess-piece.w-p, .chess-piece.w-r, .chess-piece.w-n, .chess-piece.w-b, .chess-piece.w-q, .chess-piece.w-k {
    color: #ffffff; /* White pieces */
}

/* Make white pieces have more solid shadows for better visibility */
.chess-piece.w-p i, .chess-piece.w-r i, .chess-piece.w-n i, .chess-piece.w-b i, .chess-piece.w-q i, .chess-piece.w-k i {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6); /* Darker, more solid shadow for white pieces */
}

/* Red indicator for king in check */
.chess-cell.check .chess-piece.w-k,
.chess-cell.check .chess-piece.b-k {
    animation: check-pulse 1s infinite;
    box-shadow: 0 0 10px 3px #ff0000;
}

@keyframes check-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.chess-cell.check {
    background-color: #ff6666 !important; /* Red background for check */
    animation: check-background-pulse 1s infinite;
}

@keyframes check-background-pulse {
    0% { background-color: #ff6666; }
    50% { background-color: #ff9999; }
    100% { background-color: #ff6666; }
}


/* Black pieces: black color */
.chess-piece.b-p, .chess-piece.b-r, .chess-piece.b-n, .chess-piece.b-b, .chess-piece.b-q, .chess-piece.b-k {
    color: #000000; /* Black pieces */
}

.chess-piece.b-p i, .chess-piece.b-r i, .chess-piece.b-n i, .chess-piece.b-b i, .chess-piece.b-q i, .chess-piece.b-k i {
    text-shadow: 0 0 2px rgba(255, 255, 255, 1); /* White shadow for black pieces */
}

/* Coordinates for chess board */
.chess-cell[data-file="a"], .chess-cell[data-file="b"], .chess-cell[data-file="c"],
.chess-cell[data-file="d"], .chess-cell[data-file="e"], .chess-cell[data-file="f"],
.chess-cell[data-file="g"], .chess-cell[data-file="h"] {
    position: relative;
}

.chess-cell[data-file="h"]::after {
    content: attr(data-file);
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chess-cell[data-rank="8"]::before {
    content: attr(data-rank);
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Responsive adjustments for chess */
@media (max-width: 480px) {
    .chess-board {
        max-width: 260px;
        max-height: 260px;
    }

    .chess-piece {
        font-size: 1rem;
    }
}

/* Chess board perspective for black player */
.chess-board.black-perspective {
    transform: rotate(180deg);
}

/* When board is rotated, pieces get rotated too, so rotate them back */
.chess-board.black-perspective .chess-piece {
    transform: rotate(180deg); /* Rotate pieces back to upright after board rotation */
}

/* Custom modal for blocking confirmation */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    text-align: center;
}

.modal-title {
    color: var(--text-primary);
    font-size: 1.2em;
    margin-bottom: 10px;
}

.modal-message {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.4;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.modal-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.modal-button.confirm {
    background: var(--status-error);
    color: #333; /* Darker text instead of white */
}

.modal-button.cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-button:hover {
    opacity: 0.9;
}

/* Settings Modal Styles */
.settings-modal {
    max-width: 600px;
    width: 90%;
    text-align: left;
    padding: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-primary);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-primary);
}

.tab-btn {
    padding: 12px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-accent);
}

.tab-content {
    display: none;
    padding: 20px;
}

.tab-content.active {
    display: block;
}

.settings-section {
    margin-bottom: 25px;
}

.settings-section h3 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.1em;
}

.setting-item {
    margin-bottom: 15px;
}

.setting-item label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.block-duration-select {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 1em;
}

/* Slider styles */
.block-duration-slider {
    width: 100%;
    height: 12px; /* Made thicker */
    -webkit-appearance: none;
    background: var(--bg-input);
    border-radius: 6px;
    outline: none;
    margin-top: 0.5rem;
}

.block-duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; /* Larger handle */
    height: 24px; /* Larger handle */
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    transition: background 0.3s;
    border: 2px solid white; /* Add border to make it more visible */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Add shadow for better visibility */
}

.block-duration-slider::-webkit-slider-thumb:hover {
    background: var(--primary-color-dark);
}

.block-duration-slider::-moz-range-thumb {
    width: 24px; /* Larger handle */
    height: 24px; /* Larger handle */
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid white; /* Add border to make it more visible */
    transition: background 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Add shadow for better visibility */
}

.block-duration-slider::-moz-range-thumb:hover {
    background: var(--primary-color-dark);
}

.blocked-users-list {
    max-height: 300px;
    overflow-y: auto;
}

.no-blocked-users {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.blocked-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border: 1px solid var(--border-primary);
}

.blocked-user-info {
    flex-grow: 1;
}

.blocked-user-name {
    font-weight: bold;
    color: var(--text-primary);
}

.blocked-user-time {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-top: 2px;
}

.blocked-user-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.unblock-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary); /* Use a subtle background */
    color: var(--text-primary); /* Darker text for visibility */
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
}

.unblock-btn:hover {
    background: var(--bg-input);
    border-color: var(--primary-color);
}

/* Legal links header update for settings link */
.legal-links-header a.legal-link-header {
    color: var(--text-secondary);
    text-decoration: none;
    margin-right: 15px;
    font-size: 0.9em;
    transition: color 0.2s;
}

.legal-links-header a.legal-link-header:hover {
    color: var(--text-primary);
}

/* Reply functionality styles */
.message-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between message content and reply button */
    width: 100%; /* Ensure full width */
}

/* Make reply button vertically centered with the message content */
.message-wrapper .reply-btn {
    align-self: center; /* Align to center to match content alignment */
    flex-shrink: 0; /* Prevent the button from shrinking */
}

.message-content {
    max-width: 80%;
    padding: 0.6rem 1rem; /* Updated as requested */
    word-wrap: break-word;
    position: relative;
    border: 2px solid;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--theme-message-radius);
}

.actual-message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.message-text {
    flex: 1;
    word-break: break-word; /* Allow breaking words only when necessary */
    overflow-wrap: break-word; /* Ensure long words break properly */
    min-width: 0; /* Allow flex item to shrink below content size */
}

.reply-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem; /* Make the button bigger */
    padding: 6px 8px; /* Increase padding */
    border-radius: 6px; /* Slightly larger border radius */
    opacity: 0;
    transition: all 0.3s ease;
    align-self: center; /* Center the button vertically */
    margin-top: 0;
    flex-shrink: 0; /* Prevent reply button from shrinking */
    min-width: 36px; /* Ensure minimum size */
    min-height: 36px; /* Ensure minimum size */
    display: flex;
    align-items: center;
    justify-content: center;
}

.message:hover .reply-btn {
    opacity: 0.7;
}

.message:hover .reply-btn:hover {
    opacity: 1;
    color: var(--text-primary);
    background: var(--bg-input);
}

.reply-indicator {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-left: 3px solid;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 8px 8px 0;
    flex-shrink: 0; /* Don't shrink the reply indicator */
}

.reply-indicator.own-reply {
    border-left-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.1);
}

.reply-indicator.other-reply {
    border-left-color: var(--border-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.quoted-message {
    font-size: 0.85rem;
}

.reply-author {
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 2px;
}

.reply-content {
    color: var(--text-secondary);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actual-message {
    margin-top: 0;
}

.message-content {
    position: relative;
}

.reply-target {
    animation: replyHighlight 2s ease;
}

@keyframes replyHighlight {
    0% { background-color: rgba(255, 255, 0, 0.2); }
    100% { background-color: var(--bg-secondary); }
}

#messageInput.replying {
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 15px var(--shadow-green);
}

/* For mobile - position reply button differently */
@media (max-width: 480px) {
    .reply-btn {
        font-size: 1.1rem; /* Slightly smaller on mobile but still visible */
        padding: 5px 7px;
        min-width: 32px;
        min-height: 32px;
    }

    .message-wrapper {
        gap: 6px;
    }

    .quoted-message {
        font-size: 0.8rem;
    }
}
/* New loader animation from loader.txt */
.loader {
  display: inline-flex;
  gap: 5px;
  margin: 1rem auto; /* Center the loader */
}
.loader:before,
.loader:after {
  content: "";
  width: 35px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 3px inset #fff;
  animation: 2s infinite linear;
  animation-name: l3-1,l3-2;
  animation-delay: -1s,0s
}
.loader:after {
  --s: -1;
}
 @keyframes l3-1 {
  0%   {border-radius:50% 0   0   50%}
  25%  {border-radius:50% 50% 0   0  }
  50%  {border-radius:0   50% 50% 0  }
  75%  {border-radius:0   0   50% 50%}
  100% {border-radius:50% 0   0   50%}
}
 @keyframes l3-2{
  0%   {transform:scaleX(var(--s,1)) rotate(0deg)}
  100% {transform:scaleX(var(--s,1)) rotate(-360deg)}
}

/* Bug Report Button and Modal Styles */

/* Messages container */
.messages-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.messages {
    padding: 1rem;
    background: var(--bg-secondary);
    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    min-height: 100%;
}

.messages.chat-active {
    flex: 1 0 auto;
    margin-top: 0;
}

/* Bug Report Button */
.bug-report-btn {
    position: fixed !important;
    top: 25px !important; /* Position from the top of the viewport - will be overridden by media queries */
    right: 30px !important; /* Default fallback */
    z-index: 999 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--accent-primary) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    font-size: 1.5rem !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bug-report-btn:hover {
    background: var(--accent-primary) !important;
    color: var(--bg-secondary) !important;
    transform: scale(1.1) !important;
}

.bug-report-btn i {
    pointer-events: none !important;
}

/* Responsive adjustments for the bug report button */
@media (min-width: 1025px) {
    /* Desktop: Account for the centered 33.33% width container */
    .bug-report-btn {
        right: calc((100% - 33.33%)/2 + 10px) !important;
        top: 25px !important; /* Adjusted to match new top position */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* Tablet: Container uses max-width and is centered */
    .bug-report-btn {
        right: calc((100% - min(100%, 640px))/2 + 10px) !important;
        top: 25px !important; /* Adjusted to match new top position */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .bug-report-btn {
        right: calc((100% - min(100%, 760px))/2 + 10px) !important;
        top: 25px !important;
    }
}

@media (max-width: 480px) {
    /* Mobile: Container is full width with padding */
    .bug-report-btn {
        right: 10px !important;
        top: 25px !important; /* Adjusted to match new top position */
    }
}

/* Bug Report Modal */
.modal-overlay.bug-report-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 30000 !important;
    isolation: isolate !important;
    contain: layout style paint size !important;
}

.modal-content.bug-report-content {
    position: relative !important;
    max-width: 620px !important;
    width: min(92vw, 620px) !important;
    text-align: left !important;
    padding: 0 !important;
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 30px var(--shadow-green) !important;
    isolation: isolate !important;
    contain: layout style paint !important;
}

.modal-header.bug-report-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.modal-header.bug-report-header h2 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
}

.modal-close-btn.close-bug-report-modal {
    background: none !important;
    border: none !important;
    font-size: 1.7rem !important;
    cursor: pointer !important;
    color: var(--text-secondary) !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.modal-close-btn.close-bug-report-modal:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.modal-body.bug-report-body {
    padding: 22px !important;
}

.input-group {
    margin-bottom: 18px !important;
}

.input-group label {
    display: block !important;
    margin-bottom: 7px !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.bug-report-input {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-secondary) !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.bug-report-input:focus {
    outline: none !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2) !important;
}

.bug-report-textarea {
    width: 100% !important;
    min-height: 150px !important;
    padding: 0.85rem 1rem !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-secondary) !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    line-height: 1.45 !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}

.bug-report-textarea:focus {
    outline: none !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2) !important;
}

.radio-group {
    display: flex !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.radio-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    min-height: 38px !important;
    padding: 0.55rem 0.75rem !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 8px !important;
    font-size: 0.98rem !important;
    line-height: 1.2 !important;
}

.radio-option input[type="radio"] {
    margin: 0 !important;
    cursor: pointer !important;
}

.input-error {
    color: #ff6b6b !important;
    font-size: 0.88rem !important;
    margin-top: 6px !important;
    display: block !important;
}

.modal-buttons.bug-report-buttons {
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-end !important;
    margin-top: 22px !important;
}

.modal-buttons.bug-report-buttons .btn-primary,
.modal-buttons.bug-report-buttons .btn-secondary {
    min-height: 42px !important;
    padding: 0.7rem 1.15rem !important;
    font-size: 0.95rem !important;
}

@media (max-width: 480px) {
    .modal-content.bug-report-content {
        width: 94vw !important;
        max-height: 88dvh !important;
        overflow-y: auto !important;
    }

    .modal-header.bug-report-header {
        padding: 16px 18px !important;
    }

    .modal-header.bug-report-header h2 {
        font-size: 1.28rem !important;
    }

    .modal-body.bug-report-body {
        padding: 18px !important;
    }

    .radio-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .modal-buttons.bug-report-buttons {
        gap: 0.7rem !important;
    }
}

@media (max-width: 480px) {
    #messageInput,
    .name-input,
    .bug-report-input,
    .bug-report-textarea {
        font-size: 16px !important;
    }
}

/* Admin Tabs */
.admin-tabs {
    display: flex !important;
    border-bottom: 2px solid var(--border-primary) !important;
    margin-bottom: 0 !important;
}

.tab-btn {
    padding: 12px 20px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: var(--text-secondary) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.tab-btn.active {
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
    background: var(--bg-tertiary) !important;
}

.tab-content {
    display: none !important;
    padding: 0 !important;
    animation: fadeIn 0.3s ease !important;
}

.tab-content.active {
    display: block !important;
}

#blocking-tab.tab-content.active,
#general-tab.tab-content.active,
#theme-tab.tab-content.active {
    padding: 0.75rem !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bug Reports Section in Admin Panel */
.admin-section.admin-bug-reports-section {
    margin: 0 0 1.2rem 0 !important;
    padding: 1rem !important;
    background: var(--bg-tertiary) !important;
    border: 2px solid var(--border-secondary) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.bug-reports-controls {
    margin-bottom: 10px !important;
}

.bug-reports-container {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-secondary) !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    /* Hide scrollbars for better aesthetics */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE 10+ */
}

.bug-reports-container::-webkit-scrollbar {
    display: none !important; /* WebKit browsers */
}

.bug-reports-header {
    display: grid !important;
    grid-template-columns: 0.5fr 2fr 0.8fr 1.2fr !important;
    padding: 0.6rem 0.8rem !important;
    background: var(--bg-tertiary) !important;
    font-weight: bold !important;
    border-bottom: 2px solid var(--border-secondary) !important;
    margin-bottom: 0.3rem !important;
    font-size: 0.85rem !important;
}

.bug-report-item {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid var(--border-muted) !important;
    margin-bottom: 5px !important;
    font-size: 0.85rem !important;
    transition: background-color 0.2s ease !important;
}

.bug-report-item:last-child {
    border-bottom: none !important;
}

.bug-report-item:hover {
    background-color: var(--bg-tertiary) !important;
}

.report-header {
    display: grid !important;
    grid-template-columns: 0.5fr 2fr 0.8fr 1.2fr !important;
    padding: 0.6rem 0.8rem !important;
    align-items: center !important;
    cursor: pointer !important;
}

.report-type {
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.report-type.bug {
    color: #ff6b6b !important; /* Red for bugs */
}

.report-type.suggestion {
    color: #4ecdc4 !important; /* Blue for suggestions */
}

.report-status {
    font-weight: 600 !important;
}

.report-status.open {
    color: #ffd166 !important; /* Yellow for open */
}

.report-status.closed {
    color: #06d6a0 !important; /* Green for closed */
}

.report-actions {
    display: flex !important;
    gap: 5px !important;
    justify-content: flex-end !important;
}

.report-actions button {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-secondary) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.report-details {
    padding: 0.8rem 0.8rem 0.8rem 1.5rem !important;
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-muted) !important;
    margin: 5px 0 !important;
}

.report-description p {
    margin: 0.5rem 0 !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
}

.report-meta {
    margin-top: 0.8rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid var(--border-muted) !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
}

.no-bug-reports {
    text-align: center !important;
    padding: 1rem !important;
    color: var(--text-muted) !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
}

.loading-bug-reports {
    text-align: center !important;
    padding: 1rem !important;
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
}

/* Reply indicator bar */
.reply-indicator-bar {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-secondary);
    border-radius: 10px 10px 0 0; /* Rounded corners at the top only */
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1); /* Subtle shadow at the top */
}

.messages.has-reply-bar {
    padding-bottom: calc(1rem + var(--reply-bar-offset, 0px)) !important;
}

.settings-theme-picker {
    position: static;
    display: grid;
    width: min(100%, 320px);
    min-width: 0;
    box-shadow: none;
    margin-top: 0.75rem;
}

@media (max-width: 480px) {
    .chat-session-header {
        min-height: 54px;
        padding: 0.55rem 0.65rem;
    }

    .chat-header-btn {
        width: 34px;
        height: 34px;
    }

    .chat-end-btn {
        min-width: 62px;
        height: 34px;
        padding: 0.35rem 0.55rem;
    }

    .chat-match-name {
        font-size: 0.9rem;
    }

    .chat-match-status {
        font-size: 0.68rem;
    }
}

.reply-indicator-content {
    display: flex;
    align-items: center;
    flex: 1; /* Take up all available space */
    min-width: 0;
    width: 100%;
    gap: 0.8rem; /* Space between text and button */
}

.reply-indicator-text {
    flex: 1; /* Allow text to take up available space */
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-indicator-text strong {
    color: var(--accent-primary);
}

.reply-cancel-btn {
    background: transparent;
    border: none;
    flex-shrink: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    line-height: 1;
}

.reply-cancel-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
    box-shadow: 0 0 5px var(--shadow-green);
}

.reply-cancel-icon {
    font-style: normal;
    font-weight: bold;
    line-height: 1;
}

/* Mobile responsive adjustments for reply indicator */
@media (max-width: 480px) {
    .reply-indicator-bar {
        padding: 0.5rem;
    }

    .reply-indicator-text {
        font-size: 0.8rem;
    }

    .reply-cancel-btn {
        padding: 0.1rem 0.3rem;
        min-width: 26px;
        min-height: 26px;
    }
}

/* ── Message reactions ─────────────────────────────────── */
.reaction-picker {
    position: fixed;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 5px 8px;
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    z-index: 9999;
    opacity: 0;
    transform: scale(0.82) translateY(4px);
    transition: opacity 0.13s ease, transform 0.13s ease;
    pointer-events: none;
}
.reaction-picker.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.reaction-picker-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.3rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.1s ease;
    padding: 0;
}
.reaction-picker-btn:hover {
    transform: scale(1.35) translateY(-3px);
    background: var(--bg-tertiary);
}

.reaction-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: -10px;
    padding: 0 8px;
    position: relative;
    z-index: 1;
    margin-bottom: 2px;
}
.message.own .reaction-badges { justify-content: flex-end; }
.message.other .reaction-badges { justify-content: flex-start; }

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 6px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    font-size: 0.8rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    transition: border-color 0.1s ease, background 0.1s ease;
}
.reaction-badge:hover {
    border-color: var(--border-primary);
}
.reaction-badge.own-reacted {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}
.reaction-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
    min-width: 10px;
}
.reaction-badge.own-reacted .reaction-count {
    color: var(--accent-primary);
}

/* Friends, profile reactions, and lightweight feedback */
.friends-panel {
    width: min(420px, 100%);
    margin: 14px auto 0;
    text-align: left;
}
.friends-panel details {
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.friends-panel summary {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 600;
}
.friends-list {
    display: grid;
    gap: 8px;
    padding: 0 10px 10px;
}
.friend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
}
.friend-meta {
    min-width: 0;
}
.friend-name {
    font-weight: 600;
}
.friend-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.friend-preview {
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-chat-btn {
    min-width: 64px;
}
.friend-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.friend-archive-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
}
.reaction-settings-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.reaction-settings-grid {
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.reaction-settings-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    justify-self: start;
    padding: 6px;
    border: 1px solid var(--border-secondary);
    border-radius: 999px;
    background: var(--bg-secondary);
}
.reaction-setting-slot {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.25rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.reaction-setting-slot.selected {
    background: transparent;
}
#resetReactionEmojis {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 38px;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .reaction-settings-row {
        gap: 8px;
    }

    .reaction-settings-strip {
        flex: 1 1 auto;
        justify-content: space-between;
        gap: 2px;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 4px;
    }

    .reaction-setting-slot {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        font-size: 1.08rem;
    }

    #resetReactionEmojis {
        flex: 0 0 54px;
        min-width: 54px;
        min-height: 32px;
        padding: 0.3rem 0.45rem;
        font-size: 0.72rem;
    }
}
.reaction-picker-popup {
    position: fixed;
    z-index: 40000;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    width: min(340px, calc(100vw - 16px));
    padding: 8px 10px;
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.reaction-picker-popup::before {
    display: none;
}
.reaction-picker-option {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.05rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.reaction-picker-option:hover,
.reaction-picker-option.selected {
    background: var(--bg-tertiary);
}
.post-chat-feedback {
    display: grid;
    gap: 8px;
    width: 100%;
    opacity: 1;
    transition: opacity 1000ms ease;
}
.post-chat-feedback.feedback-fading-out {
    opacity: 0;
    pointer-events: none;
}
.feedback-followup {
    display: grid;
    gap: 6px;
}
.feedback-actions,
.feedback-tags {
    display: grid;
    gap: 6px;
    width: 100%;
}
.feedback-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feedback-tags {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feedback-actions[hidden],
.feedback-followup[hidden],
.feedback-tags[hidden] {
    display: none !important;
}
.feedback-choice,
.feedback-tags button {
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    min-height: 38px;
}
@media (max-width: 480px) {
    .feedback-tags button {
        min-width: 0;
        padding-inline: 5px;
        font-size: clamp(11px, 3.1vw, 13px);
    }
}
.feedback-choice.selected,
.feedback-tags button.selected {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}
.feedback-submitted {
    grid-column: 1 / -1;
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.95rem;
}
.ended-chat-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: 100%;
}
.ended-chat-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}
#blockUserButton.confirm-block {
    background: var(--status-error) !important;
    border-color: var(--status-error) !important;
    color: #fff !important;
}
#blockUserButton.confirm-block:hover {
    background: var(--status-error) !important;
    border-color: var(--status-error) !important;
    color: #fff !important;
}
.friend-request-prompt {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: grid;
    width: min(calc(100vw - 24px), 360px);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-primary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    transform: translateX(-50%);
}
.friend-request-prompt-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
}
.friend-request-prompt-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.friend-request-prompt-actions button {
    min-width: 88px;
}

/* Active broadcast items in admin panel */
.active-broadcast-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}

.broadcast-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.broadcast-message {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-primary);
    word-wrap: break-word;
}

.broadcast-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.broadcast-actions {
    display: flex;
    gap: 0.5rem;
}

.no-active-broadcasts {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem;
}

/* ── Marquee Announcement Strip ── */
.marquee-strip {
    flex-shrink: 0;
    overflow: hidden;
    height: 28px;
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-muted);
    position: relative;
    z-index: 10;
    user-select: none;
}

.marquee-strip.is-empty {
    display: none;
}

.marquee-inner {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    animation: marquee-scroll var(--marquee-duration, 14s) linear infinite;
    will-change: transform;
}

.marquee-strip:hover .marquee-inner {
    animation-play-state: paused;
}

.marquee-text {
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 0 1rem;
    letter-spacing: 0.02em;
}

.marquee-text.marquee-broadcast {
    font-weight: 500;
    background: var(--broadcast-pill-bg, rgba(255,255,255,0.08));
    border: 1px solid var(--broadcast-pill-border, rgba(255,255,255,0.15));
    border-radius: 20px;
    padding: 1px 10px;
    letter-spacing: 0.03em;
}

.marquee-sep {
    display: inline-block;
    width: 5rem;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* Admin password input */
.admin-password-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.admin-password-input:focus {
    border-color: var(--accent-primary);
}


/* ── Admin Side Rails ── */
.admin-rail {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 200;
    width: min(230px, 22vw);
    flex-direction: column;
    gap: 8px;
    padding: 14px 10px;
    background: transparent;
    border: none;
    overflow-y: auto;
    font-family: inherit;
}

@media (min-width: 769px) {
    body.admin-active .admin-rail {
        display: flex;
    }
}

.admin-rail-left {
    left: 0;
    border-right: none;
}

.admin-rail-right {
    right: 0;
    border-left: none;
}

.admin-rail-left > :not(.ar-label):not(.ar-launch-btn):not(#arPartnerCard),
.admin-rail-right > :not(.ar-label):not(.ar-launch-btn) {
    display: none;
}

/* ================================================================
   Admin Rail Window — Redesigned
   ================================================================ */

.admin-rail-window-content {
    /* Reset cascaded .modal-content rules that break our layout */
    max-width: none;
    padding: 0;
    margin: 0;
    text-align: left;
    contain: none;

    width: min(780px, 92vw);
    min-width: 0;
    height: min(88vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        0 2px 0 rgba(255,255,255,0.04) inset,
        0 40px 100px rgba(0, 0, 0, 0.55),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Header */
.admin-rail-window .modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.015);
}

.admin-rail-window .modal-header::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    opacity: 0.8;
    flex-shrink: 0;
}

.admin-rail-window .modal-header h2 {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-family: inherit;
}

.admin-rail-window .modal-close-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 16px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.admin-rail-window .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
    transform: none;
}

/* Tab strip */
.admin-rail-window .ar-window-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.admin-rail-window .tab-btn {
    padding: 5px 13px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    margin-bottom: 0 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    cursor: pointer !important;
}

.admin-rail-window .tab-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

.admin-rail-window .tab-btn.active {
    background: var(--accent-primary) !important;
    color: var(--bg-primary) !important;
    border-color: transparent !important;
}

/* Body — must NOT scroll itself; inner elements handle their own scroll */
.admin-rail-window-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    padding: 18px 20px;
}

.admin-rail-window .tab-content {
    display: none;
    flex-direction: column;
    gap: 14px;
}

/* Active tab fills the body and clips — children handle their own scrolling */
.admin-rail-window .tab-content.active {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.admin-rail-window .ar-list {
    overflow-y: auto;
    gap: 6px;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.admin-rail-window .ar-section-head {
    margin-top: 0;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.admin-rail-window .ar-section-head .ar-label,
.admin-rail-window .ar-section-head .ar-label-sm {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Scrollbars */
.admin-rail-window-body::-webkit-scrollbar,
.admin-rail-window .ar-list::-webkit-scrollbar { width: 4px; }
.admin-rail-window-body::-webkit-scrollbar-track,
.admin-rail-window .ar-list::-webkit-scrollbar-track { background: transparent; }
.admin-rail-window-body::-webkit-scrollbar-thumb,
.admin-rail-window .ar-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Two-column layout — left forms, right list */
.admin-rail-window-users [data-ar-tab-content="active"].active,
.admin-rail-window-broadcast [data-ar-tab-content="broadcast"].active,
.admin-rail-window-marquee [data-ar-tab-content="marquee"].active,
.admin-rail-window-polls [data-ar-tab-content="polls"].active {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.admin-rail-window .ar-col-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}

.admin-rail-window .ar-col-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.admin-rail-window .ar-col-right .ar-section-head {
    flex-shrink: 0;
    margin-bottom: 2px;
}

.admin-rail-window .ar-col-right .ar-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* Filter pills */
.ar-filter-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ar-filter-btn {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ar-filter-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}
.ar-filter-btn.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: transparent;
}

.admin-rail-window-users [data-ar-tab-content="banned-users"].active,
.admin-rail-window-users [data-ar-tab-content="banned-ips"].active,
.admin-rail-window-reports [data-ar-tab-content="reports"].active {
    display: flex;
}

.ar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 5px;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.ar-count {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.55;
}

.ar-launch-btn {
    min-height: 48px;
    border: 1px solid var(--border-secondary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 20%, var(--bg-tertiary)), var(--bg-tertiary));
    color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 10px 26px rgba(0, 0, 0, 0.12);
}

.ar-launch-btn:hover {
    color: var(--bg-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

#adminPanelBtn {
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-primary));
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
}

.admin-control-menu-content {
    width: min(520px, calc(100vw - 28px));
}

.admin-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.admin-control-tile {
    min-height: 86px;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
}

.admin-control-tile i {
    font-size: 22px;
    color: var(--accent-primary);
}

.admin-control-tile:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.ar-label-sm {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-bottom-color: var(--border-muted);
    margin-bottom: 0;
}

.ar-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 7px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.ar-card-inline {
    padding: 7px 10px;
}

.ar-broadcast-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-muted);
    border-radius: 7px;
}

.ar-broadcast-row .ar-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-broadcast-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ar-countdown {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

.ar-remove-broadcast {
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
}

.ar-remove-broadcast:hover {
    opacity: 1;
}

.ar-card-title {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ar-partner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ar-partner-name {
    color: var(--accent-primary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ar-pid {
    color: var(--text-muted);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    padding: 8px 10px;
    outline: none;
    box-sizing: border-box;
}

.ar-input:focus {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.ar-input::placeholder {
    color: var(--text-muted);
}

.ar-input-sm {
    width: 70px;
    flex-shrink: 0;
}

.ar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ar-textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    padding: 9px 10px;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    min-height: 140px;
}

.ar-textarea:focus {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.ar-textarea::placeholder {
    color: var(--text-muted);
}

.ar-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.ar-btn-primary {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.ar-btn-primary:hover {
    background: var(--accent-light);
}

.ar-btn-danger {
    background: transparent;
    color: var(--status-error);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.ar-btn-danger:hover {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.35);
}

.ar-btn-sm {
    padding: 4px 8px;
    font-size: 10px;
    width: auto;
    flex-shrink: 0;
}

.ar-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}

.ar-icon-btn:hover {
    color: var(--accent-primary);
}

.ar-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ar-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ar-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-muted);
    border-radius: 7px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.ar-item-name {
    color: var(--text-secondary);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-item-meta {
    color: var(--text-muted);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cards inside the rail window — slightly elevated look */
.admin-rail-window .ar-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    gap: 9px;
}

.admin-rail-window .ar-card-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Items — compact single-line rows */
.admin-rail-window .ar-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 7px 10px;
    gap: 0;
    transition: background 0.12s;
}

.admin-rail-window .ar-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.admin-rail-window .ar-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-rail-window .ar-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-rail-window .ar-item-meta {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
}

.admin-rail-window .ar-item-actions {
    flex-shrink: 0;
    margin-top: 0;
}

.admin-rail-window .ar-banned-user-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.admin-rail-window .ar-banned-user-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-rail-window .ar-banned-user-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.admin-rail-window .ar-banned-user-head .ar-item-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
}

.admin-rail-window .ar-ban-expiry {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-rail-window .ar-ban-pid,
.admin-rail-window .ar-ban-reason {
    max-width: 100%;
}

.admin-rail-window .ar-banned-user-actions {
    justify-content: flex-end;
}

.admin-rail-window .ar-report-item {
    gap: 6px;
}

.admin-rail-window .ar-report-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.admin-rail-window .ar-report-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 12px;
}

.admin-rail-window .ar-report-date {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-rail-window .ar-report-details {
    display: none;
    padding: 8px 9px;
    margin-top: 2px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.18);
}

.admin-rail-window .ar-report-item.ar-expanded .ar-report-details {
    display: block;
}

.admin-rail-window .ar-report-detail-label {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-rail-window .ar-report-description {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-rail-window .ar-report-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 10px;
}

.admin-rail-window-reports .admin-rail-window-content {
    max-width: min(760px, 94vw);
}

.admin-rail-window-reports .admin-rail-window-body {
    padding: 20px 22px;
}

.admin-rail-window-reports .ar-window-tab-content {
    gap: 16px;
}

.admin-rail-window-reports .ar-section-head {
    padding: 10px 4px 12px;
}

.admin-rail-window-reports .ar-section-head .ar-label,
.admin-rail-window-reports .ar-section-head .ar-label-sm {
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.admin-rail-window-reports .ar-list {
    gap: 10px;
}

.admin-rail-window-reports .ar-empty {
    padding: 1.2rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

.admin-rail-window-reports .ar-report-item {
    gap: 10px;
    padding: 12px 13px;
}

.admin-rail-window-reports .ar-report-summary {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.admin-rail-window-reports .ar-report-summary-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.admin-rail-window-reports .ar-report-summary-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-rail-window-reports .ar-report-title {
    flex-basis: auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.admin-rail-window-reports .ar-report-date {
    font-size: 12px;
    line-height: 1.2;
}

.admin-rail-window-reports .ar-report-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.admin-rail-window-reports .ar-report-details {
    padding: 12px 13px;
    margin-top: 4px;
}

.admin-rail-window-reports .ar-report-detail-label {
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 11px;
}

.admin-rail-window-reports .ar-report-description {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
}

.admin-rail-window-reports .ar-report-meta {
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    font-size: 12px;
    line-height: 1.35;
}

.admin-rail-window-reports .ar-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
}

.admin-rail-window-reports .ar-btn-sm {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 11px;
}

.admin-rail-window-reports .ar-toggle-report-btn.ar-report-close-btn {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.32);
}

.admin-rail-window-reports .ar-toggle-report-btn.ar-report-close-btn:hover {
    background: rgba(239, 68, 68, 0.23);
    border-color: rgba(239, 68, 68, 0.48);
}

.admin-rail-window-reports .ar-toggle-report-btn.ar-report-reopen-btn {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.34);
}

.admin-rail-window-reports .ar-toggle-report-btn.ar-report-reopen-btn:hover {
    background: rgba(34, 197, 94, 0.23);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Expandable network info — hidden until revealed */
.admin-rail-window .admin-user-network-info {
    display: none;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
    margin-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-rail-window .admin-user-network-info.ar-expanded {
    display: flex;
}

/* Inputs */
.admin-rail-window .ar-input {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-primary);
    padding: 7px 10px;
    transition: border-color 0.15s;
}

.admin-rail-window .ar-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

.admin-rail-window .ar-textarea {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    resize: vertical;
    transition: border-color 0.15s;
}

.admin-rail-window .ar-textarea:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* Buttons */
.admin-rail-window .ar-btn {
    border-radius: 7px;
    font-size: 12px;
    letter-spacing: 0.07em;
}

.admin-rail-window .ar-btn-sm {
    font-size: 10px;
}

.admin-rail-window .ar-btn-primary {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 700;
}

.admin-rail-window .ar-btn-primary:hover {
    filter: brightness(1.1);
}

.admin-rail-window .ar-btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.admin-rail-window .ar-btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Empty state */
.admin-rail-window .ar-empty {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px 0;
    opacity: 0.6;
}

.admin-rail-window .banned-users-header {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-muted);
    border-radius: 7px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 10px;
}

.admin-rail-window .banned-user-item {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border-muted);
    border-radius: 7px;
    background: var(--bg-primary);
}

.admin-rail-window .banned-user-item .username,
.admin-rail-window .banned-user-item .persistent-id,
.admin-rail-window .banned-user-item .reason {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-rail-window .admin-user-network-info {
    grid-column: 1 / -1;
}

.ar-item-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.ar-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.ar-page-status {
    color: var(--text-muted);
    font-size: 10px;
    text-align: center;
}

.ar-page-input {
    width: 74px;
    text-align: center;
    padding: 3px 5px;
}

@media (max-width: 760px) {
    .admin-rail-window-content {
        width: calc(100vw - 16px);
        min-width: 0;
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 10px;
    }

    /* Collapse two-column layouts to single column on mobile */
    .admin-rail-window-users [data-ar-tab-content="active"].active,
    .admin-rail-window-broadcast [data-ar-tab-content="broadcast"].active,
    .admin-rail-window-marquee [data-ar-tab-content="marquee"].active,
    .admin-rail-window-polls [data-ar-tab-content="polls"].active {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .admin-rail-window .ar-col-left,
    .admin-rail-window .ar-col-right {
        overflow: visible;
        min-height: unset;
    }

    .admin-rail-window .ar-col-right .ar-list {
        overflow: visible;
        min-height: unset;
        flex: none;
    }

    .admin-rail-window .banned-users-header {
        display: none;
    }

    .admin-rail-window .banned-user-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-rail-window .ar-banned-user-item {
        grid-template-columns: 1fr;
    }

    .admin-rail-window .ar-banned-user-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .admin-rail-window .ar-ban-expiry {
        white-space: normal;
    }

    .admin-rail-window .ar-banned-user-actions .ar-btn {
        width: 100%;
    }
}

.ar-pager .ar-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.ar-empty {
    color: var(--text-muted);
    font-size: 11px;
    padding: 8px 4px;
    text-align: center;
    font-style: italic;
    opacity: 0.6;
}

.ar-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 11px;
    font-family: inherit;
    user-select: none;
}

.ar-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ar-badge-bug {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.ar-badge-suggestion {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.ar-badge-open {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.ar-badge-closed {
    background: rgba(100, 100, 100, 0.1);
    color: #555;
    border: 1px solid rgba(100, 100, 100, 0.2);
}

/* ---- Admin poll form + results mini ---- */
.ar-poll-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.ar-poll-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ar-poll-results-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0;
}

.ar-poll-result-row {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.ar-poll-result-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-poll-result-count {
    flex-shrink: 0;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- Poll banner (user-facing floating card) ---- */
#pollBannerContainer {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(400px, calc(100vw - 32px));
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.poll-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    pointer-events: all;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    animation: pollSlideIn 0.22s ease;
}

@keyframes pollSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.poll-banner-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 11px;
}

.poll-banner-question {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.poll-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.poll-banner-dismiss:hover { opacity: 1; }

.poll-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.poll-options.single-col {
    grid-template-columns: 1fr;
}

.poll-option-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    padding: 8px 10px;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.poll-option-btn:hover {
    border-color: var(--accent-primary);
}

.poll-results {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.poll-result-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.poll-result-label {
    font-size: 12px;
    color: var(--text-primary);
    flex: 0 0 auto;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poll-result-bar-wrap {
    flex: 1;
    background: var(--bg-primary);
    border-radius: 4px;
    height: 5px;
    overflow: hidden;
}

.poll-result-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.poll-result-pct {
    flex: 0 0 32px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

.poll-result-check {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--accent-primary);
}

.poll-result-total {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

.game-rematch-btn,
.game-rematch-btn:hover,
.game-rematch-btn:focus,
.game-rematch-btn:focus-visible,
.game-rematch-btn:active {
    transform: translateX(-50%) !important;
}

.game-rematch-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    filter: grayscale(0.35);
}

.setting-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.setting-toggle-row > span:first-child {
    min-width: 0;
}

.setting-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.setting-switch {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    border: 1px solid var(--border-secondary);
    border-radius: 999px;
    background: var(--bg-input);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.setting-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform 0.16s ease, background 0.16s ease;
}

.setting-switch-input:checked + .setting-switch {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.setting-switch-input:checked + .setting-switch::after {
    transform: translateX(20px);
    background: var(--bg-primary);
}

.setting-switch-input:focus-visible + .setting-switch {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

.composer-end-btn {
    flex: 0 0 auto;
    width: 58px;
    min-width: 58px;
    height: 42px;
    margin-right: 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--theme-control-radius);
}

@media (max-width: 480px) {
    .composer-end-btn {
        width: 52px;
        min-width: 52px;
        padding: 0.45rem 0.6rem;
    }
}

.higher-lower-board {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 12px;
}

.higher-lower-shell {
    width: 100%;
    height: 100%;
    max-width: 340px;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 9px;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.higher-lower-shell:not(.is-finished) {
    grid-template-rows: auto auto auto minmax(0, auto) 1fr;
}

.higher-lower-shell.is-finished {
    grid-template-rows: auto auto minmax(0, 1fr);
    padding-bottom: 42px;
}

.higher-lower-range {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.higher-lower-range-line {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #facc15);
    opacity: 0.82;
}

.higher-lower-range-line.is-higher {
    background: linear-gradient(90deg, #334155, #60a5fa);
}

.higher-lower-range-line.is-lower {
    background: linear-gradient(90deg, #facc15, #334155);
}

.higher-lower-range-line.is-correct {
    background: linear-gradient(90deg, #16a34a, #86efac);
}

.higher-lower-range-line [data-hl-marker] {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -50%);
}

.higher-lower-clue {
    position: relative;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-tertiary) 88%, #60a5fa 12%), var(--bg-tertiary));
    color: var(--text-primary);
    text-align: center;
}

.higher-lower-remaining {
    position: absolute;
    top: 8px;
    right: 9px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 42%, transparent);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.higher-lower-clue strong {
    color: var(--text-primary);
    font-size: 2.15rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.higher-lower-clue span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.higher-lower-clue.is-higher {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.16), color-mix(in srgb, var(--bg-tertiary) 90%, transparent));
}

.higher-lower-clue.is-higher span,
.higher-lower-history-row.is-higher .higher-lower-history-result {
    color: #93c5fd;
}

.higher-lower-clue.is-lower {
    border-color: #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), color-mix(in srgb, var(--bg-tertiary) 90%, transparent));
}

.higher-lower-clue.is-lower span,
.higher-lower-history-row.is-lower .higher-lower-history-result {
    color: #fcd34d;
}

.higher-lower-clue.is-correct {
    border-color: #22c55e;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), color-mix(in srgb, var(--bg-tertiary) 90%, transparent));
}

.higher-lower-clue.is-correct span,
.higher-lower-history-row.is-correct .higher-lower-history-result {
    color: #86efac;
}

.higher-lower-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 70%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-input) 72%, transparent);
    overflow: hidden;
}

.higher-lower-controls.is-hidden {
    display: none;
}

.higher-lower-shell.is-finished .higher-lower-controls,
.higher-lower-shell.is-finished .higher-lower-meta {
    display: none;
}

.higher-lower-shell.is-finished .higher-lower-range {
    display: none;
}

.higher-lower-shell.is-finished .higher-lower-remaining {
    display: none;
}

.higher-lower-input {
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px 0 0 8px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    outline: none;
}

.higher-lower-submit {
    min-width: 82px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.higher-lower-submit:disabled,
.higher-lower-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.higher-lower-meta {
    color: var(--text-muted);
    min-height: 0;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.higher-lower-history {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.higher-lower-history::-webkit-scrollbar {
    display: none;
}

.higher-lower-history-row,
.higher-lower-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 42%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.higher-lower-history-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.higher-lower-history-number {
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.higher-lower-history-result {
    min-width: 50px;
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
}

.higher-lower-more {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    opacity: 0.72;
}

.number-duel-board {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 12px;
}

.number-duel-shell {
    width: 100%;
    height: 100%;
    max-width: 340px;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
}

.number-duel-target {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.number-duel-target strong {
    color: var(--accent-primary);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.number-duel-value {
    min-height: 70px;
    display: grid;
    place-items: center;
    border: 1px solid #60a5fa;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), color-mix(in srgb, var(--bg-tertiary) 90%, transparent));
    color: var(--text-primary);
    font-size: 2.45rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.number-duel-distance {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.number-duel-ops {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.number-duel-op {
    min-width: 0;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 56%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-input) 82%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}

.number-duel-op strong {
    font-size: 0.92rem;
    font-weight: 950;
}

.number-duel-op span {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.number-duel-op:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.number-duel-history {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.number-duel-history-row,
.number-duel-empty {
    min-height: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 42%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.number-duel-history-row strong,
.number-duel-history-row em {
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    text-align: center;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.number-duel-history-row em {
    color: #93c5fd;
}

.number-duel-empty {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-clue,
body[data-theme="default"][data-default-mode="light"] .number-duel-value {
    border-color: #6aa8ff;
    background: linear-gradient(180deg, #ffffff, #f4f7fb);
    color: #111827;
    box-shadow:
        0 8px 18px rgba(23, 37, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-clue span,
body[data-theme="default"][data-default-mode="light"] .number-duel-distance,
body[data-theme="default"][data-default-mode="light"] .number-duel-target {
    color: #4b5563;
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-remaining {
    border-color: rgba(17, 24, 39, 0.12);
    background: #e5e7eb;
    color: #374151;
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-controls {
    border-color: rgba(17, 24, 39, 0.16);
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06);
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-input {
    color: #111827;
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-submit,
body[data-theme="default"][data-default-mode="light"] .number-duel-op:not(:disabled) {
    border-color: #111827;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08);
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-submit {
    background: #111827;
    color: #ffffff;
}

body[data-theme="default"][data-default-mode="light"] .higher-lower-history-row,
body[data-theme="default"][data-default-mode="light"] .higher-lower-empty,
body[data-theme="default"][data-default-mode="light"] .number-duel-history-row,
body[data-theme="default"][data-default-mode="light"] .number-duel-empty {
    border-color: rgba(17, 24, 39, 0.16);
    background: rgba(255, 255, 255, 0.56);
    color: #374151;
}

body[data-theme="default"][data-default-mode="light"] .number-duel-history-row strong,
body[data-theme="default"][data-default-mode="light"] .number-duel-history-row em,
body[data-theme="default"][data-default-mode="light"] .higher-lower-history-number {
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
}

body[data-theme="default"][data-default-mode="light"] .number-duel-op:disabled {
    opacity: 0.42;
    background: rgba(255, 255, 255, 0.35);
    color: #6b7280;
}

.higher-lower-history-row strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.higher-lower-history-row em {
    color: var(--text-muted);
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.68rem;
}

.higher-lower-empty {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
}

/* Friends drawer */
.friends-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.48);
}

.friends-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1201;
    width: min(360px, 100vw);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-left: 1px solid color-mix(in srgb, var(--border-secondary) 55%, transparent);
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.34);
    transform: translateX(100%);
    transition: transform 0.18s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.friends-drawer.open {
    transform: translateX(0);
}

.friends-drawer-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 0.9rem 0.75rem;
    background: var(--theme-header-bg, var(--bg-tertiary));
    border-bottom: 1px solid color-mix(in srgb, var(--border-secondary) 55%, transparent);
}

.friends-drawer-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.friends-drawer-title {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.1;
}

.friends-drawer-count {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.friends-list {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-y: auto;
    padding: 0.65rem;
    scrollbar-width: none;
}

.friends-list::-webkit-scrollbar {
    display: none;
}

.friend-row {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.55rem 0.7rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 38%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.friend-row:hover,
.friend-row:focus-visible {
    border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-secondary));
    background: color-mix(in srgb, var(--bg-tertiary) 88%, var(--accent-primary) 5%);
    outline: none;
}

.friend-row:active {
    transform: translateY(1px);
}

.friend-row.has-unread {
    border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-secondary));
}

.friend-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.friend-name-line {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.22rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.friend-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 800;
}

.friend-status {
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 800;
}

.friend-status-available {
    color: #6ee7a8;
}

.friend-status-busy,
.friend-status-in_conversation {
    color: #fbbf24;
}

.friend-status-inactive {
    color: var(--text-muted);
}

.friend-note,
.friend-preview {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.25;
}

.friend-note {
    color: var(--accent-primary);
    opacity: 0.86;
}

.friend-row-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.friend-overflow-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--text-muted);
}

.friend-overflow-btn:hover,
.friend-overflow-btn[aria-expanded="true"] {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
}

.friend-overflow-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2;
    min-width: 128px;
    padding: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 55%, transparent);
    border-radius: 8px;
    background: var(--bg-secondary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.friend-overflow-item {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.friend-overflow-item:hover {
    background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
    color: var(--text-primary);
}

.friend-overflow-item-danger {
    color: #f87171;
}

.friend-overflow-item-danger:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

.friends-drawer-empty {
    padding: 1.25rem 0.9rem;
    color: var(--text-muted);
    font-size: 0.86rem;
    text-align: center;
}

.friend-delete-confirmation-content {
    width: min(340px, calc(100vw - 32px));
    padding: 1.05rem;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 55%, transparent);
    border-radius: 10px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.friend-delete-confirmation-content .modal-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.friend-delete-confirmation-content .modal-message {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.friend-delete-confirmation-content .modal-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.friend-delete-confirm-button {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

@media (max-width: 640px) {
    .friends-drawer-overlay {
        background: rgba(0, 0, 0, 0.56);
    }

    .friends-drawer {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: min(92dvh, 720px);
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border-secondary) 55%, transparent);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.38);
        transform: translateY(100%);
    }

    .friends-drawer.open {
        transform: translateY(0);
    }

    .friends-drawer-header {
        padding-top: 0.85rem;
    }
}