/* ═══════════════════════════════════════════════════════════════
   ShukaHub 8-Bit Skin — Stardew Valley pixel-art aesthetic
   Loaded AFTER style.css and redesign.css.
   Only visual overrides — layout, IDs, behaviour untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ─── PIXEL FONTS ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap');

/* ─── PALETTE ────────────────────────────────────────────────── */
:root {
  /* Black + gold/orange pixel palette */
  --px-bg:        #080808;
  --px-panel:     #111111;
  --px-panel2:    #1a1a1a;
  --px-wood:      #5c3318;
  --px-wood-hi:   #7a4a28;
  --px-wood-lo:   #3d200c;
  --px-gold:      #f4c842;
  --px-gold2:     #ffe87a;
  --px-orange:    #e07a00;
  --px-cream:     #f5e6c8;
  --px-tan:       #c9a87a;
  --px-muted:     #7a7060;
  --px-green:     #4ecb5a;
  --px-red:       #e84040;
  --px-border:    #2a2a2a;
  --px-border-hi: rgba(244,200,66,0.4);

  /* --accent is the user-controllable theme color.
     Default to pixel gold. JS setProperty() overrides this inline,
     so user's saved theme color takes effect automatically. */
  --accent:         #f4c842;
  --accent2:        #ffe87a;
  /* --px-gold is an alias for --accent so all pixel elements respond to theme changes */
  --px-gold:        var(--accent);
  --px-gold2:       var(--accent2);

  /* Override design tokens */
  --bubble-me-text: #ffffff;
  --bg1:          var(--px-bg);
  --bg2:          #050505;
  --panel:        var(--px-panel);
  --panel2:       var(--px-panel2);
  --text:         var(--px-cream);
  --muted:        var(--px-tan);
  --line:         var(--px-border);
  --hairline:     rgba(244, 200, 66, 0.12);

  --font-display: 'Press Start 2P', monospace;
  --font-body:    'VT323', monospace;
  --font-mono:    'Press Start 2P', monospace;
}

/* ─── GLOBAL FONT + ANTI-SMOOTH ──────────────────────────────── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  font-family: 'VT323', monospace !important;
}

/* ─── BODY + STARFIELD ───────────────────────────────────────── */
body {
  background-color: var(--px-bg) !important;
  background-image:
    radial-gradient(1px 1px at  7%  4%, rgba(244,200,66,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 11%, rgba(255,232,122,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 23%  3%, rgba(244,200,66,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 14%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 49%  6%, rgba(244,200,66,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 18%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 73%  2%, rgba(244,200,66,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%  9%, rgba(255,232,122,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 15%, rgba(244,200,66,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 28%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 32%, rgba(244,200,66,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 26%, rgba(255,255,255,0.2) 0%, transparent 100%),
    linear-gradient(180deg, #050505 0%, #080808 50%, #0a0a0a 100%) !important;
  background-attachment: fixed !important;
  color: var(--px-cream) !important;
}

/* Scanlines */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.1) 3px,
    rgba(0, 0, 0, 0.1) 4px
  ) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  animation: none !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important; left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}

/* ─── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  height: 42px !important;
  background:
    linear-gradient(180deg, var(--px-wood-hi) 0%, var(--px-wood) 60%, var(--px-wood-lo) 100%) !important;
  border-bottom: 4px solid var(--px-gold) !important;
  box-shadow: 0 4px 0 0 #1a0a00, 0 8px 0 0 rgba(0,0,0,0.5) !important;
}
.topbar .logo-img { height: 32px !important; }

.main-app { height: calc(100vh - 46px) !important; }

/* ─── AUTH PAGE ──────────────────────────────────────────────── */
.auth-page {
  background: var(--px-bg) !important;
}

/* Left panel: deep black with gold pixel grid */
.auth-left {
  background:
    linear-gradient(180deg, #0a0a0a 0%, #111111 50%, #080808 100%) !important;
  border-right: 4px solid var(--px-gold) !important;
}

.auth-left::before {
  background-image:
    linear-gradient(rgba(244,200,66,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,200,66,0.07) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}
.auth-left::after { display: none !important; }

/* Characters: pixel art blocky shapes in gold/orange/black */
.char-purple {
  background: var(--px-orange) !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 0 #a85800, 0 -4px 0 #ff9a2a, -4px 0 0 #7a3e00 !important;
}
.char-black {
  background: #1a1a1a !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 0 #0a0a0a, 0 -4px 0 #2a2a2a !important;
}
.char-orange {
  background: var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 0 #c9a000, 0 -4px 0 var(--px-gold2) !important;
}
.char-yellow {
  background: #e8b840 !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 0 #b08010, 0 -4px 0 #ffd870 !important;
}
.eyeball { border-radius: 0 !important; background: #f0f0f0 !important; }
.pupil   { border-radius: 0 !important; background: #080808 !important; }
.pupil-bare { border-radius: 0 !important; background: #080808 !important; }

/* Auth brand logo */
.auth-brand-logo {
  border-radius: 0 !important;
  border: 3px solid var(--px-gold) !important;
  box-shadow: 3px 3px 0 var(--px-wood-lo) !important;
  image-rendering: pixelated;
}

/* Auth left footer links */
.auth-left-footer a {
  color: rgba(244, 200, 66, 0.5) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  letter-spacing: 0.05em !important;
}
.auth-left-footer a:hover { color: var(--px-gold) !important; }

/* Right panel */
.auth-right {
  background: #050505 !important;
}

/* Tabs */
.auth-tabs {
  background: rgba(244, 200, 66, 0.05) !important;
  border: 3px solid var(--px-border) !important;
  border-radius: 0 !important;
  padding: 3px !important;
  margin-bottom: 24px !important;
}
.auth-tab {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  color: var(--px-muted) !important;
  border-radius: 0 !important;
  letter-spacing: 0.04em !important;
  font-style: normal !important;
}
.auth-tab-active {
  background: var(--px-gold) !important;
  color: #080808 !important;
  box-shadow: 2px 2px 0 var(--px-wood-lo) !important;
}

/* Heading */
.auth-heading h1 {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: var(--px-gold) !important;
  text-shadow: 2px 2px 0 var(--px-wood-lo), 4px 4px 0 rgba(0,0,0,0.5) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
}
.auth-heading p {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  color: var(--px-tan) !important;
  font-style: normal !important;
}

/* Labels */
.auth-field label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  color: var(--px-tan) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* Inputs */
.auth-field input {
  background: rgba(8, 6, 23, 0.9) !important;
  border: 3px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 20px !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6) !important;
  height: 46px !important;
  padding: 0 12px !important;
}
.auth-field input:focus {
  border-color: var(--px-gold) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6), 0 0 0 2px rgba(244,200,66,0.2) !important;
}
.auth-field input::placeholder { color: var(--px-muted) !important; }

/* Remember me */
.auth-remember { color: var(--px-tan) !important; font-size: 14px !important; }

/* Auth message */
.auth-msg {
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  font-style: normal !important;
  border-radius: 0 !important;
}

/* Main button */
.auth-btn {
  background: var(--px-gold) !important;
  color: #080808 !important;
  border: 3px solid var(--px-wood-lo) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--px-wood-lo) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  height: 48px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.auth-btn:hover { background: var(--px-gold2) !important; }
.auth-btn:active {
  box-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  transform: translate(2px, 2px) !important;
}

/* Secondary button */
.auth-forgot-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  color: var(--px-muted) !important;
  font-style: normal !important;
}
.auth-forgot-btn:hover { color: var(--px-gold) !important; }

/* GitHub button */
.auth-github-btn {
  border-radius: 0 !important;
  border: 2px solid rgba(244,200,66,0.25) !important;
  background: rgba(244,200,66,0.05) !important;
  color: rgba(244,200,66,0.5) !important;
}
.auth-github-btn:hover {
  color: var(--px-gold) !important;
  background: rgba(244,200,66,0.12) !important;
  border-color: var(--px-gold) !important;
}

/* ─── MAIN APP LAYOUT ────────────────────────────────────────── */
.main-app { background: var(--px-bg) !important; }

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #111111 0%, #080808 100%) !important;
  border-right: 4px solid var(--px-gold) !important;
  box-shadow: 4px 0 0 rgba(0,0,0,0.5) !important;
}

.sidebar-header h3 {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  color: var(--px-gold) !important;
  text-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  letter-spacing: 0.06em !important;
}

.sidebar-divider {
  border: none !important;
  height: 3px !important;
  background: repeating-linear-gradient(
    90deg,
    var(--px-gold) 0px, var(--px-gold) 4px,
    transparent 4px, transparent 8px
  ) !important;
  margin: 8px 0 !important;
}

/* Friend rows */
.friend-row {
  border-bottom: 2px solid rgba(244,200,66,0.07) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.friend-row:hover, .friend-row.active {
  background: rgba(244,200,66,0.08) !important;
  box-shadow: inset 4px 0 0 var(--px-gold) !important;
}

.friend-name {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  color: var(--px-cream) !important;
}
.friend-last-msg {
  font-family: 'VT323', monospace !important;
  font-size: 14px !important;
  color: var(--px-muted) !important;
}
.friend-mood {
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  font-style: normal !important;
}
.online-count { color: var(--px-green) !important; }

/* Presence dots — keep circular for readability but pixel-ify colours */
.presence-dot.online  { background: var(--px-green) !important; box-shadow: none !important; }
.presence-dot.idle    { background: var(--px-gold) !important;  box-shadow: none !important; }
.presence-dot.dnd     { background: var(--px-red) !important;   box-shadow: none !important; }
.presence-dot.invisible { background: var(--px-muted) !important; box-shadow: none !important; }

/* Sidebar dropdown buttons */
.sidebar-btn {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5) !important;
}
.sidebar-btn:hover { border-color: var(--px-gold) !important; }

.sidebar-dots-btn {
  border-radius: 0 !important;
  background: transparent !important;
}

/* ─── PROFILE ICON (topbar) ──────────────────────────────────── */
.profileIcon {
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  image-rendering: pixelated;
}

/* ─── DROPDOWN MENUS ─────────────────────────────────────────── */
.profileMenu {
  background: var(--px-panel) !important;
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--px-wood-lo), 8px 8px 0 rgba(0,0,0,0.4) !important;
}

.menu-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: var(--px-gold) !important;
  text-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  letter-spacing: 0.06em !important;
}
.menu-label { font-family: 'VT323', monospace !important; font-size: 16px !important; }

/* ─── CHAT CONTAINER ─────────────────────────────────────────── */
.chatContainer {
  background-color: var(--px-bg) !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(244, 200, 66, 0.04) 39px,
      rgba(244, 200, 66, 0.04) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(244, 200, 66, 0.02) 39px,
      rgba(244, 200, 66, 0.02) 40px
    ),
    linear-gradient(180deg, #080808 0%, #0a0a0a 100%) !important;
}
.chatContainer::before { background: none !important; }

/* Chat header */
.chat-header {
  background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%) !important;
  border-bottom: 4px solid var(--px-gold) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.5) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: var(--px-gold) !important;
  padding: 0 16px !important;
  min-height: 42px !important;
  height: auto !important;
}
#chatHeaderText {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  letter-spacing: 0.04em !important;
  color: var(--px-gold) !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ─── MESSAGE BUBBLES ────────────────────────────────────────── */
.message {
  font-family: 'VT323', monospace !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  border-radius: 0 !important;
}

.message.me {
  background: var(--px-wood) !important;
  color: #ffffff !important;
  border: 3px solid var(--px-gold) !important;
  box-shadow: 3px 3px 0 var(--px-wood-lo), 5px 5px 0 rgba(0,0,0,0.3) !important;
}
.message.me * { color: #ffffff !important; }

.message.other {
  background: var(--px-panel2) !important;
  color: var(--px-cream) !important;
  border: 3px solid var(--px-border) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4), 5px 5px 0 rgba(0,0,0,0.2) !important;
}

/* Deleted message */
.msg-deleted-bubble {
  border-radius: 0 !important;
  background: rgba(244,200,66,0.04) !important;
  border: 2px dashed var(--px-border) !important;
  color: var(--px-muted) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

/* Reply chip */
.reply-chip {
  border-left: 4px solid var(--px-gold) !important;
  background: rgba(0,0,0,0.25) !important;
  border-radius: 0 !important;
  color: rgba(245,230,200,0.6) !important;
}
.message.me .reply-chip {
  border-left-color: rgba(244,200,66,0.5) !important;
  color: rgba(245,230,200,0.55) !important;
}

/* URLs in chat messages — must beat .message.me * { color:#fff !important } */
.message.me .chat-link,
.message.other .chat-link,
.chatBox .chat-link {
  color: var(--px-red) !important;
  text-decoration: underline !important;
  word-break: break-all !important;
}
.message.me .chat-link:hover,
.message.other .chat-link:hover,
.chatBox .chat-link:hover { color: #ff7070 !important; }

/* Mentions (@username) — same specificity fix */
.message.me .chat-mention,
.message.other .chat-mention,
.chatBox .chat-mention {
  color: #4a90d9 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.75em !important;
}

/* Typing indicator */
.typingIndicator {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  color: var(--px-gold) !important;
}

/* Pinned banner */
.pinned-msg-banner {
  background: rgba(244,200,66,0.07) !important;
  border-bottom: 3px solid rgba(244,200,66,0.3) !important;
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  border-radius: 0 !important;
}

/* Chat placeholder */
.chat-placeholder {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  line-height: 2 !important;
  color: rgba(244,200,66,0.15) !important;
}

/* Date separators */
.msg-date-sep { margin: 16px 12px 8px !important; }
.msg-date-sep::before, .msg-date-sep::after {
  background: repeating-linear-gradient(
    90deg,
    var(--px-gold) 0px, var(--px-gold) 4px,
    transparent 4px, transparent 8px
  ) !important;
}
.msg-date-sep-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  color: var(--px-gold) !important;
  background: var(--px-bg) !important;
  border: 2px solid rgba(244,200,66,0.4) !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ─── INPUT BAR ──────────────────────────────────────────────── */
.chat-footer {
  padding: 8px 12px 12px !important;
}

.message-row {
  background: var(--px-panel) !important;
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--px-wood-lo) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 5px 8px 5px 8px !important;
}

.message-row #messageInput {
  font-family: 'VT323', monospace !important;
  font-size: 20px !important;
  color: var(--px-cream) !important;
  caret-color: var(--px-gold) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.message-row #messageInput::placeholder { color: var(--px-muted) !important; }

/* Attach + emoji buttons in input row */
.img-pick-btn {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-gold) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  font-size: 16px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
}
.img-pick-btn:hover { border-color: var(--px-gold) !important; }

/* Send button */
.send-btn {
  background: var(--px-gold) !important;
  color: #080808 !important;
  border: 3px solid var(--px-wood-lo) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--px-wood-lo) !important;
  width: 40px !important; min-width: 40px !important;
  height: 40px !important;
}
.send-btn:active {
  box-shadow: 1px 1px 0 var(--px-wood-lo) !important;
  transform: translate(2px, 2px) !important;
}
.send-btn svg { color: #080808 !important; fill: #080808 !important; }

/* Reply/image preview strips */
.replyPreview {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-left: 4px solid var(--px-gold) !important;
  border-radius: 0 !important;
}
.replyCloseBtn {
  background: var(--px-panel) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  width: 28px !important; min-width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  padding: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}

/* ─── ICON BUTTONS (chat header) ─────────────────────────────── */
.icon-btn {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-gold) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  width: auto !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
}
.icon-btn:hover { border-color: var(--px-gold) !important; }

/* ─── SETTINGS PANEL ─────────────────────────────────────────── */
.settings-overlay { backdrop-filter: none !important; }

.profileMenu.settings-menu,
#settingsMenu {
  border-radius: 0 !important;
  border: 3px solid var(--px-gold) !important;
  background: var(--px-panel) !important;
  box-shadow: 6px 6px 0 var(--px-wood-lo), 10px 10px 0 rgba(0,0,0,0.4) !important;
}

.settings-menu-header { border-bottom: 3px solid rgba(244,200,66,0.2) !important; }

.settings-close-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--px-muted) !important;
  width: 28px !important; min-width: 28px !important; height: 28px !important;
  padding: 0 !important; font-size: 14px !important;
}

.settings-tabs {
  display: flex !important;
  border-bottom: 3px solid rgba(244,200,66,0.2) !important;
  margin-bottom: 0 !important;
  gap: 0 !important;
}
.settings-tab {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 2px solid rgba(244,200,66,0.15) !important;
  background: transparent !important;
  color: var(--px-muted) !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
  width: auto !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.settings-tab.active {
  color: var(--px-gold) !important;
  background: rgba(244,200,66,0.08) !important;
  border-bottom: 3px solid var(--px-gold) !important;
  box-shadow: none !important;
}

.settings-section {
  background: var(--px-panel2) !important;
  border: 2px solid rgba(244,200,66,0.15) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  margin-bottom: 8px !important;
}

.settings-section-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  color: var(--px-gold) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid rgba(244,200,66,0.1) !important;
}

.settings-row {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  color: var(--px-cream) !important;
  border-bottom: 2px solid rgba(244,200,66,0.06) !important;
}
.settings-row:hover { background: rgba(244,200,66,0.06) !important; }

.settings-row-icon { font-size: 16px !important; }
.settings-row-arrow { color: var(--px-gold) !important; }

.settings-toggle {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  color: var(--px-muted) !important;
  background: var(--px-panel) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  padding: 3px 6px !important;
  letter-spacing: 0.04em !important;
}
.settings-toggle.on,
.settings-toggle[data-on="true"] {
  color: var(--px-green) !important;
  border-color: var(--px-green) !important;
}

.settings-profile-header { border-radius: 0 !important; }
.settings-profile-img {
  border-radius: 0 !important;
  border: 3px solid var(--px-gold) !important;
  box-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  image-rendering: pixelated;
}
.settings-profile-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: var(--px-cream) !important;
}
.settings-profile-sub {
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  color: var(--px-muted) !important;
}

.settings-field-row input {
  background: var(--px-bg) !important;
  border: 3px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}
.settings-field-row input:focus { border-color: var(--px-gold) !important; }

.settings-save-btn {
  background: var(--px-gold) !important;
  color: #080808 !important;
  border: 2px solid var(--px-wood-lo) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  padding: 6px 10px !important;
  width: auto !important;
  min-width: unset !important;
  letter-spacing: 0.04em !important;
}

.settings-section-danger .settings-row-logout { color: var(--px-red) !important; }
.settings-section-danger .settings-row-delete { color: var(--px-red) !important; opacity: 0.7 !important; }

/* Font size buttons */
.font-size-btn {
  background: var(--px-panel) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  font-family: 'VT323', monospace !important;
}
.font-size-btn.active {
  border-color: var(--px-gold) !important;
  background: rgba(244,200,66,0.1) !important;
}

/* ─── MODALS ─────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(8, 6, 23, 0.85) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-box {
  background: var(--px-panel) !important;
  border: 4px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--px-wood-lo), 10px 10px 0 rgba(0,0,0,0.5) !important;
}

.lightbox-close {
  background: var(--px-red) !important;
  color: #fff !important;
  border: 2px solid #a02020 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5) !important;
  width: 28px !important; min-width: 28px !important;
  height: 28px !important; padding: 0 !important;
  font-size: 14px !important;
}

.profile-modal-avatar, .group-modal-icon {
  border-radius: 0 !important;
  border: 3px solid var(--px-gold) !important;
  box-shadow: 3px 3px 0 var(--px-wood-lo) !important;
  image-rendering: pixelated;
}

.profile-modal-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  color: var(--px-cream) !important;
  line-height: 1.8 !important;
}
.profile-modal-id {
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  color: var(--px-muted) !important;
}
.profile-modal-bio, .profile-modal-mood {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  font-style: normal !important;
}

/* Profile action buttons */
.pma-btn {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  padding: 6px 10px !important;
  width: auto !important;
}
.pma-btn:hover { border-color: var(--px-gold) !important; }
.pma-remove-friend { border-color: rgba(232,64,64,0.4) !important; color: var(--px-red) !important; }
.pma-block, .pma-report { border-color: rgba(232,64,64,0.3) !important; }

/* Self edit inputs */
.self-edit-field input {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}
.self-edit-save-btn {
  background: var(--px-gold) !important;
  color: #080808 !important;
  border: 2px solid var(--px-wood-lo) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--px-wood-lo) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  padding: 8px 14px !important;
  width: auto !important;
}

/* Group modal inputs */
#groupModalRenameInput, #groupDescInput, #groupNameInput {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}

/* ─── TOAST NOTIFICATIONS ────────────────────────────────────── */
.toast {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  line-height: 1.8 !important;
  background: var(--px-panel) !important;
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--px-wood-lo) !important;
  color: var(--px-cream) !important;
}
.toast-success { border-color: var(--px-green) !important; }
.toast-error   { border-color: var(--px-red) !important; }
.toast-warn    { border-color: var(--px-gold) !important; }

/* ─── UNREAD BADGE ───────────────────────────────────────────── */
.unread-dot, .msg-unread-count {
  background: var(--px-gold) !important;
  border-radius: 0 !important;
}

/* ─── SEARCH BAR ─────────────────────────────────────────────── */
.chat-search-bar {
  background: var(--px-panel2) !important;
  border-bottom: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
}
#chatSearchInput {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}
.chat-search-count {
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  color: var(--px-gold) !important;
}
.chat-search-close {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--px-muted) !important;
  width: auto !important; min-width: unset !important;
  padding: 0 6px !important;
}

/* ─── GIF PICKER ─────────────────────────────────────────────── */
.gif-picker {
  background: var(--px-panel) !important;
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--px-wood-lo) !important;
}
.gif-search-input {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}
.gif-close-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--px-muted) !important;
  width: auto !important; min-width: unset !important;
}

/* ─── ATTACH POPUP ───────────────────────────────────────────── */
.attach-popup {
  background: var(--px-panel) !important;
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--px-wood-lo) !important;
}
.attach-option {
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(244,200,66,0.1) !important;
  color: var(--px-cream) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: 100% !important;
  padding: 8px 12px !important;
}
.attach-option:hover { background: rgba(244,200,66,0.08) !important; }

/* ─── POLL / FORWARD MODALS ──────────────────────────────────── */
.poll-box, .forward-box {
  border-radius: 0 !important;
}
.poll-option-input {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}

/* ─── CANCEL / GENERIC BUTTONS ───────────────────────────────── */
.cancel-btn {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}

/* ─── WALLPAPER PICKER ───────────────────────────────────────── */
.wallpaper-picker {
  background: var(--px-panel) !important;
  border: 3px solid var(--px-gold) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--px-wood-lo) !important;
}
.wallpaper-picker-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  color: var(--px-gold) !important;
}
.wallpaper-remove-btn {
  background: none !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-red) !important;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  box-shadow: none !important;
  width: auto !important;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--px-bg); }
::-webkit-scrollbar-thumb {
  background: var(--px-wood);
  border-radius: 0 !important;
  border: 2px solid var(--px-wood-lo);
}
::-webkit-scrollbar-thumb:hover { background: var(--px-wood-hi); }

/* ─── LIGHTBOX ───────────────────────────────────────────────── */
.lightbox { background: rgba(8,6,23,0.95) !important; }
.lightbox-download {
  background: var(--px-panel) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  width: auto !important;
  min-width: unset !important;
  padding: 6px 10px !important;
}

/* ─── CREATE GROUP PANEL ─────────────────────────────────────── */
#createGroupPanel input, #groupModalRenameInput {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}
#confirmCreateGroupBtn {
  background: var(--px-gold) !important;
  color: #080808 !important;
  border: 2px solid var(--px-wood-lo) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--px-wood-lo) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  padding: 8px 12px !important;
  width: auto !important;
}
#cancelCreateGroupBtn {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  width: auto !important;
}

/* ─── GROUP MEMBERS LIST ─────────────────────────────────────── */
.group-leave-btn {
  background: rgba(232,64,64,0.12) !important;
  border: 2px solid rgba(232,64,64,0.4) !important;
  border-radius: 0 !important;
  color: var(--px-red) !important;
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
}
.group-leave-btn:hover {
  background: rgba(232,64,64,0.25) !important;
  border-color: var(--px-red) !important;
}

/* ─── SEARCH RESULTS ─────────────────────────────────────────── */
.search-result-row {
  background: var(--px-panel2) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
}
.search-result-row:hover { border-color: var(--px-gold) !important; }
.search-result-avatar {
  border-radius: 0 !important;
  border: 2px solid var(--px-gold) !important;
  image-rendering: pixelated;
}
.search-result-name {
  font-family: 'VT323', monospace !important;
  font-size: 17px !important;
  color: var(--px-cream) !important;
}
.search-result-id {
  font-family: 'VT323', monospace !important;
  font-size: 14px !important;
  color: var(--px-muted) !important;
}
.search-add-btn {
  background: var(--px-gold) !important;
  border-radius: 0 !important;
  border: 2px solid var(--px-wood-lo) !important;
  color: #080808 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3) !important;
  width: 28px !important; height: 28px !important;
  padding: 0 !important; font-size: 16px !important;
}

/* ─── HAMBURGER (mobile) ─────────────────────────────────────── */
.hamburger-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--px-gold) !important;
  border-radius: 0 !important;
}

/* ─── GEAR / SEARCH BUTTONS ──────────────────────────────────── */
.gear-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--px-gold) !important;
  border-radius: 0 !important;
}
#userSearchBtn svg { color: var(--px-gold) !important; }

/* ─── PRESENCE PICKER ────────────────────────────────────────── */
.presence-option {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  border-radius: 0 !important;
}
.presence-option.selected { background: rgba(244,200,66,0.1) !important; }

/* ─── DECO PICKER ────────────────────────────────────────────── */
.deco-option {
  border-radius: 0 !important;
  font-family: 'VT323', monospace !important;
  font-size: 14px !important;
}
.deco-label { color: var(--px-tan) !important; }

/* ─── CUSTOM STATUS ROW ──────────────────────────────────────── */
.custom-status-emoji, .custom-status-text {
  background: var(--px-bg) !important;
  border: 2px solid var(--px-border) !important;
  border-radius: 0 !important;
  color: var(--px-cream) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
}

/* ─── COLOR PICKER APPLY BUTTON ──────────────────────────────── */
.cp-apply {
  background: var(--px-gold) !important;
  color: #080808 !important;
  border: 2px solid var(--px-wood-lo) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--px-wood-lo) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 6px !important;
  width: auto !important;
  padding: 5px 10px !important;
}

/* ─── LINK COLOR ─────────────────────────────────────────────── */
a { color: var(--px-gold) !important; }
a:hover { color: var(--px-gold2) !important; }

/* ═══════════════════════════════════════════════════════════════
   APPEARANCE SETTINGS SUPPORT
   ═══════════════════════════════════════════════════════════════ */

/* ─── FONT SIZE ──────────────────────────────────────────────── */
body.font-small  .message,
body.font-small  .friend-name,
body.font-small  .settings-row { font-size: 15px !important; }

body.font-medium .message,
body.font-medium .friend-name,
body.font-medium .settings-row { font-size: 20px !important; }

body.font-large  .message,
body.font-large  .friend-name,
body.font-large  .settings-row { font-size: 26px !important; }

body.font-small  .message-row #messageInput { font-size: 16px !important; }
body.font-medium .message-row #messageInput { font-size: 20px !important; }
body.font-large  .message-row #messageInput { font-size: 24px !important; }

/* ─── LIGHT MODE — parchment / old-book pixel theme ─────────── */
body.light-mode {
  background-color: #f0e4c8 !important;
  background-image:
    radial-gradient(1px 1px at 10% 6%,  rgba(92,51,24,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 15%, rgba(92,51,24,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 8%,  rgba(92,51,24,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 20%, rgba(92,51,24,0.2) 0%, transparent 100%),
    linear-gradient(180deg, #ede0c4 0%, #f0e4c8 60%, #e8d8b8 100%) !important;
  color: #2a1800 !important;
}

body.light-mode .topbar {
  background: linear-gradient(180deg, #7a4a28 0%, #5c3318 60%, #3d200c 100%) !important;
}

body.light-mode .sidebar {
  background: linear-gradient(180deg, #e8d8b0 0%, #dccca0 100%) !important;
  border-right-color: var(--px-gold) !important;
}
body.light-mode .sidebar-header h3 { color: var(--px-wood) !important; }
body.light-mode .friend-row { border-bottom-color: rgba(92,51,24,0.12) !important; }
body.light-mode .friend-row:hover, body.light-mode .friend-row.active {
  background: rgba(92,51,24,0.08) !important;
}
body.light-mode .friend-name { color: #2a1800 !important; }
body.light-mode .friend-last-msg { color: #7a5a30 !important; }

body.light-mode .chatContainer {
  background-color: #f5ead0 !important;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(92,51,24,0.06) 39px, rgba(92,51,24,0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(92,51,24,0.03) 39px, rgba(92,51,24,0.03) 40px),
    linear-gradient(180deg, #f5ead0 0%, #f0e4c8 100%) !important;
}

body.light-mode .chat-header {
  background: linear-gradient(180deg, #e8d8b0 0%, #dccca0 100%) !important;
  color: var(--px-wood) !important;
}
body.light-mode #chatHeaderText { color: var(--px-wood) !important; }

body.light-mode .message.other {
  background: #e8d8b0 !important;
  color: #2a1800 !important;
  border-color: rgba(92,51,24,0.3) !important;
  box-shadow: 3px 3px 0 rgba(92,51,24,0.2) !important;
}
body.light-mode .message.me {
  background: var(--px-wood) !important;
  color: #f5e6c8 !important;
}

body.light-mode .message-row {
  background: #ddd0a8 !important;
  border-color: var(--px-gold) !important;
  box-shadow: 4px 4px 0 rgba(92,51,24,0.3) !important;
}
body.light-mode .message-row #messageInput { color: #2a1800 !important; }

body.light-mode .profileMenu,
body.light-mode .modal-box,
body.light-mode .settings-section,
body.light-mode #settingsMenu {
  background: #e8d8b0 !important;
  border-color: var(--px-gold) !important;
  color: #2a1800 !important;
}
body.light-mode .settings-row { color: #2a1800 !important; border-bottom-color: rgba(92,51,24,0.1) !important; }
body.light-mode .settings-row:hover { background: rgba(92,51,24,0.06) !important; }
body.light-mode .settings-section { background: #ddd0a0 !important; }
body.light-mode .settings-section-label { color: var(--px-wood) !important; }
body.light-mode .msg-date-sep-label { background: #f0e4c8 !important; }
body.light-mode .chat-placeholder { color: rgba(42,24,0,0.2) !important; }

/* ── Mobile tightening (phone screens) ─────────────────────── */
@media (max-width: 600px) {
  .chat-footer { padding: 6px 12px 8px !important; }
  .message-row { padding: 3px 5px 3px 10px !important; }
  .send-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; }
  .chatContainer::after { height: 60px !important; }
}