/* ============================================================
   App-Specific Styles
   ============================================================ */

/* ===== SHARED APP BASE ===== */
.app-scroll { height: 100%; overflow-y: auto; padding: 20px; }

/* ===== ABOUT APP ===== */
.about-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 20px; border-bottom: 1px solid var(--col-border);
  background: linear-gradient(135deg, rgba(0,229,255,0.05), rgba(108,92,231,0.05));
}
.about-avatar-wrap {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--grad-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; flex-shrink: 0;
  border: 3px solid rgba(0,229,255,0.4);
  box-shadow: 0 0 24px rgba(0,229,255,0.3);
}
.about-name {
  font-family: var(--font-heading); font-size: 22px; font-weight: 900;
  letter-spacing: 2px;
  background: var(--grad-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 4px;
}
.about-title { font-size: 12px; color: var(--col-text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }

.about-body { padding: 16px 20px; overflow-y: auto; height: calc(100% - 140px); }

.about-bio {
  font-size: 13px; color: var(--col-text-dim); line-height: 1.8;
  background: rgba(0,229,255,0.03); border: 1px solid var(--col-border);
  border-radius: var(--border-radius); padding: 14px; margin-bottom: 16px;
}

/* Stats grid */
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.stat-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--col-border);
  border-radius: var(--border-radius);
  padding: 14px; text-align: center;
  transition: all var(--trans-std);
}
.stat-card:hover { border-color: var(--col-primary); box-shadow: 0 0 16px rgba(0,229,255,0.1); }
.stat-card .counter-num { display: block; margin-bottom: 4px; }
.stat-label { font-size: 10px; color: var(--col-text-muted); letter-spacing: 1.5px; text-transform: uppercase; }

/* Games list */
.games-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.games-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: rgba(108,92,231,0.1);
  border: 1px solid rgba(108,92,231,0.25);
  border-radius: 20px;
  font-size: 11px; color: var(--col-secondary);
  transition: all var(--trans-fast);
}
.games-tag:hover { background: rgba(108,92,231,0.2); border-color: rgba(108,92,231,0.5); transform: translateY(-1px); }

/* Content types */
.content-list { display: flex; flex-direction: column; gap: 6px; }
.content-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--col-text-dim); padding: 4px 0;
}
.content-item::before { content: '✓'; color: var(--col-accent); font-weight: bold; flex-shrink: 0; }

/* ===== LIVE APP ===== */
.live-status-hero {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px; gap: 16px;
  background: linear-gradient(135deg, rgba(0,255,136,0.04), rgba(0,229,255,0.04));
  border-bottom: 1px solid var(--col-border);
}
.live-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px;
  border-radius: 30px;
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700; letter-spacing: 3px;
}
.live-badge.online {
  background: rgba(0,255,136,0.1);
  border: 2px solid var(--col-accent);
  color: var(--col-accent);
  box-shadow: 0 0 30px rgba(0,255,136,0.2);
}
.live-badge.offline {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  color: var(--col-text-muted);
}
.live-game-info { font-size: 13px; color: var(--col-text-dim); text-align: center; }
.live-viewers { font-family: var(--font-mono); font-size: 12px; color: var(--col-primary); }

.stream-schedule {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 16px 20px;
}
.schedule-item {
  background: rgba(0,0,0,0.3); border: 1px solid var(--col-border);
  border-radius: var(--border-radius); padding: 12px;
  font-size: 12px;
}
.schedule-day { font-family: var(--font-heading); font-size: 10px; letter-spacing: 1.5px; color: var(--col-primary); margin-bottom: 4px; }
.schedule-time { color: var(--col-text-dim); }
.schedule-type { font-size: 10px; color: var(--col-text-muted); margin-top: 2px; }

/* Currently Playing */
.now-playing-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; }
.np-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.15);
  border-radius: 20px; font-size: 11px; color: var(--col-text-dim);
  transition: all var(--trans-fast);
}
.np-item:hover { border-color: rgba(0,229,255,0.4); color: var(--col-primary); }
.np-item .np-dot { width: 6px; height: 6px; background: var(--col-accent); border-radius: 50%; flex-shrink: 0; }

/* ===== YOUTUBE APP ===== */
.yt-channel-hero {
  padding: 20px;
  background: linear-gradient(135deg, rgba(255,0,0,0.06), rgba(0,0,0,0));
  border-bottom: 1px solid var(--col-border);
  display: flex; align-items: center; gap: 16px;
}
.yt-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  border: 2px solid rgba(255,0,0,0.3);
}
.yt-channel-name { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--col-text); margin-bottom: 4px; }
.yt-handle { font-size: 12px; color: var(--col-text-muted); margin-bottom: 8px; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; padding: 16px;
}
.video-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--col-border);
  border-radius: var(--border-radius);
  overflow: hidden; cursor: pointer;
  transition: all var(--trans-std);
}
.video-card:hover { border-color: rgba(255,0,0,0.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,0,0,0.15); }
.video-thumb {
  height: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; position: relative;
  border-bottom: 1px solid var(--col-border);
}
.video-thumb .play-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; opacity: 0;
  transition: opacity var(--trans-std);
}
.video-card:hover .play-overlay { opacity: 1; }
.video-info { padding: 8px; }
.video-title { font-size: 11px; font-weight: 500; color: var(--col-text); margin-bottom: 3px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-meta { font-size: 10px; color: var(--col-text-muted); }

/* ===== DISCORD APP ===== */
.discord-hero {
  padding: 24px 20px;
  background: linear-gradient(135deg, rgba(88,101,242,0.1), rgba(0,0,0,0));
  border-bottom: 1px solid var(--col-border);
  text-align: center;
}
.discord-logo { font-size: 56px; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(88,101,242,0.5)); }
.discord-server-name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--col-text); margin-bottom: 4px; }
.discord-desc { font-size: 12px; color: var(--col-text-dim); margin-bottom: 16px; line-height: 1.6; }
.discord-perks { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; }
.discord-perk {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(88,101,242,0.05);
  border: 1px solid rgba(88,101,242,0.15);
  border-radius: var(--border-radius);
  font-size: 12px; color: var(--col-text-dim);
  transition: all var(--trans-std);
}
.discord-perk:hover { border-color: rgba(88,101,242,0.4); color: var(--col-text); background: rgba(88,101,242,0.1); }
.perk-icon { font-size: 18px; flex-shrink: 0; }

/* ===== INSTAGRAM APP ===== */
.ig-profile {
  padding: 20px;
  background: linear-gradient(135deg, rgba(225,48,108,0.06), rgba(193,53,132,0.04), rgba(88,81,219,0.06));
  border-bottom: 1px solid var(--col-border);
  display: flex; align-items: center; gap: 16px;
}
.ig-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-shrink: 0;
  padding: 3px;
}
.ig-handle { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--col-text); }
.ig-bio { font-size: 12px; color: var(--col-text-dim); margin-top: 4px; line-height: 1.5; }
.ig-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 16px; }
.ig-cell {
  aspect-ratio: 1;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; cursor: pointer;
  border: 1px solid var(--col-border);
  transition: all var(--trans-std);
  overflow: hidden; position: relative;
}
.ig-cell:hover { border-color: rgba(225,48,108,0.5); transform: scale(1.03); }
.ig-cell-overlay {
  position: absolute; inset: 0;
  background: rgba(225,48,108,0.2);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--trans-std);
  font-size: 18px;
}
.ig-cell:hover .ig-cell-overlay { opacity: 1; }

/* ===== SETUP APP ===== */
.setup-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; height: 100%; }
.setup-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--col-border);
  border-radius: var(--card-radius);
  padding: 16px; overflow: hidden; position: relative;
  transition: all var(--trans-std);
}
.setup-card:hover { border-color: rgba(0,229,255,0.3); box-shadow: 0 0 20px rgba(0,229,255,0.08); }
.setup-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.setup-card-icon { font-size: 28px; }
.setup-card-title { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--col-primary); letter-spacing: 1px; }
.setup-card-sub { font-size: 11px; color: var(--col-text-muted); }
.setup-specs { display: flex; flex-direction: column; gap: 6px; }
.setup-spec-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0,229,255,0.03);
  border-radius: 4px; font-size: 12px;
}
.setup-spec-key { color: var(--col-text-muted); flex-shrink: 0; min-width: 80px; }
.setup-spec-val { color: var(--col-text); font-weight: 500; font-family: var(--font-mono); font-size: 11px; }
.setup-spec-badge {
  margin-left: auto; padding: 2px 8px;
  background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.2);
  border-radius: 10px; font-size: 10px; color: var(--col-primary); flex-shrink: 0;
}
.peripherals-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; }
.peripheral-card {
  background: rgba(0,0,0,0.2); border: 1px solid var(--col-border);
  border-radius: var(--border-radius); padding: 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--col-text-dim);
  transition: all var(--trans-std);
}
.peripheral-card:hover { border-color: rgba(0,229,255,0.3); color: var(--col-text); }
.peripheral-icon { font-size: 24px; flex-shrink: 0; }
.peripheral-name { font-weight: 500; color: var(--col-text); font-size: 11px; }

/* ===== SNAKE GAME APP ===== */
.snake-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: 16px; height: 100%; overflow-y: auto;
  background: rgba(0,0,0,0.5);
}
.snake-header {
  display: flex; align-items: center; gap: 24px;
  width: 100%; justify-content: center;
}
.snake-score-box {
  text-align: center; padding: 8px 20px;
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: var(--border-radius);
}
.snake-score-label { font-size: 10px; color: var(--col-text-muted); letter-spacing: 1.5px; text-transform: uppercase; }
.snake-score-val { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--col-primary); }

#snake-canvas {
  border: 2px solid rgba(0,229,255,0.3);
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,229,255,0.1);
  display: block;
}
.snake-controls {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 4px;
}
.snake-btn-row { display: flex; gap: 4px; }
.snake-d-btn {
  width: 40px; height: 40px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--col-primary);
  transition: all var(--trans-fast);
}
.snake-d-btn:hover { background: rgba(0,229,255,0.15); }
.snake-d-btn:active { background: rgba(0,229,255,0.25); transform: scale(0.95); }

.snake-state-overlay {
  position: absolute; inset: 0;
  background: rgba(5,7,11,0.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  border-radius: 4px;
}
.snake-state-title { font-family: var(--font-heading); font-size: 20px; color: var(--col-primary); letter-spacing: 2px; }
.snake-state-sub { font-size: 12px; color: var(--col-text-dim); }

/* ===== GALLERY APP ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; padding: 16px;
}
.gallery-item {
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--col-border);
  border-radius: var(--border-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; cursor: pointer;
  overflow: hidden; position: relative;
  transition: all var(--trans-std);
}
.gallery-item:hover { border-color: var(--col-primary); transform: scale(1.03); box-shadow: 0 0 20px rgba(0,229,255,0.2); }
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: rgba(0,229,255,0.1);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--trans-std);
  font-size: 20px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 8px 6px 4px;
  font-size: 10px; color: var(--col-text-dim);
  opacity: 0; transition: opacity var(--trans-std);
}
.gallery-item:hover .gallery-label { opacity: 1; }

/* ===== COMMUNITY APP ===== */
.community-hero {
  padding: 24px 20px;
  background: linear-gradient(135deg, rgba(0,229,255,0.05), rgba(108,92,231,0.05));
  border-bottom: 1px solid var(--col-border);
  text-align: center;
}
.community-icon { font-size: 52px; margin-bottom: 12px; filter: drop-shadow(0 0 16px rgba(0,229,255,0.5)); }
.community-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: 2px;
  background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.community-desc { font-size: 12px; color: var(--col-text-dim); margin-top: 8px; line-height: 1.7; max-width: 400px; margin-inline: auto; }
.community-perks-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 16px 20px; }
.community-perk-card {
  background: rgba(0,0,0,0.3); border: 1px solid var(--col-border);
  border-radius: var(--border-radius); padding: 14px;
  text-align: center; transition: all var(--trans-std);
}
.community-perk-card:hover { border-color: rgba(0,229,255,0.3); background: rgba(0,229,255,0.04); transform: translateY(-2px); }
.community-perk-icon { font-size: 28px; margin-bottom: 8px; }
.community-perk-label { font-size: 12px; color: var(--col-text-dim); line-height: 1.4; }