:root {
  --accent: #5a9;
  --bg: #000;
  --card: #fff;
  --muted: #666;
  --radius: 12px;
  --maxw: 800px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  background: #000 !important; 
  color: #fff !important; 
}

/* ============ AUTH PAGE ============ */
.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-box {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  padding: 28px;
  text-align: center;
  width: 320px;
  border: 4px solid;
  border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1;
}

.auth-box h1 {
  font-size: 22px;
  margin: 0 0 12px 0;
}

.auth-box .small {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

label {
  display: block;
  text-align: left;
  font-size: 14px;
  margin-top: 10px;
  color: var(--muted);
}

input[type=text],
input[type=password],
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  margin-top: 6px;
  font-family: inherit;
}

button {
  margin-top: 14px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

button:hover {
  opacity: .9;
}

.msg {
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
  color: #c33;
}

/* ============ MAIN APP ============ */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
   background: #000 !important; 
}

/* Top Navigation */
.top-nav {
  background: #fff;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo) 1;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.top-nav h1 {
  font-family: Calibri;
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.nav-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-tab {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  margin: 0;
}

.nav-tab:hover {
  background: #e0e0e0;
  color: #333;
}

.nav-tab.active {
  background: var(--accent);
  color: white;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f0f0;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
}

.user-pill img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.user-pill img:hover {
  transform: scale(1.1);
}

#signOutBtn {
  background: #ff6b6b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin: 0;
}

/* Content Views */
.view {
  display: none !important;
  flex: 1;
  padding: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}

.view.active {
  display: block !important;
}


/* Ticker */
.ticker {
  background: #111;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 45s linear infinite;
}

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

/* Radio Widget */
.radio-widget {
  background: #1a1a1a;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid #333;
}

.radio-widget h3 {
  font-size: 15px;
  margin-bottom: 12px;
  color: #fff;
  font-weight: 600;
}

.radio-widget select {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #fff;
  margin-bottom: 12px;
  font-size: 13px;
}

.radio-widget audio {
  width: 100%;
  height: 36px;
}

/* Online Users */
.online-widget {
  background: #1a1a1a;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid #333;
}

.online-widget h3 {
  font-size: 15px;
  margin-bottom: 12px;
  color: #fff;
  font-weight: 600;
}

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

.online-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #2a2a2a;
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
}

.online-user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: contain;
}

.online-list p {
  color: #888;
  font-size: 13px;
  padding: 8px;
}

.online-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 14px;
}

.online-user img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: contain;
}

/* Post Composer */
.post-composer {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 8px;
}

.post-composer textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  resize: vertical;
  margin-bottom: 12px;
}

.post-composer textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.composer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-record {
  background: #e66;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.btn-upload {
  background: #66b;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.btn-share {
  background: var(--accent);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  margin-left: auto;
}

.post-media {
  margin-top: 12px;
}

#preview {
  margin: 12px 0 0 0;
  height: 40px;
  border-radius: 8px;
}

#image-preview {
  margin-top: 12px;
  position: relative;
}

#image-preview img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

#image-preview button {
  margin-left: 8px;
  padding: 6px 12px;
  font-size: 12px;
  background: #ff6b6b;
}

/* Timeline */
.timeline {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.timeline h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #333;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.post {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fafafa;
  position: relative;
}

.post:last-child {
  margin-bottom: 0;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  border: 2px solid #ddd;
  background: #f9f9f9;
}

.post-user {
  font-weight: 700;
  font-size: 15px;
}

.post-time {
  color: #999;
  font-size: 13px;
  margin-left: auto;
}

.post-content {
  margin: 12px 0;
  line-height: 1.6;
  font-size: 15px;
  color: #333;
}

.post-media img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
}

.post-media audio {
  width: 100%;
  margin-top: 8px;
  height: 40px;
}

/* ============ GAMES VIEW ============ */
#games-view {
  background: #000;
  padding: 40px;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

#games-view h2 {
  font-size: 32px;
  margin-bottom: 24px;
  text-align: center;
  color: #fff;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.game-card {
  background: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.game-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.game-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}

.game-card p {
  font-size: 14px;
  color: #666;
}


/* ============ APPS VIEW ============ */
#apps-view {
  background: #000;
  padding: 40px;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

#apps-view h2 {
  font-size: 32px;
  margin-bottom: 24px;
  text-align: center;
  color: #fff;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.apps-card {
  background: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.apps-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.apps-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}

.apps-card p {
  font-size: 14px;
  color: #666;
}

/* ============ MOVIE THEATRE VIEW ============ */
/* Make theatre full-width and full-height */
#theatre-view {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: calc(100vh - 70px); /* Account for nav bar */
  display: none;
}

#theatre-view.active {
  display: flex !important;
  flex-direction: row;
}

/* Main theatre area - takes remaining space */
.theatre-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #000;
  overflow: hidden;
}

/* Screen takes most of the vertical space */
.theatre-screen {
  flex: 1;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 0; /* Important for flexbox */
}

.theatre-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Info bar at bottom */
.theatre-info {
  padding: 16px;
  background: #1a1a1a;
  border-radius: 8px;
  flex-shrink: 0;
}

.theatre-info h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #fff;
}

.theatre-info p {
  font-size: 14px;
  color: #aaa;
}

/* RIGHT SIDEBAR - Fixed width, full height */
.theatre-sidebar {
  width: 350px;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  border-left: 2px solid #333;
  flex-shrink: 0;
  overflow: hidden;
}

/* Movie queue at top */
.movie-queue {
  background: #1a1a1a;
  padding: 16px;
  border-radius: 0;
  max-height: 200px; /* Reduced from 40% to fixed 200px - shows about 2-3 movies */
  overflow-y: hidden;
  border-bottom: 2px solid #333;
  flex-shrink: 0;
}

.movie-queue h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #fff;
}

.movie-item {
  padding: 12px;
  background: #2a2a2a;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.movie-item:hover {
  background: #3a3a3a;
}

.movie-item.active {
  background: var(--accent);
}

.movie-item h4 {
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff;
}

.movie-item p {
  font-size: 12px;
  color: #aaa;
}

/* VIEWING PARTY SECTION */
.viewing-party {
  background: #1a1a1a;
  padding: 16px;
  border-bottom: 2px solid #333;
  flex-shrink: 0;
}

.viewing-party h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #fff;
}

#party-status {
  margin-bottom: 12px;
}

#viewers-list {
  margin-bottom: 12px;
  padding: 8px;
  background: #0a0a0a;
  border-radius: 6px;
  max-height: 100px;
  overflow-y: auto;
}

.viewer-item {
  padding: 4px 8px;
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}

.viewer-item:before {
  content: "👤 ";
}

.btn-invite {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin: 0 0 8px 0;
  transition: opacity 0.2s;
}

.btn-invite:hover {
  opacity: 0.9;
}

#invite-link-display {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

#invite-link-input {
  flex: 1;
  padding: 8px;
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  font-family: monospace;
}

.btn-copy {
  padding: 8px 12px;
  background: #2a2a2a;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
  margin: 0;
  transition: background 0.2s;
}

.btn-copy:hover {
  background: #3a3a3a;
}

.btn-copy.copied {
  background: var(--accent);
}

/* THEATRE CHAT - Takes remaining space */
.theatre-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #1a1a1a;
  min-height: 0; /* Important for flexbox */
  max-height: 100%; /* Don't expand beyond container */
  overflow: hidden; /* Prevent any expansion */
}

.theatre-chat h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #fff;
  flex-shrink: 0;
}

/* Chat messages - scrollable area */
.chat-messages {
  flex: 1;
  overflow-y: scroll; /* Allow scrolling */
  overflow-x: hidden;
  margin-bottom: 12px;
  padding: 12px;
  background: #0a0a0a;
  border-radius: 8px;
  font-size: 16px;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.chat-messages::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.chat-message {
  margin-bottom: 8px;
  padding: 8px;
  background: #1a1a1a;
  border-radius: 6px;
  line-height: 1.4;
  font-size: 16px;
  flex-shrink: 0;
}

.chat-message strong {
  color: var(--accent);
  margin-right: 4px;
}

/* Chat input at bottom */
.chat-input {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #2a2a2a;
  color: white;
  font-size: 14px;
}

.chat-input input:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-input button {
  padding: 10px 20px;
  background: var(--accent);
  border: none;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
  transition: opacity 0.2s;
}

.chat-input button:hover {
  opacity: 0.9;
}

/* ============ DRAW VIEW ============ */
#draw-view {
  background: white;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#draw-view h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #fff;
}

#draw-view iframe {
  border: 2px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  #board-view {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 16px;
  }
  
  .board-sidebar {
    position: relative;
    top: 0;
  }
  
  #theatre-view {
    flex-direction: column;
  }
  
  .theatre-sidebar {
    width: 100%;
    border-left: none;
    border-top: 2px solid #333;
    max-height: 50vh;
  }
  
  .movie-queue {
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .nav-tabs {
    gap: 4px;
  }
  
  .nav-tab {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .top-nav {
    padding: 12px 16px;
  }
  
  .top-nav h1 {
    font-size: 24px;
  }
  
  .user-pill span {
    display: none;
  }

/* full-width layout */
.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) 280px;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  align-items: start;
}

/* THIS is what makes it stick */
.board-sidebar {
  position: sticky;
  top: 90px; /* below nav bar */
  align-self: start;
}

/* optional */
.radio-widget,
.online-widget {
  background: #111;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .top-nav h1 {
    font-size: 20px;
  }
  
  .nav-tab {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .theatre-sidebar {
    width: 100%;
  }
}

/* ================= FIX BOARD LAYOUT ================= */

/* stop .view from crushing grids */
#board-view.view {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* real board container */
#board-view {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #000;
  color: #fff;
}

/* allow sticky to work */
#board-view,
.board-main,
.board-sidebar {
  overflow: visible;
}

/* sticky sidebar */
.board-sidebar {
  position: right;
  top: 90px;
}

/* force dark widgets */
.radio-widget,
.online-widget {
  background: #111;
  color: #fff;
  border: 1px solid #333;
}

/* remove accidental light theme override */
.online-user {
  background: #2a2a2a;
  color: #fff;
}