@media(max-width:1300px) {
  .detail-content { grid-template-columns: 1fr; gap: 30px; }
  .detail-right { width: 100%; }
  .detail-right .games-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .detail-main { width: 100%; }
}
@media(max-width:1024px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .topbar { padding: 10px 20px; }
  .topbar-cats { display: none; }
}
@media(max-width:768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .hero-emojis { display: none; }
  .topbar-cats { display: none; }
  .topbar { padding: 10px; gap: 10px; }
  .topbar-title { font-size: 18px; }
  .topbar-user { padding: 4px 10px 4px 6px; }
  .topbar-username { max-width: 80px; font-size: 12px; }
  .topbar-logout-btn { display: none; }
  
  .detail-panel { width: 100%; margin: 0; border: none; border-radius: 0; background: var(--bg); }
  .detail-bg { height: 100%; opacity: 0.15; filter: blur(60px); }
  .detail-content { display: flex; flex-direction: column; gap: 0; padding: 0; }
  
  .detail-main { gap: 0; }
  .frame-container { 
    aspect-ratio: 9 / 16 !important; 
    border-radius: 0; 
    border: none; 
    max-height: 85vh;
    box-shadow: none;
    margin-bottom: 0;
  }
  
  .detail-info-row { 
    flex-direction: row; 
    align-items: center; 
    text-align: left; 
    gap: 12px; 
    padding: 8px 15px; 
    background: var(--surface);
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    z-index: 10;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  .detail-img { 
    width: 95px; 
    height: 95px; 
    border-radius: 18px; 
    transform: none; 
    margin-bottom: 0; 
    border: 2px solid rgba(255,255,255,0.1); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.4); 
    flex-shrink: 0;
  }
  .detail-info { 
    align-items: flex-start; 
    text-align: left; 
    height: 95px; 
    padding: 0; 
    width: auto; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    gap: 0;
  }
  .detail-name { 
    font-size: 18px; 
    margin: 0 0 2px 0; 
    padding: 0; 
    font-family: 'Fredoka One', cursive; 
    line-height: 1.1; 
    width: 100%; 
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
  }
  
  .detail-meta-row { 
    justify-content: flex-start; 
    gap: 6px; 
    margin: 10px 0 0 0; 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
  }
  .live-count-badge { padding: 3px 8px; font-size: 9px; border-radius: 5px; background: rgba(43,255,158,0.1); }
  .detail-tag { display: none !important; }
  
  .game-actions { justify-content: flex-start; margin: -5px 0 0 0; width: 100%; }
  .btn-action { 
    width: auto; 
    min-width: 120px;
    justify-content: center; 
    padding: 6px 10px; 
    font-size: 11px; 
    border-radius: 8px; 
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
  .btn-action.active { background: #6366f1; border-color: #818cf8; }
  .fullscreen-btn { right: auto !important; left: 10px !important; }

  .detail-desc-box { 
    padding: 25px 20px; 
    background: transparent; 
    border: none; 
    box-shadow: none;
    line-height: 1.6;
  }
  .detail-desc-box h1 { font-size: 22px; }
  .detail-desc-box h2 { font-size: 20px; }
  .detail-desc-box p, .detail-desc-box li { font-size: 14px; color: #a1a6c5; }

  .detail-right { 
    width: 100%; 
    padding: 40px 15px 60px; 
    background: rgba(0,0,0,0.4); 
    border-top: 1px solid rgba(255,255,255,0.05);
    margin: 0;
    box-sizing: border-box;
  }
  .detail-similar-ttl { 
    font-size: 22px; 
    margin-bottom: 30px; 
    width: 100%; 
    text-align: center; 
    border-bottom: none; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .detail-similar-ttl::after { 
    content: ''; 
    display: block; 
    width: 60px; 
    height: 4px; 
    background: var(--accent); 
    border-radius: 10px; 
    box-shadow: 0 2px 10px rgba(255, 95, 87, 0.3);
  }
  .detail-right .games-grid { 
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    width: 100%;
    margin: 0 auto;
  }
  @media(max-width: 550px) {
    .detail-right .games-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media(max-width: 400px) {
    .topbar { padding: 10px 15px; }
    .topbar-title { font-size: 18px; }
    .topbar-cats { display: none; }
    .topbar-user { padding: 4px 10px; }
    
    .hero-badge { white-space: nowrap !important; font-size: 9px; padding: 4px 10px; border-radius: 20px; margin-bottom: 8px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
    .hero h1 { font-size: 24px; line-height: 1.1; margin-bottom: 6px; }
    .hero p { font-size: 11px; line-height: 1.4; max-width: 100%; }
    .detail-info-row { padding: 10px 20px; gap: 18px; }
    
    .detail-img { width: 120px; height: 120px; border-radius: 18px; flex-shrink: 0; }
    .detail-info { 
      height: 120px; 
      justify-content: center; 
      padding: 0; 
      gap: 10px; 
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    
    .detail-name { 
      font-size: 19px; 
      margin: 0; 
      line-height: 1.1; 
      width: auto; 
      max-width: 250px; 
      white-space: normal; 
      display: -webkit-box; 
      -webkit-line-clamp: 2; 
      line-clamp: 2;
      -webkit-box-orient: vertical; 
      overflow: hidden; 
    }
    .detail-meta-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 0; flex-wrap: wrap !important; transform: none; width: auto; }
    .detail-tags { display: flex; gap: 6px; flex-wrap: wrap !important; }
    .live-count-badge, .detail-tag { font-size: 10px; padding: 4px 10px; }
    
    .game-actions { margin: 0; padding: 0; }
    .btn-action { min-width: 115px; padding: 7px 14px; font-size: 12px; margin: 0; background: rgba(255,255,255,0.08); border-radius: 9px; }
    
    .games-grid, .games-grid.large { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .mute-btn { display: none !important; }
  }
}

/* Hide Like/Dislike buttons for narrow layouts */
@media (max-width: 770px) {
  .btn-like, .btn-dislike {
    display: none !important;
  }
}