/* ============================================================
   EconQ — UI extensions: auth, profile, admin, i18n
   ============================================================ */

/* ---- Language dropdown ------------------------------------ */
.lang-dropdown-wrap { position: relative; }

/* ---- HUD chat button -------------------------------------- */
.hud-chat-wrap { position: relative; }

#btn-chat { position: relative; }

.hud-chat-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* ---- Chat partner dropdown panel -------------------------- */
.chat-panel-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 210px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 900;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: var(--transition);
}

.chat-panel-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.chat-panel-title {
    padding: 10px 12px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
}

.chat-panel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-panel-row:hover { background: rgba(255,255,255,.06); }

.chat-panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-panel-name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.chat-panel-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

.chat-panel-empty {
    padding: 14px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

[dir='rtl'] .chat-panel-dropdown { right: auto; left: 0; }

#btn-lang { font-size: 0.75rem; font-weight: 700; font-family: monospace; letter-spacing: 0.03em; width: auto; min-width: 60px; padding: 0 10px; }

.lang-label { line-height: 1; }

.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 175px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 900;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: var(--transition);
}

.lang-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    color: var(--text-mid);
    transition: background var(--transition);
    text-align: left;
}

.lang-option:hover  { background: var(--bg-card-hover); color: var(--text); }
.lang-option.active { color: var(--primary); background: var(--primary-dim); }
.lang-code          { font-size: 0.75rem; font-weight: 700; font-family: monospace; min-width: 46px; color: var(--primary); letter-spacing: 0.02em; }

/* ---- HUD auth button -------------------------------------- */
.hud-user-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-mid);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hud-user-btn:hover,
.hud-user-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--primary-glow);
}

.hud-user-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Auth Modal ------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transform: scale(.96) translateY(12px);
    transition: transform var(--transition);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.modal-overlay.open .modal-card {
    transform: scale(1) translateY(0);
}

.modal-card-header { padding: 1.25rem 1.5rem 0; }

.modal-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    color: var(--primary);
    text-shadow: var(--primary-glow);
    text-align: center;
    margin-bottom: 1.25rem;
}

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

.modal-tab {
    flex: 1;
    padding: 0.6rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color var(--transition);
    position: relative;
}

.modal-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.modal-tab.active         { color: var(--primary); }
.modal-tab.active::after  { transform: scaleX(1); }

.modal-body { padding: 1.25rem 1.5rem 1.5rem; }

/* Invite banner */
.invite-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--text-mid);
    background: var(--primary-dim);
    border: 1px solid var(--border);
}

.invite-banner i       { color: var(--primary); }
.invite-banner.expired { background: rgba(255,68,85,.1); border-color: rgba(255,68,85,.25); }
.invite-banner.expired i { color: var(--red); }

/* Form elements */
.form-group { margin-bottom: 0.85rem; }

.form-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.35rem;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,212,255,.1);
}

.form-input::placeholder { color: var(--text-dim); }

.form-error {
    font-size: 0.74rem;
    color: var(--red);
    margin-top: 0.25rem;
    min-height: 1rem;
}

.form-submit {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background var(--transition);
}

.form-submit:hover    { background: #00b8e0; }
.form-submit:disabled { opacity: .5; cursor: not-allowed; }

.form-switch-link {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.form-switch-link button {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 2px;
    text-decoration: underline;
    font-family: inherit;
}

/* ---- Profile Panel ---------------------------------------- */
.profile-panel {
    position: fixed;
    top: 0;
    right: calc(-1 * var(--panel-width) - 2px);
    width: var(--panel-width);
    height: 100%;
    z-index: 1200;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    transition: right var(--transition);
    overflow: hidden;
}

.profile-panel.open { right: 0; }

.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.profile-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.profile-name  { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.profile-role  { font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
.admin-role    { color: var(--accent) !important; }

.profile-stats-row {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.profile-stat { flex: 1; padding: 0.75rem 0.5rem; text-align: center; }
.profile-stat + .profile-stat { border-left: 1px solid var(--border); }

.profile-stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.profile-stat-label { font-size: 0.58rem; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.panel-body::-webkit-scrollbar       { width: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.profile-section { padding: 0.85rem 1rem 0; }

.profile-section-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 10px;
}

/* Profile — language dropdown (replaces grid) */
.profile-section-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-lang-details {
    position: relative;
}

/* Hide native <details> triangle */
.profile-lang-details > summary { list-style: none; }
.profile-lang-details > summary::-webkit-details-marker { display: none; }

.profile-lang-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
    white-space: nowrap;
}
.profile-lang-trigger:hover,
.profile-lang-details[open] .profile-lang-trigger {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.profile-lang-flag { font-size: 1rem; line-height: 1; }

.profile-lang-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
}

.profile-lang-chevron {
    font-size: .6rem;
    color: var(--text-dim);
    transition: transform .2s;
    margin-left: 2px;
}
.profile-lang-details[open] .profile-lang-chevron {
    transform: rotate(180deg);
}

/* Dropdown body */
.profile-lang-dd-body {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 200;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0,0,0,.45);
    min-width: 150px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.profile-lang-item:hover  { background: rgba(255,255,255,.07); }
.profile-lang-item.active { background: var(--primary-dim); color: var(--primary); }

/* Invite list */
.invite-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.invite-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 10px;
}

.invite-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.invite-status-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-active  { background: rgba(0,255,136,.12); color: var(--green); border: 1px solid rgba(0,255,136,.25); }
.badge-used    { background: rgba(255,255,255,.05); color: var(--text-dim); border: 1px solid var(--border); }
.badge-expired { background: rgba(255,68,85,.1); color: var(--red); border: 1px solid rgba(255,68,85,.25); }

.invite-copy-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 0.68rem;
    padding: 3px 8px;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

.invite-copy-btn:hover { background: var(--primary-dim); border-color: var(--primary); }

.invite-meta { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; }

/* Create invite form inside profile */
.create-invite-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 10px;
}

.create-invite-form .form-input   { font-size: 0.85rem; padding: 0.45rem 0.7rem; }
.create-invite-form .form-submit  { font-size: 0.68rem; padding: 0.45rem; margin-top: 7px; }

/* Logout */
.profile-logout-btn {
    margin: 0.6rem 1rem;
    width: calc(100% - 2rem);
    padding: 0.6rem;
    background: rgba(255,68,85,.08);
    border: 1px solid rgba(255,68,85,.25);
    border-radius: var(--radius-sm);
    color: var(--red);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-logout-btn:hover { background: rgba(255,68,85,.18); border-color: var(--red); }

/* ---- Admin Panel ------------------------------------------ */
.admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(0,0,0,.82);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
}

.admin-overlay.open { opacity: 1; pointer-events: auto; }

.admin-panel {
    width: 100%;
    max-width: 1100px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-16px);
    transition: transform var(--transition);
    min-height: 300px;
    max-height: calc(100vh - 3rem);
}

.admin-overlay.open .admin-panel { transform: translateY(0); }

.admin-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.admin-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.admin-search-wrap {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
    position: relative;
}

.admin-search {
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--transition);
}

.admin-search:focus { border-color: var(--primary); }

.admin-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 0.72rem;
    pointer-events: none;
}

.admin-body {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.admin-table { width: 100%; min-width: 800px; border-collapse: collapse; }
.admin-date-col { font-size: 0.78rem; white-space: nowrap; color: var(--text-dim); }
.admin-email-col { font-size: 0.8rem; color: var(--text-mid); }

.admin-table th {
    padding: 0.55rem 0.9rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    color: var(--text-dim);
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    z-index: 1;
}

.admin-table td {
    padding: 0.6rem 0.9rem;
    font-size: 0.84rem;
    color: var(--text-mid);
    border-bottom: 1px solid rgba(255,255,255,.04);
    vertical-align: middle;
}

.admin-table tr:hover td { background: var(--bg-card-hover); }

.admin-username-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text);
}

.admin-user-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.status-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.status-active  { background: rgba(0,255,136,.1);  color: var(--green); border: 1px solid rgba(0,255,136,.2); }
.status-banned  { background: rgba(255,68,85,.1);  color: var(--red);   border: 1px solid rgba(255,68,85,.2); }
.status-staff   { background: rgba(255,215,0,.1);  color: var(--gold);  border: 1px solid rgba(255,215,0,.2); }

.admin-actions-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.admin-action-btn {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid;
    white-space: nowrap;
}

.btn-ban   { background: rgba(255,68,85,.08);  border-color: rgba(255,68,85,.25);  color: var(--red); }
.btn-ban:hover   { background: rgba(255,68,85,.2);  border-color: var(--red); }
.btn-unban { background: rgba(0,255,136,.08); border-color: rgba(0,255,136,.25); color: var(--green); }
.btn-unban:hover { background: rgba(0,255,136,.2); border-color: var(--green); }
.btn-del   { background: rgba(255,107,53,.08); border-color: rgba(255,107,53,.25); color: var(--accent); }
.btn-del:hover   { background: rgba(255,107,53,.2);  border-color: var(--accent); }

.ban-reason-input .form-input { font-size: 0.75rem; padding: 3px 7px; }

.admin-empty, .admin-loading {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ---- Admin tabs ------------------------------------------- */
.admin-tab-row {
    display: flex;
    gap: 4px;
    flex: 1;
}
.admin-tab {
    padding: 5px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-mid);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.05em;
}
.admin-tab:hover { color: var(--text); border-color: var(--primary); }
.admin-tab.active { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }

/* ---- Security pane ---------------------------------------- */
#admin-pane-users   { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#admin-pane-security { display: flex; flex-direction: column; flex: 1; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.sec-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.sec-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sec-ban-form {
    display: flex;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
}
.sec-ip-input, .sec-reason-input {
    padding: 5px 10px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    outline: none;
    transition: border-color var(--transition);
}
.sec-ip-input     { width: 140px; }
.sec-reason-input { flex: 1; min-width: 120px; }
.sec-ip-input:focus, .sec-reason-input:focus { border-color: var(--primary); }
.sec-ban-btn {
    padding: 5px 14px;
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.5);
    border-radius: var(--radius-sm);
    color: #ef4444;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sec-ban-btn:hover { background: rgba(239,68,68,.3); }

.sec-banned-list {
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.sec-ban-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    flex-wrap: wrap;
}
.sec-ban-row:last-child { border-bottom: none; }
.sec-ip   { font-family: monospace; color: var(--primary); font-weight: 700; min-width: 120px; }
.sec-reason { flex: 1; color: var(--text-mid); font-style: italic; }
.sec-ts   { color: var(--text-dim); font-size: 0.72rem; white-space: nowrap; }
.sec-by   { color: var(--text-dim); font-size: 0.72rem; white-space: nowrap; }
.sec-unban-btn {
    padding: 2px 10px;
    background: rgba(0,255,136,.1);
    border: 1px solid rgba(0,255,136,.3);
    border-radius: var(--radius-sm);
    color: var(--green);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sec-unban-btn:hover { background: rgba(0,255,136,.2); }

.sec-events-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sec-events-table { width: 100%; border-collapse: collapse; }
.sec-events-table th, .sec-events-table td {
    padding: 7px 10px;
    text-align: left;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
}
.sec-events-table th { color: var(--text-dim); font-weight: 700; letter-spacing: 0.06em; font-size: 0.7rem; }
.sec-events-table tr:hover td { background: var(--bg-card-hover); }
.sec-ts-cell   { white-space: nowrap; color: var(--text-dim); font-size: 0.72rem; }
.sec-path-cell { font-family: monospace; font-size: 0.72rem; color: var(--text-mid); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-ip-link   { font-family: monospace; color: var(--primary); cursor: pointer; font-weight: 700; }
.sec-ip-link:hover { text-decoration: underline; }
.sec-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.sec-ban-quick-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    font-size: 0.85rem;
}
.sec-ban-quick-btn:hover { background: rgba(239,68,68,.15); }
.sec-empty { text-align: center; padding: 1rem; color: var(--text-dim); font-size: 0.82rem; }

/* ---- Toast ------------------------------------------------ */
.toast-container {
    position: fixed;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.toast {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 7px 16px;
    font-size: 0.82rem;
    color: var(--text);
    backdrop-filter: blur(12px);
    white-space: nowrap;
    transition: opacity 0.4s ease;
    animation: toast-in 0.25s ease forwards;
}

.toast-success { border-color: rgba(0,255,136,.4); color: var(--green); }
.toast-error   { border-color: rgba(255,68,85,.4);  color: var(--red); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- RTL support ------------------------------------------ */
[dir='rtl'] .profile-panel,
[dir='rtl'] .layer-panel {
    right: auto;
    left: calc(-1 * var(--panel-width) - 2px);
    border-left: none;
    border-right: 1px solid var(--border);
}

[dir='rtl'] .profile-panel.open,
[dir='rtl'] .layer-panel.open { left: 0; }

[dir='rtl'] .lang-dropdown { right: auto; left: 0; }

[dir='rtl'] .admin-table th,
[dir='rtl'] .admin-table td { text-align: right; }

[dir='rtl'] .admin-username-cell,
[dir='rtl'] .admin-actions-cell { flex-direction: row-reverse; }

[dir='rtl'] .form-label { text-align: right; }
[dir='rtl'] .form-switch-link { direction: rtl; }
[dir='rtl'] .invite-banner { flex-direction: row-reverse; }

/* ---- Mobile ----------------------------------------------- */
@media (max-width: 640px) {
    :root { --panel-width: 100vw; }

    .profile-panel,
    .layer-panel { right: -100vw; }

    [dir='rtl'] .profile-panel,
    [dir='rtl'] .layer-panel { left: -100vw; }

    .admin-panel { border-radius: 0; max-height: 100vh; }
    .admin-overlay { padding: 0; }
    .admin-email-col,
    .admin-date-col { display: none; }

    .hud-user-btn { max-width: 90px; }
    .lang-dropdown { width: 155px; }
}

/* ---- Online players panel --------------------------------- */
.online-players-panel {
    position: fixed;
    bottom: 48px;
    right: 0;
    width: 200px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1200;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: var(--transition);
}

.online-players-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.online-panel-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    padding: 8px 12px 4px;
}

.online-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
}

.online-player-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.online-player-name {
    font-size: 0.82rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-panel-empty {
    padding: 8px 12px 10px;
    font-size: 0.78rem;
    color: var(--text-dim);
}

#hud-online { cursor: pointer; user-select: none; }
#hud-online:hover { opacity: .85; }

[dir='rtl'] .online-players-panel {
    right: auto; left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ---- Email form in invite list ---------------------------- */
.invite-email-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.invite-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    background: rgba(255,215,0,.07);
    border: 1px solid rgba(255,215,0,.2);
    color: var(--gold);
}
.invite-email-btn:hover { background: rgba(255,215,0,.18); border-color: var(--gold); }

/* ---- Chat windows ----------------------------------------- */
#chat-container { position: fixed; bottom: 0; right: 0; z-index: 2000; pointer-events: none; }

.chat-window {
    position: absolute;
    bottom: 0;
    width: 264px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: all;
    animation: chat-slide-up 0.22s ease forwards;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0,0,0,.45);
}

@keyframes chat-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.chat-win-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 12px;
    cursor: default;
    flex-shrink: 0;
}

.chat-win-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-win-name {
    flex: 1;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-win-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.78rem;
    border-radius: 4px;
    transition: var(--transition);
    flex-shrink: 0;
}
.chat-win-close:hover { color: var(--text); background: rgba(255,255,255,.06); }

.chat-win-messages {
    flex: 1;
    min-height: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.chat-win-messages::-webkit-scrollbar { width: 4px; }
.chat-win-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.chat-msg { display: flex; flex-direction: column; max-width: 85%; margin-bottom: 4px; }
.chat-msg.own  { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }

.chat-msg-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
    padding: 0 6px;
    filter: brightness(1.25);
}

.chat-bubble {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.4;
    word-break: break-word;
    color: var(--text);
}

.chat-msg.own  .chat-bubble { border-radius: 10px 10px 4px 10px; }
.chat-msg.other .chat-bubble { border-radius: 10px 10px 10px 4px; }

.chat-win-footer {
    display: flex;
    gap: 6px;
    padding: 8px 8px 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-win-input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    padding: 5px 10px;
    outline: none;
    transition: var(--transition);
}
.chat-win-input:focus { border-color: var(--accent); }
.chat-win-input::placeholder { color: var(--text-dim); }

.chat-win-send {
    background: rgba(0,212,255,.12);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: var(--radius-sm);
    color: var(--accent);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.chat-win-send:hover { background: rgba(0,212,255,.25); border-color: var(--accent); }

/* Chat trigger button in invite list */
.open-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.25);
    color: var(--accent);
    position: relative;
}
.open-chat-btn:hover { background: rgba(0,212,255,.2); border-color: var(--accent); }

.chat-badge {
    background: var(--red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Chat status bar */
.chat-status-bar {
    font-size: .7rem;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    margin: 4px 6px;
}
.chat-status-reconnecting {
    background: rgba(255,187,68,.12);
    color: #ffbb44;
}
.chat-status-auth {
    background: rgba(255,85,85,.12);
    color: #ff5555;
}

/* RTL chat */
[dir='rtl'] .chat-window { left: var(--chat-right, 0); right: auto; }
[dir='rtl'] .chat-msg.own  { align-self: flex-start; align-items: flex-start; }
[dir='rtl'] .chat-msg.other { align-self: flex-end; align-items: flex-end; }
[dir='rtl'] .chat-msg.own  .chat-bubble { border-radius: 10px 10px 10px 4px; }
[dir='rtl'] .chat-msg.other .chat-bubble { border-radius: 10px 10px 4px 10px; }

/* Mobile: single window, full-width */
@media (max-width: 640px) {
    .chat-window { width: calc(100vw - 16px); left: 8px; right: 8px; }
    [dir='rtl'] .chat-window { left: 8px; }
}

/* ============================================================
   Donate button (HUD)
   ============================================================ */
.hud-btn-donate { color: #ff6b8a; }
.hud-btn-donate:hover { color: #ff3366; background: rgba(255,51,102,.12); }

/* ============================================================
   Donate modal
   ============================================================ */
.donate-modal-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: fadeIn .18s ease;
}
.donate-modal-overlay.donate-modal-fade-out {
    animation: fadeOut .2s ease forwards;
}
@keyframes fadeOut {
    to { opacity: 0; }
}

.donate-modal-card {
    background: var(--panel-bg, #0d1b2e);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    width: 100%; max-width: 400px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    position: relative;
    overflow: hidden;
    animation: slideUp .22s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUp {
    from { transform: translateY(32px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.donate-close-btn {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.07); border: none;
    color: rgba(255,255,255,.6); border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.donate-close-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Header section */
.donate-header {
    background: linear-gradient(135deg, #1a0a20 0%, #0f1d33 100%);
    padding: 28px 24px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.donate-heart-icon {
    font-size: 2.4rem; color: #ff3366;
    margin-bottom: 10px;
    animation: heartbeat 1.4s ease infinite;
}
@keyframes heartbeat {
    0%,100% { transform: scale(1); }
    14%      { transform: scale(1.2); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.12); }
    70%      { transform: scale(1); }
}
.donate-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem; font-weight: 700;
    color: #fff; margin-bottom: 6px;
}
.donate-subtitle {
    font-size: .82rem; color: rgba(255,255,255,.55);
}

/* Body */
.donate-body { padding: 20px 24px 24px; }

.donate-company-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.2);
    border-radius: 20px; padding: 5px 14px;
    font-size: .82rem; color: #00d4ff; margin-bottom: 14px;
}
.donate-desc {
    font-size: .83rem; color: rgba(255,255,255,.6);
    line-height: 1.55; margin: 0 0 18px;
}

/* Amount buttons */
.donate-amounts {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-bottom: 14px;
}
.donate-amount-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.8);
    border-radius: 10px; padding: 10px 8px;
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.donate-amount-btn:hover {
    background: rgba(255,51,102,.1); border-color: rgba(255,51,102,.4); color: #fff;
}
.donate-amount-btn.active {
    background: rgba(255,51,102,.18); border-color: #ff3366; color: #ff6b8a;
    transform: scale(1.03);
}

/* Custom amount */
.donate-custom-wrap { margin-bottom: 18px; }
.donate-custom-label {
    display: block; font-size: .78rem;
    color: rgba(255,255,255,.5); margin-bottom: 6px;
}
.donate-custom-row {
    display: flex; gap: 8px; align-items: center;
}
.donate-custom-input {
    flex: 1; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    color: #fff; padding: 9px 12px; font-size: .9rem;
    outline: none; transition: border-color .15s;
}
.donate-custom-input:focus { border-color: rgba(0,212,255,.4); }
.donate-currency-badge {
    background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.18);
    color: #00d4ff; border-radius: 8px; padding: 8px 12px;
    font-size: .82rem; font-weight: 700; white-space: nowrap;
}

/* Action button / link */
.donate-pay-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 20px;
    background: linear-gradient(135deg, #ff3366, #c0186e);
    border: none; border-radius: 12px;
    color: #fff; font-size: .95rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: opacity .15s, transform .1s;
    margin-bottom: 12px;
}
.donate-pay-btn:hover { opacity: .9; transform: translateY(-1px); }
.donate-pay-btn:active { transform: translateY(0); }
.donate-pay-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.donate-link-btn { /* when mode=link */
    background: linear-gradient(135deg, #0074d9, #0044a8);
}

/* Secure note */
.donate-secure-note {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .75rem; color: rgba(255,255,255,.35);
}

@media (max-width: 460px) {
    .donate-modal-card { border-radius: 14px 14px 0 0; }
    .donate-modal-overlay { align-items: flex-end; padding: 0; }
}

/* ============================================================
   Quiz theme picker
   ============================================================ */
.quiz-theme-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 16px 10px;
}
.quiz-theme-label {
    font-size: .75rem; color: rgba(255,255,255,.45);
    white-space: nowrap; flex-shrink: 0;
}
.quiz-theme-btns {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.quiz-theme-btn {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; color: rgba(255,255,255,.55);
    font-size: .9rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.quiz-theme-btn:hover {
    background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.3); color: #fff;
    transform: scale(1.05);
}
.quiz-theme-btn.active {
    background: rgba(0,212,255,.18); border-color: #00d4ff; color: #00d4ff;
    transform: scale(1.08);
}

/* ============================================================
   Minesweeper difficulty row (in game card)
   ============================================================ */
.mine-diff-row {
    display: flex; gap: 5px; margin: 6px 0 4px;
}
.mine-diff-btn {
    flex: 1; padding: 5px 4px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px; color: rgba(255,255,255,.55);
    font-size: .72rem; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mine-diff-btn:hover { background: rgba(255,170,0,.1); border-color: rgba(255,170,0,.3); color: #fff; }
.mine-diff-btn.active { background: rgba(255,170,0,.2); border-color: #ffaa00; color: #ffaa00; }

/* ============================================================
   Minesweeper overlay
   ============================================================ */
#mine-overlay {
    position: fixed; inset: 0; z-index: 1200;
    pointer-events: none; /* markers handle clicks directly */
}

/* HUD strip */
.mine-hud {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: stretch; height: 54px;
    background: rgba(8,16,31,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    pointer-events: auto;
}
.mine-hud-side {
    display: flex; align-items: center; gap: 7px;
    padding: 0 20px; flex: 1;
}
.mine-hud-right { justify-content: flex-end; }
.mine-hud-icon { font-size: 1rem; color: #00d4ff; }
.mine-hud-icon.miss { color: #ff5555; }
.mine-hud-val {
    font-family: 'Orbitron', sans-serif; font-size: 1.3rem;
    font-weight: 700; color: #fff;
}
.mine-hud-lbl { font-size: .7rem; color: rgba(255,255,255,.45); }
.mine-hud-mid {
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
}
.mine-stop-btn {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7); border-radius: 50%;
    width: 34px; height: 34px; cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.mine-stop-btn:hover { background: rgba(255,85,85,.2); color: #ff5555; }

/* Hint bar */
.mine-hint {
    position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
    background: rgba(8,16,31,.88); border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px; padding: 8px 20px;
    color: rgba(255,255,255,.7); font-size: .82rem; white-space: nowrap;
    pointer-events: none;
}

/* Feedback pop-up */
.mine-feedback {
    position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
    border-radius: 20px; padding: 8px 22px;
    font-size: .9rem; font-weight: 700;
    pointer-events: none;
    animation: mfbIn .2s ease;
}
@keyframes mfbIn { from { transform: translateX(-50%) scale(.8); opacity: 0; } }
.mine-fb-hit    { background: rgba(255,100,0,.9);  color: #fff; }
.mine-fb-sunk   { background: rgba(255,51,51,.9);  color: #fff; }
.mine-fb-miss   { background: rgba(0,0,0,.7);      color: rgba(255,255,255,.8); }

/* End screen */
.mine-end {
    position: absolute; inset: 54px 0 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); pointer-events: auto;
}
.mine-end-inner {
    background: var(--panel-bg, #0d1b2e);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 32px 40px;
    text-align: center; min-width: 260px;
    box-shadow: 0 16px 60px rgba(0,0,0,.5);
}
.mine-end-icon  { font-size: 3rem; margin-bottom: 12px; }
.mine-end-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem; color: #00d4ff; margin-bottom: 16px;
}
.mine-end-stats {
    color: rgba(255,255,255,.7); font-size: .88rem;
    line-height: 1.8; margin-bottom: 20px;
}
.mine-end-stats strong { color: #fff; }
.mine-end-btns { display: flex; gap: 10px; justify-content: center; }

/* ============================================================
   Minesweeper territory markers (Leaflet divIcon)
   ============================================================ */
.mine-cell {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; border-radius: 6px;
    width: 78px; height: 28px;
    font-size: .72rem; font-weight: 700;
    cursor: pointer; transition: filter .12s;
    white-space: nowrap; overflow: hidden;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.mine-cell:hover { filter: brightness(1.25); }

.mine-hidden {
    background: rgba(15,40,80,.92);
    border-color: rgba(0,212,255,.25);
    color: rgba(255,255,255,.75);
}
.mine-cell-lbl { font-size: .68rem; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }

.mine-hit {
    background: rgba(255,100,0,.9);
    border-color: #ff8800;
    color: #fff; font-size: 1rem;
    animation: mhit .3s ease;
}
@keyframes mhit { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

.mine-sunk {
    background: rgba(180,20,20,.9);
    border-color: #ff3333;
    color: #ffaaaa; font-size: .75rem;
}

.mine-safe0 {
    background: rgba(0,60,20,.7);
    border-color: rgba(0,255,100,.15);
    color: rgba(0,255,120,.8); font-size: .85rem;
}

.mine-safe {
    background: rgba(10,20,40,.85);
    border-color: rgba(255,255,255,.15);
}
.mine-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem; font-weight: 900;
}
.mine-n1 .mine-num { color: #4fc3f7; }
.mine-n2 .mine-num { color: #66bb6a; }
.mine-n3 .mine-num { color: #ffa726; }
.mine-n4 .mine-num { color: #ef5350; }

/* ---- Game Menu Overlay ------------------------------------ */
.game-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.game-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.game-menu-panel {
    width: 100%;
    max-width: 480px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transform: scale(.96) translateY(12px);
    transition: transform var(--transition);
}

.game-menu-overlay.open .game-menu-panel {
    transform: scale(1) translateY(0);
}

.game-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.game-menu-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.game-menu-body { padding: 1rem; display: flex; flex-direction: column; gap: 8px; }

.game-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: border-color var(--transition);
}

.game-card:hover { border-color: var(--primary); }

.game-card-icon {
    font-size: 2rem;
    color: var(--primary);
    width: 48px;
    text-align: center;
    flex-shrink: 0;
    text-shadow: var(--primary-glow);
}

.game-card-info { flex: 1; min-width: 0; }

.game-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 3px;
}

.game-card-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.4;
}

.game-card-btn {
    padding: 0.5rem 1.1rem;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}

.game-card-btn:hover { background: #00b8e0; }

/* ---- Quiz HUD --------------------------------------------- */
#quiz-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
}

.quiz-top-card {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 14px 10px;
    pointer-events: all;
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
}

.quiz-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.quiz-q-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.quiz-score-wrap {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 5px;
    justify-content: center;
}

.quiz-score-label {
    font-size: 0.62rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quiz-score-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    text-shadow: var(--primary-glow);
}

.quiz-stop-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.quiz-stop-btn:hover { color: var(--red); border-color: var(--red); }

.quiz-q-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.2;
}

.quiz-q-cat {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.quiz-progress-bar-wrap {
    height: 3px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.4s ease;
    box-shadow: 0 0 6px var(--primary);
}

.quiz-hint {
    position: absolute;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.65);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 7px 16px;
    font-size: 0.78rem;
    color: var(--text-mid);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    animation: hint-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

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

/* Result card */
.quiz-result-card {
    position: absolute;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 14px 16px;
    pointer-events: all;
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
    animation: result-slide-up 0.25s ease forwards;
}

@keyframes result-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.quiz-result-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.quiz-result-dist {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.quiz-result-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-dim);
}

.quiz-result-name {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.quiz-result-pts {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.quiz-result-pts.pts-great { color: #00ff88; text-shadow: 0 0 12px rgba(0,255,136,.5); }
.quiz-result-pts.pts-good  { color: #7bed9f; }
.quiz-result-pts.pts-ok    { color: #ffa502; }
.quiz-result-pts.pts-miss  { color: var(--red); }

.quiz-next-btn {
    width: 100%;
    padding: 0.55rem;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background var(--transition);
}

.quiz-next-btn:hover { background: #00b8e0; }

/* End screen */
.quiz-end-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.75);
    pointer-events: all;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.quiz-end-inner {
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    animation: result-slide-up 0.3s ease forwards;
}

.quiz-end-grade {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    text-shadow: var(--primary-glow);
}

.quiz-end-score-row {
    margin-bottom: 1rem;
}

.quiz-end-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
}

.quiz-end-sep {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--text-dim);
    margin: 0 4px;
}

.quiz-end-max {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--text-dim);
}

.quiz-end-bar-wrap {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.quiz-end-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #00ff88);
    border-radius: 3px;
    transition: width 0.8s ease;
    box-shadow: 0 0 8px var(--primary);
}

.quiz-end-btns {
    display: flex;
    gap: 8px;
}

.quiz-btn-primary {
    flex: 1;
    padding: 0.6rem;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background var(--transition);
}

.quiz-btn-primary:hover { background: #00b8e0; }

.quiz-btn-secondary {
    flex: 1;
    padding: 0.6rem;
    background: var(--bg-card);
    color: var(--text-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

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

/* Quiz map pins */
.quiz-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.65));
    line-height: 1;
}

.quiz-pin.guess   { font-size: 1.75rem; color: #ff6b6b; }
.quiz-pin.correct { font-size: 1.5rem;  color: #00ff88; }

/* Mobile quiz adjustments */
@media (max-width: 640px) {
    .quiz-top-card { top: 58px; width: calc(100vw - 24px); }
    .quiz-result-card { width: calc(100vw - 24px); }
    .quiz-hint { white-space: normal; text-align: center; width: calc(100vw - 48px); }
}

/* ---- Timer (quiz + conquest) ------------------------------ */
.quiz-timer-row,
.conquest-timer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
}

.quiz-timer-icon,
.conquest-timer-icon {
    font-size: 0.78rem;
    color: var(--primary);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.3s;
}

.quiz-timer-icon.urgent,
.conquest-timer-icon.urgent { color: var(--red); animation: hint-pulse 0.5s ease-in-out infinite; }

.quiz-timer-track,
.conquest-timer-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: hidden;
}

.quiz-timer-bar,
.conquest-timer-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.9s linear, background 0.3s;
    box-shadow: 0 0 4px rgba(0,212,255,.4);
}

.quiz-timer-bar.warning,
.conquest-timer-bar.warning { background: #ffa502; box-shadow: 0 0 4px rgba(255,165,2,.5); }

.quiz-timer-bar.urgent,
.conquest-timer-bar.urgent  { background: var(--red); box-shadow: 0 0 4px rgba(255,68,85,.5); }

.quiz-timer-txt,
.conquest-timer-txt {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-dim);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* ---- Conquest Overlay ------------------------------------- */
#conquest-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
}

/* HUD bar */
.conquest-hud {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
    pointer-events: all;
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
    overflow: hidden;
}

.conquest-hud-side {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

.conquest-hud-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    min-width: 80px;
}

.conquest-hud-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.conquest-hud-score.player { color: #00d4ff; text-shadow: 0 0 8px rgba(0,212,255,.5); }
.conquest-hud-score.ai     { color: #ff5555; text-shadow: 0 0 8px rgba(255,85,85,.5); }

.conquest-hud-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.conquest-remaining-txt {
    font-size: 0.62rem;
    color: var(--text-dim);
    text-align: center;
    white-space: nowrap;
    min-height: 14px;
}

.conquest-stop-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 0.66rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.conquest-stop-btn:hover { color: var(--red); border-color: var(--red); }

/* Hint */
.conquest-hint {
    position: absolute;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.65);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 7px 16px;
    font-size: 0.78rem;
    color: var(--text-mid);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    animation: hint-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Feedback */
.conquest-feedback {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    animation: result-slide-up 0.2s ease forwards;
}

/* AI turn message */
.conquest-ai-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,85,85,.15);
    border: 1px solid rgba(255,85,85,.3);
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff5555;
    pointer-events: none;
    backdrop-filter: blur(8px);
    animation: hint-pulse 1s ease-in-out infinite;
}

/* Question modal */
.conquest-q-modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    pointer-events: all;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.conquest-q-inner {
    width: 400px;
    max-width: calc(100vw - 32px);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem 1.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    animation: result-slide-up 0.2s ease forwards;
}

.conquest-q-territory-lbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    text-align: center;
    margin-bottom: 0.55rem;
}

.conquest-q-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.conquest-q-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 0.9rem;
}

.conquest-opt-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: left;
    line-height: 1.25;
}

.conquest-opt-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-dim);
    color: var(--primary);
}

.conquest-opt-btn.correct { background: rgba(0,255,136,.12); border-color: var(--green); color: var(--green); }
.conquest-opt-btn.wrong   { background: rgba(255,68,85,.12); border-color: var(--red);   color: var(--red); }
.conquest-opt-btn:disabled { cursor: not-allowed; opacity: 0.7; }

.conquest-opt-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-dim);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.conquest-opt-btn.correct .conquest-opt-label { color: var(--green); background: rgba(0,255,136,.15); }
.conquest-opt-btn.wrong   .conquest-opt-label { color: var(--red);   background: rgba(255,68,85,.15); }

/* End screen */
.conquest-end {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.78);
    pointer-events: all;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.conquest-end-inner {
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    animation: result-slide-up 0.3s ease forwards;
}

.conquest-end-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.conquest-end-title.win  { color: var(--green); text-shadow: 0 0 16px rgba(0,255,136,.5); }
.conquest-end-title.lose { color: var(--red);   text-shadow: 0 0 16px rgba(255,68,85,.4); }
.conquest-end-title.tie  { color: var(--text-mid); }

.conquest-end-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 1.5rem;
}

.conquest-end-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.conquest-end-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

.conquest-end-val.player { color: #00d4ff; text-shadow: 0 0 12px rgba(0,212,255,.5); }
.conquest-end-val.ai     { color: #ff5555; text-shadow: 0 0 12px rgba(255,85,85,.5); }

.conquest-end-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.conquest-end-vs {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--text-dim);
}

.conquest-end-btns { display: flex; gap: 8px; }

/* ---- Territory markers ------------------------------------ */
.conquest-territory {
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1.5px solid;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.03em;
    user-select: none;
    display: inline-block;
}

.conquest-territory.neutral {
    background: rgba(16,24,42,.82);
    border-color: rgba(100,150,200,.35);
    color: rgba(180,210,255,.75);
}

.conquest-territory.neutral:hover {
    border-color: var(--primary);
    background: rgba(0,212,255,.14);
    color: var(--primary);
    box-shadow: 0 0 8px rgba(0,212,255,.28);
}

.conquest-territory.player {
    background: rgba(0,212,255,.18);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 6px rgba(0,212,255,.28);
    cursor: default;
}

.conquest-territory.ai {
    background: rgba(255,85,85,.18);
    border-color: #ff5555;
    color: #ff5555;
    box-shadow: 0 0 6px rgba(255,85,85,.28);
    cursor: default;
}

.conquest-territory.targeted {
    border-color: #ffa502 !important;
    background: rgba(255,165,2,.18) !important;
    color: #ffa502 !important;
    box-shadow: 0 0 10px rgba(255,165,2,.4) !important;
    animation: territory-pulse 0.45s ease-in-out 3;
}

@keyframes territory-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

/* ---- Profile game stats ----------------------------------- */
.game-stats-body { padding: 2px 0; }

.game-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    flex-wrap: wrap;
}

.game-stat-row:last-child { border-bottom: none; }

.game-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-mid);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 110px;
}

.game-stat-label i { color: var(--primary); font-size: 0.74rem; width: 14px; text-align: center; }

.game-stat-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
}

.game-stat-best {
    font-size: 0.65rem;
    color: var(--text-dim);
    width: 100%;
    padding-left: 20px;
}

/* Mobile conquest */
@media (max-width: 640px) {
    .conquest-hud { top: 58px; }
    .conquest-q-opts { grid-template-columns: 1fr; }
    .conquest-hint { white-space: normal; text-align: center; width: calc(100vw - 48px); }
}

/* ============================================================
   Multiplayer — game menu partner section
   ============================================================ */
#mp-section {
    border-top: 1px solid var(--border);
    margin-top: .6rem;
    padding-top: .6rem;
}

.mp-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: .45rem;
}

.mp-section-head i { color: var(--primary); }

#mp-partner-list { display: flex; flex-direction: column; gap: 5px; }

/* ---- Partner row ------------------------------------------ */
.mp-partner-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
}

.mp-partner-info {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

/* Online/offline dot */
.mp-online-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .3s, box-shadow .3s;
}
.mp-online-dot.on  { /* background + box-shadow set inline */ }
.mp-online-dot.off { background: rgba(255,255,255,.2); }

.mp-partner-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-partner-status {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.mp-partner-status.status-on  { color: #44ff99; }
.mp-partner-status.status-off { color: var(--text-dim); }

/* Invite buttons (shown only when online) */
.mp-invite-btns { display: flex; gap: 4px; flex-shrink: 0; }

.mp-invite-game-btn {
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: var(--radius);
    color: var(--primary);
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.mp-invite-game-btn:hover {
    background: rgba(0,212,255,.2);
    border-color: var(--primary);
    transform: scale(1.1);
}

/* ============================================================
   Multiplayer — game-invite floating banner
   ============================================================ */
.mp-game-invite {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-panel);
    border: 2px solid;
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    box-shadow: 0 6px 32px rgba(0,0,0,.5);
    max-width: 92vw;
    animation: bannerIn .25s ease;
}

@keyframes bannerIn {
    from { opacity:0; transform: translateX(-50%) translateY(12px); }
    to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

.mp-invite-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mp-invite-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.mp-invite-who {
    font-size: .79rem;
    color: var(--text);
    white-space: nowrap;
}

.mp-invite-game {
    font-size: .71rem;
    color: var(--primary);
    font-style: normal;
    font-weight: 700;
    letter-spacing: .03em;
}

/* Keep old class for compat */
.mp-invite-text {
    font-size: .8rem;
    color: var(--text);
    white-space: nowrap;
}

.mp-join-btn {
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius);
    padding: 5px 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    transition: opacity .15s;
    white-space: nowrap;
}
.mp-join-btn:hover { opacity: .85; }

.mp-dismiss-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: .8rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color .15s;
}
.mp-dismiss-btn:hover { color: var(--text); }

/* ============================================================
   Multiplayer — quiz opponent comparison row
   ============================================================ */
.quiz-vs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: .5rem 0 .2rem;
    padding: .45rem .6rem;
    background: rgba(255,255,255,.05);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: .75rem;
}

.quiz-vs-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.quiz-vs-sep {
    font-size: .65rem;
    color: var(--text-dim);
    flex-shrink: 0;
}

.quiz-vs-name {
    font-size: .67rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.quiz-vs-dist {
    font-family: 'Orbitron', sans-serif;
    font-size: .7rem;
    font-weight: 700;
}

.quiz-vs-badge {
    font-size: .6rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: .04em;
}
.quiz-vs-badge.you-win  { background: rgba(0,212,255,.2);  color: var(--primary); }
.quiz-vs-badge.opp-win  { background: rgba(255,85,85,.2);  color: #ff5555; }
.quiz-vs-badge.tied     { background: rgba(255,255,255,.1); color: var(--text-dim); }

/* ============================================================
   Multiplayer — quiz opponent pin on map
   ============================================================ */
.quiz-pin.opponent {
    background: #ff88aa;
    box-shadow: 0 0 0 3px rgba(255,136,170,.35), 0 2px 8px rgba(0,0,0,.5);
}
.quiz-pin.opponent i { color: #fff; }

/* ============================================================
   Multiplayer — conquest partner badge on territory marker
   ============================================================ */
.conquest-partner-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.4);
    pointer-events: none;
}

/* Flash animation when partner misses a territory */
@keyframes partner-miss-flash {
    0%   { opacity: 1; }
    50%  { opacity: .2; }
    100% { opacity: 1; }
}
.conquest-territory.partner-miss {
    animation: partner-miss-flash .4s ease 2;
}

/* Mobile */
@media (max-width: 480px) {
    .mp-game-invite { flex-wrap: wrap; justify-content: center; }
    .mp-invite-text { text-align: center; }
}

/* ============================================================
   Bulletin Board Panel
   ============================================================ */
.bulletin-panel {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--panel-width) - 2px);
    width: var(--panel-width);
    height: 100%;
    z-index: 1200;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    transition: left var(--transition);
    overflow: hidden;
}
.bulletin-panel.open { left: 0; }

/* Header */
.bulletin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bulletin-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bulletin-title i { color: var(--primary); }

/* New-post form */
.bulletin-form {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bulletin-input,
.bulletin-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    padding: 6px 8px;
    outline: none;
    resize: none;
    transition: border-color var(--transition);
}
.bulletin-input:focus,
.bulletin-textarea:focus { border-color: var(--primary); }
.bulletin-textarea { min-height: 64px; max-height: 120px; }

.bulletin-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bulletin-char-count {
    font-size: 0.62rem;
    color: var(--text-dim);
}
.bulletin-submit-btn {
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    padding: 5px 14px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity var(--transition);
}
.bulletin-submit-btn:hover  { opacity: 0.85; }
.bulletin-submit-btn:disabled { opacity: 0.4; cursor: default; }

/* Login hint */
.bulletin-form-hint {
    padding: 0.6rem 1rem;
    font-size: 0.72rem;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

/* Post list */
.bulletin-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.bulletin-list::-webkit-scrollbar       { width: 4px; }
.bulletin-list::-webkit-scrollbar-track { background: transparent; }
.bulletin-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.bulletin-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
    color: var(--text-dim);
    font-size: 1.1rem;
}
.bulletin-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* Post card */
.bulletin-card {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background var(--transition);
}
.bulletin-card:hover { background: rgba(255,255,255,.03); }

.bulletin-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.bulletin-card-author {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.05em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bulletin-card-ago {
    font-size: 0.6rem;
    color: var(--text-dim);
    flex-shrink: 0;
}
.bulletin-delete-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: color var(--transition);
}
.bulletin-delete-btn:hover { color: #ff5555; }

.bulletin-card-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.3;
}
.bulletin-card-body {
    font-size: 0.76rem;
    color: var(--text-dim);
    line-height: 1.45;
    margin-bottom: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Card footer: vote button */
.bulletin-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.bulletin-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-dim);
    font-size: 0.72rem;
    padding: 3px 10px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bulletin-vote-btn:hover {
    background: rgba(0,212,255,.12);
    border-color: var(--primary);
    color: var(--primary);
}
.bulletin-vote-btn.active {
    background: rgba(0,212,255,.18);
    border-color: var(--primary);
    color: var(--primary);
}
.bulletin-vote-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
}

/* RTL support */
[dir='rtl'] .bulletin-panel {
    left: auto;
    right: calc(-1 * var(--panel-width) - 2px);
    border-right: none;
    border-left: 1px solid var(--border);
}
[dir='rtl'] .bulletin-panel.open { right: 0; left: auto; }

/* Mobile: full-width */
@media (max-width: 600px) {
    .bulletin-panel {
        width: 100%;
        left: -100%;
    }
    [dir='rtl'] .bulletin-panel {
        right: -100%;
        left: auto;
    }
}

/* ============================================================
   Drawing Game (Rajzolós)
   ============================================================ */

#draw-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.draw-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---- Lobby ------------------------------------------------ */
.draw-lobby-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2.8rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
}

.draw-lobby-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: .08em;
}

.draw-lobby-sub {
    font-size: 0.82rem;
    color: var(--text-dim);
    text-align: center;
}

.draw-lobby-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
}

.draw-btn-primary {
    width: 100%;
    padding: 0.65rem 1.2rem;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--transition);
}
.draw-btn-primary:hover { opacity: 0.85; }

.draw-btn-secondary {
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,.07);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}
.draw-btn-secondary:hover { background: rgba(255,255,255,.13); }

.draw-or {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.draw-join-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.draw-code-input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
    outline: none;
    transition: border-color var(--transition);
}
.draw-code-input:focus { border-color: var(--primary); }

.draw-error-msg {
    font-size: 0.78rem;
    color: var(--red);
    text-align: center;
    min-height: 1.1rem;
}

.draw-back-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    transition: color var(--transition);
}
.draw-back-btn:hover { color: var(--text); }

/* ---- Waiting room ---------------------------------------- */
.draw-wait-inner {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 2rem;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
    max-height: 90vh;
    overflow-y: auto;
}

.draw-wait-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.draw-wait-code-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.draw-room-code-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: .25em;
    flex: 1;
}

.draw-copy-btn {
    padding: 4px 10px;
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.3);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.draw-copy-btn:hover { background: rgba(0,212,255,.2); }

.draw-leave-btn {
    background: rgba(255,255,255,.07);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.draw-leave-btn:hover { background: rgba(255,68,85,.25); color: var(--red); }

.draw-wait-players {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
}

.draw-wait-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--text);
}

.draw-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.draw-player-name { flex: 1; font-weight: 600; }

.draw-host-badge { font-size: 0.8rem; }

.draw-settings-panel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.draw-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.draw-setting-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    width: 60px;
    flex-shrink: 0;
}

.draw-setting-btns {
    display: flex;
    gap: 6px;
}

.draw-setting-opt {
    padding: 4px 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.draw-setting-opt:hover    { background: rgba(0,212,255,.1); color: var(--primary); }
.draw-setting-opt.active   { background: rgba(0,212,255,.18); border-color: var(--primary); color: var(--primary); }

.draw-start-btn { margin-top: 0.4rem; }

.draw-wait-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    text-align: center;
}

/* ---- Game screen ------------------------------------------ */
.draw-screen#draw-screen-game {
    align-items: stretch;
    justify-content: flex-start;
}

.draw-game-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    height: 50px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.draw-round-info {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: .1em;
    white-space: nowrap;
}

.draw-word-display {
    flex: 1;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.draw-word-display.draw-word-drawer  { color: var(--primary); }
.draw-word-display.draw-word-guessed { color: var(--green); }

.draw-timer-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.draw-timer-track {
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,.1);
    border-radius: 3px;
    overflow: hidden;
}

.draw-timer-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--primary);
    transition: width 1s linear;
}

.draw-timer-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-dim);
    min-width: 22px;
    text-align: right;
}

/* ---- Canvas + sidebar layout ------------------------------ */
.draw-game-main {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.draw-canvas-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    cursor: crosshair;
}

#draw-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.draw-canvas-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(0,0,0,.3);
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.draw-sidebar {
    width: 210px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
}

.draw-players-panel {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
}

.draw-game-player {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}
.draw-game-player:hover { background: rgba(255,255,255,.04); }

.draw-game-player-name {
    flex: 1;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draw-game-player-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--primary);
}

.draw-chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    min-height: 0;
}

.draw-chat-msg {
    font-size: 0.78rem;
    color: var(--text-mid);
    line-height: 1.35;
    word-break: break-word;
}
.draw-chat-msg.own { color: var(--text); }
.draw-chat-name { font-weight: 700; }

.draw-chat-system {
    font-size: 0.74rem;
    font-style: italic;
    color: var(--text-dim);
    line-height: 1.3;
}

.draw-guess-row {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.draw-chat-input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--transition);
}
.draw-chat-input:focus { border-color: var(--primary); }

.draw-send-btn {
    padding: 0.45rem 0.7rem;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition);
}
.draw-send-btn:hover { opacity: 0.8; }

/* ---- Tools bar -------------------------------------------- */
.draw-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.draw-colors {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.draw-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition);
    flex-shrink: 0;
}
.draw-color-btn:hover { transform: scale(1.2); }
.draw-color-btn.active { border-color: var(--primary); transform: scale(1.15); }

.draw-size-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.draw-size-slider {
    width: 70px;
    accent-color: var(--primary);
}

.draw-size-preview {
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
    transition: width .1s, height .1s, background .1s;
    min-width: 4px;
    min-height: 4px;
}

.draw-tool-btn {
    padding: 5px 12px;
    background: rgba(255,255,255,.07);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.draw-tool-btn:hover  { background: rgba(255,255,255,.14); }
.draw-tool-btn.active { background: rgba(0,212,255,.15); border-color: var(--primary); color: var(--primary); }

.draw-tool-clear {
    color: var(--red);
    border-color: rgba(255,68,85,.3);
}
.draw-tool-clear:hover { background: rgba(255,68,85,.15); }

/* ---- Round-end overlay ------------------------------------ */
.draw-round-end-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeIn .2s ease;
}

.draw-round-end-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.8rem 2.4rem;
    min-width: 260px;
    max-width: 380px;
    box-shadow: 0 12px 50px rgba(0,0,0,.6);
}

.draw-round-end-word {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .1em;
    text-align: center;
    margin-bottom: 1rem;
}

.draw-round-end-scores,
.draw-final-scores {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Game-end overlay ------------------------------------- */
.draw-game-end-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    animation: fadeIn .2s ease;
}

.draw-game-end-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    min-width: 280px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: 0 12px 60px rgba(0,0,0,.7);
}

.draw-game-end-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary);
    text-align: center;
    letter-spacing: .12em;
}

.draw-game-end-btns {
    display: flex;
    gap: 10px;
}
.draw-game-end-btns .draw-btn-primary,
.draw-game-end-btns .draw-btn-secondary { width: auto; flex: 1; }

/* ---- Score rows ------------------------------------------- */
.draw-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.04);
}
.draw-score-row.draw-score-top { background: rgba(0,212,255,.08); }

.draw-score-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    color: var(--text-dim);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.draw-score-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.draw-score-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text);
}

.draw-score-pts {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

/* ---- Mobile ---------------------------------------------- */
@media (max-width: 640px) {
    .draw-game-main { flex-direction: column; }
    .draw-sidebar {
        width: 100%;
        height: 180px;
        border-left: none;
        border-top: 1px solid var(--border);
        flex-direction: row;
    }
    .draw-players-panel { width: 120px; max-height: none; border-bottom: none; border-right: 1px solid var(--border); }
    .draw-chat-log { flex: 1; }
    .draw-tools { padding: 5px 10px; gap: 7px; }
    .draw-timer-track { width: 50px; }
    .draw-wait-inner { max-width: 98vw; padding: 1.2rem 1.4rem; }
    .draw-lobby-card { max-width: 98vw; padding: 1.5rem 1.2rem; }
}