/* ================================================
   COMMUNITY HUB PAGE STYLES
   PixelTKFL · RPG Lobi Estetiği
   ================================================ */

.community-section {
    position: relative;
    z-index: 3;
}

/* ================================================
   HERO STRIP
   ================================================ */

.community-hero {
    background-image:
        linear-gradient(rgba(204, 17, 17, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 17, 17, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    border-bottom: 4px solid var(--color-red-dark);
    padding: 40px 32px;
    text-align: center;
    position: relative;
    z-index: 3;
}

.community-hero-eyebrow {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 3px;
    margin-bottom: 14px;
    animation: blink 1.2s step-end infinite;
}

.community-hero-title {
    font-size: clamp(16px, 3vw, 28px);
    color: var(--color-white);
    letter-spacing: 3px;
    text-shadow:
        4px 4px 0 var(--color-red),
        6px 6px 0 var(--color-red-dark);
    margin-bottom: 12px;
}

.community-hero-sub {
    font-size: 7px;
    color: var(--color-off-white);
    letter-spacing: 2px;
    line-height: 2.2;
}

/* ================================================
   MAIN GRID LAYOUT
   ================================================ */

.community-section {
    background-color: var(--color-bg);
}

/* ── APP SHELL (full-height, Discord-like) ── */
.community-app {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
    min-height: calc(100vh - 72px);
    background: var(--color-bg);
}

/* ── CHANNEL SIDEBAR ── */
.channel-sidebar {
    background: #070007;
    border-right: 3px solid #1a001a;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
}

.sidebar-server {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border-bottom: 3px solid #1a001a;
    flex-shrink: 0;
}
.sidebar-server-icon { font-size: 10px; color: var(--color-red); }
.sidebar-server-name { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; }

.channel-list { flex: 1; padding: 8px 0; }

.channel-category {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: #444;
    letter-spacing: 2px;
    padding: 12px 12px 4px;
    text-transform: uppercase;
}

.channel-item {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: 0;
    color: #555;
    cursor: pointer;
    text-align: left;
    transition: background .08s, color .08s;
    border-left: 3px solid transparent;
}
.channel-item:hover { background: #120010; color: #aaa; }
.channel-item--active { color: #fff; background: #1e001e; border-left-color: var(--color-red); }
.channel-hash { font-size: 10px; color: #333; flex-shrink: 0; transition: color .08s; }
.channel-item:hover .channel-hash,
.channel-item--active .channel-hash { color: var(--color-red); }

.sidebar-user-footer {
    border-top: 3px solid #1a001a;
    padding: 10px;
    flex-shrink: 0;
}
.suf-guest { display: flex; flex-direction: column; gap: 6px; }
.suf-login-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    background: var(--color-red-dark);
    border: 0;
    color: #fff;
    padding: 8px 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .1s;
    line-height: 1.8;
}
.suf-login-btn:hover { background: var(--color-red); }
.suf-loggedin { display: flex; align-items: center; gap: 8px; }
.suf-avatar { flex-shrink: 0; }
.suf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.suf-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suf-role { font-family: 'Press Start 2P', monospace; font-size: 5px; color: #666; }
.suf-logout {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px; background: transparent; border: 2px solid #2a002a;
    color: #555; cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
.suf-logout:hover { border-color: var(--color-red); color: var(--color-red); }

/* ── CHAT MAIN ── */
.chat-main {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
    background: #080008;
}

.channel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #0a000a;
    border-bottom: 3px solid #1a001a;
    flex-shrink: 0;
}
.channel-header-hash { font-size: 14px; color: #333; }
#channel-header-name { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #fff; }
.channel-header-sep { color: #222; font-size: 14px; }
.channel-header-desc { font-family: 'Press Start 2P', monospace; font-size: 6px; color: #555; }

.tribune-feed {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}

/* ── DASHBOARD ── */
.dashboard-col {
    background: #060006;
    border-left: 3px solid #1a001a;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 72px);
    position: sticky;
    top: 72px;
}

/* ── AUTH MODAL ── */
.auth-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-modal-overlay.is-open { display: flex; }
.auth-modal-box {
    background: #0a0000;
    border: 4px solid var(--color-red-dark);
    box-shadow: 8px 8px 0 #000, inset 0 0 0 2px #1a0000;
    padding: 24px;
    width: 100%;
    max-width: 380px;
    position: relative;
}
.auth-modal-header {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #fff;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-modal-icon { color: var(--color-red); }
.auth-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    background: transparent;
    border: 2px solid #330000;
    color: #555;
    cursor: pointer;
    padding: 4px 8px;
}
.auth-modal-close:hover { border-color: var(--color-red); color: var(--color-red); }

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 3px solid #220000;
}
.auth-tab {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #555;
    cursor: pointer;
    padding: 8px 16px;
    margin-bottom: -3px;
    transition: color .1s;
}
.auth-tab:hover { color: #aaa; }
.auth-tab--active { color: #fff; border-bottom-color: var(--color-red); }

.auth-form { display: none; flex-direction: column; gap: 8px; }
.auth-form.is-active { display: flex; }
.auth-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #666;
    letter-spacing: 1px;
}
.auth-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    background: #000;
    border: 3px solid #220000;
    color: #00ff88;
    padding: 10px 12px;
    width: 100%;
    outline: none;
    border-radius: 0;
}
.auth-input:focus { border-color: var(--color-red); }
.auth-error {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #ff4444;
    min-height: 14px;
    line-height: 1.8;
}
.auth-submit {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    background: var(--color-red-dark);
    border: 0;
    outline: 3px solid #000;
    outline-offset: -3px;
    color: #fff;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 4px 4px 0 #000;
    margin-top: 4px;
    transition: background .1s, transform .08s;
}
.auth-submit:hover { background: var(--color-red); transform: translate(-1px,-1px); }

.auth-role-select { display: flex; gap: 6px; flex-wrap: wrap; }
.auth-role-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    background: #0a0000;
    border: 2px solid #220000;
    color: #555;
    cursor: pointer;
    padding: 6px 10px;
    transition: all .08s;
    line-height: 1.8;
}
.auth-role-btn:hover { border-color: #550000; color: #aaa; }
.auth-role-btn--active { border-color: var(--color-red); color: #fff; background: #1a0000; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .community-app { grid-template-columns: 160px 1fr; }
    .dashboard-col { display: none; }
}
@media (max-width: 600px) {
    .community-app { grid-template-columns: 1fr; }
    .channel-sidebar { position: relative; top: 0; height: auto; flex-direction: row; flex-wrap: wrap; }
    .channel-list { display: flex; flex-direction: row; flex-wrap: wrap; padding: 4px; }
    .channel-category { display: none; }
    .channel-item { width: auto; border-left: 0; border-bottom: 3px solid transparent; }
    .channel-item--active { border-bottom-color: var(--color-red); border-left: 0; }
    .sidebar-user-footer { border-top: 0; border-left: 3px solid #1a001a; }
    .chat-main { min-height: 60vh; }
}

/* ================================================
   PANEL FRAME (RPG card border)
   ================================================ */

.hub-panel {
    border: 4px solid var(--color-red-dark);
    background-color: #0a0000;
    position: relative;
    box-shadow:
        6px 6px 0 0 #000,
        inset 0 0 0 2px #1a0000;
}

.hub-panel::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid #1f0000;
    pointer-events: none;
    z-index: 0;
}

.hub-panel-title {
    font-size: 7px;
    color: var(--color-white);
    letter-spacing: 3px;
    padding: 14px 16px;
    background-color: var(--color-red-dark);
    border-bottom: 3px solid var(--color-red);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.hub-panel-title-icon {
    font-size: 10px;
}

/* Köşe perçinleri */
.hub-panel::after {
    content: '';
    position: absolute;
    top: -4px; right: -4px;
    width: 8px; height: 8px;
    background: var(--color-red);
    box-shadow:
        0  calc(100% + 0px) 0 0 var(--color-red),
        calc(-(100% + var(--w, 100%)) - 4px) 0  0 0 var(--color-red),
        calc(-(100% + var(--w, 100%)) - 4px) calc(100% + 0px) 0 0 var(--color-red);
    pointer-events: none;
    z-index: 10;
}

/* ================================================
   LEFT PANEL — PİKSEL TRİBÜN
   ================================================ */

.tribune-panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 100px;
}

/* ---- Message Feed ---- */

#tribune-feed {
    height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: auto; /* stepped scroll is done in JS */
    position: relative;
    z-index: 1;
}

#tribune-feed::-webkit-scrollbar {
    width: 6px;
}
#tribune-feed::-webkit-scrollbar-track {
    background: #0a0000;
}
#tribune-feed::-webkit-scrollbar-thumb {
    background: var(--color-red-dark);
    border-radius: 0;
}

/* ---- Message Bubble ---- */

.msg {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: start;
    position: relative;
    animation: msg-enter 0.15s steps(3, end) both;
}

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

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

.msg-avatar {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 2px solid var(--color-gray);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.msg-role-icon {
    font-size: 9px;
    line-height: 1;
}

/* Bubble frame */
.msg-bubble {
    border: 2px solid var(--color-gray);
    background-color: #0f0000;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Referee: gold glow */
.msg--referee .msg-bubble {
    border-color: #cc9900;
    background-color: #120d00;
    box-shadow: 0 0 8px rgba(204,153,0,0.25), 0 0 2px rgba(204,153,0,0.15);
}

/* Player: red tint */
.msg--player .msg-bubble {
    border-color: #6b0000;
    box-shadow: 0 0 6px rgba(204,17,17,0.15);
}

/* Bubble corner notch */
.msg-bubble::before {
    content: '▶';
    position: absolute;
    left: -12px;
    top: 10px;
    font-size: 8px;
    color: var(--color-gray);
    line-height: 1;
}

.msg--referee .msg-bubble::before {
    color: #cc9900;
}

.msg--player .msg-bubble::before {
    color: #6b0000;
}

/* Header row */
.msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.msg-username {
    font-size: 7px;
    letter-spacing: 1px;
    font-weight: normal;
}

.msg-role-badge {
    font-size: 5px;
    letter-spacing: 1px;
    padding: 2px 5px;
    border: 1px solid currentColor;
    line-height: 1.8;
}

.msg-role-badge--referee { color: #cc9900; }
.msg-role-badge--player  { color: var(--color-red); }
.msg-role-badge--fan     { color: var(--color-gray); }

.msg-time {
    font-size: 5px;
    color: var(--color-gray);
    letter-spacing: 1px;
    margin-left: auto;
}

/* Game invite card */
.game-invite-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0d001a;
    border: 1px solid #cc44ff;
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 4px;
    box-shadow: 0 0 8px rgba(204,68,255,0.3);
}
.game-invite-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.game-invite-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.game-invite-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #cc44ff;
    letter-spacing: 1px;
}
.game-invite-sub {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: #aaa;
    letter-spacing: 0.5px;
}
.game-invite-code {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: #ddd;
    letter-spacing: 1px;
}
.game-invite-code strong {
    color: #fff;
    font-size: 6px;
}
.game-invite-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    background: #cc44ff;
    color: #000;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.8;
    transition: background 0.15s;
}
.game-invite-btn:hover {
    background: #ff66ff;
}

/* Message text */
.msg-text {
    font-size: 7px;
    color: var(--color-off-white);
    letter-spacing: 1px;
    line-height: 2;
}

/* ---- Reactions row ---- */

.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.reaction-pill {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: #1a0000;
    border: 1px solid var(--color-gray);
    color: var(--color-off-white);
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1;
    transition: none;
}

.reaction-pill:hover {
    border-color: var(--color-red-dark);
    background-color: #280000;
    transform: translate(1px, 1px);
}

.reaction-pill:active {
    transform: translate(2px, 2px);
}

.rpill-count {
    color: var(--color-red-light);
}

@keyframes pill-bump {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-1px,-2px) scale(1.15); }
    66%  { transform: translate(1px, -1px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

.reaction-pill--bump {
    animation: pill-bump 0.3s steps(3, end) both;
}

/* ================================================
   COMPOSE BAR
   ================================================ */

.compose-bar {
    border-top: 3px solid var(--color-red-dark);
    background-color: #080000;
    padding: 12px 14px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    position: relative;
    z-index: 2;
}

#compose-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background-color: #0d0000;
    border: 2px solid var(--color-gray);
    padding: 10px 12px;
    flex: 1;
    resize: none;
    outline: none;
    letter-spacing: 1px;
    line-height: 2;
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
    box-shadow: inset 2px 2px 0 0 #000;
}

#compose-input:focus {
    border-color: var(--color-red-dark);
    box-shadow: inset 2px 2px 0 0 #000, 0 0 0 2px #330000;
}

#compose-input::placeholder {
    color: var(--color-gray);
    opacity: 1;
}

/* Emoji toggle */
#emoji-toggle {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: var(--color-off-white);
    background-color: #150000;
    border: 2px solid var(--color-gray);
    padding: 8px 10px;
    cursor: pointer;
    line-height: 1;
    box-shadow: 3px 3px 0 0 #000;
    flex-shrink: 0;
}

#emoji-toggle:hover {
    border-color: var(--color-red-dark);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 0 #000;
}

#emoji-toggle:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* Send button */
#compose-send {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background-color: var(--color-red);
    border: 3px solid var(--color-white);
    padding: 10px 14px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 4px 4px 0 0 var(--color-red-dark);
    flex-shrink: 0;
    line-height: 1.4;
}

#compose-send:hover {
    background-color: var(--color-red-light);
    box-shadow: 2px 2px 0 0 var(--color-red-dark);
    transform: translate(2px, 2px);
}

#compose-send:active {
    box-shadow: none;
    transform: translate(4px, 4px);
}

/* ================================================
   EMOJI PANEL
   ================================================ */

.emoji-panel-wrap {
    position: relative;
}

#emoji-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background-color: #0d0000;
    border: 3px solid var(--color-red-dark);
    box-shadow: 6px 6px 0 0 #000;
    padding: 10px;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    z-index: 100;
    min-width: 220px;
}

#emoji-panel.emoji-panel--open {
    display: grid;
}

.emoji-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    background-color: #1a0000;
    border: 1px solid var(--color-gray);
    color: var(--color-white);
    padding: 7px;
    cursor: pointer;
    line-height: 1;
    text-align: center;
}

.emoji-btn:hover {
    background-color: #2e0000;
    border-color: var(--color-red-dark);
    transform: translate(1px, 1px);
}

.emoji-btn:active {
    transform: translate(2px, 2px);
}

/* ================================================
   RIGHT COLUMN — DASHBOARD
   ================================================ */

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

/* ================================================
   PROFILE PANEL
   ================================================ */

#profile-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Avatar wrap — canvas + Google photo share same slot */
.profile-avatar-wrap {
    width:  96px;
    height: 96px;
    flex-shrink: 0;
    position: relative;
}

#profile-avatar {
    display: block;
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 4px solid var(--color-red-dark);
    box-shadow: 6px 6px 0 0 #000;
    background: #000;
}

.profile-google-photo {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 4px solid var(--color-red);
    box-shadow: 6px 6px 0 0 #000;
}

#profile-name {
    font-size: 9px;
    color: var(--color-white);
    letter-spacing: 2px;
    text-align: center;
}

#profile-role {
    font-size: 7px;
    letter-spacing: 2px;
    text-align: center;
}

/* Stats grid */
.profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-top: 2px solid var(--color-gray);
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
}

.stat-cell + .stat-cell {
    border-left: 2px solid var(--color-gray);
}

.stat-value {
    font-size: 14px;
    color: var(--color-red-light);
    letter-spacing: 1px;
}

.stat-label {
    font-size: 5px;
    color: var(--color-gray);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.8;
}

/* Name input */
.profile-form {
    border-top: 2px solid var(--color-gray);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.profile-form-label {
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 2px;
}

#profile-name-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background-color: #0a0000;
    border: 2px solid var(--color-gray);
    padding: 8px 10px;
    width: 100%;
    outline: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: inset 2px 2px 0 0 #000;
    box-sizing: border-box;
}

#profile-name-input:focus {
    border-color: var(--color-red-dark);
}

/* Role buttons */
.role-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 2px solid var(--color-gray);
    padding: 12px;
    position: relative;
    z-index: 1;
}

.role-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    letter-spacing: 1px;
    padding: 7px 8px;
    border: 2px solid var(--color-gray);
    background-color: #150000;
    color: var(--color-off-white);
    cursor: pointer;
    box-shadow: 2px 2px 0 0 #000;
    flex: 1;
    text-align: center;
}

.role-btn:hover {
    border-color: var(--color-red-dark);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 0 #000;
}

.role-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.role-btn--active {
    background-color: var(--color-red-dark);
    border-color: var(--color-red-light);
    color: var(--color-white);
    box-shadow: 2px 2px 0 0 var(--color-red-dark);
}

/* ================================================
   BADGES PANEL
   ================================================ */

.badges-panel .hub-panel-title {
    justify-content: space-between;
}

#badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--color-gray);
    position: relative;
    z-index: 1;
}

.badge-item {
    background-color: #0a0000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 6px;
    opacity: 0.35;
    filter: grayscale(1);
    cursor: default;
    position: relative;
}

.badge-item--earned {
    opacity: 1;
    filter: none;
    background-color: #120000;
}

.badge-item--earned::after {
    content: '▶';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 5px;
    color: var(--color-red);
}

.badge-icon {
    font-size: 14px;
    line-height: 1;
}

.badge-label {
    font-size: 4px;
    color: var(--color-off-white);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.8;
}

/* ================================================
   ONLINE USERS PANEL
   ================================================ */

#online-list {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

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

.online-dot {
    width: 6px;
    height: 6px;
    border-radius: 0;
    flex-shrink: 0;
}

.online-dot--online {
    background-color: #33cc33;
    box-shadow: 0 0 4px #33cc33;
    animation: dot-pulse 1.4s steps(2, end) infinite;
}

.online-dot--away {
    background-color: #cc9900;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.online-avatar {
    display: block;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.online-name {
    font-size: 5px;
    letter-spacing: 1px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-role-icon {
    font-size: 8px;
    flex-shrink: 0;
}

/* Online count */
.online-count-badge {
    font-size: 6px;
    color: #33cc33;
    letter-spacing: 1px;
    margin-left: auto;
}

/* ================================================
   AUTH GATE
   ================================================ */

.auth-gate {
    border-top: 3px solid var(--color-red-dark);
    background-color: #060000;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.auth-gate-prompt {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 3px;
    animation: blink 1.2s step-end infinite;
}

.auth-gate-sub {
    font-size: 6px;
    color: var(--color-off-white);
    letter-spacing: 1px;
    line-height: 2.4;
    text-align: center;
}

.auth-gate-note {
    font-size: 5px;
    color: var(--color-gray);
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Google sign-in button */
.google-signin-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background-color: #0a0000;
    border: 3px solid var(--color-red);
    padding: 14px 22px;
    cursor: pointer;
    letter-spacing: 2px;
    line-height: 1;
    box-shadow: 4px 4px 0 0 var(--color-red-dark);
    position: relative;
    transition: none;
}

.google-signin-btn::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid #3a0000;
    pointer-events: none;
}

.google-signin-btn:hover {
    background-color: #1a0000;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 var(--color-red-dark);
}

.google-signin-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

@keyframes gate-pulse {
    0%, 80% { border-color: var(--color-red); }
    81%, 100%{ border-color: #660000; }
}

.google-signin-btn {
    animation: gate-pulse 2s step-end infinite;
}

/* Sign-out button (inside panel title) */
.signout-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: var(--color-gray);
    background: transparent;
    border: 1px solid #440000;
    padding: 5px 8px;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1;
    margin-left: 8px;
    transition: none;
    flex-shrink: 0;
}

.signout-btn:hover {
    color: var(--color-white);
    border-color: var(--color-red);
    transform: translate(1px, 1px);
}

.signout-btn:active {
    transform: translate(2px, 2px);
}

/* Locked compose bar overlay */
.compose-bar--locked {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* Locked compose input override */
#compose-input:disabled {
    color: var(--color-gray);
    cursor: not-allowed;
}

#compose-send:disabled {
    background-color: #330000;
    cursor: not-allowed;
    box-shadow: none;
}

/* Locked name input */
#profile-name-input.profile-name-input--locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #330000;
}

/* ================================================
   TOAST NOTIFICATION
   ================================================ */

.community-toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 10000;
    background-color: var(--color-red-dark);
    border: 3px solid var(--color-red-light);
    color: var(--color-white);
    font-size: 7px;
    letter-spacing: 1px;
    padding: 12px 18px;
    box-shadow: 6px 6px 0 0 #000;
    opacity: 0;
    transform: translate(8px, 8px);
    transition: opacity 0.2s steps(4, end), transform 0.2s steps(4, end);
    pointer-events: none;
    line-height: 2;
    max-width: 280px;
}

.community-toast--show {
    opacity: 1;
    transform: translate(0, 0);
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 1024px) {
    .community-inner {
        grid-template-columns: 1fr;
    }
    .dashboard-col {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .tribune-panel {
        position: static;
    }
    #tribune-feed {
        height: 400px;
    }
}

@media (max-width: 640px) {
    .community-inner {
        padding: 24px 16px;
    }
    .dashboard-col {
        grid-template-columns: 1fr;
    }
    #badges-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #tribune-feed {
        height: 340px;
    }
    .community-hero {
        padding: 28px 16px;
    }
}

/* ================================================
   SESLİ KANAL BUTONU (sidebar)
   ================================================ */

.voice-channel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    color: #666;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: left;
    transition: none;
}

.voice-channel-item:hover {
    background: rgba(0, 200, 100, 0.08);
    color: #00cc66;
}

.voice-channel-item--active {
    background: rgba(0, 200, 100, 0.15);
    color: #00ff88;
}

.voice-channel-item .channel-hash {
    font-size: 9px;
    color: #33cc66;
    opacity: 0.8;
}

/* ================================================
   VOICE PANEL (chat-main içi)
   ================================================ */

.voice-panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 220px;
    background: #030d06;
    border-bottom: 3px solid #003311;
}

.voice-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #020a04;
    border-bottom: 2px solid #003311;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    flex-shrink: 0;
}

.voice-panel-icon {
    color: #00cc66;
    font-size: 11px;
}

.voice-panel-header span:nth-child(2) {
    color: #00ff88;
    letter-spacing: 1px;
}

.voice-panel-status {
    margin-left: auto;
    color: #00cc66;
    font-size: 6px;
    letter-spacing: 1px;
}

.voice-panel-controls {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.voice-ctrl-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #ccc;
    background: #111;
    border: 2px solid #444;
    padding: 6px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    box-shadow: 2px 2px 0 #000;
    transition: none;
}

.voice-ctrl-btn:hover {
    background: #222;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #000;
}

.voice-ctrl-btn--leave {
    background: #1a0000;
    border-color: #880000;
    color: #ff6666;
}

.voice-ctrl-btn--leave:hover {
    background: #330000;
}

.voice-frame-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #020d05;
}